:root{
  --text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
  --text-sm:clamp(0.875rem,0.8rem + 0.35vw,1rem);
  --text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + 0.75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-3xl:clamp(2.5rem,1rem + 4vw,5rem);

  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;
  --space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;

  --color-bg:#121211;
  --color-surface:#1a1a18;
  --color-surface-2:#21211f;
  --color-border:oklch(0.9 0.01 90 / 0.12);
  --color-text:#e9e7e2;
  --color-text-muted:#a5a39d;
  --color-text-faint:#6f6e69;
  --color-primary:#5aa3ad;
  --color-primary-hover:#79b8c0;
  --color-on-primary:#0c1a1c;

  --radius-sm:4px;--radius-md:8px;--radius-lg:14px;
  --transition-interactive:180ms cubic-bezier(0.16,1,0.3,1);

  --font-display:'Zodiak','Georgia',serif;
  --font-body:'Satoshi','Inter',sans-serif;
  --content:1180px;
  --gutter:clamp(var(--space-5),5vw,var(--space-16));
}

.wrap{max-width:var(--content);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:var(--space-4);top:-100px;background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);z-index:100}
.skip:focus{top:var(--space-4)}

a{color:inherit}
.eyebrow{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);font-weight:700}
.muted{color:var(--color-text-muted)}

/* Header */
.header{position:sticky;top:0;z-index:50;background:oklch(from var(--color-bg) l c h / 0.88);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color var(--transition-interactive)}
.header--scrolled{border-bottom-color:var(--color-border)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:68px}
.brand{text-decoration:none;display:flex;flex-direction:column;line-height:1.1}
.brand strong{font-family:var(--font-display);font-size:var(--text-lg);font-weight:500;letter-spacing:-.01em}
.brand span{font-size:var(--text-xs);color:var(--color-text-muted)}
.nav{display:flex;gap:var(--space-6);align-items:center}
.nav a{font-size:var(--text-sm);text-decoration:none;color:var(--color-text-muted)}
.nav a:hover{color:var(--color-text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:700;text-decoration:none;background:var(--color-primary);color:var(--color-on-primary)}
.btn:hover{background:var(--color-primary-hover)}
.btn--ghost{background:transparent;color:var(--color-text);border:1px solid var(--color-border)}
.btn--ghost:hover{background:var(--color-surface-2);border-color:oklch(0.9 0.01 90 / 0.25)}
.nav .btn{color:var(--color-on-primary)}
.nav .btn:hover{color:var(--color-on-primary)}

/* Hero */
.hero{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.55}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,oklch(from var(--color-bg) l c h / 0.35) 0%,oklch(from var(--color-bg) l c h / 0.7) 55%,var(--color-bg) 100%)}
.hero .wrap{width:100%;padding-block:var(--space-24) clamp(var(--space-12),8vw,var(--space-24))}
.hero h1{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:500;letter-spacing:-.02em;max-width:15ch;margin-block:var(--space-4) var(--space-6)}
.hero h1 em{font-style:normal;color:var(--color-primary)}
.hero p.lead{font-size:var(--text-lg);color:var(--color-text-muted);max-width:52ch;line-height:1.5}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}

/* Sections */
section{padding-block:clamp(var(--space-16),9vw,var(--space-32))}
.section--tight{padding-block:clamp(var(--space-12),6vw,var(--space-20))}
.section--alt{background:var(--color-surface)}
h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:500;letter-spacing:-.015em;margin-top:var(--space-3);max-width:20ch}
h3{font-size:var(--text-lg);font-weight:700;letter-spacing:-.005em}

/* Thesis */
.thesis{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(var(--space-10),6vw,var(--space-24));align-items:start}
.thesis p{color:var(--color-text-muted);margin-top:var(--space-5)}
.thesis p:first-of-type{margin-top:var(--space-6)}
.pillars{list-style:none;counter-reset:p;border-top:1px solid var(--color-border)}
.pillars li{counter-increment:p;display:grid;grid-template-columns:3.5rem 1fr;gap:var(--space-4);padding-block:var(--space-6);border-bottom:1px solid var(--color-border);max-width:none}
.pillars li::before{content:"0" counter(p);font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-primary);line-height:1.3}
.pillars h3{margin-bottom:var(--space-2)}
.pillars p{color:var(--color-text-muted);font-size:var(--text-sm);margin:0}

/* Offers */
.offers__head{display:flex;justify-content:space-between;align-items:end;gap:var(--space-8);flex-wrap:wrap;margin-bottom:var(--space-12)}
.offers__head p{color:var(--color-text-muted);max-width:44ch}
.offers{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-4)}
.offer{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(var(--space-6),3vw,var(--space-10));display:flex;flex-direction:column;gap:var(--space-4)}
.offer--lead{grid-column:span 6;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(var(--space-6),4vw,var(--space-16));align-items:start}
.offer--half{grid-column:span 3}
.offer--third{grid-column:span 2}
.offer .tag{font-size:var(--text-xs);color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.offer h3{font-family:var(--font-display);font-weight:500;font-size:var(--text-xl);letter-spacing:-.01em}
.offer p{color:var(--color-text-muted);font-size:var(--text-sm)}
.offer ul{list-style:none;display:grid;gap:var(--space-2);font-size:var(--text-sm)}
.offer ul li{padding-left:var(--space-5);position:relative;color:var(--color-text)}
.offer ul li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--color-primary)}
.formats{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:auto;padding-top:var(--space-2)}
.chip{font-size:var(--text-xs);padding:var(--space-1) var(--space-3);border-radius:999px;border:1px solid var(--color-border);color:var(--color-text-muted)}

/* Delivery split */
.delivery{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-12)}
.delivery div{border-top:1px solid var(--color-primary);padding-top:var(--space-5)}
.delivery h3{margin-bottom:var(--space-2)}
.delivery p{color:var(--color-text-muted);font-size:var(--text-sm)}

/* Gen Z */
.genz{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-10),6vw,var(--space-20));align-items:center}
.genz figure img{border-radius:var(--radius-lg);aspect-ratio:4/3;object-fit:cover;width:100%}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-block:var(--space-8)}
.stat strong{display:block;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:500;color:var(--color-primary);line-height:1;font-variant-numeric:tabular-nums lining-nums}
.stat span{display:block;margin-top:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted)}
.genz p{color:var(--color-text-muted);margin-top:var(--space-4)}
.source{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-4)}
.source a{color:var(--color-text-muted)}

/* Quote band */
.band{border-block:1px solid var(--color-border)}
.band blockquote{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;letter-spacing:-.015em;line-height:1.2;max-width:24ch}
.band blockquote span{color:var(--color-primary)}
.band cite{display:block;margin-top:var(--space-6);font-style:normal;font-size:var(--text-sm);color:var(--color-text-muted)}

/* About */
.about{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(var(--space-10),6vw,var(--space-24))}
.about__body p{color:var(--color-text-muted);margin-top:var(--space-5)}
.record{list-style:none;margin-top:var(--space-8);border-top:1px solid var(--color-border)}
.record li{display:grid;grid-template-columns:minmax(9rem,12rem) 1fr;gap:var(--space-4);padding-block:var(--space-4);border-bottom:1px solid var(--color-border);max-width:none;font-size:var(--text-sm)}
.record li b{color:var(--color-text);font-weight:700}
.record li span{color:var(--color-text-muted)}

/* Perspectives */
.persp{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:var(--space-10);border-top:1px solid var(--color-border)}
.persp article{padding:var(--space-6) var(--space-6) var(--space-6) 0;border-bottom:1px solid var(--color-border)}
.persp article:not(:nth-child(3n+1)){padding-left:var(--space-6);border-left:1px solid var(--color-border)}
.persp h3{font-family:var(--font-display);font-weight:500;font-size:var(--text-lg);line-height:1.3}
.persp p{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-2)}

/* Contact */
.contact{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(var(--space-10),6vw,var(--space-20));align-items:end}
.contact h2{max-width:16ch}
.contact p{color:var(--color-text-muted);margin-top:var(--space-5)}
.contact__card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(var(--space-6),3vw,var(--space-10));display:grid;gap:var(--space-5)}
.contact__card dl{display:grid;gap:var(--space-4)}
.contact__card dt{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-faint);font-weight:700}
.contact__card dd{font-size:var(--text-sm);word-break:break-word}
.contact__card dd a{color:var(--color-text);text-decoration-color:var(--color-primary);text-underline-offset:3px}
.contact__card dd a:hover{color:var(--color-primary)}

footer{padding-block:var(--space-10);border-top:1px solid var(--color-border);font-size:var(--text-xs);color:var(--color-text-faint)}
footer .wrap{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}

/* Reveal */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(0.16,1,0.3,1),transform .7s cubic-bezier(0.16,1,0.3,1)}
.js .reveal.in{opacity:1;transform:none}

/* Responsive */
@media (max-width:900px){
  .nav a:not(.btn){display:none}
  .thesis,.genz,.about,.contact,.offer--lead{grid-template-columns:1fr}
  .offer--half,.offer--third{grid-column:span 6}
  .persp{grid-template-columns:1fr}
  .persp article,.persp article:not(:nth-child(3n+1)){padding:var(--space-5) 0;border-left:0}
  .delivery{grid-template-columns:1fr}
}
@media (max-width:520px){
  .brand span{display:none}
  .record li{grid-template-columns:1fr;gap:var(--space-1)}
  .stats{grid-template-columns:1fr}
  .hero{min-height:auto}
}
.show-sm{display:none}
@media (max-width:520px){.hide-sm{display:none}.show-sm{display:inline}.brand strong{white-space:nowrap;font-size:1.125rem}.nav .btn{padding-inline:var(--space-4);white-space:nowrap}}
.about__photo{margin-top:var(--space-8)}
.about__photo img{width:100%;border-radius:var(--radius-lg);aspect-ratio:921/1173;object-fit:cover}
@media (max-width:900px){.about__photo{max-width:520px}}
.more{margin-top:var(--space-6)}
.more a{color:var(--color-primary);font-weight:700;font-size:var(--text-sm);text-decoration:none}
.more a:hover{color:var(--color-primary-hover)}
.nav a[aria-current="page"]{color:var(--color-text)}

/* About page */
.ab-hero{padding-block:clamp(var(--space-12),7vw,var(--space-24))}
.ab-hero .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(var(--space-10),6vw,var(--space-20));align-items:center}
.ab-hero img{width:100%;border-radius:var(--radius-lg);aspect-ratio:4/5;object-fit:cover}
.ab-hero h1{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:500;letter-spacing:-.02em;line-height:1.05;margin-block:var(--space-4) var(--space-6)}
.ab-hero .role{font-size:var(--text-sm);color:var(--color-text-muted);letter-spacing:.02em}
.ab-hero .lead{font-size:var(--text-lg);color:var(--color-text-muted);line-height:1.5;max-width:46ch;margin-top:var(--space-6)}
.story{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(var(--space-10),6vw,var(--space-24))}
.story__body p{color:var(--color-text-muted);margin-top:var(--space-5)}
.story__body p:first-child{margin-top:0}
.roles{list-style:none;display:grid;gap:var(--space-4);margin-top:var(--space-10)}
.roles li{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(var(--space-6),3vw,var(--space-8));max-width:none}
.roles h3{font-family:var(--font-display);font-weight:500;font-size:var(--text-xl)}
.roles .co{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-primary);font-weight:700;margin-top:var(--space-2)}
.roles ul{list-style:none;display:grid;gap:var(--space-2);margin-top:var(--space-4);font-size:var(--text-sm)}
.roles ul li{background:none;border:0;padding:0 0 0 var(--space-5);position:relative;border-radius:0;color:var(--color-text-muted)}
.roles ul li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--color-primary)}
.speak{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(var(--space-10),6vw,var(--space-20));align-items:center}
.speak img{width:100%;border-radius:var(--radius-lg);aspect-ratio:921/1173;object-fit:cover;max-height:640px}
.speak p{color:var(--color-text-muted);margin-top:var(--space-5)}
.topics{list-style:none;margin-top:var(--space-6);border-top:1px solid var(--color-border)}
.topics li{padding-block:var(--space-4);border-bottom:1px solid var(--color-border);font-family:var(--font-display);font-size:var(--text-lg);max-width:none}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--space-8);flex-wrap:wrap}
.cta-band h2{max-width:22ch}
@media (max-width:900px){
  .ab-hero .wrap,.story,.speak{grid-template-columns:1fr}
  .ab-hero img{max-width:460px}
  .speak img{max-width:520px}
}
@media (min-width:901px){.story > div:first-child{position:sticky;top:110px;align-self:start}}
