/* ============================================================
   at-visions — shared base (constants for BOTH variants)
   Outfit · 12-col grid · 8px spacing · warm-neutral text ramp
   Variant-specific tokens (radius, surfaces, secondary accent)
   are defined per-file. Nothing here picks a direction.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* surfaces */
  --white:#FFFFFF;
  --black:#000000;

  /* warm-neutral text ramp */
  --text-strong:#1A1714;
  --text-secondary:#3D3833;
  --text-body:#57514A;
  --text-muted:#7C756B;

  /* accents */
  --accent-gold:#BA9653;

  /* hairline */
  --line:rgba(26,23,20,.14);
  --line-soft:rgba(26,23,20,.08);
  --line-invert:rgba(255,255,255,.18);

  /* spacing — 8px base */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px; --s9:160px;

  /* grid */
  --maxw:1280px;
  --gutter:clamp(20px,4.5vw,72px);

  /* type fluid */
  --fs-h1:clamp(34px,5.2vw,52px);
  --fs-h2:clamp(26px,3.6vw,36px);
  --fs-statement:clamp(28px,4.4vw,52px);
  --fs-testimonial:clamp(24px,3.2vw,38px);
  --fs-sub:clamp(18px,1.5vw,20px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body{
  margin:0;
  overflow-x:hidden;
  font-family:'Outfit',Inter,system-ui,-apple-system,sans-serif;
  font-weight:400;
  color:var(--text-body);
  background:var(--white);
  font-size:16px;
  line-height:1.6;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,128px)}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s4)}

/* ---------- type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);line-height:1;
}
.eyebrow::before{
  content:"";width:22px;height:1.5px;background:var(--accent-gold);display:block;
}
h1,h2,h3{color:var(--text-strong);font-weight:600;margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:1.06;letter-spacing:-.015em}
h2{font-size:var(--fs-h2);line-height:1.16;letter-spacing:-.01em}
.sub{font-size:var(--fs-sub);line-height:1.6;color:var(--text-secondary);font-weight:400;text-wrap:pretty}
.body{color:var(--text-body)}
.caption{font-size:13px;color:var(--text-muted);line-height:1.55}
.gold{color:var(--accent-gold)}

/* ---------- meta + nav (shared scaffold) ---------- */
.meta{border-bottom:1px solid var(--line-soft);background:var(--white)}
.meta-inner{
  max-width:var(--maxw);margin:0 auto;padding:7px var(--gutter);
  display:flex;justify-content:flex-end;align-items:center;gap:var(--s3);
  font-size:12.5px;color:var(--text-muted);
}
.meta a{color:var(--text-muted);transition:color .25s var(--ease)}
.meta a:hover{color:var(--text-strong)}
.meta .sep{width:1px;height:12px;background:var(--line);display:block}
.lang{display:flex;align-items:center;gap:8px;letter-spacing:.04em}
.lang .on{color:var(--text-strong);font-weight:500}
.lang a{color:var(--text-muted);text-decoration:none;transition:color .25s var(--ease)}
.lang a:hover{color:var(--text-strong)}
.lang .soon{position:relative;color:var(--text-muted);opacity:.5;cursor:not-allowed}
.lang .soon::after{
  content:"soon";position:absolute;left:50%;top:-15px;transform:translateX(-50%);
  font-size:8.5px;letter-spacing:.1em;color:var(--accent-gold);text-transform:uppercase;
}

.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line-soft)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:18px var(--gutter);display:flex;align-items:center;gap:var(--s4)}
.nav-logo{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px);margin-left:auto;font-size:15px;font-weight:500;color:var(--text-secondary);white-space:nowrap}
.nav-links a{position:relative;padding-block:4px;transition:color .25s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--accent-gold);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--text-strong)}
.nav-links a:hover::after{width:100%}
@media(max-width:920px){.nav-links .navhide{display:none}.nav-links .btn.btn-sm{display:none}}

/* ---------- mobile hamburger button ---------- */
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:4px;margin-left:auto;flex-shrink:0}
.nav-burger span{display:block;width:22px;height:2px;background:var(--text-strong);border-radius:2px;transition:transform .28s var(--ease),opacity .2s var(--ease)}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:920px){.nav-burger{display:flex}}

/* ---------- mobile nav drawer ---------- */
.mob-nav{position:fixed;left:0;right:0;bottom:0;top:70px;background:var(--white);z-index:49;overflow-y:auto;padding:8px var(--gutter) 48px;visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s;-webkit-overflow-scrolling:touch}
.mob-nav.open{visibility:visible;opacity:1;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s 0s}
body.mob-nav-open{overflow:hidden}
.mob-nav-inner{display:flex;flex-direction:column;max-width:var(--maxw);margin:0 auto}
.mob-item{border-bottom:1px solid var(--line-soft)}
.mob-item-btn{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;padding:18px 0;font-size:17px;font-weight:500;color:var(--text-body);cursor:pointer;text-align:left;font-family:inherit;gap:12px}
.mob-item-btn:hover{color:var(--text-strong)}
.mob-chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease);flex-shrink:0;margin-top:-2px}
.mob-item.open .mob-chev{transform:rotate(225deg);margin-top:2px}
.mob-sub{display:none;flex-direction:column;padding:0 0 14px 14px}
.mob-item.open .mob-sub{display:flex}
.mob-sub-link{display:block;padding:11px 0;font-size:15px;color:var(--text-secondary);text-decoration:none;border-bottom:1px solid var(--line-soft)}
.mob-sub-link:last-child{border-bottom:none}
.mob-sub-link:hover{color:var(--text-strong)}
.mob-direct-link{display:block;padding:18px 0;font-size:17px;font-weight:500;color:var(--text-body);text-decoration:none}
.mob-direct-link:hover{color:var(--text-strong)}
.mob-cta{padding:28px 0 8px}
.mob-cta .btn{display:flex;justify-content:center;width:100%}

/* ---------- nav dropdowns (submenus) — shared scaffold ----------
   Radius adapts per variant: A has no --radius-soft → 2px (sharp);
   B defines --radius-soft:12px → soft. No drop shadow (persona). */
.nav-item{position:relative;display:inline-flex;align-items:center}
.nav-item>a{display:inline-flex;align-items:center;gap:7px}
.nav-item>a .chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.45;transition:transform .3s var(--ease),opacity .25s var(--ease)}
.nav-item:hover>a .chev,.nav-item:focus-within>a .chev{opacity:.85;transform:rotate(225deg);margin-top:1px}
.nav-drop{
  position:absolute;top:calc(100% + 16px);left:-16px;min-width:248px;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-soft,2px);
  padding:7px;display:flex;flex-direction:column;gap:1px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s var(--ease);
  z-index:60;
}
.nav-drop::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;transform:none}
.nav-drop a{display:block;padding:10px 13px;font-size:14px;font-weight:400;color:var(--text-body);border-radius:calc(var(--radius-soft,2px) - 4px);transition:background .2s var(--ease),color .2s var(--ease)}
.nav-drop a::after{display:none!important}
.nav-drop a:hover{background:var(--surface-warm,rgba(26,23,20,.045));color:var(--text-strong)}
.nav-drop .sub-lead{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);padding:7px 13px 9px;border-bottom:1px solid var(--line-soft);margin-bottom:5px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:500;font-size:16px;line-height:1;
  padding:15px 26px;border:1px solid transparent;white-space:nowrap;
  background:var(--text-strong);color:var(--white);
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-sm{padding:11px 18px;font-size:14px}
.btn-ghost{background:transparent;color:var(--text-strong);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent-gold);color:var(--accent-gold)}

/* text link with arrow */
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--text-strong);font-size:15px;white-space:nowrap}
.tlink .arw{transition:transform .3s var(--ease);color:var(--accent-gold)}
.tlink:hover .arw{transform:translateX(4px)}

/* ---------- image placeholders (B/W -> color morph on hover) ---------- */
.ph{
  position:relative;overflow:hidden;background:#e9e6e0;
  --ph-a:#cfc ;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(135deg,rgba(0,0,0,.035) 0 2px,transparent 2px 11px),
    linear-gradient(160deg,#d8d4cd,#bfbbb3 55%,#a9a59d);
  filter:grayscale(1) contrast(1.02);
  transition:filter .45s var(--ease),transform .8s var(--ease);
}
.ph::after{
  content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(160deg,rgba(186,150,83,.55),rgba(47,74,77,.4) 70%,rgba(120,90,40,.45));
  mix-blend-mode:multiply;transition:opacity .5s var(--ease);
}
.ph:hover::before{filter:grayscale(0) contrast(1.04);transform:scale(1.03)}
.ph:hover::after{opacity:1}
.ph-label{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.02em;
  color:rgba(255,255,255,.92);background:rgba(20,18,15,.42);
  padding:4px 9px;backdrop-filter:blur(3px);max-width:78%;line-height:1.4;
}

/* logo strip placeholders */
.logorow{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,64px)}
.logoph{
  height:30px;min-width:96px;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;
  color:var(--text-muted);
  filter:grayscale(1);opacity:.62;transition:opacity .4s var(--ease),color .4s var(--ease),filter .4s var(--ease);
}
.logoph:hover{opacity:1;color:var(--accent-gold);filter:grayscale(0)}

/* ---------- bold statement (black, inverted) — shared ---------- */
.statement{background:var(--black);color:var(--white)}
.statement .wrap{padding-block:clamp(72px,11vw,144px)}
.statement-eyebrow{color:rgba(255,255,255,.6)}
.statement-eyebrow::before{background:var(--accent-gold)}
.statement h2,.statement .big{color:#fff}
.big{font-size:var(--fs-statement);font-weight:600;line-height:1.12;letter-spacing:-.02em;text-wrap:balance;margin:0}
.statement .sub{color:rgba(255,255,255,.62)}
.quote{font-size:var(--fs-testimonial);font-weight:400;line-height:1.4;color:#fff;letter-spacing:-.01em;text-wrap:balance}
.quote .mark{color:var(--accent-gold)}

/* ---------- footer (shared scaffold) ---------- */
.footer{border-top:1px solid var(--line);padding-block:var(--s7) var(--s5)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--s4)}
.foot-col h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-weight:600;margin:0 0 16px}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot-col a{font-size:14.5px;color:var(--text-body);transition:color .25s var(--ease)}
.foot-col a:hover{color:var(--accent-gold)}
.foot-brand img{height:36px;margin-bottom:18px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-top:var(--s7);padding-top:var(--s3);border-top:1px solid var(--line-soft);font-size:13px;color:var(--text-muted);flex-wrap:wrap}

/* ---------- reveal on scroll ----------
   Content is ALWAYS visible (opacity:1). The entrance only nudges
   transform, so a missed observer / static capture never hides copy. */
@keyframes avRise{from{transform:translateY(20px)}to{transform:none}}
.reveal{opacity:1}
html.js .reveal.in{animation:avRise .7s var(--ease) both}

@media(max-width:860px){
  /* prevent any child from blowing past the viewport */
  .wrap,.section,.grid12{max-width:100%;min-width:0}
  /* force gap reset — beats higher-specificity per-section overrides (.why .grid12 etc.) */
  .grid12{gap:var(--s3)!important}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)}
  .foot-brand{grid-column:1/-1}
  /* fix why-item right padding on single-column mobile */
  .why-item{padding-right:0}
}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .meta-inner{gap:var(--s2)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001ms!important}
  html.js .reveal{opacity:1}
  .reveal{opacity:1;transform:none}
  .ph::before{filter:grayscale(0)}
}