/* ============================================================ The Lifestyliste - shared stylesheet Three soft-feminine, warm-neutral directions on one skeleton. Switch via and . ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth} img{display:block;max-width:100%} button{font:inherit;color:inherit;cursor:pointer;background:none;border:none} a{color:inherit;text-decoration:none} ul{list-style:none} /* ---------- shared tokens (Direction 1 = default) ---------- */ :root{ --bg:#f5ede1; --surface:#fbf6ee; --surface-2:#f0e6d6; --ink:#3b312a; --ink-soft:#6e6256; --ink-faint:#807366; --line:#e3d7c5; --accent:#1f6f6d; --accent-deep:#164f4d; --accent-warm:#8b641f; --accent-warm-deep:#6f4d16; --sage-tint:#e0eeee; --sand:#ead9b6; --radius:3px; --radius-lg:4px; --maxw:1180px; --gut:clamp(20px,5vw,72px); --font-display:"Cormorant Garamond",Georgia,serif; --font-body:"Mulish",system-ui,sans-serif; --display-weight:500; --display-tracking:-0.01em; --display-leading:1.04; --body-weight:400; --eyebrow-style:none; } /* ---------- Direction 2 · Bloei (soft botanical) ---------- */ [data-dir="2"]{ --bg:#f7ebe1; --surface:#fffaf3; --surface-2:#f6e4d8; --ink:#493a31; --ink-soft:#7c6a5d; --ink-faint:#86766a; --line:#eddacb; --accent:#257c79; --accent-deep:#185b59; --accent-warm:#8b641f; --accent-warm-deep:#6f4d16; --sage-tint:#e1f0ef; --sand:#efdcb8; --radius:18px; --radius-lg:28px; --font-display:"Hanken Grotesk",system-ui,sans-serif; --font-body:"Hanken Grotesk",system-ui,sans-serif; --font-quote:"Spectral",Georgia,serif; --display-weight:700; --display-tracking:-0.02em; --display-leading:1.08; --body-weight:400; } /* ---------- Direction 3 · Stilte (minimal airy) ---------- */ [data-dir="3"]{ --bg:#f3f0e9; --surface:#f3f0e9; --surface-2:#ece7dc; --ink:#2b251f; --ink-soft:#675f56; --ink-faint:#7f756a; --line:#dcd4c6; --accent:#216f6c; --accent-deep:#184f4d; --accent-warm:#8b641f; --accent-warm-deep:#6f4d16; --sage-tint:#e0eeee; --sand:#e8d8b7; --radius:0px; --radius-lg:0px; --maxw:1080px; --font-display:"Newsreader",Georgia,serif; --font-body:"Jost",system-ui,sans-serif; --font-quote:"Newsreader",Georgia,serif; --display-weight:400; --display-tracking:-0.005em; --display-leading:1.1; --body-weight:300; } /* ---------- base ---------- */ body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); font-weight:var(--body-weight); font-size:clamp(16px,1.05vw,18px); line-height:1.65; } .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)} section{position:relative} section[id]{scroll-margin-top:clamp(84px,9vh,112px)} h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--display-weight); letter-spacing:var(--display-tracking);line-height:var(--display-leading);color:var(--ink); text-wrap:balance} h1{font-size:clamp(2.7rem,6.4vw,5rem)} h2{font-size:clamp(2.1rem,4.4vw,3.5rem)} h3{font-size:clamp(1.4rem,2.4vw,2rem)} p{text-wrap:pretty} .lead{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.6;color:var(--ink-soft);max-width:46ch} .it{font-style:italic;color:var(--accent-warm)} .challenge-title .keep-one-line{white-space:nowrap} /* bilingual: default content is Dutch; JS swaps textContent on .t nodes */ /* ---------- eyebrow / section labels ---------- */ .eyebrow{display:inline-flex;align-items:center;gap:.6em; font-family:var(--font-body);font-size:.72rem;font-weight:600; letter-spacing:.18em;text-transform:none;color:var(--accent-deep)} .eyebrow::before{display:none} [data-dir="2"] .eyebrow{background:var(--surface-2);color:var(--accent-deep); padding:.5em 1em;border-radius:999px;letter-spacing:.08em} [data-dir="2"] .eyebrow::before{display:none} [data-dir="3"] .eyebrow{color:var(--ink-faint);letter-spacing:.14em;font-weight:500;font-size:.68rem} [data-dir="3"] .eyebrow::before{display:none} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:.6em; font-family:var(--font-body);font-weight:600;font-size:.98rem;letter-spacing:.01em; padding:1.05em 1.9em;border-radius:var(--radius); background:var(--accent);color:#fff8f1;transition:.25s ease;white-space:nowrap} .keep-one-line{white-space:nowrap} .challenge-copy .keep-one-line{white-space:normal} .btn:hover{background:var(--accent-deep);transform:translateY(-1px)} .btn .arr{transition:transform .25s ease} .btn:hover .arr{transform:translateX(3px)} .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);padding:1.05em 1.7em} .btn-ghost:hover{background:var(--surface);border-color:var(--accent);color:var(--accent-deep);transform:translateY(-1px)} [data-dir="2"] .btn{border-radius:999px;box-shadow:0 8px 20px -10px rgba(170,94,66,.6)} [data-dir="2"] .btn-ghost{border-radius:999px;box-shadow:none} [data-dir="3"] .btn{border-radius:0;background:var(--ink);padding:1.1em 2.2em} [data-dir="3"] .btn:hover{background:var(--accent)} [data-dir="3"] .btn-ghost{border-radius:0;border:none;border-bottom:1px solid var(--ink);padding:.4em 0; color:var(--ink)} [data-dir="3"] .btn-ghost:hover{background:none;border-color:var(--accent);color:var(--accent-deep)} /* ---------- nav ---------- */ .nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 88%,transparent); backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s} .nav.scrolled{border-color:var(--line)} .nav-in{max-width:var(--maxw);margin:0 auto;padding:1.1rem var(--gut); display:flex;align-items:center;justify-content:space-between;gap:2rem} .brand{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);font-size:1.5rem;font-weight:var(--display-weight);letter-spacing:.01em;white-space:nowrap;line-height:1} .brand-image{min-width:82px} .brand-logo{display:block;width:clamp(78px,8vw,98px);height:auto;max-height:68px;object-fit:contain;object-position:left center} .brand-logo-nav{filter:drop-shadow(0 6px 14px rgba(45,35,31,.18))} .brand-logo-icon{width:92px;height:72px;max-height:none;object-fit:contain} .brand-footer-image{display:inline-flex;align-items:center;flex-direction:column;gap:.25rem;margin-bottom:1rem;text-align:center} .brand-logo-footer{width:clamp(106px,10vw,142px);height:auto;max-height:none;object-fit:contain;transform:translateX(2.4rem);filter:drop-shadow(0 10px 20px rgba(45,35,31,.14))} .brand-lockup{align-items:center;flex-direction:column;gap:.25rem} .brand-tagline{display:block;width:max-content;margin-top:-1.45rem;transform:translateX(.18rem);font-family:var(--font-body);font-size:.76rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);line-height:1.15} .brand-ic{width:1.45em;height:1.45em;flex:0 0 auto} .brand-word{display:inline-block} .brand .it{font-style:italic;color:var(--accent-deep)} [data-dir="2"] .brand{font-weight:700;font-family:var(--font-body);letter-spacing:-.02em} .nav-links{display:flex;gap:1.9rem;align-items:center} .nav-links a{font-size:.92rem;color:var(--ink-soft);font-weight:500;transition:color .2s;position:relative} .nav-links a:hover{color:var(--ink)} .nav-right{display:flex;align-items:center;gap:1.2rem} .lang{display:inline-flex;align-items:center;font-size:.78rem;font-weight:600;letter-spacing:.06em; border:1px solid var(--line);border-radius:999px;overflow:hidden} .lang button{padding:.4em .8em;color:var(--ink-faint);transition:.2s} .lang button[aria-pressed="true"]{background:var(--accent);color:#fff8f1} .nav-cta{font-size:.9rem;padding:.7em 1.3em} .menu-btn{display:none} @media(max-width:900px){ .nav-links{display:none} .nav-cta{display:none} } /* ---------- hero ---------- */ .hero{padding:clamp(3rem,7vw,6rem) 0 clamp(3.5rem,7vw,6.5rem)} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center} .hero-photo{ position:relative; min-height:clamp(620px,70vw,780px); display:grid; align-items:center; overflow:hidden; background:var(--bg); } .hero-bg-picture{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;overflow:hidden} .hero-bg-img{display:block;width:100%;height:100%;object-fit:cover;object-position:58% center} .hero-photo::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background: linear-gradient(90deg, rgba(245,237,225,.97) 0%, rgba(245,237,225,.86) 36%, rgba(245,237,225,.22) 48%, rgba(245,237,225,0) 58%), linear-gradient(180deg,rgba(59,49,42,.08),rgba(59,49,42,.22))} .hero-photo .hero-grid{grid-template-columns:minmax(0,42ch) minmax(0,1fr);width:100%} .hero-photo .hero-copy{max-width:42ch} .hero-photo .hero-grid,.hero-photo .wrap{position:relative;z-index:1} .hero-photo::before{content:none} .hero-eyebrow{margin-bottom:1.6rem} .hero h1{margin-bottom:2.5rem;line-height:1.08} .hero h1 .it{font-style:italic;color:var(--accent-warm)} .hero h1>span{display:block} .hero-subline{font-size:clamp(1.45rem,3.2vw,2.5rem);line-height:1.16;color:var(--accent-warm);font-style:italic;max-width:18ch;margin-top:.55rem} .hero .lead{margin-bottom:2.3rem;max-width:42ch} .hero-cta{display:flex;flex-direction:column;gap:.95rem;align-items:flex-start} .hero-secondary{display:inline-flex;color:var(--ink-soft);font-weight:600;font-size:.92rem;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;transition:color .2s} .hero-secondary:hover{color:var(--accent-warm-deep)} .hero-note{margin-top:1.7rem;font-size:.85rem;color:var(--ink-faint);display:flex;align-items:center;gap:.5em} .hero-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)} .hero-media{position:relative} .hero-media .ph,.hero-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg)} [data-dir="1"] .hero-media img,[data-dir="1"] .hero-media .ph{border-radius:48% 52% 50% 50%/46% 46% 54% 54%;aspect-ratio:1/1.08;box-shadow:0 30px 60px -34px rgba(72,86,58,.5)} [data-dir="1"] .hero-media::after{content:"";position:absolute;inset:20px -18px -18px 20px;border:1px solid var(--accent);opacity:.4;border-radius:48% 52% 50% 50%/46% 46% 54% 54%;z-index:-1} [data-dir="2"] .hero-media .ph,[data-dir="2"] .hero-media img{ border-radius:50% 50% 50% 50%/42% 42% 58% 58%;aspect-ratio:1/1.08; box-shadow:0 30px 60px -30px rgba(120,70,45,.5)} [data-dir="3"] .hero{padding-top:clamp(2rem,4vw,3.5rem)} [data-dir="3"] .hero-media .ph,[data-dir="3"] .hero-media img{border-radius:0;aspect-ratio:3/4} /* Direction 2 - centered hero */ [data-dir="2"] .hero-grid{grid-template-columns:1fr;text-align:center;justify-items:center;gap:3rem} [data-dir="2"] .hero .lead{margin-inline:auto} [data-dir="2"] .hero-cta{justify-content:center;align-items:center} [data-dir="2"] .hero-media{max-width:440px;width:100%} [data-dir="2"] .eyebrow{margin-inline:auto} @media(max-width:820px){ .hero-grid{grid-template-columns:1fr;gap:2.5rem} .hero-media{order:-1;max-width:420px} .hero-photo{ min-height:auto; display:block; background:var(--bg); padding-top:0; } .hero-bg-picture{position:relative;display:block;inset:auto} .hero-bg-img{aspect-ratio:16/9;height:auto;object-fit:cover;object-position:54% center} .hero-photo::after{content:"";position:absolute;top:0;left:0;right:0;aspect-ratio:16/9;background:linear-gradient(180deg,rgba(59,49,42,0) 45%,rgba(59,49,42,.18) 100%)} .hero-photo .hero-grid{grid-template-columns:1fr} .hero-photo .hero-copy{max-width:46ch} } /* ---------- generic section rhythm ---------- */ .band{padding:clamp(4rem,8vw,7rem) 0} .band-tint{background:var(--surface-2)} .rhythm-bg{position:relative;isolation:isolate;overflow:hidden;background:var(--surface-2)} .rhythm-bg::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background: linear-gradient(90deg,rgba(240,230,214,.86) 0%,rgba(240,230,214,.40) 48%,rgba(240,230,214,.76) 100%), linear-gradient(180deg,rgba(240,230,214,.62) 0%,rgba(240,230,214,.24) 50%,rgba(240,230,214,.80) 100%), image-set( url("/images/body-rhythm-background-1800-20260617.webp") type("image/webp"), url("/images/body-rhythm-background-1400-20260617.jpg") type("image/jpeg") ) center 46%/cover no-repeat; opacity:.82} .rhythm-bg::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background: radial-gradient(circle at 50% 48%,rgba(251,246,238,.08),rgba(251,246,238,.48) 74%)} .rhythm-bg .wrap{position:relative;z-index:1} .sec-head{max-width:62ch;margin-bottom:clamp(2.5rem,5vw,4rem)} .sec-head .eyebrow{margin-bottom:1.2rem} .sec-head h2{margin-bottom:1rem} .sec-head.center{margin-inline:auto;text-align:center} .sec-head.center .eyebrow{margin-inline:auto} /* ---------- philosophy ---------- */ .philos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center} .philos p+p{margin-top:1.2rem} .pull{font-family:var(--font-quote,var(--font-display));font-style:italic; font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.35;color:var(--ink); padding-left:1.4rem;border-left:2px solid var(--accent)} [data-dir="2"] .pull{border-left:none;background:var(--surface);padding:1.8rem 2rem;border-radius:var(--radius-lg); box-shadow:0 20px 50px -34px rgba(120,70,45,.5)} [data-dir="3"] .pull{border-left:none;border-top:1px solid var(--accent);padding:1.6rem 0 0;font-weight:300} @media(max-width:760px){.philos{grid-template-columns:1fr;gap:2rem}} /* ---------- about ---------- */ .about-band{overflow:hidden;background: linear-gradient(90deg,var(--bg) 0%,var(--bg) 50%,color-mix(in oklab,var(--surface) 88%,var(--sage-tint) 12%) 100%)} .about-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background: radial-gradient(circle at 82% 20%,rgba(31,111,109,.13),transparent 34%), linear-gradient(90deg,var(--bg) 0%,rgba(245,237,225,.98) 42%,rgba(245,237,225,.76) 64%,rgba(245,237,225,.52) 100%), url("/images/hero-sharda.jpg?v=logo-20260616-2212") right 35% center/auto 118% no-repeat;opacity:.72} .about-band .wrap{position:relative;z-index:1} .about{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);align-items:start} .about-copy{max-width:62ch} .about-media{position:relative;overflow:hidden;border-radius:var(--radius-lg)} .about-media .ph,.about-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg)} [data-dir="2"] .about-media,[data-dir="2"] .about-media .ph,[data-dir="2"] .about-media img{border-radius:var(--radius-lg) var(--radius-lg) 120px var(--radius-lg)} .about p+p{margin-top:1.1rem} .why-card{position:relative;margin-top:clamp(1.7rem,3vw,2.4rem);padding:clamp(1.35rem,3vw,1.95rem);border:1px solid color-mix(in oklab,var(--accent) 24%,var(--line));background:linear-gradient(180deg,rgba(255,255,255,.64),rgba(255,248,241,.48));box-shadow:0 18px 45px rgba(92,68,51,.07)} .why-card::before{content:"";position:absolute;left:clamp(1.35rem,3vw,1.95rem);right:clamp(1.35rem,3vw,1.95rem);top:0;height:3px;background:linear-gradient(90deg,var(--accent),color-mix(in oklab,var(--accent) 18%,transparent));transform:translateY(-1px)} .why-card h3{font-family:var(--font-body);font-size:.88rem;letter-spacing:.04em;text-transform:none;color:var(--accent-deep);margin:0 0 .9rem} .why-card p{color:var(--ink-soft)} .why-card p+p{margin-top:.95rem} .why-list{display:grid;gap:.55rem;margin:1rem 0 1.05rem;padding:0;list-style:none;color:var(--ink)} .why-list li{position:relative;padding-left:1.2rem;font-weight:650} .why-list li::before{content:"";position:absolute;left:0;top:.72em;width:.42rem;height:.42rem;border-radius:50%;background:var(--accent)} .photo-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,24,18,.16) 0%,rgba(32,24,18,.28) 45%,rgba(32,24,18,.68) 100%);pointer-events:none} .photo-caption{position:absolute;left:clamp(1.1rem,3vw,2rem);right:clamp(1.1rem,3vw,2rem);bottom:clamp(1.1rem,3vw,2rem);color:#fff8f1;max-width:26rem} .photo-caption span{display:block;margin-bottom:.65rem;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,248,241,.72)} .photo-caption strong{display:block;font-family:var(--font-display);font-size:clamp(1.45rem,2.8vw,2.15rem);font-weight:var(--display-weight);line-height:1.12;letter-spacing:var(--display-tracking);text-wrap:balance} .creds{position:relative;border:1px solid color-mix(in oklab,var(--line) 76%,var(--accent));padding:clamp(1.25rem,3vw,1.7rem);background:linear-gradient(180deg,rgba(251,246,238,.76),rgba(240,230,214,.58));box-shadow:0 22px 55px rgba(59,49,42,.08);backdrop-filter:blur(4px)} .creds::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-warm));opacity:.75} .creds h4{font-family:var(--font-body);font-size:.8rem;font-weight:700;letter-spacing:.05em; text-transform:none;color:var(--accent-deep);margin-bottom:1rem} .creds li{display:flex;gap:.7em;align-items:flex-start;padding:.35rem 0;color:var(--ink-soft);font-size:.96rem} .creds li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:.55em;border-radius:50%; background:var(--accent)} @media(max-width:760px){.about{grid-template-columns:1fr;gap:2.4rem}.about-copy{max-width:none}} @media(max-width:760px){ .about-band{background:var(--bg)} .about-band::before{background: linear-gradient(180deg,rgba(245,237,225,.58) 0%,var(--bg) 38%,var(--bg) 100%), url("/images/hero-sharda.jpg?v=logo-20260616-2212") center top/cover no-repeat;opacity:.38} } /* ---------- guidance ---------- */ .guidance-band{background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%)} .guidance-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .guidance-copy{max-width:58ch} .guidance-copy .eyebrow{margin-bottom:1.1rem} .guidance-copy h2{margin-bottom:1.2rem} .guidance-copy p{margin-bottom:1.8rem} .guidance-media{position:relative;overflow:hidden;min-height:clamp(420px,48vw,560px);border-radius:var(--radius-lg);background:var(--ink)} .guidance-media picture{display:block;width:100%;height:100%;min-height:inherit} .guidance-media img{width:100%;height:100%;min-height:inherit;object-fit:cover;object-position:48% center} [data-dir="2"] .guidance-media,[data-dir="2"] .guidance-media img{border-radius:var(--radius-lg) var(--radius-lg) 120px var(--radius-lg)} @media(max-width:760px){.guidance-grid{grid-template-columns:1fr;gap:2.2rem}.guidance-media{min-height:auto;max-width:520px;order:-1}.guidance-media img{min-height:0;aspect-ratio:4/3;object-position:44% center}.photo-caption strong{font-size:1.45rem}} /* ---------- challenge / weeks ---------- */ .weeks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem)} .week{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(1.6rem,2.4vw,2.2rem)} [data-dir="2"] .week{box-shadow:0 24px 50px -38px rgba(120,70,45,.55)} [data-dir="3"] .week{background:transparent;border:none;border-top:1px solid var(--ink);border-radius:0; padding:1.6rem 0 0} .week .wk-no{font-family:var(--font-display);font-size:2.4rem;line-height:1;color:var(--accent); margin-bottom:.7rem;display:block} [data-dir="2"] .week .wk-no{font-family:var(--font-body);font-weight:800} .week .wk-day{font-size:.76rem;letter-spacing:.04em;text-transform:none;color:var(--ink-faint); font-weight:600;margin-bottom:.5rem} .week h3{font-size:1.25rem;margin-bottom:.6rem} .week p{font-size:.94rem;color:var(--ink-soft)} /* ---------- legal pages ---------- */ .legal-hero{padding:clamp(3.5rem,7vw,6rem) 0 clamp(2rem,4vw,3rem)} .legal-wrap{max-width:860px;margin:0 auto;padding-inline:var(--gut)} .legal-meta{margin-top:1rem;color:var(--ink-faint);font-size:.92rem} .legal-body{padding:0 0 clamp(4rem,7vw,6rem)} .legal-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.5rem,4vw,3rem)} .legal-panel h2{font-family:var(--font-body);font-size:1rem;letter-spacing:.08em;text-transform:uppercase;margin:2rem 0 .8rem;color:var(--accent-deep)} .legal-panel h2:first-child{margin-top:0} .legal-panel p{color:var(--ink-soft);margin:.75rem 0} .legal-panel ul{list-style:disc;padding-left:1.25rem;margin:.75rem 0 1rem;color:var(--ink-soft)} .legal-panel li{margin:.35rem 0} .legal-panel a{text-decoration:underline;text-underline-offset:3px;color:var(--accent-deep)} .legal-note{margin-top:1.5rem;padding:1rem 1.1rem;background:var(--sage-tint);border:1px solid color-mix(in oklab,var(--accent) 22%,var(--line));color:var(--accent-deep);font-size:.95rem} .checkline a{text-decoration:underline;text-underline-offset:3px;color:var(--accent-deep)} .challenge-foot{margin-top:clamp(2rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center} @media(max-width:760px){.weeks{grid-template-columns:1fr}} /* ---------- pricing ---------- */ .prices{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;align-items:stretch} .prices-balanced{grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:clamp(2.2rem,6vw,5rem);align-items:center} .price{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius-lg);padding:1.8rem 1.6rem} [data-dir="3"] .price{background:transparent;border:none;border-top:1px solid var(--ink);border-radius:0;padding:1.6rem 0 0} .price.feature{background:var(--ink);color:var(--surface);border-color:var(--ink)} [data-dir="2"] .price.feature{background:var(--accent-warm);border-color:var(--accent-warm)} [data-dir="3"] .price.feature{background:transparent;border-top:2px solid var(--accent-warm);color:var(--ink)} .price.feature h3,[data-dir="2"] .price.feature h3{color:#fff} [data-dir="3"] .price.feature h3{color:var(--ink)} .price.feature .pr-sub,.price.feature .pr-feat li{color:rgba(255,255,255,.78)} [data-dir="3"] .price.feature .pr-sub,[data-dir="3"] .price.feature .pr-feat li{color:var(--ink-soft)} .pr-tag{align-self:flex-start;font-size:.7rem;letter-spacing:.04em;text-transform:none;font-weight:700; color:var(--accent);background:color-mix(in oklab,var(--accent) 16%,transparent); padding:.4em .8em;border-radius:999px;margin-bottom:1rem} .price.feature .pr-tag{background:rgba(255,255,255,.16);color:#fff} [data-dir="3"] .price.feature .pr-tag{background:color-mix(in oklab,var(--accent) 16%,transparent);color:var(--accent)} .price h3{font-size:1.3rem;margin-bottom:.3rem} .pr-price{font-family:var(--font-display);font-size:2rem;margin:.3rem 0 .2rem;font-weight:var(--display-weight)} [data-dir="2"] .pr-price{font-family:var(--font-body);font-weight:800} .pr-price .per{font-family:var(--font-body);font-size:.85rem;color:var(--ink-faint);font-weight:500} .price.feature .pr-price .per{color:rgba(255,255,255,.6)} .pr-sub{font-size:.88rem;color:var(--ink-soft);margin-bottom:1.2rem;min-height:2.4em} .pr-feat{margin:0 0 1.6rem;flex:1} .pr-feat li{display:flex;gap:.6em;align-items:flex-start;font-size:.88rem;color:var(--ink-soft);padding:.32rem 0} .pr-feat li::before{content:"";flex:0 0 auto;width:14px;height:14px;margin-top:.25em;border-radius:50%; background:color-mix(in oklab,var(--accent) 18%,transparent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.2 2.2 4.6-4.8' fill='none' stroke='%236a8263' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:contain} .price.feature .pr-feat li::before{background:rgba(255,255,255,.2); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .price .btn{width:100%;justify-content:center;font-size:.9rem;padding:.95em 1em} .price.feature .btn{background:#fff8f1;color:var(--accent-deep)} .price.feature .btn:hover{background:#fff} [data-dir="3"] .price .btn{background:var(--ink)} [data-dir="3"] .price.feature .btn{background:var(--accent);color:#fff8f1} .price-context{max-width:620px;padding-block:clamp(.4rem,2vw,1.2rem)} .price-context h3{font-size:clamp(1.8rem,3vw,2.8rem);max-width:15ch;margin:1rem 0 1rem} .price-context p{color:var(--ink-soft);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.75;max-width:52ch} .price-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin-top:clamp(1.5rem,3vw,2.2rem)} .price-proof div{border-top:1px solid color-mix(in oklab,var(--accent) 28%,var(--line));padding-top:1rem} .price-proof dt{font-weight:700;color:var(--accent-deep);margin-bottom:.35rem} .price-proof dd{color:var(--ink-soft);font-size:.92rem;line-height:1.55} [data-dir="3"] .price-context{border-top:1px solid var(--ink);padding-top:1.4rem} @media(max-width:1000px){.prices{grid-template-columns:repeat(2,1fr)}.prices-balanced{grid-template-columns:minmax(260px,360px) minmax(0,1fr)}} @media(max-width:760px){.prices-balanced{grid-template-columns:1fr;gap:2rem}.price-context h3{max-width:18ch}.price-proof{grid-template-columns:1fr}} @media(max-width:560px){.prices{grid-template-columns:1fr}} /* ---------- takeaways ---------- */ .takeaways{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem} .takeaway{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem} [data-dir="3"] .takeaway{background:transparent;border:none;border-top:1px solid var(--ink);border-radius:0;padding:1.5rem 0 0} .takeaway-copy{font-size:1.08rem;line-height:1.58;color:var(--ink);margin-bottom:1.4rem} .takeaway-meta{display:flex;align-items:center;gap:.8rem} .takeaway-no{width:38px;height:38px;border-radius:50%;background:var(--sand);flex:0 0 auto; display:grid;place-items:center;font-size:.8rem;color:var(--ink-faint);font-family:var(--font-body)} .takeaway-name{font-weight:600;font-size:.92rem} .takeaway-role{font-size:.8rem;color:var(--ink-faint)} .proof-band{background:var(--bg)} .proof-cards .takeaway{display:flex;flex-direction:column;justify-content:space-between;min-height:230px} .takeaway-note{margin-top:1.6rem;font-size:.82rem;color:var(--ink-faint);letter-spacing:0;text-align:center} @media(max-width:820px){.takeaways{grid-template-columns:1fr}} /* ---------- faq ---------- */ .faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(2rem,5vw,4rem);align-items:start} .faq-list{border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.5rem; text-align:left;padding:1.35rem 0;font-family:var(--font-display);font-size:clamp(1.1rem,1.6vw,1.35rem); font-weight:var(--display-weight);color:var(--ink);transition:color .2s} [data-dir="2"] .faq-q{font-family:var(--font-body);font-weight:600} .faq-q:hover{color:var(--accent-deep)} .faq-ic{flex:0 0 auto;position:relative;width:18px;height:18px} .faq-ic::before,.faq-ic::after{content:"";position:absolute;background:var(--accent);transition:.3s ease} .faq-ic::before{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%)} .faq-ic::after{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%)} .faq-item.open .faq-ic::after{transform:translateX(-50%) scaleY(0)} .faq-a{overflow:hidden;max-height:0;transition:max-height .35s ease} .faq-a-in{padding:0 0 1.4rem;color:var(--ink-soft);font-size:.98rem;max-width:60ch} @media(max-width:760px){.faq-grid{grid-template-columns:1fr;gap:1.5rem}} /* ---------- final cta ---------- */ .cta-band{background:var(--ink);color:var(--surface);text-align:center; padding:clamp(4rem,9vw,7.5rem) 0;border-radius:0} [data-dir="2"] .cta-band{background:var(--accent);border-radius:var(--radius-lg);margin:0 var(--gut) clamp(2rem,5vw,4rem); padding-inline:clamp(2rem,6vw,5rem)} [data-dir="3"] .cta-band{background:var(--bg);color:var(--ink);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)} .cta-band h2{color:#fff;max-width:18ch;margin:0 auto 1.2rem} [data-dir="3"] .cta-band h2{color:var(--ink)} .cta-band .lead{color:rgba(255,255,255,.8);margin:0 auto 2.3rem;max-width:50ch} [data-dir="3"] .cta-band .lead{color:var(--ink-soft)} .cta-band .btn{background:#fff8f1;color:var(--accent-deep);font-size:1.05rem;padding:1.15em 2.4em} .cta-band .btn:hover{background:#fff} [data-dir="2"] .cta-band .btn{color:var(--accent-deep)} [data-dir="3"] .cta-band .btn{background:var(--ink);color:#fff8f1} [data-dir="3"] .cta-band .btn:hover{background:var(--accent)} /* ---------- footer ---------- */ .foot{background:var(--surface-2);padding:clamp(3rem,5vw,4.5rem) 0 2rem;font-size:.92rem} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.5rem;margin-bottom:3rem} .foot .brand{margin-bottom:.9rem;display:inline-block} .foot-bio{color:var(--ink-soft);max-width:30ch;font-size:.9rem} .foot h4{font-family:var(--font-body);font-size:.76rem;font-weight:700;letter-spacing:.04em; text-transform:none;color:var(--ink-faint);margin-bottom:1.1rem} .foot-col a,.foot-col p{display:block;color:var(--ink-soft);padding:.3rem 0;transition:color .2s} .foot-col a:hover{color:var(--accent-deep)} .foot-disc{border-top:1px solid var(--line);padding-top:1.6rem;color:var(--ink-faint);font-size:.8rem; line-height:1.6;max-width:90ch} .foot-disc strong{color:var(--ink-soft)} .foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem; margin-top:1.6rem;color:var(--ink-faint);font-size:.8rem} .foot-base .links{display:flex;gap:1.4rem} @media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:2rem}} @media(max-width:480px){.foot-grid{grid-template-columns:1fr}} /* ---------- sticky mobile CTA ---------- */ .sticky-mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;align-items:center;gap:.55rem;padding:.55rem max(.8rem,env(safe-area-inset-left)) calc(.55rem + env(safe-area-inset-bottom)) max(.8rem,env(safe-area-inset-right));background:color-mix(in oklab,var(--surface) 90%,transparent);border-top:1px solid color-mix(in oklab,var(--line) 78%,transparent);box-shadow:0 -10px 28px -24px rgba(59,49,42,.72);transform:translateY(110%);transition:transform .28s cubic-bezier(.2,.7,.3,1);pointer-events:none;backdrop-filter:blur(10px)} .sticky-mobile-cta.is-visible{transform:translateY(0);pointer-events:auto} .sticky-mobile-cta .btn{flex:1;justify-content:center;min-height:40px;padding:.72em .95em;font-size:.9rem} .sticky-mobile-close{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-soft);font-size:1.1rem;line-height:1} .sticky-mobile-close:focus-visible,.sticky-mobile-cta .btn:focus-visible{outline:3px solid color-mix(in oklab,var(--accent) 32%,transparent);outline-offset:2px} @media(max-width:768px){ body.has-sticky-mobile-cta{padding-bottom:calc(56px + env(safe-area-inset-bottom))} .sticky-mobile-cta{display:flex} } @media(prefers-reduced-motion:reduce){ .sticky-mobile-cta{transition:none} } /* ---------- image placeholder ---------- */ .ph{position:relative;background: repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 11px,var(--sand) 11px,var(--sand) 22px); display:grid;place-items:center;overflow:hidden} .ph span{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.74rem;letter-spacing:.04em; color:var(--ink-soft);background:var(--bg);padding:.5em .9em;border-radius:3px; box-shadow:0 1px 0 var(--line)} /* ---------- floating direction switcher (hidden in embed) ---------- */ /* ---------- entrance animation ---------- */ @media(prefers-reduced-motion:no-preference){ .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)} .reveal.in{opacity:1;transform:none} } /* ---------- production additions ---------- */ .mobile-only{display:none} .menu-btn{display:none;position:relative;width:42px;height:42px;border:1px solid var(--line);border-radius:999px;align-items:center;justify-content:center;gap:4px;flex-direction:column;background:var(--surface)} .menu-btn span{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .22s ease,opacity .22s ease} .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} .contact-band{background:var(--surface)} .contact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,4.5rem);align-items:start} .contact-note{margin-top:1.4rem;color:var(--ink-faint);font-size:.95rem;max-width:42ch} .contact-form{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2rem);display:grid;gap:.75rem} .contact-form label{font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep)} .contact-form input,.contact-form textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit;padding:1rem} .contact-form select{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit;padding:1rem} .contact-form textarea{min-height:8.5rem;resize:vertical;line-height:1.55} .contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:3px solid color-mix(in oklab,var(--accent) 28%,transparent);outline-offset:2px;border-color:var(--accent)} .contact-form button{justify-content:center;margin-top:.4rem} .form-status{min-height:1.5rem;margin:0;color:var(--accent-deep);font-size:.92rem} .form-status-success{display:grid;gap:.45rem;padding:1.1rem 1.15rem;border:1px solid color-mix(in oklab,var(--accent) 36%,var(--line));border-radius:var(--radius);background:color-mix(in oklab,var(--accent) 10%,var(--surface));color:var(--accent-deep);line-height:1.5} .form-status-success strong{display:block;font-family:var(--font-display);font-size:clamp(1.45rem,4vw,2rem);font-weight:var(--display-weight);line-height:1.12;color:var(--ink)} .form-status-success span{display:block;color:var(--ink-soft)} .contact-form.is-submitted{gap:0} .disclaimer-small{margin:0;color:var(--ink-faint);font-size:.84rem;line-height:1.45} .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .checkline{display:flex!important;align-items:flex-start;gap:.75rem;font-size:.9rem!important;letter-spacing:0!important;text-transform:none!important;line-height:1.45;color:var(--ink-soft)!important;font-weight:500!important} .checkline input{width:18px!important;height:18px;flex:0 0 auto;margin-top:.1rem;margin-right:.55rem;accent-color:var(--accent)} .challenge-hero,.scan-hero,.booking-hero{padding:clamp(2rem,5vw,4.2rem) 0;background:linear-gradient(180deg,var(--bg),var(--surface))} .challenge-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.72fr);gap:clamp(2rem,4vw,4rem);align-items:start} .scan-grid,.booking-grid{display:grid;grid-template-columns:1fr minmax(320px,.78fr);gap:clamp(2rem,5vw,5rem);align-items:start} .challenge-copy{position:relative;z-index:1;padding-top:clamp(1rem,4vw,3rem);max-width:min(100%,680px)} .challenge-copy h1{font-size:clamp(2.55rem,4vw,3.65rem);width:min(100%,640px);max-width:640px;margin:1rem 0 1.3rem;text-wrap:normal} .challenge-copy .lead{max-width:48ch} .scan-hero h1,.booking-hero h1{font-size:clamp(2.55rem,4.8vw,4rem);max-width:15ch;margin:1rem 0 1.3rem} .challenge-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem} .challenge-card,.booking-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2.3rem)} .challenge-card{position:relative;z-index:2;max-width:420px;justify-self:end} .challenge-card h2,.booking-panel h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:.7rem} .challenge-card p,.booking-panel p{color:var(--ink-soft);margin-bottom:1.2rem} .days-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem} .days-grid article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.35rem} .days-grid span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:.65rem} .days-grid h3{font-size:1.3rem;margin-bottom:.45rem} .days-grid p{font-size:.95rem;color:var(--ink-soft)} .geo-band{background:linear-gradient(180deg,var(--surface),var(--bg))} .geo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem} .geo-grid.compact{align-items:stretch} .geo-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.2rem,2vw,1.55rem)} .geo-kicker{display:block;font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:none;color:var(--accent-deep);margin-bottom:.7rem} .geo-card h3{font-size:1.18rem;line-height:1.2;margin-bottom:.7rem} .geo-card p{font-size:.95rem;color:var(--ink-soft);margin:0} .geo-card p + p{margin-top:.7rem} .split-cta{display:flex;align-items:center;justify-content:space-between;gap:2rem} .split-cta h2{margin:.9rem 0} .center-cta{display:flex;justify-content:center;margin-top:2rem} .scan-form textarea{min-height:6.5rem} .scan-note{margin-top:1.2rem;color:var(--ink-soft);max-width:44ch} .scan-progress{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-bottom:.6rem} .scan-progress span{display:block;height:100%;background:var(--accent);border-radius:inherit} .scan-form fieldset{min-inline-size:0;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.1rem;display:block;background:color-mix(in oklab,var(--surface) 60%,transparent)} .scan-form fieldset>*+*{margin-top:.6rem} .scan-form legend{float:left;width:100%;max-width:100%;box-sizing:border-box;font-family:var(--font-display);font-size:1.35rem;line-height:1.18;color:var(--ink);padding:0;margin:0 0 .75rem;white-space:normal;text-wrap:balance} .scan-form legend+*{clear:both} .scan-form fieldset p{color:var(--ink-soft);font-size:.95rem;margin:0} .scan-form label:not(.checkline){font-size:.95rem;line-height:1.35;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:700} .scan-form label span{display:block;margin-top:.15rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-soft);font-size:.88rem} .scan-form input[type="range"]{accent-color:var(--accent);padding:.4rem 0;background:transparent;border:0} .booking-notes{margin-top:2rem;display:grid;gap:1.2rem;max-width:42ch} .booking-notes p{color:var(--ink-soft)} .booking-note-panel{display:flex;align-items:flex-start;gap:.75rem;margin:1.3rem 0 1.4rem;padding:1rem 1.05rem;border:1px solid color-mix(in oklab,var(--accent) 26%,var(--line));border-radius:var(--radius);background:color-mix(in oklab,var(--sage-tint) 34%,var(--surface));color:var(--ink-soft);font-size:.96rem;line-height:1.55;font-weight:600} .booking-note-panel::before{content:"";width:.48rem;height:.48rem;border-radius:999px;background:var(--accent);flex:0 0 auto;margin-top:.5rem;box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 14%,transparent)} @media(max-width:860px){ .challenge-hero-grid,.scan-grid,.booking-grid{grid-template-columns:1fr} .challenge-copy{padding-top:0} .challenge-copy h1,.scan-hero h1,.booking-hero h1{max-width:12ch} .challenge-copy h1{max-width:16ch} .challenge-card{max-width:none;justify-self:stretch} .geo-grid{grid-template-columns:1fr} .split-cta{display:grid} } @media(max-width:900px){ .nav-in{gap:1rem} .menu-btn{display:inline-flex;order:3} .nav-right{margin-left:auto} .nav-links{position:fixed;left:var(--gut);right:var(--gut);top:76px;display:grid;gap:.15rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:.8rem;box-shadow:0 18px 44px -30px rgba(59,49,42,.55);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .22s ease,transform .22s ease} .nav-links.open{opacity:1;transform:none;pointer-events:auto} .nav-links a{display:block;padding:.85rem .9rem;color:var(--ink)} .mobile-only{display:block} } @media(max-width:760px){ .contact-grid{grid-template-columns:1fr} } @media(max-width:520px){ .brand{font-size:1.25rem} .brand-tagline{font-size:.62rem;letter-spacing:.14em;transform:translateX(.12rem)} .brand-image{min-width:68px} .brand-logo{width:72px;max-height:58px} .brand-logo-footer{width:min(34vw,142px);transform:translateX(1.8rem)} .brand-logo-icon{width:78px;height:62px;max-height:none} .lang{display:none} .hero-cta .btn{width:100%;justify-content:center} } /* ---------- viewport fit polish ---------- */ .nav-in{padding-block:.75rem} .hero{padding:clamp(1.6rem,4vw,3.2rem) 0 clamp(2.4rem,5vw,4.2rem)} .hero h1{font-size:clamp(2.55rem,5.4vw,4.45rem);margin-bottom:1.7rem} .hero .lead{margin-bottom:1.65rem} .hero-note{margin-top:1.1rem} @media(min-width:821px){.hero-media{max-width:500px;justify-self:end}} @media(max-width:820px){ .hero{padding-top:1.4rem;padding-bottom:2.6rem} .hero-grid{gap:1.8rem} .hero-media{max-width:min(320px,88vw);justify-self:center} .hero h1{font-size:clamp(2.25rem,12vw,3.2rem);margin-bottom:1.35rem} .hero .lead{margin-bottom:1.25rem} .hero-note{margin-top:.95rem} } @media(max-width:420px){ .hero-media{max-width:min(300px,88vw)} .hero h1{font-size:clamp(2.05rem,11vw,2.75rem)} .hero-cta{gap:.75rem} } @media(min-width:821px){ .hero{padding-top:1rem;padding-bottom:2.2rem} .hero h1{font-size:clamp(2.45rem,5vw,4rem);margin-bottom:1.25rem} .hero .lead{margin-bottom:1.2rem} .hero-media{max-width:445px} } @media(max-width:820px){ .nav-in{padding-block:.55rem} .hero-media{max-width:min(250px,72vw)} .hero-grid{gap:1.15rem} .hero h1{font-size:clamp(1.95rem,9.8vw,2.45rem);margin-bottom:.95rem;line-height:1.03} .hero .lead{font-size:1rem;line-height:1.52;margin-bottom:.95rem} .eyebrow{font-size:.66rem;letter-spacing:.08em} .hero-eyebrow{margin-bottom:.9rem} .btn{padding:.92em 1.25em} } @media(max-width:420px){ .hero{padding-top:.8rem;padding-bottom:1.2rem} .hero-media{max-width:min(220px,64vw)} .hero h1{font-size:clamp(1.85rem,9.2vw,2.25rem)} .hero .lead{font-size:.96rem;line-height:1.46} .hero-note{font-size:.78rem;margin-top:.7rem} .hero-cta .btn{padding:.82em 1em} } /* Reveal must never hide content from crawlers, screenshots, or slow JS. */ .reveal{opacity:1!important;transform:none!important}