/* =========================================================
   Dantone Creative  |  site styles
   Brand idea: a dark studio lit by a blue gel on one side
   and an orange gel on the other, like the logo.
   ========================================================= */

:root{
  color-scheme: dark;

  /* ground */
  --bg:#0a0a0b;
  --bg-2:#111113;
  --bg-3:#19191c;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.22);

  /* text */
  --text:#f4f0ea;
  --text-2:#c4beb5;
  --muted:#8d877f;

  /* brand (from the logo) */
  --blue:#0d6aa6;
  --blue-deep:#06304d;
  --blue-hi:#62b8f0;
  --orange:#ff5a14;
  --orange-hi:#ff7a3d;
  --ember:#c8350c;

  --grad-text:linear-gradient(100deg,#62b8f0 0%,#2a8fd0 22%,#f4f0ea 48%,#ff8a4a 68%,#ff4d0a 100%);
  --grad-band:linear-gradient(100deg,#06304d 0%,#0d6aa6 22%,#0a0a0b 50%,#c8350c 78%,#ff5a14 100%);
  --glow:
    radial-gradient(55% 70% at 0% 25%, rgba(13,106,166,.38), transparent 62%),
    radial-gradient(50% 65% at 100% 80%, rgba(255,90,20,.30), transparent 62%);

  /* type */
  --font:"Archivo", "Helvetica Neue", Arial, sans-serif;

  /* layout */
  --gutter:clamp(16px, 4vw, 48px);
  --max:1440px;
  /* iPhones: the page runs to the top of the screen (viewport-fit=cover), so the menu bar grows by the
     status-bar height and sits flush with Safari's address bar. 0 everywhere else. */
  --safe-top:env(safe-area-inset-top, 0px);
  --nav-h:calc(76px + var(--safe-top));
  --radius:2px;
  --ease:cubic-bezier(.2,.7,.1,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:17px; line-height:1.6;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; position:relative;
}
/* film grain over everything, very subtle. Laid over the page, not fixed to the screen: iPhone Safari
   (iOS 26) treats a full-screen fixed layer as the top of the page and shows content behind its address bar. */
body::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:200; opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
::selection{background:var(--orange); color:#0a0a0b}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:16px; top:-60px; z-index:300; background:var(--orange); color:#0a0a0b; padding:10px 16px; font-weight:700; text-decoration:none}
.skip:focus{top:12px}

.wrap{max-width:var(--max); margin:0 auto; padding-left:max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right:max(var(--gutter), env(safe-area-inset-right, 0px))}
.wrap-narrow{max-width:860px; margin:0 auto; padding-left:max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right:max(var(--gutter), env(safe-area-inset-right, 0px))}

/* ---------- type ---------- */
.display, h1, h2, h3{ word-spacing:.12em;
  font-family:var(--font); font-weight:900; text-transform:uppercase;
  font-variation-settings:"wdth" 100; letter-spacing:-.02em; line-height:.9; margin:0;
  text-wrap:balance;
}
.display{font-size:clamp(3.2rem, 11vw, 11.5rem)}
/* Nothing may make the page wider than a phone screen: iPhone Safari then zooms the whole page
   out and the fixed menu bar drifts down the screen. Long words in big headings wrap instead. */
main, footer{overflow-x:clip}
h1, h2, h3{overflow-wrap:break-word}
h1{font-size:clamp(2.8rem, 8.5vw, 8.5rem)}
h2{font-size:clamp(2.2rem, 6vw, 5.6rem)}
h3{font-size:clamp(1.3rem, 2.2vw, 1.9rem); line-height:1; letter-spacing:-.01em}
.label{
  font-weight:800; text-transform:uppercase; font-size:.72rem; letter-spacing:.34em;
  font-variation-settings:"wdth" 125; color:var(--text-2); margin:0;
}
.label.accent{color:var(--orange)}
.lede{font-size:clamp(1.12rem, 1.6vw, 1.38rem); line-height:1.55; color:var(--text-2); max-width:58ch}
.grad{
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.outline{color:transparent; -webkit-text-stroke:2px var(--text)}
.muted{color:var(--muted)}
.prose p{color:var(--text-2); margin:0 0 1.15em; max-width:68ch}
.prose h2{font-size:clamp(1.8rem, 3.6vw, 2.8rem); margin:1.6em 0 .55em}
.prose h3{margin:1.6em 0 .6em}
.prose ul{padding-left:0; list-style:none; margin:0 0 1.4em; max-width:66ch}
.prose li{position:relative; padding:.55em 0 .55em 30px; border-top:1px solid var(--line); color:var(--text-2)}
.prose li:last-child{border-bottom:1px solid var(--line)}
.prose li::before{content:""; position:absolute; left:0; top:1.12em; width:14px; height:3px; background:var(--orange)}
.prose a{color:var(--orange-hi); text-underline-offset:3px}
.prose strong{color:var(--text)}

/* ---------- buttons ---------- */
.btn{
  --b:var(--orange);
  display:inline-flex; align-items:center; gap:12px; justify-content:center;
  padding:17px 28px; border:2px solid var(--b); border-radius:var(--radius);
  background:var(--b); color:#0a0a0b; text-decoration:none; cursor:pointer;
  font:inherit; font-weight:800; text-transform:uppercase; letter-spacing:.16em; font-size:.8rem;
  font-variation-settings:"wdth" 115; line-height:1;
  transition:transform .25s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn svg{width:18px; height:18px; flex:none; transition:transform .25s var(--ease)}
.btn:hover{background:var(--orange-hi); border-color:var(--orange-hi)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--text); background:rgba(255,255,255,.04)}
.btn.light{--b:var(--text); color:#0a0a0b}
.btn.light:hover{background:#fff; border-color:#fff}
.btn-row{display:flex; flex-wrap:wrap; gap:14px}

.link-arrow{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-weight:800; text-transform:uppercase; letter-spacing:.2em; font-size:.74rem; font-variation-settings:"wdth" 120;
  border-bottom:2px solid var(--orange); padding-bottom:6px;
}
.link-arrow svg{width:16px; height:16px; transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h); padding-top:var(--safe-top);
  display:flex; align-items:center;
  transition:background-color .3s, border-color .3s, transform .4s var(--ease);
  border-bottom:1px solid transparent;
}
/* phones/tablets: slides away while scrolling down (site.js) */
.nav-hidden .nav{transform:translateY(-100%)}
.nav-hidden .cat-bar{transform:translateY(calc(-100% - var(--nav-h)))}
/* Solid, with no blur: iPhone Safari (iOS 26) only extends a menu bar's color behind its see-through
   address bar when the bar has no backdrop-filter. With a blur, the page shows through up there. */
.nav.solid, body:not(.has-hero) .nav{
  background-color:var(--bg);
  border-bottom-color:var(--line);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%}
.brand{display:block; flex:none; line-height:0}
.brand img{height:34px; width:auto}
.nav-links{display:flex; align-items:center; gap:clamp(18px, 2.4vw, 34px); list-style:none; margin:0; padding:0}
.nav-links > li{position:relative}
.nav-links a{
  text-decoration:none; font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:.72rem;
  font-variation-settings:"wdth" 115; color:var(--text-2); transition:color .2s; padding:8px 0; display:inline-block;
}
.nav-links a:hover, .nav-links a[aria-current="page"], .nav-links .active > a{color:var(--text)}
.nav-links a[aria-current="page"]::after, .nav-links .active > a::after{
  content:""; display:block; height:2px; background:var(--orange); margin-top:4px;
}
.nav-links .btn{padding:12px 18px; color:#0a0a0b; font-size:.7rem}
.nav-links .btn:hover{color:#0a0a0b}
.dropdown{
  position:absolute; top:100%; left:-20px; min-width:230px; list-style:none; margin:0; padding:10px 0;
  background:var(--bg-2); border:1px solid var(--line); opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown{opacity:1; visibility:visible; transform:none}
.dropdown a{display:block; padding:10px 20px; letter-spacing:.14em}
.dropdown a:hover{background:var(--bg-3)}
.dropdown a::after{display:none!important}

.menu-btn{
  display:none; background:none; border:0; color:var(--text); cursor:pointer; padding:10px; margin-right:-10px;
  font:inherit; font-weight:800; text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; font-variation-settings:"wdth" 120;
  align-items:center; gap:10px;
}
.menu-btn .bars{width:22px; height:12px; position:relative}
.menu-btn .bars::before, .menu-btn .bars::after{content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; transition:transform .3s var(--ease), top .3s var(--ease)}
.menu-btn .bars::before{top:0}
.menu-btn .bars::after{top:10px}
.menu-open .menu-btn .bars::before{top:5px; transform:rotate(45deg)}
.menu-open .menu-btn .bars::after{top:5px; transform:rotate(-45deg)}

.mobile-menu{
  position:fixed; inset:0; z-index:90; background:var(--bg); background-image:var(--glow);
  padding:calc(var(--nav-h) + 24px) var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px)); overflow-y:auto;
  display:flex; flex-direction:column; justify-content:space-between; gap:32px;
  opacity:0; visibility:hidden; transform:translateY(-100%); transition:opacity .3s, visibility .3s, transform 0s .3s; /* closed: parked above the screen (see body::after) */
}
.menu-open .mobile-menu{opacity:1; visibility:visible; transform:none; transition:opacity .3s, visibility .3s, transform 0s}
.mobile-menu ul{list-style:none; margin:0; padding:0}
.mobile-menu .big a{
  display:block; text-decoration:none; font-weight:900; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(2.4rem, 11vw, 4rem); line-height:1.02; padding:4px 0;
}
.mobile-menu .big a:hover{color:var(--orange)}
.mobile-menu .small{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:18px}
.mobile-menu .small a{text-decoration:none; color:var(--text-2); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.74rem}
.mobile-menu .contact-mini{color:var(--text-2); font-size:.95rem}
.mobile-menu .contact-mini a{display:block; text-decoration:none; color:var(--text); font-weight:700; font-size:1.1rem}

@media (max-width: 1020px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
}
@media (min-width: 1021px){ .mobile-menu{display:none} }
.menu-open{overflow:hidden}

/* ---------- hero (home) ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--nav-h) + 40px) 0 0; overflow:hidden; isolation:isolate;
}
.hero-slides{position:absolute; inset:0; z-index:-2}
.hero-slides img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.08); transition:opacity 1.6s ease, transform 7s linear;
}
.hero-slides img.on{opacity:1; transform:scale(1)}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,10,11,.45) 0%, rgba(10,10,11,0) 18%, rgba(10,10,11,0) 45%, rgba(10,10,11,.6) 78%, rgba(10,10,11,.92) 100%);
  mix-blend-mode:normal;
}
.hero .wrap{width:100%}
.hero .label{margin-bottom:22px; color:var(--text)}
.hero h1{font-size:clamp(2.4rem, 6.4vw, 6.6rem)!important; line-height:.88; letter-spacing:-.03em; text-shadow:0 4px 40px rgba(0,0,0,.35); max-width:16ch}
.hero-foot{
  display:grid; grid-template-columns:1fr auto; gap:28px 48px; align-items:end;
  margin-top:34px; padding-bottom:40px;
}
.hero-foot p{text-shadow:0 1px 12px rgba(0,0,0,.6); margin:0; max-width:46ch; color:var(--text); font-size:clamp(1.05rem,1.4vw,1.25rem)}
.hero-count{position:absolute; right:var(--gutter); top:calc(var(--nav-h) + 30px); display:flex; gap:8px}
.hero-count button{width:34px; height:3px; border:0; padding:0; background:rgba(255,255,255,.28); cursor:pointer}
.hero-count button.on{background:var(--orange)}
.hero-count button::before{content:""; display:block; height:22px; margin-top:-10px}
@media (max-width:720px){
  .hero-foot{grid-template-columns:1fr}
  .hero-count{display:none}
}

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap; padding:20px 0; background:var(--bg);
}
.marquee-track{display:inline-flex; gap:0; animation:marquee 38s linear infinite}
.marquee span{
  font-weight:900; text-transform:uppercase; font-size:clamp(1.4rem, 3vw, 2.4rem); letter-spacing:-.01em;
  padding-right:.9em; display:inline-flex; align-items:center; gap:.9em;
}
.marquee span::after{content:""; width:.38em; height:.38em; background:var(--orange); border-radius:50%; display:inline-block}
.marquee span:nth-child(3n+2){color:transparent; -webkit-text-stroke:1.5px var(--text)}
.marquee span:nth-child(3n)::after{background:var(--blue-hi)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.section{padding:clamp(80px, 12vw, 168px) 0; position:relative}
.section.tight{padding:clamp(56px, 8vw, 100px) 0}
.section.glow{background-image:var(--glow)}
.section.alt{background:var(--bg-2)}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px; flex-wrap:wrap; margin-bottom:clamp(40px, 6vw, 72px)}
.section-head .label{margin-bottom:18px}
.num{font-variant-numeric:tabular-nums; font-weight:800; font-size:.78rem; letter-spacing:.2em; color:var(--orange); font-variation-settings:"wdth" 120}

/* logos / trust strip */
.trust{padding:34px 0; border-bottom:1px solid var(--line)}
.trust .wrap{display:flex; align-items:center; gap:18px 48px; flex-wrap:wrap; justify-content:space-between}
.trust ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px clamp(18px,2.4vw,40px); align-items:center}
.trust li{
  font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(.9rem,1.2vw,1.08rem);
  color:var(--text-2); font-variation-settings:"wdth" 112;
}

.client-list{list-style:none; margin:0 0 48px; padding:0; display:flex; flex-wrap:wrap; gap:10px 34px}
.client-list li{font-weight:900; text-transform:uppercase; font-size:clamp(1.15rem, 2.2vw, 1.9rem); letter-spacing:-.01em; line-height:1.15}
.client-list li:nth-child(4n+2){color:var(--blue-hi)}
.client-list li:nth-child(4n+3){color:transparent; -webkit-text-stroke:1.5px var(--text)}
.client-list li:nth-child(4n){color:var(--orange)}

/* intro statement */
.statement{font-weight:800; font-size:clamp(1.7rem, 4.2vw, 3.6rem); line-height:1.08; letter-spacing:-.02em; margin:0; max-width:24ch; text-wrap:balance}
.statement-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:48px clamp(40px, 7vw, 120px); align-items:end}
.statement-grid .prose p:last-child{margin-bottom:0}
@media (max-width:900px){ .statement-grid{grid-template-columns:1fr} }

/* ---------- work tiles (home + portfolio index) ---------- */
.tiles{display:grid; grid-template-columns:repeat(12, 1fr); gap:clamp(10px, 1.4vw, 18px)}
.tile{
  position:relative; overflow:hidden; display:block; text-decoration:none; background:var(--bg-3);
  grid-column:span 4; aspect-ratio:4/5; isolation:isolate; container-type:inline-size;
}
.tile.w6{grid-column:span 6; aspect-ratio:6/5}
.tile.w7{grid-column:span 7; aspect-ratio:7/5}
.tile.w5{grid-column:span 5; aspect-ratio:5/5}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .6s}
.tile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, rgba(10,10,11,.88)); z-index:0; transition:opacity .4s}
.tile-body{position:absolute; inset:auto 0 0 0; padding:clamp(18px, 2.4vw, 32px); z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:16px}
.tile-body > div{min-width:0}
.tile h3{font-size:clamp(1.4rem, 2.6vw, 2.8rem); font-size:clamp(1.4rem, 9cqi, 3.4rem); line-height:.88}
.tile .num{display:block; margin-bottom:10px}
.tile .go{
  flex:none; width:52px; height:52px; border-radius:50%; border:2px solid var(--line-2); display:grid; place-items:center;
  transition:background .3s, border-color .3s, transform .4s var(--ease);
}
.tile .go svg{width:20px; height:20px}
.tile:hover img{transform:scale(1.06)}
.tile:hover .go{background:var(--orange); border-color:var(--orange); color:#0a0a0b; transform:rotate(-45deg)}
@media (max-width:900px){
  .tile, .tile.w6, .tile.w7, .tile.w5{grid-column:span 12; aspect-ratio:5/4}
}
@media (min-width:600px) and (max-width:900px){
  .tiles .tile{grid-column:span 6; aspect-ratio:4/5}
  .tiles .tile:first-child{grid-column:span 12; aspect-ratio:16/10}
}

/* ---------- project cards ---------- */
.projects{display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(28px, 4vw, 56px) clamp(16px, 2vw, 28px)}
.project{text-decoration:none; display:block}
.project .ph{aspect-ratio:3/2; overflow:hidden; background:var(--bg-3); margin-bottom:20px; position:relative}
.project .ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.project:hover .ph img{transform:scale(1.05)}
.project .meta{display:flex; gap:12px 22px; flex-wrap:wrap; margin-bottom:12px}
.project h3{font-size:clamp(1.6rem, 3vw, 2.6rem); margin-bottom:12px; transition:color .2s}
.project:hover h3{color:var(--orange)}
.project p{margin:0; color:var(--text-2); max-width:52ch}
@media (max-width:760px){ .projects{grid-template-columns:1fr} }

/* ---------- gradient feature band (content plans) ---------- */
.band{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--bg);
}
.band::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(13,106,166,.75), transparent 60%),
    radial-gradient(70% 90% at 100% 100%, rgba(255,90,20,.7), transparent 60%),
    #0a0a0b;
}
.band-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:48px clamp(40px, 6vw, 100px); align-items:center}
.band h2{font-size:clamp(2.4rem, 6.2vw, 6rem)}
.band .lede{color:var(--text)}
.checks{list-style:none; margin:28px 0 36px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 28px}
.checks li{padding:14px 0 14px 32px; border-top:1px solid rgba(255,255,255,.2); position:relative; font-weight:600}
.checks li::before{content:""; position:absolute; left:0; top:20px; width:16px; height:9px; border-left:3px solid var(--orange); border-bottom:3px solid var(--orange); transform:rotate(-45deg)}
.price-card{
  background:rgba(10,10,11,.78); border:1px solid rgba(255,255,255,.18); padding:clamp(26px, 3.4vw, 44px);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.price-card .big{font-weight:900; font-size:clamp(3.6rem, 7vw, 6rem); line-height:.9; letter-spacing:-.03em; margin:14px 0 6px}
.price-card .big small{font-size:.28em; letter-spacing:.02em; color:var(--text-2); font-weight:700; margin-left:.25em}
.price-card hr{border:0; border-top:1px solid var(--line); margin:24px 0}
.price-card dl{display:grid; grid-template-columns:1fr auto; gap:10px 16px; margin:0 0 28px; font-size:.95rem}
.price-card dt{color:var(--text-2)}
.price-card dd{margin:0; font-weight:700; text-align:right; font-variant-numeric:tabular-nums}
@media (max-width:900px){ .band-grid{grid-template-columns:1fr} .checks{grid-template-columns:1fr} }

/* ---------- process ---------- */
.steps{display:grid; grid-template-columns:repeat(4, 1fr); gap:0; border-top:1px solid var(--line)}
.step{padding:34px 28px 10px 0; border-right:1px solid var(--line); margin-right:28px}
.step:last-child{border-right:0; margin-right:0}
.step .n{font-weight:900; font-size:clamp(3rem, 5vw, 4.6rem); line-height:1; letter-spacing:-.03em; display:block; margin-bottom:18px}
.step h3{font-size:1.25rem; margin-bottom:10px}
.step p{margin:0; color:var(--text-2); font-size:.98rem}
@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
  .step{border-right:0; margin-right:0; padding-right:20px; border-bottom:1px solid var(--line); padding-bottom:28px}
}
@media (max-width:520px){ .steps{grid-template-columns:1fr} }

/* ---------- about split ---------- */
.split{display:grid; grid-template-columns:1fr 1.1fr; gap:48px clamp(40px, 7vw, 120px); align-items:center}
.split .ph{position:relative}
.split .ph img{width:100%; aspect-ratio:4/5; object-fit:cover}
.split .ph::after{
  content:""; position:absolute; inset:auto -14px -14px auto; width:62%; height:62%;
  border-right:3px solid var(--orange); border-bottom:3px solid var(--orange); pointer-events:none;
}
.split .ph::before{
  content:""; position:absolute; inset:-14px auto auto -14px; width:40%; height:40%;
  border-left:3px solid var(--blue-hi); border-top:3px solid var(--blue-hi); pointer-events:none;
}
@media (max-width:900px){ .split{grid-template-columns:1fr} .split .ph{max-width:520px} }

/* ---------- CTA ---------- */
.cta{text-align:left; padding:clamp(90px, 13vw, 190px) 0; position:relative; overflow:hidden; isolation:isolate}
.cta::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--glow), var(--bg)}
.cta h2{font-size:clamp(3rem, 10vw, 10rem); line-height:.86; letter-spacing:-.035em; margin-bottom:40px}
.cta-row{display:flex; flex-wrap:wrap; gap:32px 64px; align-items:flex-end; justify-content:space-between}
.cta-contacts{display:flex; flex-wrap:wrap; gap:14px 40px}
.cta-contacts a{text-decoration:none; font-weight:800; font-size:clamp(1.1rem, 2vw, 1.5rem); border-bottom:2px solid transparent; transition:border-color .2s}
.cta-contacts a:hover{border-color:var(--orange)}
.cta-contacts .label{display:block; margin-bottom:6px}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line); padding:64px 0 34px; background:var(--bg)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.footer .brand img{height:46px}
.footer h4{margin:0 0 16px; font-weight:800; text-transform:uppercase; letter-spacing:.24em; font-size:.68rem; color:var(--muted); font-variation-settings:"wdth" 120}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin:0 0 9px}
.footer a{text-decoration:none; color:var(--text-2); transition:color .2s}
.footer a:hover{color:var(--text)}
.footer p{color:var(--text-2); margin:0 0 9px}
.foot-mark{
  margin:56px auto 0; max-width:min(100%, 520px); padding:clamp(22px, 3vw, 34px) clamp(26px, 4vw, 48px);
  background:radial-gradient(70% 120% at 50% 35%, #3a3a40 0%, #232327 45%, #151518 100%);
  position:relative; overflow:hidden;
}
.foot-mark img{width:100%; height:auto; position:relative; z-index:1}
.foot-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:56px; padding-top:24px; border-top:1px solid var(--line); font-size:.82rem; color:var(--muted)}
.foot-areas{font-size:.82rem; color:var(--muted); max-width:60ch; margin-top:18px!important}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-grid > :first-child{grid-column:1 / -1} }

/* ---------- page header (inner pages) ---------- */
.page-head{
  padding:calc(var(--nav-h) + clamp(56px, 9vw, 120px)) 0 clamp(40px, 6vw, 72px);
  background-image:var(--glow); border-bottom:1px solid var(--line);
}
.page-head .label{margin-bottom:22px}
.page-head h1{max-width:14ch}
.page-head .lede{margin:28px 0 0}
.page-head .crumbs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; font-size:.72rem; text-transform:uppercase; letter-spacing:.24em; font-weight:700; color:var(--muted); font-variation-settings:"wdth" 120}
.page-head .crumbs a{text-decoration:none; color:var(--text-2)}
.page-head .crumbs a:hover{color:var(--orange)}
.head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px; flex-wrap:wrap}
.head-stat{text-align:right}
.head-stat b{display:block; font-weight:900; font-size:clamp(3rem, 6vw, 5.4rem); line-height:.9; letter-spacing:-.03em}

/* category switcher */
.cat-bar{position:sticky; top:var(--nav-h); z-index:40; transition:transform .4s var(--ease); background:rgba(10,10,11,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.cat-bar ul{list-style:none; margin:0; padding:0; display:flex; gap:clamp(20px, 3vw, 40px); overflow-x:auto; scrollbar-width:none}
.cat-bar ul::-webkit-scrollbar{display:none}
.cat-bar a{
  display:block; padding:18px 0; white-space:nowrap; text-decoration:none; color:var(--muted);
  font-weight:800; text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; font-variation-settings:"wdth" 118;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.cat-bar a:hover{color:var(--text)}
.cat-bar a[aria-current="page"]{color:var(--text); border-bottom-color:var(--orange)}

/* ---------- justified gallery ---------- */
.gallery{display:flex; flex-wrap:wrap; gap:clamp(6px, .9vw, 12px); --row:clamp(190px, 26vw, 360px)}
.gallery::after{content:""; flex-grow:999999}
.g-item{
  flex:var(--r) 1 calc(var(--r) * var(--row)); position:relative; overflow:hidden; display:block;
  background:var(--bg-3); cursor:zoom-in;
}
.g-item img{width:100%; height:100%; aspect-ratio:var(--r); object-fit:cover; transition:transform .9s var(--ease), opacity .6s}
.g-item:hover img{transform:scale(1.035)}
.g-item::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 0 var(--orange); transition:box-shadow .25s}
.g-item:focus-visible::after{box-shadow:inset 0 0 0 3px var(--orange)}
.js .g-item img[loading]:not(.loaded){opacity:0}
.g-item img.loaded{opacity:1}
@media (max-width:560px){ .gallery{--row:150px} }

/* ---------- lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:150; background:rgba(6,6,7,.97); display:none;
  grid-template-rows:auto 1fr auto; touch-action:pan-y;
}
.lb.open{display:grid}
.lb-top{display:flex; justify-content:space-between; align-items:center; padding:calc(16px + var(--safe-top)) var(--gutter) 16px}
.lb-count{font-weight:800; letter-spacing:.2em; font-size:.74rem; color:var(--text-2); font-variant-numeric:tabular-nums}
.lb-stage{position:relative; display:flex; align-items:center; justify-content:center; padding:0 clamp(8px, 6vw, 96px); min-height:0}
.lb-stage img{max-width:100%; max-height:100%; object-fit:contain; transition:opacity .3s}
.lb-cap{padding:14px var(--gutter) calc(22px + env(safe-area-inset-bottom, 0px)); color:var(--text-2); font-size:.9rem; text-align:center; min-height:52px}
.lb button{background:none; border:0; color:var(--text); cursor:pointer; padding:12px; display:grid; place-items:center}
.lb button svg{width:28px; height:28px}
.lb button:hover{color:var(--orange)}
.lb-prev, .lb-next{position:absolute; top:50%; transform:translateY(-50%)}
.lb-prev{left:clamp(0px, 1.5vw, 24px)}
.lb-next{right:clamp(0px, 1.5vw, 24px)}
@media (max-width:640px){ .lb-prev, .lb-next{display:none!important} }

/* ---------- next / pager ---------- */
.next-link{display:block; text-decoration:none; border-top:1px solid var(--line); padding:clamp(56px, 8vw, 110px) 0; transition:background .3s}
.next-link:hover{background:var(--bg-2)}
.next-link .label{margin-bottom:16px}
.next-link h2{font-size:clamp(2.6rem, 9vw, 8.5rem); transition:color .25s}
@media (max-width:560px){ .next-link h2{font-size:8.4vw} } /* long names like "Pharmaceutical" fit a phone */
.next-link:hover h2{color:var(--orange)}

/* ---------- article / case study ---------- */
.case-hero{margin-top:-1px}
.case-hero img{width:100%; max-height:86vh; object-fit:cover}
.case-meta{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; border-bottom:1px solid var(--line); padding:30px 0}
.case-meta div b{display:block; margin-top:8px; font-weight:700}
@media (max-width:760px){ .case-meta{grid-template-columns:1fr 1fr} }
.two-col{display:grid; grid-template-columns:280px 1fr; gap:40px clamp(40px, 6vw, 96px)}
.two-col aside .label{position:sticky; top:calc(var(--nav-h) + 30px)}
@media (max-width:860px){ .two-col{grid-template-columns:1fr} }

/* cards for resources */
.cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(16px, 2vw, 28px)}
.card{text-decoration:none; display:flex; flex-direction:column; background:var(--bg-2); border:1px solid var(--line); transition:border-color .25s, transform .4s var(--ease)}
.card:hover{border-color:var(--orange); transform:translateY(-4px)}
.card .ph{aspect-ratio:4/3; overflow:hidden}
.card .ph img{width:100%; height:100%; object-fit:cover}
.card .body{padding:24px 24px 28px; display:flex; flex-direction:column; gap:12px; flex:1}
.card h3{font-size:1.6rem}
.card p{margin:0; color:var(--text-2); font-size:.98rem}
.card .link-arrow{margin-top:auto; align-self:flex-start}
@media (max-width:900px){ .cards{grid-template-columns:1fr} }

/* problem list (membership) */
.problems{display:grid; grid-template-columns:repeat(4, 1fr); gap:0; border-top:1px solid var(--line)}
.problems div{padding:30px 24px 30px 0; border-right:1px solid var(--line); margin-right:24px}
.problems div:last-child{border-right:0; margin-right:0}
.problems b{display:block; font-size:1.25rem; line-height:1.2; font-weight:800; margin-top:14px}
@media (max-width:900px){ .problems{grid-template-columns:1fr 1fr} .problems div{border-right:0; margin-right:0; border-bottom:1px solid var(--line)} }
@media (max-width:520px){ .problems{grid-template-columns:1fr} }

/* ---------- forms ---------- */
.form{display:grid; grid-template-columns:1fr 1fr; gap:22px 20px}
.form .full{grid-column:1 / -1}
.field label{display:block; margin-bottom:9px; font-weight:800; text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; color:var(--text-2); font-variation-settings:"wdth" 118}
.field label .opt{color:var(--muted); letter-spacing:.1em; font-weight:600}
.field input, .field select, .field textarea{
  width:100%; background:var(--bg-2); color:var(--text); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:15px 16px; font:inherit; font-size:1rem; transition:border-color .2s, background .2s;
}
.field textarea{min-height:160px; resize:vertical}
.field select{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4beb5' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:44px}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--orange); background:var(--bg-3)}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chips label{margin:0; cursor:pointer; position:relative}
.chips input, .field .chips input{position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none; padding:0; border:0}
.chips span{
  display:inline-block; padding:11px 16px; border:1px solid var(--line-2); border-radius:999px;
  font-weight:700; text-transform:none; letter-spacing:.02em; font-size:.9rem; color:var(--text-2); transition:all .2s;
  font-variation-settings:"wdth" 100;
}
.chips input:checked + span{background:var(--text); color:#0a0a0b; border-color:var(--text)}
.chips input:focus-visible + span{outline:2px solid var(--orange); outline-offset:2px}
.hp{position:absolute!important; left:-9999px!important; height:0; overflow:hidden}
.quote-attached{
  border:1px solid var(--orange); background:rgba(255,90,20,.08); padding:18px 20px; display:none;
}
.quote-attached.show{display:block}
.quote-attached p{margin:6px 0 0; color:var(--text)}
.linkish{background:none; border:0; padding:0; font:inherit; color:var(--orange-hi); text-decoration:underline; cursor:pointer}
.quote-attached a{color:var(--orange-hi)}
.form-note{font-size:.85rem; color:var(--muted)}
.form-error{display:none; border:1px solid var(--ember); background:rgba(200,53,12,.12); padding:14px 18px}
.form-error.show{display:block}
@media (max-width:640px){ .form{grid-template-columns:1fr} }

.contact-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:56px clamp(40px, 6vw, 110px)}
.contact-side{display:flex; flex-direction:column; gap:30px}
.contact-side a{text-decoration:none}
.contact-side .big{display:block; font-weight:900; font-size:clamp(1.4rem, 2.4vw, 2rem); letter-spacing:-.01em; line-height:1.1; margin-top:8px; word-break:break-word}
.contact-side .big:hover{color:var(--orange)}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }

/* ---------- reveal on scroll ---------- */
.js .reveal{opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
.js .reveal.d1{transition-delay:.08s}
.js .reveal.d2{transition-delay:.16s}
.js .reveal.d3{transition-delay:.24s}

/* hero headline line-by-line rise */
.rise > span{display:block}
.js .rise > span{display:block; overflow:hidden; padding:.06em 0 .12em; margin:-.06em 0 -.12em}
.js .rise > span > span{display:block; transform:translateY(105%); transition:transform 1.1s var(--ease)}
.js .rise.in > span > span{transform:none}
.js .rise.in > span:nth-child(2) > span{transition-delay:.09s}
.js .rise.in > span:nth-child(3) > span{transition-delay:.18s}
.js .rise.in > span:nth-child(4) > span{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .js .reveal, .js .rise > span > span{opacity:1; transform:none}
  .hero-slides img{transform:none}
}

/* ---------- FAQ ---------- */
.faq-group{margin:0 0 clamp(40px, 6vw, 64px)}
.faq-group h2{font-size:clamp(1.5rem, 3vw, 2.2rem); margin:0 0 18px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:20px 0; font-weight:800; font-size:clamp(1.05rem, 1.6vw, 1.25rem); line-height:1.3;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+"; flex:none; width:36px; height:36px; border-radius:50%; border:2px solid var(--line-2);
  display:grid; place-items:center; font-weight:400; font-size:1.4rem; line-height:1; color:var(--orange);
  transition:transform .3s var(--ease), background .2s, border-color .2s;
}
.faq-item[open] summary::after{transform:rotate(45deg); background:var(--orange); border-color:var(--orange); color:#0a0a0b}
.faq-item summary:hover{color:var(--orange-hi)}
.faq-a{padding:0 56px 22px 0}
.faq-a p{margin:0; color:var(--text-2); max-width:68ch}
.faq-a a{color:var(--orange-hi)}

/* ---------- ad landing pages (no menu, one goal) ---------- */
.landing .nav .wrap{justify-content:space-between}
.lp-call{padding:12px 18px; font-size:.72rem}
.lp-call svg{width:16px; height:16px}
@media (max-width:560px){ .lp-call span{display:none} .lp-call{padding:12px 14px} }
.lp-photos{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(8px, 1.2vw, 16px)}
.lp-photos img{width:100%; aspect-ratio:4/5; object-fit:cover}
@media (max-width:640px){ .lp-photos{grid-template-columns:1fr 1fr} .lp-photos img:last-child{grid-column:1 / -1; aspect-ratio:16/10} }
.lp-foot{padding:34px 0}
.lp-foot .foot-bottom{align-items:center}
.lp-form .form-error{grid-column:1 / -1}
.trial-note{margin:0; padding:14px 18px; border-left:3px solid var(--orange); background:rgba(255,90,20,.08); color:var(--text)}

/* ---------- links inside text ---------- */
.lede a, .project p a, .step p a, .statement-grid p a{color:var(--orange-hi); text-underline-offset:3px}
.lede a:hover, .project p a:hover{color:var(--text)}
.trust li a, .client-list li a{color:inherit; text-decoration:none; border-bottom:2px solid transparent; transition:border-color .2s, color .2s}
.trust li a:hover, .client-list li a:hover{border-bottom-color:var(--orange); color:var(--text)}
.lp-quiet{font-size:.85rem; color:var(--text-2); text-decoration:underline; text-underline-offset:3px}
.lp-quiet:hover{color:var(--text)}