/* GelFuzion site styles. Shared by every page; page-specific sections are harmless when absent. */
:root{
  --navy:#0a0d26;
  --navy-2:#101438;
  --cream:#f6f2ec;
  --cream-2:#efe9e0;
  --white:#fdfcfa;
  --muted:#9aa0c0;
  --muted-dark:#6b6459;
  --gold:#ffd23f;
  --orange:#ff8a1f;
  --grad:linear-gradient(96deg,#ff8a1f 0%,#ffd23f 100%);
  --max:1440px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--navy);color:var(--white);
  font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(24px,5vw,84px)}
.serif{font-family:Inter,system-ui,sans-serif}

/* film grain retired: the line art is the only texture now */
body::after{
  content:none;position:fixed;inset:-100%;z-index:999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 9s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-3%,2%)}20%{transform:translate(2%,-4%)}
  30%{transform:translate(-4%,-2%)}40%{transform:translate(3%,3%)}50%{transform:translate(-2%,4%)}
  60%{transform:translate(4%,-3%)}70%{transform:translate(-3%,-4%)}80%{transform:translate(2%,2%)}90%{transform:translate(-4%,3%)}
}

.grad-i{
  font-family:Inter,system-ui,sans-serif;font-style:normal;font-weight:inherit;
  background:linear-gradient(96deg,#ff8a1f,#ffd23f);
  background-size:100% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.06em;
}
@keyframes gradShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
/* section kicker: serif italic gradient word + hairline index, a GelFuzion device, not a stock eyebrow */
.eyebrow{
  font-family:Inter,system-ui,sans-serif;font-style:normal;font-weight:600;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:14px;
}
.eyebrow .k{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.eyebrow .n{font-family:Inter,sans-serif;font-style:normal;font-weight:600;font-size:11px;letter-spacing:.2em;opacity:.55}
.eyebrow .n::before{content:"( "}.eyebrow .n::after{content:" )"}

/* top scroll progress bar */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:300;transform-origin:0 50%;transform:scaleX(0);background:var(--grad);pointer-events:none}

/* ================= NAV ================= */
.nav{position:fixed;inset:0 0 auto;z-index:200;transition:background .5s,box-shadow .5s}
.nav.solid{background:rgba(10,13,38,.82);backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:92px}
.logo{display:flex;align-items:center;gap:14px;font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;font-size:38px;letter-spacing:-.03em;color:#fff}
.logo .gel{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:42px;font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.nav-links a{color:#fff;transition:color .3s;position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--grad);transition:width .4s var(--ease)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after,.nav-links a.on::after{width:100%}
.nav-links a.on{color:#fff}
.btn{
  display:inline-flex;align-items:center;gap:12px;white-space:nowrap;
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:19px 34px;border-radius:999px;cursor:pointer;border:0;
  transition:transform .45s var(--ease),box-shadow .45s,background .35s,color .35s;
}
.btn .a{transition:transform .35s var(--ease)}
.btn:hover .a{transform:translateX(5px)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{transform:translateY(-3px);box-shadow:0 18px 40px -14px rgba(255,255,255,.35)}
.btn-gold{background:var(--grad);color:var(--navy);box-shadow:0 14px 34px -12px rgba(255,204,51,.45)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 22px 48px -12px rgba(255,204,51,.55)}
.btn-ghost{background:rgba(255,255,255,.02);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff;transform:translateY(-3px)}
.btn-nav{padding:12px 22px;font-size:13px;background:rgba(255,255,255,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.burger{display:none;background:none;border:0;cursor:pointer;width:48px;height:48px;position:relative;z-index:210;padding:0}
.burger span{position:absolute;left:11px;width:26px;height:2px;background:#fff;border-radius:2px;transition:transform .5s var(--ease),top .5s var(--ease),opacity .3s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:23px}.burger span:nth-child(3){top:30px}
.burger[aria-expanded="true"] span:nth-child(1){top:23px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger[aria-expanded="true"] span:nth-child(3){top:23px;transform:rotate(-45deg)}
.mob{display:none}

/* ================= HERO ================= */
.hero{
  min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;
  padding:170px 0 130px;
}
/* hero background: a slow-drifting wall of real GelFuzion launches instead of a stock photo */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.wall{position:absolute;inset:-12% -6%;display:flex;gap:22px;transform:rotate(-7deg) scale(1.12);opacity:.55}
.wall .col{flex:1;display:flex;flex-direction:column;gap:22px;animation:wallDrift 70s linear infinite}
.wall .col:nth-child(2){animation-duration:92s;animation-direction:reverse}
.wall .col:nth-child(3){animation-duration:80s}
.wall .col:nth-child(4){animation-duration:104s;animation-direction:reverse}
.wall img{width:100%;aspect-ratio:57/40;object-fit:cover;border-radius:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);filter:saturate(.85)}
@keyframes wallDrift{to{transform:translateY(-50%)}}   /* named apart from the line-art 'drift' keyframe, which slides sideways */
@media (max-width:900px){.wall .col:nth-child(4){display:none}}
/* hero background: rotating light-trail slides (plain crossfade), dots at the right edge */
.hero-slides{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--navy)}
.hero-slides .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.8s ease;filter:contrast(1.12) saturate(1.15);image-rendering:auto}
.hero-slides .slide.on{opacity:1}
/* transitions, chosen with data-fx on .hero-slides: fade (default) | wipe | blur | zoom. .was marks the slide just left, kept visible under the incoming one */
.hero-slides .slide.was{z-index:1}
.hero-slides .slide.on{z-index:2}
/* wipe: the incoming slide sweeps in left-to-right behind a feathered mask */
.hero-slides[data-fx=wipe] .slide{transition:none;-webkit-mask-image:linear-gradient(100deg,#000 38%,transparent 62%);mask-image:linear-gradient(100deg,#000 38%,transparent 62%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hero-slides[data-fx=wipe] .slide.was{opacity:1;-webkit-mask-image:none;mask-image:none}
.hero-slides[data-fx=wipe] .slide.on{opacity:1;-webkit-mask-position:0 0;mask-position:0 0;transition:-webkit-mask-position 1.5s cubic-bezier(.65,0,.25,1),mask-position 1.5s cubic-bezier(.65,0,.25,1)}
/* blur: outgoing softens and fades, incoming sharpens into focus */
.hero-slides[data-fx=blur] .slide{filter:contrast(1.12) saturate(1.15) blur(18px);transition:opacity 1.6s ease,filter 1.6s ease}
.hero-slides[data-fx=blur] .slide.on{filter:contrast(1.12) saturate(1.15) blur(0)}
/* zoom: incoming arrives a touch large and settles */
.hero-slides[data-fx=zoom] .slide{transform:scale(1.06);transition:opacity 1.6s ease,transform 2.6s cubic-bezier(.16,1,.3,1)}
.hero-slides[data-fx=zoom] .slide.on{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.hero-slides[data-fx] .slide{transition:opacity 1.2s ease;-webkit-mask-image:none;mask-image:none;filter:contrast(1.12) saturate(1.15);transform:none}}
.hero-slides::after{content:"";position:absolute;inset:0;z-index:3;
  background:radial-gradient(46% 40% at 50% 50%,rgba(10,13,38,.72) 0%,rgba(10,13,38,.5) 45%,rgba(10,13,38,.15) 80%,rgba(10,13,38,0) 100%),linear-gradient(rgba(10,13,38,.72),rgba(10,13,38,.35) 12%,rgba(10,13,38,0) 30%,rgba(10,13,38,0) 78%,var(--navy) 100%)}
.hero-dots{position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:12px}
.hero-dots button{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.4;border:0;padding:0;cursor:pointer;transition:opacity .3s,height .3s var(--ease)}
.hero-dots button.on{opacity:1;height:26px;border-radius:4px;background:var(--grad)}
@media (max-width:640px){.hero-dots{display:none}}
/* centered hero: stats column removed, copy sits in the middle over the slides */
.hero-grid.hero-center{grid-template-columns:1fr;justify-items:center;text-align:center}
.hero-center .hero-copy{max-width:100%}
.hero-center .eyebrow{justify-content:center}
.hero-center .hero-tags,.hero-center .hero-cta{justify-content:center}
.hero-center h1{margin-left:auto;margin-right:auto}
@media (max-width:900px){.hero .hero-center .eyebrow{align-items:center;text-align:center}}
/* hero tag line: no icons, tracked caps separated by hairlines */
.hero-center .hero-tags{gap:0;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fdfcfa;margin-bottom:0;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.hero-center .hero-tags span{padding:0 16px;border-left:1px solid rgba(253,252,250,.45)}
.hero-center .hero-tags span:first-child{border-left:0}
.hero-center .hero-tags i{display:none}
.hero-center h1{text-shadow:0 1px 2px rgba(0,0,0,.25)}
@media (max-width:640px){.hero-center .hero-tags{font-size:11px;letter-spacing:.18em;gap:10px 0}.hero-center .hero-tags span{padding:0 12px}}
.hero .hero-center h1{font-size:clamp(44px,5.7vw,100px);line-height:.92;letter-spacing:-.035em;margin-bottom:26px;max-width:100%}
.hero .hero-center h1 .ln:first-child,.hero .hero-center h1 .ln:last-child{font-weight:800}
.hero .hero-center h1 .ln:last-child{padding-left:.16em}   /* optical centering: offsets the trailing period so the letters, not the box, sit centered */
.hero-center h1 .grad-i{text-shadow:none}   /* a shadow shows through clipped gradient text as a dark fill */
@media (max-width:900px){.hero .hero-center h1{font-size:clamp(30px,8.2vw,60px);letter-spacing:-.03em}}
/* hero scroll cue: rotating serif ring around a gradient arrow */
.cue{display:none}
.cue svg{position:absolute;inset:0;animation:spin 18s linear infinite}
.cue svg text{font-family:Inter,system-ui,sans-serif;font-style:normal;font-size:11.5px;letter-spacing:.14em;fill:rgba(253,252,250,.7)}
.cue .arr{width:38px;height:38px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:var(--navy);font-size:15px;transition:transform .45s var(--ease)}
.cue:hover .arr{transform:translateY(4px)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:640px){.cue{display:none}}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(97deg,rgba(10,13,38,.98) 26%,rgba(10,13,38,.86) 46%,rgba(10,13,38,.42) 68%,rgba(10,13,38,.18)),
    linear-gradient(rgba(10,13,38,.3),rgba(10,13,38,.96) 94%);
}
.hero-glow{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(50% 45% at 80% 30%, rgba(255,204,51,.06), transparent 65%);
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero .eyebrow{color:rgba(253,252,250,.85);margin-bottom:38px}
.hero h1{
  font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.04em;
  font-size:clamp(52px,7.6vw,138px);line-height:1.02;margin:0 0 40px;
}
.hero h1 .ln{display:block;white-space:nowrap}
.hero h1 .ln:first-child{font-weight:300}
.hero h1 .ln:last-child{font-weight:800}
.hero h1 .word{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .1em .06em;margin:0 -.1em -.06em}
.hero h1 .word > span{display:inline-block;transform:translateY(112%)}
.hero-tags{display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:rgba(253,252,250,.82);font-size:clamp(16px,1.5vw,20px);margin-bottom:50px}
.hero-tags i{font-style:normal;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.hero-cta{display:flex;gap:18px;flex-wrap:wrap}

/* ================= STAT BAND ================= */
.stats{background:var(--cream-2);color:var(--navy);position:relative}
.stats-in{display:grid;grid-template-columns:repeat(5,1fr);gap:36px;padding:66px 0}
.stat{position:relative;padding-left:22px}
.stat::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--grad)}
.stat .big{font-weight:700;font-size:clamp(24px,2.1vw,32px);letter-spacing:-.03em;line-height:1.15}
.stat .sub{font-size:14px;color:var(--muted-dark);margin-top:6px}

/* ================= CAPABILITIES ================= */
.caps{background:var(--cream);color:var(--navy);padding:clamp(96px,10vw,160px) 0;position:relative;overflow:hidden}
.caps .eyebrow{color:var(--muted-dark);margin-bottom:30px}
.caps h2,.sec-title{
  font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(40px,4.8vw,76px);line-height:1.04;margin:0;
}
.caps-head{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end;margin-bottom:clamp(56px,6vw,90px)}
.caps-head p{margin:0;color:var(--muted-dark);font-size:17.5px;max-width:44ch}
.caps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cap{
  background:#fff;border-radius:24px;padding:44px 34px 46px;position:relative;overflow:hidden;
  border:1px solid rgba(10,13,38,.06);
  box-shadow:0 2px 10px rgba(10,13,38,.04);
  transition:transform .55s var(--ease),box-shadow .55s;
}
.cap:hover{transform:translateY(-6px);box-shadow:0 24px 48px -28px rgba(10,13,38,.25)}
.cap .ic{
  width:58px;height:58px;border-radius:16px;background:var(--navy);
  display:grid;place-items:center;font-size:22px;margin-bottom:26px;position:relative;
  transition:background .45s;
}
.cap .ic i{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cap:hover .ic{background:var(--grad)}
.cap:hover .ic i{background:var(--navy);-webkit-background-clip:text;background-clip:text}
.cap .idx{position:absolute;top:34px;right:30px;font-family:Inter,system-ui,sans-serif;font-style:normal;font-size:15px;color:rgba(10,13,38,.3)}
.cap h3{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:26px;letter-spacing:-.015em;margin:0 0 12px}
.cap p{margin:0;font-size:15px;color:var(--muted-dark);line-height:1.66}
.cap ul{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.cap li{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);background:var(--cream-2);border-radius:999px;padding:7px 13px}

/* ================= PORTFOLIO (dark band) ================= */
.work{background:var(--navy);padding:clamp(96px,10vw,160px) 0;overflow:hidden;position:relative}
.work::before{content:none}
.work-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:64px;position:relative}
.work .eyebrow{color:var(--muted);margin-bottom:30px}
.work-link{font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(253,252,250,.7);display:inline-flex;gap:10px;align-items:center;transition:color .3s}
.work-link:hover{color:#fff}
.rail-wrap{position:relative}
.rail{display:flex;gap:26px;width:max-content;padding:6px clamp(24px,5vw,84px) 30px;will-change:transform}
/* below 900px or with reduced motion the rail is a plain horizontal scroller with snap points */
.work.native .rail-wrap{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.work.native .rail-wrap::-webkit-scrollbar{display:none}
.work.native .tile{scroll-snap-align:start}
.rail-ctl{display:flex;gap:10px}
.rail-ctl button{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);background:none;color:#fff;font-size:16px;cursor:pointer;transition:.35s}
.rail-ctl button:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.rail-ctl button:disabled{opacity:.3;cursor:default;background:none;color:#fff;border-color:rgba(255,255,255,.25)}
.work-head .hr{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.rail-prog{height:2px;flex:1;min-width:120px;max-width:260px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.rail-prog i{display:block;height:100%;width:0;background:var(--grad);transition:width .15s linear}
/* skip past the pinned rail: a serif pill with a bouncing arrow, sitting on the section's bottom edge */
.hint-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.hint-row .rail-hint{margin-top:0}
.skip{
  display:inline-flex;align-items:center;gap:12px;padding:11px 20px 11px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(10,13,38,.7);backdrop-filter:blur(10px);color:rgba(253,252,250,.8);cursor:pointer;
  font-family:Inter,system-ui,sans-serif;font-style:normal;font-size:15px;letter-spacing:.01em;
  transition:background .35s,color .35s,border-color .35s,transform .45s var(--ease);
}
.skip .arr{width:26px;height:26px;border-radius:50%;background:var(--grad);color:var(--navy);display:grid;place-items:center;font-size:11px;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.skip:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,204,51,.5);transform:translateY(-2px)}
.work.native .skip{display:none}
.tile{
  display:block;color:inherit;font:inherit;text-align:left;padding:0;cursor:pointer;
  width:clamp(300px,26vw,420px);flex:none;border-radius:22px;overflow:hidden;position:relative;
  background:var(--navy-2);border:1px solid rgba(255,255,255,.08);
  transition:transform .55s var(--ease),border-color .55s;
}
.tile:hover{transform:translateY(-6px);border-color:rgba(255,204,51,.45)}
.tile .ph{aspect-ratio:57/40;overflow:hidden;background:#fff}
.tile img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 1.2s var(--ease)}
.tile:hover img{transform:scale(1.06)}
/* caption sits below the image so the whole mockup stays visible */
.tile .cap-bar{
  padding:18px 22px 20px;background:var(--navy-2);
  display:flex;justify-content:space-between;align-items:end;gap:14px;
}
.tile .cap-bar b{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.01em;display:block;line-height:1.2}
.tile .cap-bar small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.tile .cap-bar .tech{font-size:11px;color:rgba(253,252,250,.55);white-space:nowrap;padding-bottom:3px}
.tile .live{position:absolute;top:16px;right:16px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);background:var(--grad);padding:7px 12px;border-radius:999px;display:inline-flex;gap:7px;align-items:center;opacity:0;transform:translateY(-6px);transition:.4s var(--ease)}
.tile:hover .live,.tile:focus-visible .live{opacity:1;transform:none}
.tile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ================= CASE STUDY LIGHTBOX ================= */
.lb{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;padding:24px 96px}
.lb.on{display:flex}
.lb.on ~ .to-top{opacity:0;visibility:hidden}
.lb-bg{position:absolute;inset:0;background:rgba(6,8,24,.86);backdrop-filter:blur(14px);opacity:0}
.lb-card{
  position:relative;width:min(1180px,100%);max-height:calc(100dvh - 32px);overflow:hidden;
  background:var(--navy-2);border:1px solid rgba(255,255,255,.1);border-radius:28px;
  box-shadow:0 60px 120px -30px rgba(0,0,0,.8);display:grid;grid-template-columns:1.25fr .85fr;
  opacity:0;transform:translateY(40px) scale(.96);
}
.lb-media{position:relative;background:#fff;display:grid;place-items:center;overflow:hidden;min-height:320px}
.lb-media::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset -60px 0 80px -60px rgba(10,13,38,.35)}
.lb-media img{width:100%;height:100%;object-fit:contain;padding:clamp(10px,2vw,28px)}
.lb-media .lb-count{position:absolute;left:22px;top:18px;font-family:Inter,system-ui,sans-serif;font-style:normal;font-size:14px;color:rgba(10,13,38,.45)}
.lb-body{padding:clamp(28px,3.4vw,52px);display:flex;flex-direction:column;overflow-y:auto}
.lb-body .eyebrow{margin-bottom:18px;font-size:19px}
.lb-body h3{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:clamp(30px,2.9vw,44px);line-height:1.05;letter-spacing:-.03em;margin:0 0 18px}
.lb-body .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.lb-body .chips li{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 12px}
.lb-body p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.7}
.lb-body .lb-credit{margin-top:16px;font-family:Inter,system-ui,sans-serif;font-style:normal;font-size:14.5px;color:rgba(154,160,192,.7)}
.lb-body .lb-actions{margin-top:auto;padding-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.lb-body .lb-actions .btn{padding:16px 26px}
.lb-close{
  position:absolute;top:16px;right:16px;z-index:2;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(10,13,38,.75);color:#fff;font-size:18px;display:grid;place-items:center;transition:.35s;backdrop-filter:blur(6px);
}
.lb-close:hover{background:var(--gold);color:var(--navy);transform:rotate(90deg)}
/* arrows live on the overlay, outside the card, at the viewport edges */
.lb-nav{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0}
.lb-arrow{
  pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);
  background:rgba(10,13,38,.55);color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center;transition:.35s;backdrop-filter:blur(6px);
}
.lb-arrow:hover{background:var(--gold);color:var(--navy);border-color:var(--gold);transform:translateY(-50%) scale(1.08)}
.lb-prev{left:20px}.lb-next{right:20px}
@media (max-width:900px){
  .lb-card{display:flex;flex-direction:column;max-height:calc(100dvh - 24px);overflow-y:auto}
  .lb-media{min-height:0;aspect-ratio:3/2;flex:none}
  .lb-body{overflow:visible;padding-bottom:20px}
  .lb{padding:12px 12px 84px}
  .lb-nav{inset:auto 16px 16px;pointer-events:auto;display:flex;justify-content:space-between}
  .lb-arrow{position:static;transform:none}
  .lb-arrow:hover{transform:none}
}
.rail-hint{display:flex;align-items:center;gap:14px;margin-top:6px;color:rgba(253,252,250,.4);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;position:relative}
.rail-hint::before{content:"";width:56px;height:1px;background:rgba(255,255,255,.25)}

/* ================= THREAD (typographic, no photo) ================= */
.thread{background:var(--cream);color:var(--navy);padding:clamp(96px,10vw,160px) 0}
.thread .eyebrow{color:var(--muted-dark);margin-bottom:30px}
.thread h2{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:clamp(44px,5.4vw,88px);line-height:1.02;letter-spacing:-.035em;margin:0;max-width:12ch}
.thread-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,100px);align-items:end;margin-bottom:clamp(56px,6vw,84px)}
.thread .lede{color:var(--muted-dark);font-size:18px;max-width:40ch;margin:0 0 26px}
.thread-quote{font-family:Inter,system-ui,sans-serif;font-style:normal;font-size:clamp(20px,1.7vw,26px);line-height:1.3;margin:0;padding-left:22px;border-left:2px solid;border-image:var(--grad-dark) 1;color:var(--navy)}
.thread-quote b{display:block;font-family:Inter;font-style:normal;font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dark);margin-top:12px}
.steps-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(10,13,38,.12)}
.step-card{padding:34px 26px 34px 0;border-right:1px solid rgba(10,13,38,.12);margin-right:26px;position:relative}
.step-card:last-child{border-right:0;margin-right:0}
.step-card .num{display:block;font-family:Inter,system-ui,sans-serif;font-style:normal;font-weight:600;font-size:30px;line-height:1;background:var(--grad-dark);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:26px}
.step-card h3{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:clamp(24px,2vw,32px);letter-spacing:-.015em;margin:0 0 10px}
.step-card .tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9a3a05;background:rgba(232,85,10,.14);padding:5px 11px;border-radius:999px;margin-bottom:16px}
.step-card p{margin:0;color:var(--muted-dark);font-size:15px;line-height:1.6}
@media (max-width:1100px){.steps-row{grid-template-columns:repeat(3,1fr)}.step-card:nth-child(3){border-right:0;margin-right:0}.step-card:nth-child(n+4){border-top:1px solid rgba(10,13,38,.12)}}
@media (max-width:900px){.thread-head{grid-template-columns:1fr;gap:26px;align-items:start}}
@media (max-width:640px){.steps-row{grid-template-columns:1fr}.step-card{border-right:0;margin-right:0;padding:26px 0;border-top:1px solid rgba(10,13,38,.12)}.step-card:first-child{border-top:0}.step-card .num{margin-bottom:12px}}

/* ================= MANIFESTO (typographic cards) ================= */
.mani{background:var(--cream);color:var(--navy);padding:0 0 clamp(96px,10vw,160px)}
.mani-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mani-card{
  position:relative;border-radius:22px;min-height:340px;padding:40px 36px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:#fff;border:1px solid rgba(10,13,38,.08);
  transition:transform .55s var(--ease),box-shadow .55s;
}
.mani-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px -28px rgba(10,13,38,.25)}
.mani-card .k{position:absolute;top:32px;left:36px;font-family:Inter,system-ui,sans-serif;font-style:normal;font-weight:600;font-size:19px;background:var(--grad-dark);-webkit-background-clip:text;background-clip:text;color:transparent}
.mani-card h3{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:clamp(24px,2vw,32px);line-height:1.15;letter-spacing:-.015em;margin:0 0 12px}
.mani-card p{margin:0;color:var(--muted-dark);font-size:15px;line-height:1.6}
.mani-card .row{margin-top:22px}
.mani-cta{background:var(--navy);color:#fff;border-color:transparent}
.mani-cta .k{background:var(--grad);-webkit-background-clip:text;background-clip:text}
@media (max-width:1000px){.mani-grid{grid-template-columns:1fr}.mani-card{min-height:0;padding-top:84px}}

/* ================= TESTIMONIALS ================= */
.quotes{background:var(--navy);padding:clamp(96px,10vw,160px) 0;position:relative;overflow:hidden}
.quotes::before{content:none}
.quotes .qmark{
  position:absolute;top:60px;right:6vw;font-family:Inter,system-ui,sans-serif;font-size:clamp(200px,26vw,420px);
  line-height:1;color:rgba(255,255,255,.04);pointer-events:none;user-select:none;
}
.quotes .eyebrow{color:var(--muted);margin-bottom:30px}
.g-badge{
  display:inline-flex;align-items:center;gap:14px;margin-bottom:52px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:14px 26px;font-size:14px;
  transition:background .35s,transform .45s var(--ease);
}
.g-badge:hover{background:rgba(255,255,255,.11);transform:translateY(-3px)}
.g-badge .fa-google{font-size:19px}
.g-badge b{font-size:17px}
.g-stars{color:var(--gold);font-size:12px;letter-spacing:2px}
.g-count{color:var(--muted);border-left:1px solid rgba(255,255,255,.18);padding-left:14px}
.q-stage{position:relative;min-height:340px}
@media (max-width:640px){.q-stage{min-height:560px}}
.q{
  position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),visibility .7s;
}
.q.on{opacity:1;visibility:visible;transform:none}
.q blockquote{
  font-family:Inter,system-ui,sans-serif;font-weight:300;font-size:clamp(24px,2.9vw,44px);
  line-height:1.26;letter-spacing:-.015em;margin:0 0 40px;max-width:40ch;
}
.q blockquote em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.q .who{display:flex;align-items:center;gap:18px}
.q .who .av{width:52px;height:52px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:19px;color:var(--navy)}
.q .who b{display:block;font-size:15px}
.q .who span{font-size:13px;color:var(--muted)}
.q-nav{display:flex;gap:12px;margin-top:56px;align-items:center}
.q-nav button{
  width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);
  background:none;color:#fff;font-size:17px;cursor:pointer;transition:.35s;
}
.q-nav button:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.q-dots{display:flex;gap:8px;align-items:center;margin-left:16px}
.q-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);transition:.4s}
.q-dots i.on{background:var(--gold);transform:scale(1.35)}

/* ================= SCROLL TO TOP ================= */
.to-top{
  position:fixed;right:26px;bottom:26px;z-index:150;
  width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;
  background:var(--grad);color:var(--navy);font-size:18px;
  box-shadow:0 14px 34px -10px rgba(255,204,51,.6);
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
  display:grid;place-items:center;
}
.to-top{background:conic-gradient(var(--gold) var(--p,0%),rgba(255,255,255,.14) 0);padding:3px}
.to-top i{width:100%;height:100%;border-radius:50%;background:var(--navy-2);display:grid;place-items:center;color:var(--gold)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{transform:translateY(-4px)}

/* ================= CTA (full-bleed image) ================= */
.cta{
  position:relative;color:#fff;text-align:center;
  padding:clamp(140px,15vw,230px) 0;overflow:hidden;
}
.cta-bg{position:absolute;inset:0;background:var(--navy);overflow:hidden}
.cta-bg::before{content:none}
.cta-bg::after{
  content:"GelFuzion";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;font-size:min(22vw,340px);letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);pointer-events:none;
}
.cform{
  margin:0 auto 44px;max-width:760px;text-align:left;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:26px;padding:34px;backdrop-filter:blur(10px);
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.cform label{display:grid;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cform input,.cform textarea{
  font:inherit;font-size:15.5px;color:#fff;background:rgba(10,13,38,.55);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:15px 17px;outline:0;transition:border-color .3s,box-shadow .3s;width:100%;
}
.cform input:focus,.cform textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,204,51,.18)}
.cform textarea{min-height:130px;resize:vertical}
.cform .full{grid-column:1/-1}
.cform .send{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cform .send small{color:var(--muted);font-size:13px}
@media (max-width:640px){.cform{grid-template-columns:1fr;padding:24px}}
.cta .wrap{position:relative;z-index:2}
.cta h2{
  font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(52px,7.2vw,118px);line-height:1;margin:0 0 32px;
}
.cta p{color:rgba(253,252,250,.75);font-size:18px;max-width:46ch;margin:0 auto 52px}
.cta .row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.cta .tel{margin-top:46px;font-family:Inter,system-ui,sans-serif;font-size:clamp(20px,2vw,26px);font-weight:600;color:rgba(253,252,250,.85)}
.cta .tel a:hover{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ================= FOOTER ================= */
footer{background:#070919;padding:84px 0 48px;font-size:14px;color:var(--muted)}
.f-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.08)}
.f-top .logo{font-size:28px;color:#fff}
.f-cols{display:flex;gap:clamp(40px,6vw,110px);flex-wrap:wrap}
.f-cols h4{color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 18px}
.f-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.f-cols a:hover{color:#fff}
/* glass bar under the footer columns */
.f-glass{
  margin-top:34px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 16px 14px 22px;border-radius:999px;
  background:linear-gradient(120deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px -30px rgba(0,0,0,.8);
  font-size:12.5px;color:rgba(253,252,250,.6);
}
.f-glass-l,.f-glass-r{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.f-mark{font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;font-size:16px;letter-spacing:-.03em;color:#fff}
.f-mark .gel{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.f-sep{width:1px;height:14px;background:rgba(255,255,255,.16)}
.f-loc i{color:var(--gold);margin-right:4px;font-size:11px}
.f-glass-r a{color:rgba(253,252,250,.7);padding:8px 12px;border-radius:999px;transition:.3s}
.f-glass-r a:hover{color:#fff;background:rgba(255,255,255,.08)}
.f-glass-r a i{margin-right:5px}
.f-up{width:38px;height:38px;padding:0!important;display:grid;place-items:center;background:var(--grad)!important;color:var(--navy)!important;font-size:13px}
.f-up:hover{transform:translateY(-2px)}
@media (max-width:760px){.f-glass{border-radius:22px;padding:16px 18px}.f-sep{display:none}.f-glass-l{gap:10px}}

/* ================= UTIL / MOTION ================= */
.js .fade{opacity:0;transform:translateY(40px)}
@media (max-width:1080px){
  .nav-links,.nav .btn-nav{display:none}
  .burger{display:block}
  /* full-screen takeover: navy panel revealed by a gradient wipe from the burger corner */
  .mob{
    position:fixed;inset:0;height:100dvh;overflow-y:auto;overscroll-behavior:contain;
    background:var(--navy);z-index:190;display:flex !important;flex-direction:column;
    padding:120px 28px 32px;
    clip-path:circle(0 at calc(100% - 44px) 46px);visibility:hidden;opacity:0;pointer-events:none;
    transition:clip-path .75s var(--ease),visibility 0s .75s,opacity 0s .75s;
  }
  .mob.open{clip-path:circle(150% at calc(100% - 44px) 46px);visibility:visible;opacity:1;pointer-events:auto;transition:clip-path .75s var(--ease),visibility 0s,opacity 0s}
  .mob::before{
    content:"Gel";position:absolute;right:-6vw;bottom:-6vh;font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;
    font-size:min(62vw,420px);line-height:1;letter-spacing:-.05em;pointer-events:none;
    background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.07;
  }
  .mob-links{display:flex;flex-direction:column;position:relative;z-index:1;margin:auto 0}
  .mob-links a{
    font-family:Inter,system-ui,sans-serif;font-size:clamp(36px,9.5vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.1;
    padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:baseline;gap:16px;
    opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease),transform .6s var(--ease);
  }
  .mob-links a i{font-style:normal;font-size:15px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;min-width:28px}
  .mob.open .mob-links a{opacity:1;transform:none}
  .mob.open .mob-links a:nth-child(1){transition-delay:.25s}.mob.open .mob-links a:nth-child(2){transition-delay:.32s}
  .mob.open .mob-links a:nth-child(3){transition-delay:.39s}.mob.open .mob-links a:nth-child(4){transition-delay:.46s}
  .mob-foot{position:relative;z-index:1;margin-top:36px;display:flex;flex-direction:column;gap:18px;opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease) .55s,transform .6s var(--ease) .55s}
  .mob.open .mob-foot{opacity:1;transform:none}
  .mob-foot .c{font-size:14px;color:var(--muted);display:grid;gap:6px}
  .mob-foot .c a{color:#fff}
  .mob-foot .btn{justify-content:center}
  body.lock{overflow:hidden}
  .stats-in{grid-template-columns:repeat(2,1fr);gap:28px;padding:52px 0}
  .caps-grid{grid-template-columns:1fr 1fr}
  .caps-head{grid-template-columns:1fr;gap:36px}
  .thread-grid{grid-template-columns:1fr;gap:44px}
  .thread-media{min-height:380px}
  .mani-grid{grid-template-columns:1fr}
  .mani-card{min-height:320px}
}
@media (max-width:640px){
  .caps-grid{grid-template-columns:1fr}
  .stats-in{grid-template-columns:1fr 1fr}
  .hero h1{font-size:clamp(36px,10.2vw,58px)}
  .hero .eyebrow{flex-direction:column;align-items:flex-start;gap:6px}
  .hero .eyebrow .n{font-size:10.5px;letter-spacing:.16em}
  .hero-tags{gap:12px 14px;font-size:15px;margin-bottom:38px}
  .g-badge{gap:10px;padding:12px 18px;font-size:13px}
  .g-stars{white-space:nowrap;letter-spacing:1px}
  .g-count{padding-left:10px}
  .work-head{flex-direction:column;align-items:flex-start;gap:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  body::after{display:none}
  .fade,.hero h1 .word > span{opacity:1!important;transform:none!important}
}

/* ================= SUBPAGE HERO (services, areas, portfolio, contact) ================= */
.page-hero{position:relative;overflow:hidden;padding:190px 0 96px;background:var(--navy)}
.page-hero::before{content:none}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .eyebrow{color:rgba(253,252,250,.85);margin-bottom:28px}
.page-hero h1{font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.035em;font-size:clamp(42px,6vw,96px);line-height:1.02;margin:0 0 26px;max-width:16ch}
.page-hero .lede{color:rgba(253,252,250,.75);font-size:clamp(17px,1.4vw,20px);max-width:56ch;margin:0 0 40px}
.page-hero .hero-cta{display:flex;gap:18px;flex-wrap:wrap}
.page-body{background:var(--cream);color:var(--navy);padding:clamp(88px,9vw,140px) 0}
.prose{max-width:68ch;font-size:17px;line-height:1.75;color:#2a2a3a}
.prose h2{font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;font-size:clamp(30px,3.4vw,48px);line-height:1.08;margin:0 0 20px}
.prose h3{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:clamp(22px,2vw,28px);margin:44px 0 12px}
.prose p{margin:0 0 20px}
.prose ul{padding-left:1.2em;margin:0 0 20px}
.prose a{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}

/* ================= NAV DROPDOWNS ================= */
.has-dd{position:relative;display:flex;align-items:center}
.has-dd > a{display:inline-flex;align-items:center}
.has-dd > a i{font-size:9px;margin-left:6px;opacity:.6;transition:transform .3s}
.has-dd:hover > a i,.has-dd:focus-within > a i{transform:rotate(180deg)}
.dd{position:absolute;top:100%;left:-24px;padding-top:18px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .35s var(--ease),visibility 0s .35s;z-index:5}
.has-dd:hover .dd,.has-dd:focus-within .dd{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .35s var(--ease),visibility 0s}
.dd-in{background:rgba(10,13,38,.94);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:2px;min-width:440px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.dd-sm .dd-in{min-width:340px}
.dd-in a{display:block;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:rgba(253,252,250,.8);white-space:nowrap}
.dd-in a::after{display:none}
.dd-in a:hover,.dd-in a[aria-current]{background:rgba(255,255,255,.07);color:#fff}
.dd-in a[aria-current]{color:var(--gold)}
.nav-links > a[aria-current]{color:#fff}
.nav-links > a[aria-current]::after{width:100%}
@media (max-width:1080px){
  .mob-groups{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative;z-index:1;margin-top:28px}
  .mob-groups .mob-h{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
  .mob-groups a{display:block;font-size:14px;color:rgba(253,252,250,.75);padding:5px 0;opacity:0;transition:opacity .5s .55s}
  .mob.open .mob-groups a{opacity:1}
  .mob{padding-top:104px}
  .mob-links a{font-size:clamp(30px,8vw,44px);padding:11px 0}
}

/* ================= SUBPAGE SECTIONS ================= */
.page-hero .hero-pills{display:flex;gap:14px;flex-wrap:wrap;margin-top:44px}
.page-hero .pill{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 18px;display:grid;gap:2px}
.page-hero .pill b{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:18px;letter-spacing:-.01em}
.page-hero .pill span{font-size:12px;color:var(--muted);letter-spacing:.04em}
.pg-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.pg-head h2{font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;font-size:clamp(34px,4.2vw,64px);line-height:1.04;margin:0}
.pg-head p{margin:0;color:var(--muted-dark);font-size:17px;max-width:46ch}
.pg-head .work-link{justify-self:end}
.is-navy .pg-head p{color:var(--muted)}
@media (max-width:900px){.pg-head{grid-template-columns:1fr;gap:18px}.pg-head .work-link{justify-self:start}}

.pg-intro{background:var(--cream);color:var(--navy);padding:clamp(80px,9vw,130px) 0}
.pg-intro-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,100px);align-items:start}
.pg-pull p{font-family:Inter,system-ui,sans-serif;font-style:normal;font-weight:400;font-size:clamp(24px,2.4vw,34px);line-height:1.25;letter-spacing:-.01em;margin:0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.1em}
.pg-intro .prose p:first-child{font-size:19px;color:var(--navy)}
@media (max-width:900px){.pg-intro-grid{grid-template-columns:1fr;gap:28px}}

.pg-cards{background:var(--cream-2);color:var(--navy);padding:clamp(88px,9vw,140px) 0}
.pg-cards .eyebrow{color:var(--muted-dark);margin-bottom:26px}
.card-grid{display:grid;gap:22px}
.card-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.card-grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:960px){.card-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.card-grid.cols-3,.card-grid.cols-4{grid-template-columns:1fr}}
.pcard{background:#fff;border-radius:22px;padding:38px 32px 40px;position:relative;border:1px solid rgba(10,13,38,.06);box-shadow:0 2px 10px rgba(10,13,38,.04);transition:transform .55s var(--ease),box-shadow .55s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 24px 48px -28px rgba(10,13,38,.25)}
.pcard .idx{display:block;font-family:Inter,system-ui,sans-serif;font-style:normal;font-size:14px;color:rgba(10,13,38,.35);margin-bottom:14px}
.pcard h3{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:clamp(20px,1.5vw,23px);letter-spacing:-.015em;line-height:1.2;margin:0 0 12px}
.pcard p{margin:0;font-size:15px;color:var(--muted-dark);line-height:1.66}

.pg-list{background:var(--cream);color:var(--navy);padding:clamp(88px,9vw,140px) 0}
.pg-list.is-navy{background:var(--navy);color:#fff}
.pg-list .eyebrow{color:var(--muted-dark);margin-bottom:26px}
.pg-list.is-navy .eyebrow{color:var(--muted)}
.check-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px 32px}
.check-grid li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid rgba(10,13,38,.1);font-size:16px;line-height:1.55;color:var(--muted-dark)}
.is-navy .check-grid li{border-color:rgba(255,255,255,.1);color:rgba(253,252,250,.75)}
.check-grid li b{color:inherit;font-weight:600}
.check-grid li b{color:var(--navy)}.is-navy .check-grid li b{color:#fff}
.check-grid i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--grad);color:var(--navy);display:grid;place-items:center;font-size:11px;margin-top:2px}

.pg-featured{background:var(--navy);padding:clamp(88px,9vw,140px) 0;position:relative;overflow:hidden}
.pg-featured::before{content:none}
.pg-featured .wrap{position:relative}
.pg-featured .eyebrow{color:var(--muted);margin-bottom:26px}
.pg-featured .pg-head h2{color:#fff}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat-grid .tile{width:auto}
.more-links{margin:34px 0 0;font-size:14px;color:var(--muted)}
.more-links a{color:#fff;border-bottom:1px solid rgba(255,204,51,.5)}
.more-links a:hover{color:var(--gold)}
@media (max-width:1000px){.feat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.feat-grid{grid-template-columns:1fr}}

.pg-areas{background:var(--cream-2);color:var(--navy);padding:clamp(80px,9vw,120px) 0}
.pg-areas-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.pg-areas .eyebrow{color:var(--muted-dark);margin-bottom:22px}
.pg-areas h2{font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;font-size:clamp(32px,3.6vw,52px);line-height:1.05;margin:0 0 18px}
.pg-areas p{margin:0;color:var(--muted-dark);font-size:16.5px;max-width:48ch}
.place-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.place-list li{display:flex;gap:12px;align-items:center;font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:20px;padding:12px 0;border-bottom:1px solid rgba(10,13,38,.1)}
.place-list i{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:15px}
@media (max-width:900px){.pg-areas-grid{grid-template-columns:1fr}}

.pg-faq{background:var(--cream);color:var(--navy);padding:clamp(88px,9vw,140px) 0}
.pg-faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,100px);align-items:start}
.pg-faq .eyebrow{color:var(--muted-dark);margin-bottom:22px}
.pg-faq h2{font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;font-size:clamp(32px,3.3vw,50px);line-height:1.04;margin:0 0 18px}
.pg-faq-head p{color:var(--muted-dark);margin:0;font-size:16px}
.pg-faq-head a{font-weight:600;color:var(--navy);border-bottom:2px solid var(--gold)}
.faq{border-bottom:1px solid rgba(10,13,38,.12)}
.faq:first-child{border-top:1px solid rgba(10,13,38,.12)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:24px 4px}
.faq summary::-webkit-details-marker{display:none}
.faq .num{font-family:Inter,system-ui,sans-serif;font-style:normal;font-weight:600;font-size:18px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;min-width:30px}
.faq .fq{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:clamp(19px,1.7vw,24px);letter-spacing:-.01em;line-height:1.25}
.faq .tog{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(10,13,38,.2);display:grid;place-items:center;font-size:12px;transition:.35s}
.faq[open] .tog{background:var(--navy);color:var(--gold);border-color:var(--navy);transform:rotate(45deg)}
.faq .a{padding:0 4px 26px 52px}
.faq .a p{margin:0;color:var(--muted-dark);font-size:16px;line-height:1.7;max-width:62ch}
@media (max-width:900px){.pg-faq-grid{grid-template-columns:1fr;gap:30px}.faq .a{padding-left:4px}}

.pg-reviews{background:var(--navy);padding:clamp(70px,8vw,110px) 0}
.pg-reviews-in{display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.pg-reviews .g-badge{margin:0 0 26px}
.pg-reviews-side{display:flex;flex-direction:column;align-items:flex-start}
.pg-reviews .q-nav{margin-top:0}
.q-stage-sm{min-height:250px}
.q-stage-sm blockquote{font-size:clamp(19px,1.9vw,27px);line-height:1.3;margin-bottom:24px;max-width:46ch}
.q-stage-sm .who .av{width:44px;height:44px;font-size:16px}
@media (max-width:800px){.pg-reviews-in{grid-template-columns:1fr}.q-stage-sm{min-height:380px}}
@media (max-width:480px){.q-stage-sm{min-height:460px}}

.pg-cta{position:relative;color:#fff;text-align:center;padding:clamp(110px,12vw,170px) 0;overflow:hidden;background:var(--navy)}
.pg-cta::before{content:none}
.pg-cta::after{content:"GelFuzion";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;font-size:min(22vw,340px);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);pointer-events:none}
.pg-cta .wrap{position:relative;z-index:2}
.pg-cta h2{font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.035em;font-size:clamp(40px,5.6vw,88px);line-height:1;margin:0 0 26px}
.pg-cta p{color:rgba(253,252,250,.75);font-size:18px;max-width:50ch;margin:0 auto 44px}
.pg-cta .row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

.pg-table{background:var(--cream);color:var(--navy);padding:clamp(88px,9vw,140px) 0}
.pg-table .eyebrow{color:var(--muted-dark);margin-bottom:26px}
.rate-table{background:#fff;border-radius:22px;border:1px solid rgba(10,13,38,.06);box-shadow:0 2px 10px rgba(10,13,38,.04);overflow:hidden}
.rate-table table{width:100%;border-collapse:collapse}
.rate-table th{text-align:left;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dark);padding:20px 28px;border-bottom:1px solid rgba(10,13,38,.08)}
.rate-table td{padding:24px 28px;border-bottom:1px solid rgba(10,13,38,.06);font-size:17px}
.rate-table td:nth-child(2){font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:28px;letter-spacing:-.03em}
.rate-table tr.hot td{background:rgba(255,204,51,.08)}
.rate-table .badge{display:inline-block;margin-left:12px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--grad);color:var(--navy);padding:5px 10px;border-radius:999px;vertical-align:middle}
@media (max-width:640px){.rate-table th,.rate-table td{padding:16px 16px}.rate-table td:nth-child(2){font-size:22px}}

/* ================= PORTFOLIO PAGE ================= */
.pf-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.pf-filters button{font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:12px 20px;border-radius:999px;border:1.5px solid rgba(255,255,255,.2);background:none;color:rgba(253,252,250,.75);cursor:pointer;transition:.3s}
.pf-filters button:hover{border-color:#fff;color:#fff}
.pf-filters button.on{background:var(--grad);color:var(--navy);border-color:transparent}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pf-grid .tile{width:auto}
.pf-grid .tile.hide{display:none}
@media (max-width:1000px){.pf-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pf-grid{grid-template-columns:1fr}}

/* ================= CONTACT PAGE ================= */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,90px);align-items:start}
.contact-grid .cform{margin:0;max-width:none}
.contact-side h3{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:24px;margin:0 0 12px}
.contact-side p{color:var(--muted);margin:0 0 26px;font-size:15.5px;line-height:1.7}
.contact-side .big{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:clamp(22px,2.2vw,30px);color:#fff;display:block;margin-bottom:8px}
.contact-side .big:hover{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact-side ul{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px}
.contact-side li{display:flex;gap:12px;align-items:flex-start;color:rgba(253,252,250,.8);font-size:15px}
.contact-side li i{color:var(--gold);margin-top:4px}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* ================= 404 ================= */
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:160px 0 100px;background:var(--navy)}
.nf .big{font-family:Inter,system-ui,sans-serif;font-style:normal;font-weight:600;font-size:clamp(90px,18vw,220px);line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-intro .eyebrow{color:var(--muted-dark);margin-bottom:18px}
.pg-h2{font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;font-size:clamp(32px,3.6vw,52px);line-height:1.05;margin:0}

/* ================= PHONE-WIDTH FIXES (from the automated sweep) ================= */
.rate-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rate-table table{min-width:520px}
.pg-intro-grid > *,.pg-faq-grid > *,.pg-areas-grid > *,.contact-grid > *,.pg-head > *,.card-grid > *{min-width:0}
@media (max-width:640px){
  .btn{white-space:normal;text-align:center;line-height:1.35;padding:16px 24px}
  .hero-cta .btn,.pg-cta .row .btn,.cta .row .btn{width:100%;justify-content:center}
  .pg-cta h2,.cta h2{font-size:clamp(30px,8.6vw,38px);letter-spacing:-.015em}
  .page-hero h1{font-size:clamp(32px,9vw,40px)}
  .pg-head h2,.pg-faq h2,.pg-areas h2,.pg-h2{font-size:clamp(28px,8vw,36px)}
  .thread h2,.caps h2,.sec-title{font-size:clamp(32px,9vw,42px)}
  /* rate table stacks into cards on phones */
  .rate-table table{min-width:0}
  .rate-table thead{display:none}
  .rate-table tr{display:block;padding:14px 18px;border-bottom:1px solid rgba(10,13,38,.08)}
  .rate-table td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:6px 0;border:0;font-size:15px}
  .rate-table td::before{content:attr(data-label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark);flex:none}
  .rate-table td:nth-child(2){font-size:24px}
  .rate-table td:first-child{display:block;font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.01em;padding:2px 0 10px;border-bottom:1px dashed rgba(10,13,38,.12);margin-bottom:6px}
  .rate-table td:first-child::before{display:none}
  .rate-table .badge{margin-left:8px;vertical-align:2px}
  .page-hero .hero-pills{gap:10px}
  .page-hero .pill{padding:12px 14px}
}

/* ================= GRADIENT TEXT ON LIGHT BACKGROUNDS =================
   Same bright orange-to-yellow as the navy sections, no outline. */
:root{--grad-dark:var(--grad);--grad-dark-anim:var(--grad)}
.stats .grad-i,.caps .grad-i,.thread .grad-i,.pg-intro .grad-i,.pg-cards .grad-i,.pg-list:not(.is-navy) .grad-i,.pg-faq .grad-i,.pg-areas .grad-i,.pg-table .grad-i,.mani-card:not(.mani-cta) .grad-i{
  background-image:var(--grad);
}
.pg-pull p,.step .num,.step-card .num,.faq .num,.place-list i,.prose a,.mani-card:not(.mani-cta) .k{
  background-image:var(--grad);
}
.pcard .idx{color:rgba(10,13,38,.55)}
.step h3 .tag{background:rgba(232,85,10,.14);color:#9a3a05}
.pg-faq-head a{border-bottom-color:#e8550a}

/* ================= STACK MARQUEE ================= */
.stack{margin-top:clamp(56px,6vw,90px);padding-top:34px;border-top:1px solid rgba(10,13,38,.1);overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.stack-track{display:flex;gap:14px;width:max-content;animation:stack 48s linear infinite}
.stack-track span{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);background:#fff;border:1px solid rgba(10,13,38,.08);border-radius:999px;padding:11px 18px}
@keyframes stack{to{transform:translateX(-50%)}}
.stack:hover .stack-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.stack-track{animation:none;flex-wrap:wrap;width:auto}}

/* ================= AI-READY STRIP ================= */
.ready{background:var(--navy);color:#fff;padding:clamp(96px,10vw,160px) 0;position:relative;overflow:hidden}
.ready::before{content:none}
.ready .wrap{position:relative}
.ready-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(48px,7vw,120px);align-items:start}
.ready .eyebrow{color:var(--muted);margin-bottom:30px}
.ready h2{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:clamp(40px,4.8vw,72px);line-height:1.04;letter-spacing:-.035em;margin:0 0 24px}
.ready .lede{color:rgba(253,252,250,.75);font-size:18px;line-height:1.65;max-width:46ch;margin:0 0 36px}
.ready-note{border-left:2px solid;border-image:var(--grad) 1;padding:6px 0 6px 22px}
.ready-note p{font-family:Inter,system-ui,sans-serif;font-style:normal;font-size:clamp(19px,1.6vw,23px);line-height:1.35;margin:0 0 14px;color:#fff}
.ready-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ready-list li{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:30px 0;border-top:1px solid rgba(255,255,255,.1)}
.ready-list li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.ready-list .rn{font-family:Inter,system-ui,sans-serif;font-style:normal;font-weight:600;font-size:26px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;min-width:44px;line-height:1.3}
.ready-list h3{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.015em;margin:0 0 8px}
.ready-list p{margin:0;color:rgba(253,252,250,.68);font-size:15.5px;line-height:1.65;max-width:52ch}
@media (max-width:1000px){.ready-grid{grid-template-columns:1fr;gap:40px}}

/* ================= PNW LINE ART BACKGROUNDS =================
   Monoline landscapes sit behind sections as a texture layer: gold on navy, navy on cream.
   Opacity and a fade keep the copy readable; the art is decorative, so it is aria-hidden. */
.art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.art img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
.art::after{content:"";position:absolute;inset:0}
/* hero: full landscape, lines at ~55%, dark fade where the headline sits */
.hero .art img{opacity:.55;object-position:center 70%}
.hero .art::after{background:linear-gradient(90deg,rgba(10,13,38,.92) 0%,rgba(10,13,38,.62) 45%,rgba(10,13,38,.15) 100%),linear-gradient(rgba(10,13,38,.55),rgba(10,13,38,0) 35%,rgba(10,13,38,.35) 85%,var(--navy) 100%)}
/* subpage hero: contours, quieter */
.page-hero .art img{opacity:.28;object-position:center}
.page-hero .art::after{background:linear-gradient(90deg,rgba(10,13,38,.85),rgba(10,13,38,.3) 60%,rgba(10,13,38,.1)),linear-gradient(rgba(10,13,38,.2),rgba(10,13,38,0) 40%,var(--navy))}
/* ai-ready and reviews: contours very faint */
.ready .art img,.pg-reviews .art img,.quotes .art img{opacity:.16}
.ready .art::after,.pg-reviews .art::after,.quotes .art::after{background:linear-gradient(rgba(10,13,38,.4),rgba(10,13,38,0) 30%,rgba(10,13,38,0) 70%,rgba(10,13,38,.6))}
/* closing CTA: coast, lines at ~40% behind the headline */
.cta .art img,.pg-cta .art img{opacity:.42;object-position:center bottom}
.cta .art::after,.pg-cta .art::after{background:linear-gradient(rgba(10,13,38,.75),rgba(10,13,38,.25) 40%,rgba(10,13,38,.15) 70%,rgba(10,13,38,.85))}
/* cream sections: forest, navy lines very faint */
.thread .art img,.pg-faq .art img,.pg-intro .art img{opacity:.09;object-position:center top}
.thread .art::after,.pg-faq .art::after,.pg-intro .art::after{background:linear-gradient(rgba(246,242,236,.2),rgba(246,242,236,0) 30%,rgba(246,242,236,.7) 100%)}
/* sections that get art need positioning + content above it */
.hero,.page-hero,.ready,.pg-reviews,.quotes,.cta,.pg-cta,.thread,.pg-faq,.pg-intro{position:relative}
.hero .wrap,.page-hero .wrap,.ready .wrap,.pg-reviews .wrap,.quotes .wrap,.cta .wrap,.pg-cta .wrap,.thread .wrap,.pg-faq .wrap,.pg-intro .wrap{position:relative;z-index:1}
/* the old thumbnail wall is retired in favour of the landscape */
.hero .hero-bg .wall{display:none}
.cta-bg::after,.pg-cta::after{display:none}
.qmark{display:none}
@media (max-width:640px){.hero .art img{opacity:.4;object-position:38% 75%}.cta .art img,.pg-cta .art img{opacity:.3}}

/* ================= QUIET MODE ================= */
.ready,.quotes,.pg-reviews,.pg-featured{border-top:1px solid rgba(255,255,255,.06)}
.nav.solid{background:rgba(10,13,38,.72);backdrop-filter:blur(22px) saturate(140%)}
.hero .art img{opacity:.62}
.work .art img{opacity:.3;object-position:center 40%}
.work .art::after{background:linear-gradient(rgba(10,13,38,.7),rgba(10,13,38,.2) 40%,rgba(10,13,38,.55) 100%)}
.work .wrap,.work .rail-wrap,.work .hint-row{position:relative;z-index:1}

/* ================= HERO: copy left, transparent stats column right ================= */
.hero{padding:170px 0 110px}
.hero > .wrap{min-height:0;padding-bottom:0}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(40px,6vw,110px);align-items:center;min-height:calc(100svh - 280px)}
.hero-stats{position:relative;z-index:3;padding-left:clamp(28px,3vw,44px);border-left:1px solid rgba(255,255,255,.16);align-self:center}
.hs{padding:18px 0}
.hs + .hs{border-top:1px solid rgba(255,255,255,.08)}
.hs b{display:block;font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:clamp(20px,1.6vw,25px);letter-spacing:-.015em;line-height:1.15;color:#fff;white-space:nowrap}
.hs > span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;letter-spacing:.02em;white-space:nowrap}
.caps{padding-top:clamp(88px,9vw,140px)}
@media (max-width:1000px){
  .hero{padding-bottom:80px}
  .hero-grid{grid-template-columns:1fr;gap:44px;min-height:0}
  .hero-stats{border-left:0;padding-left:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;border-top:1px solid rgba(255,255,255,.12)}
  .hs + .hs{border-top:0}
  .hs{border-bottom:1px solid rgba(255,255,255,.08)}
  .hs:last-child{grid-column:1/-1}
}
@media (max-width:640px){.hs b{font-size:19px}.hs > span{white-space:normal}}

/* ================= OUTLINED CAPABILITY CARDS ================= */
.cap{background:transparent;border:1px solid rgba(10,13,38,.16);box-shadow:none;padding:40px 30px 42px}
.cap:hover{transform:translateY(-6px);box-shadow:none;border-color:rgba(10,13,38,.4);background:rgba(255,255,255,.35)}
.cap .ic{background:var(--grad);border:0}
.cap .ic i{background:none;-webkit-background-clip:initial;background-clip:initial;color:#fff;-webkit-text-fill-color:#fff}
.cap:hover .ic{background:var(--grad);transform:translateY(-2px)}
.cap:hover .ic i{background:none;color:#fff;-webkit-text-fill-color:#fff}
.cap li{background:transparent;border:1px solid rgba(10,13,38,.14)}
.cap .idx{color:rgba(10,13,38,.5)}
.stack-track span{background:transparent;border-color:rgba(10,13,38,.16)}
.hero{overflow:visible;z-index:2}
.hero .art{border-radius:0}
.hero{overflow:hidden}
/* capabilities: forest line art, faint, cards sit on top */
.caps{position:relative}
.caps .wrap{position:relative;z-index:1}
.caps .art img{opacity:.09;object-position:center 30%}
.caps .art::after{background:linear-gradient(rgba(246,242,236,.55),rgba(246,242,236,0) 35%,rgba(246,242,236,.35) 100%)}
.cap{background:rgba(246,242,236,.55);backdrop-filter:blur(2px)}
/* per-section tuning for the interim colorways */
.thread .art img{opacity:.1;object-position:center bottom}
.quotes .art img{opacity:.18;object-position:left center}

/* ================= LIVING LINE ART ================= */
.art .scene{position:absolute;pointer-events:none}          /* sized by site.js to the rendered image rect */
.art .layer{position:absolute;display:block;height:auto}
/* eagle: enters from off the right edge, swoops down through the sky, glides out past the left edge, then pauses before coming round again.
   The layer sits at its drawn position (about 70% across); the keyframes are relative to that. */
.layer.swoop{animation:swoop 34s linear infinite;transform-origin:50% 55%;will-change:transform}
@keyframes swoop{
  0.00% {transform:translate(280.0%,-160.0%) rotate(-2.8deg) scale(0.720)}
  3.00% {transform:translate(244.6%,-154.5%) rotate(-3.0deg) scale(0.760)}
  6.00% {transform:translate(209.2%,-148.5%) rotate(-3.3deg) scale(0.799)}
  9.00% {transform:translate(173.8%,-141.6%) rotate(-3.9deg) scale(0.837)}
  12.00% {transform:translate(138.5%,-133.5%) rotate(-4.6deg) scale(0.873)}
  15.00% {transform:translate(103.1%,-123.9%) rotate(-5.4deg) scale(0.907)}
  18.00% {transform:translate(67.7%,-112.6%) rotate(-6.3deg) scale(0.939)}
  21.00% {transform:translate(32.3%,-99.8%) rotate(-7.0deg) scale(0.967)}
  24.00% {transform:translate(-3.1%,-85.6%) rotate(-7.7deg) scale(0.992)}
  27.00% {transform:translate(-38.5%,-70.4%) rotate(-8.1deg) scale(1.012)}
  30.00% {transform:translate(-73.8%,-54.6%) rotate(-8.3deg) scale(1.029)}
  33.00% {transform:translate(-109.2%,-38.8%) rotate(-8.1deg) scale(1.040)}
  36.00% {transform:translate(-144.6%,-23.7%) rotate(-7.5deg) scale(1.048)}
  39.00% {transform:translate(-180.0%,-10.0%) rotate(-6.6deg) scale(1.050)}
  42.00% {transform:translate(-215.4%,1.5%) rotate(-5.3deg) scale(1.048)}
  45.00% {transform:translate(-250.8%,10.0%) rotate(-3.6deg) scale(1.040)}
  48.00% {transform:translate(-286.2%,15.1%) rotate(-1.6deg) scale(1.029)}
  51.00% {transform:translate(-321.5%,16.0%) rotate(0.6deg) scale(1.012)}
  54.00% {transform:translate(-356.9%,12.5%) rotate(3.0deg) scale(0.992)}
  57.00% {transform:translate(-392.3%,4.4%) rotate(5.5deg) scale(0.967)}
  60.00% {transform:translate(-427.7%,-8.4%) rotate(7.8deg) scale(0.939)}
  63.00% {transform:translate(-463.1%,-25.7%) rotate(10.1deg) scale(0.907)}
  66.00% {transform:translate(-498.5%,-47.1%) rotate(12.1deg) scale(0.873)}
  69.00% {transform:translate(-533.8%,-72.0%) rotate(13.8deg) scale(0.837)}
  72.00% {transform:translate(-569.2%,-99.7%) rotate(14.0deg) scale(0.799)}
  75.00% {transform:translate(-604.6%,-129.4%) rotate(14.0deg) scale(0.760)}
  78.00% {transform:translate(-640.0%,-160.0%) rotate(14.0deg) scale(0.720)}
  100% {transform:translate(-640.0%,-160.0%) rotate(14.0deg) scale(0.720)}
}
/* hawk over the Palouse: a smaller, quicker pass from the left, dipping toward the hills and lifting out on the right */
.layer.swoop-hawk{animation:swoopHawk 28s linear infinite;transform-origin:50% 50%;will-change:transform}
@keyframes swoopHawk{
  0.00% {transform:translate(-1700.0%,-260.0%) rotate(2.4deg) scale(0.720)}
  3.15% {transform:translate(-1615.4%,-252.3%) rotate(2.5deg) scale(0.754)}
  6.31% {transform:translate(-1530.8%,-243.9%) rotate(2.8deg) scale(0.787)}
  9.46% {transform:translate(-1446.2%,-234.3%) rotate(3.3deg) scale(0.819)}
  12.62% {transform:translate(-1361.5%,-222.9%) rotate(3.9deg) scale(0.850)}
  15.77% {transform:translate(-1276.9%,-209.4%) rotate(4.6deg) scale(0.879)}
  18.92% {transform:translate(-1192.3%,-193.7%) rotate(5.3deg) scale(0.906)}
  22.08% {transform:translate(-1107.7%,-175.8%) rotate(5.9deg) scale(0.930)}
  25.23% {transform:translate(-1023.1%,-155.9%) rotate(6.5deg) scale(0.950)}
  28.38% {transform:translate(-938.5%,-134.5%) rotate(6.8deg) scale(0.968)}
  31.54% {transform:translate(-853.8%,-112.4%) rotate(7.0deg) scale(0.982)}
  34.69% {transform:translate(-769.2%,-90.3%) rotate(6.8deg) scale(0.992)}
  37.85% {transform:translate(-684.6%,-69.1%) rotate(6.3deg) scale(0.998)}
  41.00% {transform:translate(-600.0%,-50.0%) rotate(5.5deg) scale(1.000)}
  44.15% {transform:translate(-515.4%,-33.9%) rotate(4.4deg) scale(0.998)}
  47.31% {transform:translate(-430.8%,-21.9%) rotate(3.0deg) scale(0.992)}
  50.46% {transform:translate(-346.2%,-14.9%) rotate(1.3deg) scale(0.982)}
  53.62% {transform:translate(-261.5%,-13.6%) rotate(-0.5deg) scale(0.968)}
  56.77% {transform:translate(-176.9%,-18.4%) rotate(-2.5deg) scale(0.950)}
  59.92% {transform:translate(-92.3%,-29.8%) rotate(-4.6deg) scale(0.930)}
  63.08% {transform:translate(-7.7%,-47.8%) rotate(-6.6deg) scale(0.906)}
  66.23% {transform:translate(76.9%,-72.0%) rotate(-8.5deg) scale(0.879)}
  69.38% {transform:translate(161.5%,-101.9%) rotate(-10.2deg) scale(0.850)}
  72.54% {transform:translate(246.2%,-136.8%) rotate(-11.6deg) scale(0.819)}
  75.69% {transform:translate(330.8%,-175.6%) rotate(-12.6deg) scale(0.787)}
  78.85% {transform:translate(415.4%,-217.1%) rotate(-13.2deg) scale(0.754)}
  82.00% {transform:translate(500.0%,-260.0%) rotate(-13.5deg) scale(0.720)}
  100% {transform:translate(500.0%,-260.0%) rotate(-13.5deg) scale(0.720)}
}
.thread .art .layer{opacity:.1}
/* sail: drifts across the river with a little heel */
.layer.sail{animation:drift 38s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes drift{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(90%,-6%) rotate(2deg)}100%{transform:translate(180%,2%) rotate(-1.5deg)}}
/* falls: a brightness wave travelling down the water */
.layer.flow{
  -webkit-mask-image:repeating-linear-gradient(180deg,rgba(0,0,0,.15) 0 9%,#000 13%,rgba(0,0,0,.15) 17%);mask-image:repeating-linear-gradient(180deg,rgba(0,0,0,.15) 0 9%,#000 13%,rgba(0,0,0,.15) 17%);
  -webkit-mask-size:100% 220%;mask-size:100% 220%;animation:flow 22s linear infinite;mix-blend-mode:screen
}
@keyframes flow{from{-webkit-mask-position:0 220%;mask-position:0 220%}to{-webkit-mask-position:0 0;mask-position:0 0}}
/* layers inherit the section's art opacity */
.hero .art .layer{opacity:.62}.quotes .art .layer{opacity:.18}.quotes .art .layer.flow{opacity:.34}
@media (prefers-reduced-motion:reduce){.layer{animation:none!important}}

/* gulls over the coast: three slow, seamless circling glides */
.layer.gull-a{animation:gullA 44s linear infinite}
.layer.gull-b{animation:gullB 36s linear infinite}
.layer.gull-c{animation:gullC 52s linear infinite}
@keyframes gullA{
  0.0% {transform:translate(0.0%,0.0%) rotate(-5.2deg)}
  2.5% {transform:translate(40.7%,27.8%) rotate(-5.1deg)}
  5.0% {transform:translate(80.3%,52.9%) rotate(-4.9deg)}
  7.5% {transform:translate(118.0%,72.8%) rotate(-4.6deg)}
  10.0% {transform:translate(152.8%,85.6%) rotate(-4.2deg)}
  12.5% {transform:translate(183.8%,90.0%) rotate(-3.7deg)}
  15.0% {transform:translate(210.3%,85.6%) rotate(-3.1deg)}
  17.5% {transform:translate(231.7%,72.8%) rotate(-2.4deg)}
  20.0% {transform:translate(247.3%,52.9%) rotate(-1.6deg)}
  22.5% {transform:translate(256.8%,27.8%) rotate(-0.8deg)}
  25.0% {transform:translate(260.0%,0.0%) rotate(-0.0deg)}
  27.5% {transform:translate(256.8%,-27.8%) rotate(0.8deg)}
  30.0% {transform:translate(247.3%,-52.9%) rotate(1.6deg)}
  32.5% {transform:translate(231.7%,-72.8%) rotate(2.4deg)}
  35.0% {transform:translate(210.3%,-85.6%) rotate(3.1deg)}
  37.5% {transform:translate(183.8%,-90.0%) rotate(3.7deg)}
  40.0% {transform:translate(152.8%,-85.6%) rotate(4.2deg)}
  42.5% {transform:translate(118.0%,-72.8%) rotate(4.6deg)}
  45.0% {transform:translate(80.3%,-52.9%) rotate(4.9deg)}
  47.5% {transform:translate(40.7%,-27.8%) rotate(5.1deg)}
  50.0% {transform:translate(0.0%,-0.0%) rotate(5.2deg)}
  52.5% {transform:translate(-40.7%,27.8%) rotate(5.1deg)}
  55.0% {transform:translate(-80.3%,52.9%) rotate(4.9deg)}
  57.5% {transform:translate(-118.0%,72.8%) rotate(4.6deg)}
  60.0% {transform:translate(-152.8%,85.6%) rotate(4.2deg)}
  62.5% {transform:translate(-183.8%,90.0%) rotate(3.7deg)}
  65.0% {transform:translate(-210.3%,85.6%) rotate(3.1deg)}
  67.5% {transform:translate(-231.7%,72.8%) rotate(2.4deg)}
  70.0% {transform:translate(-247.3%,52.9%) rotate(1.6deg)}
  72.5% {transform:translate(-256.8%,27.8%) rotate(0.8deg)}
  75.0% {transform:translate(-260.0%,0.0%) rotate(0.0deg)}
  77.5% {transform:translate(-256.8%,-27.8%) rotate(-0.8deg)}
  80.0% {transform:translate(-247.3%,-52.9%) rotate(-1.6deg)}
  82.5% {transform:translate(-231.7%,-72.8%) rotate(-2.4deg)}
  85.0% {transform:translate(-210.3%,-85.6%) rotate(-3.1deg)}
  87.5% {transform:translate(-183.8%,-90.0%) rotate(-3.7deg)}
  90.0% {transform:translate(-152.8%,-85.6%) rotate(-4.2deg)}
  92.5% {transform:translate(-118.0%,-72.8%) rotate(-4.6deg)}
  95.0% {transform:translate(-80.3%,-52.9%) rotate(-4.9deg)}
  97.5% {transform:translate(-40.7%,-27.8%) rotate(-5.1deg)}
  100.0% {transform:translate(-0.0%,-0.0%) rotate(-5.2deg)}
}
@keyframes gullB{
  0.0% {transform:translate(179.9%,0.0%) rotate(0.1deg)}
  2.5% {transform:translate(176.9%,21.6%) rotate(0.7deg)}
  5.0% {transform:translate(169.5%,41.1%) rotate(1.2deg)}
  7.5% {transform:translate(157.9%,56.6%) rotate(1.7deg)}
  10.0% {transform:translate(142.5%,66.6%) rotate(2.2deg)}
  12.5% {transform:translate(123.5%,70.0%) rotate(2.6deg)}
  15.0% {transform:translate(101.5%,66.6%) rotate(3.0deg)}
  17.5% {transform:translate(77.0%,56.6%) rotate(3.3deg)}
  20.0% {transform:translate(50.6%,41.1%) rotate(3.5deg)}
  22.5% {transform:translate(23.0%,21.6%) rotate(3.6deg)}
  25.0% {transform:translate(-5.3%,0.0%) rotate(3.6deg)}
  27.5% {transform:translate(-33.3%,-21.6%) rotate(3.5deg)}
  30.0% {transform:translate(-60.6%,-41.1%) rotate(3.4deg)}
  32.5% {transform:translate(-86.4%,-56.6%) rotate(3.2deg)}
  35.0% {transform:translate(-110.0%,-66.6%) rotate(2.8deg)}
  37.5% {transform:translate(-130.9%,-70.0%) rotate(2.5deg)}
  40.0% {transform:translate(-148.7%,-66.6%) rotate(2.0deg)}
  42.5% {transform:translate(-162.7%,-56.6%) rotate(1.5deg)}
  45.0% {transform:translate(-172.7%,-41.1%) rotate(1.0deg)}
  47.5% {transform:translate(-178.5%,-21.6%) rotate(0.5deg)}
  50.0% {transform:translate(-179.9%,-0.0%) rotate(-0.1deg)}
  52.5% {transform:translate(-176.9%,21.6%) rotate(-0.7deg)}
  55.0% {transform:translate(-169.5%,41.1%) rotate(-1.2deg)}
  57.5% {transform:translate(-157.9%,56.6%) rotate(-1.7deg)}
  60.0% {transform:translate(-142.5%,66.6%) rotate(-2.2deg)}
  62.5% {transform:translate(-123.5%,70.0%) rotate(-2.6deg)}
  65.0% {transform:translate(-101.5%,66.6%) rotate(-3.0deg)}
  67.5% {transform:translate(-77.0%,56.6%) rotate(-3.3deg)}
  70.0% {transform:translate(-50.6%,41.1%) rotate(-3.5deg)}
  72.5% {transform:translate(-23.0%,21.6%) rotate(-3.6deg)}
  75.0% {transform:translate(5.3%,0.0%) rotate(-3.6deg)}
  77.5% {transform:translate(33.3%,-21.6%) rotate(-3.5deg)}
  80.0% {transform:translate(60.6%,-41.1%) rotate(-3.4deg)}
  82.5% {transform:translate(86.4%,-56.6%) rotate(-3.2deg)}
  85.0% {transform:translate(110.0%,-66.6%) rotate(-2.8deg)}
  87.5% {transform:translate(130.9%,-70.0%) rotate(-2.5deg)}
  90.0% {transform:translate(148.7%,-66.6%) rotate(-2.0deg)}
  92.5% {transform:translate(162.7%,-56.6%) rotate(-1.5deg)}
  95.0% {transform:translate(172.7%,-41.1%) rotate(-1.0deg)}
  97.5% {transform:translate(178.5%,-21.6%) rotate(-0.5deg)}
  100.0% {transform:translate(179.9%,-0.0%) rotate(0.1deg)}
}
@keyframes gullC{
  0.0% {transform:translate(13.3%,0.0%) rotate(6.0deg)}
  2.5% {transform:translate(-36.9%,34.0%) rotate(6.0deg)}
  5.0% {transform:translate(-86.1%,64.7%) rotate(6.0deg)}
  7.5% {transform:translate(-133.3%,89.0%) rotate(5.8deg)}
  10.0% {transform:translate(-177.2%,104.6%) rotate(5.3deg)}
  12.5% {transform:translate(-216.7%,110.0%) rotate(4.7deg)}
  15.0% {transform:translate(-250.8%,104.6%) rotate(4.0deg)}
  17.5% {transform:translate(-278.8%,89.0%) rotate(3.1deg)}
  20.0% {transform:translate(-300.0%,64.7%) rotate(2.2deg)}
  22.5% {transform:translate(-313.7%,34.0%) rotate(1.3deg)}
  25.0% {transform:translate(-319.7%,0.0%) rotate(0.3deg)}
  27.5% {transform:translate(-317.9%,-34.0%) rotate(-0.7deg)}
  30.0% {transform:translate(-308.2%,-64.7%) rotate(-1.7deg)}
  32.5% {transform:translate(-290.9%,-89.0%) rotate(-2.7deg)}
  35.0% {transform:translate(-266.5%,-104.6%) rotate(-3.5deg)}
  37.5% {transform:translate(-235.5%,-110.0%) rotate(-4.3deg)}
  40.0% {transform:translate(-198.7%,-104.6%) rotate(-5.0deg)}
  42.5% {transform:translate(-157.0%,-89.0%) rotate(-5.6deg)}
  45.0% {transform:translate(-111.5%,-64.7%) rotate(-6.0deg)}
  47.5% {transform:translate(-63.2%,-34.0%) rotate(-6.0deg)}
  50.0% {transform:translate(-13.3%,-0.0%) rotate(-6.0deg)}
  52.5% {transform:translate(36.9%,34.0%) rotate(-6.0deg)}
  55.0% {transform:translate(86.1%,64.7%) rotate(-6.0deg)}
  57.5% {transform:translate(133.3%,89.0%) rotate(-5.8deg)}
  60.0% {transform:translate(177.2%,104.6%) rotate(-5.3deg)}
  62.5% {transform:translate(216.7%,110.0%) rotate(-4.7deg)}
  65.0% {transform:translate(250.8%,104.6%) rotate(-4.0deg)}
  67.5% {transform:translate(278.8%,89.0%) rotate(-3.1deg)}
  70.0% {transform:translate(300.0%,64.7%) rotate(-2.2deg)}
  72.5% {transform:translate(313.7%,34.0%) rotate(-1.3deg)}
  75.0% {transform:translate(319.7%,0.0%) rotate(-0.3deg)}
  77.5% {transform:translate(317.9%,-34.0%) rotate(0.7deg)}
  80.0% {transform:translate(308.2%,-64.7%) rotate(1.7deg)}
  82.5% {transform:translate(290.9%,-89.0%) rotate(2.7deg)}
  85.0% {transform:translate(266.5%,-104.6%) rotate(3.5deg)}
  87.5% {transform:translate(235.5%,-110.0%) rotate(4.3deg)}
  90.0% {transform:translate(198.7%,-104.6%) rotate(5.0deg)}
  92.5% {transform:translate(157.0%,-89.0%) rotate(5.6deg)}
  95.0% {transform:translate(111.5%,-64.7%) rotate(6.0deg)}
  97.5% {transform:translate(63.2%,-34.0%) rotate(6.0deg)}
  100.0% {transform:translate(13.3%,-0.0%) rotate(6.0deg)}
}
.cta .art .layer{opacity:.42}

/* ================= LINE ART BRIGHTNESS PASS (about +40% across the board) ================= */
.hero .art img,.hero .art .layer{opacity:.85}
.page-hero .art img{opacity:.42}
.ready .art img,.pg-reviews .art img{opacity:.26}
.quotes .art img,.quotes .art .layer{opacity:.3}.quotes .art .layer.flow{opacity:.55}
.work .art img{opacity:.42}
.cta .art img,.pg-cta .art img,.cta .art .layer{opacity:.6}
.caps .art img{opacity:.16}
.thread .art img,.thread .art .layer{opacity:.17}
.pg-faq .art img,.pg-intro .art img{opacity:.15}
/* the fades over the art were tuned for the dimmer setting; ease them back so the lines show through */
.hero .art::after{background:linear-gradient(90deg,rgba(10,13,38,.86) 0%,rgba(10,13,38,.5) 45%,rgba(10,13,38,.08) 100%),linear-gradient(rgba(10,13,38,.45),rgba(10,13,38,0) 35%,rgba(10,13,38,.25) 85%,var(--navy) 100%)}
.page-hero .art::after{background:linear-gradient(90deg,rgba(10,13,38,.78),rgba(10,13,38,.2) 60%,rgba(10,13,38,.05)),linear-gradient(rgba(10,13,38,.15),rgba(10,13,38,0) 40%,var(--navy))}
.cta .art::after,.pg-cta .art::after{background:linear-gradient(rgba(10,13,38,.65),rgba(10,13,38,.15) 40%,rgba(10,13,38,.05) 70%,rgba(10,13,38,.8))}
@media (max-width:640px){.hero .art img,.hero .art .layer{opacity:.6}.cta .art img,.pg-cta .art img,.cta .art .layer{opacity:.45}}

/* form states + honeypot */
.cform .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cform.sending .btn{opacity:.6;pointer-events:none}
.cform .form-ok{grid-column:1/-1;background:rgba(255,210,63,.12);border:1px solid rgba(255,210,63,.35);border-radius:14px;padding:16px 18px;color:#fff;font-size:15px}
.cform .form-note.err{color:#ffb3a0}
/* capabilities: a deeper cream so the section and its line art read as their own band */
.caps{background:#e9e2d6}
.caps .art img{opacity:.24}
.caps .art::after{background:linear-gradient(rgba(233,226,214,.4),rgba(233,226,214,0) 30%,rgba(233,226,214,.25) 100%)}
.cap{background:rgba(246,242,236,.72);border-color:rgba(10,13,38,.2)}
.cap li{background:rgba(255,255,255,.5)}
.stack-track span{background:rgba(255,255,255,.45)}
.stack{border-top-color:rgba(10,13,38,.14)}
/* CTA now carries the Gorge: falls a little brighter here, sail and gulls at the section's art level */
.cta .art .layer.flow{opacity:.75}
.cta .art img{object-position:center 60%}
.quotes .art img{object-position:center bottom}
.cta .art img{object-position:center bottom}
.quotes .art img{object-position:left center}

/* subpage art levels for scenes that carry motion */
.page-hero .art .layer{opacity:.42}.pg-cta .art .layer{opacity:.6}.pg-cta .art .layer.flow{opacity:.75}.pg-reviews .art .layer{opacity:.26}.pg-faq .art .layer{opacity:.15}
.cta .art .layer.flow{opacity:.75}

/* ================= GRADIENT LINE ART LEVELS =================
   The green-to-pink lines read brighter than gold, and the cream scenes now carry colour, so the section levels are retuned. */
.hero .art img,.hero .art .layer{opacity:.7}
.page-hero .art img,.page-hero .art .layer{opacity:.36}
.ready .art img,.pg-reviews .art img,.pg-reviews .art .layer{opacity:.22}
.quotes .art img,.quotes .art .layer{opacity:.26}.quotes .art .layer.flow{opacity:.5}
.work .art img{opacity:.34}
.cta .art img,.pg-cta .art img,.cta .art .layer,.pg-cta .art .layer{opacity:.5}.cta .art .layer.flow,.pg-cta .art .layer.flow{opacity:.65}
.caps .art img{opacity:.42}
.thread .art img,.thread .art .layer{opacity:.4}
.pg-faq .art img,.pg-faq .art .layer,.pg-intro .art img{opacity:.36}
.caps .art::after{background:linear-gradient(rgba(233,226,214,.35),rgba(233,226,214,0) 30%,rgba(233,226,214,.2) 100%)}
.thread .art::after,.pg-faq .art::after,.pg-intro .art::after{background:linear-gradient(rgba(246,242,236,.15),rgba(246,242,236,0) 30%,rgba(246,242,236,.55) 100%)}
@media (max-width:640px){.hero .art img,.hero .art .layer{opacity:.5}}
.hero .art img,.hero .art .layer{opacity:.9}
.hero .art::after{background:linear-gradient(90deg,rgba(10,13,38,.7) 0%,rgba(10,13,38,.25) 50%,rgba(10,13,38,0) 100%),linear-gradient(rgba(10,13,38,.35),rgba(10,13,38,0) 30%,rgba(10,13,38,.15) 85%,var(--navy) 100%)}
.cta .art img,.pg-cta .art img,.cta .art .layer,.pg-cta .art .layer{opacity:.7}
.cta .art::after,.pg-cta .art::after{background:linear-gradient(rgba(10,13,38,.55),rgba(10,13,38,.05) 45%,rgba(10,13,38,0) 70%,rgba(10,13,38,.7))}
.quotes .art img,.quotes .art .layer{opacity:.38}
.ready .art img,.pg-reviews .art img,.pg-reviews .art .layer{opacity:.3}
.work .art img{opacity:.45}
.page-hero .art img,.page-hero .art .layer{opacity:.5}

/* ================= ZOOMED-OUT ART =================
   Show each drawing whole: contain instead of cover, anchored to the bottom so skies get the empty space text needs. */
.art img:not(.layer){object-fit:contain;object-position:center bottom}
.hero .art img:not(.layer),.page-hero .art img:not(.layer){object-position:center bottom}
.cta .art img:not(.layer),.pg-cta .art img:not(.layer){object-position:center bottom}
.thread .art img:not(.layer),.pg-faq .art img:not(.layer),.pg-intro .art img:not(.layer),.caps .art img:not(.layer){object-position:center bottom}
.quotes .art img:not(.layer),.pg-reviews .art img:not(.layer),.ready .art img:not(.layer),.work .art img:not(.layer){object-position:center bottom}
/* full width, natural height, anchored to the bottom of the section: no cropping into the middle of a drawing */
.art img:not(.layer){object-fit:cover;object-position:center bottom;width:100%;height:100%}
.art{display:block}
.art img:not(.layer){position:absolute;left:0;bottom:0;top:auto;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:center bottom}
/* sections shorter than the drawing show its bottom (the subject), not its sky */
.art img:not(.layer){top:auto;bottom:0}
.hero .art img:not(.layer){bottom:0}
.cta .art img:not(.layer),.pg-cta .art img:not(.layer){bottom:-8%}
.hero .art::after{background:linear-gradient(90deg,rgba(10,13,38,.6) 0%,rgba(10,13,38,.2) 50%,rgba(10,13,38,0) 100%),linear-gradient(rgba(10,13,38,.3),rgba(10,13,38,0) 30%,rgba(10,13,38,.1) 85%,var(--navy) 100%)}
.cta .art::after,.pg-cta .art::after{background:linear-gradient(rgba(10,13,38,.5),rgba(10,13,38,.1) 40%,rgba(10,13,38,.2) 70%,rgba(10,13,38,.75))}

/* ================= ART SCALE =================
   Drawings render smaller than the section and sit centered at its base, so foreground plants and rocks stay small
   and the whole scene reads. --art-w is the drawing's width as a fraction of the section. */
.art{--art-w:.72}
.art img:not(.layer){left:50%;transform:translateX(-50%);width:calc(100% * var(--art-w));min-height:0;height:auto;bottom:0;object-fit:fill}
.hero .art{--art-w:.8}
.cta .art,.pg-cta .art{--art-w:.7}
.caps .art,.thread .art,.pg-faq .art,.pg-intro .art{--art-w:.75}
.ready .art,.quotes .art,.pg-reviews .art,.work .art{--art-w:.7}
@media (max-width:900px){.art{--art-w:1.05}.hero .art{--art-w:1.15}}
/* lighter fades now that the art is inset: just a soft top vignette so copy stays clean */
.art::after,.hero .art::after,.page-hero .art::after,.cta .art::after,.pg-cta .art::after,.ready .art::after,.pg-reviews .art::after,.quotes .art::after,.work .art::after{background:linear-gradient(rgba(10,13,38,.55),rgba(10,13,38,0) 40%)}
.caps .art::after,.thread .art::after,.pg-faq .art::after,.pg-intro .art::after{background:linear-gradient(rgba(233,226,214,.35),rgba(246,242,236,0) 40%)}
.hero .art img,.hero .art .layer{opacity:.85}
.ready .art img,.pg-reviews .art img,.pg-reviews .art .layer{opacity:.4}
.quotes .art img,.quotes .art .layer{opacity:.45}
.cta .art img,.pg-cta .art img,.cta .art .layer,.pg-cta .art .layer{opacity:.6}
.work .art img{opacity:.5}
/* interior pages: hero and closing CTA run edge to edge */
.page-hero .art,.pg-cta .art{--art-w:1}
.page-hero .art img:not(.layer),.pg-cta .art img:not(.layer){min-height:100%;object-fit:cover;object-position:center bottom}
@media (max-width:900px){.page-hero .art,.pg-cta .art{--art-w:1.1}}
/* all sections: art fills edge to edge, anchored to the bottom */
.art,.hero .art,.cta .art,.pg-cta .art,.caps .art,.thread .art,.pg-faq .art,.pg-intro .art,.ready .art,.quotes .art,.pg-reviews .art,.work .art,.page-hero .art{--art-w:1}
.art img:not(.layer){min-height:100%;object-fit:cover;object-position:center bottom}
@media (max-width:900px){.art,.hero .art,.page-hero .art,.pg-cta .art{--art-w:1.1}}

/* brand marks in the marquee */
.stack-track .brand{display:inline-flex;align-items:center;gap:12px;padding:12px 20px 12px 16px;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600}
.stack-track .brand svg{width:22px;height:22px;fill:currentColor;flex:none}
.stack-track .brand b{font-weight:600}
.stack-track .brand svg{fill:var(--bc,currentColor)}

/* ================= ICONS EVERYWHERE ================= */
.hs{display:flex;gap:14px;align-items:flex-start}
.hs > i{flex:none;width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:14px;margin-top:2px}
.hero-tags span{display:inline-flex;align-items:center;gap:8px}
.hero-tags span i{color:var(--gold);font-size:13px}
.ready-list .rn{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--grad);color:#fff!important;-webkit-text-fill-color:#fff;font-size:17px;background-clip:border-box;-webkit-background-clip:border-box;min-width:44px}
.step-card .num{display:flex;align-items:center;gap:10px}
.step-card .num i{width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:14px;-webkit-text-fill-color:#fff}
.pcard .pic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--grad);color:#fff;font-size:17px;margin-bottom:18px}
.page-hero .pill{display:flex;gap:12px;align-items:center}
.page-hero .pill > i{width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:14px;flex:none}
.faq .num{-webkit-text-fill-color:initial;background:none;color:#e8550a;font-size:20px}
.ico-tel i,.ico-mail i{margin-right:8px;color:var(--gold)}
.contact-side .big i{font-size:.75em}
.f-cols h4 i{color:var(--gold);margin-right:8px;font-size:11px}
.f-cols li i{color:var(--gold);font-size:12px}
.f-glass-r a i{color:var(--gold)}
.dd-in a{display:flex;align-items:center;gap:10px}
.dd-in a i{width:16px;text-align:center;color:var(--gold);font-size:12px}
.mob-foot .c span i{color:var(--gold);margin-right:4px}
.check-grid i{background:var(--grad);color:#fff}
.place-list i{-webkit-text-fill-color:initial;background:var(--grad);color:#fff;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:12px}
.page-hero .pill{background:rgba(10,13,38,.55);border-color:rgba(255,255,255,.18);backdrop-filter:blur(8px)}
.page-hero .pill span{color:rgba(253,252,250,.75)}
.thread .art img,.thread .art .layer{opacity:.22}
.thread .art::after{background:linear-gradient(rgba(246,242,236,.2),rgba(246,242,236,0) 30%,rgba(246,242,236,.5) 70%,rgba(246,242,236,.75))}
/* footer bottom row: plain hairline, no glass pill */
.f-glass{background:none;border:0;border-radius:0;backdrop-filter:none;box-shadow:none;padding:26px 0 0}
.f-glass-r a:hover{background:none}
/* CTA: show the drawing from its horizon, not its foreground */
.cta .art img:not(.layer),.pg-cta .art img:not(.layer){object-position:center 38%;bottom:auto;top:0;height:100%;min-height:0}

/* ================= NO UPSCALE =================
   Art renders at exactly the section width (natural aspect), never scaled up to fill a taller section.
   Tall sections get empty navy above the drawing; short sections crop from the horizon. */
.art img:not(.layer){position:absolute;left:0;right:auto;top:auto;bottom:0;width:100%;height:auto;min-height:0;max-height:none;object-fit:fill;object-position:center bottom;transform:none}

/* CTA: shorter, so a 16:9 drawing fills it at natural width without empty sky */
.cta,.pg-cta{padding:clamp(80px,9vw,120px) 0}
.cta h2,.pg-cta h2{font-size:clamp(36px,5vw,72px)}
.cta p,.pg-cta p{margin-bottom:34px}
.cform{margin-bottom:28px}
.cta .tel{margin-top:30px}
.hero-tags{gap:18px 26px}
.hero-tags span i{margin-right:2px}

/* capabilities: tighter so the drawing fills the band; art starts at the top */
.caps{padding:clamp(70px,7vw,100px) 0 clamp(60px,6vw,80px)}
.caps .caps-head{margin-bottom:clamp(36px,4vw,56px)}
.caps .eyebrow{margin-bottom:18px}
.caps h2{font-size:clamp(36px,4.2vw,64px)}
.caps .stack{margin-top:clamp(40px,4vw,60px);padding-top:26px}
.caps .art img{opacity:.3}
.caps .art::after{background:linear-gradient(rgba(233,226,214,.15),rgba(233,226,214,0) 25%,rgba(233,226,214,.45) 100%)}
.caps .art img{opacity:.55}
.caps .art::after{background:linear-gradient(rgba(233,226,214,.1),rgba(233,226,214,0) 25%,rgba(233,226,214,.5) 100%)}
.caps .art img{opacity:1}
.caps .art::after{background:none}
.caps .art img{opacity:.35;top:0!important;bottom:0;height:100%!important;min-height:100%;object-fit:cover;object-position:center top}
/* cream sections: navy ink line art at 50% */
.caps .art img,.thread .art img,.thread .art .layer,.pg-faq .art img,.pg-faq .art .layer,.pg-intro .art img{opacity:.5}
.thread .art::after,.pg-faq .art::after,.pg-intro .art::after{background:linear-gradient(rgba(246,242,236,.1),rgba(246,242,236,0) 30%,rgba(246,242,236,.35) 100%)}
/* thread: copy sits on frosted cream panels so the drawing stays behind it */
.thread .art img,.thread .art .layer{opacity:.32}
.thread-head{background:rgba(246,242,236,.82);backdrop-filter:blur(3px);border-radius:22px;padding:32px 36px;margin-left:-36px;margin-right:-36px}
.steps-row{background:rgba(246,242,236,.86);backdrop-filter:blur(3px);border-radius:22px;padding:0 30px;border-top:0;border:1px solid rgba(10,13,38,.08)}
.step-card{padding:34px 26px 34px 0}
.step-card:first-child{padding-left:0}
.thread .lede,.step-card p{color:#3d3a45}
@media (max-width:900px){.thread-head{margin:0;padding:24px}}
.thread-head{background:rgba(246,242,236,.55)}
.steps-row{background:rgba(246,242,236,.6)}
.cap{background:rgba(246,242,236,.55)}
/* thread head: no panel; eyebrows on cream sections get a frosted pill instead */
.thread-head{background:none;backdrop-filter:none;border-radius:0;padding:0;margin-left:0;margin-right:0}
/* brand marquee: solid white pills, full-strength marks */
.stack-track span,.stack-track .brand{background:#fff;border-color:rgba(10,13,38,.1);color:var(--navy);box-shadow:0 2px 8px rgba(10,13,38,.06)}
.stack{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.hero .art img,.hero .art .layer{opacity:.55}
.thread .art img,.thread .art .layer{opacity:.24}

/* lake reflection: gentle horizontal displacement ripple, drifting very slowly */
.layer.ripple{filter:url(#rippleF);animation:lakeDrift 10s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes lakeDrift{from{transform:translateX(0) scaleY(1)}to{transform:translateX(.4%) scaleY(1.015)}}
@media (prefers-reduced-motion:reduce){.layer.ripple{filter:none;animation:none}}

/* ================= INTERIOR HEROES: centered to match the homepage ================= */
.page-hero .wrap{text-align:center;display:flex;flex-direction:column;align-items:center}
.page-hero .eyebrow{justify-content:center}
.page-hero h1{margin-left:auto;margin-right:auto;max-width:18ch}
.page-hero .lede{margin-left:auto;margin-right:auto}
.page-hero .hero-cta{justify-content:center}
/* symmetric veil: the old one darkened the left edge for left-aligned copy */
.page-hero .art::after{background:radial-gradient(46% 42% at 50% 55%,rgba(10,13,38,.7) 0%,rgba(10,13,38,.45) 45%,rgba(10,13,38,.12) 80%,rgba(10,13,38,0) 100%),linear-gradient(rgba(10,13,38,.72),rgba(10,13,38,.35) 12%,rgba(10,13,38,0) 32%,rgba(10,13,38,0) 70%,var(--navy) 100%)}
@media (max-width:900px){.page-hero .eyebrow{flex-direction:column;align-items:center;gap:6px}}
/* interior heroes: service pages carry the slideshow, area pages keep the line art */
.page-hero{min-height:72svh;display:flex;align-items:center}
/* ================= CREAM SECTION READABILITY =================
   Line art drops to a whisper and the copy sits on frosted cream panels (same device as the homepage Thread). */
.pg-faq .art img,.pg-faq .art .layer,.pg-intro .art img,.pg-intro .art .layer,.caps .art img,.thread .art img,.thread .art .layer{opacity:.16}
.thread .art::after,.pg-faq .art::after,.pg-intro .art::after,.caps .art::after{background:linear-gradient(rgba(246,242,236,.55),rgba(246,242,236,.25) 30%,rgba(246,242,236,.35) 70%,rgba(246,242,236,.8) 100%)}
.pg-faq-head,.pg-intro .prose,.pg-intro .pg-pull{background:rgba(246,242,236,.84);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid rgba(10,13,38,.08);border-radius:22px;padding:30px 34px}
.faq-list{background:rgba(246,242,236,.88);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid rgba(10,13,38,.08);border-radius:22px;padding:6px 30px}
.faq:first-child{border-top:0}
.faq:last-child{border-bottom:0}
.pg-faq-head p,.faq .a p{color:rgba(10,13,38,.82);font-size:16.5px;line-height:1.7}
.faq .a p{margin:0 0 22px}
.pg-intro .prose p{color:rgba(10,13,38,.85)}
@media (max-width:640px){.pg-faq-head,.pg-intro .prose,.pg-intro .pg-pull{padding:22px}.faq-list{padding:2px 18px}}
/* line art on every cream band of the interior pages: same whisper opacity and cream wash as the FAQ */
.pg-cards,.pg-list{position:relative}
.pg-cards .wrap,.pg-list .wrap{position:relative;z-index:1}
.pg-cards .art img,.pg-cards .art .layer,.pg-list:not(.is-navy) .art img,.pg-list:not(.is-navy) .art .layer{opacity:.16}
.pg-cards .art::after,.pg-list:not(.is-navy) .art::after{background:linear-gradient(rgba(246,242,236,.55),rgba(246,242,236,.25) 30%,rgba(246,242,236,.35) 70%,rgba(246,242,236,.8) 100%)}
.pg-cards .art img:not(.layer),.pg-list .art img:not(.layer){object-position:center bottom}
.pg-intro .art img,.pg-intro .art .layer{opacity:.22}
/* homepage location kicker: swaps with the slide (rise-out / spring-in), no pill by request */
.hero-loc{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fdfcfa;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.hero-loc i{font-size:14px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero-loc .w{display:inline-block;transition:opacity .45s ease,transform .55s var(--ease)}
.hero-loc.out .w,.hero-loc.out i{opacity:0;transform:translateY(-10px)}
.hero-loc i{transition:opacity .45s ease,transform .55s var(--ease)}
.hero-loc.in .w{opacity:0;transform:translateY(12px);transition:none}
@media (max-width:640px){.hero-loc{display:block;font-size:11px;letter-spacing:.14em;text-align:center;max-width:30ch;margin-left:auto;margin-right:auto;line-height:1.7}.hero-loc i{display:inline-block;margin-right:8px;vertical-align:-1px}.hero-loc .w{display:inline}}
@media (prefers-reduced-motion:reduce){.hero-loc .w{transition:none}}
/* globe slide: the live Three.js globe sits inside the slide so it inherits the wipe; the photo stays as the fallback */
.hero-slides .slide canvas.globe3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-slides .slide[data-orbit].live{background-color:#03050f;background-image:radial-gradient(70% 70% at 50% 50%,#070b22 0%,#03050f 100%)!important}
/* ================= HOMEPAGE HERO TYPE SYSTEM =================
   Two voices: Inter 800 display and Inter 300 deck. Kicker and services are demoted to footnotes. */
.hero-loc{gap:9px;margin-bottom:26px;font-size:11px;font-weight:600;letter-spacing:.3em;color:rgba(253,252,250,.72);text-shadow:none}
.hero-loc i{font-size:12px}
.hero .hero-center h1{margin-bottom:26px}
@media (max-width:640px){
  .hero-loc{font-size:10px;letter-spacing:.24em;margin-bottom:20px}
}
/* work-wall slide: the drifting launch wall lives inside a slide again, with the navy base the wall was designed on */
.hero-slides .slide[data-wall]{background:var(--navy);overflow:hidden}
.hero-slides .slide[data-wall] .wall{display:flex;opacity:.6;filter:none}
.hero-slides .slide[data-wall] .wall img{filter:saturate(.9)}
.hero-slides .slide[data-wall]::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(60% 55% at 50% 50%,rgba(10,13,38,.55) 0%,rgba(10,13,38,.15) 60%,rgba(10,13,38,0) 100%)}
@media (prefers-reduced-motion:reduce){.wall .col{animation:none}}
/* storyboard captions run longer: one line on desktop, up to two centered lines on phones */
.hero-loc{max-width:none;white-space:nowrap;line-height:1.6}
@media (max-width:640px){.hero-loc{white-space:normal;max-width:none}}
/* work wall on the slide: straight vertical strips side by side, no tilt, no overlap */
.hero-slides .slide[data-wall] .wall{inset:-8% 0;transform:none;gap:18px;padding:0 18px}
.hero-slides .slide[data-wall] .wall .col{gap:18px}
.hero-slides .slide[data-wall] .wall img{border-radius:12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
@media (max-width:900px){.hero-slides .slide[data-wall] .wall{gap:12px;padding:0 12px}.hero-slides .slide[data-wall] .wall .col{gap:12px}}
@media (max-width:640px){.hero-slides .slide[data-wall] .wall{opacity:.6}.hero-slides .slide[data-wall] .wall .col:nth-child(3){display:none}.hero-slides .slide[data-wall]::before{background:radial-gradient(70% 40% at 50% 50%,rgba(10,13,38,.5) 0%,rgba(10,13,38,.15) 60%,rgba(10,13,38,0) 100%)}}
/* flex items default to min-width:auto, which lets the 570px thumbnails push the strips past the slide edge on phones */
.hero-slides .slide[data-wall] .wall .col{flex:1 1 0;min-width:0}
.hero-slides .slide[data-wall] .wall img{min-width:0;max-width:100%}
/* night-sky overlay: sits above the slides, under the veil; only paints while a data-night slide is showing */
.hero-slides canvas.sky{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.6s ease}
.hero-slides canvas.sky.on{opacity:1}
/* review badge: the real four-colour Google G instead of the monochrome icon */
.g-badge .g-logo{width:22px;height:22px;flex:none;display:inline-block}

/* ================= REVIEWS: frostier glass =================
   Badge, slider controls and dots were near-invisible on the navy; give them a real frosted surface and a visible ring. */
.g-badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 10px 30px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18)}
.g-badge:hover{background:rgba(255,255,255,.18)}
.g-badge .g-count{color:rgba(253,252,250,.92)}
.q-nav button{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 24px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18)}
.q-nav button:hover,.q-nav button:focus-visible{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.q-dots i{background:rgba(255,255,255,.5)}
.q-dots i.on{background:var(--gold);box-shadow:0 0 0 3px rgba(255,210,63,.25)}
/* reviewer byline: gold stars */
.q .who .who-stars{font-style:normal;color:var(--gold);letter-spacing:.06em}
/* footer: all copy bright white (icons stay gold, hover keeps its underline behaviour) */
footer,footer p,footer li,footer a,footer span,footer small,.f-glass-r a,.f-loc,.f-copy,.f-top p{color:#fff}
.f-cols a{color:#fff}
.f-cols a:hover,.f-glass-r a:hover{color:var(--gold)}
.f-sep{background:rgba(255,255,255,.35)}

/* ================= NAVY CARDS BAND (section_cards tone 'navy') ================= */
.pg-cards.is-navy{background:var(--navy);color:#fff}
.pg-cards.is-navy .pcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pg-cards.is-navy .pcard:hover{background:rgba(255,255,255,.09);box-shadow:0 24px 48px -28px rgba(0,0,0,.6)}
.pg-cards.is-navy .pcard h3{color:#fff}
.pg-cards.is-navy .pcard p{color:rgba(253,252,250,.75)}
.pg-cards.is-navy .pcard .idx{color:rgba(253,252,250,.45)}
.pg-cards.is-navy .grad-i{background-image:var(--grad)}
.pg-cards.is-navy .art img,.pg-cards.is-navy .art .layer{opacity:.3}
.pg-cards.is-navy .art::after{background:linear-gradient(rgba(10,13,38,.4),rgba(10,13,38,0) 30%,rgba(10,13,38,0) 70%,rgba(10,13,38,.6))}

/* ================= EYEBROW STYLE GUIDE =================
   Two devices, decided by the panel background. Templates assign the class; nothing else restyles eyebrows.
   1) Navy panels: the base .eyebrow (gradient kicker, muted "( 01 )"), exactly as the homepage AI-ready / Reviews panels.
   2) Cream panels: .eyebrow-cream, the homepage Capabilities / Thread pill (gradient capsule, white text, centred index).
   3) Interior heroes only: .eyebrow-pill, the glass capsule with the section's menu icon. */
.eyebrow-cream,.caps .eyebrow,.thread .eyebrow{
  display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 18px;border-radius:999px;
  background:var(--grad);color:#fff;box-shadow:0 12px 30px -12px rgba(255,138,31,.55);margin-bottom:26px}
.eyebrow-cream .k,.caps .eyebrow .k,.thread .eyebrow .k{background:none!important;background-image:none!important;-webkit-background-clip:initial;background-clip:initial;color:#fff;-webkit-text-fill-color:#fff;padding-right:0;line-height:1}
.eyebrow-cream .n,.caps .eyebrow .n,.thread .eyebrow .n{color:#fff;opacity:.85;line-height:1;align-self:center}
.eyebrow-cream .n::before,.caps .eyebrow .n::before,.thread .eyebrow .n::before{content:"( "}
.eyebrow-cream .n::after,.caps .eyebrow .n::after,.thread .eyebrow .n::after{content:" )"}
/* navy panels: neutralise any legacy per-section tint so they match the homepage exactly */
.pg-cards.is-navy .eyebrow,.pg-list.is-navy .eyebrow,.pg-featured .eyebrow,.pg-reviews .eyebrow,.pg-cta .eyebrow{color:var(--muted);margin-bottom:26px}
.pg-cards.is-navy .eyebrow .k,.pg-list.is-navy .eyebrow .k,.pg-featured .eyebrow .k,.pg-reviews .eyebrow .k,.pg-cta .eyebrow .k{background-image:var(--grad)}
/* hero pill (interior heroes and the contact hero only) */
.eyebrow-pill{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;border:0;margin-bottom:26px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:Inter,system-ui,sans-serif;font-style:normal;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.eyebrow-pill .k{background:none;background-image:none;color:#fff;-webkit-text-fill-color:#fff;padding-right:0}
.eyebrow-pill .n{font-size:13px;letter-spacing:.16em;font-weight:700;opacity:.7;color:#fff}
.eyebrow-pill .n::before{content:"·";margin-right:10px;opacity:.6}.eyebrow-pill .n::after{content:none}
.eyebrow-pill i{font-size:15px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media (max-width:900px){.eyebrow-pill{flex-direction:row;align-items:center;gap:10px;font-size:12px;padding:11px 18px}}
/* featured work on cream (portfolio grid, contact page): dark tiles read as cards on the cream */
.pg-featured.is-cream{background:var(--cream-2);color:var(--navy)}
.pg-featured.is-cream .pg-head h2{color:var(--navy)}
.pg-featured.is-cream .pg-head p{color:var(--muted-dark)}
.pg-featured.is-cream .grad-i{background-image:var(--grad)}
.pg-featured.is-cream .tile{border-color:rgba(10,13,38,.08);box-shadow:0 18px 40px -24px rgba(10,13,38,.35)}
.pg-featured.is-cream .more-links{color:var(--muted-dark)}
.pg-featured.is-cream .more-links a{color:var(--navy);border-bottom-color:rgba(232,85,10,.6)}
.pg-featured.is-cream .work-link,.pg-featured.is-cream .filters button{color:var(--navy)}
.pg-featured.is-cream .tile,.pg-featured.is-cream .tile .cap-bar b{color:#fff}
.pg-featured.is-cream .tile .cap-bar .tech{color:rgba(253,252,250,.55)}
.pg-featured.is-cream .pf-filters button{border-color:rgba(10,13,38,.25);color:var(--navy)}
.pg-featured.is-cream .pf-filters button:hover{border-color:var(--navy);color:var(--navy)}

/* ================= TONE VARIANTS so every page can alternate strictly ================= */
/* prose band on navy */
.pg-intro.is-navy{background:var(--navy);color:#fff}
.pg-intro.is-navy .pg-h2{color:#fff}
.pg-intro.is-navy .prose,.pg-intro.is-navy .pg-pull{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.pg-intro.is-navy .prose p,.pg-intro.is-navy .prose p:first-child{color:rgba(253,252,250,.82)}
.pg-intro.is-navy .prose a{color:#fff}
.pg-intro.is-navy .art img,.pg-intro.is-navy .art .layer{opacity:.3}
.pg-intro.is-navy .art::after{background:linear-gradient(rgba(10,13,38,.4),rgba(10,13,38,0) 30%,rgba(10,13,38,0) 70%,rgba(10,13,38,.6))}
.pg-intro.is-navy .eyebrow{color:var(--muted)}
/* rate table on navy: the white table card carries itself */
.pg-table.is-navy{background:var(--navy);color:#fff}
.pg-table.is-navy .pg-head h2{color:#fff}
.pg-table.is-navy .pg-head p{color:var(--muted)}
.pg-table.is-navy .eyebrow{color:var(--muted)}
/* reviews strip on cream */
.pg-reviews.is-cream{background:var(--cream);color:var(--navy)}
.pg-reviews.is-cream .q blockquote,.pg-reviews.is-cream .q .who b{color:var(--navy)}
.pg-reviews.is-cream .q .who span{color:var(--muted-dark)}
.pg-reviews.is-cream .g-badge{background:rgba(10,13,38,.05);border-color:rgba(10,13,38,.16);color:var(--navy);box-shadow:0 10px 30px -14px rgba(10,13,38,.25)}
.pg-reviews.is-cream .g-badge:hover{background:rgba(10,13,38,.09)}
.pg-reviews.is-cream .g-badge .g-count{color:var(--muted-dark)}
.pg-reviews.is-cream .q-nav button{background:rgba(10,13,38,.05);border-color:rgba(10,13,38,.3);color:var(--navy);box-shadow:none}
.pg-reviews.is-cream .q-dots i{background:rgba(10,13,38,.3)}
.pg-reviews.is-cream .art img,.pg-reviews.is-cream .art .layer{opacity:.16}
.pg-reviews.is-cream .art::after{background:linear-gradient(rgba(246,242,236,.55),rgba(246,242,236,.25) 30%,rgba(246,242,236,.35) 70%,rgba(246,242,236,.8) 100%)}

/* CONTACT: cream form band so the page alternates navy / cream / navy */
.pg-cta.is-cream{background:var(--cream);color:var(--navy)}
.pg-cta.is-cream::after{-webkit-text-stroke:1px rgba(10,13,38,.07)}
.pg-cta.is-cream .pg-h2{color:var(--navy)}
.pg-cta.is-cream p{color:var(--muted-dark)!important}
.pg-cta.is-cream .cform{background:rgba(255,255,255,.55);border-color:rgba(10,13,38,.12);box-shadow:0 24px 60px -30px rgba(10,13,38,.25)}
.pg-cta.is-cream .cform label{color:var(--muted-dark)}
.pg-cta.is-cream .cform input,.pg-cta.is-cream .cform textarea{color:var(--navy);background:#fff;border-color:rgba(10,13,38,.16)}
.pg-cta.is-cream .cform input::placeholder,.pg-cta.is-cream .cform textarea::placeholder{color:rgba(10,13,38,.4)}
.pg-cta.is-cream .cform .send small{color:var(--muted-dark)}
.pg-cta.is-cream .cform .form-ok{background:rgba(10,13,38,.06);border-color:rgba(10,13,38,.18);color:var(--navy)}
.pg-cta.is-cream .contact-side h3{color:var(--navy)}
.pg-cta.is-cream .contact-side p{color:var(--muted-dark)}
.pg-cta.is-cream .contact-side .big{color:var(--navy)}
.pg-cta.is-cream .contact-side li{color:var(--navy)}
.pg-cta.is-cream .contact-side a{color:var(--navy)}
.pg-cta.is-cream .g-badge{background:rgba(10,13,38,.05);border-color:rgba(10,13,38,.16);color:var(--navy);box-shadow:0 10px 30px -14px rgba(10,13,38,.25)}
.pg-cta.is-cream .g-badge:hover{background:rgba(10,13,38,.09)}
.pg-cta.is-cream .g-badge .g-count{color:var(--muted-dark);border-left-color:rgba(10,13,38,.18)}
.pg-table.is-navy .rate-table{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:none;backdrop-filter:blur(10px)}
.pg-table.is-navy .rate-table th{color:var(--muted);border-bottom-color:rgba(255,255,255,.12)}
.pg-table.is-navy .rate-table td{color:#fff;border-bottom-color:rgba(255,255,255,.08)}
.pg-table.is-navy .rate-table tr.hot td{background:rgba(255,204,51,.06)}
.pg-table.is-navy .grad-i{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:640px){
  .pg-table.is-navy .rate-table tr{border-bottom-color:rgba(255,255,255,.1)}
  .pg-table.is-navy .rate-table td::before{color:var(--muted)}
  .pg-table.is-navy .rate-table td:first-child{border-bottom-color:rgba(255,255,255,.15)}
}

/* INTRO BAND: statement column + proof rail, prose with gradient drop cap */
.pg-intro-grid{grid-template-columns:.9fr 1.1fr;align-items:start}
.pg-intro .pg-pull{position:sticky;top:110px;padding:34px 36px 30px}
.pg-intro .pg-pull .eyebrow{margin-bottom:24px}
.pg-intro .pg-state{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:clamp(30px,3.2vw,50px);line-height:1.02;letter-spacing:-.035em;color:var(--navy);margin:0 0 30px;text-wrap:balance}
.pg-intro .pg-state .grad-i{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.proof-rail{list-style:none;margin:0 0 26px;padding:22px 0 0;border-top:1px solid rgba(10,13,38,.1);display:flex;flex-wrap:wrap;gap:0}
.proof-rail li{display:flex;align-items:baseline;gap:8px;padding:0 20px 0 0;margin-right:20px;border-right:1px solid rgba(10,13,38,.12);font-family:Inter,system-ui,sans-serif}
.proof-rail li:last-child{border:0;margin:0;padding:0}
.proof-rail a{display:inline-flex;align-items:baseline;gap:8px;color:inherit}
.proof-rail b{font-weight:800;font-size:20px;letter-spacing:-.03em;color:var(--navy)}
.proof-rail i{font-style:normal;color:var(--gold);font-size:11px;letter-spacing:2px;align-self:center}
.proof-rail span{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark)}
.proof-rail .g-logo{width:15px;height:15px;align-self:center}
.intro-cta{margin:0}
.txt-link{display:inline-flex;align-items:center;gap:10px;font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:15px;color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:4px;transition:gap .3s var(--ease)}
.txt-link i{font-size:12px;transition:transform .3s var(--ease)}
.txt-link:hover{gap:16px}
.pg-intro .prose{padding:38px 42px}
.pg-intro .prose p{margin:0 0 22px;line-height:1.75;font-size:16.5px}
.pg-intro .prose p:last-child{margin-bottom:0}
.pg-intro .prose p + p{padding-top:22px;border-top:1px solid rgba(10,13,38,.08)}
.pg-intro .prose p.lead,.pg-intro .prose p:first-child{font-size:19.5px;line-height:1.6;color:var(--navy)}
.pg-intro .prose .dcap{float:left;font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:76px;line-height:.78;margin:8px 14px 0 -2px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:900px){
  .pg-intro-grid{grid-template-columns:1fr}
  .pg-intro .pg-pull{position:static}
  .pg-intro .pg-state{font-size:clamp(30px,7.6vw,44px)}
}
@media (max-width:640px){
  .pg-intro .pg-pull{padding:24px 22px}
  .pg-intro .prose{padding:26px 22px}
  .proof-rail li{padding-right:14px;margin-right:14px}
  .proof-rail b{font-size:17px}
  .pg-intro .prose .dcap{font-size:60px;margin-right:10px}
}
.pg-intro .prose{max-width:none}
@media (max-width:640px){
  .proof-rail{display:grid;grid-template-columns:1fr;gap:12px}
  .proof-rail li{border:0;margin:0;padding:0}
}
/* proof rail: always one line */
.proof-rail{flex-wrap:nowrap;white-space:nowrap}
.proof-rail li{flex:none;padding-right:16px;margin-right:16px}
.proof-rail b{font-size:18px}
.proof-rail span{font-size:10px;letter-spacing:.14em}
@media (max-width:640px){
  .proof-rail{display:flex;gap:0}
  .proof-rail li{border-right:1px solid rgba(10,13,38,.12);padding-right:12px;margin-right:12px}
  .proof-rail li:last-child{border:0;margin:0;padding:0}
  .proof-rail b{font-size:16px}
  .proof-rail span{font-size:9px;letter-spacing:.1em}
  .proof-rail i{font-size:9px;letter-spacing:1px}
}
@media (max-width:640px){
  .proof-rail{justify-content:space-between}
  .proof-rail li,.proof-rail a{gap:5px}
  .proof-rail li{padding-right:9px;margin-right:9px}
  .proof-rail b{font-size:15px}
  .proof-rail span{font-size:8.5px;letter-spacing:.06em}
  .proof-rail i{font-size:8px;letter-spacing:0}
  .proof-rail .g-logo{width:12px;height:12px}
}
@media (max-width:640px){
  .proof-rail i{display:none}
  .proof-rail li{padding-right:7px;margin-right:7px}
  .proof-rail b{font-size:14.5px}
}
@media (max-width:640px){
  .proof-rail span{font-size:8px;letter-spacing:.02em}
  .proof-rail li,.proof-rail a{gap:4px}
  .proof-rail li{padding-right:6px;margin-right:6px}
}
/* hero pill: icon always left of the label, never stacked */
@media (max-width:900px){
  .page-hero .eyebrow.eyebrow-pill{flex-direction:row;align-items:center;gap:10px;white-space:nowrap;width:auto;max-width:none}
}
/* mobile nav: vertical scroll only, the ghost mark never widens the panel */
@media (max-width:900px){.mob{overflow-x:hidden}}