/* Self-hosted fonts. Generated by scripts/fetch-fonts.py from
Google Fonts css2. Removes the render-blocking external font
request (LCP fix) and lets the service worker precache fonts.
All three families are open-licensed (OFL). */
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url(/fonts/Fraunces-latin-ext-2c1b7833.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url(/fonts/Fraunces-latin-b5c27de0.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/fonts/Fraunces-latin-ext-cab03ef6.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/fonts/Fraunces-latin-8ca9c2a4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/fonts/Geist-latin-ext-001175b1.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/fonts/Geist-latin-98bbbccb.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/JetBrainsMono-latin-ext-76306ee8.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/JetBrainsMono-latin-1cd702cd.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/JetBrainsMono-latin-ext-76306ee8.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/JetBrainsMono-latin-1cd702cd.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:400;line-height:1.47;letter-spacing:-0.011em;color:var(--ink);background:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased}
main{display:block}
article{display:block}
nav.crumb{display:block}
img{max-width:100%;display:block}
button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
/* ===== TOKENS ===== */
:root{
/* ===== SURFACES — warm depth ladder (refined from colour audit, June 2026).
Page floor a step darker + cards a step lighter so cards read as raised.
NOTE: --cream-light is still overloaded (light bg AND light-on-dark text in
29 places); splitting it into --surface-section / --text-inverse is pass 2. */
--cream:#F5F5F7; /* page background — the floor */
--paper:#FFFFFF; /* card / callout surface — lifts off the floor */
--surface-section:#FFFFFF; /* near-white section band (owner pick, June 2026 — airy/minimal) */
--text-inverse:#FFFFFF; /* light text/icons on dark forest/ink (semantic alias) */
--cream-light:var(--surface-section); /* re-pointed: section bands + near-white text-on-dark */
/* SAGE (sparingly used now — only for "what we check" block) */
--sage:#E8E8ED;
--sage-deep:#D2D2D7;
/* INK / TEXT */
--ink:#1D1D1F;
--ink-soft:#424245;
--muted:#565659; /* WCAG AA: ~5.9:1 on cream/sage (prev #6E6E73 was ~4.15:1 on sage — failed AA) */
/* FOREST (anchor brand color) */
--forest:#1D1D1F;
--forest-light:#424245;
/* CLAY (signature accent — used boldly for primary actions and emphasis) */
--clay:#6E6E73;
--clay-soft:#D2D2D7;
--clay-deep:#424245; /* text-safe clay — clears AA as small text (was #424245, 3.30:1) */
--line:rgba(24,28,24,0.12);
--line-soft:rgba(24,28,24,0.10); /* bumped from 0.06 (was near-invisible) */
/* ELEVATION — resting shadows so cards lift on touch/mobile, not only on hover */
--shadow-sm:0 1px 2px rgba(24,28,24,0.05),0 2px 6px rgba(24,28,24,0.07);
--shadow-md:0 4px 8px rgba(24,28,24,0.05),0 10px 24px rgba(24,28,24,0.09);
--shadow-lg:0 12px 24px rgba(24,28,24,0.10),0 24px 48px rgba(24,28,24,0.13);
--shadow-paper:0 1px 2px rgba(24,28,24,0.06),0 8px 16px rgba(24,28,24,0.08),0 24px 48px rgba(24,28,24,0.06);
/* SEMANTIC STATE COLOURS — warm/editorial (not cool-tech). For callouts, validation, banners. */
--success:#2D7D46; --success-surface:#E4EBDD;
--warning:#9C5A1E; --warning-surface:#FBEBCF;
--error:#A8341F; --error-surface:#F7E0DA;
--info:#3A5A63; --info-surface:#DEE7E6;
--focus-ring:0 0 0 3px rgba(29,29,31,0.40);
/* TYPE FAMILIES */
--serif:'Fraunces','Georgia','Times New Roman',serif;
--sans:'Geist','Inter','system-ui',sans-serif;
--mono:'JetBrains Mono','ui-monospace','SF Mono',monospace;
/* ===== TYPE SCALE (modular — UI/UX audit; applied to rules progressively) ===== */
--fs-eyebrow:0.72rem; /* 11px — mono eyebrows / labels */
--fs-micro:0.75rem; /* 12px — long mono strings / meta */
--fs-small:0.8125rem; /* 13px — fine print (floors to 14px on mobile) */
--fs-body-sm:0.9375rem; /* 14px — secondary / card body */
--fs-body:1.0625rem; /* 16px — default body */
--fs-lede:1.3125rem; /* 19px — intro paragraphs */
--fs-h4:1.5rem; /* 20px */
--fs-h3:clamp(1.625rem,2.6vw,2.125rem); /* 24px — card serif titles */
--fs-h3-fluid:clamp(1.625rem,2.6vw,2.125rem);
--fs-h2:clamp(1.9rem,3.2vw,2.6rem);
--fs-h1:clamp(2.5rem,5.2vw,3.75rem);
--fs-display:clamp(3.25rem,7vw,5rem);
--ls-eyebrow:0.12em;
/* ===== SPACING SCALE (4/8 — UI/UX audit; applied to rules progressively) ===== */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
--sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
--section-y:var(--sp-8);
--section-y-sm:var(--sp-7);
--container:1200px;
--reading:680px;
--reading-wide:780px;
--radius-sm:6px;
--radius:12px;
--radius-lg:20px;
--radius-input:8px;
}
/* ===== DEPTH — resting elevation so content cards lift at rest (incl. mobile),
not only on :hover. Pairs with the lighter --paper on the darker --cream floor. ===== */
.pain-card,.diff-card,.service-card-v2,.defect-card,.auto-card,.expect-card{box-shadow:var(--shadow-sm)}
/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-0.02em;line-height:1.1;color:var(--ink)}
h1{font-size:var(--fs-h1);line-height:1.06;letter-spacing:-0.025em;font-variation-settings:"opsz" 144,"SOFT" 0}
h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-0.02em}
h3{font-size:var(--fs-h3-fluid);line-height:1.18;letter-spacing:-0.015em}
h4{font-size:var(--fs-h4);line-height:1.28;letter-spacing:-0.01em}
.eyebrow{font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--forest);font-weight:700}
.eyebrow::before{content:"+ ";opacity:0.7}
.mono{font-family:var(--mono);font-size:0.78rem;letter-spacing:0.04em;color:var(--muted)}
/* ===== LAYOUT ===== */
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
h1,h2{text-wrap:balance}
section{padding:var(--section-y) 0;position:relative;scroll-margin-top:96px}
@media(max-width:768px){section{padding:var(--section-y-sm) 0}}
/* ===== TOP UTILITY BAR ===== */
.utility{background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:0.72rem;letter-spacing:0.06em;padding:8px 0;text-align:center;text-transform:uppercase}
.utility span{opacity:0.8;margin:0 12px}
.utility .dot{opacity:0.4}
/* Top utility bar — subtle mono strip, spaced separators, hidden on phones */
.utility-bar{background:var(--cream-light);color:var(--ink-soft);font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;padding:8px 16px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:3px 12px;line-height:1.4}
.utility-bar > span{opacity:0.9}
.utility-bar .dot{opacity:0.3;font-size:0.5em;margin:0;align-self:center}
@media (max-width:680px){.utility,.utility-bar{display:none}}
/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.85);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line-soft)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:var(--container);margin:0 auto}
.logo{font-family:var(--serif);font-size:1.5rem;font-weight:600;letter-spacing:-0.02em;color:var(--ink)}
.logo span{color:var(--forest)}
.nav-links{display:flex;gap:32px;font-size:0.92rem;font-weight:400;color:var(--ink-soft)}
.nav-links a{transition:color 0.2s}
.nav-links a:hover{color:var(--forest)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:500}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-signin{font-size:0.88rem;color:var(--ink-soft);transition:color 0.2s;padding:10px 4px}
.nav-signin:hover{color:var(--forest)}
.nav-cta{background:var(--ink);color:var(--cream);padding:12px 22px;border-radius:999px;font-size:0.92rem;font-weight:600;transition:transform 0.2s,background 0.2s;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.nav-cta:hover{background:var(--forest);transform:translateY(-1px)}
@media(max-width:768px){.nav-links{display:none}.nav-signin{display:none}}
/* ===== COOKIE CONSENT BANNER — PDPA compliance ===== */
.cookie-consent{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:0 20px 48px -12px rgba(29,29,31,0.25);z-index:9998;display:none;font-size:0.92rem;line-height:1.55;color:var(--ink-soft)}
.cookie-consent.show{display:block;animation:cookieFadeIn 0.35s ease-out}
@keyframes cookieFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cookie-consent-title{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--clay);font-weight:700;margin-bottom:8px}
.cookie-consent p{margin:0 0 14px}
.cookie-consent a{color:var(--forest);text-decoration:underline;text-underline-offset:2px}
.cookie-consent-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-consent-btn{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;padding:10px 18px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:background-color 0.15s,border-color 0.15s}
.cookie-consent-btn:hover{background:var(--cream-light)}
.cookie-consent-btn.primary{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.cookie-consent-btn.primary:hover{background:var(--forest);border-color:var(--forest)}
.cookie-consent-btn:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
@media(max-width:560px){.cookie-consent{left:12px;right:12px;bottom:12px;padding:18px 20px}.cookie-consent-actions{flex-direction:column}.cookie-consent-btn{width:100%;text-align:center}}
/* ===== SKIP-TO-CONTENT — accessibility ===== */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--forest);color:var(--cream);padding:12px 18px;text-decoration:none;font-family:var(--mono);font-size:0.78rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;border-radius:0 0 6px 0;z-index:9999;transition:left 0.15s}
.skip-link:focus{left:0;outline:2px solid var(--clay);outline-offset:2px}
/* ===== MOBILE HAMBURGER MENU ===== */
.nav-toggle{display:none;background:transparent;border:1px solid var(--line);width:44px;height:44px;padding:0;cursor:pointer;border-radius:8px;align-items:center;justify-content:center;flex-direction:column;gap:5px;transition:background-color 0.15s,border-color 0.15s;flex-shrink:0}
.nav-toggle:hover{background:var(--paper);border-color:var(--line)}
.nav-toggle:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.nav-toggle-bar{display:block;width:20px;height:2px;background:var(--ink);transition:transform 0.2s ease,opacity 0.2s ease;border-radius:2px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:768px){
.nav-toggle{display:flex}
.nav-links.open{display:flex!important;position:absolute;top:100%;left:0;right:0;background:var(--cream);border-top:1px solid var(--line);padding:24px 32px 28px;flex-direction:column;gap:0;box-shadow:0 16px 32px -12px rgba(29,29,31,0.18);z-index:100}
.nav-links.open a{font-size:1.0625rem;padding:14px 0;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.nav-links.open a:last-child{border-bottom:none}
}
/* ===== HERO ===== */
.hero{padding:36px 0 16px;position:relative;overflow:hidden}
@media(max-width:768px){.hero{padding:28px 0 40px}}
.hero-bg{position:absolute;inset:0;background:none;pointer-events:none}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:48px 48px;opacity:0.4;pointer-events:none;mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%)}
.hero-inner{position:relative;text-align:center;max-width:840px;margin:0 auto}
.hero-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);margin-bottom:28px;flex-wrap:wrap;gap:12px;align-items:center}
.hero-meta .left::before{content:"◐ "}
.hero-meta .center{padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.hero-meta .right::after{content:" ◑"}
@media(max-width:768px){
.hero-meta{flex-direction:column;gap:10px;margin-bottom:32px;font-size:0.65rem;text-align:center}
.hero-meta .center{order:-1;padding:5px 12px}
.hero-meta .right{display:none}
}
.hero h1{margin-bottom:16px;font-weight:600;line-height:1.04}
.hero h1 .italic{font-style:italic;font-weight:400;color:var(--forest)}
.hero-sub{font-size:1.0625rem;color:var(--ink-soft);max-width:560px;margin:0 auto 20px;line-height:1.5}
.hero-cta-row{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:20px}
@media(max-width:768px){
.hero-cta-row{flex-direction:column;gap:12px;margin-bottom:40px;align-items:stretch}
.hero-cta-row .btn-primary{width:100%;justify-content:center}
}
.btn-primary{background:var(--ink);color:var(--cream);padding:17px 34px;border-radius:999px;font-size:1.02rem;font-weight:600;display:inline-flex;align-items:center;gap:10px;transition:transform 0.2s,background 0.2s,box-shadow 0.2s;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--forest);transform:translateY(-2px);box-shadow:var(--shadow-md)}
/* Secondary CTA button — outline, visually subordinate to the filled primary
(keeps WhatsApp as the single primary; this routes to the free web app).
Vertical padding is reduced by the 1.5px border so total height matches. */
.btn-secondary{background:transparent;color:var(--forest);border:1.5px solid var(--forest);box-sizing:border-box;padding:16px 28px;border-radius:999px;font-size:0.95rem;font-weight:500;display:inline-flex;align-items:center;gap:10px;text-decoration:none;transition:transform 0.2s,background 0.2s,color 0.2s}
.btn-secondary:hover{background:var(--forest);color:var(--cream);transform:translateY(-2px)}
.btn-secondary .arrow{transition:transform 0.2s}
.btn-secondary:hover .arrow{transform:translateX(3px)}
.btn-primary .arrow{transition:transform 0.2s}
.btn-primary:hover .arrow{transform:translateX(4px)}
.btn-ghost{color:var(--ink-soft);font-size:0.92rem;display:inline-flex;align-items:center;gap:8px;padding:12px 8px;border-bottom:1px solid var(--line);transition:color 0.2s,border-color 0.2s;min-height:44px}
.btn-ghost:hover{color:var(--forest);border-color:var(--forest)}
/* ===== HERO VISUAL ===== */
.hero-stage{position:relative;height:420px;max-width:780px;margin:0 auto}
.hero-stage-simple{height:380px;max-width:520px}
@media(max-width:768px){.hero-stage{height:340px}.hero-stage-simple{height:300px}}
@media(max-width:480px){.hero-stage{height:280px}.hero-stage-simple{height:260px}}
.report-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-1.5deg);width:340px;background:var(--paper);border-radius:8px;padding:24px;box-shadow:var(--shadow-paper);font-family:var(--mono);font-size:0.7rem;color:var(--ink-soft);z-index:2;animation:floaty 6s ease-in-out infinite}
.report-card-prominent{width:420px;padding:28px 32px;font-size:0.78rem;transform:translate(-50%,-50%) rotate(-0.8deg);box-shadow:0 30px 60px -20px rgba(29,29,31,0.18),0 8px 20px rgba(29,29,31,0.06)}
@media(max-width:768px){.report-card{width:280px;padding:18px;font-size:0.65rem}.report-card-prominent{width:280px;padding:20px;font-size:0.66rem}}
@media(max-width:480px){.report-card-prominent{width:calc(100vw - 56px);max-width:300px;padding:18px 20px;font-size:0.62rem}}
.report-card::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:60px;height:14px;background:rgba(29,29,31,0.12);border-radius:2px}
.report-head{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:16px 0 10px;margin-top:12px;margin-bottom:12px;letter-spacing:0.06em;text-transform:uppercase;font-size:0.62rem}
.report-head strong{color:var(--ink);font-weight:600}
.report-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dotted var(--line-soft)}
.report-row:last-child{border-bottom:none}
.report-row .check{color:var(--forest);font-weight:600}
.report-row .defect{color:var(--clay);font-weight:600}
.report-stamp{position:absolute;bottom:14px;right:14px;color:var(--clay);border:2px solid var(--clay);padding:4px 10px;border-radius:4px;font-weight:600;letter-spacing:0.1em;transform:rotate(-8deg);font-size:0.6rem}
.tape-tag{position:absolute;top:20px;left:8%;background:var(--clay);color:var(--cream-light);padding:8px 16px;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;font-weight:500;transform:rotate(-6deg);box-shadow:var(--shadow-sm);z-index:3;animation:floaty 7s ease-in-out infinite 0.5s}
@media(max-width:768px){.tape-tag{left:2%;font-size:0.62rem;padding:6px 12px}}
.polaroid{position:absolute;bottom:30px;right:6%;width:160px;background:var(--paper);padding:10px 10px 36px;box-shadow:var(--shadow-md);transform:rotate(5deg);z-index:3;animation:floaty 8s ease-in-out infinite 1s}
@media(max-width:768px){.polaroid{width:120px;right:0;bottom:20px}}
.polaroid-img{aspect-ratio:1;background:linear-gradient(135deg,#A8B098 0%,#7A8270 50%,#5C6354 100%);position:relative;overflow:hidden}
.polaroid-img::before{content:"";position:absolute;inset:20% 30% 30% 25%;border:2px solid rgba(255,255,255,0.4);border-radius:50%}
.polaroid-img::after{content:"";position:absolute;top:35%;left:55%;width:30%;height:2px;background:var(--clay);transform:rotate(35deg);box-shadow:0 8px 0 var(--clay),0 -6px 0 var(--clay)}
.polaroid-cap{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft)}
.scan-card{position:absolute;top:50%;left:4%;transform:translateY(-50%) rotate(-4deg);background:var(--ink);color:var(--cream);padding:14px 16px;border-radius:8px;font-family:var(--mono);font-size:0.65rem;letter-spacing:0.08em;box-shadow:var(--shadow-md);z-index:1;animation:floaty 9s ease-in-out infinite 1.5s}
@media(max-width:768px){.scan-card{display:none}}
.scan-card .led{display:inline-block;width:6px;height:6px;background:#86868B;border-radius:50%;margin-right:8px;box-shadow:0 0 8px #86868B;animation:pulse 1.5s ease-in-out infinite}
.scan-card .row{margin-top:6px;opacity:0.7;font-size:0.6rem}
@keyframes floaty{0%,100%{transform:translate(-50%,-50%) rotate(-1.5deg) translateY(0)}50%{transform:translate(-50%,-50%) rotate(-1.5deg) translateY(-6px)}}
.tape-tag{animation:floaty-tag 7s ease-in-out infinite 0.5s}
@keyframes floaty-tag{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-8px)}}
.polaroid{animation:floaty-pol 8s ease-in-out infinite 1s}
@keyframes floaty-pol{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-6px)}}
.scan-card{animation:floaty-scan 9s ease-in-out infinite 1.5s}
@keyframes floaty-scan{0%,100%{transform:translateY(-50%) rotate(-4deg)}50%{transform:translateY(calc(-50% - 8px)) rotate(-4deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
/* ===== FADE IN ===== */
/* Animations are JS-gated: without JS (crawlers, no-script) content is fully
visible; the hero is excluded entirely so the LCP never waits for app.js. */
html.js .fade-in{opacity:0;transform:translateY(24px);transition:opacity 0.8s ease-out,transform 0.8s ease-out}
html.js .fade-in.visible{opacity:1;transform:translateY(0)}
html.js .hero .fade-in{opacity:1;transform:none;transition:none}
.fade-in.delay-1{transition-delay:0.1s}
.fade-in.delay-2{transition-delay:0.2s}
.fade-in.delay-3{transition-delay:0.3s}
.fade-in.delay-4{transition-delay:0.4s}
/* ===== TRUST STRIP ===== */
.trust{padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--cream-light)}
.trust-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}
.trust-label{color:var(--ink)}
.trust-items{display:flex;gap:32px;flex-wrap:wrap}
/* ===== CREDENTIALS BADGE STRIP ===== */
.creds{padding:48px 0;background:var(--paper);border-bottom:1px solid var(--line)}
.creds-inner{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap}
@media(max-width:768px){.creds-inner{gap:24px}}
.cred-hero{display:flex;align-items:center;gap:18px;padding:18px 26px;background:var(--forest);color:var(--cream-light);border-radius:12px;box-shadow:var(--shadow-md);position:relative;transition:transform 0.3s,box-shadow 0.3s}
.cred-hero:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.cred-hero::before{content:"";position:absolute;inset:-1px;border-radius:var(--radius);background:linear-gradient(135deg,var(--clay),transparent 60%);opacity:0.3;z-index:-1}
.cred-shield{width:48px;height:48px;flex-shrink:0;background:var(--clay);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--cream-light)}
.cred-shield svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cred-text{display:flex;flex-direction:column;gap:2px}
.cred-name{font-family:var(--serif);font-size:1.05rem;font-weight:600;letter-spacing:-0.01em;line-height:1.1}
.cred-tier{font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--clay-soft)}
.creds-divider{width:1px;height:48px;background:var(--line)}
@media(max-width:768px){.creds-divider{display:none}}
.creds-list{display:flex;gap:32px;flex-wrap:wrap;align-items:center}
.cred-chip{display:flex;flex-direction:column;gap:2px;text-align:left}
.cred-chip-label{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.cred-chip-name{font-size:0.92rem;font-weight:500;color:var(--ink-soft)}
/* ===== SECTION HEADERS ===== */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:48px;flex-wrap:wrap}
.section-head h2{max-width:none;flex:1 1 100%}
.section-head .meta{flex:0 0 auto;text-align:right;color:var(--muted);font-size:0.92rem;max-width:280px;line-height:1.5}
@media(max-width:768px){.section-head .meta{text-align:left}}
/* ===== PROCESS ===== */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.process-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.process-grid{grid-template-columns:1fr}}
.process-card{background:var(--paper);border-radius:var(--radius);padding:20px;position:relative;box-shadow:var(--shadow-sm);transition:transform 0.3s,box-shadow 0.3s;overflow:hidden}
.process-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.process-num{font-family:var(--mono);font-size:0.7rem;color:var(--muted);letter-spacing:0.1em;margin-bottom:16px}
.process-icon{width:100%;height:126px;border-radius:10px;margin-bottom:18px;background:#EEEEF1;display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(29,29,31,0.05)}
.process-icon svg{display:block;width:100%;height:100%}
.process-card h3{font-family:var(--sans);font-size:1.05rem;font-weight:600;letter-spacing:-0.01em;margin-bottom:6px}
.process-card p{font-size:0.88rem;color:var(--muted);line-height:1.5;margin-bottom:14px}
.process-meta{font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--clay);font-weight:600;padding-top:12px;border-top:1px dashed var(--line)}
/* Credential badge strip (/about/) */
.cred-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin:20px 0 6px}
.cred-badge{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px 12px;text-align:center;box-shadow:var(--shadow-sm)}
.cred-badge-mark{font-family:var(--mono);font-weight:600;font-size:0.8rem;letter-spacing:0.06em;color:var(--ink);width:46px;height:46px;border-radius:50%;background:#EEEEF1;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;box-shadow:inset 0 0 0 1px rgba(29,29,31,0.06)}
.cred-badge-name{font-family:var(--sans);font-weight:600;font-size:0.82rem;color:var(--ink);line-height:1.3;margin-bottom:4px}
.cred-badge-issuer{font-family:var(--mono);font-size:0.58rem;letter-spacing:0.03em;text-transform:uppercase;color:var(--muted);line-height:1.4}
/* ===== SERVICES ===== */
.services{background:var(--cream-light);position:relative}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
@media(max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.services-grid{grid-template-columns:1fr}}
.service{background:var(--paper);padding:32px 28px;transition:background 0.3s;cursor:default}
.service:hover{background:var(--cream-light)}
.service-icon{width:48px;height:48px;border-radius:10px;background:var(--sage);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--forest)}
.service h3{font-family:var(--sans);font-size:1.05rem;font-weight:600;letter-spacing:-0.01em;margin-bottom:8px}
.service p{font-size:0.9rem;color:var(--muted);line-height:1.55}
.service .tag{font-family:var(--mono);font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--forest);margin-bottom:12px;display:inline-block}
/* ===== WHY THIS MATTERS ===== */
.why{background:var(--paper);padding:var(--section-y) 0;border-top:1px solid var(--line);position:relative;overflow:hidden}
.why::before{content:"";position:absolute;top:-200px;left:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(217,219,200,0.4),transparent 60%);pointer-events:none}
.why::after{content:"";position:absolute;bottom:-200px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(110,110,115,0.07),transparent 60%);pointer-events:none}
.why-inner{max-width:100%;margin:0 auto;position:relative}
.why .eyebrow{display:block;text-align:left;margin-bottom:18px}
.why h2{font-family:var(--serif);font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.02em;line-height:1.1;color:var(--ink);margin-bottom:36px;text-align:left}
.why-body{display:flex;flex-direction:column;gap:14px;max-width:760px;margin:0 0 48px}
.why-body p{font-family:var(--sans);font-size:1.0625rem;color:var(--ink-soft);line-height:1.6;margin:0}
.why-body p:first-child{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--forest);line-height:1.4;font-weight:400}
.why-stats{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:24px;align-items:center;background:var(--cream-light);border:1px solid var(--line-soft);border-radius:var(--radius);padding:28px 32px}
@media(max-width:680px){.why-stats{grid-template-columns:1fr;gap:24px;padding:24px}.why-divider{display:none}}
.why-stat{text-align:center}
.why-num{font-family:var(--serif);font-size:clamp(2.25rem,4vw,3rem);font-weight:500;letter-spacing:-0.02em;line-height:1;color:var(--ink);margin-bottom:4px}
.why-unit{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--forest);margin-bottom:8px;font-weight:500}
.why-label{font-size:0.82rem;color:var(--muted);line-height:1.4;max-width:180px;margin:0 auto}
.why-divider{width:1px;height:64px;background:var(--line)}
/* Pain-point grid (replaces 3-stat strip with 6 named stakes) */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:880px){.pain-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.pain-grid{grid-template-columns:1fr}}
.pain-card{background:var(--cream-light);border:1px solid var(--line-soft);border-radius:12px;padding:22px 22px 24px;transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s;position:relative}
.pain-card:hover{transform:translateY(-3px);border-color:var(--clay-soft);box-shadow:var(--shadow-md)}
.pain-num{font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);color:var(--clay);font-weight:600;margin-bottom:10px}
.pain-title{font-family:var(--sans);font-size:1.0625rem;font-weight:600;color:var(--ink);margin-bottom:8px;letter-spacing:-0.005em;line-height:1.3}
.pain-card p{font-size:0.9rem;color:var(--ink-soft);line-height:1.55;margin:0}
/* ===== HANDOVER MOMENT (emotional editorial section) ===== */
.handover{padding:var(--section-y) 0;background:var(--paper);position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.handover::before{content:"";position:absolute;top:0;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(29,29,31,0.04),transparent 60%);pointer-events:none}
.handover-inner{max-width:680px;margin:0 auto;text-align:center;position:relative;z-index:1}
.handover-inner h2{margin-bottom:36px}
.handover-body{text-align:left;max-width:620px;margin:0 auto;font-family:var(--serif);font-size:1.15rem;line-height:1.65;color:var(--ink-soft);font-weight:400}
.handover-body p{margin-bottom:18px}
.handover-body p:last-child{margin-bottom:0}
.handover-close{font-style:italic;color:var(--ink);font-weight:500;padding-top:20px;margin-top:8px;border-top:1px dashed var(--line)}
@media(max-width:680px){.handover{padding:72px 0}.handover-body{font-size:1.0625rem}}
/* ===== WHO WE ARE ===== */
.who{padding:var(--section-y) 0;background:var(--cream-light);position:relative}
.who .section-head{margin-bottom:48px}
/* Mission statement card — sits above founder block in new structure */
.mission-card{background:var(--ink);color:var(--cream-light);border-radius:var(--radius-lg);padding:44px 48px;margin-bottom:36px;position:relative;overflow:hidden}
@media(max-width:760px){.mission-card{padding:32px 28px}}
.mission-card::before{content:"";position:absolute;top:-60px;right:-60px;width:240px;height:240px;background:radial-gradient(circle,rgba(110,110,115,0.18),transparent 60%);pointer-events:none}
.mission-mark{font-family:var(--serif);font-size:5rem;line-height:0.6;color:var(--clay);font-weight:600;font-style:italic;margin-bottom:8px;display:block}
.mission-body{font-family:var(--serif);font-size:clamp(1.125rem,2vw,1.375rem);line-height:1.5;color:var(--cream-light);margin-bottom:24px;font-weight:400;letter-spacing:-0.01em;position:relative;z-index:1}
.mission-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px dashed rgba(255,255,255,0.2);padding-top:18px;flex-wrap:wrap;position:relative;z-index:1}
.mission-name{font-family:var(--serif);font-size:1.05rem;font-weight:500;color:var(--cream-light);letter-spacing:-0.01em}
.mission-role{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--clay-soft)}
/* ===== Our Standard block (replaces former founder block) ===== */
.standard{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:36px;margin-bottom:48px;position:relative;overflow:hidden}
.standard::after{content:"";position:absolute;top:0;right:0;width:240px;height:240px;background:radial-gradient(circle,rgba(29,29,31,0.04),transparent 60%);pointer-events:none}
.standard-credentials{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:32px;position:relative;z-index:1;padding-bottom:32px;border-bottom:1px dashed var(--line)}
@media(max-width:760px){.standard-credentials{grid-template-columns:1fr;gap:20px;padding-bottom:24px;margin-bottom:24px}}
.credential-block{padding:20px;background:var(--cream-light);border:1px solid var(--sage-deep);border-radius:12px;display:flex;flex-direction:column;gap:8px;transition:transform 0.2s,border-color 0.2s}
.credential-block:hover{transform:translateY(-2px);border-color:var(--forest)}
.credential-mark{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--clay);font-weight:700;padding:4px 10px;background:var(--paper);border-radius:99px;border:1px solid var(--clay-soft);align-self:start;display:inline-block}
.credential-name{font-family:var(--serif);font-size:1.0625rem;font-weight:500;color:var(--ink);letter-spacing:-0.005em;margin-top:6px}
.credential-detail{font-size:0.8125rem;color:var(--ink-soft);line-height:1.45;flex-grow:1}
.credential-verify{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--forest);text-decoration:none;border-bottom:1px solid var(--forest);align-self:start;padding-bottom:1px;transition:color 0.2s,border-color 0.2s;font-weight:600}
.credential-verify:hover{color:var(--clay);border-bottom-color:var(--clay)}
.standard-quote{position:relative;z-index:1;max-width:680px}
.standard-quote-mark{font-family:var(--serif);font-size:4rem;font-style:italic;line-height:0.6;color:var(--clay);margin-bottom:6px;font-weight:600;display:block}
.standard-quote-body{font-family:var(--serif);font-size:clamp(1.0625rem,1.8vw,1.25rem);line-height:1.5;color:var(--ink);margin-bottom:14px;font-weight:400;letter-spacing:-0.005em;font-style:italic}
.standard-quote-attribution{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.diff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:48px}
@media(max-width:760px){.diff-grid{grid-template-columns:1fr}}
.diff-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);padding:28px;position:relative;transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s}
/* Feature card — spans both columns, emphasises the unique differentiator */
.diff-card-feature{grid-column:1 / -1;background:linear-gradient(135deg,var(--paper) 0%,var(--cream-light) 100%);border-color:var(--sage-deep);position:relative;overflow:hidden}
.diff-card-feature::before{content:"";position:absolute;top:-80px;right:-80px;width:240px;height:240px;background:radial-gradient(circle,rgba(29,29,31,0.08),transparent 60%);pointer-events:none}
.diff-card-feature .diff-num{color:var(--forest)}
.diff-tag{display:inline-block;font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--clay);font-weight:700;padding:4px 10px;background:var(--paper);border-radius:99px;border:1px solid var(--clay-soft);margin-bottom:14px;position:relative;z-index:1}
.diff-card-feature h3{font-family:var(--serif);font-size:clamp(1.25rem,2.5vw,1.5rem);font-weight:600;letter-spacing:-0.015em;color:var(--ink);margin-bottom:10px;position:relative;z-index:1}
.diff-card-feature p{font-size:0.96rem;color:var(--ink-soft);line-height:1.6;max-width:620px;position:relative;z-index:1}
.diff-card:hover{transform:translateY(-3px);border-color:var(--forest);box-shadow:var(--shadow-md)}
.diff-num{font-family:var(--serif);font-style:italic;font-size:2rem;font-weight:500;color:var(--clay);line-height:1;margin-bottom:14px}
.diff-card h3{font-family:var(--sans);font-size:1.125rem;font-weight:600;letter-spacing:-0.01em;color:var(--ink);margin-bottom:10px;line-height:1.3}
.diff-card p{font-size:0.94rem;color:var(--ink-soft);line-height:1.6;margin:0}
.founding-note-card{background:var(--ink);color:var(--cream-light);border-radius:var(--radius);padding:28px 32px;text-align:center;max-width:780px;margin:0 auto;position:relative;overflow:hidden}
.founding-note-card::before{content:"";position:absolute;top:-30px;right:-30px;width:160px;height:160px;background:radial-gradient(circle,rgba(110,110,115,0.2),transparent 60%);pointer-events:none}
.fnc-tag{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--clay);margin-bottom:14px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:6px}
.founding-note-card p{font-size:0.95rem;line-height:1.65;color:rgba(255,255,255,0.85);margin:0;max-width:640px;margin-left:auto;margin-right:auto;position:relative;z-index:1}
/* ===== TOOLKIT TEASER (replaces inline guideline) ===== */
.toolkit-teaser{padding:var(--section-y) 0;background:var(--cream-light);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.teaser-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:880px){.teaser-inner{grid-template-columns:1fr;gap:40px}}
.teaser-text h2{font-family:var(--serif);font-size:var(--fs-h2);font-weight:600;letter-spacing:-0.02em;line-height:1.1;color:var(--ink);margin-bottom:18px;margin-top:14px}
.teaser-body{font-size:1.05rem;color:var(--ink-soft);line-height:1.65;margin-bottom:24px;max-width:520px}
.teaser-cta{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--cream);padding:14px 26px;border-radius:99px;font-size:0.92rem;font-weight:500;transition:background 0.2s,transform 0.2s;text-decoration:none}
.teaser-cta:hover{background:var(--forest);transform:translateY(-2px)}
.teaser-cta span{transition:transform 0.2s}
.teaser-cta:hover span{transform:translateX(4px)}
.teaser-meta{display:flex;gap:12px;align-items:center;margin-top:18px;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.teaser-preview{position:relative}
.teaser-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:32px;position:relative;transform:rotate(-1deg);box-shadow:var(--shadow-md);transition:transform 0.4s ease}
.teaser-card:hover{transform:rotate(0deg) translateY(-4px);box-shadow:var(--shadow-lg)}
.teaser-card::before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:48px;height:14px;background:var(--clay-soft);opacity:0.7}
.teaser-card-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--muted);padding-bottom:14px;border-bottom:1px dashed var(--line);margin-bottom:18px;margin-top:8px}
.mono-tag{font-family:var(--mono)}
.teaser-card h3{font-family:var(--serif);font-size:1.625rem;font-weight:600;letter-spacing:-0.018em;color:var(--ink);margin-bottom:10px;line-height:1.15}
.teaser-card-lede{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--forest);line-height:1.5;margin-bottom:18px}
.teaser-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:24px;padding:0}
.teaser-list li{font-size:0.9rem;color:var(--ink-soft);padding-left:18px;position:relative;line-height:1.5}
.teaser-list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:1px;background:var(--clay)}
.teaser-card-link{font-family:var(--mono);font-size:0.78rem;letter-spacing:0.08em;color:var(--forest);text-decoration:none;border-bottom:1px solid var(--forest);padding-bottom:2px;transition:color 0.2s,border-color 0.2s}
.teaser-card-link:hover{color:var(--clay);border-color:var(--clay)}
/* Chapter-pills row — signals platform depth in toolkit teaser */
.teaser-chapters{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;margin-top:48px;padding-top:32px;border-top:1px dashed var(--line)}
.chapter-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;background:var(--paper);border:1px solid var(--line);font-size:0.85rem;color:var(--ink-soft);transition:background 0.2s,border-color 0.2s,color 0.2s,transform 0.2s;text-decoration:none}
.chapter-pill:hover{background:var(--cream-light);border-color:var(--forest);color:var(--forest);transform:translateY(-1px)}
.chapter-pill span{font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);color:var(--clay);font-weight:600}
.chapter-pill.featured{background:var(--ink);border-color:var(--ink);color:var(--cream-light)}
.chapter-pill.featured span{color:var(--clay-soft)}
.chapter-pill.featured:hover{background:var(--forest);border-color:var(--forest);color:var(--cream-light)}
/* ===== PAIN GRID 2x2 (tightened from 3x2) ===== */
.pain-grid-2x2{grid-template-columns:repeat(2,1fr);max-width:100%}
@media(max-width:680px){.pain-grid-2x2{grid-template-columns:1fr}}
/* ===== HERO CTA META (single primary + meta line) ===== */
.hero-cta-meta{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.06em;color:var(--ink-soft);margin-top:18px;text-align:center}
.hero-online-link{color:var(--forest);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color 0.2s}
.hero-online-link:hover{color:var(--clay)}
/* ===== NAV PHONE (persistent WhatsApp number in nav) ===== */
.nav-phone{display:inline-flex;align-items:center;gap:8px;color:var(--forest);font-size:0.82rem;font-weight:500;font-family:var(--mono);letter-spacing:0.02em;padding:8px 12px;border-radius:99px;background:rgba(29,29,31,0.06);transition:background 0.2s,color 0.2s}
.nav-phone:hover{background:rgba(29,29,31,0.1);color:var(--ink)}
.nav-phone svg{flex-shrink:0}
@media(max-width:880px){.nav-phone{display:none}}
/* ===== WHAT TO EXPECT (NEW) ===== */
.what-to-expect{padding:var(--section-y) 0;background:var(--cream-light);border-top:1px solid var(--line)}
.expect-grid{display:flex;flex-direction:column;gap:0;margin-top:32px}
.expect-row{display:grid;grid-template-columns:140px 1fr;gap:32px;align-items:start;padding:28px 0;border-bottom:1px dashed var(--line)}
.expect-row:last-child{border-bottom:none}
@media(max-width:680px){.expect-row{grid-template-columns:1fr;gap:8px}}
.expect-time{font-family:var(--serif);font-size:2.25rem;font-weight:500;color:var(--clay);letter-spacing:-0.02em;line-height:1}
.expect-body h4{font-family:var(--sans);font-size:1.125rem;font-weight:600;color:var(--ink);margin-bottom:8px;letter-spacing:-0.005em}
.expect-body p{font-size:0.95rem;color:var(--ink-soft);line-height:1.65;margin:0}
/* ===== COMMON DEFECTS (NEW — replaces placeholder testimonials) ===== */
.common-defects{padding:var(--section-y) 0;background:var(--cream-light)}
.defects-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:760px){.defects-list{grid-template-columns:1fr}}
.defect-item{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;padding:22px 24px;border-bottom:1px dashed var(--line);border-right:1px dashed var(--line)}
.defect-item:nth-child(2n){border-right:none}
.defect-item:nth-last-child(-n+2){border-bottom:none}
@media(max-width:760px){.defect-item{border-right:none;grid-template-columns:auto 1fr}.defect-tag{grid-column:1/-1}}
.defect-num{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.06em;color:var(--clay);font-weight:600;padding-top:3px}
.defect-body h4{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:4px;letter-spacing:-0.005em}
.defect-body p{font-size:0.88rem;color:var(--ink-soft);line-height:1.55;margin:0}
.defect-tag{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.06em;color:var(--forest);background:var(--paper);padding:5px 10px;border-radius:99px;border:1px solid var(--sage-deep);font-weight:500;align-self:center;white-space:nowrap}
.defects-note{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.04em;color:var(--ink-soft);text-align:center;margin-top:24px;font-style:italic;max-width:680px;margin-left:auto;margin-right:auto}
/* ===== AI DEMO STRIP (compact AI proof in Method) ===== */
/* ===== AI STATEMENT (calm restraint, replaces tech-demo aesthetic) ===== */
.ai-statement{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;margin:48px 0 24px;padding:32px 36px;background:var(--cream-light);border:1px solid var(--line-soft);border-radius:var(--radius);position:relative}
@media(max-width:680px){.ai-statement{grid-template-columns:1fr;gap:16px;padding:28px}}
.ai-statement-mark{font-family:var(--serif);font-size:1.5rem;color:var(--forest);font-weight:500;width:36px;height:36px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--sage-deep)}
.ai-statement-text h4{font-family:var(--serif);font-size:1.375rem;font-weight:600;color:var(--ink);letter-spacing:-0.01em;line-height:1.3;margin-bottom:10px}
.ai-statement-text p{font-size:0.95rem;color:var(--ink-soft);line-height:1.6;margin:0}
/* ===== TOOLKIT TEASER (BRIEF — closing transparency play) ===== */
.toolkit-teaser-brief{padding:var(--section-y-sm) 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.toolkit-teaser-brief::before{content:"";position:absolute;top:-100px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,rgba(217,219,200,0.4),transparent 60%);pointer-events:none}
.brief-inner{max-width:580px;margin:0 auto;text-align:center;position:relative;z-index:1}
.brief-badge{display:inline-block;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--forest);padding:6px 14px;background:var(--cream-light);border:1px solid var(--sage-deep);border-radius:99px;margin-bottom:18px;font-weight:500}
.toolkit-teaser-brief h2{font-family:var(--serif);font-size:clamp(1.875rem,4vw,2.625rem);font-weight:600;letter-spacing:-0.02em;line-height:1.1;color:var(--ink);margin-bottom:18px}
.toolkit-teaser-brief p{font-size:1.05rem;color:var(--ink-soft);line-height:1.6;margin-bottom:28px;max-width:520px;margin-left:auto;margin-right:auto}
.brief-cta{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--cream);padding:14px 28px;border-radius:99px;font-size:0.95rem;font-weight:500;transition:background 0.2s,transform 0.2s;text-decoration:none}
.brief-cta:hover{background:var(--forest);transform:translateY(-2px)}
.brief-cta span{transition:transform 0.2s}
.brief-cta:hover span{transform:translateX(4px)}
.brief-meta{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:18px;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
/* ===== STAKES — short lede, no body container ===== */
.why-lede{font-size:1.0625rem;color:var(--ink-soft);line-height:1.65;margin:0 0 36px;max-width:760px;text-align:left;font-weight:400}
/* ===== SERVICES (NEW 3-card SGDefectScan-style) ===== */
.services-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
@media(max-width:880px){.services-grid-3{grid-template-columns:1fr;gap:14px}}
.service-card-v2{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);padding:32px 28px;transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s;display:flex;flex-direction:column;gap:14px}
.service-card-v2:hover{transform:translateY(-3px);border-color:var(--forest);box-shadow:var(--shadow-md)}
.service-tag{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;color:var(--clay);font-weight:600}
.service-card-v2 h3{font-family:var(--serif);font-size:1.375rem;font-weight:600;color:var(--ink);letter-spacing:-0.01em;line-height:1.25;margin:0}
.service-card-v2 > p{font-size:0.92rem;color:var(--ink-soft);line-height:1.6;margin:0}
.service-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.service-list span{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--forest);background:var(--cream-light);padding:5px 10px;border-radius:99px;border:1px solid var(--sage-deep);font-weight:500}
.service-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:0.78rem;letter-spacing:0.06em;color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px;align-self:flex-start;transition:color 0.2s,border-color 0.2s;margin-top:4px}
.service-link:hover{color:var(--clay);border-color:var(--clay)}
/* ===== WHAT WE CHECK ===== */
.what-check{padding:var(--section-y-sm) 0;background:var(--cream-light);border-top:1px solid var(--line)}
.check-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:24px}
@media(max-width:880px){.check-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:540px){.check-grid{grid-template-columns:repeat(2,1fr)}}
.check-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px;background:var(--paper);border:1px solid var(--line-soft);border-radius:10px;text-align:center;transition:border-color 0.2s,transform 0.2s}
.check-item:hover{border-color:var(--forest);transform:translateY(-2px)}
.check-num{font-family:var(--mono);font-size:0.85rem;letter-spacing:0.1em;color:var(--clay);font-weight:600;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:1px solid var(--clay-soft);border-radius:50%}
.check-item span:not(.check-num){font-size:0.85rem;color:var(--ink);font-weight:500;line-height:1.3;letter-spacing:-0.005em}
/* ===== CTA META ===== */
.cta-meta{font-family:var(--mono);font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);opacity:0.75;margin-top:18px;text-align:center}
/* ===== WHAT TO EXPECT — inspection day timeline ===== */
.what-to-expect{padding:var(--section-y) 0;background:var(--paper);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.expect-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:32px;max-width:none}
@media(max-width:760px){.expect-grid{grid-template-columns:1fr}}
.expect-card{display:grid;grid-template-columns:80px 1fr;gap:20px;align-items:start;padding:28px;background:var(--cream);border:1px solid var(--line-soft);border-radius:var(--radius);transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s}
.expect-card:hover{transform:translateY(-3px);border-color:var(--forest);box-shadow:var(--shadow-md)}
@media(max-width:540px){.expect-card{grid-template-columns:1fr;gap:8px;padding:22px}}
.expect-time{font-family:var(--mono);font-size:1.0625rem;letter-spacing:0.04em;color:var(--clay);font-weight:600;padding:8px 14px;background:var(--paper);border:1px solid var(--clay-soft);border-radius:8px;text-align:center;line-height:1;height:fit-content;display:flex;align-items:center;justify-content:center;min-height:44px}
.expect-card h3{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--ink);letter-spacing:-0.01em;margin-bottom:8px;line-height:1.25}
.expect-card p{font-size:0.92rem;color:var(--ink-soft);line-height:1.6;margin:0}
/* ===== COMMON DEFECTS WE FIND — proves expertise through specifics ===== */
.common-defects{padding:var(--section-y) 0;background:var(--cream);border-top:1px solid var(--line-soft)}
.defects-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
@media(max-width:1100px){.defects-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.defects-grid{grid-template-columns:1fr}}
.defect-card{padding:22px 22px 24px;background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s;display:flex;flex-direction:column;gap:10px}
.defect-card:hover{transform:translateY(-3px);border-color:var(--clay-soft);box-shadow:var(--shadow-md)}
.defect-head{display:flex;justify-content:space-between;align-items:center}
.defect-tag{font-family:var(--mono);font-size:0.78rem;letter-spacing:0.06em;font-weight:700;color:var(--clay);width:28px;height:28px;border:1.5px solid var(--clay);border-radius:50%;display:flex;align-items:center;justify-content:center}
.defect-freq{font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);color:var(--muted);text-transform:uppercase;font-weight:500}
.defect-card h3{font-family:var(--sans);font-size:1.0625rem;font-weight:600;color:var(--ink);letter-spacing:-0.005em;line-height:1.3;margin:0}
.defect-card p{font-size:0.88rem;color:var(--ink-soft);line-height:1.55;margin:0}
.defects-note{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;color:var(--muted);text-align:center;margin-top:32px;font-style:italic;opacity:0.75}
/* ===== HERO SUBLINK (replaces ghost CTA — softer secondary path) ===== */
.hero-sublink{display:inline-block;font-family:var(--mono);font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;transition:color 0.2s,border-color 0.2s;margin-top:14px}
.hero-sublink:hover{color:var(--forest);border-color:var(--forest)}
/* Secondary CTA inviting self-serve use of the free web app (distinct from
the WhatsApp primary; clay accent = brand action colour, not a 2nd button) */
.hero-app-cta{font-family:var(--sans);font-size:0.92rem;color:var(--muted);line-height:1.6;margin-top:18px;max-width:var(--reading)}
.hero-app-cta a{color:var(--clay);font-weight:600;text-decoration:none;border-bottom:1px solid var(--clay-soft);padding-bottom:2px;transition:color 0.2s,border-color 0.2s}
.hero-app-cta a:hover{color:var(--clay-deep);border-color:var(--clay)}
/* ===== WHATSAPP FLOAT LABEL (mobile-strengthened) ===== */
.wa-float-label{font-family:var(--sans);font-size:0.85rem;font-weight:600;color:var(--cream);letter-spacing:-0.005em}
/* ===== CTA SINGLE-PRIMARY (with text link secondary) ===== */
.cta-single{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:8px}
.cta-text-link{font-family:var(--mono);font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.65);text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.3);padding-bottom:3px;transition:color 0.2s,border-color 0.2s}
.cta-text-link:hover{color:var(--clay-soft);border-color:var(--clay-soft)}
/* ===== AUTOMATION STACK ===== */
.automation{background:var(--cream);color:var(--ink);padding:var(--sp-6) 0 var(--section-y);position:relative;overflow:hidden;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.automation::after{content:"";position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(110,110,115,0.08),transparent 60%);pointer-events:none}
.automation .section-head h2{color:var(--ink)}
.automation .eyebrow{color:var(--clay)}
.automation .section-head .meta{color:var(--ink-soft)}
.auto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative;margin-top:32px}
@media(max-width:900px){.auto-grid{grid-template-columns:1fr}}
.auto-card{background:var(--paper);padding:32px 28px;position:relative;transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s;border:1px solid var(--line-soft);border-radius:var(--radius)}
.auto-card:hover{transform:translateY(-3px);border-color:var(--forest);box-shadow:var(--shadow-md)}
.auto-num{font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);color:var(--clay);margin-bottom:24px;display:flex;align-items:center;gap:8px;font-weight:600}
.auto-num::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--clay);box-shadow:0 0 8px rgba(110,110,115,0.4);animation:pulse 1.6s ease-in-out infinite}
.auto-card h3{font-family:var(--serif);font-size:1.5rem;font-weight:600;letter-spacing:-0.01em;color:var(--ink);margin-bottom:10px}
.auto-card p{font-size:0.9rem;color:var(--ink-soft);line-height:1.55;margin-bottom:20px}
.auto-spec{font-family:var(--mono);font-size:0.7rem;color:var(--muted);padding-top:14px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px}
.auto-spec .row{display:flex;justify-content:space-between}
.auto-spec .row span:last-child{color:var(--forest);font-weight:500}
.auto-foot{display:flex;justify-content:space-between;align-items:center;margin-top:36px;padding-top:24px;border-top:1px dashed var(--line);font-family:var(--mono);font-size:0.7rem;color:var(--muted);flex-wrap:wrap;gap:12px}
/* ===== VIDEO SHOWCASE ===== */
.video-showcase{margin:0 0 40px;position:relative;z-index:1}
.video-player{display:block;width:100%;max-width:760px;margin-left:auto;margin-right:auto;aspect-ratio:16/9;border:none;background:transparent;padding:0;cursor:pointer;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,0.45),0 8px 24px rgba(0,0,0,0.3);transition:transform 0.4s cubic-bezier(0.2,0.9,0.3,1),box-shadow 0.4s ease}
.video-player:hover{transform:translateY(-4px);box-shadow:0 32px 80px rgba(0,0,0,0.55),0 12px 32px rgba(110,110,115,0.2)}
.video-player:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
.video-poster{position:relative;aspect-ratio:16/9;background:radial-gradient(ellipse at 50% 40%,#141414 0%,#050505 80%);overflow:hidden;border-radius:var(--radius-lg)}
.video-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(180,180,185,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(180,180,185,0.07) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at center,black 10%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,black 10%,transparent 75%);transform:perspective(800px) rotateX(38deg) translateY(8%);transform-origin:50% 50%}
.video-scanline{position:absolute;left:0;right:0;height:140px;top:-20%;background:linear-gradient(180deg,transparent 0%,rgba(110,110,115,0.18) 45%,rgba(110,110,115,0.35) 50%,rgba(110,110,115,0.18) 55%,transparent 100%);animation:videoScan 5.5s ease-in-out infinite;pointer-events:none}
@keyframes videoScan{0%,100%{transform:translateY(0)}50%{transform:translateY(540%)}}
.video-corners{position:absolute;inset:0;pointer-events:none}
.video-corners .corner{position:absolute;width:32px;height:32px;border:2px solid rgba(255,255,255,0.55)}
.video-corners .corner.tl{top:18px;left:18px;border-right:none;border-bottom:none}
.video-corners .corner.tr{top:18px;right:18px;border-left:none;border-bottom:none}
.video-corners .corner.bl{bottom:18px;left:18px;border-right:none;border-top:none}
.video-corners .corner.br{bottom:18px;right:18px;border-left:none;border-top:none}
.video-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:32px 40px;color:var(--cream-light)}
@media(max-width:680px){.video-overlay{padding:20px 24px}}
.video-meta-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.7)}
.video-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid rgba(255,255,255,0.2);border-radius:99px;background:rgba(0,0,0,0.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.video-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--clay);box-shadow:0 0 8px var(--clay);animation:pulse 1.6s ease-in-out infinite;display:inline-block}
.video-runtime{font-variant-numeric:tabular-nums;padding:6px 12px;border:1px solid rgba(255,255,255,0.15);border-radius:6px;background:rgba(0,0,0,0.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.video-center{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:18px;padding:24px 0}
.play-btn{width:84px;height:84px;border-radius:50%;background:var(--clay);color:var(--cream-light);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(110,110,115,0.5),0 0 0 0 rgba(110,110,115,0.4);transition:transform 0.3s,box-shadow 0.3s;position:relative}
.play-btn::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:1.5px solid rgba(110,110,115,0.4);animation:playRing 2.4s ease-out infinite}
.play-btn::after{content:"";position:absolute;inset:-20px;border-radius:50%;border:1.5px solid rgba(110,110,115,0.25);animation:playRing 2.4s ease-out infinite 0.6s}
@keyframes playRing{0%{transform:scale(0.85);opacity:0.8}100%{transform:scale(1.4);opacity:0}}
.video-player:hover .play-btn{transform:scale(1.06);box-shadow:0 12px 40px rgba(110,110,115,0.65)}
.play-btn svg{margin-left:4px}
@media(max-width:680px){.play-btn{width:64px;height:64px}.play-btn svg{width:22px;height:22px}}
/* Non-interactive "coming soon" badge — replaces the play button while no
real video exists. No pulse ring, no hover scale: removes the affordance
that suggests clicking will start a video. */
.video-player-stub{cursor:default;display:block}
.video-player-stub:hover .video-poster{transform:none}
.video-coming-soon-badge{display:inline-block;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:600;color:var(--cream-light);padding:11px 24px;border:1.5px solid rgba(255,255,255,0.55);border-radius:99px;margin-bottom:20px;background:rgba(110,110,115,0.15)}
@media(max-width:680px){.video-coming-soon-badge{font-size:0.66rem;padding:9px 20px;margin-bottom:16px}}
.video-title{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.125rem);font-weight:500;letter-spacing:-0.02em;color:var(--cream-light);margin:0;line-height:1.1}
.video-sub{font-family:var(--sans);font-size:0.95rem;color:rgba(255,255,255,0.7);margin:0;line-height:1.5;max-width:380px}
.video-meta-bottom{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:rgba(255,255,255,0.5);flex-wrap:wrap;gap:8px}
.video-caption{font-family:var(--sans);font-size:0.92rem;color:rgba(255,255,255,0.6);text-align:center;max-width:680px;margin:24px auto 0;line-height:1.6}
/* Active video state — when JS swaps in real player */
.video-player.playing .video-poster{display:none}
.video-player.playing iframe,
.video-player.playing video{width:100%;aspect-ratio:16/9;border:none;display:block;border-radius:var(--radius-lg)}
.toolkit{position:relative;background:var(--cream-light)}
.two-paths{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative}
@media(max-width:900px){.two-paths{grid-template-columns:1fr}}
.path{background:var(--paper);border-radius:var(--radius-lg);padding:36px 32px;position:relative;transition:transform 0.3s,box-shadow 0.3s;border:1px solid var(--line-soft);overflow:hidden}
.path:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.path-free{background:var(--cream-light)}
.path-free::after{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:radial-gradient(circle,var(--clay-soft),transparent 70%);opacity:0.5;pointer-events:none}
.path-paid{background:var(--forest);color:var(--cream-light)}
.path-paid::after{content:"";position:absolute;bottom:-40px;left:-40px;width:160px;height:160px;background:radial-gradient(circle,var(--forest-light),transparent 70%);opacity:0.6;pointer-events:none}
.path-tag{font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--clay);margin-bottom:18px;display:inline-flex;align-items:center;gap:8px;background:rgba(110,110,115,0.12);padding:5px 10px;border-radius:4px;position:relative;z-index:1}
.path-paid .path-tag{color:var(--clay-soft);background:rgba(110,110,115,0.2)}
.path h3{font-family:var(--serif);font-size:1.875rem;font-weight:500;letter-spacing:-0.02em;margin-bottom:12px;position:relative;z-index:1}
.path-paid h3{color:var(--cream-light)}
.path-desc{font-size:0.95rem;color:var(--ink-soft);line-height:1.55;margin-bottom:24px;position:relative;z-index:1}
.path-paid .path-desc{color:rgba(255,255,255,0.8)}
.path-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:28px;position:relative;z-index:1}
.path-list li{font-size:0.92rem;display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft);line-height:1.45}
.path-paid .path-list li{color:var(--cream-light)}
.path-list li::before{content:"";flex-shrink:0;width:14px;height:14px;border-radius:50%;background:var(--sage);margin-top:3px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3D2C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:10px 10px;background-position:center;background-repeat:no-repeat}
.path-paid .path-list li::before{background-color:var(--clay);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1ECE0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.path-cta{position:relative;z-index:1;width:auto}
.path-paid .path-cta{background:var(--cream-light);color:var(--forest)}
.path-paid .path-cta:hover{background:var(--cream);color:var(--ink)}
.path-note{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.06em;color:var(--muted);margin-top:14px;position:relative;z-index:1}
.path-paid .path-note{color:rgba(255,255,255,0.6)}
.path-divider{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:0.9rem;color:var(--muted);z-index:5;box-shadow:var(--shadow-sm)}
@media(max-width:900px){.path-divider{position:relative;top:0;left:0;transform:none;margin:-10px auto;background:var(--cream)}}
/* ===== TOOLKIT GUIDELINE (Editorial Article) ===== */
.toolkit-intro{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:48px}
@media(max-width:768px){.toolkit-intro{grid-template-columns:1fr}}
.tk-intro-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px}
.tk-intro-card h3{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--forest);margin-bottom:10px;font-weight:500}
.tk-intro-card p{font-size:0.94rem;color:var(--ink-soft);line-height:1.6;margin:0}
.tk-intro-card.dark{background:var(--ink);color:var(--cream-light);border-color:var(--ink)}
.tk-intro-card.dark h3{color:var(--clay)}
.tk-intro-card.dark p{color:rgba(255,255,255,0.8)}
.tk-toc{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);padding:20px 24px;margin-bottom:48px}
.tk-toc-label{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:500;display:flex;justify-content:space-between;align-items:center}
.tk-toc-label .read-time{color:var(--forest)}
.tk-toc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
@media(max-width:768px){.tk-toc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tk-toc-grid{grid-template-columns:1fr}}
.tk-toc-link{display:flex;align-items:baseline;gap:10px;padding:10px 12px;border-radius:8px;font-size:0.9rem;color:var(--ink-soft);transition:background 0.2s,color 0.2s}
.tk-toc-link:hover{background:var(--cream-light);color:var(--forest)}
.tk-toc-num{font-family:var(--mono);font-size:0.66rem;color:var(--muted);font-weight:500;letter-spacing:0.04em;flex-shrink:0}
/* Article rooms */
.tk-section{padding-top:56px;padding-bottom:8px;border-top:1px solid var(--line);margin-top:48px;scroll-margin-top:96px}
.tk-section:first-of-type{border-top:none;margin-top:0;padding-top:0}
.tk-section-meta{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.tk-section-meta .duration{color:var(--clay)}
.tk-section h3{font-family:var(--serif);font-size:clamp(1.625rem,3.5vw,2.25rem);font-weight:500;letter-spacing:-0.02em;margin-bottom:6px;color:var(--ink);line-height:1.1}
.tk-section .lede{font-family:var(--serif);font-style:italic;font-size:1.125rem;color:var(--forest);margin-bottom:24px;line-height:1.5;font-weight:400;max-width:680px}
.tk-section h4{font-family:var(--sans);font-size:1.0625rem;font-weight:600;letter-spacing:-0.01em;color:var(--ink);margin:32px 0 10px;display:flex;align-items:center;gap:10px}
.tk-section h4::before{content:"";width:18px;height:1px;background:var(--clay);flex-shrink:0}
.tk-section p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.6;margin-bottom:16px}
.tk-section p strong{color:var(--ink);font-weight:600}
/* Reference list — clean enumerated, not checkboxes */
.ref-list{margin:14px 0 24px;display:flex;flex-direction:column;gap:0;counter-reset:reflist;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.ref-item{counter-increment:reflist;display:flex;gap:18px;align-items:flex-start;padding:14px 0;border-bottom:1px dashed var(--line-soft);font-size:0.96rem;line-height:1.6;color:var(--ink-soft)}
.ref-item:last-child{border-bottom:none}
.ref-item::before{content:counter(reflist,decimal-leading-zero);font-family:var(--mono);font-size:0.7rem;color:var(--clay);font-weight:600;letter-spacing:0.04em;padding-top:3px;flex-shrink:0;min-width:24px}
.ref-item strong{color:var(--ink);font-weight:600;display:block;margin-bottom:2px;font-size:0.96rem}
.ref-item .body{flex:1}
.ref-item .body span{display:block;color:var(--muted);font-size:0.9rem;line-height:1.55}
/* Callouts — keep these for editorial pull-quotes / warnings */
.callout{border-radius:12px;padding:20px 24px;margin:28px 0;font-size:0.96rem;line-height:1.65;display:flex;gap:16px;align-items:flex-start}
.callout-icon{flex-shrink:0;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-weight:600;font-size:1rem}
.callout-pro{background:var(--cream-light);border:1px solid var(--sage-deep)}
.callout-pro .callout-icon{background:var(--sage);color:var(--forest)}
.callout-warn{background:#FBE9DF;border:1px solid var(--clay-soft)}
.callout-warn .callout-icon{background:var(--clay);color:var(--cream-light)}
.callout-tool{background:var(--ink);color:var(--cream-light);border:1px solid var(--ink)}
.callout-tool .callout-icon{background:var(--clay);color:var(--cream-light)}
.callout strong{color:var(--ink);font-weight:600}
.callout-tool strong{color:var(--cream-light)}
.callout-tool a{color:var(--clay-soft);border-bottom:1px solid var(--clay-soft);transition:color 0.2s}
.callout-tool a:hover{color:var(--cream-light)}
/* Pull quote */
.pullquote{font-family:var(--serif);font-style:italic;font-size:1.375rem;line-height:1.4;color:var(--ink);padding:32px 0;margin:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;text-align:center}
.pullquote::before{content:"\201C";font-size:3rem;color:var(--clay);font-family:var(--serif);position:absolute;top:8px;left:50%;transform:translateX(-50%);line-height:1;font-style:normal}
.pullquote-attr{display:block;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);font-style:normal;margin-top:14px}
.tk-conversion{background:var(--forest);color:var(--cream-light);border-radius:var(--radius);padding:36px 32px;margin:56px 0;text-align:center;position:relative;overflow:hidden}
.tk-conversion::before{content:"";position:absolute;top:-30px;right:-30px;width:160px;height:160px;background:radial-gradient(circle,rgba(110,110,115,0.25),transparent 60%);pointer-events:none}
.tk-conversion h3{font-family:var(--serif);font-weight:500;color:var(--cream-light);margin:0 0 10px;font-size:1.625rem;letter-spacing:-0.01em;line-height:1.2}
.tk-conversion p{color:rgba(255,255,255,0.8);margin-bottom:20px;font-size:0.95rem;max-width:560px;margin-left:auto;margin-right:auto;line-height:1.6}
.tk-conversion .cta{background:var(--cream-light);color:var(--forest);padding:13px 24px;border-radius:999px;font-size:0.9rem;font-weight:500;display:inline-flex;align-items:center;gap:8px;transition:transform 0.2s,background 0.2s}
.tk-conversion .cta:hover{background:var(--cream);transform:translateY(-1px)}
.tk-conversion .micro{display:block;margin-top:14px;font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:rgba(255,255,255,0.5)}
.tk-reading{max-width:960px}
.tk-byline{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;margin-bottom:32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.tk-byline strong{color:var(--ink);font-weight:500;letter-spacing:0.06em}
/* ===== WAITLIST / SIGN-UP ===== */
.waitlist{padding:var(--section-y-sm) 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.waitlist-inner{max-width:640px;margin:0 auto;text-align:center}
.waitlist-eyebrow{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--clay);margin-bottom:14px;font-weight:500}
.waitlist h2{font-family:var(--serif);font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:500;letter-spacing:-0.02em;margin-bottom:14px;color:var(--ink);line-height:1.15}
.waitlist h2 .italic{font-style:italic;color:var(--forest);font-weight:400}
.waitlist p{font-size:1.05rem;color:var(--ink-soft);line-height:1.55;margin-bottom:32px;max-width:540px;margin-left:auto;margin-right:auto}
.waitlist-form{display:flex;gap:8px;background:var(--cream-light);border:1px solid var(--line);border-radius:999px;padding:6px;max-width:480px;margin:0 auto;transition:border-color 0.2s,box-shadow 0.2s}
.waitlist-form:focus-within{border-color:var(--forest);box-shadow:0 0 0 4px rgba(29,29,31,0.1)}
.waitlist-form input{flex:1;border:none;background:transparent;padding:12px 18px;font-family:var(--sans);font-size:0.95rem;color:var(--ink);outline:none}
.waitlist-form input::placeholder{color:var(--muted)}
.waitlist-form button{background:var(--ink);color:var(--cream);padding:12px 22px;border-radius:999px;font-size:0.88rem;font-weight:500;cursor:pointer;transition:background 0.2s,transform 0.2s;white-space:nowrap}
.waitlist-form button:hover:not(:disabled){background:var(--forest);transform:translateY(-1px)}
.waitlist-form button:disabled{opacity:0.6;cursor:not-allowed}
@media(max-width:540px){
.waitlist-form{flex-direction:column;border-radius:var(--radius);padding:8px}
.waitlist-form button{padding:14px;border-radius:10px}
}
.waitlist-meta{display:flex;justify-content:center;gap:24px;margin-top:18px;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.waitlist-meta span{display:flex;align-items:center;gap:6px}
.waitlist-meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--forest)}
.waitlist-success{display:none;background:var(--sage);border-radius:var(--radius);padding:20px 24px;font-family:var(--mono);font-size:0.85rem;color:var(--forest);text-align:center;max-width:480px;margin:0 auto}
.waitlist-success.visible{display:block}
.stats{padding:var(--section-y-sm) 0;background:var(--ink);color:var(--cream);position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 50%,rgba(110,110,115,0.1),transparent 40%),radial-gradient(circle at 80% 30%,rgba(29,29,31,0.3),transparent 50%);pointer-events:none}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:48px}}
.stat{border-left:1px solid rgba(255,255,255,0.15);padding-left:24px}
.stat-num{font-family:var(--serif);font-size:clamp(2.5rem,5vw,3.5rem);font-weight:500;letter-spacing:-0.02em;line-height:1;margin-bottom:8px;color:var(--cream)}
.stat-num .unit{color:var(--clay)}
.stat-label{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.6)}
/* ===== FOUNDING COHORT ===== */
.founding-inner{position:relative;text-align:center;max-width:880px;margin:0 auto}
.founding-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--clay-soft);background:rgba(110,110,115,0.12);padding:8px 16px;border-radius:999px;border:1px solid rgba(110,110,115,0.3)}
.founding-sub{color:rgba(255,255,255,0.75);font-size:1.05rem;line-height:1.6;max-width:680px;margin:0 auto 48px;text-align:center}
.founding-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:36px}
@media(max-width:768px){.founding-grid{grid-template-columns:repeat(2,1fr);gap:32px}}
.founding-stat{padding:20px 16px;border-left:1px solid rgba(255,255,255,0.15);text-align:left}
.founding-num{font-family:var(--serif);font-size:clamp(1.875rem,3.5vw,2.5rem);font-weight:500;letter-spacing:-0.02em;color:var(--cream-light);line-height:1;margin-bottom:10px}
.founding-label{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.55);line-height:1.5}
.founding-note{font-family:var(--serif);font-style:italic;font-size:0.95rem;color:rgba(255,255,255,0.55);line-height:1.55;max-width:600px;margin:32px auto 0;padding-top:32px;border-top:1px dashed rgba(255,255,255,0.2);text-align:center}
/* ===== TESTIMONIALS ===== */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.testimonials-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.testimonials-grid{grid-template-columns:1fr}}
.testimonial{background:var(--sage);padding:18px;border-radius:6px;position:relative;transition:transform 0.3s,box-shadow 0.3s}
.testimonial:hover{transform:translateY(-4px) rotate(-0.5deg);box-shadow:var(--shadow-md)}
.testimonial:nth-child(2){background:var(--cream-light);transform:rotate(0.6deg)}
.testimonial:nth-child(2):hover{transform:translateY(-4px) rotate(0.6deg);box-shadow:var(--shadow-md)}
.testimonial:nth-child(4){background:var(--cream-light);transform:rotate(-0.4deg)}
.testimonial:nth-child(4):hover{transform:translateY(-4px) rotate(-0.4deg);box-shadow:var(--shadow-md)}
.testimonial-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-family:var(--mono);font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.testimonial-head strong{color:var(--ink-soft)}
.testimonial-body{font-size:0.92rem;color:var(--ink-soft);line-height:1.55;margin-bottom:18px}
.testimonial-foot{display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px dashed rgba(24,28,24,0.15)}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--forest),var(--forest-light));display:flex;align-items:center;justify-content:center;color:var(--cream);font-family:var(--mono);font-size:0.7rem;font-weight:500;flex-shrink:0}
.testimonial-name{font-size:0.88rem;font-weight:500;color:var(--ink)}
.testimonial-role{font-family:var(--mono);font-size:0.65rem;letter-spacing:0.06em;color:var(--muted);text-transform:uppercase}
.add-story{background:transparent;border:1.5px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 18px;color:var(--muted);transition:border-color 0.3s,color 0.3s,background 0.3s}
.add-story:hover{border-color:var(--forest);color:var(--forest);background:var(--cream-light)}
.add-story .plus{width:36px;height:36px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:10px}
.add-story span{font-style:italic;font-family:var(--serif)}
/* ===== PRICING ===== */
.pricing{background:var(--cream-light)}
.pricing-tag-row{display:flex;justify-content:center;gap:12px;margin-bottom:32px;flex-wrap:wrap}
.price-pill{background:var(--clay-soft);color:var(--ink);padding:6px 14px;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;transform:rotate(-2deg);box-shadow:var(--shadow-sm)}
.price-pill:nth-child(2){background:var(--sage);transform:rotate(2deg)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:640px){.pricing-grid{grid-template-columns:1fr}}
.tier{background:var(--paper);border-radius:var(--radius-lg);padding:32px 28px;position:relative;transition:transform 0.3s,box-shadow 0.3s;border:1px solid var(--line-soft)}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tier.featured{background:var(--forest);color:var(--cream-light);border-color:var(--forest)}
.tier-tag{font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.tier.featured .tier-tag{color:var(--clay-soft)}
.tier-popular{position:absolute;top:20px;right:20px;background:transparent;color:var(--clay);padding:0;font-family:var(--mono);font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;display:flex;align-items:center;gap:6px;font-weight:500}
.tier-popular::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--clay);box-shadow:0 0 6px var(--clay);animation:pulse 1.6s ease-in-out infinite}
.tier-price{font-family:var(--serif);font-size:3rem;font-weight:500;letter-spacing:-0.02em;line-height:1;margin-bottom:6px}
.tier-price .currency{font-size:1rem;vertical-align:top;margin-right:4px;opacity:0.7}
.tier-price .unit{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;font-weight:400;color:var(--muted);margin-left:4px;text-transform:uppercase}
.tier.featured .tier-price .unit{color:rgba(255,255,255,0.6)}
.tier-desc{font-size:0.88rem;color:var(--muted);line-height:1.5;margin-bottom:24px}
.tier.featured .tier-desc{color:rgba(255,255,255,0.75)}
.tier-list{list-style:none;margin-bottom:28px;display:flex;flex-direction:column;gap:10px}
.tier-list li{font-size:0.88rem;display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft)}
.tier.featured .tier-list li{color:var(--cream-light)}
.tier-list li::before{content:"●";color:var(--forest);font-size:0.6rem;margin-top:6px;flex-shrink:0}
.tier.featured .tier-list li::before{color:var(--clay)}
.tier-cta{width:100%;background:var(--ink);color:var(--cream);padding:14px;border-radius:999px;font-size:0.86rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:8px;transition:background 0.2s,transform 0.2s;min-height:48px}
.tier-cta:hover{background:var(--forest);transform:translateY(-1px)}
.tier.featured .tier-cta{background:var(--cream-light);color:var(--forest)}
.tier.featured .tier-cta:hover{background:var(--cream)}
/* ===== FAQ ===== */
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:768px){.faq-grid{grid-template-columns:1fr}}
.faq-item{background:var(--paper);border-radius:var(--radius);padding:22px 24px;border:1px solid var(--line-soft);cursor:pointer;transition:background 0.2s,border-color 0.2s}
.faq-item:hover{background:var(--cream-light);border-color:var(--line)}
.faq-q{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:0.96rem;font-weight:500;color:var(--ink)}
.faq-q .icon{flex-shrink:0;font-size:1.1rem;color:var(--forest);transition:transform 0.3s}
.faq-item.open .faq-q .icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.4s ease,margin 0.4s ease;font-size:0.9rem;color:var(--muted);line-height:1.6}
.faq-item.open .faq-a{max-height:200px;margin-top:14px}
/* ===== CTA SECTION ===== */
.cta{background:var(--sage);position:relative;overflow:hidden;padding:60px 0}
.cta::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 30% 20%,rgba(255,255,255,0.4),transparent 40%),radial-gradient(circle at 80% 80%,rgba(29,29,31,0.1),transparent 40%);pointer-events:none}
.cta-inner{position:relative;text-align:center;max-width:820px;margin:0 auto}
.cta-icons{display:flex;justify-content:space-between;margin-bottom:24px;color:var(--forest);opacity:0.5}
.cta h2{margin-bottom:18px}
.cta-sub{color:var(--ink-soft);font-size:1.05rem;margin-bottom:32px;max-width:520px;margin-left:auto;margin-right:auto}
/* ===== FOOTER ===== */
.footer{background:var(--cream);padding:var(--section-y-sm) 0 32px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;margin-bottom:64px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:540px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .logo{font-size:1.75rem}
.footer-tagline{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.footer-col h3{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink);font-weight:500;margin-bottom:14px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-col a{font-size:0.9rem;color:var(--ink-soft);transition:color 0.2s}
.footer-col a:hover{color:var(--forest)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:0.7rem;letter-spacing:0.06em;color:var(--muted);flex-wrap:wrap;gap:12px}
/* ===== WHATSAPP FLOAT ===== */
.wa-float{position:fixed;bottom:24px;right:24px;background:#157A38;color:white;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px 14px 18px;box-shadow:0 8px 24px rgba(37,211,102,0.4),0 4px 12px rgba(37,211,102,0.25);z-index:60;transition:transform 0.2s,box-shadow 0.2s;text-decoration:none;font-family:var(--sans)}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(37,211,102,0.5),0 6px 16px rgba(37,211,102,0.3)}
.wa-float svg{width:24px;height:24px;flex-shrink:0}
.footer-wa{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);font-family:var(--sans);font-size:0.9rem;font-weight:500;transition:color 0.2s}
.footer-wa svg{width:17px;height:17px;color:#25D366;flex-shrink:0}
.footer-wa:hover{color:#25D366}
@media(max-width:540px){.wa-float{padding:14px;width:56px;height:56px;border-radius:50%}.wa-float-label{display:none}.wa-float svg{width:28px;height:28px}}
/* ===== BOOKING MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(24,28,24,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;opacity:0;transition:opacity 0.25s ease}
.modal-overlay.open{display:flex;opacity:1}
@media(max-width:600px){.modal-overlay{padding:0;align-items:stretch}}
.modal{background:var(--paper);border-radius:var(--radius-lg);width:100%;max-width:560px;box-shadow:var(--shadow-lg);overflow:hidden;transform:translateY(20px) scale(0.98);transition:transform 0.35s cubic-bezier(0.2,0.9,0.3,1);position:relative;display:flex;flex-direction:column;max-height:calc(100vh - 80px)}
.modal-overlay.open .modal{transform:translateY(0) scale(1)}
@media(max-width:600px){.modal{max-width:100%;border-radius:0;max-height:100vh}}
.modal-header{padding:20px 24px 16px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;background:var(--paper);position:sticky;top:0;z-index:5}
.modal-title{font-family:var(--serif);font-size:1.25rem;font-weight:500;letter-spacing:-0.01em}
.modal-meta{font-family:var(--mono);font-size:0.65rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.modal-close{width:32px;height:32px;border-radius:50%;background:var(--cream-light);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--ink-soft);transition:background 0.2s,transform 0.2s}
.modal-close:hover{background:var(--sage);transform:rotate(90deg)}
.modal-progress{display:flex;gap:6px;padding:14px 24px;background:var(--cream-light)}
.progress-dot{flex:1;height:3px;background:var(--line);border-radius:99px;transition:background 0.3s}
.progress-dot.active{background:var(--forest)}
.progress-dot.done{background:var(--forest)}
.modal-body{padding:24px;overflow-y:auto;flex:1}
.modal-step{display:none}
.modal-step.active{display:block;animation:stepIn 0.4s ease both}
@keyframes stepIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
.step-eyebrow{font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--forest);margin-bottom:6px}
.step-title{font-family:var(--serif);font-size:1.5rem;font-weight:500;letter-spacing:-0.02em;margin-bottom:6px}
.step-sub{font-size:0.88rem;color:var(--muted);margin-bottom:20px;line-height:1.5}
/* Calendar */
.cal-month{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-month-label{font-family:var(--serif);font-size:1.05rem;font-weight:500}
.cal-nav{display:flex;gap:8px}
.cal-nav button{width:32px;height:32px;border-radius:8px;background:var(--cream-light);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);transition:background 0.2s,color 0.2s;font-size:0.95rem}
.cal-nav button:hover:not(:disabled){background:var(--sage);color:var(--forest)}
.cal-nav button:disabled{opacity:0.3;cursor:not-allowed}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-weekday{text-align:center;font-family:var(--mono);font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);padding:6px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:0.88rem;font-weight:500;color:var(--ink-soft);cursor:pointer;background:transparent;transition:background 0.15s,color 0.15s,transform 0.15s;font-family:var(--mono);position:relative}
.cal-day:hover:not(.disabled):not(.empty){background:var(--sage);color:var(--forest)}
.cal-day.selected{background:var(--forest);color:var(--cream-light)}
.cal-day.today::after{content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--clay)}
.cal-day.today.selected::after{background:var(--clay-soft)}
.cal-day.disabled{color:var(--line);cursor:not-allowed;opacity:0.5}
.cal-day.empty{cursor:default}
/* Time slots */
.slot-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
@media(max-width:480px){.slot-grid{grid-template-columns:1fr}}
.slot{padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--paper);text-align:left;cursor:pointer;transition:all 0.2s;display:flex;flex-direction:column;gap:2px}
.slot:hover:not(.unavailable){border-color:var(--forest);background:var(--cream-light);transform:translateY(-1px)}
.slot.selected{background:var(--forest);color:var(--cream-light);border-color:var(--forest)}
.slot.unavailable{opacity:0.45;cursor:not-allowed;background:var(--cream-light)}
.slot-time{font-family:var(--mono);font-size:0.85rem;font-weight:500;letter-spacing:0.04em}
.slot-desc{font-size:0.72rem;color:var(--muted)}
.slot.selected .slot-desc{color:rgba(255,255,255,0.7)}
.slot.unavailable .slot-desc::after{content:" · BOOKED"}
/* Package radio cards */
.pkg-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.pkg{padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--paper);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:12px;position:relative}
.pkg:hover{border-color:var(--forest)}
.pkg.selected{border-color:var(--forest);background:var(--cream-light);box-shadow:0 0 0 1px var(--forest) inset}
.pkg-radio{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);flex-shrink:0;position:relative;transition:border-color 0.2s}
.pkg.selected .pkg-radio{border-color:var(--forest)}
.pkg.selected .pkg-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--forest)}
.pkg-info{flex:1;display:flex;justify-content:space-between;align-items:center;gap:8px}
.pkg-name{font-size:0.92rem;font-weight:500;color:var(--ink)}
.pkg-meta{font-family:var(--mono);font-size:0.7rem;color:var(--muted);margin-top:2px}
.pkg-price{font-family:var(--serif);font-size:1.05rem;font-weight:500;color:var(--forest);white-space:nowrap}
/* Form fields */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}
.field label .req{color:var(--clay)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:0.92rem;padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);transition:border-color 0.2s,background 0.2s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--forest);background:var(--cream-light)}
.field textarea{resize:vertical;min-height:70px;font-family:var(--sans)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.field-row{grid-template-columns:1fr}}
/* Modal footer */
.modal-footer{padding:16px 24px;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--paper);position:sticky;bottom:0;z-index:5}
.btn-back{font-size:0.88rem;color:var(--muted);padding:10px 4px;transition:color 0.2s}
.btn-back:hover{color:var(--ink)}
.btn-back:disabled{opacity:0.3;cursor:not-allowed}
.btn-next{background:var(--ink);color:var(--cream);padding:12px 22px;border-radius:999px;font-size:0.88rem;font-weight:500;display:inline-flex;align-items:center;gap:8px;transition:background 0.2s,transform 0.2s}
.btn-next:hover:not(:disabled){background:var(--forest);transform:translateY(-1px)}
.btn-next:disabled{opacity:0.4;cursor:not-allowed}
.modal-wa{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:transparent;border-top:1px dashed var(--line);font-size:0.82rem;color:var(--muted);transition:color 0.2s}
.modal-wa:hover{color:#25D366}
.modal-wa svg{width:16px;height:16px}
/* Confirmation */
.confirm{text-align:center;padding:20px 0}
.confirm-check{width:72px;height:72px;border-radius:50%;background:var(--forest);margin:0 auto 18px;display:flex;align-items:center;justify-content:center;color:var(--cream);animation:popCheck 0.6s cubic-bezier(0.2,0.9,0.3,1.4) both}
@keyframes popCheck{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
.confirm-check svg{width:36px;height:36px;stroke-dasharray:30;stroke-dashoffset:30;animation:drawCheck 0.5s ease 0.3s forwards}
@keyframes drawCheck{to{stroke-dashoffset:0}}
.confirm h3{font-family:var(--serif);font-size:1.625rem;font-weight:500;letter-spacing:-0.01em;margin-bottom:8px}
.confirm-detail{background:var(--cream-light);border-radius:10px;padding:16px;margin:18px 0;text-align:left;font-family:var(--mono);font-size:0.78rem;display:flex;flex-direction:column;gap:6px;border:1px dashed var(--line)}
.confirm-detail .row{display:flex;justify-content:space-between}
.confirm-detail .row span:first-child{color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;font-size:0.66rem}
.confirm-detail .row span:last-child{color:var(--ink);font-weight:500}
.confirm-meta{font-size:0.85rem;color:var(--muted);margin-top:8px}
.ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* ============================================================================
MOBILE OPTIMISATIONS — comprehensive touch & spacing improvements
============================================================================ */
/* Universal mobile touch optimisation */
@media (max-width: 768px) {
/* Section padding tighter */
section { padding: 56px 0 !important; }
/* Container padding — slightly reduced edge-to-edge feel */
.container { padding: 0 20px; }
/* Section heads on mobile — left-align by default, smaller meta */
.section-head { display: block; }
.section-head .meta { margin-top: 16px; font-size: 0.95rem; }
/* Touch target minimums for all interactive elements */
a, button, .btn-primary, .btn-ghost, .nav-cta, .tier-cta, .service-link, .ai-cap-cta, .brief-cta, .faq-q, .nav-phone {
min-height: 44px;
}
/* Faq questions tappable area */
.faq-q { padding: 18px 0; align-items: center; }
/* Pricing tier featured "Most chosen" badge — better spacing on mobile */
.tier-popular {
top: 16px;
right: 16px;
font-size: 0.6rem;
}
/* Pricing cards — tighter padding */
.tier { padding: 28px 22px; }
.tier-list li { padding: 7px 0 7px 24px; font-size: 0.92rem; }
/* Process card layout — proper mobile rhythm */
.process-card { padding: 24px 20px; }
/* Service card v2 — tighter padding */
.service-card-v2 { padding: 28px 22px; }
/* Common defects grid items */
.defect-item { padding: 18px 16px; }
/* Handover body — better mobile reading */
.handover-body p { margin-bottom: 16px; }
/* Footer — single column on smallest mobile */
.footer-grid { gap: 32px !important; }
/* Toolkit teaser brief — tighter */
.toolkit-teaser-brief { padding: 56px 0; }
.brief-meta { font-size: 0.65rem; gap: 8px; }
/* AI statement card — better mobile padding */
.ai-statement { padding: 24px 20px; }
/* Credentials — stack chips properly */
.creds-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
/* Final CTA — proper mobile spacing */
.cta { padding: 56px 0; }
.cta-icons { gap: 16px; margin-bottom: 24px; }
.cta-icons svg { width: 28px; height: 28px; }
/* Booking modal — full-screen on mobile */
.modal-content {
margin: 0;
border-radius: 0;
max-height: 100vh;
height: 100vh;
width: 100vw;
}
/* Floating WhatsApp button — slightly smaller, repositioned */
.wa-float {
bottom: 16px;
right: 16px;
}
/* Mono labels minimum legible size */
.eyebrow, .mono-tag {
font-size: 0.68rem;
}
/* Disable hover-only transforms on mobile (no hover state on touch) */
.btn-primary:hover, .nav-cta:hover, .tier-cta:hover, .ai-cap-cta:hover,
.brief-cta:hover, .service-card-v2:hover, .pain-card:hover, .check-item:hover {
transform: none;
}
/* Smoother momentum scroll on iOS */
body { -webkit-overflow-scrolling: touch; }
/* Prevent horizontal scroll from any overflowing element */
body, html { overflow-x: hidden; }
}
/* Smallest phones (iPhone SE, older Android) */
@media (max-width: 480px) {
.container { padding: 0 16px; }
/* Tighter section padding */
section { padding: 48px 0 !important; }
/* Hero meta strip — very compact */
.hero-meta .center { font-size: 0.6rem; padding: 4px 10px; }
.hero-meta .left { font-size: 0.6rem; }
/* Hero subhead reading-friendly */
.hero-sub { font-size: 1rem; line-height: 1.55; }
/* Reduce video player chrome */
.video-showcase { padding: 0; }
.video-meta-top, .video-meta-bottom { padding: 12px 16px; font-size: 0.6rem; }
/* Pricing — even tighter */
.tier { padding: 24px 18px; }
.tier-price { font-size: 2.5rem; }
/* FAQ padding */
.faq-q { padding: 16px 0; font-size: 0.95rem; }
.faq-a { font-size: 0.92rem; }
/* Common defects on smallest screens — tag below body */
.defect-tag { align-self: flex-start; margin-top: 4px; }
}
/* Prevent iOS auto-zoom on input focus */
input, textarea, select {
font-size: 16px;
}
/* ============================================================================
SUBPAGE STYLES (services/, guides/, locations/)
Shared layout for all secondary pages — keeps brand consistency across silos
============================================================================ */
.subpage-hero{padding:60px 0 44px;background:var(--paper);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.subpage-hero::before{content:"";position:absolute;top:0;right:-120px;width:380px;height:380px;background:radial-gradient(circle,rgba(29,29,31,0.06),transparent 60%);pointer-events:none}
.subpage-hero .container{position:relative;z-index:1;max-width:var(--container)}
.subpage-hero .container>*{max-width:960px}
.subpage-hero .container>h1{max-width:1040px}
.subpage-crumb{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:24px;display:block}
.subpage-crumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;transition:color 0.2s,border-color 0.2s}
.subpage-crumb a:hover{color:var(--forest);border-bottom-color:var(--forest)}
.subpage-crumb .sep{margin:0 8px;opacity:0.5}
.subpage-eyebrow{font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--clay);font-weight:600;margin-bottom:16px}
.subpage-hero h1{font-family:var(--serif);font-size:var(--fs-h1);font-weight:500;letter-spacing:-0.025em;line-height:1.06;margin-bottom:18px;color:var(--ink)}
.subpage-hero h1 .italic{font-style:italic;color:var(--forest)}
.subpage-lede{font-size:var(--fs-lede);color:var(--ink-soft);line-height:1.45;max-width:680px;margin-bottom:32px;font-weight:400}
.subpage-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.subpage-meta{display:flex;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-top:24px;padding-top:20px;border-top:1px dashed var(--line)}
.subpage-body{padding:var(--section-y-sm) 0;background:var(--cream)}
.subpage-body .container{max-width:var(--container)}
/* wide frame, readable text column (left-aligned at the logo edge) */
.subpage-body .container>p,.subpage-body .container>ul,.subpage-body .container>ol,.subpage-body .container>blockquote,.subpage-body .container>.subpage-lede,.subpage-body .container>h2,.subpage-body .container>h3,.subpage-body .container>.subpage-callout,.subpage-body .container>.cred-strip{max-width:960px}
.subpage-body h2{font-family:var(--serif);font-size:clamp(1.5rem,3.5vw,2.25rem);font-weight:500;letter-spacing:-0.015em;line-height:1.15;color:var(--ink);margin:48px 0 18px}
.subpage-body h2:first-child{margin-top:0}
.subpage-body h3{font-family:var(--sans);font-size:1.125rem;font-weight:600;letter-spacing:-0.005em;color:var(--ink);margin:32px 0 12px}
.subpage-body p{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.6;margin-bottom:18px}
.subpage-body p:last-child{margin-bottom:0}
.subpage-body ul, .subpage-body ol{margin:18px 0;padding-left:0;list-style:none}
.subpage-body ul:not(.coverage-list) li{position:relative;padding-left:24px;margin-bottom:12px;color:var(--ink-soft);line-height:1.6;font-size:var(--fs-body)}
.subpage-body ul:not(.coverage-list) li::before{content:"";position:absolute;left:6px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--forest)}
.subpage-body ol{counter-reset:step}
.subpage-body ol li{counter-increment:step;position:relative;padding-left:36px;margin-bottom:14px;color:var(--ink-soft);line-height:1.65}
.subpage-body ol li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--mono);font-size:0.78rem;color:var(--clay);font-weight:600;letter-spacing:0.04em}
.subpage-body strong{color:var(--ink);font-weight:600}
.subpage-body a:not(.btn-primary):not(.btn-secondary){color:var(--forest);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color 0.2s}
.subpage-body a:hover{color:var(--clay)}
.subpage-body blockquote{border-left:3px solid var(--clay);padding:6px 0 6px 22px;margin:24px 0;font-family:var(--serif);font-style:italic;color:var(--ink);font-size:1.0625rem;line-height:1.55}
/* Inline highlight box for key facts */
.subpage-callout{background:var(--cream-light);border:1px solid var(--sage-deep);border-radius:10px;padding:20px 24px;margin:28px 0;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.subpage-callout-mark{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--clay);font-weight:700;padding:4px 10px;background:var(--paper);border-radius:99px;border:1px solid var(--clay-soft);white-space:nowrap;align-self:start}
.subpage-callout-text{color:var(--ink);font-size:0.95rem;line-height:1.55}
.subpage-callout-text p{font-size:0.95rem;color:var(--ink);margin:0}
/* Subpage CTA section */
.subpage-cta{padding:72px 0;background:var(--sage);text-align:center;border-top:1px solid var(--sage-deep)}
.subpage-cta h2{font-family:var(--serif);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:500;color:var(--ink);margin-bottom:14px;letter-spacing:-0.015em}
.subpage-cta p{color:var(--ink-soft);margin-bottom:28px;max-width:520px;margin-left:auto;margin-right:auto}
/* Related links footer */
.subpage-related{padding:var(--section-y-sm) 0;background:var(--paper);border-top:1px solid var(--line)}
.subpage-related h3{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:24px;text-align:center}
.subpage-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0}
.subpage-related-card{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:24px;transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s;display:block;text-decoration:none}
.subpage-related-card:hover{transform:translateY(-2px);border-color:var(--forest);box-shadow:var(--shadow-md)}
.subpage-related-card .tag{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--clay);margin-bottom:8px;font-weight:600}
.subpage-related-card h4{font-family:var(--serif);font-size:1.125rem;font-weight:500;color:var(--ink);margin-bottom:6px;letter-spacing:-0.01em}
.subpage-related-card p{font-size:0.88rem;color:var(--ink-soft);line-height:1.5;margin:0}
@media(max-width:800px){.subpage-related-grid{grid-template-columns:1fr}}
@media(max-width:768px){
.subpage-hero{padding:var(--section-y-sm) 0 40px}
.subpage-body{padding:48px 0}
.subpage-body h2{margin:36px 0 14px}
.subpage-actions{flex-direction:column;align-items:stretch}
.subpage-actions .btn-primary{justify-content:center;width:100%}
}
/* BCA outbound link styling on CONQUAS credential */
.cred-name-link{text-decoration:none;color:inherit;display:block;transition:opacity 0.2s}
.cred-name-link:hover{opacity:0.8}
.cred-name-link:hover .cred-tier{color:var(--clay)}
.footer-link{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;opacity:1;transition:opacity 0.2s}
.footer-link:hover{opacity:1}
/* ============================================================================
WHY-NOT-FREE — Objection-handling section between Method and Why
============================================================================ */
.why-not-free{padding:88px 0;background:var(--cream);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);position:relative;overflow:hidden}
.why-not-free::before{content:"";position:absolute;top:-100px;left:-100px;width:300px;height:300px;background:radial-gradient(circle,rgba(110,110,115,0.05),transparent 60%);pointer-events:none}
.why-not-free .container{position:relative;z-index:1}
.objection-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}
@media(max-width:880px){.objection-grid{grid-template-columns:1fr;gap:40px}}
.objection-head .eyebrow{font-family:var(--mono);font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--clay);font-weight:600;margin-bottom:20px}
.objection-head h2{font-family:var(--serif);font-size:clamp(1.875rem,4vw,2.875rem);font-weight:500;letter-spacing:-0.02em;line-height:1.1;color:var(--ink);margin-bottom:18px}
.objection-meta{font-size:1rem;color:var(--ink-soft);line-height:1.55;max-width:320px}
.objection-cards{display:flex;flex-direction:column;gap:18px}
.objection-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;padding:26px 28px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;transition:transform 0.25s,border-color 0.25s,box-shadow 0.25s}
.objection-card:hover{transform:translateY(-2px);border-color:var(--forest);box-shadow:var(--shadow-md)}
.objection-num{font-family:var(--mono);font-size:0.95rem;color:var(--clay);font-weight:600;letter-spacing:0.04em;padding-top:2px}
.objection-card h3{font-family:var(--sans);font-size:1.0625rem;font-weight:600;color:var(--ink);margin-bottom:10px;letter-spacing:-0.005em;line-height:1.3}
.objection-card p{font-size:0.9375rem;color:var(--ink-soft);line-height:1.6;margin:0}
.objection-card em{font-style:italic;color:var(--ink);font-weight:500}
@media(max-width:560px){
.why-not-free{padding:var(--section-y-sm) 0}
.objection-card{padding:22px;grid-template-columns:1fr;gap:8px}
.objection-num{font-size:0.85rem}
}
/* ===== Hero tease line — differentiator hint below subhead ===== */
.hero-tease{display:inline-flex;align-items:flex-start;gap:8px;font-family:var(--mono);font-size:0.78rem;letter-spacing:0.04em;color:var(--clay);text-transform:none;line-height:1.5;margin:14px auto 28px;padding:10px 18px;background:rgba(110,110,115,0.06);border:1px dashed var(--clay-soft);border-radius:99px;max-width:fit-content}
.hero-tease-mark{font-family:var(--mono);font-weight:700;color:var(--clay);flex-shrink:0}
@media(max-width:560px){
.hero-tease{font-size:0.72rem;padding:10px 16px;border-radius:var(--radius);max-width:none;text-align:left;margin-left:auto;margin-right:auto}
}
/* ============================================================================
HERO 2-COLUMN LAYOUT
Side-by-side text + report card on desktop, stacked on mobile.
============================================================================ */
.hero-content-row{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;margin-top:20px}
.hero-text-col{display:flex;flex-direction:column;align-items:flex-start}
.hero-text-col .hero-sub,
.hero-text-col .hero-tease{text-align:left;margin-left:0;margin-right:0}
.hero-text-col h1{text-align:left}
.hero-text-col .hero-cta-row{margin-top:8px;justify-content:flex-start}
.hero-visual-col{display:flex;align-items:center;justify-content:center;min-height:380px}
.hero-visual-col .hero-stage{margin:0;width:100%;max-width:480px;height:360px}
/* Tighter report card in the side-by-side layout */
@media(min-width:881px){
.hero-content-row .report-card-prominent{width:100%;max-width:440px;font-size:0.74rem;padding:24px 26px;transform:translate(-50%,-50%) rotate(-1.2deg)}
}
/* Mobile: stack columns vertically */
@media(max-width:880px){
.hero-content-row{grid-template-columns:1fr;gap:32px;margin-top:24px}
.hero-text-col{align-items:center}
.hero-text-col h1,
.hero-text-col .hero-sub,
.hero-text-col .hero-tease{text-align:center}
.hero-text-col .hero-cta-row{justify-content:center;align-self:stretch}
.hero-visual-col{min-height:auto}
.hero-visual-col .hero-stage{height:320px;max-width:100%}
}
@media(max-width:560px){
.hero-visual-col .hero-stage{height:280px}
}
/* ============================================================================
WHY PROPDEFECT — compressed version (positioning + 4 proof blocks + 1 feature)
============================================================================ */
.section-head-tight{margin-bottom:32px}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:36px}
@media(max-width:980px){.proof-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.proof-grid{grid-template-columns:1fr}}
.proof-block{background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:8px;transition:transform 0.2s,border-color 0.2s}
.proof-block:hover{transform:translateY(-2px);border-color:var(--forest)}
.proof-mark{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--clay);font-weight:700;padding:4px 10px;background:var(--cream-light);border-radius:99px;border:1px solid var(--clay-soft);align-self:start;display:inline-block}
.proof-name{font-family:var(--sans);font-size:1.0625rem;font-weight:600;color:var(--ink);letter-spacing:-0.005em;margin-top:6px}
.proof-detail{font-size:0.8125rem;color:var(--ink-soft);line-height:1.45;flex-grow:1}
.proof-verify{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--forest);text-decoration:none;border-bottom:1px solid var(--forest);align-self:start;padding-bottom:1px;transition:color 0.2s,border-color 0.2s;font-weight:600}
.proof-verify:hover{color:var(--clay);border-bottom-color:var(--clay)}
.feature-card{background:linear-gradient(135deg,var(--paper) 0%,var(--cream-light) 100%);border:1px solid var(--sage-deep);border-radius:var(--radius);padding:32px 36px;position:relative;overflow:hidden;max-width:780px}
.feature-card::before{content:"";position:absolute;top:-80px;right:-80px;width:240px;height:240px;background:radial-gradient(circle,rgba(29,29,31,0.08),transparent 60%);pointer-events:none}
.feature-tag{display:inline-block;font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--clay);font-weight:700;padding:4px 10px;background:var(--paper);border-radius:99px;border:1px solid var(--clay-soft);margin-bottom:14px;position:relative;z-index:1}
.feature-card h3{font-family:var(--serif);font-size:clamp(1.375rem,2.6vw,1.625rem);font-weight:600;letter-spacing:-0.015em;color:var(--ink);margin-bottom:12px;position:relative;z-index:1;line-height:1.2}
.feature-card p{font-size:1rem;color:var(--ink-soft);line-height:1.6;max-width:640px;position:relative;z-index:1;margin:0}
/* Editorial kicker line at end of Stakes section */
.why-kicker{font-family:var(--serif);font-style:italic;font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.55;color:var(--ink);margin:36px auto 0;padding-top:28px;border-top:1px dashed var(--line);max-width:780px;font-weight:400}
.why-kicker em{font-style:italic;color:var(--forest);font-weight:500}
/* Process deeplink + Pricing questions link — soft footers below sections */
.process-deeplink{text-align:center;margin-top:48px;font-size:0.94rem;color:var(--ink-soft)}
.process-deeplink a{color:var(--forest);text-decoration:none;border-bottom:1px solid var(--forest);padding-bottom:2px;font-weight:500;transition:color 0.2s,border-color 0.2s}
.process-deeplink a:hover{color:var(--clay);border-bottom-color:var(--clay)}
.pricing-questions{text-align:center;margin-top:40px;font-size:0.94rem;color:var(--ink-soft);padding-top:24px;border-top:1px dashed var(--line)}
.pricing-questions a{color:var(--forest);text-decoration:none;border-bottom:1px solid var(--forest);padding-bottom:2px;font-weight:500;transition:color 0.2s,border-color 0.2s}
.pricing-questions a:hover{color:var(--clay);border-bottom-color:var(--clay)}
/* ============================================================================
HERO LAYOUT FIXES — proper side-by-side on desktop, lower stacking breakpoint
============================================================================ */
/* Widen the hero-inner when the content row is inside it */
.hero-inner:has(.hero-content-row){max-width:1200px;text-align:left}
/* Fallback for browsers without :has() — same effect via override of grid container */
.hero-content-row{max-width:1200px;margin-left:auto;margin-right:auto}
/* Tighter column gap, better column ratio */
@media(min-width:761px){
.hero-content-row{grid-template-columns:1.15fr 1fr;gap:64px}
}
/* Lower the stacking breakpoint from 881px → 760px so it stays side-by-side
in narrower viewports (tablet landscape, Claude preview pane, etc) */
@media(max-width:880px) and (min-width:761px){
.hero-content-row{grid-template-columns:1.15fr 1fr;gap:40px}
.hero-text-col{align-items:flex-start}
.hero-text-col h1,
.hero-text-col .hero-sub,
.hero-text-col .hero-tease{text-align:left}
.hero-text-col .hero-cta-row{justify-content:flex-start}
.hero-visual-col{min-height:340px}
}
/* True mobile stacking — under 760px */
@media(max-width:760px){
.hero-content-row{grid-template-columns:1fr;gap:32px}
}
/* ============================================================================
HERO PHOTO PLACEHOLDER — designed to look intentional pre-photo,
swaps cleanly with real ![]()
when ready
============================================================================ */
.hero-photo-placeholder{position:relative;width:100%;max-width:480px;aspect-ratio:4/3;background:linear-gradient(135deg,var(--paper) 0%,var(--cream-light) 60%,var(--cream) 100%);border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(29,29,31,0.12),0 8px 20px rgba(29,29,31,0.04)}
/* Subtle texture pattern */
.hero-photo-placeholder::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(29,29,31,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(29,29,31,0.025) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
/* Inner frame for crop marks */
.hero-photo-placeholder-frame{position:absolute;inset:24px;display:flex;align-items:center;justify-content:center}
/* Corner crop marks — professional photography reference style */
.hero-photo-placeholder-marks{position:absolute;inset:0;pointer-events:none}
.hero-photo-placeholder-marks .mark{position:absolute;width:14px;height:14px;border-color:var(--forest);border-style:solid;border-width:0;opacity:0.4}
.hero-photo-placeholder-marks .mark-tl{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.hero-photo-placeholder-marks .mark-tr{top:0;right:0;border-top-width:1.5px;border-right-width:1.5px}
.hero-photo-placeholder-marks .mark-bl{bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}
.hero-photo-placeholder-marks .mark-br{bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}
/* Sample inspection checklist — clipboard/printed-form aesthetic.
Replaces the photo placeholder text. Clearly labeled as a sample.
Swaps to real ![]()
when a hero photograph exists. */
.hero-checklist{position:relative;width:100%;height:100%;padding:30px 32px 28px;display:flex;flex-direction:column;gap:18px;font-family:var(--sans);color:var(--ink);background:var(--paper);border-radius:6px;box-shadow:inset 0 0 0 1px var(--line-soft)}
.hero-checklist-head{padding-bottom:14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.hero-checklist-eyebrow{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--clay);font-weight:600;margin:0}
.hero-checklist-head h2{font-family:var(--serif);font-size:1.55rem;font-weight:500;letter-spacing:-0.02em;line-height:1.05;color:var(--ink);margin:0}
.hero-checklist-head h2 span{font-style:italic;color:var(--forest);font-weight:400}
.hero-checklist-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px;flex:1}
.hero-checklist-list li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:center;font-size:0.86rem;line-height:1.35;color:var(--ink-soft)}
.hero-checklist-list li.done{color:var(--ink)}
.hero-checklist-box{width:16px;height:16px;border:1.5px solid var(--line);border-radius:3px;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--forest)}
.hero-checklist-list li.done .hero-checklist-box{border-color:var(--forest);background:rgba(29,29,31,0.04)}
.hero-checklist-box svg{width:14px;height:14px}
.hero-checklist-foot{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
@media(max-width:760px){
.hero-checklist{padding:26px 26px 22px;gap:14px}
.hero-checklist-head h2{font-size:1.4rem}
.hero-checklist-list{gap:11px}
.hero-checklist-list li{font-size:0.82rem}
}
@media(max-width:480px){
.hero-checklist{padding:22px 22px 20px;gap:12px}
.hero-checklist-head h2{font-size:1.25rem}
.hero-checklist-list{gap:10px}
}
/* Mobile sizing */
@media(max-width:760px){
.hero-photo-placeholder{max-width:380px;margin:0 auto}
}
@media(max-width:480px){
.hero-photo-placeholder{max-width:100%;aspect-ratio:5/4}
}
/* When real photo is added — the ![]()
tag should be placed directly inside
.hero-visual-col and will auto-style with these rules */
.hero-visual-col img{width:100%;max-width:480px;aspect-ratio:4/5;object-fit:cover;border-radius:8px;box-shadow:0 30px 60px -20px rgba(29,29,31,0.18),0 8px 20px rgba(29,29,31,0.06);display:block}
/* ===== ACCESSIBILITY: respect user's reduced-motion preference ===== */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
.fade-in{opacity:1!important;transform:none!important}
}
/* ===== APP CTA LINK (marketing site → web app) ===== */
.subpage-app-link{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:0.82rem;letter-spacing:0.02em;color:var(--forest);border-bottom:1px solid var(--forest);text-decoration:none;padding-bottom:2px;transition:color 0.2s,border-color 0.2s}
.subpage-app-link:hover,.subpage-app-link:focus-visible{color:var(--clay);border-color:var(--clay)}
.tk-conversion .subpage-app-link{display:block;margin-top:16px}
/* ===== PRICING PAGE — package tables ===== */
.price-intro{font-size:var(--fs-body);color:var(--ink-soft);line-height:1.6;margin-bottom:8px}
.price-packages{margin:18px 0 8px;padding:0;list-style:none}
.price-packages li{position:relative;padding-left:0;margin-bottom:14px;color:var(--ink-soft);line-height:1.6}
.price-packages li strong{font-family:var(--sans);color:var(--ink);font-weight:600}
.price-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);-webkit-overflow-scrolling:touch;margin:8px 0 6px}
.price-table{width:100%;min-width:520px;border-collapse:collapse;font-size:0.92rem;table-layout:fixed}
.price-table th:first-child,.price-table td:first-child{width:26%}
.price-table thead th{background:var(--forest);color:var(--cream);font-family:var(--mono);font-size:0.64rem;letter-spacing:0.05em;text-transform:uppercase;font-weight:500;padding:14px 12px;text-align:right;vertical-align:bottom;white-space:nowrap}
.price-table thead th:first-child{text-align:left}
.price-table thead th.is-popular{background:var(--clay);color:#fff}
.price-table .pop-tag{display:block;font-size:0.58rem;margin-top:3px;opacity:0.9;letter-spacing:0.04em;font-weight:400}
.price-table tbody td{padding:13px 12px;text-align:right;border-top:1px solid var(--line);font-family:var(--mono);color:var(--ink);white-space:nowrap}
.price-table tbody td:first-child{text-align:left;font-family:var(--sans);color:var(--ink-soft);white-space:normal}
.price-table tbody td.is-popular{background:rgba(110,110,115,0.10)}
.price-table tbody tr:hover td{background:rgba(29,29,31,0.035)}
.price-table tbody tr:hover td.is-popular{background:rgba(110,110,115,0.16)}
.price-table tbody tr.is-poa td{color:var(--muted)}
.price-includes{margin-top:22px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--cream-light);font-size:0.92rem;color:var(--ink-soft);line-height:1.65}
.price-includes strong{font-family:var(--sans);color:var(--ink);font-weight:600}
/* Pricing tables → stacked cards on phones (no side-scroll; top conversion content) */
@media (max-width:640px){
.price-table-wrap{overflow-x:visible;border:none;background:none;border-radius:0;margin:4px 0}
.price-table{min-width:0;font-size:1rem}
.price-table thead{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.price-table tbody tr{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:6px 16px 12px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.price-table tbody tr:hover td,.price-table tbody tr:hover td.is-popular{background:none}
.price-table tbody td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;text-align:right;border-top:1px solid var(--line-soft);padding:10px 6px;white-space:normal}
.price-table tbody td:first-child{border-top:none;text-align:left;font-family:var(--serif);font-size:1.15rem;font-weight:500;color:var(--ink);padding:10px 6px 6px}
.price-table tbody td:not(:first-child)::before{content:attr(data-label);font-family:var(--mono);font-size:0.64rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left}
.price-table tbody td.is-popular{background:rgba(110,110,115,0.09);border-radius:6px;color:var(--clay-deep);font-weight:600}
.price-table tbody td.is-popular::before{color:var(--clay-deep)}
.price-table tbody tr.is-poa td{color:var(--muted)}
}
/* ===== GALLERY — homepage visual proof (defects · on site · coverage) ===== */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-6)}
.gallery-item{margin:0;background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform 0.3s,box-shadow 0.3s}
.gallery-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.gallery-media{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,var(--sage),var(--sage-deep));display:flex;align-items:center;justify-content:center;overflow:hidden}
.gallery-media img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-ph{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:0.14em;text-transform:uppercase;color:var(--forest);opacity:0.45}
.gallery-cap{padding:var(--sp-4) var(--sp-5) var(--sp-5)}
.gallery-tag{display:inline-block;font-family:var(--mono);font-size:var(--fs-eyebrow);letter-spacing:0.1em;text-transform:uppercase;color:var(--clay-deep);font-weight:500;margin-bottom:var(--sp-2)}
.gallery-title{display:block;font-family:var(--serif);font-size:var(--fs-h4);font-weight:500;color:var(--ink);line-height:1.2;letter-spacing:-0.01em;margin-bottom:var(--sp-1)}
.gallery-note{display:block;font-family:var(--sans);font-size:var(--fs-body-sm);color:var(--muted);line-height:1.55}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gallery-grid{grid-template-columns:1fr}}
.price-note{font-size:0.84rem;color:var(--muted);line-height:1.6;margin-top:10px}