/* ADA Trade — site styles
   See DESIGN.md for the token reference, component anatomy and rules. */

/* Layout: ElevenLabs-style catalogue. Neutral graphite ground, black pill actions;
   photography and raymarched material studies carry the colour. */
:root{
  --bg:#F7F7F6; --surface:#EDEDEC; --surface-2:#E1E1DF; --fg:#121212; --muted:#676765;
  --accent:#121212; --accent-fg:#FFFFFF; --st1:#EDEDEC; --st2:#DBDBD9;
  color-scheme:light;
  --font:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --stroke:1px; --radius:20px; --radius-btn:999px; --fs:16px; --hs:1; --space:1; --maxw:1260px; --icon-wght:350;
  --line:color-mix(in oklab, var(--fg) 14%, transparent);
  --nav-h:68px;
  --section:calc(clamp(80px, 10vw, 144px) * var(--space));
}
/* ---------- base ---------- */
html{font-size:var(--fs); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:1rem; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; font-feature-settings:"ss01"}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:60; background:var(--bg)}
*,*::before,*::after{box-sizing:border-box}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
h1,h2,h3,p,figure,ol,ul{margin:0}
ol,ul{padding:0; list-style:none}
h1,h2,h3{font-weight:400; text-wrap:balance}
p{text-wrap:pretty}
img{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:8px}
.skip{position:absolute; left:-999px; top:8px}
[hidden]{display:none!important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip:focus{left:16px; z-index:100; background:var(--fg); color:var(--bg); padding:8px 14px; border-radius:999px}
.wrap{max-width:calc(var(--maxw) + 80px); margin-inline:auto; padding-left:max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px)); padding-right:max(clamp(16px, 4vw, 40px), env(safe-area-inset-right, 0px))}
.section{padding-block:var(--section) 0}
.icon{font-family:"Material Symbols Rounded"; font-weight:normal; font-style:normal; font-size:1.25em; line-height:1; display:inline-block; vertical-align:middle; letter-spacing:normal; text-transform:none; white-space:nowrap; direction:ltr; font-feature-settings:"liga"; font-variation-settings:"FILL" 0, "wght" var(--icon-wght), "GRAD" 0, "opsz" 24; user-select:none; flex:none}

.eyebrow{font-size:.875rem; font-weight:500; color:var(--muted)}
.h1{font-size:calc(clamp(3rem, 1.3rem + 6.2vw, 7rem) * var(--hs)); line-height:.96; letter-spacing:-.04em; font-weight:400}
.h2{font-size:calc(clamp(2rem, 1.2rem + 2.8vw, 3.5rem) * var(--hs)); line-height:1.04; letter-spacing:-.03em}
.h3{font-size:calc(1.25rem * var(--hs)); line-height:1.25; letter-spacing:-.01em; font-weight:500}
.lead{font-size:1.1875rem; line-height:1.5; color:var(--muted); max-width:44ch}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; height:44px; padding-inline:20px; border-radius:var(--radius-btn); font-weight:500; font-size:.9375rem; white-space:nowrap; transition:background-color .2s, color .2s}
.btn-primary{background:var(--fg); color:var(--bg)}
.btn-primary:hover{background:color-mix(in oklab, var(--fg) 80%, var(--bg))}
.btn-ghost{box-shadow:inset 0 0 0 var(--stroke) var(--line)}
.btn-ghost:hover{background:var(--surface)}
.btn-light{background:#FFFFFF; color:#0B0B0A}
.btn-light:hover{background:#EDEDEA}
.btn-glass{color:#FFFFFF; box-shadow:inset 0 0 0 var(--stroke) rgba(255,255,255,.45)}
.btn-glass:hover{background:rgba(255,255,255,.14)}
.btn-sm{height:36px; padding-inline:14px; font-size:.875rem}
.btn-icon{width:44px; padding:0}
.btn-icon.btn-sm{width:36px}
.link{display:inline-flex; align-items:center; gap:.3em; font-weight:500; font-size:.9375rem}
.link .icon{font-size:1.05em; transition:transform .2s}
.link:hover .icon, a:hover > .go .icon{transform:translate(2px,-2px)}

/* ---------- nav ---------- */
.nav{position:sticky; top:env(safe-area-inset-top, 0px); z-index:50; background:color-mix(in oklab, var(--bg) 90%, transparent); -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px)}
.nav-in{display:flex; align-items:center; gap:28px; height:var(--nav-h)}
.logo{display:inline-flex; color:var(--accent)}
.logo svg{height:34px; width:auto}
.nav-links{display:flex; gap:2px}
.nav-links a{padding:8px 12px; border-radius:999px; font-size:.9375rem; color:var(--muted); transition:color .2s, background-color .2s}
.nav-links a:hover{color:var(--fg); background:var(--surface)}
.nav-actions{margin-left:auto; display:flex; gap:8px; align-items:center}
.menu-btn{display:none}
.nav-mobile{padding-block:4px 20px}
.nav-mobile a{display:block; padding:12px 2px; font-size:1.125rem}
@media (max-width: 880px){ .nav-links{display:none} .menu-btn{display:inline-flex} .nav-actions .hide-sm{display:none} }

/* ---------- photo primitives ---------- */
.ph{position:relative; overflow:hidden; border-radius:var(--radius); background:var(--surface); max-width:100%}
.ph img, .ph canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.ph img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
a:hover .ph img{transform:scale(1.04)}
.ph .lab{position:absolute; left:12px; bottom:12px; background:var(--bg); color:var(--fg); font-size:.8125rem; font-weight:500; padding:6px 12px; border-radius:999px}

/* ---------- category links ---------- */
.cats{display:flex; flex-wrap:wrap; gap:8px}
.cats a{display:inline-flex; align-items:center; height:36px; padding-inline:14px; border-radius:var(--radius-btn); font-size:.875rem; box-shadow:inset 0 0 0 var(--stroke) var(--line); transition:background-color .2s}
.cats a:hover{background:var(--surface)}

/* ---------- hero ---------- */
.hero{padding-block:calc(clamp(40px, 6vw, 88px) * var(--space)) 0}
.ctas{display:flex; gap:10px; flex-wrap:wrap}
.he-note{font-size:.875rem; color:var(--muted)}
.hs-text{display:grid; justify-items:center; text-align:center; gap:24px}
.hs-text .h1{max-width:14ch}
.hs-text .lead{max-width:40ch}

/* ---------- hero: marquee ---------- */
.marquee{margin-top:calc(56px * var(--space)); overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)}
.mq-track{display:flex; gap:16px; width:max-content; animation:mq 70s linear infinite; padding-inline:8px}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-card{width:clamp(220px, 22vw, 300px); display:grid; gap:12px}
.mq-card .ph{aspect-ratio:3/4}
.mq-card b{font-weight:500}
.mq-card span{font-size:.875rem; color:var(--muted)}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .mq-track{animation:none} .marquee{overflow-x:auto} }

/* ---------- section heads ---------- */
.head{display:flex; flex-wrap:wrap; gap:20px 40px; align-items:flex-end; justify-content:space-between; margin-bottom:calc(44px * var(--space))}
.head-text{display:grid; gap:16px; max-width:780px; min-width:0}
.head-actions{display:flex; gap:8px; align-items:center}

/* ---------- carousel ---------- */
.track{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(272px, 360px); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.pcard{scroll-snap-align:start; display:flex; flex-direction:column; gap:18px; min-width:0}
.pcard .ph{aspect-ratio:4/5}
.pcard-body{display:grid; gap:8px}
.pcard-cat{font-size:.8125rem; color:var(--muted)}
.pcard h3{font-size:calc(1.625rem * var(--hs)); line-height:1.1; letter-spacing:-.025em; font-weight:450}
.pcard .tagline{font-weight:500}
.pcard p.desc{color:var(--muted); font-size:.9375rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:3.1em}
.pcard-actions{display:flex;gap:12px;align-items:center;margin-top:6px;flex-wrap:nowrap}
.pcard-actions .pcard-details{font-size:.875rem;white-space:nowrap;min-height:36px;padding-block:8px}
.counter{font-size:.875rem; color:var(--muted); min-width:56px; text-align:center}
.note{margin-top:24px; font-size:.8125rem; color:var(--muted); max-width:72ch}

/* ---------- strip ---------- */
.strip{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:calc(56px * var(--space))}
.strip a{display:grid; gap:10px; padding:24px; border-radius:var(--radius); background:var(--surface); transition:background-color .2s; min-width:0}
.strip a:hover{background:var(--surface-2)}
.strip .top{display:flex; justify-content:space-between; align-items:center}
.strip .top .go{color:var(--muted)}
.strip strong{font-weight:500; font-size:calc(1.1875rem * var(--hs))}
.strip span.d{color:var(--muted); font-size:.9375rem}
@media (max-width: 860px){ .strip{grid-template-columns:1fr} }

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
.stat{display:grid; gap:24px; align-content:space-between; padding:24px; border-radius:var(--radius); background:var(--surface); min-height:220px}
.stat.photo{color:#FFFFFF; position:relative; overflow:hidden; background:#222}
.stat.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.stat.photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,9,8,.22),rgba(10,9,8,.10) 45%,rgba(10,9,8,.28))}
.stat.photo > :not(img){position:relative;z-index:2}
.stat b{font-weight:300; font-size:calc(clamp(2.75rem, 1.6rem + 3vw, 4.5rem) * var(--hs)); line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.stat span{font-size:.875rem}
.stat:not(.photo) span{color:var(--muted)}
@media (max-width: 960px){ .stats{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 520px){ .stats{grid-template-columns:1fr} }

/* ---------- approach: photo + features ---------- */
.split{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:16px}
.split .ph{min-height:520px}
.split .ph .cap{position:absolute; left:16px; right:16px; bottom:16px; color:#FFFFFF; font-size:.8125rem; z-index:1}
.split .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.5))}
.features{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.feature{display:grid; gap:10px; align-content:start; padding:24px; border-radius:var(--radius); background:var(--surface); min-width:0}
.feature .ico{width:44px; height:44px; border-radius:50%; background:var(--bg); display:grid; place-items:center; margin-bottom:28px}
.feature p{color:var(--muted); font-size:.9375rem}
@media (max-width: 960px){ .split{grid-template-columns:1fr} .split .ph{min-height:0; aspect-ratio:4/3} }
@media (max-width: 560px){ .features{grid-template-columns:1fr} }

/* ---------- directory ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:24px}
.filter{height:38px; padding-inline:16px; border-radius:var(--radius-btn); font-size:.875rem; font-weight:500; box-shadow:inset 0 0 0 var(--stroke) var(--line); display:inline-flex; align-items:center; gap:8px; transition:background-color .2s, color .2s}
.filter:hover{background:var(--surface)}
.filter[aria-pressed="true"]{background:var(--fg); color:var(--bg); box-shadow:none}
.filter .n{font-variant-numeric:tabular-nums; opacity:.55}
.filters .count{margin-left:auto; font-size:.875rem; color:var(--muted)}
.grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px 20px}
.dcard{display:flex; flex-direction:column; gap:16px; min-width:0}
.dcard .ph{aspect-ratio:5/4}
.dcard-body{display:grid; gap:4px}
.dcard-top{display:flex; justify-content:space-between; gap:12px; font-size:.8125rem; color:var(--muted)}
.dcard h3{font-size:calc(1.375rem * var(--hs)); line-height:1.15; letter-spacing:-.02em; font-weight:450; margin-top:4px}
.dcard .sub{color:var(--muted); font-size:.9375rem}
@media (max-width: 960px){ .grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 600px){ .grid{grid-template-columns:1fr} }

/* ---------- process ---------- */
.process{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.pstep{display:grid; gap:12px; padding:28px; border-radius:var(--radius); background:var(--surface); align-content:start}
.pstep .num{width:40px; height:40px; border-radius:50%; background:var(--fg); color:var(--bg); display:grid; place-items:center; font-weight:500; font-variant-numeric:tabular-nums; margin-bottom:32px}
.pstep p{color:var(--muted); font-size:.9375rem}
@media (max-width: 860px){ .process{grid-template-columns:1fr} }

/* ---------- guides ---------- */
.guides{display:grid; gap:4px}
.guide{display:grid; grid-template-columns:minmax(0, 260px) minmax(0,1fr) auto; gap:8px 40px; align-items:center; padding:22px 20px; margin-inline:-20px; border-radius:var(--radius); transition:background-color .2s}
.guide:hover{background:var(--surface)}
.guide .k{display:grid; gap:2px}
.guide .k b{font-weight:500}
.guide .k span{font-size:.8125rem; color:var(--muted)}
.guide .t{display:grid; gap:4px; min-width:0}
.guide .t p{color:var(--muted); font-size:.9375rem}
.guide > .icon{color:var(--muted); transition:transform .2s, color .2s}
.guide:hover > .icon{color:var(--fg); transform:translate(2px,-2px)}
@media (max-width: 760px){ .guide{grid-template-columns:minmax(0,1fr) auto; margin-inline:-12px; padding:18px 12px} .guide .k{grid-column:1 / -1} }

/* ---------- approach statement + faq ---------- */
.statement{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px 64px; align-items:end}
.statement p{font-size:calc(1.375rem * var(--hs)); line-height:1.45; color:var(--muted); max-width:38ch}
.statement p strong{color:var(--fg); font-weight:500}
.faq{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:32px 64px}
.faq-list{display:grid; gap:8px}
.faq details{background:var(--surface); border-radius:var(--radius); padding:0 24px}
.faq summary{list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:22px; cursor:pointer; font-size:calc(1.0625rem * var(--hs)); font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{transition:transform .25s; color:var(--muted)}
.faq details[open] summary .icon{transform:rotate(45deg)}
.faq details p{color:var(--muted); padding-bottom:24px; max-width:62ch}
@media (max-width: 860px){ .statement, .faq{grid-template-columns:1fr} }

/* ---------- photo CTA ---------- */
.cta{position:relative; border-radius:calc(var(--radius) + 8px); overflow:hidden; min-height:480px; display:flex; align-items:flex-end; color:#FFFFFF; background:#2A2622}
.cta img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cta::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,9,8,.72), rgba(10,9,8,.2) 70%)}
.cta-in{position:relative; z-index:1; display:grid; gap:18px; padding:clamp(24px, 5vw, 64px); max-width:720px}
.cta h2{font-size:calc(clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem) * var(--hs)); line-height:1.02; letter-spacing:-.035em}
.cta p{font-size:1.125rem; color:rgba(255,255,255,.82)}
.cta .ctas{margin-top:8px}

/* ---------- footer ---------- */
footer{padding-block:var(--section) 32px}
.foot{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap:40px 24px}
.foot h2{font-size:.875rem; font-weight:500; color:var(--muted); margin-bottom:14px}
.foot nav{display:grid; gap:10px}
.foot nav a{width:fit-content}
.foot nav a:hover{color:var(--accent)}
.foot .tag{margin-top:20px; font-size:1.125rem; max-width:22ch}
.foot .pre{margin-top:8px; font-size:.875rem; color:var(--muted)}
.wordmark{margin-top:80px; color:var(--surface-2)}
.wordmark svg{width:100%; height:auto; display:block}
.legal{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between; margin-top:28px; font-size:.8125rem; color:var(--muted)}
@media (max-width: 860px){ .foot{grid-template-columns:repeat(2, minmax(0,1fr))} .foot .brand-col{grid-column:1 / -1} }

/* ---------- product detail ---------- */
.crumbs{display:flex; gap:8px; align-items:center; font-size:.875rem; color:var(--muted); padding-top:24px}
.crumbs a:hover{color:var(--fg)}
.dh{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:40px 64px; padding-block:calc(28px * var(--space)) 0; align-items:start}
.dh-text{display:grid; gap:24px}
.dh-text .h1{font-size:calc(clamp(2.75rem, 1.2rem + 5vw, 6rem) * var(--hs))}
.dh-tag{font-size:calc(1.5rem * var(--hs)); line-height:1.25; letter-spacing:-.02em; font-weight:450; max-width:22ch}
.facts{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px}
.fact{padding:18px; border-radius:calc(var(--radius) - 4px); background:var(--surface); display:grid; gap:6px; align-content:start}
.fact span{font-size:.8125rem; color:var(--muted)}
.fact b{font-weight:400; font-size:calc(1.5rem * var(--hs)); letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums}
.fact small{font-size:.8125rem; color:var(--muted)}
.focus{display:grid; gap:10px}
.focus li{display:flex; gap:10px; align-items:center; font-weight:500}
.focus .icon{color:var(--accent); font-size:1.1rem}
.terms{display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:.875rem}
.terms div{display:grid; gap:2px}
.terms span{color:var(--muted)}
.viewer{display:grid; gap:12px; position:sticky; top:calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 16px)}
.viewer .ph{aspect-ratio:4/5; border-radius:calc(var(--radius) + 8px)}
.viewer .ph > *{transition:opacity .4s ease}
.viewer .ph > [hidden]{display:block!important; opacity:0; pointer-events:none}
.vtabs{display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--surface); width:fit-content}
.vtabs button{height:34px; padding-inline:14px; border-radius:999px; font-size:.8125rem; font-weight:500; color:var(--muted); display:inline-flex; align-items:center; gap:6px}
.vtabs button[aria-pressed="true"]{background:var(--bg); color:var(--fg)}
.viewer .vcap{font-size:.8125rem; color:var(--muted); max-width:64ch}
.viewer-top{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
@media (max-width: 960px){ .dh{grid-template-columns:1fr} .viewer{position:static; order:-1} }

.subnav{position:sticky; top:calc(env(safe-area-inset-top, 0px) + var(--nav-h)); z-index:40; background:color-mix(in oklab, var(--bg) 90%, transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); margin-top:calc(72px * var(--space))}
.subnav-in{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding-block:10px}
.subnav-in::-webkit-scrollbar{display:none}
.subnav button{height:34px; padding-inline:14px; border-radius:999px; font-size:.875rem; color:var(--muted); white-space:nowrap}
.subnav button:hover{color:var(--fg); background:var(--surface)}
.subnav button[aria-current="true"]{background:var(--fg); color:var(--bg)}
.subnav .btn{margin-left:auto}

.dsec{padding-block:calc(96px * var(--space)) 0; scroll-margin-top:calc(var(--nav-h) + 64px)}
.two{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:32px 64px; align-items:start}
.points{display:grid; gap:10px}
.points li{display:flex; gap:14px; align-items:center; padding:18px 20px; border-radius:var(--radius); background:var(--surface); font-weight:500}
.points .icon{width:36px; height:36px; border-radius:50%; background:var(--bg); display:grid; place-items:center; font-size:1.05rem}
.tbl-wrap{overflow-x:auto; border-radius:var(--radius); background:var(--surface)}
table.tbl{width:100%; border-collapse:collapse; font-size:.9375rem; min-width:520px}
.tbl th, .tbl td{text-align:left; padding:16px 20px; vertical-align:top}
.tbl thead th{font-size:.8125rem; font-weight:500; color:var(--muted)}
.tbl tbody tr:nth-child(odd){background:color-mix(in oklab, var(--bg) 55%, var(--surface))}
.tbl td:first-child{font-weight:500; width:34%}
.tbl.num td, .tbl.num th{font-variant-numeric:tabular-nums}
.tbl.num td:first-child{width:auto}
.tnote{margin-top:14px; font-size:.8125rem; color:var(--muted); max-width:80ch}
.context .ph{aspect-ratio:16/8; border-radius:calc(var(--radius) + 8px)}
.context-text{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 64px; margin-top:28px; align-items:start}
.cards3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.c3{display:grid; gap:10px; padding:24px; border-radius:var(--radius); background:var(--surface); align-content:start}
.c3 .ico{width:44px; height:44px; border-radius:50%; background:var(--bg); display:grid; place-items:center; margin-bottom:28px}
.c3 p{color:var(--muted); font-size:.9375rem}
.next{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px 64px; padding:clamp(24px, 4vw, 48px); border-radius:calc(var(--radius) + 8px); background:var(--surface)}
.next ul{display:grid; gap:10px}
.next li{display:flex; gap:12px; align-items:center; padding:14px 16px; border-radius:calc(var(--radius) - 6px); background:var(--bg); font-weight:500}
.next li .icon{color:var(--accent)}
@media (max-width: 860px){ .two, .context-text, .next{grid-template-columns:1fr} .cards3{grid-template-columns:1fr} }

@media (prefers-reduced-motion: reduce){ *{transition:none!important; scroll-behavior:auto!important} }

/* Persistent WhatsApp contact, shared by every page. */
.whatsapp-float{position:fixed;right:max(24px,env(safe-area-inset-right,0px));bottom:max(24px,env(safe-area-inset-bottom,0px));z-index:80;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#000;color:#fff;box-shadow:0 4px 20px #0002;transition:background-color .2s,box-shadow .2s}
.whatsapp-float:hover{background:#252525;box-shadow:0 6px 24px #0003}
.whatsapp-float:focus-visible{outline:3px solid var(--fg);outline-offset:4px;border-radius:50%}
.whatsapp-float svg{display:block;width:30px;height:30px}
@media(max-width:600px){.whatsapp-float{right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px))}.legal{padding-right:68px;min-height:56px}}

/* Slightly wider content on desktop; retain the existing mobile layout. */
@media(min-width:1024px){:root{--maxw:1480px}}

/* Keep the navigation group centered independently of the logo and quote action. */
@media(min-width:881px){.nav-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.nav-in>.logo{justify-self:start}.nav-links{justify-content:center}.nav-actions{justify-self:end;margin-left:0}}
.nav-mobile a{text-align:center}

/* Wider featured-product cards on larger screens, including photo and copy. */
@media(min-width:961px){.track{grid-auto-columns:clamp(296px,21vw,328px)}}

/* Mobile rails scroll through the viewport edges, rather than clipping at page gutters. */
@media(max-width:960px){
  :root{
    --rail-inset-left:max(clamp(16px,4vw,40px),env(safe-area-inset-left,0px));
    --rail-inset-right:max(clamp(16px,4vw,40px),env(safe-area-inset-right,0px));
  }
  #closer .track{
    margin-left:calc(-1 * var(--rail-inset-left));
    margin-right:calc(-1 * var(--rail-inset-right));
    padding-left:var(--rail-inset-left);
    padding-right:var(--rail-inset-right);
    scroll-padding-left:var(--rail-inset-left);
    scroll-padding-right:var(--rail-inset-right);
  }
  .marquee{mask-image:none;-webkit-mask-image:none}
}

.filter-mobile{display:none}

/* Sourcing photographs with understated, time-synchronized progress controls. */
.approach-carousel{display:flex;flex-direction:column;min-width:0;min-height:520px}
.split .approach-carousel .ph{min-height:0;flex:1;isolation:isolate;aspect-ratio:auto;cursor:grab;user-select:none;touch-action:pan-y pinch-zoom}
.split .approach-carousel .ph::after{display:block;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.03) 25%,rgba(0,0,0,.18) 50%,rgba(0,0,0,.76) 100%)}
.approach-carousel .approach-slide{opacity:0;transition:opacity .75s ease;z-index:0;pointer-events:none}
.approach-carousel .approach-slide.is-active{opacity:1;z-index:1}
.approach-controls{position:absolute;left:28px;right:28px;bottom:14px;z-index:4;display:flex;align-items:center;gap:16px;min-height:32px;color:#fff}
.approach-indicators{display:flex;align-items:center;gap:6px;flex:0 1 180px;min-width:0}
.approach-indicator{position:relative;flex:1;min-width:0;height:32px;display:flex;align-items:center}
.approach-bar{width:100%;height:3px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.35)}
.approach-progress{display:block;width:100%;height:100%;border-radius:inherit;background:#fff;transform:scaleX(0);transform-origin:left center;will-change:transform}
.approach-indicator:hover .approach-bar{background:rgba(255,255,255,.55)}
.approach-carousel.is-dragging .ph{cursor:grabbing}
.approach-toggle{margin-left:auto;flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff}
.approach-toggle:hover{background:rgba(255,255,255,.15);color:#fff}
.approach-toggle svg{width:14px;height:14px}
.approach-toggle .play-icon{display:none}.approach-toggle[data-paused=true] .pause-icon{display:none}.approach-toggle[data-paused=true] .play-icon{display:block}
@media(max-width:960px){.approach-carousel{min-height:0}.split .approach-carousel .ph{flex:auto;aspect-ratio:4/3}}
@media(prefers-reduced-motion:reduce){.approach-carousel .approach-slide{transition:none}}
#products,#closer{scroll-margin-top:calc(var(--nav-h) + 24px)}
@media(max-width:600px){
  #products .filter-desktop{display:none}
  #products .filter-mobile{display:inline}
  #products .filters{gap:6px}
  #products .filter{padding-inline:12px;gap:6px;font-size:.8125rem;white-space:nowrap;flex:none}
  #products .filters .count{flex-basis:100%;margin-left:0;text-align:right}
  #products .grid.product-list{
    grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(320px,calc(100vw - 56px));
    gap:20px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-left:calc(-1 * var(--rail-inset-left));margin-right:calc(-1 * var(--rail-inset-right));
    padding-left:var(--rail-inset-left);padding-right:var(--rail-inset-right);
    scroll-padding-left:var(--rail-inset-left);scroll-padding-right:var(--rail-inset-right);
  }
  #products .grid.product-list::-webkit-scrollbar{display:none}
  #products .grid.product-list .dcard{scroll-snap-align:start}
}

.approach-caption{position:absolute;left:28px;right:28px;bottom:76px;z-index:3;color:#fff;opacity:0;pointer-events:none;transition:opacity .65s ease}
.approach-caption.is-active{opacity:1}
.approach-caption h3{font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.15;letter-spacing:-.025em;max-width:22ch;font-weight:500;margin-bottom:12px}
.approach-caption p{font-size:.9375rem;line-height:1.5;color:rgba(255,255,255,.9);max-width:45ch}
.approach-controls :focus-visible{outline-color:#fff}
@media(max-width:600px){.approach-caption{left:20px;right:20px;bottom:65px}.approach-caption h3{font-size:1.375rem;margin-bottom:8px}.approach-caption p{font-size:.8125rem}.approach-controls{left:20px;right:20px;bottom:10px;gap:10px}}
@media(prefers-reduced-motion:reduce){.approach-caption{transition:none}}

/* Reserve the tallest answer's space so FAQ interactions never move the next section. */
.home-faq-list{display:flex;flex-direction:column;gap:8px;height:var(--faq-height,390px)}
.home-faq-item{flex:none;background:var(--surface);border-radius:var(--radius)}
.home-faq-item h3{margin:0;font-size:inherit;font-weight:500}
.home-faq-item button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:22px 24px;text-align:left;font-size:calc(1.0625rem * var(--hs));font-weight:500;border-radius:var(--radius)}
.home-faq-item button .icon{flex:none;color:var(--muted);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.home-faq-item.is-open button .icon{transform:rotate(45deg)}
.home-faq-answer{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.home-faq-item.is-open .home-faq-answer{grid-template-rows:1fr;opacity:1}
.home-faq-answer-inner{min-height:0;overflow:hidden}
.home-faq-answer p{padding:0 24px 24px;color:var(--muted);max-width:62ch;line-height:1.6}
@media(prefers-reduced-motion:reduce){.home-faq-answer,.home-faq-item button .icon{transition:none}}