.skip-link{position:absolute;top:-100px;left:12px;z-index:9999;background:var(--dark-2);color:#fff;
  padding:12px 20px;border-radius:6px;font-family:"Roboto";font-weight:600;font-size:14px;text-decoration:none;
  transition:top .2s ease}
.skip-link:focus{top:12px}

/* Visible keyboard focus state. The site previously relied entirely on each
   browser's own default outline (never stripped, so keyboard nav was never
   actually broken) but had no branded/consistent focus treatment anywhere.
   :focus-visible keeps this from showing on mouse clicks (browsers already
   suppress it there) while guaranteeing a clear, on-brand ring for keyboard
   and assistive-tech users on every link, button and control site-wide. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
  outline:2.5px solid var(--copper);outline-offset:3px;border-radius:3px;
}
.skip-link:focus-visible{outline-color:#fff}

:root{
  --bg:#FFFEF9;
  --cream:#F7ECE2;
  --cream-2:#FBF4EC;
  --paper:#FFFFFF;
  --ink:#2B2926;
  --ink-2:#6A635C;
  --ink-3:#736A5F;
  --copper:#B96F53;
  --copper-deep:#9E5840;
  --copper-soft:#D89E84;
  --copper-tint:#F3E2D8;
  --dark:#232426;
  --dark-2:#1B1C1E;
  --dark-card:#2B2C2E;
  --dark-card-2:#313234;
  --on-dark:#F4EFE9;
  --on-dark-2:rgba(244,239,233,.62);
  --line:rgba(43,41,38,.12);
  --line-2:rgba(43,41,38,.07);
  --line-dark:rgba(244,239,233,.12);
  --r:6px;
  --r-lg:8px;
  --r-sm:5px;
  --sh-1:0 2px 6px rgba(60,45,35,.03), 0 10px 30px -8px rgba(60,45,35,.07);
  --sh-2:0 4px 10px rgba(60,45,35,.03), 0 30px 75px -28px rgba(60,45,35,.12);
  --sh-3:0 6px 16px rgba(60,45,35,.04), 0 64px 130px -46px rgba(70,48,34,.16);
  --sh-copper:0 28px 75px -26px rgba(160,82,55,.22);
  --sh-dark:0 46px 115px -42px rgba(0,0,0,.28);
  --maxw:1200px;
  --ease:cubic-bezier(.22,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:"Roboto",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* NOTE: do not add overflow-x:hidden here unscoped, and do not use
     'hidden' at all if body ever needs position:sticky descendants (mobile
     now has its own pinned scroll-scrub sections below 900px). Per spec,
     setting overflow-x to anything but 'visible' while overflow-y is left
     unset silently forces overflow-y to 'auto' too — that turns body into
     its own independent scroll container nested inside html's, which
     breaks position:sticky for any sticky element inside it. 'clip' is
     exempt from that auto-promotion (the spec only forces the promotion
     when one axis is 'visible' and the other is neither 'visible' nor
     'clip'), so it blocks horizontal scroll/shift on phones without ever
     creating a nested scroll container or touching desktop rendering. */
}
@media(max-width:900px){body{overflow-x:clip}}
h1,h2,h3,h4,h5{font-family:"Archivo","Roboto",sans-serif;font-weight:600;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#9F5640}
.eyebrow::before{content:"";width:30px;height:1.5px;background:currentColor;display:inline-block}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:30px;height:1.5px;background:currentColor;display:inline-block}
.eyebrow.on-dark{color:#BE7B61}
.eyebrow.on-dark::before{background:currentColor}
.muted{color:var(--ink-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:"Roboto";font-weight:500;font-size:15px;
  padding:15px 26px;border-radius:6px;cursor:pointer;border:1px solid transparent;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.btn .arw{transition:transform .4s var(--ease);display:inline-block}
.btn:hover .arw{transform:translateX(4px)}
.btn-primary{background:linear-gradient(105deg,#E2865C 0%,#934C3A 92%);color:#fff;
  box-shadow:0 10px 26px -8px rgba(190,100,66,.6),0 0 22px -4px rgba(226,134,92,.5),inset 0 1px 0 rgba(255,255,255,.32)}
.btn-primary::after{content:"";position:absolute;top:0;left:-90%;width:55%;height:100%;pointer-events:none;transform:skewX(-22deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:btnSheen 4.8s ease-in-out infinite}
@keyframes btnSheen{0%{left:-90%}24%{left:175%}100%{left:175%}}
.btn-primary:hover{background:linear-gradient(105deg,#D67A50 0%,#84422F 92%);transform:translateY(-2px);
  box-shadow:0 14px 34px -8px rgba(200,108,70,.78),0 0 30px -2px rgba(226,134,92,.65),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-primary .arw,.btn-primary span{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.btn-primary::after{animation:none;display:none}}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-light{background:#F8F2EA;color:var(--ink);box-shadow:var(--sh-1)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-sm{padding:12px 20px;font-size:14px}
/* Mobile: let button labels wrap inside the button (keep font size) so text never spills out */
@media(max-width:767px){.btn{white-space:normal;text-align:center;line-height:1.28}}
/* Minimal brand language: remove arrow icons from CTAs (incl. the iOS emoji ↗) */
.btn .arw,.sc-link .arw{display:none}
/* Background videos are decorative: kill ALL native iOS/Safari controls and make them non-interactive */
video{pointer-events:none}
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none!important;opacity:0!important}

/* ===== NAV ===== */
header{position:fixed;inset:0 0 auto 0;z-index:1000;background:rgba(255,254,249,.72);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);box-shadow:0 1px 0 rgba(43,41,38,.06);transition:background .5s var(--ease),box-shadow .5s var(--ease),backdrop-filter .5s,transform .45s var(--ease)}
header.nav-hidden{transform:translateY(-100%)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;transition:padding .5s var(--ease)}
header.scrolled{background:rgba(255,254,249,.85);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);box-shadow:0 1px 0 var(--line-2),0 20px 55px -32px rgba(60,42,30,.22)}
header.scrolled .nav{padding:12px 0}
.logo{flex-shrink:0}
.logo img{height:30px;width:auto;transition:height .5s var(--ease)}
header.scrolled .logo img{height:26px}
.nav-mid{display:flex;align-items:center;gap:32px}
.nav-mid a{font-size:14.5px;font-weight:500;color:var(--ink-2);position:relative;padding:4px 0}
.nav-mid a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--copper);transition:width .4s var(--ease)}
.nav-mid a:hover{color:var(--ink)}
.nav-mid a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:20px}
.nav-phone{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);font-weight:500}
.nav-phone svg{width:15px;height:15px;color:var(--copper)}
.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.menu-btn span{width:24px;height:2px;background:var(--ink);transition:.3s var(--ease)}
.mobile-menu{position:fixed;inset:0;z-index:999;background:var(--bg);transform:translateY(-100%);transition:transform .6s var(--ease);display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;padding:110px 40px 40px;gap:4px}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{font-family:"Archivo";font-size:30px;font-weight:600;padding:12px 0;border-bottom:1px solid var(--line-2)}
.mobile-menu .btn{margin-top:28px;justify-content:center}

/* ===== NAV DROPDOWN (desktop hover/click + mobile accordion) ===== */
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:14.5px;font-weight:500;color:var(--ink-2);background:none;border:none;cursor:pointer;padding:4px 0;position:relative}
.nav-drop-btn .caret{transition:transform .3s var(--ease)}
.nav-drop-btn::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--copper);transition:width .4s var(--ease)}
.nav-drop:hover .nav-drop-btn,.nav-drop.open .nav-drop-btn,.nav-drop-btn:focus-visible{color:var(--ink)}
.nav-drop:hover .nav-drop-btn::after,.nav-drop.open .nav-drop-btn::after,.nav-drop-btn:focus-visible::after{width:100%}
.nav-drop:hover .caret,.nav-drop.open .caret{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);min-width:246px;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:8px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.nav-drop:hover .nav-drop-menu,.nav-drop.open .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(10px)}
.nav-drop-menu a{display:block;padding:10px 14px;border-radius:var(--r-sm);font-size:14px;color:var(--ink-2)}
.nav-drop-menu a::after{display:none}
.nav-drop-menu a:hover{background:var(--cream-2);color:var(--ink)}
.mm-drop-btn{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:"Archivo";font-size:30px;font-weight:600;padding:12px 0;border:none;border-bottom:1px solid var(--line-2);background:none;cursor:pointer;color:var(--ink);text-align:left}
.mm-drop-btn .caret{width:16px;height:16px;flex-shrink:0;transition:transform .3s var(--ease)}
.mm-drop-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.mm-drop-menu{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.mm-drop-menu.open{max-height:320px}
.mm-drop-menu a{display:block;width:100%;font-family:"Roboto";font-size:18px;font-weight:500;line-height:1.3;padding:10px 0 10px 16px;border-bottom:none}
/* Nav collapses to the hamburger well before true desktop widths: the full
   nav (logo + 6 links + phone + CTA button) needs roughly 950-1000px of
   unwrapped horizontal space to lay out on one line, but was previously only
   swapping to the hamburger below 680px. Every tablet width (768-1024px)
   fell in between — wide enough to keep the desktop nav, too narrow to fit
   it — so on those screens the nav overflowed past the header's own bounds.
   Since html{overflow-x:clip} hides that overflow instead of scrolling to
   it, the effect was silently missing/cut-off nav items (usually the phone
   number and/or CTA button) rather than a visible bug. Moving the collapse
   to 1100px keeps every tablet on the hamburger, matching how virtually all
   production sites handle nav at these widths. */
@media(max-width:1100px){
  .nav-mid,.nav-phone{display:none}
  .nav-right .btn-primary{display:none}
  .menu-btn{display:flex}
  .logo{padding:18px 14px}
}

/* ===== HERO (Neurox-style scroll-scrub) ===== */
.hero{position:relative;background:#FFFEF8;padding-bottom:25px}
/* A legacy mobile rule further down (@media max-width:680px) still sets
   .hero{padding-top:120px} — left over from before this pinned scroll-scrub
   version existed, meant to clear the fixed header for the old static hero.
   With the sticky pin now living directly inside .hero, that padding pushes
   the whole pin (and the full-bleed video inside it) down by 120px before it
   can lock to the top, producing a visible gap that only closes once the
   user scrolls past it. Neutralise it whenever the pinned version is active;
   .hero.scrub's specificity (2 classes) beats the plain .hero rule
   regardless of source order, so this is safe at any viewport width. */
.hero.scrub{padding-top:0}
.hero-pin{position:relative}
.hero-final{max-width:1240px;margin:0 auto;padding:98px 24px 60px;text-align:center}
.hero-copy{max-width:1080px;margin:0 auto}
.hero-eyebrow{margin-bottom:15px}
.hero-eyebrow::after{content:"";width:30px;height:1.5px;display:inline-block}
.hero-eyebrow::before,.hero-eyebrow::after{background:currentColor}
.mob-br{display:none}
.hero h1{font-size:clamp(30px,4.4vw,52px);font-weight:600;letter-spacing:-.02em;line-height:1.06;color:#353434;margin:0}
.hero-lead{margin:18px auto 0;max-width:1000px;color:#62717D;font-size:16px;line-height:1.58}
.hero-cta{display:flex;justify-content:flex-start;gap:14px;margin:24px auto 0;flex-wrap:wrap;position:relative;z-index:7;width:90%;max-width:1080px}
.hero-slot{position:relative;width:90%;max-width:1080px;margin:42px auto 0;aspect-ratio:1214/345;border-radius:6px}
.hero-frame{position:absolute;inset:0;border-radius:6px;overflow:hidden;
  box-shadow:0 44px 110px -48px rgba(60,45,35,.22)}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48.5% 62%;display:block}
/* zoomed-out final state: clip image to the Union shape */
.hero-frame.clip{clip-path:url(#heroUnionClip);-webkit-clip-path:url(#heroUnionClip);border-radius:0;box-shadow:none;filter:drop-shadow(0 38px 80px rgba(40,28,20,.22))}
/* Pocket-enabled range (>=821px) splits into two tiers because .hero-slot's
   frame width isn't constant: it's 90vw up to the 1080px cap, which only
   kicks in once the viewport reaches 1200px (0.9*1200=1080). Below that the
   frame is narrower while the CTA row stays the same fixed pixel width, so a
   single clip-path fraction can't stay snug at 1920px+ without overflowing
   the notch around 900-1100px. Tablet/iPad tier gets its own wider-fraction
   shape (heroUnionClipTablet); desktop tier keeps the snugger heroUnionClip. */
@media(min-width:768px) and (max-width:1199px){
  .hero:not(.scrub) .hero-frame,.hero.scrub .hero-frame.clip{clip-path:url(#heroUnionClipTablet);-webkit-clip-path:url(#heroUnionClipTablet);border-radius:0;box-shadow:none;filter:drop-shadow(0 38px 80px rgba(40,28,20,.22))}
}
@media(min-width:1200px){.hero:not(.scrub) .hero-frame{clip-path:url(#heroUnionClip);-webkit-clip-path:url(#heroUnionClip);border-radius:0;box-shadow:none;filter:drop-shadow(0 38px 80px rgba(40,28,20,.22))}}
/* desktop/tablet: CTAs nested into the bottom-left pocket of the clipped image (behind the frame, revealed through the cut-out) */
@media(min-width:768px){
  .hero-cta{margin-top:-70px;gap:12px}
  .hero-cta .btn{padding:13px 18px;font-size:13.5px;white-space:nowrap}
}
.hero.scrub .hero-cta{opacity:0}
.feature-row{display:flex;justify-content:center;flex-wrap:wrap;gap:22px 42px;margin-top:36px}
.hero-lead.lead-mob{display:none}
.hfeat{display:inline-flex;align-items:center;gap:11px;font-size:14.5px;font-weight:500;color:#2B2926}
.hf-ic{width:40px;height:40px;flex:none}
/* scrub mode (desktop + motion ok) */
.hero.scrub{height:300vh}
.hero.scrub .hero-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.hero.scrub .hero-final{height:100vh;box-sizing:border-box;padding:84px 24px 30px;display:flex;flex-direction:column;justify-content:flex-start;width:100%}
.hero.scrub .hero-slot{position:static;flex:1 1 0;min-height:0;max-height:440px;margin:24px auto 0;align-self:center;width:90%}
.hero.scrub .hero-frame{position:absolute;inset:auto;z-index:6;box-shadow:0 56px 140px -54px rgba(40,28,20,.26)}
.hero.scrub .hero-lead,.hero.scrub .feature-row{opacity:0;will-change:opacity,transform}
.hero.scrub .hero-lead.lead-mob{opacity:1}
.hero.scrub .hero-copy{position:relative;z-index:8}
@media(max-width:767px){
  /* Mobile hero: same pinned scroll-scrub as desktop (see hero JS), just
     with mobile-tuned keyframes — full-bleed image up top morphs into this
     .hero-slot's own box as the mask target, same as desktop's C stage.
     Bleed the video slot past .hero-final's own 20px side padding so it
     sits flush against the screen edges instead of a visible margin/gap. */
  .hero-final{padding:118px 20px 56px}
  .hero-eyebrow{gap:4px;margin-top:14px}
  .mob-br{display:inline}
  .feature-row{display:none}
  .hero-lead.lead-desk{display:none}
  .hero-lead.lead-mob{display:block}
  .hero-slot{width:calc(100% + 40px);max-width:none;margin:24px -20px 0;aspect-ratio:16/11;border-radius:0}
  .hero-frame{border-radius:0}
  /* .hero.scrub .hero-slot's flex:1 1 0;min-height:0 (set above, outside
     this query) lets the mask shrink to whatever's left over once the
     eyebrow/heading/lead copy and CTA row have taken their space — on
     shorter phones that leftover can collapse to a sliver (or literally
     0 on an iPhone SE-height screen). Give it a hard floor so the mask
     always reads as a real image band, and reclaim the room it needs from
     .hero.scrub .hero-final's own padding + the slot/CTA gaps (below),
     which were generous rather than load-bearing. */
  .hero.scrub .hero-final{padding:96px 20px 18px}
  .hero.scrub .hero-slot{min-height:210px;margin-top:16px}
  .hero.scrub .hero-cta{margin-top:16px}
}
@media(max-width:820px) and (max-height:760px){
  /* Short phones (iPhone SE/mini-height class, ~667-740px tall) don't have
     enough room for the full copy block + a 210px mask + CTA without the
     CTA getting pushed past the fold. Trim the lead paragraph and spacing
     a bit further and drop to a smaller (but still real, non-sliver) floor
     so the layout stays usable on these rather than clipping the CTA. */
  .hero-lead.lead-mob{font-size:14px;line-height:1.48}
  .hero.scrub .hero-final{padding:80px 20px 14px}
  .hero.scrub .hero-slot{min-height:130px;margin-top:12px}
  .hero.scrub .hero-cta{margin-top:12px}
}
@media(max-width:767px){
  /* dvh keeps the pin/track height matched to the *visible* viewport as
     Safari/Chrome mobile toolbars show/hide, instead of the taller 100vh
     box; falls back to the vh values above in browsers without dvh support. */
  .hero.scrub{height:300dvh}
  .hero.scrub .hero-pin{height:100dvh}
  .hero.scrub .hero-final{height:100dvh}
  /* Desktop's clip-path notch exists so the CTA row can nest into a cut-out
     corner (via a negative margin that only applies at 768px+). Mobile CTAs
     stack full-width below the image instead, so nothing sits in the notch
     — keep the settle animation but land on a plain rounded-corner mask
     instead of the notched Union shape. */
  .hero-frame.clip{clip-path:none;-webkit-clip-path:none;filter:none;box-shadow:0 44px 110px -48px rgba(60,45,35,.22)}
}
@media(max-width:680px){.hero-cta{flex-direction:column;align-items:center}.hero-cta .btn{width:min(320px,86vw);justify-content:center}}

/* ===== SECTION SHELL ===== */
.sec{padding:104px 0;position:relative}
.sec.cream{background:var(--cream)}
.sec.cream-2{background:var(--cream-2)}
.sec.dark{background:var(--dark);color:var(--on-dark)}
.sec.dark h2,.sec.dark h3,.sec.dark h4{color:var(--on-dark)}
.sec-head{max-width:780px}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head h2{font-size:clamp(30px,4.4vw,52px);margin-top:18px;font-weight:600}
.sec-head p{margin-top:18px;color:var(--ink-2);font-size:17.5px;max-width:62ch}
.sec.dark .sec-head p{color:var(--on-dark-2)}
.section-quote{margin-top:46px;padding-left:24px;border-left:4px solid var(--copper);color:var(--ink);font-size:20px;font-weight:600;line-height:1.5;max-width:70ch}

/* ===== ARTICLE DETAIL PAGES (The Upside Briefing™) ===== */
.art-crumb{display:inline-flex;align-items:center;gap:8px;font-family:"Roboto";font-size:14px;font-weight:500;
  color:var(--on-dark-2);text-decoration:none;transition:color .3s var(--ease)}
.art-crumb:hover{color:#fff}
.art-crumb svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.art-crumb:hover svg{transform:translateX(-3px)}

#arthero{position:relative;background:#171310 center center / cover no-repeat;
  padding:clamp(120px,17vh,172px) 0 clamp(96px,12vh,128px);overflow:hidden}
#arthero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,11,8,.72) 0%,rgba(15,11,8,.5) 45%,rgba(15,11,8,.86) 100%)}
#arthero .wrap{position:relative;z-index:1}
#arthero .eyebrow{margin-top:30px;color:#BE7B61}
#arthero .eyebrow::before{background:currentColor}
#arthero h1{font-family:"Archivo";font-size:clamp(28px,4.6vw,48px);font-weight:600;letter-spacing:-.02em;
  line-height:1.16;color:#fff;margin:18px auto 0;max-width:28ch}
#arthero .art-meta{margin-top:22px;display:flex;align-items:center;gap:12px;font-family:"Roboto";
  font-size:14px;color:var(--on-dark-2)}
#arthero .art-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--on-dark-2)}

.art-feature{margin-top:-56px;position:relative;z-index:2;max-width:920px;margin-left:auto;margin-right:auto;padding:0 32px}
.art-feature img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block;
  box-shadow:0 44px 84px -32px rgba(20,14,10,.45)}

.art-body-wrap{max-width:700px;margin:0 auto;padding:84px 32px 0}
.art-content p{margin-top:22px;color:var(--ink-2);font-size:17px;line-height:1.8}
.art-content p:first-of-type{margin-top:0}
.art-content h2{font-size:clamp(22px,2.6vw,30px);margin-top:54px;font-weight:600;letter-spacing:-.015em}
.art-content h3{font-size:19px;margin-top:38px;font-weight:600}
.art-content ul{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.art-content ul li{position:relative;padding-left:26px;color:var(--ink-2);font-size:16.5px;line-height:1.65}
.art-content ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--copper)}
.art-content ul li b{color:var(--ink);font-weight:600}
.art-content .section-quote{margin-top:46px;margin-bottom:10px}
.art-content strong,.art-content b{color:var(--ink);font-weight:600}

.art-cta{margin:80px auto 0;max-width:820px;padding:0 32px}
.art-cta-card{background:var(--dark);border-radius:10px;padding:clamp(38px,5.5vw,58px);text-align:center}
.art-cta-card .eyebrow{justify-content:center;color:#BE7B61}
.art-cta-card .eyebrow::before{background:currentColor}
.art-cta-card h3{color:#fff;font-size:clamp(22px,3vw,30px);margin-top:16px;font-weight:600}
.art-cta-card p{color:var(--on-dark-2);font-size:16px;margin-top:14px;max-width:50ch;margin-left:auto;margin-right:auto;line-height:1.65}
.art-cta-card .btn{margin-top:26px}

.art-foot-nav{max-width:700px;margin:70px auto 0;padding:34px 32px 100px;border-top:1px solid var(--line-2);
  display:flex;justify-content:center}
.art-foot-nav a{display:inline-flex;align-items:center;gap:8px;font-family:"Roboto";font-weight:500;font-size:15px;color:var(--ink)}
.art-foot-nav a:hover{color:var(--copper)}
@media(max-width:600px){
  .art-feature{margin-top:-32px}
  .art-body-wrap{padding-top:60px}
}

/* ===== BENTO (What you get) — exact from Figma SVG ===== */
#what-you-get{background:#F8F2EA;padding-bottom:160px}
.bento{display:grid;grid-template-columns:292fr 302fr 280fr 300fr;grid-auto-rows:262px;gap:19px;margin-top:46px}
.bcard{position:relative;overflow:hidden;border-radius:6px;padding:26px 26px 24px;display:flex;flex-direction:column;
  box-shadow:0 5px 14px rgba(74,52,38,.04),0 34px 80px -28px rgba(74,52,38,.12);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.bento .bcard{transition:opacity .9s var(--ease),transform .95s var(--ease-out),box-shadow .45s var(--ease)}
.bento .bcard:hover{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.bento .bcard.reveal{transform:translateY(56px)}
.bento .bcard.reveal.in{transform:none}
.bento .bcard.reveal:hover{transform:translateY(-7px)}
.bcard:hover{transform:translateY(-7px);box-shadow:0 12px 26px rgba(74,52,38,.05),0 56px 110px -34px rgba(74,52,38,.16)}
.bcard .lab{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#1a1a1a;position:relative;z-index:3}
.bcard p{position:relative;z-index:3;margin-top:auto;font-size:16px;line-height:1.5;color:#62717D;max-width:24ch;padding-top:24px}
/* placement + exact card colours */
.b-rev{grid-column:1;grid-row:1;background:linear-gradient(155deg,#FFFFFF 0%,#FCF8F3 62%,#F6EFE7 100%)}
.b-rev::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(72% 56% at 14% -2%, rgba(255,255,255,.6), transparent 56%)}
.b-vac{grid-column:1;grid-row:2;background:linear-gradient(152deg,#C9855F 0%,#B96F53 52%,#A75D41 100%)}
.b-vac .lab{color:#F4ECE2}
.b-vac p{color:#F4ECE2}
.b-vac::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(78% 60% at 18% -8%, rgba(255,255,255,.20), transparent 56%)}
.b-vac::after{content:"";position:absolute;top:-20%;left:-65%;width:45%;height:140%;z-index:1;pointer-events:none;transform:skewX(-16deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent)}
.b-vac.in::after{animation:sheen 7s ease-in-out infinite 1.5s}
.b-risk{grid-column:2;grid-row:1 / span 2;background:linear-gradient(158deg,#F1F0EF 0%,#EBE7E4 58%,#EFE0D7 100%)}
.b-cost{grid-column:3;grid-row:1;background:linear-gradient(152deg,#C9855F 0%,#B96F53 52%,#A75D41 100%)}
.b-cost::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(78% 60% at 18% -8%, rgba(255,255,255,.20), transparent 56%)}
.b-cost::after{content:"";position:absolute;top:-20%;left:-65%;width:45%;height:140%;z-index:1;pointer-events:none;transform:skewX(-16deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent)}
.b-cost.in::after{animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%{left:-65%}22%{left:165%}100%{left:165%}}
.b-tenant{grid-column:4;grid-row:1;background:linear-gradient(140deg,#EFEFF0 0%,#EDE9E6 52%,#EAD9CF 100%)}
.b-report{grid-column:3 / span 2;grid-row:2;background:linear-gradient(133deg,#2F3031 64%,#946756 102%);padding:26px}
.b-cost .lab{color:#F4ECE2}
.b-cost p{color:#F4ECE2;margin-top:10px!important;padding-top:0}
.b-report .lab{color:#EFEFF0}
.b-report p{color:#868485;max-width:40%}
/* baked copper glows (from SVG ellipses) */
.b-tenant::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(85% 95% at 96% 96%, rgba(214,125,88,.30) 0%, rgba(214,125,88,.12) 34%, rgba(214,125,88,.03) 60%, rgba(214,125,88,0) 82%)}
.b-tenant.in::before{animation:riskbreath 8s ease-in-out infinite}
.b-tenant::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(66% 50% at 14% 0%, rgba(255,255,255,.55), transparent 54%)}
.b-risk::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(64% 50% at 52% 44%, rgba(214,125,88,.26) 0%, rgba(214,125,88,.08) 42%, rgba(214,125,88,0) 76%)}
.b-risk.in::before{animation:riskbreath 6.5s ease-in-out infinite}
@keyframes riskbreath{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.b-risk::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(64% 48% at 16% -2%, rgba(255,255,255,.5), transparent 54%)}
/* revenue graph (exact SVG paths) */
.rev-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#revLine{filter:drop-shadow(0 0 5px rgba(222,131,91,.55))}
.b-rev.in #revLine{animation:revglow 3.6s ease-in-out infinite}
@keyframes revglow{0%,100%{filter:drop-shadow(0 1px 4px rgba(222,131,91,.4))}50%{filter:drop-shadow(0 0 11px rgba(222,131,91,.9))}}
.b-risk.in #riskArrow{animation:riskglow 3.6s ease-in-out infinite}
@keyframes riskglow{0%,100%{filter:drop-shadow(0 0 2px rgba(201,130,94,.22))}50%{filter:drop-shadow(0 0 9px rgba(201,130,94,.5))}}
/* risk arrow + 25 */
.risk-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.risk-25{position:relative;z-index:3;font-family:"Archivo";font-size:clamp(38px,4vw,52px);font-weight:600;letter-spacing:-.03em;color:#9c9892;display:flex;align-items:center;gap:2px;line-height:1;margin-top:auto}
.risk-25 .ar{font-size:.62em;color:#aaa49d;font-weight:500}
/* clear reporting bars + animated corner glow */
.b-report::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(157deg, rgba(255,255,255,.08) 0%, transparent 40%)}
.b-report::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(40% 56% at 97% 104%, rgba(170,100,68,.5) 0%, transparent 60%);opacity:.4;animation:glowpulse 7s ease-in-out infinite}
@keyframes glowpulse{0%,100%{opacity:.3}50%{opacity:.7}}
.clear-bars{position:absolute;left:49.5%;right:7.5%;bottom:0;top:24px;display:flex;align-items:flex-end;justify-content:space-between;z-index:2;pointer-events:none}
.clear-bars .cbar{width:14%;height:0;background:linear-gradient(180deg,#D9D9D9 0%,#737373 100%);opacity:.11;transition:height .7s cubic-bezier(.16,1,.3,1)}

/* subtle vacancy-leakage line (b-vac) */
.vac-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.vac-area{opacity:0;transition:opacity 1s ease .3s}
.b-vac.in .vac-area{opacity:.6}
.vac-line{stroke-dasharray:1;stroke-dashoffset:1;opacity:.7}
.b-vac.in .vac-line{animation:vacDraw 1.4s cubic-bezier(.16,1,.3,1) .1s forwards}
@keyframes vacDraw{to{stroke-dashoffset:0}}

/* subtle settings-gear + check for cost control (b-cost) */
.cost-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.cost-gear{opacity:0;transform-origin:50px 240px;transition:opacity .8s ease}
.b-cost.in .cost-gear{opacity:1;animation:costSpin 22s linear infinite}
@keyframes costSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* row of tenant/person icons, fading from high to low opacity (b-tenant) */
.tenant-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.b-tenant p{margin-top:10px!important;padding-top:0}
.tenant-person{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s var(--ease)}
.b-tenant.in .tp1{opacity:1;transform:translateY(0);transition-delay:.05s}
.b-tenant.in .tp2{opacity:1;transform:translateY(0);transition-delay:.16s}
.b-tenant.in .tp3{opacity:1;transform:translateY(0);transition-delay:.27s}
.b-tenant.in .tp4{opacity:1;transform:translateY(0);transition-delay:.38s}
.b-tenant.in .tp5{opacity:1;transform:translateY(0);transition-delay:.49s}
.b-tenant.in .tp6{opacity:1;transform:translateY(0);transition-delay:.6s}

/* ===== full-width image block ===== */
.img-band{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:21/7;margin-bottom:48px}
#why .img-band{margin-bottom:0}
.img-band img{width:100%;height:100%;object-fit:cover}

/* ===== DRIFT grid ===== */
.drift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 40px;margin-top:54px}
.drift{position:relative;padding-top:6px}
.drift .top{display:flex;justify-content:space-between;align-items:flex-start}
.drift .ic{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1)}
.drift .ic svg{width:24px;height:24px}
.drift .no{font-family:"Archivo";font-size:15px;color:var(--ink-3);font-weight:500}
.drift h3{font-size:19px;margin-top:18px;font-weight:600}
.drift p{margin-top:8px;color:var(--ink-2);font-size:14.5px;max-width:26ch}
.drift .rule{margin-top:18px;height:1.5px;width:0;background:var(--copper);transition:width .6s var(--ease)}
.drift.in .rule{width:64px}
.drift:hover .rule{width:100%}
.ic-dark{background:#2c2c2e;color:#fff}
.ic-copper{background:var(--copper);color:#fff}
.ic-soft{background:var(--copper-tint);color:var(--copper-deep)}
/* S3 icon pulse + hover */
.drift .ic{position:relative;transition:transform .42s var(--ease),box-shadow .42s var(--ease)}
.drift .ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--copper);opacity:0;animation:driftPulse 2.6s ease-out infinite;pointer-events:none}
@keyframes driftPulse{0%{transform:scale(1);opacity:.45}70%{opacity:0}100%{transform:scale(1.65);opacity:0}}
.drift:nth-child(2) .ic::after{animation-delay:.4s}
.drift:nth-child(3) .ic::after{animation-delay:.8s}
.drift:nth-child(4) .ic::after{animation-delay:1.25s}
.drift:nth-child(5) .ic::after{animation-delay:.6s}
.drift:nth-child(6) .ic::after{animation-delay:1s}
.drift .ic svg{transition:transform .42s var(--ease)}
.drift:hover .ic{transform:translateY(-4px) scale(1.1);box-shadow:0 22px 50px -20px rgba(60,42,30,.22)}
.drift:hover .ic svg{transform:scale(1.08)}
#why .s3-band{aspect-ratio:1233/494;box-shadow:none;border-radius:0;background:transparent}
#why .s3-band img{object-fit:contain}
/* pull the whole content block up so it begins in the image's bottom-left clip pocket */
#why .sec-head{position:relative;z-index:2;margin-top:clamp(-64px,-4.4%,-28px)}
@media(max-width:820px){#why .sec-head{margin-top:14px}}
@media(max-width:600px){#why .sec-head{margin-top:-28px}}
/* more space between heading/copy and the icon set, and before the closing line */
#why .drift-grid{margin-top:84px;row-gap:40px}
#why .section-quote{margin-top:72px}
#why{position:relative;overflow:hidden;background:var(--bg);z-index:1;margin-top:-50px;border-radius:8px 8px 0 0;box-shadow:0 -40px 100px -34px rgba(40,28,20,.10)}
#why::before{content:"";position:absolute;inset:-12%;z-index:0;pointer-events:none;filter:blur(85px);opacity:1;
  background:radial-gradient(32% 42% at 20% 28%,rgba(199,128,68,.36),transparent 70%),radial-gradient(34% 44% at 82% 64%,rgba(166,102,58,.30),transparent 72%),radial-gradient(30% 38% at 56% 90%,rgba(199,128,68,.24),transparent 72%);
  animation:whyMesh 20s ease-in-out infinite}
#why .wrap{position:relative;z-index:1}
@keyframes whyMesh{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(3%,-2%) scale(1.06)}66%{transform:translate(-2%,2%) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.drift .ic::after{animation:none;opacity:0}#why::before{animation:none}}

/* ===== COMPARISON ===== */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
#what-we-do .sec-head h2{margin-top:30px;margin-bottom:6px}
#what-we-do .compare{margin-top:60px;grid-template-columns:0.9fr 1.1fr}
/* section 4 rises up and overlaps section 3 (stack reveal) */
#what-we-do{background:#FCFAF7;position:relative;z-index:2;margin-top:-50px;border-radius:8px 8px 0 0;box-shadow:0 -40px 100px -34px rgba(40,28,20,.10);transform:translateY(60px);opacity:0;transition:transform 1.05s cubic-bezier(.2,.8,.2,1),opacity .9s ease}
#what-we-do.in{transform:translateY(0);opacity:1}
@media(prefers-reduced-motion:reduce){#what-we-do{transform:none;opacity:1;transition:none}}
.cpanel{border-radius:6px;padding:38px 40px;border:1px solid var(--line);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.cpanel.light{background:var(--paper);box-shadow:0 2px 6px rgba(60,45,35,.05),0 18px 40px -24px rgba(60,45,35,.22)}
.cpanel.dark{background:linear-gradient(160deg,#2a2b2d,#1d1e20);border-color:transparent;box-shadow:0 26px 60px -28px rgba(0,0,0,.6);color:#fff;position:relative;overflow:hidden}
.cpanel.dark::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;filter:blur(60px);opacity:.55;background:radial-gradient(42% 52% at 82% 10%,rgba(226,134,92,.22),transparent 70%),radial-gradient(48% 56% at 10% 94%,rgba(150,90,64,.18),transparent 72%)}
.cpanel.dark>*{position:relative;z-index:1}
.cpanel.light:hover{transform:translateY(-6px);box-shadow:0 6px 14px rgba(60,45,35,.08),0 32px 58px -26px rgba(60,45,35,.34)}
.cpanel.dark:hover{transform:translateY(-6px);box-shadow:0 36px 72px -26px rgba(0,0,0,.7)}
#what-we-do .compare{gap:0;border-radius:6px;transition:transform .45s var(--ease),box-shadow .45s var(--ease);box-shadow:0 60px 175px -40px rgba(40,28,20,.20)}
#what-we-do .cpanel{box-shadow:none}
#what-we-do .cpanel.light{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}
#what-we-do .cpanel.dark{border-top-left-radius:0;border-bottom-left-radius:0}
#what-we-do .cpanel.light:hover,#what-we-do .cpanel.dark:hover{transform:none;box-shadow:none}
@media(max-width:900px){
  /* Mobile/portrait: stack the two panels to a single column (white on
     top, black below) at a wider cutoff than the generic .compare mobile
     rule (680px) so this also catches portrait tablets and larger phones,
     not just narrow phones. Scoped to #what-we-do only — .compare isn't
     reused elsewhere on this page, so this doesn't affect anything else. */
  #what-we-do .compare{grid-template-columns:1fr}
  /* The desktop corner-squaring above is set up for a left/right seam, not
     a top/bottom one. Flip which corners/borders are squared so the two
     panels join cleanly along their shared horizontal edge instead. */
  #what-we-do .cpanel.light{
    border-right:1px solid var(--line);border-bottom:0;
    border-top-right-radius:6px;border-bottom-right-radius:0;border-bottom-left-radius:0;
  }
  #what-we-do .cpanel.dark{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:6px}
}
#what-we-do .compare:hover{transform:translateY(-6px);box-shadow:0 76px 210px -42px rgba(40,28,20,.24)}
#what-you-get .bcard{box-shadow:0 6px 16px rgba(74,52,38,.06),0 40px 90px -26px rgba(74,52,38,.18)}
#what-you-get .bcard:hover{box-shadow:0 14px 30px rgba(74,52,38,.08),0 64px 120px -30px rgba(74,52,38,.24)}
.cpanel .ctitle{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--ink-3);padding-bottom:0;border-bottom:none;margin-bottom:26px}
.cpanel.dark .ctitle{color:#E7885C;border-color:var(--line-dark)}
.crow{display:flex;align-items:flex-start;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.cpanel.dark .crow{border-color:var(--line-dark)}
.crow:last-of-type{border-bottom:none}
.crow .mk{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;margin-top:5px;transition:transform .4s var(--ease)}
.crow .mk svg{width:12px;height:12px}
.crow:hover .mk{transform:scale(1.12)}
.mk.x{background:none;color:#9a948c}
.mk.ok{background:#E2865C;color:#fff}
.cpanel.dark .crow .mk svg{width:9px;height:9px}
.crow .ct{flex:1}
.crow .ct b{font-size:15.5px;font-weight:600;display:block}
.cpanel.light .ct b{font-weight:400;font-size:18px}
.cpanel.light .ct span{font-size:13px}
.cpanel.dark .ct b{color:#fff;font-weight:400;font-size:18px}
.crow .ct span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cpanel.dark .ct span{color:rgba(244,239,233,.45);font-size:13px}
.crow .tag{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:2px;background:linear-gradient(105deg,#E2865C 0%,#934C3A 92%);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:96px;flex:none;box-shadow:0 0 14px rgba(226,134,92,.55),0 6px 14px -6px rgba(201,130,94,.6)}
.crow .tag svg{width:11px;height:11px}
.cpanel.dark .crow .tag{margin-left:40px}
.cfoot{margin-top:32px;font-size:18px;font-weight:600;padding-left:20px;border-left:4px solid var(--copper);color:var(--ink)}
.cpanel.dark .cfoot{color:var(--on-dark);border-left-color:#E2865C}

/* ===== LINE CHART ===== */
.chart-wrap{margin:0 auto;position:relative;max-width:none;width:100%}
/* widen the graph so it covers the sides and fills the space */
#model .chart-wrap{width:min(1300px,calc(100vw - 24px));margin-left:50%;transform:translateX(-50%)}
/* very subtle grid lines behind the graph, inset so they don't crowd the copy */
#model .chart-wrap::before{
  content:"";position:absolute;left:0;right:0;top:56px;bottom:8px;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(43,41,38,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(43,41,38,.028) 1px,transparent 1px);
  background-size:42px 42px;
}
@media(max-width:820px){
  /* Mobile: keep the same "break out of .wrap's side padding" trick desktop
     uses (rather than reverting to the padded 100% width, which was
     shrinking the chart) so the graph stays big enough to actually read.
     #perfGraph is width:100%;height:auto tied to its viewBox aspect ratio,
     so a wider box also renders taller — no distortion. */
  #model .chart-wrap{width:calc(100vw - 16px);margin-left:50%;transform:translateX(-50%);
    padding-bottom:72vw; /* reserves the extra height #perfGraph's scaleY below adds, so it doesn't overlap the text after it */
  }
  /* Stretch the chart taller (not just wider) so it's easier to read — SVG's
     default viewBox scaling only preserves proportions, it won't grow the
     drawn chart vertically on its own, so scaleY it directly. Growing down
     from the top keeps it aligned with the heading above. */
  #perfGraph{transform:scaleY(2.15);transform-origin:top center}
}
#model{padding-bottom:4px}
#perfGraph{width:100%;height:auto;display:block;overflow:visible;position:relative;z-index:1}
/* node pop-in */
#perfGraph .gnode{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .4s ease}
#perfGraph .gnode.in{transform:scale(1);opacity:1}
/* label fade-in */
#perfGraph .glabel{opacity:0;transition:opacity .5s ease}
#perfGraph .glabel.in{opacity:1}
/* area fade-in */
#perfGraph #garea{opacity:0;transition:opacity 1s ease}
#perfGraph #garea.in{opacity:.5}
/* pulse rings */
#perfGraph .gring{fill:none;stroke:#b96f53;stroke-width:1.1;transform-box:fill-box;transform-origin:center;opacity:0}
#perfGraph .gring.in{animation:gring 2.8s ease-out infinite}
@keyframes gring{0%{transform:scale(1);opacity:.5}70%{opacity:0}100%{transform:scale(2.5);opacity:0}}
@media(max-width:820px){
  /* #perfGraph's scaleY(2.15) above stretches every descendant, including
     the round icon badges and the text label pills — counter-scale just
     those back to 1:1 so they stay proportional while the line/area/grid
     stay stretched. 1/2.15 ≈ .4651. These rules must come after the base
     .gnode/.glabel rules above (same selector specificity — later in the
     file wins), otherwise the base rule's `transform` silently wins back. */
  /* Counter-scale factor (.4651) only needs to cancel the parent's 2.15
     Y-stretch, so whatever uniform scale() is combined with it (the
     enlarge factor) comes out undistorted regardless. */
  #perfGraph .gnode{transform:scale(0) scaleY(.4651)}
  #perfGraph .gnode.in{transform:scale(1.8) scaleY(.4651)}
  /* Labels were still hard to read at 1.55x — the SVG's own viewBox units
     shrink a lot on a narrow phone screen, so the 7.2px source font ends up
     rendering only a few px tall even after the earlier bump. Scale further
     so the label text is actually legible; rect+text scale together via the
     shared <g>, so the pill still wraps the text correctly at any factor.
     The two edge labels (leftmost/rightmost along the diagonal line) sit
     close enough to the chart's left/right bounds that scaling from their
     center would push them past the edge and get clipped — so those two
     scale from their outer edge inward instead, growing only toward the
     open space in the middle of the chart. */
  #perfGraph .glabel{transform-box:fill-box;transform-origin:center;transform:scale(2) scaleY(.4651)}
  #perfGraph .glabel.glabel-l{transform-origin:left center}
  #perfGraph .glabel.glabel-r{transform-origin:right center}
  /* Each label was drawn ~23 units below its matching icon's centre (a
     desktop-only diagonal-annotation style). Shifting that on the outer
     .glabel group itself (combined with its scale, around a fill-box
     origin computed from the UNSHIFTED geometry) warps the scale — the
     origin and the shifted content no longer agree, so the pill visibly
     both moves AND shrinks. Shifting the inner wrapper instead moves the
     rect+text before the outer group's fill-box/scale math ever runs, so
     .glabel's origin is computed from the already-centred geometry and the
     scale stays undistorted. */
  #perfGraph .glabel-inner{transform:translateY(-23)}
  /* The pulsing rings animate their own scale(1)->scale(2.5) via keyframes,
     so a static transform override can't fix them — swap in a mobile-only
     copy of the animation with the same .4651 counter-scale baked into
     every keyframe, so the ring stays a circle at every point in the pulse. */
  #perfGraph .gring.in{animation-name:gringMobile}
}
@keyframes gringMobile{
  0%{transform:scale(1) scaleY(.4651);opacity:.5}
  70%{opacity:0}
  100%{transform:scale(2.5) scaleY(.4651);opacity:0}
}
/* reduced-motion must win over the mobile block above regardless of order,
   so it's placed last: freezes the pop-in animations in their end state. */
@media(prefers-reduced-motion:reduce){#perfGraph .gring{animation:none!important;opacity:0}#perfGraph .gnode{transition:none;transform:none;opacity:1}#perfGraph .glabel,#perfGraph #garea{transition:none}}

/* ===== FRAMEWORK pillars ===== */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px;align-items:start}
.pillar{background:linear-gradient(160deg,#2c2d2f,#222325);border:1px solid var(--line-dark);border-radius:var(--r);padding:26px;min-height:200px;
  position:relative;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.pillar:hover{transform:translateY(-5px);box-shadow:var(--sh-dark);border-color:rgba(185,111,83,.4)}
.pillar .pic{width:44px;height:44px;border-radius:6px;background:rgba(185,111,83,.16);color:var(--copper-soft);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.pillar .pic svg{width:22px;height:22px}
.pillar h3{font-size:19px;color:#fff;font-weight:600}
.pillar .ptags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.pillar .ptags span{font-size:11.5px;padding:6px 11px;border-radius:6px;background:rgba(244,239,233,.07);color:rgba(244,239,233,.78);border:1px solid var(--line-dark)}

/* ===== RESPONSE STANDARD ===== */
.rs-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
#response{position:relative;overflow:hidden}
#response::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;filter:blur(80px);opacity:1;
  background:radial-gradient(32% 44% at 18% 26%,rgba(199,128,68,.22),transparent 70%),radial-gradient(36% 46% at 84% 72%,rgba(166,102,58,.18),transparent 72%),radial-gradient(30% 38% at 60% 50%,rgba(199,128,68,.10),transparent 72%)}
#response .wrap{position:relative;z-index:1}
.rs-card{border-radius:6px;padding:28px;min-height:240px;display:flex;flex-direction:column;border:1px solid var(--line-2);box-shadow:var(--sh-1);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.rs-card.light:hover{transform:translateY(-6px);box-shadow:0 32px 70px -30px rgba(60,45,35,.14)}
.rs-card.dark:hover{transform:translateY(-6px);box-shadow:0 40px 90px -32px rgba(0,0,0,.24)}
.rs-card.light{background:#FFFEF8}
.rs-card.dark{background:#333333;color:#fff;border-color:#333;align-items:center;justify-content:center;text-align:center}
.rs-ringwrap{position:relative;width:196px;height:196px}
.rs-ringwrap::before{content:"";position:absolute;inset:-16%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(226,134,92,.26),transparent 62%);filter:blur(20px);opacity:0;transition:opacity 1s ease .6s}
.rs-card.dark.in .rs-ringwrap::before{opacity:1;animation:rsGlow 3.6s ease-in-out 1.2s infinite}
@keyframes rsGlow{0%,100%{opacity:.3}50%{opacity:.55}}
.rs-ring{width:100%;height:100%;transform:rotate(-90deg);position:relative;z-index:1}
.rs-ring .rs-track{fill:none;stroke:rgba(255,255,255,.14);stroke-width:7}
.rs-ring .rs-prog{fill:none;stroke:url(#rsGrad);stroke-width:7;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;filter:drop-shadow(0 0 4px rgba(150,90,64,.6));transition:stroke-dashoffset 2.4s cubic-bezier(.45,0,.15,1)}
.rs-card.dark.in .rs-ring .rs-prog{stroke-dashoffset:98}
.rs-ring-label{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"Archivo";font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1}
.rs-ring-label .rs-num{font-size:52px;font-family:"Archivo"}
.rs-ring-label .rs-unit{font-size:15px;font-weight:500;opacity:.78;margin-top:0;text-align:center;font-family:"Archivo";letter-spacing:.06em;text-indent:.06em}
.rs-ic{width:46px;height:46px;border-radius:50%;background:var(--copper-tint);color:var(--copper-deep);display:flex;align-items:center;justify-content:center;margin-bottom:40px}
.rs-ic svg{width:22px;height:22px}
.rs-card h3{font-family:"Archivo";font-weight:600;font-size:18px;color:#2B2926;margin:0 0 9px;letter-spacing:-.01em}
.rs-card p{color:var(--ink-2);font-size:14.5px;line-height:1.6;margin:0}
.rs-foot{margin-top:30px;color:var(--ink-2);font-size:18px;max-width:60ch}
@media(max-width:900px){.rs-cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rs-cards{grid-template-columns:1fr}}

/* ===== SERVICE SPLIT — stacking cards ===== */
.svc-stack{margin-top:48px;display:flex;flex-direction:column;gap:30px}
.sc{position:sticky;border-radius:6px;overflow:hidden;display:grid;grid-template-columns:1.05fr 1fr;min-height:560px;
  border:1px solid rgba(43,41,38,.07);box-shadow:0 60px 130px -48px rgba(74,52,38,.20);
  transform-origin:50% 100%;will-change:transform,opacity}
@supports (animation-timeline:view()){
  @keyframes scStand{from{transform:perspective(1300px) rotateX(26deg) translateY(50px) scale(.92);opacity:.3}to{transform:perspective(1300px) rotateX(0deg) translateY(0) scale(1);opacity:1}}
  .sc{animation:scStand linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
}
@media(prefers-reduced-motion:reduce){.sc{animation:none!important;transform:none!important;opacity:1!important}}
.sc-1{top:94px;background:linear-gradient(135deg,#FBF4EC 0%,#F2E4D8 100%)}
.sc-2{top:116px;background:linear-gradient(150deg,#2A2B2D 0%,#1D1E20 100%);border:0}
.sc-3{top:138px;background:linear-gradient(145deg,#C9855F 0%,#A75D41 100%);border:0}
.sc-4{top:160px;background:linear-gradient(135deg,#FBF4EC 0%,#F2E4D8 100%)}
.sc-text{padding:60px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
.sc-no{font-family:"Archivo";font-weight:500;font-size:14.5px;letter-spacing:.06em;color:#B96F53;margin-bottom:22px;text-transform:uppercase}
.sc-text h3{font-family:"Archivo";font-weight:500;font-size:clamp(27px,2.9vw,39px);letter-spacing:-.02em;line-height:1.1;color:#2B2926}
.sc-text p{margin-top:18px;font-size:17px;line-height:1.6;color:#62717D;max-width:44ch}
.sc-link{margin-top:28px;display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:#B96F53;width:fit-content}
.sc-link .arw{transition:transform .4s var(--ease);display:inline-block}
.sc:hover .sc-link .arw{transform:translate(3px,-3px)}
.sc-img{position:relative;overflow:hidden}
.sc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.sc:hover .sc-img img{transform:scale(1.06)}
.sc-3 .sc-img img{transform:scale(1.28)}
.sc-3:hover .sc-img img{transform:scale(1.34)}
.sc-2 .sc-no{color:#D6916E}.sc-2 .sc-text h3{color:#fff}.sc-2 .sc-text p{color:rgba(244,239,233,.72)}.sc-2 .sc-link{color:#D6916E}
.sc-3 .sc-no{color:rgba(255,255,255,.92)}.sc-3 .sc-text h3{color:#fff}.sc-3 .sc-text p{color:rgba(255,252,249,.9)}.sc-3 .sc-link{color:#fff}
@media(max-width:820px){
  .sc{grid-template-columns:1fr;min-height:0}
  .sc-img{order:0!important;min-height:230px}
  .sc-2 .sc-img,.sc-4 .sc-img{order:-1!important}
  .sc-text{padding:34px}
  .sc-1,.sc-2,.sc-3,.sc-4{top:84px}
}

/* ===== CASE STUDY ===== */
.case-tabs{display:flex;gap:4px;margin-top:52px;background:var(--cream);border-radius:0;padding:5px;width:auto;max-width:100%}
.case-tabs button{position:relative;flex:1;border:none;background:transparent;cursor:pointer;font-family:"Roboto";font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-align:center;
  color:var(--ink-2);padding:11px 20px;border-radius:0;white-space:nowrap;transition:.4s var(--ease)}
.case-tabs button:not(:last-child)::after{content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);width:1px;height:16px;background:rgba(43,41,38,.18)}
.case-tabs button.active{background:var(--dark);color:#fff}
.case-panel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:22px;border-radius:6px;overflow:hidden;box-shadow:var(--sh-2);background:var(--paper);border:1px solid var(--line);min-height:580px}
/* Mobile: stack the before/after case study into one column so it isn't crushed */
@media(max-width:680px){.case-panel{grid-template-columns:1fr;min-height:0}.case-img img{min-height:220px}.case-mid,.case-after{padding:24px}}
.case-img{overflow:hidden}
.case-img img{width:100%;height:100%;object-fit:cover;min-height:340px}
.case-mid{padding:32px}
.case-mid .tg{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);font-weight:600}
.case-mid h3{font-size:20px;margin-top:10px;font-weight:600}
.case-mid p{margin-top:12px;color:var(--ink-2);font-size:14.5px}
.case-mid ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:12px}
.case-mid li{display:flex;gap:10px;font-size:14px;color:var(--ink)}
.case-mid li .dash{flex:none;width:18px;height:3px;background:#7f8080;border-radius:2px;margin-top:8px;font-size:0;line-height:0}
.case-after{background:linear-gradient(135deg,#2d2f31 0%,#313335 55%,#3b3733 78%,#6e4b3d 93%,#a9654d 100%);color:#fff;padding:32px;display:flex;flex-direction:column}
.case-after .tg{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#bb6e57;font-weight:500}
.case-after h3{font-size:20px;color:#f8f2ea;margin-top:10px;font-weight:600}
.case-metrics{display:flex;gap:10px;margin:20px 0 8px}
.cmetric{flex:1;background:#37393a;border-radius:4px;padding:13px 14px 15px;display:flex;flex-direction:column;gap:9px}
.cmetric span{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#7f8080;font-weight:400}
.cmetric b{font-family:"Archivo";font-size:22px;font-weight:600;color:#bb6e57;display:block;letter-spacing:-.01em}
.cmetric b.up{color:#bb6e57}
.case-quote{padding-top:23px;display:flex;gap:20px;align-items:stretch}
.case-quote .cq-profile{flex:none;width:84px;display:flex;justify-content:center;align-items:flex-start;padding-top:4px}
.case-quote .cq-pic{width:64px;height:64px;border-radius:50%;object-fit:cover}
.case-quote .cq-body{border-left:2px solid #bb6e57;padding-left:22px;display:flex;flex-direction:column}
.case-quote .cq-body::before{content:'\201C';font-family:"Archivo";font-size:96px;line-height:.7;color:transparent;-webkit-text-stroke:2px #bb6e57;text-stroke:2px #bb6e57}
.case-quote p{font-size:15.5px;color:#bfbebe;font-style:italic;line-height:1.6;font-weight:400;margin:2px 0 0}
.case-quote cite{margin-top:16px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7f8080;font-style:normal;font-weight:400;line-height:1.45}

/* ===== FOOTER ===== */
footer{background:var(--dark-2);color:rgba(244,239,233,.66);padding:72px 0 32px}
.foot-top{display:grid;grid-template-columns:1.3fr 1fr 1.15fr 1fr .9fr 1.05fr;gap:28px;padding-bottom:48px;border-bottom:1px solid var(--line-dark)}
.foot-brand img{height:28px;width:auto;margin-bottom:20px}
.foot-brand p{font-size:14px;max-width:32ch;line-height:1.7}
.foot-col h5{color:var(--on-dark);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px;font-weight:600}
.foot-col a{display:block;font-size:14px;padding:6px 0;color:rgba(244,239,233,.66);transition:.3s var(--ease)}
.foot-col a:hover{color:var(--copper-soft);padding-left:5px}
.foot-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:26px;font-size:12px;color:rgba(244,239,233,.45)}
.foot-bottom .disc{max-width:64ch;line-height:1.6}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.r1{transition-delay:.06s}.r2{transition-delay:.12s}.r3{transition-delay:.18s}.r4{transition-delay:.24s}.r5{transition-delay:.3s}.r6{transition-delay:.36s}

/* ===== RESPONSIVE ===== */
@media(max-width:1000px){
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .b-rev{grid-column:1;grid-row:1}.b-vac{grid-column:2;grid-row:1}
  .b-risk{grid-column:1;grid-row:2;min-height:300px}.b-cost{grid-column:2;grid-row:2}
  .b-tenant{grid-column:1;grid-row:3}.b-report{grid-column:1 / span 2;grid-row:4}
  .drift-grid{grid-template-columns:1fr 1fr}
  .pillars{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr 1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
/* Case study cards (image / before-panel / after-panel) go from a single
   stacked column straight to 3 side-by-side columns at the same 1000px
   cutoff used above. Those 3 columns hold a lot: a portrait photo, a full
   bullet list, and metric tiles + a quote — at 1001-1150px (e.g. a 1024px
   iPad-landscape/small-laptop window) that squeezes each column to roughly
   300px, well below what the metric tiles and quote block need. Desktop
   (1151px+, comfortably inside the design's own 1200px max-width) keeps the
   original 3-column layout unchanged; only this in-between range now gets
   the same roomier stacked layout tablets already use. */
@media(max-width:1150px){
  .case-panel{grid-template-columns:1fr}
}
/* The bento grid's row height is a fixed 262px, sized for the 4-column
   desktop layout at its ~1136px design width. Below 1000px the grid already
   reflows to 2 columns with grid-template-rows:auto (auto-sizing overrides
   this), but 1001-1150px keeps the 4-column layout at a visibly narrower
   width — same 262px-tall rows over much narrower cards reads as cramped/
   squat rather than intentional. Only this in-between band is affected;
   1151px+ (and the true desktop 1280/1440/1920 widths) keep the original
   262px unchanged. */
@media(max-width:1150px) and (min-width:1001px){
  .bento{grid-auto-rows:225px}
}
@media(max-width:680px){
  .wrap{padding:0 20px}
  .sec{padding:68px 0}
  .hero{padding:120px 0 50px}
  .compare,.bento{gap:14px}
  .compare{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .b-rev,.b-vac,.b-risk,.b-cost,.b-tenant,.b-report{grid-column:1;grid-row:auto}
  .bcard{min-height:260px}
  .b-risk{min-height:240px}.b-report p{max-width:55%}
  .drift-grid{grid-template-columns:1fr}
  #why .drift-grid{row-gap:14px}
  .drift p{max-width:none}
  .drift p br{display:none}
  .foot-top{grid-template-columns:1fr}
  .img-band{aspect-ratio:16/10}
}
@media(max-width:680px){
  .case-panel{min-height:auto}
  .case-img img{min-height:220px}
  .case-mid,.case-after{padding:22px;min-width:0}
  .case-mid h3,.case-mid p,.case-mid li,.case-after h3{overflow-wrap:break-word;word-break:break-word}
  .case-metrics{flex-wrap:wrap;gap:8px}
  .cmetric{flex:1 1 calc(50% - 8px);min-width:0}
  .cmetric span,.cmetric b{overflow-wrap:break-word;word-break:break-word}
  .cmetric b{font-size:18px}
  .case-quote{flex-direction:column;gap:12px}
  .case-quote .cq-profile{padding-top:0}
  .case-quote .cq-body{border-left:none;border-top:2px solid #bb6e57;padding-left:0;padding-top:14px;min-width:0}
  .case-quote .cq-body p{overflow-wrap:break-word;word-break:break-word}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}