/* Counterpart — EDITORIAL template. Premium, airy, sharp-edged, type-led. Restrained accent.
   Skinned per-drop via the brand-token CSS vars (injected by build.mjs). Reduced-motion-safe. */

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
:root { --surface:#fff; --line: color-mix(in srgb, var(--fg) 14%, transparent); --maxw: 1180px; --ease: cubic-bezier(.4,0,.1,1); }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body, system-ui, sans-serif); color: var(--fg,#16140f); background: var(--bg,#fafafa); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1,h2,h3 { font-family: var(--font-heading, Georgia, serif); font-weight: 500; line-height: 1.04; letter-spacing: -.015em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(24px,6vw,56px); }

.hdr { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(24px,6vw,56px); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: padding .35s var(--ease), border-color .35s var(--ease); }
.hdr.scrolled { padding-block: 14px; border-color: var(--line); }
.brandmark { font-family: var(--font-heading); font-size: 21px; letter-spacing: .01em; display: inline-flex; align-items: center; gap: 11px; }
.mark { width: 26px; height: 26px; flex: none; }
.mark .mk-bg { fill: var(--accent); rx: 3px; }
.mark .mk-i { fill: var(--on-accent); font-family: var(--font-heading); font-weight: 600; font-size: 22px; }
.stage .mark-lg { position: relative; z-index: 1; width: 48%; height: auto; }
.stage .mark-lg .mk-bg { fill: var(--accent); rx: 3px; }
.stage .mark-lg .mk-i { fill: var(--on-accent); font-family: var(--font-heading); font-weight: 600; font-size: 22px; }
.stage:has(.il) { background: var(--surface); }
.stage:has(.il)::before, .stage:has(.il)::after { display: none; }
.stage .il { position: relative; z-index: 1; width: 82%; height: auto; }

.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--fg); color: var(--bg); border: 0; border-radius: 3px; padding: 14px 26px; font: inherit; font-weight: 500; letter-spacing: .01em; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.btn:hover { transform: translateY(-1px); opacity: .88; }
.btn--sm { padding: 9px 18px; font-size: 14px; }
.btn--lg { padding: 17px 34px; font-size: 17px; }
.btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--fg); }

.hero { padding-block: clamp(56px,9vw,120px) clamp(40px,6vw,80px); }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px,7vw,90px); align-items: end; }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); padding-bottom: 18px; }
.hero h1 { font-size: clamp(42px,7vw,84px); margin-bottom: 22px; }
.hero .lead { font-size: clamp(17px,1.6vw,20px); color: var(--muted,#666); max-width: 34ch; }
.cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 34px; }
.cta-row .note { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

.stage { position: relative; aspect-ratio: 4/5; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.stage::after { content: ""; position: absolute; width: 1px; height: 100%; left: 50%; background: var(--line); opacity: .5; }
.stage::before { content: ""; position: absolute; width: 46%; aspect-ratio: 1; border: 1px solid var(--accent); border-radius: 50%; opacity: .5; }
/* real photo hero: full-bleed cover with a slow Ken Burns drift; drop the decorative plate */
.stage:has(.shot) { background: var(--surface); }
.stage:has(.shot)::before, .stage:has(.shot)::after { display: none; }
.stage .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kb 22s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1.04); } to { transform: scale(1.13) translate(-1.4%, -1.2%); } }

/* cinematic in-use band — full-bleed lifestyle photo, parallax drift, warm scrim, type overlay */
.life { position: relative; min-height: clamp(440px, 76vh, 800px); display: grid; align-items: end; overflow: hidden; isolation: isolate; margin-block: clamp(8px, 2vw, 24px); }
.life__media { position: absolute; inset: -14% 0; z-index: -2; will-change: transform; }
.life__media img { width: 100%; height: 100%; object-fit: cover; }
.life::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10,8,6,.76), rgba(10,8,6,.18) 52%, rgba(10,8,6,.04) 80%); }
.life__inner { padding-block: clamp(48px, 8vw, 110px); color: #fff; }
.life__inner .eyebrow { color: #fff; opacity: .92; padding-bottom: 14px; }
.life h2 { color: #fff; font-size: clamp(32px, 5vw, 62px); max-width: 18ch; margin-bottom: 16px; }
.life__sub { color: rgba(255,255,255,.86); font-size: clamp(16px, 1.6vw, 21px); max-width: 44ch; margin-bottom: 28px; }
.life .btn { background: #fff; color: #14110d; }
.life .btn:hover { opacity: .9; transform: translateY(-1px); }

.marquee { overflow: hidden; border-block: 1px solid var(--line); }
.marquee__track { display: flex; gap: 56px; width: max-content; padding: 16px 28px; animation: marq 30s linear infinite; }
.marquee span { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.marquee span::after { content: "—"; margin-left: 56px; color: var(--accent); }

section { padding-block: clamp(56px,9vw,110px); }
.sec-head { max-width: 40ch; margin-bottom: 48px; }
.sec-head h2 { font-size: clamp(28px,4vw,46px); }
.sec-head p { color: var(--muted); margin-top: 14px; font-size: 18px; }

.buy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: start; }
.card { background: var(--surface); border: 1px solid var(--line); padding: clamp(28px,3vw,44px); }
.price { font-family: var(--font-heading); font-size: clamp(38px,5vw,58px); }
.price small { font-size: .34em; color: var(--muted); margin-left: 8px; letter-spacing: .02em; }
.variants { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0; margin: 22px 0 28px; }
.variants li { border: 1px solid var(--line); border-right: 0; padding: 11px 18px; font-size: 14px; }
.variants li:last-child { border-right: 1px solid var(--line); }
.variants li:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }

.feats { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-top: 1px solid var(--fg); }
.feat { padding: 34px 28px 34px 0; border-right: 1px solid var(--line); }
.feat:last-child { border-right: 0; padding-right: 0; }
.feat .ic { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.feat h3 { font-size: 22px; margin-bottom: 10px; }
.feat p { color: var(--muted); font-size: 15px; }

.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 0; font-family: var(--font-heading); font-size: 21px; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 22px; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 24px; color: var(--muted); }

.ft { border-top: 1px solid var(--fg); padding-block: 48px; color: var(--muted); font-size: 14px; }
.ft .discl { max-width: 60ch; }
.ft .links { display: flex; gap: 24px; margin: 16px 0; }
.ft a:hover { color: var(--accent); }

.prose { max-width: 700px; padding-block: clamp(48px,8vw,96px); }
.prose h1 { font-size: clamp(34px,5vw,52px); margin-bottom: 22px; }
.prose p { color: var(--muted); margin-bottom: 16px; }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-d="1"]{transition-delay:.1s}[data-reveal][data-d="2"]{transition-delay:.2s}[data-reveal][data-d="3"]{transition-delay:.3s}[data-reveal][data-d="4"]{transition-delay:.4s}
@keyframes marq { to { transform: translateX(-50%) } }

@media (max-width: 820px) { .hero__grid, .buy { grid-template-columns: 1fr; } .stage { max-width: 360px; order: -1; } .feats { grid-template-columns: 1fr; } .feat { border-right: 0; border-bottom: 1px solid var(--line); padding: 28px 0; } }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} [data-reveal]{opacity:1;transform:none} }