/* ===========================================================
   krayon medias — shared styles
   =========================================================== */
:root{
  --blue:#2E5BFF; --coral:#FF5436; --violet:#7C3AED;
  --paper:#F2F0EA; --grey:#6E6E68; --ink:#0E0E0E;
  --coral-txt:#C6320F;              /* coral fails AA on paper; use this for type */
  --d:'Bricolage Grotesque',system-ui,sans-serif;
  --b:'Inter',system-ui,sans-serif;
  --m:'Space Mono',ui-monospace,monospace;
  --e:cubic-bezier(.16,1,.3,1);
  --gut:clamp(18px,4.4vw,72px);
  --accent:var(--blue);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--b);font-size:17px;
  line-height:1.55;overflow-x:hidden;overscroll-behavior-y:none}
body.noscroll{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--d);font-weight:800;letter-spacing:-.045em;line-height:.87}
.mono{font-family:var(--m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.lead{font-size:clamp(17px,2vw,23px);color:#4A4842;max-width:56ch;line-height:1.5}

/* ---------- loader ---------- */
/* The wordmark is coloured in as the page loads — the brand idea used as a
   progress bar. Home page only: a loader on every navigation is a tax. */
#loader{position:fixed;inset:0;z-index:200;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
#loader.done{transform:translateY(-100%);transition:transform 1s var(--e)}
.lmark{width:min(76vw,460px)}
.lmark svg{width:100%;height:auto;display:block;overflow:visible}
.lbar{width:min(76vw,460px);height:2px;background:#242422;border-radius:2px;overflow:hidden}
.lbar i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--coral),var(--violet));
  transition:width .28s linear}
.lnum{font-family:var(--m);font-size:11px;letter-spacing:.2em;color:var(--grey)}
@media(prefers-reduced-motion:reduce){#loader{display:none}}

/* ---------- layers ---------- */
/* The drawable canvas belongs to the hero board only. It is fixed so strokes
   survive small scrolls, but it is switched off — and stops eating clicks —
   the moment the hero leaves the screen. Before this fix it sat over the whole
   page and swallowed every link below the fold, including the footer. */
#wax{position:fixed;inset:0 0 auto;height:100svh;z-index:1;touch-action:pan-y;
  transition:opacity .5s var(--e)}
body.past-hero #wax{opacity:0;pointer-events:none}
body.past-hero .nibs,body.past-hero #hint{opacity:0;pointer-events:none;
  transition:opacity .4s var(--e)}
body.past-hero #crayon{opacity:0!important}

main{position:relative;z-index:3}
.ui{position:relative;z-index:6}

/* ---------- crayon cursor ---------- */
/* The crayon cursor belongs to the drawable hero only. Everywhere else the
   normal pointer is correct — a custom cursor over a contact form is friction,
   not personality. */
#crayon{position:fixed;top:0;left:0;z-index:60;pointer-events:none;width:58px;height:58px;
  opacity:0;transition:opacity .25s}
#crayon.on{opacity:1}
@media(hover:none){#crayon{display:none}}
body.in-hero,body.in-hero #wax,body.in-hero .hero{cursor:none}
body.in-hero a,body.in-hero button,body.in-hero .ui,body.in-hero header{cursor:auto}

/* ---------- header (base) ---------- */
header{position:fixed;inset:0 0 auto;z-index:50;padding:18px 0;
  transition:background .45s var(--e),padding .45s var(--e),color .45s}
header.stuck{background:rgba(242,240,234,.88);backdrop-filter:blur(16px);padding:11px 0}
header.dark{color:var(--paper)}
header.dark.stuck{background:rgba(14,14,14,.86)}
header .bar{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:nowrap}
/* Real brand logo, inlined as SVG so it inherits colour from the header.
   The wordmark is outlined — it does not depend on Arial being installed. */
.logolink{display:inline-flex;align-items:center;line-height:0}
svg.logo{height:clamp(30px,3.2vw,40px);width:auto;display:block;color:currentColor}
header.dark svg.logo{color:var(--paper)}
footer svg.logo{height:42px;color:var(--ink)}
#sheet svg.logo{color:var(--paper)}
/* Nav items must not shrink — as flex children they were compressing and the
   button's label overflowed its own pill. */
nav.desk{display:flex;align-items:center;gap:clamp(18px,2.2vw,30px);flex:0 0 auto}
nav.desk a{font-size:14.5px;font-weight:500;position:relative;padding:4px 0;
  white-space:nowrap;flex:0 0 auto}
nav.desk a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;
  background:var(--c,var(--blue));transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--e)}
nav.desk a:hover::after,nav.desk a.here::after{transform:scaleX(1)}
nav.desk a:nth-of-type(2){--c:var(--coral)}
nav.desk a:nth-of-type(3){--c:var(--violet)}
nav.desk a:nth-of-type(4){--c:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:14.5px;white-space:nowrap;flex:0 0 auto;
  padding:13px 24px;border-radius:99px;background:var(--ink);color:var(--paper);border:0;
  cursor:pointer;will-change:transform;transition:transform .3s var(--e),background .3s}
/* the nav button carries more weight than an inline one */
nav.desk .btn{padding:15px 30px;font-size:15px}
header.dark .btn{background:var(--paper);color:var(--ink)}
.btn.big{padding:19px 36px;font-size:17px}
.btn.line{background:transparent;border:1.5px solid currentColor;color:inherit}
.btn .a{transition:transform .35s var(--e)}
.btn:hover .a{transform:translateX(5px)}
/* Over a dark section the header inverts. The burger and logo have to
   invert with it, or they disappear entirely on mobile. */
.dark .burger i{background:var(--paper)}
.dark .logo{color:var(--paper)}

/* With the menu sheet open the header is always over ink, whatever the page
   behind it was. Force the light treatment so the logo and burger stay
   visible, and drop the stuck background so the sheet reads as one surface. */
body.nav-open header{color:var(--paper)}
body.nav-open header svg.logo{color:var(--paper)}
body.nav-open .burger i{background:var(--paper)}
body.nav-open header.stuck{background:transparent;backdrop-filter:none}
.burger{display:none;background:none;border:0;padding:9px;cursor:pointer;flex-direction:column;gap:5px}
.burger i{width:23px;height:2.5px;border-radius:2px;background:currentColor;display:block;
  transition:.4s var(--e)}
@media(max-width:1120px){nav.desk{display:none}.burger{display:flex}}

/* --- per-page nav variants --- */
header.v-services{border-bottom:3px solid var(--accent)}
header.v-services nav.desk a.here::before{content:'';width:9px;height:9px;border-radius:50%;
  background:var(--accent);display:inline-block;margin-right:8px;vertical-align:middle}
.subbar{margin-top:10px}
.ticker{overflow:hidden;border-top:1px solid currentColor;border-bottom:1px solid currentColor;
  padding:8px 0}
header.dark .ticker{border-color:rgba(255,255,255,.16)}
.ticker div{display:flex;gap:38px;white-space:nowrap;font-family:var(--m);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:#8C8A84;will-change:transform}
header .rail{display:flex;gap:4px;flex-wrap:wrap}
header .rail button{background:none;border:0;cursor:pointer;color:inherit;
  font-family:var(--b);font-size:13px;padding:6px 10px;position:relative;opacity:.45;
  transition:opacity .4s}
header .rail button.on{opacity:1}
header .rail button i{position:absolute;left:10px;right:10px;bottom:0;height:3px;
  border-radius:3px;background:currentColor;opacity:.22}
header .rail button i b{display:block;height:100%;width:0;border-radius:3px;
  background:var(--blue);transition:width .35s var(--e)}
header.v-contact .tel{font-family:var(--d);font-weight:700;font-size:clamp(14px,1.5vw,17px);
  letter-spacing:-.03em;margin-right:4px}
@media(max-width:1120px){.subbar{display:none}}
@media(max-width:1320px){header.v-contact .tel{display:none}}

/* ---------- mobile sheet ---------- */
#sheet{position:fixed;inset:0;z-index:49;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);gap:2px;
  clip-path:circle(0% at 92% 5%);transition:clip-path .8s var(--e);pointer-events:none}
#sheet.on{clip-path:circle(150% at 92% 5%);pointer-events:auto}
#sheet a{font-family:var(--d);font-weight:800;font-size:clamp(34px,11vw,74px);
  letter-spacing:-.05em;padding:5px 0;display:flex;align-items:center;gap:16px}
#sheet a em{font-family:var(--m);font-size:11px;font-style:normal;letter-spacing:.2em}
#sheet .foot{margin-top:34px;font-family:var(--m);font-size:11px;letter-spacing:.16em;color:#8C8A84}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(110px,15vh,170px) 0 clamp(120px,16vh,180px);pointer-events:none}
.hero a,.hero button{pointer-events:auto}
/* The hero mark is the real logo file, scaled — not display type set to look
   like it. The circle inside carries id="dotAnchor" so the WebGL dot can
   measure its exact position and paint over it with zero layout shift. */
svg.heromark{width:min(100%,1180px);height:auto;display:block;color:var(--ink)}

.tag{margin-top:clamp(16px,2.6vw,30px);position:relative;display:inline-block}
.tag p{font-family:var(--d);font-weight:500;font-size:clamp(19px,3vw,42px);
  letter-spacing:-.03em;line-height:1.06;color:#2A2A26}
.tag .ln{display:block;overflow:hidden}
.tag .ln span{display:block;transform:translateY(105%);transition:transform .95s var(--e)}
.tag.in .ln:nth-child(1) span{transform:none;transition-delay:.05s}
.tag.in .ln:nth-child(2) span{transform:none;transition-delay:.11s}
.tag svg{position:absolute;left:-2%;bottom:-14px;width:104%;height:24px;overflow:visible}
.tag svg path{fill:none;stroke:var(--coral);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.5s var(--e) .5s}
.tag.in svg path{stroke-dashoffset:0}
.herofoot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-top:clamp(30px,5vh,58px)}

/* ---------- nibs ---------- */
.nibs{position:fixed;left:var(--gut);bottom:26px;z-index:40;display:flex;gap:12px;
  align-items:flex-end;transition:opacity .4s var(--e)}
.nib{width:34px;height:74px;border:0;padding:0;background:none;cursor:pointer;position:relative;
  transition:transform .5s var(--e);transform-origin:bottom center}
.nib:hover{transform:translateY(-7px) rotate(-4deg)}
.nib[aria-pressed="true"]{transform:translateY(-15px) rotate(-8deg)}
.nib .body{position:absolute;inset:14px 0 0;border-radius:5px 5px 3px 3px;
  box-shadow:inset -7px 0 0 rgba(0,0,0,.17),inset 5px 0 0 rgba(255,255,255,.2)}
.nib .tip{position:absolute;top:0;left:50%;transform:translateX(-50%);width:0;height:0;
  border-left:8px solid transparent;border-right:8px solid transparent;
  border-bottom:16px solid currentColor;filter:brightness(.86)}
.nib .ring{position:absolute;inset:auto 0 8px;height:5px;background:rgba(255,255,255,.35)}
.nibs .clr{height:34px;padding:0 14px;border-radius:99px;border:1.5px solid #CFCCC3;
  background:rgba(242,240,234,.72);backdrop-filter:blur(8px);font-family:var(--m);font-size:10px;
  letter-spacing:.16em;color:var(--grey);cursor:pointer;align-self:center}
.nibs .clr:hover{border-color:var(--ink);color:var(--ink)}
#hint{position:fixed;z-index:41;pointer-events:none;display:flex;gap:10px;font-family:var(--m);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);opacity:0;
  transition:opacity .6s}
#hint.on{opacity:1;animation:wig 2.6s var(--e) infinite}
@keyframes wig{0%,100%{transform:translate(0,0) rotate(0)}
  40%{transform:translate(9px,-5px) rotate(9deg)}70%{transform:translate(-6px,3px) rotate(-6deg)}}
@media(max-width:520px){.nib{width:28px;height:62px}
  .nibs{gap:9px;bottom:calc(18px + env(safe-area-inset-bottom))}}

/* ---------- generic page head ---------- */
.phead{padding:clamp(140px,20vh,220px) 0 clamp(40px,7vh,80px)}
.phead h1{font-size:clamp(52px,11vw,170px)}
.phead .lead{margin-top:22px}
.dark{background:var(--ink);color:var(--paper)}
.dark .lead{color:#A8A69F}
.dark .mono{color:#8C8A84}
.pad{padding:clamp(80px,12vh,150px) 0}

/* ---------- services ---------- */
.svcgrid{display:grid;gap:16px;margin-top:clamp(34px,5vh,64px)}
@media(min-width:720px){.svcgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1120px){.svcgrid{grid-template-columns:repeat(3,1fr)}}

.svccard{position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--line,#DCD9D0);
  background:#FBFAF7;display:flex;flex-direction:column;
  transition:transform .55s var(--e),box-shadow .55s var(--e),border-color .4s}
.dark .svccard{background:#151513;border-color:#232321}
.svccard:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(14,14,14,.13);
  border-color:var(--c)}
.dark .svccard:hover{box-shadow:0 22px 44px rgba(0,0,0,.5)}
.svccard .art{background:color-mix(in srgb, var(--c) 9%, transparent);
  display:flex;align-items:center;justify-content:center;padding:6px 0}
.dark .svccard .art{background:color-mix(in srgb, var(--c) 15%, #0E0E0E)}
@supports not (background:color-mix(in srgb,red 9%,transparent)){
  .svccard .art{background:#EFEDE7}.dark .svccard .art{background:#191917}
}
svg.svcart{width:100%;height:auto;max-height:170px;display:block}
.svccard .art{overflow:hidden}
.svccard:hover svg.svcart{transform:scale(1.04)}
svg.svcart{transition:transform .7s var(--e)}
.svccard .txt{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.svccard .n{font-family:var(--m);font-size:10.5px;letter-spacing:.2em;color:var(--c)}
/* The heading must set its own colour. Inside a dark section it was
   inheriting chalk while sitting on a white card — white on white.
   To use the service accent instead, change this to: color:var(--c) */
.svccard h3{font-size:clamp(20px,2.2vw,27px);margin:10px 0 8px;
  letter-spacing:-.03em;color:var(--ink)}
.dark .svccard h3{color:var(--paper)}
.svccard p{color:var(--grey);font-size:15px;line-height:1.5}
.dark .svccard p{color:#A8A69F}
.svccard ul{list-style:none;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:7px}
.svccard li{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line,#DCD9D0);border-radius:99px;padding:5px 11px;color:var(--grey)}
.dark .svccard li{border-color:#2C2C29;color:#8F8D86}


/* ---------- service illustration animation ----------
   Plays once when the card scrolls into view, and replays on hover.
   Everything is transform/opacity so it stays on the compositor; nothing
   animates layout. Fully disabled under prefers-reduced-motion. */

svg.svcart .a-draw{stroke-dasharray:1;stroke-dashoffset:1}
svg.svcart .a-dot{transform-box:fill-box;transform-origin:center;
  opacity:0;transform:scale(.4)}
svg.svcart .a-cell{transform-box:fill-box;transform-origin:center;
  opacity:0;transform:scale(.72)}
svg.svcart .a-rise{transform-box:fill-box;transform-origin:left center;
  transform:scaleX(0)}
svg.svcart .a-wipe{transform-box:fill-box;transform-origin:left center;
  transform:scaleX(0)}
svg.svcart .a-card{transform-box:fill-box;transform-origin:center;
  opacity:0;transform:scale(.9)}
svg.svcart .a-btn{transform-box:fill-box;transform-origin:left center;
  opacity:0;transform:scale(.6)}
svg.svcart .a-blades{transform-box:fill-box;transform-origin:center;
  transform:rotate(-38deg);opacity:0}
svg.svcart .a-iris{transform-box:fill-box;transform-origin:center;
  transform:scale(.4)}
svg.svcart .a-hoop{transform-box:fill-box;transform-origin:center;
  opacity:0;transform:scale(.85)}
svg.svcart .a-frame{stroke-dasharray:none}

/* the play state */
.svccard.in svg.svcart .a-draw{animation:artDraw .95s var(--e) forwards}
.svccard.in svg.svcart .d2{animation-delay:.16s}
.svccard.in svg.svcart .b1{animation-delay:.10s}
.svccard.in svg.svcart .b2{animation-delay:.20s}
.svccard.in svg.svcart .b3{animation-delay:.30s}

.svccard.in svg.svcart .a-hoop{animation:artPop .7s var(--e) .05s forwards}
.svccard.in svg.svcart .a-card{animation:artPop .7s var(--e) .08s forwards}
.svccard.in svg.svcart .a-iris{animation:artIris .8s var(--e) .25s forwards}
.svccard.in svg.svcart .a-blades{animation:artOpen .9s var(--e) .3s forwards}
.svccard.in svg.svcart .a-rise{animation:artWipe .7s var(--e) .3s forwards}
.svccard.in svg.svcart .r2{animation-delay:.4s}
.svccard.in svg.svcart .a-wipe{animation:artWipe .6s var(--e) forwards}
.svccard.in svg.svcart .w1{animation-delay:.28s}
.svccard.in svg.svcart .w2{animation-delay:.40s}
.svccard.in svg.svcart .a-btn{animation:artPop .6s var(--e) .55s forwards}
.svccard.in svg.svcart .a-cell{animation:artCell .5s var(--e) forwards}
.svccard.in svg.svcart .a-cell:nth-of-type(1){animation-delay:.05s}
.svccard.in svg.svcart .a-cell:nth-of-type(2){animation-delay:.10s}
.svccard.in svg.svcart .a-cell:nth-of-type(3){animation-delay:.15s}
.svccard.in svg.svcart .a-cell:nth-of-type(4){animation-delay:.12s}
.svccard.in svg.svcart .a-cell:nth-of-type(5){animation-delay:.30s}
.svccard.in svg.svcart .a-cell:nth-of-type(6){animation-delay:.18s}
.svccard.in svg.svcart .a-cell:nth-of-type(7){animation-delay:.22s}
.svccard.in svg.svcart .a-cell:nth-of-type(8){animation-delay:.26s}
.svccard.in svg.svcart .a-cell:nth-of-type(9){animation-delay:.30s}
.svccard.in svg.svcart .a-dot{animation:artDot .7s var(--e) .55s forwards}
.svccard.in svg.svcart .a-climb{animation:artClimb .8s var(--e) .5s forwards}

@keyframes artDraw{to{stroke-dashoffset:0}}
@keyframes artDot{0%{opacity:0;transform:scale(.4)}
  60%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@keyframes artClimb{0%{opacity:0;transform:translateY(14px) scale(.4)}
  60%{opacity:1;transform:translateY(0) scale(1.18)}
  100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes artCell{to{opacity:var(--o,1);transform:scale(1)}}
@keyframes artPop{to{opacity:1;transform:scale(1)}}
@keyframes artWipe{to{transform:scaleX(1)}}
@keyframes artIris{to{transform:scale(1)}}
@keyframes artOpen{to{transform:rotate(0);opacity:1}}

/* hover: a small second beat, not a full replay — replaying the whole
   sequence on every mouseover is distracting rather than delightful */
.svccard:hover svg.svcart .a-dot{animation:artNudge .6s var(--e)}
.svccard:hover svg.svcart .a-live{animation:artLive .6s var(--e)}
.svccard:hover svg.svcart .a-blades{animation:artSpin 1.1s var(--e)}
@keyframes artNudge{0%,100%{transform:scale(1)}45%{transform:scale(1.22)}}
@keyframes artLive{0%,100%{transform:scale(1)}45%{transform:scale(1.14)}}
@keyframes artSpin{0%{transform:rotate(0)}100%{transform:rotate(60deg)}}

@media(prefers-reduced-motion:reduce){
  svg.svcart *{animation:none!important;opacity:1!important;
    transform:none!important;stroke-dashoffset:0!important}
}


/* ---------- service detail pages ---------- */
.svcbody{padding-bottom:clamp(30px,5vh,60px)}
.svcintro{max-width:60ch}
.svcintro p{font-size:clamp(16px,1.9vw,20px);line-height:1.62;color:var(--ink);
  margin-bottom:18px}
.whatgrid{display:grid;gap:14px}
@media(min-width:640px){.whatgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.whatgrid{grid-template-columns:repeat(3,1fr)}}
.whatcard{border:1px solid var(--line,#DEDBD3);border-radius:16px;padding:22px 24px;
  background:#FBFAF7;transition:border-color .4s var(--e),transform .5s var(--e)}
.whatcard:hover{border-color:var(--accent,var(--blue));transform:translateY(-3px)}
.whatcard h3{font-size:17px;margin-bottom:8px;letter-spacing:-.02em;color:var(--ink)}
.whatcard p{font-size:14.5px;line-height:1.55;color:var(--grey)}

.stepgrid{display:grid;gap:16px;margin-top:clamp(26px,4vh,44px)}
@media(min-width:760px){.stepgrid{grid-template-columns:repeat(4,1fr)}}
.stepcard{border-top:2px solid rgba(242,240,234,.2);padding-top:18px}
.stepcard .n{font-family:var(--m);font-size:10.5px;letter-spacing:.2em;
  color:var(--accent,var(--blue))}
.stepcard h3{font-size:21px;margin:10px 0 8px;letter-spacing:-.03em;color:var(--paper)}
.stepcard p{font-size:14px;line-height:1.55;color:#A8A69F}

/* ---------- faq ---------- */
.faq{margin-top:clamp(26px,4vh,44px);max-width:60ch}
.faqitem{border-bottom:1px solid rgba(242,240,234,.16)}
.faqitem summary{list-style:none;cursor:pointer;padding:20px 34px 20px 0;position:relative;
  font-size:clamp(16px,2vw,20px);font-weight:600;color:var(--paper)}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem summary::after{content:'+';position:absolute;right:0;top:50%;
  transform:translateY(-50%);font-size:22px;color:var(--blue);transition:transform .3s var(--e)}
.faqitem[open] summary::after{content:'\2212';color:var(--coral)}
.faqitem p{color:#A8A69F;font-size:15.5px;line-height:1.62;padding:0 0 22px;max-width:56ch}


/* ---------- blog ---------- */
.bgrid{display:grid;gap:18px;margin-top:clamp(30px,5vh,56px)}
@media(min-width:820px){.bgrid{grid-template-columns:repeat(2,1fr)}}
.bcard{display:flex;flex-direction:column;border:1px solid var(--line,#DEDBD3);
  border-radius:18px;overflow:hidden;background:#FBFAF7;text-decoration:none;
  color:var(--ink);transition:transform .5s var(--e),border-color .4s var(--e),
  box-shadow .5s var(--e)}
.bcard:hover{transform:translateY(-5px);border-color:var(--c,var(--blue));
  box-shadow:0 20px 40px rgba(14,14,14,.10)}
.bthumb{display:block;overflow:hidden;aspect-ratio:16/10;background:#EFEDE7}
.bthumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--e)}
.bcard:hover .bthumb img{transform:scale(1.04)}
.btxt{display:block;padding:22px 24px 26px}
.bkick{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c,var(--blue))}
.bcard h2{font-size:clamp(19px,2.2vw,23px);line-height:1.22;letter-spacing:-.028em;
  margin:12px 0 10px;color:var(--ink)}
.bcard p{font-size:14.5px;line-height:1.55;color:var(--grey);margin-bottom:16px}
.bmore{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c,var(--blue))}
.bmore em{font-style:normal}

/* ---------- blog article ---------- */
.bh1{max-width:20ch}
.bmeta{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#9C9A93;margin-top:20px}
.bhero{width:100%;height:auto;border-radius:18px;display:block;
  margin:clamp(24px,4vh,40px) 0 clamp(30px,5vh,50px)}
.post{max-width:720px;padding-bottom:clamp(50px,8vh,100px)}
.post h2{font-size:clamp(23px,3vw,31px);line-height:1.18;letter-spacing:-.028em;
  margin:44px 0 14px}
.post h3{font-size:clamp(18px,2.2vw,21px);letter-spacing:-.02em;margin:30px 0 10px}
.post p{font-size:17px;line-height:1.68;margin-bottom:20px;color:var(--ink)}
.post .pull{border-left:3px solid var(--blue);padding:6px 0 6px 22px;margin:34px 0;
  font-weight:700;font-size:clamp(19px,2.5vw,25px);line-height:1.34;
  letter-spacing:-.02em}
.post .anote{background:#FFF4F1;border:1px solid #F6C9BC;border-radius:12px;
  padding:16px 20px;margin:28px 0;font-size:15px;line-height:1.6;color:#7A2A10}
.post .anote strong{color:#B32D0C}
.post ol.steps{margin:22px 0 26px;padding-left:0;list-style:none;counter-reset:s}
.post ol.steps li{counter-increment:s;position:relative;padding-left:42px;
  margin-bottom:16px;font-size:17px;line-height:1.62}
.post ol.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;
  left:0;top:2px;font-family:var(--m);font-size:11px;letter-spacing:.1em;
  color:var(--blue)}
.bsrc{margin:44px 0 0;padding:20px 22px;border:1px solid var(--line,#DEDBD3);
  border-radius:14px;background:#FBFAF7}
.bsrc .mono{font-family:var(--m);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.bsrc ul{margin:0;padding-left:18px}
.bsrc li{font-size:14.5px;line-height:1.6;color:var(--grey)}
.bsrc a{color:var(--blue)}
.bfaq{margin-top:52px;padding-top:34px;border-top:1px solid var(--line,#DEDBD3)}
.bfaq h2{margin-top:0}
.bfaq .faqitem{border-bottom:1px solid var(--line,#DEDBD3)}
.bfaq .faqitem summary{color:var(--ink);font-size:16px;padding:16px 30px 16px 0}
.bfaq .faqitem summary::after{color:var(--blue)}
.bfaq .faqitem p{color:var(--grey);font-size:15.5px;padding-bottom:18px;margin:0}
.bcta{margin-top:52px;background:var(--ink);color:var(--paper);border-radius:18px;
  padding:clamp(28px,4vw,44px)}
.bcta h2{margin:0 0 12px;color:var(--paper);font-size:clamp(22px,3vw,30px)}
.bcta p{color:#A8A69F;font-size:16px;max-width:52ch;margin-bottom:22px}
.blinks{margin-top:46px}
.blinks .mono{font-family:var(--m);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);margin-bottom:12px}
.blinkrow{display:grid;gap:10px}
@media(min-width:600px){.blinkrow{grid-template-columns:repeat(2,1fr)}}
.blink{display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--line,#DEDBD3);border-radius:12px;padding:15px 18px;
  text-decoration:none;color:var(--ink);font-weight:500;font-size:15px;
  background:#FBFAF7;transition:border-color .3s,transform .3s}
.blink:hover{border-color:var(--blue);transform:translateY(-2px)}
.blink em{font-style:normal;color:var(--blue)}


/* ---------- about ---------- */
.abt{display:grid;gap:20px;padding-top:clamp(44px,7vh,86px);
  padding-bottom:clamp(20px,3vh,40px)}
@media(min-width:860px){.abt{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:56px;align-items:start}}
.abtcol h2{font-size:clamp(24px,3.4vw,38px);line-height:1.14;letter-spacing:-.03em;
  margin-top:12px;max-width:16ch}
.abtcol p{font-size:16.5px;line-height:1.68;color:var(--grey);margin-bottom:16px;
  max-width:62ch}
.abtcol p strong{color:var(--ink)}
.notfor{border-left:3px solid var(--coral);padding-left:20px;margin-top:24px}

.chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;
  margin-top:clamp(26px,4vh,42px)}
.chain span{font-family:var(--m);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid #2C2C29;border-radius:99px;
  padding:9px 16px;color:var(--paper)}
.chain em{font-style:normal;color:var(--blue);font-size:15px}

.abtbeliefs{padding-top:clamp(50px,8vh,96px);padding-bottom:clamp(30px,5vh,60px)}
.beliefgrid{display:grid;gap:16px;margin-top:clamp(24px,4vh,40px)}
@media(min-width:760px){.beliefgrid{grid-template-columns:repeat(2,1fr)}}
.belief{border:1px solid var(--line,#DEDBD3);border-radius:16px;padding:24px 26px;
  background:#FBFAF7}
.belief .n{font-family:var(--m);font-size:10.5px;letter-spacing:.2em}
.belief h3{font-size:clamp(18px,2.2vw,22px);letter-spacing:-.025em;margin:10px 0 10px}
.belief p{font-size:15px;line-height:1.62;color:var(--grey)}

/* ---------- mobile spacing ----------
   Everything below 640px was inheriting desktop rhythm, which reads as
   clutter on a phone. Line length, leading and vertical gaps all open up. */
@media(max-width:640px){
  .wrap{padding-left:22px;padding-right:22px}
  .pad{padding-top:56px;padding-bottom:56px}
  .phead{padding-top:78px;padding-bottom:26px}
  h1{line-height:1.04;letter-spacing:-.035em}
  .lead{font-size:16.5px;line-height:1.6;margin-top:16px}
  .post p,.svcintro p,.abtcol p{font-size:16px;line-height:1.72;margin-bottom:18px}
  .post h2{font-size:24px;margin:34px 0 12px}
  .post h3{font-size:18px;margin:24px 0 8px}
  .whatcard,.belief,.cbox{padding:20px}
  .whatcard h3,.belief h3{font-size:17px}
  .whatcard p,.belief p{font-size:14.5px;line-height:1.6}
  .svccard .txt{padding:20px}
  .svcgrid,.whatgrid,.beliefgrid,.bgrid,.stepgrid{gap:12px}
  .band{padding:32px 24px}
  .band h2{font-size:26px;line-height:1.15}
  .band p{font-size:15px;line-height:1.6}
  .stats{gap:26px}
  .stats .v{font-size:40px}
  .abt{gap:24px;padding-top:40px}
  .abtcol h2{font-size:24px}
  .bcta{padding:26px 22px}
  .bcta h2{font-size:22px}
  .faq,.bfaq{margin-top:30px}
  .faqitem summary{font-size:15.5px;padding:16px 30px 16px 0}
  .faqitem p{font-size:14.5px;line-height:1.6}
  #sectorList{gap:7px}
  #sectorList li{font-size:13.5px;padding:8px 13px}
  .fields{gap:12px}
  footer{padding-top:36px}
  footer .cols{gap:28px}
}


/* ---------- in-article tool promo ---------- */
.toolpromo{border:1px solid var(--c,var(--blue));border-radius:18px;
  padding:26px 28px;margin:44px 0;background:#FBFAF7}
.toolpromo .tbadge{margin-top:0}
.toolpromo h2{margin:14px 0 8px;font-size:clamp(20px,2.4vw,25px)}
.toolpromo p{font-size:15px;line-height:1.6;color:var(--grey);margin-bottom:18px;
  max-width:48ch}

/* ---------- tools ---------- */
.toolgrid{display:grid;gap:16px;margin-top:clamp(30px,5vh,56px)}
@media(min-width:820px){.toolgrid{grid-template-columns:repeat(3,1fr)}}
.toolcard{display:flex;flex-direction:column;border:1px solid var(--line,#DEDBD3);
  border-radius:18px;padding:26px 26px 24px;background:#FBFAF7;text-decoration:none;
  color:var(--ink);transition:transform .5s var(--e),border-color .4s var(--e),
  box-shadow .5s var(--e)}
.toolcard:hover{transform:translateY(-5px);border-color:var(--c,var(--blue));
  box-shadow:0 20px 40px rgba(14,14,14,.10)}
.tnum{font-family:var(--m);font-size:10.5px;letter-spacing:.2em;color:var(--c,var(--blue))}
.tbadge{display:inline-block;width:fit-content;margin-top:14px;font-family:var(--m);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
  border:1px solid var(--line,#DEDBD3);border-radius:99px;padding:5px 11px}
.toolcard h2{font-size:clamp(19px,2.2vw,23px);line-height:1.2;letter-spacing:-.028em;
  margin:16px 0 10px}
.toolcard p{font-size:14.5px;line-height:1.6;color:var(--grey);margin-bottom:20px;flex:1}
.topen{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c,var(--blue))}
.topen em{font-style:normal}

.soongrid{display:grid;gap:14px;margin-top:clamp(24px,4vh,40px)}
@media(min-width:760px){.soongrid{grid-template-columns:repeat(3,1fr)}}
.soon{border-top:2px solid rgba(242,240,234,.18);padding-top:16px}
.soon h3{font-size:17px;letter-spacing:-.02em;margin-bottom:8px;color:var(--paper)}
.soon p{font-size:14px;line-height:1.6;color:#A8A69F}

/* ---------- sectors ---------- */
.sectors{display:grid;gap:26px;margin-top:clamp(30px,5vh,56px)}
@media(min-width:900px){.sectors{grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}}
/* The hero H1 carries the keyword phrase but keeps the eyebrow's
   appearance — the logo below it is the visual, not the heading. */
.heroh1{font-family:var(--m);font-size:clamp(10px,1.1vw,12.5px);
  letter-spacing:.22em;text-transform:uppercase;color:var(--grey);
  font-weight:400;margin:0 0 clamp(18px,3vh,34px);line-height:1.6}

/* ---------- home: featured work ---------- */
.fcard{display:block;border:1px solid var(--line,#DEDBD3);border-radius:16px;
  overflow:hidden;background:#FBFAF7;text-decoration:none;color:var(--ink);
  transition:transform .45s var(--e),border-color .35s var(--e),box-shadow .45s var(--e)}
.fcard:hover{transform:translateY(-4px);border-color:var(--blue);
  box-shadow:0 18px 38px rgba(14,14,14,.10)}
.fthumb{display:block;overflow:hidden;background:#0E0E0E;aspect-ratio:16/10}
.fthumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--e)}
.fcard:hover .fthumb img{transform:scale(1.03)}
.ftxt{display:block;padding:20px 22px 22px}
.fsec{font-family:var(--m);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue)}
.fcard h3{font-size:19px;letter-spacing:-.025em;margin:10px 0 8px}
.fcard p{font-size:14px;line-height:1.55;color:var(--grey)}
.dark .fcard{background:#151513;border-color:#232321;color:var(--paper)}
.dark .fcard h3{color:var(--paper)}
.dark .fcard p{color:#A8A69F}

/* ---------- reference table in a post ---------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:26px 0;
  border:1px solid var(--line,#DEDBD3);border-radius:12px}
table.sizes{width:100%;border-collapse:collapse;font-size:14.5px;min-width:440px}
table.sizes th{background:var(--ink);color:var(--paper);text-align:left;padding:11px 14px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
table.sizes td{padding:10px 14px;border-top:1px solid var(--line,#DEDBD3);color:var(--grey)}
table.sizes td b{color:var(--ink);font-variant-numeric:tabular-nums}
table.sizes tbody tr:nth-child(odd){background:#FBFAF7}

/* ---------- work ---------- */
.wfilters{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(26px,4vh,44px) 0 22px}
.wfilter{font:inherit;font-size:13px;font-weight:500;cursor:pointer;
  border:1px solid var(--line,#DEDBD3);background:#fff;color:var(--grey);
  padding:8px 15px;border-radius:99px;transition:.25s var(--e)}
.wfilter:hover{color:var(--ink)}
.wfilter.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.wgrid{display:grid;gap:16px}
@media(min-width:760px){.wgrid{grid-template-columns:repeat(2,1fr)}}
.wcard{display:block;text-align:left;font:inherit;cursor:pointer;padding:0;
  border:1px solid var(--line,#DEDBD3);border-radius:18px;overflow:hidden;
  background:#FBFAF7;color:var(--ink);transition:transform .45s var(--e),
  border-color .35s var(--e),box-shadow .45s var(--e)}
.wcard:hover{transform:translateY(-5px);border-color:var(--c,var(--blue));
  box-shadow:0 20px 40px rgba(14,14,14,.10)}
.wcard[hidden]{display:none}
.wthumb{display:block;overflow:hidden;background:#0E0E0E;aspect-ratio:16/10}
.wthumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--e)}
.wcard:hover .wthumb img{transform:scale(1.03)}
.wtxt{display:block;padding:22px 24px 24px}
.wsec{font-family:var(--m);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c,var(--blue))}
.wcard h2{font-size:clamp(19px,2.2vw,23px);letter-spacing:-.028em;margin:11px 0 9px}
.wcard p{font-size:14.5px;line-height:1.6;color:var(--grey);margin-bottom:15px}
.wtags{display:flex;flex-wrap:wrap;gap:6px}
.wtags i{font-style:normal;font-family:var(--m);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey);border:1px solid var(--line,#DEDBD3);
  border-radius:99px;padding:4px 9px}

/* lightbox — the boards are detailed, so they need to be viewable full size */
.wlight{position:fixed;inset:0;z-index:120;background:rgba(14,14,14,.94);
  display:grid;place-items:center;padding:clamp(16px,4vw,50px)}
.wlight[hidden]{display:none}
.wfig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;
  align-items:center;gap:14px}
.wfig img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.wfig figcaption{font-family:var(--m);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#8C8A84;text-align:center}
.wclose,.wnav{position:absolute;background:none;border:0;color:var(--paper);
  cursor:pointer;line-height:1;padding:12px}
.wclose{top:14px;right:18px;font-size:34px}
.wnav{top:50%;transform:translateY(-50%);font-size:44px;opacity:.6}
.wnav:hover{opacity:1}
.wnav.prev{left:8px}
.wnav.next{right:8px}
@media(max-width:640px){.wnav{font-size:32px}.wfig img{max-height:70vh}}

/* ---------- industries hub ---------- */
.indgrid{display:grid;gap:14px;margin-top:clamp(30px,5vh,56px)}
@media(min-width:640px){.indgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.indgrid{grid-template-columns:repeat(3,1fr)}}
.indcard{display:flex;flex-direction:column;border:1px solid var(--line,#DEDBD3);
  border-radius:16px;padding:24px;background:#FBFAF7;text-decoration:none;
  color:var(--ink);transition:transform .45s var(--e),border-color .35s var(--e),
  box-shadow .45s var(--e)}
.indcard:hover{transform:translateY(-4px);border-color:var(--c,var(--blue));
  box-shadow:0 16px 34px rgba(14,14,14,.09)}
.indcard h3{font-size:18px;letter-spacing:-.02em;margin-bottom:9px;color:var(--ink)}
.indcard p{font-size:14.5px;line-height:1.6;color:var(--grey);margin-bottom:16px;flex:1}
.indgo{font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c,var(--blue))}
.indgo em{font-style:normal}

/* ---------- sectors as chips ----------
   Twenty-two sectors in a two-column list runs to a full screen. As chips
   they read as breadth at a glance, which is what the section is for. */
#sectorList{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0}
#sectorList li{display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line,#DEDBD3);border-radius:99px;padding:9px 16px;
  font-size:14.5px;line-height:1;transition:border-color .3s var(--e),
  transform .3s var(--e)}
#sectorList li:hover{transform:translateY(-2px)}
#sectorList li i{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
#sectorList li.has-page{border-color:rgba(46,91,255,.35)}
#sectorList li.has-page a{display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;color:inherit}
#sectorList li.has-page:hover{border-color:var(--blue)}
#sectorList li.has-page:after{content:"\2192";font-size:12px;color:var(--blue);
  margin-left:2px}
.dark #sectorList li{border-color:#2C2C29;color:var(--paper)}
.dark #sectorList li.has-page{border-color:rgba(46,91,255,.5)}
.dark #sectorList li{border-color:#232321}
#sectorList i{width:9px;height:9px;border-radius:50%;flex:0 0 9px}


/* ---------- clients ---------- */
.clients{margin-top:clamp(30px,5vh,56px)}
#clientWall{display:grid;gap:1px;background:var(--line,#DCD9D0);
  border:1px solid var(--line,#DCD9D0);border-radius:18px;overflow:hidden;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){#clientWall{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){#clientWall{grid-template-columns:repeat(4,1fr)}}
.dark #clientWall{background:#232321;border-color:#232321}
.clogo{background:var(--paper);aspect-ratio:16/9;display:flex;align-items:center;
  justify-content:center;padding:20px;transition:background .4s}
.dark .clogo{background:#151513}
.clogo:hover{background:#fff}
.dark .clogo:hover{background:#191917}
.clogo img{max-height:54px;width:auto;max-width:82%;object-fit:contain;
  filter:grayscale(1);opacity:.75;transition:filter .45s var(--e),opacity .45s var(--e)}
.clogo:hover img{filter:none;opacity:1}
.clogo span{font-family:var(--d);font-weight:700;font-size:clamp(14px,1.6vw,19px);
  letter-spacing:-.02em;color:var(--grey);text-align:center}
.dark .clogo span{color:#8C8A84}
#clientNote{display:none;font-family:var(--m);font-size:10.5px;letter-spacing:.12em;
  color:var(--grey);margin-top:16px;text-transform:uppercase}

/* ---------- portfolio ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 clamp(28px,4vh,48px)}
.filters button{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 16px;border-radius:99px;border:1.5px solid #DCD9D0;background:none;cursor:pointer;
  color:var(--grey);transition:.35s var(--e)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.grid{display:grid;gap:18px}
@media(min-width:700px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}
  .grid .card.wide{grid-column:span 2}}
.card{position:relative;border-radius:20px;overflow:hidden;display:block;isolation:isolate;
  aspect-ratio:4/3;transition:opacity .5s var(--e),transform .5s var(--e)}
.card.hide{display:none}
.card .bg{position:absolute;inset:0;z-index:-2;transition:transform .9s var(--e)}
.card::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent 60%)}
.card:hover .bg{transform:scale(1.06)}
.card .meta{position:absolute;inset:auto 0 0;padding:24px;color:#fff}
.card .meta span{font-family:var(--m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.78)}
.card .meta h3{font-size:clamp(19px,2.2vw,28px);margin-top:6px;
  -webkit-text-stroke:1px #fff;color:transparent;transition:color .5s var(--e)}
.card:hover .meta h3{color:#fff}
.card .meta p{font-size:14px;color:rgba(255,255,255,.86);margin-top:4px}
.ph{position:absolute;top:14px;right:14px;z-index:1;font-family:var(--m);font-size:9.5px;
  letter-spacing:.14em;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.4);
  border-radius:99px;padding:4px 9px}

/* ---------- case study ---------- */
.case .hero-img{height:clamp(280px,52vh,620px);border-radius:24px;margin-top:20px}
.casegrid{display:grid;gap:34px;padding:clamp(50px,8vh,100px) 0}
@media(min-width:860px){.casegrid{grid-template-columns:260px 1fr;gap:60px}}
.casegrid h3{font-size:clamp(22px,2.6vw,32px)}
.casegrid p{color:#4A4842;max-width:60ch;margin-top:14px}
.dark .casegrid p{color:#A8A69F}
.stats{display:grid;gap:26px;grid-template-columns:repeat(2,1fr);margin-top:34px}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats .v{font-family:var(--d);font-weight:800;font-size:clamp(34px,5vw,60px);line-height:1}
.stats .k{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);margin-top:8px}

/* ---------- contact: two columns ----------
   The form was floating in a single column with half the page empty. The
   aside answers the questions people actually have before they submit —
   how fast, what to include, and how else to reach you. */
.contactgrid{display:grid;gap:34px;margin-top:clamp(28px,4vh,48px)}
@media(min-width:900px){
  .contactgrid{grid-template-columns:minmax(0,1.1fr) minmax(290px,.9fr);gap:48px;
    align-items:start}
  .cinfo{position:sticky;top:104px}
}
.cinfo{display:grid;gap:14px}
.cbox{border:1px solid var(--line,#DEDBD3);border-radius:16px;padding:20px 22px;
  background:#FBFAF7}
.cbox .mono{font-family:var(--m);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);margin-bottom:14px}

.steps{list-style:none;margin:0;display:grid;gap:16px}
.steps li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px}
.steps i{width:10px;height:10px;border-radius:50%;margin-top:6px;grid-row:1/3}
.steps b{font-size:14.5px;letter-spacing:-.01em}
.steps span{font-size:13px;color:var(--grey);line-height:1.5}

.ticks{list-style:none;margin:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:20px;font-size:13.5px;color:var(--grey);
  line-height:1.5}
.ticks li:before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:50%;background:var(--blue)}

.reach a{display:flex;align-items:center;gap:11px;padding:9px 0;text-decoration:none;
  color:var(--ink);font-size:14px;border-bottom:1px solid var(--line,#DEDBD3);
  transition:color .3s var(--e)}
.reach a:last-of-type{border-bottom:0}
.reach a:hover{color:var(--blue)}
.reach a i{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.reach .note{font-family:var(--m);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grey);margin-top:14px}

.cbox.quiet{background:transparent;border-style:dashed}
.cbox.quiet p{font-size:13px;color:var(--grey);line-height:1.6;margin:0}


/* ---------- gallery carousel ---------- */
.gallery{position:relative}
.grail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;cursor:grab}
.grail::-webkit-scrollbar{display:none}
.grail.dragging{cursor:grabbing;scroll-snap-type:none}
.gslide{flex:0 0 min(88%,620px);scroll-snap-align:start;border-radius:18px;overflow:hidden;
  aspect-ratio:4/3;background:#151513}
.gslide img,.gslide video,.gslide span{width:100%;height:100%;display:block;object-fit:cover}
.gnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
  border-radius:50%;border:0;cursor:pointer;background:rgba(14,14,14,.78);color:#F2F0EA;
  font-size:17px;line-height:1;backdrop-filter:blur(8px);
  transition:opacity .3s var(--e),background .3s;z-index:2}
.dark .gnav{background:rgba(242,240,234,.9);color:#0E0E0E}
.gnav:hover{background:var(--blue);color:#fff}
.gnav.prev{left:10px}.gnav.next{right:10px}
.gnav:disabled{opacity:0;pointer-events:none}
@media(hover:none){.gnav{display:none}}

/* ---------- process ---------- */
.beats{display:grid;gap:0}
.beat{padding:clamp(34px,8vh,90px) 0;border-bottom:1px solid #232321;opacity:.28;
  transition:opacity .6s var(--e)}
.beat.on{opacity:1}
.beat .n{font-family:var(--m);font-size:11px;letter-spacing:.2em;color:var(--blue)}
.beat h3{font-size:clamp(28px,4.4vw,56px);margin:12px 0 10px}
.beat p{color:#A8A69F;max-width:44ch}
.procgrid{display:grid;gap:40px}
@media(min-width:960px){.procgrid{grid-template-columns:1fr 1fr;align-items:start}}
.sticky{position:sticky;top:16vh}

/* ---------- about ---------- */
.values{display:grid;gap:1px;background:#DCD9D0;border:1px solid #DCD9D0;border-radius:20px;
  overflow:hidden;margin-top:44px}
@media(min-width:760px){.values{grid-template-columns:repeat(2,1fr)}}
.values div{background:var(--paper);padding:30px 28px}
.values h3{font-size:19px;margin-bottom:8px}
.values p{color:var(--grey);font-size:15px}

/* ---------- contact ---------- */
.fields{display:grid;gap:14px;margin-top:clamp(30px,5vh,56px);max-width:760px}
@media(min-width:720px){.fields{grid-template-columns:1fr 1fr}.fields .full{grid-column:1/-1}}
.f input,.f select,.f textarea{width:100%;padding:19px 18px;border-radius:16px;font:inherit;
  font-size:16px;border:1.5px solid #D5D2C9;background:#FBFAF7;color:var(--ink);
  transition:transform .55s var(--e),border-color .35s,box-shadow .35s}
.f textarea{min-height:132px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--ink);
  box-shadow:0 10px 26px rgba(14,14,14,.09)}
.f.jelly input,.f.jelly select,.f.jelly textarea{animation:jelly .62s var(--e)}
@keyframes jelly{0%{transform:scale(1,1)}22%{transform:scale(1.035,.94)}
  46%{transform:scale(.98,1.03)}68%{transform:scale(1.012,.99)}100%{transform:scale(1,1)}}
#send{position:relative;overflow:hidden;justify-content:center;width:100%}
#send .wax{position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:var(--blue);
  transition:transform .8s var(--e)}
#send.go .wax{transform:scaleX(1)}
#send span{position:relative;z-index:1}
#formStatus{grid-column:1/-1;font-size:14px;margin-top:4px;padding:12px 14px;border-radius:10px;
  display:none}
#formStatus.ok{display:block;background:#EEF6F0;border:1px solid #C4E0CD;color:#245C38}
#formStatus.err{display:block;background:#FFF4F1;border:1px solid #F6C9BC;color:#B32D0C}
#formStatus.warn{display:block;background:#FDF6E7;border:1px solid #EBD9A8;color:#7A5B10}
#send:disabled{opacity:.75;cursor:default}
#formAlt{grid-column:1/-1;font-size:13px;color:var(--grey);margin-top:2px}
#formAlt a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.reach{display:grid;gap:8px;margin-top:44px}
.reach a{font-family:var(--d);font-weight:700;font-size:clamp(19px,2.6vw,32px);
  letter-spacing:-.035em;display:inline-flex;align-items:center;gap:12px;width:fit-content}
.reach a i{width:9px;height:9px;border-radius:50%;background:var(--blue);
  transition:transform .45s var(--e)}
.reach a:hover i{transform:scale(2.1)}

/* ---------- shared CTA band + footer ---------- */
.band{background:var(--ink);color:var(--paper);border-radius:28px;
  padding:clamp(40px,7vw,84px);margin:clamp(60px,9vh,120px) 0}
.band h2{font-size:clamp(34px,6vw,84px);max-width:14ch}
.band p{color:#A8A69F;margin-top:16px;max-width:44ch}
.band .btn{margin-top:30px;background:var(--paper);color:var(--ink)}
footer{position:relative;z-index:4;background:var(--paper);
  padding:44px 0 calc(40px + env(safe-area-inset-bottom));border-top:1px solid #DCD9D0}
footer .cols{display:grid;gap:32px}
@media(min-width:860px){footer .cols{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
footer h4{font-family:var(--m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey);margin-bottom:14px;font-weight:400}
footer li{list-style:none;margin-bottom:9px}
footer a:hover{color:var(--ink)}
footer .base{margin-top:46px;padding-top:20px;border-top:1px solid #DCD9D0;display:flex;
  justify-content:space-between;gap:10px 16px;flex-wrap:wrap;font-family:var(--m);
  font-size:10.5px;letter-spacing:.12em;color:var(--grey);text-transform:uppercase;
  line-height:1.6}
footer .base span{flex:1 1 auto;min-width:0}
@media(max-width:560px){
  footer .base{flex-direction:column;gap:8px}
  footer .base span:last-child{opacity:.75}
  footer h4{margin-bottom:10px}
  footer .cols{gap:26px}
}
.dots3{display:inline-flex;gap:6px;margin-top:14px}
.dots3 i{width:8px;height:8px;border-radius:50%;display:block}

/* mobile action bar */
#bar{position:fixed;inset:auto 0 0;z-index:48;display:none;
  background:rgba(14,14,14,.95);backdrop-filter:blur(14px)}
#bar div{display:grid;grid-template-columns:repeat(3,1fr)}
#bar a{padding:15px 6px;text-align:center;font-size:12.5px;font-weight:600;color:#B9B7B0}
#bar a.hi{color:#6E90FF}
/* the fixed action bar is ~52px plus the phone's home indicator */
@media(max-width:860px){
  #bar{display:block}
  footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .nibs{bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* reveal */
/* Hidden only once JS has taken charge. If the script fails, .js-on is never
   set and every .rv element stays fully visible — a broken animation must
   never mean a blank page. */
.rv{opacity:1;transform:none}
.js-on .rv{opacity:0;transform:translateY(24px);
  transition:opacity .95s var(--e),transform .95s var(--e)}
.js-on .rv.in{opacity:1;transform:none}
.rv.in{opacity:1;transform:none}
.rv.s1{transition-delay:.06s}.rv.s2{transition-delay:.12s}.rv.s3{transition-delay:.18s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .tag .ln span{transform:none}.tag svg path{stroke-dashoffset:0}
  
}