/* ═══════════════════════════════════════════════════════════════════
   TWINROOT MEDIA — site stylesheet
   Palette: ink #011627, off-white #FDFFFC, teal #2EC4B6.
   Font: native system UI stack — zero external requests.

   Single source of truth for every page. Loaded by the Bricks child
   theme; Bricks theme styles are intentionally left empty so this file
   stays authoritative.
═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   TWINROOT MEDIA — shared stylesheet (all pages)
   Palette: original brand colors (ink #011627, off-white #FDFFFC,
   teal #2EC4B6). Font: native system UI stack — zero external requests.
═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════ TOKENS ═══════════════════ */
:root{
  --ink:#011627;            /* brand ink */
  --bg:#FDFFFC;             /* brand off-white */
  --teal:#2EC4B6;           /* brand teal */
  --teal-d:#1FA396;
  --teal-soft:#E4F6F4;      /* subtle teal tint */
  --tint:#F2F9F8;           /* subtle section tint */
  --sand:#F4EFE7;           /* subtle warm tint */
  --mistb:#EBF1F4;          /* subtle blue-grey tint */
  --body:rgba(1,22,39,.68);
  --faint:rgba(1,22,39,.42);
  --line:rgba(1,22,39,.12);
  --line-soft:rgba(1,22,39,.07);
  --ink-l1:rgba(253,255,252,.62);
  --ink-l2:rgba(253,255,252,.38);
  --line-d:rgba(253,255,252,.14);
  --eo:cubic-bezier(.22,1,.36,1); --es:cubic-bezier(.34,1.56,.64,1);
  --nav-h:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;font-size:16px;line-height:1.6}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--teal);color:var(--ink)}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4.5vw,56px)}

/* accent words — flat teal */
em{font-style:normal;color:var(--teal-d)}
.on-dark em{color:var(--teal)}

/* headings — sentence case, calm, big */
h1,h2,h3{font-weight:600;letter-spacing:-.03em;color:var(--ink);line-height:1.08}
.h-hero{font-size:clamp(42px,6.8vw,84px);line-height:1.03;letter-spacing:-.035em}
.h-sec{font-size:clamp(30px,4.2vw,52px)}
.lede{font-size:clamp(16px,1.35vw,18px);line-height:1.65;color:var(--body);max-width:56ch}

/* small caps kicker — premium bordered badge, teal accent */
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-d);margin-bottom:22px;padding:8px 16px 8px 13px;border:1px solid rgba(31,163,150,.22);border-radius:999px;background:rgba(46,196,182,.06)}
.kicker:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);flex:0 0 auto;box-shadow:0 0 0 3px var(--teal-soft)}
.on-dark .kicker{color:var(--teal);border-color:rgba(46,196,182,.32);background:rgba(46,196,182,.08)}
.on-dark .kicker:before{box-shadow:0 0 0 3px rgba(46,196,182,.16)}

/* numerals */
.n{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--teal-d)}

/* buttons — quiet pills */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:999px;font-size:14.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;transition:background .22s,color .22s,border-color .22s,transform .22s var(--eo)}
.btn .arw{display:inline-block;transition:transform .22s var(--eo)}
.btn:hover .arw{transform:translateX(4px)}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-ink:hover{background:#0A2A42;transform:translateY(-1px)}
.btn-teal{background:var(--teal);color:var(--ink);box-shadow:0 16px 32px -14px rgba(46,196,182,.5)}
.btn-teal:hover{background:#43D6C9;transform:translateY(-1px)}
.btn-line{border:1px solid var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-line-d{border:1px solid var(--line-d);color:var(--bg);background:transparent}
.btn-line-d:hover{border-color:var(--bg)}
.btn:active{transform:translateY(0) scale(.97)}
/* text link with arrow */
.u-link{display:inline-flex;align-items:baseline;gap:7px;font-size:14.5px;font-weight:600;color:var(--ink);transition:color .2s}
.u-link:hover{color:var(--teal-d)}
.u-link .arw{transition:transform .22s var(--eo)}
.u-link:hover .arw{transform:translateX(4px)}
/* circular arrow */
.go{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:16px;color:var(--ink);flex:0 0 auto;transition:background .25s,color .25s,border-color .25s,transform .3s var(--es)}

/* ═══════════════════ NAV ═══════════════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);background:rgba(253,255,252,.86);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.scrolled,.nav.dd-open{background:rgba(253,255,252,.98);border-bottom-color:var(--line-soft)}
.nav-in{max-width:1200px;margin:0 auto;height:100%;display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(14px,2.6vw,34px);padding:0 clamp(20px,4.5vw,56px)}
.logo{display:inline-flex;align-items:center;flex:0 0 auto;margin-right:auto;padding:10px 0}
.logo img{width:46px;height:46px;border-radius:50%;transition:transform .3s var(--es)}
.logo:hover img{transform:rotate(-6deg) scale(1.05)}
.nav-c{display:flex;align-items:center;gap:2px}
.nav-c>a,.nav-dd>a{font-size:14.5px;font-weight:500;color:var(--body);padding:9px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;transition:color .18s,background .18s}
.nav-c>a:hover,.nav-dd>a:hover,.nav-dd.is-open>a{color:var(--ink);background:rgba(1,22,39,.05)}
.nav-dd{position:static}
.nav-dd>a svg{width:9px;height:9px;opacity:.5;transition:transform .25s var(--eo)}
.nav-dd.is-open>a svg{transform:rotate(180deg)}
.nav-side{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.nav-side .btn{padding:11px 22px;font-size:13.5px}
.ham{display:none;width:42px;height:42px;align-items:center;justify-content:center;border-radius:50%;flex:0 0 auto;transition:background .2s}
.ham:hover{background:rgba(1,22,39,.05)}
.ham-icon{display:block;width:20px;height:12px;position:relative}
.ham-icon i{position:absolute;left:0;right:0;height:1.5px;background:var(--ink);border-radius:2px;transition:all .28s var(--eo)}
.ham-icon i:nth-child(1){top:0}.ham-icon i:nth-child(2){top:5.5px}.ham-icon i:nth-child(3){top:11px}
.ham.open .ham-icon i:nth-child(1){top:5.5px;transform:rotate(45deg)}
.ham.open .ham-icon i:nth-child(2){opacity:0}
.ham.open .ham-icon i:nth-child(3){top:5.5px;transform:rotate(-45deg)}

/* ═══════════ FULL-WIDTH MEGA PANELS ═══════════ */
.dd-panel{position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line-soft);box-shadow:0 40px 80px -40px rgba(1,22,39,.25);padding:clamp(30px,4vw,48px) 0 clamp(34px,4vw,52px);opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity .22s,transform .3s var(--eo)}
.nav-dd.is-open .dd-panel{opacity:1;pointer-events:auto;transform:none}
.mega-in{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4.5vw,56px)}
.mega-grid{display:grid;grid-template-columns:1fr 340px;gap:clamp(32px,4.5vw,72px);align-items:start}
.mega-label{display:block;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:20px}
.mega-links{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 18px}
.dd-a{display:flex;align-items:baseline;gap:13px;padding:13px 14px;border-radius:12px;transition:background .15s}
.dd-a:hover{background:var(--tint)}
.dd-n{flex:0 0 24px;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--teal-d)}
.dd-a strong{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.3}
.dd-a small{display:block;font-size:12.5px;color:var(--faint);line-height:1.45;margin-top:3px}
.mega-feat{background:var(--teal-soft);border-radius:16px;padding:26px 26px 24px}
.mega-feat .mega-label{color:var(--teal-d);margin-bottom:12px}
.mega-feat strong{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.3}
.mega-feat p{font-size:13px;color:var(--body);line-height:1.55;margin:8px 0 16px}
.mega-feat .u-link{font-size:13.5px;color:var(--teal-d)}
.mega-feat .u-link:hover{color:var(--ink)}

/* ═══════════ FULL-SCREEN MOBILE MENU — slides down from top ═══════════ */
.mn{position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden}
.mn.open{pointer-events:auto}
.mn-drawer{position:absolute;inset:0;width:100%;height:100%;background:var(--bg);display:flex;flex-direction:column;transform:translateY(-102%);transition:transform .55s var(--eo)}
.mn.open .mn-drawer{transform:none}
/* staggered link entrance */
.mn-body>*{opacity:0;transform:translateY(-16px);transition:opacity .45s var(--eo),transform .45s var(--eo)}
.mn.open .mn-body>*{opacity:1;transform:none}
.mn.open .mn-body>*:nth-child(1){transition-delay:.2s}
.mn.open .mn-body>*:nth-child(2){transition-delay:.26s}
.mn.open .mn-body>*:nth-child(3){transition-delay:.32s}
.mn.open .mn-body>*:nth-child(4){transition-delay:.38s}
.mn.open .mn-body>*:nth-child(5){transition-delay:.44s}
.mn-foot{opacity:0;transition:opacity .45s var(--eo) .5s}
.mn.open .mn-foot{opacity:1}
.mn-head{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);padding:0 clamp(20px,4.5vw,56px) 10px;border-bottom:1px solid var(--line-soft);flex-shrink:0}
.mn-close{width:33px!important;height:33px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:all .18s;padding:0}
.mn-close:hover{background:var(--ink);color:var(--bg)}
.mn-close svg{width:16px;height:16px}
.mn-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:clamp(16px,4vh,40px) clamp(20px,4.5vw,56px)}
.mn-link,.mn-dd-btn{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:16px 0;font-size:clamp(24px,6.5vw,32px);font-weight:600;letter-spacing:-.03em;color:var(--ink);border-bottom:1px solid var(--line-soft);-webkit-tap-highlight-color:transparent;transition:color .15s,padding-left .25s var(--eo)}
.mn-link:hover,.mn-dd-btn:hover,.mn-dd.open .mn-dd-btn{color:var(--teal-d);padding-left:8px}
.mn-dd-btn svg{width:18px;height:18px;opacity:.4;transition:transform .28s var(--eo)}
.mn-dd.open .mn-dd-btn svg{transform:rotate(180deg)}
.mn-dd-p{max-height:0;overflow:hidden;transition:max-height .34s var(--eo)}
.mn-dd.open .mn-dd-p{max-height:600px}
.mn-dd-p a{display:flex;align-items:baseline;gap:14px;padding:11px 0 11px 12px;font-size:16px;font-weight:500;color:var(--body);min-height:44px;-webkit-tap-highlight-color:transparent;transition:color .15s}
.mn-dd-p a:hover{color:var(--ink)}
.mn-dd-p .dd-n{flex:0 0 26px}
.mn-dd-p a:last-child{padding-bottom:18px}
.mn-foot{padding:18px clamp(20px,4.5vw,56px) calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--line-soft);display:grid;gap:12px;flex-shrink:0}
.mn-foot .btn{justify-content:center}
.mn-contact{text-align:center;font-size:13px;color:var(--faint)}
.mn-contact a{color:var(--teal-d);font-weight:600}

/* ═══════════════════ HERO ═══════════════════ */
.hero{background:var(--tint);padding:calc(var(--nav-h) + clamp(64px,9vw,120px)) 0 clamp(56px,7vw,88px)}
.hero-in{max-width:900px;margin:0 auto;text-align:center}
.hero h1{margin-bottom:28px}
.hero .lede{font-size:clamp(16.5px,1.5vw,19.5px);max-width:52ch;margin:0 auto}
.hero-ctas{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:38px;flex-wrap:wrap}
.hero-foot{margin-top:clamp(48px,7vw,84px);padding-top:26px;border-top:1px solid var(--line)}
.hero-facts{display:flex;justify-content:center;gap:clamp(24px,4vw,56px);flex-wrap:wrap}
.hero-facts div b{display:block;font-size:clamp(17px,1.7vw,20px);font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-bottom:2px}
.hero-facts div span{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

/* ═══════════ HERO — simplified, Google-inspired centered layout ═══════════ */
.hero-center{max-width:720px;margin:0 auto;text-align:center}
.hero-center .kicker{margin-bottom:26px}
.hero-center .h-hero{margin:0 auto 20px;max-width:15ch;font-weight:500}
.hero-center .lede{margin:0 auto;max-width:46ch}
.hero-center .hero-ctas{justify-content:center;margin-top:36px}
.hero-facts-simple{margin-top:48px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:13.5px;font-weight:500;color:var(--faint)}
.hero-facts-simple i{width:3px;height:3px;border-radius:50%;background:var(--faint);opacity:.6}
@media(max-width:600px){
  .hero-facts-simple{gap:8px;font-size:12.5px}
}

/* ═══════════ CLIENT LOGOS ═══════════ */
.clients-sec{padding:clamp(34px,4.5vw,52px) 0;border-bottom:1px solid var(--line-soft);border-top:1px solid var(--line-soft)}
.clients-label{text-align:center;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:clamp(26px,3.4vw,36px)}
.clients-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(28px,4.5vw,60px)}
.client-logo{font-size:clamp(15.5px,1.6vw,19px);font-weight:700;letter-spacing:-.02em;color:var(--faint);opacity:.68;transition:color .25s,opacity .25s}
.client-logo:hover{color:var(--ink);opacity:1}
@media(max-width:600px){.clients-row{gap:18px 26px}.client-logo{font-size:14.5px}}

/* ═══════════════ MARQUEE ═══════════════ */
.marq-sec{padding:clamp(20px,3vw,32px) 0;border-bottom:1px solid var(--line-soft)}
.marq{overflow:hidden}
.marq-track{display:flex;align-items:center;gap:clamp(40px,6vw,88px);width:max-content;animation:marq 28s linear infinite;padding-right:clamp(40px,6vw,88px)}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marq-item{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--faint);white-space:nowrap}
.marq-item i{width:5px;height:5px;border-radius:50%;background:var(--teal);flex:0 0 auto}
.marq-item.alt{font-weight:500;color:var(--teal-d)}

/* ═══════════════════ SECTIONS ═══════════════════ */
.sec{padding:clamp(80px,10vw,140px) 0}
.sec.dark{background:var(--ink);color:var(--bg);position:relative;overflow:hidden}
.sec.dark:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(253,255,252,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(253,255,252,.045) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 15%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 70% 55% at 50% 15%,#000 30%,transparent 100%);pointer-events:none}
.sec.dark:after{content:"";position:absolute;bottom:-20%;left:-8%;width:50%;aspect-ratio:1;background:radial-gradient(circle,rgba(46,196,182,.14),transparent 70%);filter:blur(50px);pointer-events:none}
.sec.dark .wrap{position:relative;z-index:1}
.sec.dark h2,.sec.dark h3{color:var(--bg)}
.sec-head{max-width:800px;margin:0 auto clamp(44px,6vw,72px);text-align:center}
.sec-head .lede{margin:18px auto 0}
.sec-more{display:flex;justify-content:center;margin-top:clamp(36px,5vw,56px)}

/* ═══════════ PHILOSOPHY (dark statement) ═══════════ */
.philo{max-width:900px;margin:0 auto;text-align:center}
.philo-big{font-size:clamp(24px,3.4vw,42px);line-height:1.28;letter-spacing:-.025em;font-weight:500;color:var(--bg)}
.philo-big em{color:var(--teal);font-weight:600}
.philo-big .dim{color:var(--ink-l1)}
.philo-res{margin:30px auto 0;font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.65;color:var(--ink-l1);max-width:52ch}
/* One statement block - the Insights archive's "Why we write" - sits on a
   white section instead of the usual dark one. .philo-big's white text and
   translucent .dim are tuned for that dark background, so both need the
   inverse (dark ink) colour here to stay readable. */
.philo-light .philo-big{color:var(--ink)}
.philo-light .philo-big .dim{color:var(--faint)}
.philo-tag{margin-top:34px;font-size:clamp(17px,1.8vw,22px);font-weight:600;letter-spacing:-.015em;color:var(--teal)}

/* ═══════════ PILLARS — premium bordered cards ═══════════ */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,28px)}
.pillar{padding:clamp(28px,3.2vw,36px) clamp(22px,2.6vw,28px);border:1px solid var(--line);border-radius:20px;background:var(--bg);position:relative;text-align:center;transition:transform .35s var(--eo),box-shadow .35s var(--eo),border-color .3s}
.pillar:hover{transform:translateY(-6px);border-color:transparent}
.pillar .n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--teal-soft);color:var(--teal-d);font-size:12px;font-weight:700;margin-bottom:16px}
.pillar h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.pillar p{font-size:14px;line-height:1.62;color:var(--body)}

/* ═══════════ SERVICES — editorial index rows ═══════════ */
.svc-list{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:64px minmax(0,1.15fr) minmax(0,.85fr) auto;align-items:center;gap:clamp(16px,2.6vw,40px);padding:clamp(24px,3.2vw,36px) 4px;border-bottom:1px solid var(--line);position:relative;transition:padding-left .3s var(--eo)}
.svc-row:hover{padding-left:16px}
.svc-row:after{content:"";position:absolute;bottom:-1px;left:0;width:0;height:1px;background:var(--teal);transition:width .5s var(--eo)}
.svc-row:hover:after{width:100%}
.svc-row .n{font-size:13px}
.svc-name{display:flex;flex-direction:column;gap:6px}
.svc-name h3{font-size:clamp(22px,2.6vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.15;transition:color .25s}
.svc-row:hover .svc-name h3{color:var(--teal-d)}
.svc-name .svc-cat{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.svc-desc{font-size:14px;line-height:1.6;color:var(--body);max-width:38ch}
.svc-row .go{color:var(--ink)}
.svc-row:hover .go{background:var(--ink);color:var(--teal);border-color:var(--ink);transform:rotate(-45deg)}

/* ═══════════ SERVICES — capability cards ═══════════ */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,28px)}
.svc-card{display:flex;flex-direction:column;padding:clamp(30px,3.4vw,42px);border-radius:22px;border:1px solid var(--line);transition:transform .35s var(--eo),box-shadow .35s var(--eo),border-color .3s}
.svc-card.t1{background:var(--teal-soft)}
.svc-card.t2{background:var(--mistb)}
.svc-card.t3{background:var(--sand)}
.svc-card.t4{background:var(--tint)}
.svc-card:hover{transform:translateY(-6px);border-color:transparent}
.svc-card .n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(253,255,252,.6);color:var(--ink);font-size:12px;font-weight:700;margin-bottom:18px}
.svc-card h3{font-size:clamp(22px,2.4vw,28px);font-weight:600;letter-spacing:-.025em;margin-bottom:12px}
.svc-card .big{font-size:clamp(17px,1.6vw,20px);line-height:1.45;font-weight:500;color:var(--ink);margin-bottom:14px;max-width:34ch}
.svc-card .chips{justify-content:flex-start;margin:0 0 22px;max-width:none;gap:9px}
.svc-card .chips span{background:rgba(253,255,252,.55);font-size:12.5px;padding:9px 16px}
.svc-card .u-link{margin-top:auto}
@media(max-width:860px){.svc-grid{grid-template-columns:1fr}}

/* ═══════════ APPROACH — numbered trio ═══════════ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
.step{padding-top:26px;border-top:1px solid var(--line-d);position:relative;text-align:center}
.step:after{content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--teal);transition:width .5s var(--eo)}
.step:hover:after{width:100%}
.step .n{display:block;font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:0;color:var(--teal);margin-bottom:16px}
.step h3{font-size:clamp(22px,2.2vw,27px);font-weight:600;letter-spacing:-.025em;margin-bottom:12px}
.step-tags{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.step-tags span{font-size:11.5px;font-weight:500;letter-spacing:.04em;color:var(--ink-l1);padding:5px 13px;border:1px solid var(--line-d);border-radius:999px;transition:border-color .2s,color .2s}
.step-tags span:hover{border-color:var(--teal);color:var(--teal)}
.step p{font-size:14.5px;line-height:1.62;color:var(--ink-l1);max-width:32ch;margin:0 auto}

/* ═══════════ WORK — subtle solid tiles ═══════════ */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px)}
.work-card{display:flex;flex-direction:column}
.work-img{aspect-ratio:1.35/1;border-radius:18px;display:grid;place-items:center;position:relative;overflow:hidden;transition:background .3s}
.work-img.t1{background:var(--teal-soft)}
.work-img.t2{background:var(--mistb)}
.work-img.t3{background:var(--sand)}
.work-card:hover .work-img.t1{background:#D6F1ED}
.work-card:hover .work-img.t2{background:#E1EAEF}
.work-card:hover .work-img.t3{background:#EEE7DA}
.work-img span{font-size:clamp(40px,4.2vw,54px);font-weight:700;letter-spacing:-.03em;color:var(--ink);opacity:.22;transition:transform .5s var(--eo),opacity .4s}
.work-card:hover .work-img span{transform:scale(1.07);opacity:.34}
.work-arrow{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);font-size:15px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .35s var(--eo),background .2s,color .2s}
.work-card:hover .work-arrow{opacity:1;transform:none}
.work-arrow:hover{background:var(--ink);color:var(--teal);border-color:var(--ink)}
.work-bd{padding:18px 4px 0;display:flex;flex-direction:column;gap:5px}
.work-bd small{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-d)}
.work-bd h3{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.32}
.work-bd p{font-size:13.5px;line-height:1.58;color:var(--body)}

/* ═══════════ INSIGHTS — tinted editorial cards ═══════════ */
.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px)}
.ins-card{display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3vw,34px);border-radius:18px;min-height:300px;transition:background .3s,transform .35s var(--eo)}
.ins-card.t1{background:var(--teal-soft)}
.ins-card.t2{background:var(--mistb)}
.ins-card.t3{background:var(--sand)}
.ins-card.t1:hover{background:#D6F1ED}
.ins-card.t2:hover{background:#E1EAEF}
.ins-card.t3:hover{background:#EEE7DA}
.ins-card:hover{transform:translateY(-4px)}
.ins-cat{display:inline-flex;width:fit-content;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:rgba(253,255,252,.75);padding:6px 13px;border-radius:999px}
.ins-card h3{font-size:clamp(19px,1.9vw,23px);font-weight:600;letter-spacing:-.025em;line-height:1.28;max-width:24ch}
.ins-card p{font-size:14px;line-height:1.6;color:var(--body);max-width:34ch}
.ins-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:18px}
.ins-foot span{font-size:13px;font-weight:600;color:var(--ink)}
.ins-card .go{background:var(--bg);border-color:transparent}
.ins-card:hover .go{background:var(--ink);color:var(--teal);transform:rotate(-45deg)}

/* ═══════════ CTA ═══════════ */
.cta{background:var(--ink);color:var(--bg);padding:clamp(96px,12vw,160px) 0;text-align:center;position:relative;overflow:hidden}
.cta:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(253,255,252,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(253,255,252,.045) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 70% 65% at 50% 50%,#000 30%,transparent 100%);pointer-events:none}
.cta:after{content:"";position:absolute;top:-25%;right:-10%;width:55%;aspect-ratio:1;background:radial-gradient(circle,rgba(46,196,182,.18),transparent 70%);filter:blur(50px);pointer-events:none}
.cta .wrap{position:relative;z-index:1}
.cta h2{font-size:clamp(36px,5.4vw,68px);letter-spacing:-.035em;max-width:17ch;margin:0 auto;color:var(--bg)}
.cta p{margin:22px auto 0;font-size:clamp(15.5px,1.4vw,18px);line-height:1.65;color:var(--ink-l1);max-width:50ch}
.cta-tag{margin-top:16px;font-size:clamp(16px,1.6vw,20px);font-weight:600;color:var(--teal)}
.cta-btns{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:40px;flex-wrap:wrap}
.cta .note{margin-top:22px;font-size:12.5px;letter-spacing:.05em;color:var(--ink-l2)}

/* ═══════════ FOOTER ═══════════ */
.footer{padding:clamp(56px,7vw,88px) 0 32px;position:relative}
.footer:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(46,196,182,.55),transparent)}
.ft-grid{display:grid;grid-template-columns:1.5fr repeat(3,.7fr);gap:clamp(32px,4vw,64px);padding-bottom:clamp(40px,5vw,60px);border-bottom:1px solid var(--line-soft)}
.ft-brand p{margin-top:18px;font-size:14px;line-height:1.65;color:var(--body);max-width:300px}
.ft-brand .ft-city{margin-top:22px;display:flex;gap:22px}
.ft-city span{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:inline-flex;align-items:center;gap:8px}
.ft-city span i{width:5px;height:5px;border-radius:50%;background:var(--teal)}
.ft-col h5{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.ft-col nav{display:grid;gap:11px}
.ft-col a{font-size:14px;color:var(--body);width:fit-content;transition:color .18s}
.ft-col a:hover{color:var(--teal-d)}
.ft-bot{padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--faint)}
.ft-bot em{color:var(--teal-d);font-weight:500}

/* ═══════════ MODAL ═══════════ */
.mo{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px);opacity:0;pointer-events:none;transition:opacity .25s}
.mo.open{opacity:1;pointer-events:auto}
.mo-bg{position:absolute;inset:0;background:rgba(1,22,39,.5);cursor:pointer}
.mo-c{position:relative;background:var(--bg);border-radius:22px;width:100%;max-width:540px;max-height:calc(100dvh - 64px);overflow:auto;padding:38px clamp(24px,4.5vw,42px) 34px;transform:translateY(14px) scale(.97);transition:transform .32s var(--es)}
.mo.open .mo-c{transform:none}
.mo-x{position:absolute;top:16px;right:16px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);color:var(--ink);font-size:17px;transition:background .2s,color .2s,transform .3s var(--es)}
.mo-x:hover{background:var(--ink);color:var(--bg);transform:rotate(90deg)}
.mo-hd{margin-bottom:24px;padding-right:44px}
.mo-hd .kicker{margin-bottom:12px}
.mo-hd h3{font-size:26px;font-weight:600;letter-spacing:-.03em;margin-bottom:8px}
.mo-hd p{font-size:14.5px;color:var(--body);line-height:1.6}
.mf{display:grid;gap:20px}
.mf-r{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mf-f{display:grid;gap:6px}
.mf-f label{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.mf-f input,.mf-f textarea{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line);font:inherit;font-size:14.5px;color:var(--ink);background:transparent;transition:border-color .2s,box-shadow .2s}
.mf-f input:focus,.mf-f textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(46,196,182,.15)}
.mf-f textarea{min-height:88px;resize:vertical;line-height:1.5}
.mf-ft{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;flex-wrap:wrap}
.mf-n{font-size:12px;color:var(--faint)}
.m-ok{text-align:center;padding:18px 0}
.m-ok .mc{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;background:var(--teal-soft);color:var(--teal-d);display:grid;place-items:center;font-size:24px;font-weight:700}
.m-ok h4{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.m-ok p{font-size:14px;color:var(--body);line-height:1.6;max-width:36ch;margin:0 auto}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--eo),transform .7s var(--eo)}
.rv.in{opacity:1;transform:none}
.stg .rc{opacity:0;transform:translateY(18px);transition:opacity .55s var(--eo),transform .55s var(--eo)}
.stg.in .rc{opacity:1;transform:none}
.stg.in .rc:nth-child(1){transition-delay:.05s}.stg.in .rc:nth-child(2){transition-delay:.13s}
.stg.in .rc:nth-child(3){transition-delay:.21s}.stg.in .rc:nth-child(4){transition-delay:.29s}
.stg.in .rc:nth-child(5){transition-delay:.37s}.stg.in .rc:nth-child(6){transition-delay:.45s}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:1024px){
  .pillars{grid-template-columns:repeat(2,1fr)}
  .mega-grid{grid-template-columns:1fr}
  .mega-links{grid-template-columns:repeat(2,1fr)}
  .svc-row{grid-template-columns:48px 1fr auto}
  .svc-desc{display:none}
}
@media(max-width:860px){
  .nav-c{display:none!important}
  /* The client's team re-enabled the header CTA on mobile from the builder
     (an element-level display set at Bricks' breakpoint, which carries id
     specificity and quietly beat the plain rules here - the button showed
     at its desktop size and pushed the burger off screen). Honour that
     choice, but own the layout: one compact row - logo, small pill,
     burger - that holds together all the way down to 320px. */
  .nav-side{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px}
  .nav-side .btn{display:inline-flex!important;padding:9px 14px;font-size:12.5px}
  .ham{display:inline-flex!important}
  .steps{grid-template-columns:1fr;gap:34px}
  .work-grid,.ins-grid{grid-template-columns:1fr 1fr}
  .ft-grid{grid-template-columns:1fr 1fr;gap:36px}
  .ft-brand{grid-column:1/-1}
}
@media(max-width:600px){
  .h-hero{font-size:clamp(38px,11vw,48px)}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:16px}
  .hero-ctas .btn,.hero-ctas .u-link{justify-content:center}
  .pillars,.work-grid,.ins-grid{grid-template-columns:1fr}
  .ins-card{min-height:0}
  .svc-row{grid-template-columns:1fr auto;gap:12px;padding:20px 4px}
  .svc-row .n{display:none}
  .svc-name h3{font-size:21px}
  .ft-grid{grid-template-columns:1fr}
  .ft-bot{flex-direction:column;align-items:flex-start;gap:8px}
  .mf-r{grid-template-columns:1fr}
  .cta-btns{flex-direction:column}
}
/* Narrow phones (320-420px): the bar must stay one row all the way down to
   320px. Everything in it compacts - smaller logo, tighter gaps, and a
   smaller CTA pill for anyone showing the button at these widths - so the
   row's natural width never exceeds the viewport and nothing wraps. */
@media(max-width:420px){
  .nav-in{gap:10px}
  .nav-in .logo img{width:44px;height:44px}
  .ham{width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv,.stg .rc{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .marq-track{animation:none}
}

/* ── subpage extras ── */
.hero.compact{padding:calc(var(--nav-h) + clamp(48px,6.5vw,84px)) 0 clamp(36px,5vw,56px)}
.hero.compact h1{font-size:clamp(36px,5.8vw,66px)}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:780px;margin:0 auto}
.chips span{font-size:13.5px;font-weight:600;letter-spacing:.01em;padding:12px 22px;border:1px solid var(--line);border-radius:999px;background:var(--bg);transition:border-color .2s,color .2s}
.chips span:hover{border-color:var(--teal);color:var(--teal-d)}
.rel{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.rel a{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:600;transition:border-color .2s,transform .2s var(--eo)}
.rel a:hover{border-color:var(--ink);transform:translateY(-1px)}
.pillars.p3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.pillars.p3{grid-template-columns:1fr}}
.sub-block{margin-top:clamp(56px,8vw,96px)}
/* ── two-column service template — spacious ── */
.hero.svc{padding:calc(var(--nav-h) + clamp(72px,11vw,150px)) 0 clamp(64px,9vw,120px)}
.svc-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,110px);align-items:end;text-align:left}
.svc-hero h1{margin:0;font-size:clamp(38px,6vw,74px);line-height:1.04}
.svc-hero .kicker{margin-bottom:26px}
.svc-hero .lede{margin:0;font-size:clamp(16.5px,1.5vw,19px);line-height:1.72}
.svc-hero .hero-ctas{justify-content:flex-start;margin-top:34px}
.tc-sec{padding:clamp(56px,8vw,110px) 0 clamp(88px,11vw,150px)}
.tc{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,6vw,120px);padding:clamp(60px,8.5vw,110px) 0;border-top:1px solid var(--line)}
.tc.first{border-top:0;padding-top:0}
.tc-l .n{display:block;margin-bottom:16px;font-size:13px}
.tc-l h2{font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;line-height:1.1;position:sticky;top:calc(var(--nav-h) + 36px)}
.tc-r .big{font-size:clamp(20px,2.3vw,29px);line-height:1.52;letter-spacing:-.02em;font-weight:500;color:var(--ink);max-width:24em}
.tc .dim{color:var(--faint)}
.tc-r .lede{max-width:54ch;font-size:clamp(16.5px,1.45vw,18.5px);line-height:1.75}
.tc-r .chips{justify-content:flex-start;margin:0;max-width:none;gap:12px}
.tc-r .chips span{font-size:14px;padding:14px 26px}
.tc-r .rel{justify-content:flex-start;gap:14px}
.tc-r .rel a{padding:14px 28px;font-size:14.5px}
.tc-rel{margin-top:clamp(40px,6vw,64px)}
.tc-rel .kicker{margin-bottom:18px}
.tc-list{display:grid;gap:clamp(26px,4vw,40px)}
.tc-list>div{padding-left:22px;border-left:2px solid rgba(46,196,182,.35)}
.tc-list strong{display:block;font-size:clamp(16.5px,1.5vw,19px);font-weight:600;letter-spacing:-.015em;color:var(--ink);margin-bottom:7px}
.tc-list p{font-size:15px;line-height:1.7;color:var(--body);max-width:52ch}
.tc-tag{margin-top:clamp(26px,3.5vw,40px);font-size:clamp(17px,1.7vw,21px);font-weight:600;letter-spacing:-.015em;color:var(--teal-d)}
@media(max-width:860px){
  .hero.svc{padding:calc(var(--nav-h) + clamp(56px,10vw,88px)) 0 clamp(48px,8vw,72px)}
  .svc-hero{grid-template-columns:1fr;align-items:start;gap:28px}
  .tc-sec{padding:clamp(40px,7vw,64px) 0 clamp(64px,9vw,96px)}
  .tc{grid-template-columns:1fr;gap:22px;padding:clamp(44px,8vw,64px) 0}
  .tc-l h2{position:static}
}
.tc-list strong a{transition:color .2s}
.tc-list strong a:hover{color:var(--teal-d)}
/* article prose */
.prose{max-width:62ch}
.prose p{font-size:clamp(16px,1.35vw,17.5px);line-height:1.8;color:var(--body);margin-bottom:1.4em;text-wrap:pretty}
.prose h3{font-size:clamp(20px,2vw,25px);font-weight:600;letter-spacing:-.02em;margin:1.9em 0 .7em}
.prose p strong{color:var(--ink);font-weight:600}
.blog-meta{display:flex;gap:20px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:20px}
/* homepage: simplified centered hero */
.hero.home{background:var(--bg);padding:calc(var(--nav-h) + clamp(40px,5vw,72px)) 0 clamp(80px,10vw,128px)}
.hero.home h1{font-size:clamp(34px,5vw,64px)}
.hero.home .hero-foot{margin-top:clamp(28px,5vh,60px);padding-top:22px}
@media(max-width:860px){
  .hero.home{padding:calc(var(--nav-h) + clamp(28px,5vw,44px)) 0 clamp(56px,8vw,80px)}
}
/* inline row image */
.tc-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:20px;margin-top:clamp(28px,4vw,48px)}
/* ── centered service sections ── */
.sec.tight{padding-top:0}
.stmt{margin:26px auto 0;font-size:clamp(20px,2.6vw,32px);line-height:1.42;letter-spacing:-.022em;font-weight:500;color:var(--ink);max-width:26em;text-align:center}
.stmt .dim{color:var(--faint)}
.sec-head .chips{margin-top:30px}
/* ── selected work — horizontal shelf, driven by page scroll ── */
.hs{overflow:hidden;margin:0 calc(-1*clamp(20px,4.5vw,56px));padding:0 clamp(20px,4.5vw,56px)}
.hs-track{display:flex;gap:clamp(20px,2.6vw,32px);width:max-content;will-change:transform}
.hs-track .work-card{width:clamp(250px,29vw,370px);flex:0 0 auto}
/* fallback when GSAP is unavailable or motion is reduced: swipe/scroll it yourself */
html:not(.vshelf) .hs{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding-bottom:14px}
html:not(.vshelf) .hs-track .work-card{scroll-snap-align:start}
/* ── what's included — tinted cards, click for detail ── */
.inc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px)}
.inc-card{display:flex;flex-direction:column;gap:10px;padding:clamp(26px,3vw,34px);border-radius:18px;transition:background .3s,transform .35s var(--eo)}
.inc-card.t1{background:var(--teal-soft)}
.inc-card.t2{background:var(--mistb)}
.inc-card.t3{background:var(--sand)}
.inc-card.t1:hover{background:#D6F1ED}
.inc-card.t2:hover{background:#E1EAEF}
.inc-card.t3:hover{background:#EEE7DA}
.inc-card:hover{transform:translateY(-4px)}
.inc-card h3{font-size:clamp(18px,1.8vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.inc-card p{font-size:14px;line-height:1.6;color:var(--body);max-width:34ch}
.inc-more{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--teal-d);transition:color .2s}
.inc-more i{width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-style:normal;font-size:14px;line-height:1;transition:transform .3s var(--es)}
.inc-card:hover .inc-more{color:var(--ink)}
.inc-card:hover .inc-more i{transform:scale(1.12)}
@media(max-width:860px){.inc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.inc-grid{grid-template-columns:1fr}}
/* included detail modal */
.mo-c.lg{max-width:680px}
.inc-mo-body p{font-size:15px;line-height:1.7;color:var(--body);margin-bottom:16px}
.inc-mo-body ul{list-style:none;display:grid;gap:11px}
.inc-mo-body li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.6;color:var(--body)}
.inc-mo-body li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.inc-mo-body li strong{color:var(--ink);font-weight:600}
/* ── single project (case study) ── */
.pm{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 28px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.pm span{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.pm b{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.tile{border-radius:22px;display:grid;place-items:center;position:relative;overflow:hidden;transition:background .3s}
.tile.t1{background:var(--teal-soft)}
.tile.t2{background:var(--mistb)}
.tile.t3{background:var(--sand)}
.tile span{font-weight:700;letter-spacing:-.03em;color:var(--ink);opacity:.22}
.tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-banner{aspect-ratio:21/9}
.pj-banner span{font-size:clamp(56px,9vw,120px)}
.pj-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px)}
.pj-gal .tile{aspect-ratio:1.1/1}
.pj-gal .tile.wide{grid-column:span 2;aspect-ratio:auto}
.pj-gal .tile span{font-size:clamp(30px,3.4vw,44px)}
.pj-stats{display:flex;justify-content:center;gap:clamp(32px,7vw,96px);flex-wrap:wrap;text-align:center;margin-top:clamp(36px,5vw,56px)}
.pj-stats b{display:block;font-size:clamp(32px,3.8vw,52px);font-weight:600;letter-spacing:-.035em;color:var(--ink);line-height:1.1;margin-bottom:6px}
.pj-stats b em{color:var(--teal-d)}
.pj-stats span{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.pj-next{text-align:center;padding-top:clamp(44px,6vw,72px);border-top:1px solid var(--line)}
.pj-next .kicker{margin-bottom:14px}
.pj-next-a{display:block}
.pj-next-t{display:block;font-size:clamp(32px,5vw,60px);font-weight:600;letter-spacing:-.035em;line-height:1.05;color:var(--ink);transition:color .25s}
.pj-next-a:hover .pj-next-t{color:var(--teal-d)}
.pj-next-a .arw{display:inline-block;transition:transform .25s var(--eo)}
.pj-next-a:hover .arw{transform:translateX(6px)}
.pj-next-s{display:block;margin-top:12px;font-size:15px;line-height:1.6;color:var(--body)}
@media(max-width:600px){
  .pm{grid-template-columns:1fr 1fr;gap:16px 20px}
  .pj-banner{aspect-ratio:16/10}
  .pj-gal{grid-template-columns:1fr}
  .pj-gal .tile.wide{grid-column:auto;aspect-ratio:1.35/1}
  .pj-gal .tile{aspect-ratio:1.35/1}
}
/* ═ premium-ux ═ */
/* micro-typography */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.n,.dd-n{font-variant-numeric:tabular-nums}
/* keyboard & a11y */
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
.skip{position:fixed;top:-64px;left:16px;z-index:500;background:var(--ink);color:var(--bg);padding:12px 22px;border-radius:999px;font-size:13px;font-weight:600;transition:top .25s var(--eo)}
.skip:focus-visible{top:14px;outline-offset:2px}
/* refined scrollbar */
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(1,22,39,.16);border-radius:8px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:rgba(1,22,39,.3)}
/* active page indicators */
.nav-c>a[aria-current="page"],.nav-dd>a.is-here{color:var(--ink);background:rgba(1,22,39,.05)}
.nav-c>a[aria-current="page"]:after,.nav-dd>a.is-here:after{content:"";width:4px;height:4px;border-radius:50%;background:var(--teal);flex:0 0 auto}
.mn-body a[aria-current="page"],.mn-dd-p a[aria-current="page"]{color:var(--teal-d)}
.dd-a[aria-current="page"] strong{color:var(--teal-d)}
/* mega menu items cascade in */
@keyframes ddIn{from{opacity:0;transform:translateY(8px)}}
.nav-dd.is-open .dd-a{animation:ddIn .4s var(--eo) backwards}
.nav-dd.is-open .dd-a:nth-child(1){animation-delay:.04s}
.nav-dd.is-open .dd-a:nth-child(2){animation-delay:.08s}
.nav-dd.is-open .dd-a:nth-child(3){animation-delay:.12s}
.nav-dd.is-open .dd-a:nth-child(4){animation-delay:.16s}
.nav-dd.is-open .dd-a:nth-child(5){animation-delay:.2s}
.nav-dd.is-open .dd-a:nth-child(6){animation-delay:.24s}
.nav-dd.is-open .dd-a:nth-child(7){animation-delay:.28s}
.nav-dd.is-open .mega-feat{animation:ddIn .45s var(--eo) .18s backwards}
/* page fade transitions */
body{transition:opacity .2s ease}
body.pt-out{opacity:0}
/* editorial footer statement */
.footer{border-top:1px solid var(--line-soft)}
.ft-statement{font-size:clamp(30px,5.5vw,68px);font-weight:600;letter-spacing:-.035em;line-height:1.06;color:var(--ink);padding:0 0 clamp(44px,6vw,76px);max-width:18ch}
.ft-statement em{color:var(--teal-d)}
@media(prefers-reduced-motion:reduce){body{transition:none}.nav-dd.is-open .dd-a,.nav-dd.is-open .mega-feat{animation:none}}

/* ── in-page anchors ── */
.tc[id],.sec[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
/* ── founders photo placeholder — swap for a real <img class="founders-img"> ── */
.founders{aspect-ratio:21/9;border-radius:22px;background:var(--mistb);display:grid;place-items:center;overflow:hidden;margin-bottom:clamp(36px,5vw,56px)}
.founders span{font-size:clamp(15px,1.6vw,20px);font-weight:600;letter-spacing:-.01em;color:var(--ink);opacity:.35;text-align:center;padding:0 24px;max-width:34ch}
.founders-img{width:100%;height:100%;object-fit:cover}
@media(max-width:600px){.founders{aspect-ratio:16/10}}
/* ── archive filter (projects, insights) ── */
.filt{margin-bottom:clamp(36px,5vw,56px)}
.filt span{cursor:pointer;-webkit-tap-highlight-color:transparent}
.filt span.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.filt span.on:hover{color:var(--teal)}
.filt-empty{text-align:center;font-size:15px;color:var(--faint);padding:clamp(32px,5vw,56px) 0 0}
/* ── article layout: sticky toc + prose ── */
.art-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(36px,5.5vw,96px);align-items:start}
.toc{position:sticky;top:calc(var(--nav-h) + 32px)}
.toc-label{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.toc nav{display:grid;gap:2px}
.toc a{display:block;padding:9px 14px;border-left:2px solid var(--line);font-size:13.5px;font-weight:500;color:var(--body);line-height:1.45;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--teal-d);border-left-color:var(--teal);font-weight:600}
.prose h3{scroll-margin-top:calc(var(--nav-h) + 28px)}
.prose h3:first-child{margin-top:0}
/* ── article figures — swap .ph for a real img ── */
.art-fig{margin:clamp(30px,4.5vw,52px) 0}
.art-fig .ph{aspect-ratio:16/9;border-radius:18px;display:grid;place-items:center;overflow:hidden}
.art-fig .ph.t1{background:var(--teal-soft)}
.art-fig .ph.t2{background:var(--mistb)}
.art-fig .ph.t3{background:var(--sand)}
.art-fig .ph span{font-size:clamp(19px,2.1vw,27px);font-weight:700;letter-spacing:-.02em;color:var(--ink);opacity:.25}
.art-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;display:block}
.art-fig figcaption{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--faint);text-align:center}
@media(max-width:1024px){
  .art-grid{grid-template-columns:1fr;gap:34px}
  .toc{position:static;padding:22px 24px;background:var(--tint);border-radius:16px}
}
/* clickable included-cards get the pointer; plain info cards stay default */
.inc-card[role="button"]{cursor:pointer}
/* The card detail lives in the page as hidden markup and is copied into the
   pop-up on click. `hidden` alone is not enough: Bricks gives .brxe-div a
   display of its own, and any author rule beats the browser default. */
.inc-detail{display:none}

/* ── contact page ── */
.ct-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:start}
.ct-sec{padding:clamp(32px,4.5vw,48px) 0 clamp(56px,7vw,88px)}
.ct-form>.kicker{margin-bottom:20px}
.ct-form .mf{max-width:560px}
.ct-side{display:grid;gap:clamp(18px,2.2vw,26px)}
.ct-card{padding:clamp(24px,2.8vw,32px);border-radius:18px}
.ct-card.t1{background:var(--teal-soft)}
.ct-card.t2{background:var(--mistb)}
.ct-card.t3{background:var(--sand)}
.ct-card strong{display:block;font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin-bottom:6px}
.ct-card p{font-size:14px;line-height:1.6;color:var(--body)}
.ct-card a{color:var(--teal-d);font-weight:600}
.ct-card .btn{margin-top:14px}
@media(max-width:860px){.ct-grid{grid-template-columns:1fr;gap:36px}}

/* ── contact page: advanced service wizard ── */
.wiz{max-width:560px}
.wiz-bar{height:3px;background:var(--line-soft);border-radius:999px;margin-bottom:24px;overflow:hidden}
.wiz-bar i{display:block;height:100%;width:25%;background:var(--teal);border-radius:999px;transition:width .5s var(--eo)}
.wiz-steps{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:30px}
.wiz-steps span{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);transition:color .3s;cursor:default}
.wiz-steps span.on{color:var(--teal-d)}
.wiz-steps span.done{color:var(--ink)}
.wiz-panels{display:block}
.wiz-panel{display:none}
.wiz-panel.active{display:block;animation:wizIn .4s var(--eo)}
@keyframes wizIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.wiz-h{margin-bottom:22px}
.wiz-h h3{font-size:clamp(19px,2vw,23px);font-weight:600;letter-spacing:-.02em;margin-bottom:7px}
.wiz-h p{font-size:14px;line-height:1.55;color:var(--body)}
.wiz-svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.wiz-svc{display:flex;flex-direction:column;gap:5px;padding:18px;border:1px solid var(--line);border-radius:16px;cursor:pointer;transition:border-color .2s var(--eo),background .2s,transform .2s var(--eo)}
.wiz-svc:hover{border-color:var(--teal);transform:translateY(-2px)}
.wiz-svc.on{border-color:var(--teal);background:var(--teal-soft)}
.wiz-svc .ic{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--teal-d)}
.wiz-svc strong{font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.wiz-svc small{font-size:12.5px;line-height:1.5;color:var(--faint)}
.wiz-pill-grid{display:flex;flex-wrap:wrap;gap:10px}
.wiz-pill span{display:inline-flex;align-items:center;padding:12px 20px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink);transition:all .2s}
.wiz-pill.on span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.wiz-svc input,.wiz-pill input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wiz-svc:focus-within,.wiz-pill:focus-within{outline:2px solid var(--teal);outline-offset:3px;border-radius:16px}
.wiz-err{font-size:12.5px;font-weight:600;color:#C0392B;margin-top:10px;display:none}
.wiz-err.show{display:block}
.wiz-sum{display:grid;gap:2px;padding:6px 20px;border-radius:14px;background:var(--tint);margin-bottom:22px}
.wiz-sum div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.wiz-sum div:last-child{border-bottom:0}
.wiz-sum b{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);flex:0 0 auto}
.wiz-sum span{font-size:13.5px;font-weight:500;color:var(--ink);text-align:right;max-width:64%}
.wiz-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}
.wiz-nav .wiz-back[hidden]{display:none}
@media(max-width:600px){
  .wiz-svc-grid{grid-template-columns:1fr}
  .wiz-steps{gap:8px 14px}
  .wiz-steps span{font-size:9.5px}
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC EXTRAS
═══════════════════════════════════════════════════════════════════ */
/* ── about: brand dot row ── */
.g-dots{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:30px}
.g-dots i{width:10px;height:10px;border-radius:50%;display:block}
.g-dots i:nth-child(1){background:var(--teal)}
.g-dots i:nth-child(2){background:var(--ink)}
.g-dots i:nth-child(3){background:#E3A857}
.g-dots i:nth-child(4){background:#7C93A3}
.sec.tight.pt-space{padding-top:clamp(40px,6vw,72px)}

/* ── single project: banner spacing ── */
.sec.tight.pj-banner-sec{padding-top:clamp(40px,6vw,72px)}
.pj-banner{aspect-ratio:21/9;margin-bottom:clamp(40px,6vw,72px)}

/* ═══════════════════════════════════════════════════════════════════
   WORDPRESS + BRICKS INTEGRATION
   Everything above is the original design system, unchanged. This
   block only reconciles it with markup WordPress and Bricks add.
═══════════════════════════════════════════════════════════════════ */

/* ── studio dot ──
   The design put an empty <i> inside each studio label. That forces raw
   markup into the element text field, which is not editable in any useful
   way, so the dot is a pseudo-element now. The original <i> markup still
   renders correctly if it appears. */
.ft-city span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);flex:0 0 auto}
.ft-city span:has(i)::before{display:none}

/* Mega-panel links: title and description are separate elements now, so
   the anchor lays them out itself instead of relying on an inner span. */
.dd-a{flex-direction:column;align-items:flex-start;gap:3px}
.dd-a>strong,.dd-a>small{display:block}
.dd-a>small{font-size:12.5px;color:var(--faint);line-height:1.45}

/* ── flex-row children must size to their content ──
   Bricks gives every .brxe-block `width:100%`. That is right for a stacked
   column, but inside a horizontal row each child then demands the full
   width, so no free space is left for `margin-right:auto` to push against
   and the row collapses into one cluster. The header bar was the victim:
   logo, links and button packed together on the left instead of
   logo-left / rest-right. Only rows whose items are meant to be
   content-width are listed here. */
.brxe-text-basic.logo,
.brxe-block.nav-c,
.brxe-block.nav-side,
.brxe-block.mn-head>*,
.brxe-block.ft-bot>*{width:auto}

/* ── admin bar ──
   The nav is position:fixed, so a logged-in preview needs everything sitting
   under it pushed down by the bar's height. --bar is 0 for visitors, so the
   live site is untouched — this only makes admin previews match the design. */
:root{--bar:0px}
.admin-bar{--bar:32px}
@media screen and (max-width:782px){.admin-bar{--bar:46px}}
.admin-bar .nav,.admin-bar .mn,.admin-bar .mo{top:var(--bar)}
.admin-bar .hero{padding-top:calc(var(--nav-h) + var(--bar) + clamp(64px,9vw,120px))}
.admin-bar .hero.compact{padding-top:calc(var(--nav-h) + var(--bar) + clamp(48px,6.5vw,84px))}
.admin-bar .hero.svc{padding-top:calc(var(--nav-h) + var(--bar) + clamp(72px,11vw,150px))}

/* ── Bricks wrappers must not introduce their own box ── */
#brx-content,.brx-body{overflow-x:clip}
/* Deliberately no blanket resets on .brxe-* here.
   Bricks' element classes carry the same specificity as the design's own
   classes (0,1,0) and load earlier, so a reset like `.brxe-section{padding:0}`
   or `.brxe-heading{margin:0}` does not neutralise Bricks — it overrides the
   design. `.wrap{margin:0 auto}`, `.sec{padding:…}` and `.kicker{margin-bottom:…}`
   were all being lost that way. Bricks' own defaults are harmless because the
   Bricks theme styles are intentionally left empty. */
.brxe-container.wrap{max-width:1200px;width:100%}

/* Bricks defaults .brxe-block / .brxe-container to flex-column. Our layout
   classes own their display mode, so restate them one specificity step up
   and load order stops mattering. Generated from the rules above. */
.brxe-section.wrap,.brxe-container.wrap,.brxe-block.wrap,.brxe-div.wrap{display:block;align-items:stretch}
.brxe-section.sec,.brxe-container.sec,.brxe-block.sec,.brxe-div.sec{display:block;align-items:stretch}
.brxe-section.hero,.brxe-container.hero,.brxe-block.hero,.brxe-div.hero{display:block;align-items:stretch}
.brxe-section.cta,.brxe-container.cta,.brxe-block.cta,.brxe-div.cta{display:block;align-items:stretch}
.brxe-section.sec-head,.brxe-container.sec-head,.brxe-block.sec-head,.brxe-div.sec-head{display:block;align-items:stretch}
.brxe-section.hero-center,.brxe-container.hero-center,.brxe-block.hero-center,.brxe-div.hero-center{display:block;align-items:stretch}
.brxe-section.ct-form,.brxe-container.ct-form,.brxe-block.ct-form,.brxe-div.ct-form{display:block;align-items:stretch}
.brxe-section.prose,.brxe-container.prose,.brxe-block.prose,.brxe-div.prose{display:block;align-items:stretch}
.brxe-section.philo,.brxe-container.philo,.brxe-block.philo,.brxe-div.philo{display:block;align-items:stretch}
.brxe-section.pj-next,.brxe-container.pj-next,.brxe-block.pj-next,.brxe-div.pj-next{display:block;align-items:stretch}
.brxe-section.footer,.brxe-container.footer,.brxe-block.footer,.brxe-div.footer{display:block;align-items:stretch}
.brxe-section.wiz,.brxe-container.wiz,.brxe-block.wiz,.brxe-div.wiz{display:block;align-items:stretch}
.brxe-section.nav,.brxe-container.nav,.brxe-block.nav,.brxe-div.nav{display:block;align-items:stretch}
.brxe-section.nav-dd,.brxe-container.nav-dd,.brxe-block.nav-dd,.brxe-div.nav-dd{display:block;align-items:stretch}
.brxe-section.dd-panel,.brxe-container.dd-panel,.brxe-block.dd-panel,.brxe-div.dd-panel{display:block;align-items:stretch}
.brxe-section.mega-in,.brxe-container.mega-in,.brxe-block.mega-in,.brxe-div.mega-in{display:block;align-items:stretch}
.brxe-section.mega-feat,.brxe-container.mega-feat,.brxe-block.mega-feat,.brxe-div.mega-feat{display:block;align-items:stretch}
.brxe-section.mn,.brxe-container.mn,.brxe-block.mn,.brxe-div.mn{display:block;align-items:stretch}
.brxe-section.mn-body,.brxe-container.mn-body,.brxe-block.mn-body,.brxe-div.mn-body{display:block;align-items:stretch}
.brxe-section.mn-dd,.brxe-container.mn-dd,.brxe-block.mn-dd,.brxe-div.mn-dd{display:block;align-items:stretch}
.brxe-section.mn-dd-p,.brxe-container.mn-dd-p,.brxe-block.mn-dd-p,.brxe-div.mn-dd-p{display:block;align-items:stretch}
.brxe-section.ft-brand,.brxe-container.ft-brand,.brxe-block.ft-brand,.brxe-div.ft-brand{display:block;align-items:stretch}
.brxe-section.ft-col,.brxe-container.ft-col,.brxe-block.ft-col,.brxe-div.ft-col{display:block;align-items:stretch}
.brxe-section.kicker,.brxe-container.kicker,.brxe-block.kicker,.brxe-div.kicker{display:inline-flex;flex-direction:row}
.brxe-section.btn,.brxe-container.btn,.brxe-block.btn,.brxe-div.btn{display:inline-flex;flex-direction:row}
.brxe-section.u-link,.brxe-container.u-link,.brxe-block.u-link,.brxe-div.u-link{display:inline-flex;flex-direction:row}
.brxe-section.go,.brxe-container.go,.brxe-block.go,.brxe-div.go{display:grid}
.brxe-section.nav-in,.brxe-container.nav-in,.brxe-block.nav-in,.brxe-div.nav-in{display:flex;flex-direction:row}
.brxe-section.logo,.brxe-container.logo,.brxe-block.logo,.brxe-div.logo{display:inline-flex;flex-direction:row}
.brxe-section.nav-c,.brxe-container.nav-c,.brxe-block.nav-c,.brxe-div.nav-c{display:flex;flex-direction:row}
.brxe-section.nav-side,.brxe-container.nav-side,.brxe-block.nav-side,.brxe-div.nav-side{display:flex;flex-direction:row}
.brxe-section.ham-icon,.brxe-container.ham-icon,.brxe-block.ham-icon,.brxe-div.ham-icon{display:block}
.brxe-section.mega-grid,.brxe-container.mega-grid,.brxe-block.mega-grid,.brxe-div.mega-grid{display:grid}
.brxe-section.mega-label,.brxe-container.mega-label,.brxe-block.mega-label,.brxe-div.mega-label{display:block}
.brxe-section.mega-links,.brxe-container.mega-links,.brxe-block.mega-links,.brxe-div.mega-links{display:grid}
.brxe-section.dd-a,.brxe-container.dd-a,.brxe-block.dd-a,.brxe-div.dd-a{display:flex;flex-direction:row}
.brxe-section.mn-drawer,.brxe-container.mn-drawer,.brxe-block.mn-drawer,.brxe-div.mn-drawer{display:flex;flex-direction:column}
.brxe-section.mn-head,.brxe-container.mn-head,.brxe-block.mn-head,.brxe-div.mn-head{display:flex;flex-direction:row}
.brxe-section.mn-close,.brxe-container.mn-close,.brxe-block.mn-close,.brxe-div.mn-close{display:grid}
.brxe-section.mn-foot,.brxe-container.mn-foot,.brxe-block.mn-foot,.brxe-div.mn-foot{display:grid}
.brxe-section.hero-ctas,.brxe-container.hero-ctas,.brxe-block.hero-ctas,.brxe-div.hero-ctas{display:flex;flex-direction:row}
.brxe-section.hero-facts,.brxe-container.hero-facts,.brxe-block.hero-facts,.brxe-div.hero-facts{display:flex;flex-direction:row}
.brxe-section.hero-facts-simple,.brxe-container.hero-facts-simple,.brxe-block.hero-facts-simple,.brxe-div.hero-facts-simple{display:flex;flex-direction:row}
.brxe-section.clients-row,.brxe-container.clients-row,.brxe-block.clients-row,.brxe-div.clients-row{display:flex;flex-direction:row}
.brxe-section.marq-track,.brxe-container.marq-track,.brxe-block.marq-track,.brxe-div.marq-track{display:flex;flex-direction:row}
.brxe-section.marq-item,.brxe-container.marq-item,.brxe-block.marq-item,.brxe-div.marq-item{display:flex;flex-direction:row}
.brxe-section.sec-more,.brxe-container.sec-more,.brxe-block.sec-more,.brxe-div.sec-more{display:flex;flex-direction:row}
.brxe-section.pillars,.brxe-container.pillars,.brxe-block.pillars,.brxe-div.pillars{display:grid}
.brxe-section.svc-row,.brxe-container.svc-row,.brxe-block.svc-row,.brxe-div.svc-row{display:grid}
.brxe-section.svc-name,.brxe-container.svc-name,.brxe-block.svc-name,.brxe-div.svc-name{display:flex;flex-direction:column}
.brxe-section.svc-grid,.brxe-container.svc-grid,.brxe-block.svc-grid,.brxe-div.svc-grid{display:grid}
.brxe-section.svc-card,.brxe-container.svc-card,.brxe-block.svc-card,.brxe-div.svc-card{display:flex;flex-direction:column}
.brxe-section.steps,.brxe-container.steps,.brxe-block.steps,.brxe-div.steps{display:grid}
.brxe-section.step-tags,.brxe-container.step-tags,.brxe-block.step-tags,.brxe-div.step-tags{display:flex;flex-direction:row}
.brxe-section.work-grid,.brxe-container.work-grid,.brxe-block.work-grid,.brxe-div.work-grid{display:grid}
.brxe-section.work-card,.brxe-container.work-card,.brxe-block.work-card,.brxe-div.work-card{display:flex;flex-direction:column}
.brxe-section.work-img,.brxe-container.work-img,.brxe-block.work-img,.brxe-div.work-img{display:grid}
.brxe-section.work-arrow,.brxe-container.work-arrow,.brxe-block.work-arrow,.brxe-div.work-arrow{display:grid}
.brxe-section.work-bd,.brxe-container.work-bd,.brxe-block.work-bd,.brxe-div.work-bd{display:flex;flex-direction:column}
.brxe-section.ins-grid,.brxe-container.ins-grid,.brxe-block.ins-grid,.brxe-div.ins-grid{display:grid}
.brxe-section.ins-card,.brxe-container.ins-card,.brxe-block.ins-card,.brxe-div.ins-card{display:flex;flex-direction:column}
.brxe-section.ins-cat,.brxe-container.ins-cat,.brxe-block.ins-cat,.brxe-div.ins-cat{display:inline-flex;flex-direction:row}
.brxe-section.ins-foot,.brxe-container.ins-foot,.brxe-block.ins-foot,.brxe-div.ins-foot{display:flex;flex-direction:row}
.brxe-section.cta-btns,.brxe-container.cta-btns,.brxe-block.cta-btns,.brxe-div.cta-btns{display:flex;flex-direction:row}
.brxe-section.ft-grid,.brxe-container.ft-grid,.brxe-block.ft-grid,.brxe-div.ft-grid{display:grid}
.brxe-section.ft-bot,.brxe-container.ft-bot,.brxe-block.ft-bot,.brxe-div.ft-bot{display:flex;flex-direction:row}
.brxe-section.mo,.brxe-container.mo,.brxe-block.mo,.brxe-div.mo{display:flex;flex-direction:row}
.brxe-section.mo-x,.brxe-container.mo-x,.brxe-block.mo-x,.brxe-div.mo-x{display:grid}
.brxe-section.mf,.brxe-container.mf,.brxe-block.mf,.brxe-div.mf{display:grid}
.brxe-section.mf-r,.brxe-container.mf-r,.brxe-block.mf-r,.brxe-div.mf-r{display:grid}
.brxe-section.mf-f,.brxe-container.mf-f,.brxe-block.mf-f,.brxe-div.mf-f{display:grid}
.brxe-section.mf-ft,.brxe-container.mf-ft,.brxe-block.mf-ft,.brxe-div.mf-ft{display:flex;flex-direction:row}
.brxe-section.chips,.brxe-container.chips,.brxe-block.chips,.brxe-div.chips{display:flex;flex-direction:row}
.brxe-section.rel,.brxe-container.rel,.brxe-block.rel,.brxe-div.rel{display:flex;flex-direction:row}
.brxe-section.svc-hero,.brxe-container.svc-hero,.brxe-block.svc-hero,.brxe-div.svc-hero{display:grid}
.brxe-section.tc,.brxe-container.tc,.brxe-block.tc,.brxe-div.tc{display:grid}
.brxe-section.tc-list,.brxe-container.tc-list,.brxe-block.tc-list,.brxe-div.tc-list{display:grid}
.brxe-section.blog-meta,.brxe-container.blog-meta,.brxe-block.blog-meta,.brxe-div.blog-meta{display:flex;flex-direction:row}
.brxe-section.tc-img,.brxe-container.tc-img,.brxe-block.tc-img,.brxe-div.tc-img{display:block}
.brxe-section.hs-track,.brxe-container.hs-track,.brxe-block.hs-track,.brxe-div.hs-track{display:flex;flex-direction:row}
.brxe-section.inc-grid,.brxe-container.inc-grid,.brxe-block.inc-grid,.brxe-div.inc-grid{display:grid}
.brxe-section.inc-card,.brxe-container.inc-card,.brxe-block.inc-card,.brxe-div.inc-card{display:flex;flex-direction:column}
.brxe-section.inc-more,.brxe-container.inc-more,.brxe-block.inc-more,.brxe-div.inc-more{display:inline-flex;flex-direction:row}
.brxe-section.pm,.brxe-container.pm,.brxe-block.pm,.brxe-div.pm{display:grid}
.brxe-section.tile,.brxe-container.tile,.brxe-block.tile,.brxe-div.tile{display:grid}
.brxe-section.pj-gal,.brxe-container.pj-gal,.brxe-block.pj-gal,.brxe-div.pj-gal{display:grid}
.brxe-section.pj-stats,.brxe-container.pj-stats,.brxe-block.pj-stats,.brxe-div.pj-stats{display:flex;flex-direction:row}
.brxe-section.pj-next-a,.brxe-container.pj-next-a,.brxe-block.pj-next-a,.brxe-div.pj-next-a{display:block}
.brxe-section.pj-next-t,.brxe-container.pj-next-t,.brxe-block.pj-next-t,.brxe-div.pj-next-t{display:block}
.brxe-section.pj-next-s,.brxe-container.pj-next-s,.brxe-block.pj-next-s,.brxe-div.pj-next-s{display:block}
.brxe-section.founders,.brxe-container.founders,.brxe-block.founders,.brxe-div.founders{display:grid}
.brxe-section.art-grid,.brxe-container.art-grid,.brxe-block.art-grid,.brxe-div.art-grid{display:grid}
.brxe-section.toc-label,.brxe-container.toc-label,.brxe-block.toc-label,.brxe-div.toc-label{display:block}
.brxe-section.ct-grid,.brxe-container.ct-grid,.brxe-block.ct-grid,.brxe-div.ct-grid{display:grid}
.brxe-section.ct-side,.brxe-container.ct-side,.brxe-block.ct-side,.brxe-div.ct-side{display:grid}
.brxe-section.wiz-steps,.brxe-container.wiz-steps,.brxe-block.wiz-steps,.brxe-div.wiz-steps{display:flex;flex-direction:row}
.brxe-section.wiz-panels,.brxe-container.wiz-panels,.brxe-block.wiz-panels,.brxe-div.wiz-panels{display:block}
.brxe-section.wiz-svc-grid,.brxe-container.wiz-svc-grid,.brxe-block.wiz-svc-grid,.brxe-div.wiz-svc-grid{display:grid}
.brxe-section.wiz-svc,.brxe-container.wiz-svc,.brxe-block.wiz-svc,.brxe-div.wiz-svc{display:flex;flex-direction:column}
.brxe-section.wiz-pill-grid,.brxe-container.wiz-pill-grid,.brxe-block.wiz-pill-grid,.brxe-div.wiz-pill-grid{display:flex;flex-direction:row}
.brxe-section.wiz-sum,.brxe-container.wiz-sum,.brxe-block.wiz-sum,.brxe-div.wiz-sum{display:grid}
.brxe-section.wiz-nav,.brxe-container.wiz-nav,.brxe-block.wiz-nav,.brxe-div.wiz-nav{display:flex;flex-direction:row}
.brxe-section.g-dots,.brxe-container.g-dots,.brxe-block.g-dots,.brxe-div.g-dots{display:flex;flex-direction:row}
/* ── studio dot ──
   The design put an empty <i> inside each studio label. That forces raw
   markup into the element text field, which is not editable in any useful
   way, so the dot is a pseudo-element now. The original <i> markup still
   renders correctly if it appears. */
.ft-city span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);flex:0 0 auto}
.ft-city span:has(i)::before{display:none}

/* Mega-panel links: title and description are separate elements now, so
   the anchor lays them out itself instead of relying on an inner span. */
.dd-a{flex-direction:column;align-items:flex-start;gap:3px}
.dd-a>strong,.dd-a>small{display:block}
.dd-a>small{font-size:12.5px;color:var(--faint);line-height:1.45}

/* ── flex-row children must size to their content ──
   Bricks gives every .brxe-block `width:100%`. That is right for a stacked
   column, but inside a horizontal row each child then demands the full
   width, so no free space is left for `margin-right:auto` to push against
   and the row collapses into one cluster. The header bar was the victim:
   logo, links and button packed together on the left instead of
   logo-left / rest-right. Only rows whose items are meant to be
   content-width are listed here. */
.brxe-text-basic.logo,
.brxe-block.nav-c,
.brxe-block.nav-side,
.brxe-block.mn-head>*,
.brxe-block.ft-bot>*{width:auto}

/* ── admin bar ──
   The nav is position:fixed, so a logged-in preview needs everything sitting
   under it pushed down by the bar's height. --bar is 0 for visitors, so the
   live site is untouched — this only makes admin previews match the design. */
:root{--bar:0px}
.admin-bar{--bar:32px}
@media screen and (max-width:782px){.admin-bar{--bar:46px}}
.admin-bar .nav,.admin-bar .mn,.admin-bar .mo{top:var(--bar)}
.admin-bar .hero{padding-top:calc(var(--nav-h) + var(--bar) + clamp(64px,9vw,120px))}
.admin-bar .hero.compact{padding-top:calc(var(--nav-h) + var(--bar) + clamp(48px,6.5vw,84px))}
.admin-bar .hero.svc{padding-top:calc(var(--nav-h) + var(--bar) + clamp(72px,11vw,150px))}

/* ═══════════ IN-BUILDER CANVAS ═══════════
   The reveal animation hides `.rv` and `.stg .rc` until twinroot.js adds
   `.in` on scroll. That script is deliberately not loaded inside the builder
   (its nav, modal and page-transition handlers would fight the editor), so
   without this every revealed element renders as an empty box in the canvas
   even though the content is there.

   Keyed off `bricks-is-frontend`, which Bricks puts on the body only on the
   real front end. That makes this independent of any Bricks hook — it just
   needs the stylesheet, which the canvas already loads. */
body:not(.bricks-is-frontend) .rv,
body:not(.bricks-is-frontend) .stg .rc,
body:not(.bricks-is-frontend) .stg > *{
  opacity:1!important;transform:none!important;transition:none!important;
}
/* a fixed header and full-screen overlays make the canvas unusable */
body:not(.bricks-is-frontend) .nav{position:relative!important;top:0!important}
body:not(.bricks-is-frontend) .mn,
body:not(.bricks-is-frontend) .mo{display:none!important}
body:not(.bricks-is-frontend) .hero,
body:not(.bricks-is-frontend) .hero.compact,
body:not(.bricks-is-frontend) .hero.svc{padding-top:clamp(48px,6vw,96px)!important}

/* ═══════════ BRICKS FORM ELEMENT → matches .mf / .wiz styling ═══════════ */
/* Bricks already lays the form out correctly:
     :where(.brxe-form,.wpcf7-form){display:flex;flex-wrap:wrap}
     :where(.brxe-form,.wpcf7-form) .form-group{display:flex;flex-direction:column;width:100%}
   plus a per-form rule for each field's width. Those selectors are wrapped in
   :where(), which has zero specificity, so any rule here silently replaces
   them — do NOT restate display, flex-direction or width.

   Two things must be avoided in particular: a grid on the form (it would
   collapse the row), and `gap` (two 50% fields plus a gap exceed 100% and
   wrap). The gutter is padding on the groups instead, which works because
   box-sizing is border-box, so 50% + 50% still fits exactly. */
:is(.brxe-form,.wpcf7-form){width:auto;margin-inline:-7px}
:is(.brxe-form,.wpcf7-form) .form-group{padding-inline:7px;gap:8px}
:is(.brxe-form,.wpcf7-form) label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
:is(.brxe-form,.wpcf7-form) input[type=text],
:is(.brxe-form,.wpcf7-form) input[type=email],
:is(.brxe-form,.wpcf7-form) input[type=tel],
:is(.brxe-form,.wpcf7-form) input[type=url],
:is(.brxe-form,.wpcf7-form) input[type=number],
:is(.brxe-form,.wpcf7-form) select,
:is(.brxe-form,.wpcf7-form) textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg);font:inherit;font-size:15px;color:var(--ink);
  transition:border-color .2s,box-shadow .2s;
}
:is(.brxe-form,.wpcf7-form) textarea{min-height:120px;resize:vertical}
:is(.brxe-form,.wpcf7-form) input:focus,:is(.brxe-form,.wpcf7-form) select:focus,:is(.brxe-form,.wpcf7-form) textarea:focus{
  outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(46,196,182,.16);
}
:is(.brxe-form,.wpcf7-form) ::placeholder{color:var(--faint)}
:is(.brxe-form,.wpcf7-form) .bricks-button{
  display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:999px;
  font-size:14.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  background:var(--ink);color:var(--bg);border:0;cursor:pointer;
  transition:background .22s,transform .22s var(--eo);
}
:is(.brxe-form,.wpcf7-form) .bricks-button:hover{background:#0A2A42;transform:translateY(-1px)}
:is(.brxe-form,.wpcf7-form) .bricks-button:active{transform:translateY(0) scale(.97)}
:is(.brxe-form,.wpcf7-form) .message{
  margin-top:14px;padding:14px 18px;border-radius:12px;font-size:14px;font-weight:500;
  background:var(--teal-soft);color:var(--teal-d);
}
:is(.brxe-form,.wpcf7-form) .message.error{background:rgba(192,57,43,.08);color:#C0392B}

/* Name and Email sit side by side because those two fields are set to 50%
   in the form itself — nothing extra is needed here. On a narrow screen
   every field goes full width. */
@media(max-width:600px){
  :is(.brxe-form,.wpcf7-form)>.form-group{width:100%!important}
}

/* Extra air above everything below the name/email row: Business, the
   message field and the submit row. The 50/50 row keeps its own spacing. */
.mo :is(.brxe-form,.wpcf7-form)>.form-group:nth-child(n+3){margin-top:10px}

/* the submit row carries the reassurance note on the right, like .mf-ft */
:is(.brxe-form,.wpcf7-form) .submit-button-wrapper{
  flex-direction:row;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding-top:6px;
}
:is(.brxe-form,.wpcf7-form) .submit-button-wrapper .mf-n{margin:0}

/* the design's buttons carry a trailing arrow that animates on hover */
:is(.brxe-form,.wpcf7-form) .bricks-button .text{display:inline-flex;align-items:center;gap:9px}
:is(.brxe-form,.wpcf7-form) .bricks-button .text::after{content:"→";transition:transform .22s var(--eo)}
:is(.brxe-form,.wpcf7-form) .bricks-button:hover .text::after{transform:translateX(4px)}
/* ── choice groups ──
   Bricks renders these as .form-group[role=group] > .label + ul.options-wrapper
   with no class of their own; twinroot.js tags them `.tw-choice`. The native
   input is hidden and its <label> becomes the pill. */
:is(.brxe-form,.wpcf7-form) .tw-choice{gap:12px}
:is(.brxe-form,.wpcf7-form) .tw-choice .options-wrapper{
  display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0;
}
:is(.brxe-form,.wpcf7-form) .tw-choice li{margin:0;position:relative}
:is(.brxe-form,.wpcf7-form) .tw-choice input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
:is(.brxe-form,.wpcf7-form) .tw-choice label{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:12px 20px;border:1px solid var(--line);
  border-radius:999px;font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s,color .2s;
}
:is(.brxe-form,.wpcf7-form) .tw-choice label:hover{border-color:var(--teal)}
:is(.brxe-form,.wpcf7-form) .tw-choice input:checked+label,
:is(.brxe-form,.wpcf7-form) .tw-choice label.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
:is(.brxe-form,.wpcf7-form) .tw-choice input:focus-visible+label{outline:2px solid var(--teal);outline-offset:3px}

/* the group's question reads as the step heading, not a field label */
:is(.brxe-form,.wpcf7-form) .tw-choice>.label{
  font-size:clamp(19px,2vw,23px);font-weight:600;letter-spacing:-.02em;
  text-transform:none;color:var(--ink);line-height:1.3;
}
/* two choice groups stacked in one step (Monthly budget, then Timeline)
   read as separate questions, so the second one opens with clear air
   above its heading instead of sitting on the pills before it */
.wiz .form-group[role="group"]+.form-group[role="group"]{margin-top:18px}
/* dark sections invert the field chrome */
.on-dark :is(.brxe-form,.wpcf7-form) label{color:var(--ink-l2)}
.on-dark :is(.brxe-form,.wpcf7-form) input,.on-dark :is(.brxe-form,.wpcf7-form) select,.on-dark :is(.brxe-form,.wpcf7-form) textarea{
  background:rgba(253,255,252,.06);border-color:var(--line-d);color:var(--bg);
}
.on-dark :is(.brxe-form,.wpcf7-form) .bricks-button{background:var(--teal);color:var(--ink)}

/* ═══════════ WP EDITOR CONTENT inside .prose ═══════════ */
.prose>*:first-child{margin-top:0}
.prose img,.prose figure img{border-radius:16px;width:100%;height:auto}
.prose figure{margin:clamp(26px,3.4vw,40px) 0}
.prose figcaption{margin-top:12px;font-size:13px;color:var(--faint);text-align:center}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px}
.prose li{margin-bottom:8px;color:var(--body);line-height:1.7}
.prose blockquote{
  margin:clamp(26px,3.4vw,40px) 0;padding:4px 0 4px 26px;border-left:2px solid var(--teal);
  font-size:clamp(18px,1.9vw,22px);line-height:1.5;font-weight:500;color:var(--ink);
}
.prose blockquote p:last-child{margin-bottom:0}
.prose a:not(.btn):not(.u-link){color:var(--teal-d);text-decoration:underline;text-underline-offset:3px}
.prose a:not(.btn):not(.u-link):hover{color:var(--ink)}
.prose code{
  padding:2px 7px;border-radius:6px;background:var(--tint);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
}
.prose table{width:100%;border-collapse:collapse;margin:clamp(26px,3.4vw,40px) 0;font-size:14.5px}
.prose th,.prose td{padding:12px 14px;border-bottom:1px solid var(--line-soft);text-align:left}
.prose th{font-weight:600;color:var(--ink)}
.prose td{color:var(--body)}
.wp-caption{max-width:100%}
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ═══════════ REAL IMAGES replacing the placeholder tiles ═══════════ */
/* .tile / .work-img / .ph keep their gradient as a fallback; an <img> or a
   CSS background dropped inside simply covers it. */
.tile>img,.work-img>img,.ph>img,.founders>img,.pj-banner>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;
}
.tile,.work-img,.ph,.founders,.pj-banner{position:relative;overflow:hidden}
.tile.has-img>span,.work-img.has-img>span:not(.work-arrow),.ph.has-img>span,.founders.has-img>span{opacity:0}
.work-img.has-img .work-arrow{z-index:2}
.client-logo img{max-height:34px;width:auto;filter:grayscale(1);opacity:.62;transition:filter .25s,opacity .25s}
.client-logo:hover img{filter:none;opacity:1}

/* ═══════════ QUERY-LOOP SAFETY ═══════════ */
/* A Bricks query loop repeats the element it sits on, so the grid class must
   live on the PARENT. These rules keep a stray wrapper from breaking layout. */
.work-grid>.brxe-block,.ins-grid>.brxe-block,.svc-grid>.brxe-block,
.pillars>.brxe-block,.steps>.brxe-block{min-width:0}
.chips>.brxe-text-basic,.chips>.brxe-block{display:contents}

/* Bricks renders an empty div for a loop with no results — hide it. */
.brxe-block:empty:not(.tile):not(.work-img):not(.ph):not(.founders):not(.wiz-bar){display:none}

/* ═══════════ PRINT ═══════════ */
@media print{
  .nav,.mn,.mo,.cta,.footer,.skip,.sec-more{display:none!important}
  body{background:#fff;color:#000}
  .sec{padding:24px 0}
}

/* ═══════════ BRICKS BUTTON ELEMENT → carries .btn, .btn-ink, … ═══════════ */
/* Bricks' own .bricks-button chrome is neutralised only where our modifier
   classes take over, so .btn-line keeps its border and the solid variants
   keep their fill. */
.brxe-button.btn{display:inline-flex;font:inherit;text-align:center;text-decoration:none;width:auto}
.brxe-button.btn-ink,.brxe-button.btn-teal{border:0}
.brxe-button.btn-line{background:transparent}
.brxe-button.btn-line-d{background:transparent}
.brxe-text-basic.u-link,.brxe-text-basic.kicker,.brxe-text-basic.n{display:inline-flex}
.brxe-text-basic.clients-label,.brxe-text-basic.lede,.brxe-text-basic.stmt,
.brxe-text-basic.tc-tag,.brxe-text-basic.note,.brxe-text-basic.philo-big,
.brxe-text-basic.philo-res,.brxe-text-basic.ft-statement{display:block}

/* ═══════════ CUSTOM ELEMENT WRAPPERS ═══════════ */
/* These elements print the design's own grid markup (.work-grid, .ct-side,
   .pillars …). Their Bricks root div would sit between that markup and its
   intended parent, so it is removed from the box tree entirely. The client
   row is excluded — it carries .clients-sec and is a real section band. */
.brxe-twinroot-part,
.brxe-twinroot-list,
.brxe-twinroot-work-grid,
.brxe-twinroot-insight-grid,
.brxe-twinroot-header,
.brxe-twinroot-footer,
.brxe-twinroot-modal{display:contents}

/* ═══════════ CONTACT FORM 7 — same skin as the Bricks forms ═══════════
   Every form rule above targets :is(.brxe-form,.wpcf7-form), so a CF7 form
   authored with the same .form-group wrappers inherits the whole design.
   What CF7 cannot express on its own is added here: Bricks' flex layout
   came from its zero-specificity theme styles, and CF7's own wrappers and
   messages carry default chrome the design has no use for. */
.wpcf7-form{display:flex;flex-wrap:wrap}
.wpcf7-form .form-group{display:flex;flex-direction:column;width:100%}
.wpcf7-form .form-group.w50{width:50%}
@media(max-width:600px){.wpcf7-form>.form-group{width:100%!important}}
.wpcf7-form .wpcf7-form-control-wrap{display:block;width:100%}
.wpcf7-form .wpcf7-submit{cursor:pointer}
/* CF7's own status chrome, restyled as the design's quiet notes */
.wpcf7 form .wpcf7-response-output{
  width:100%;margin:14px 7px 0;padding:14px 18px;border:0;border-radius:12px;
  font-size:14px;font-weight:500;background:var(--sand);color:var(--ink);
}
.wpcf7 form.sent .wpcf7-response-output{background:var(--teal-soft);color:var(--teal-d)}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{background:#FBEDEA;color:#B3402A}
.wpcf7-not-valid-tip{font-size:12.5px;color:#B3402A;margin-top:6px}
.wpcf7-spinner{margin:0 12px}

/* ═══════════ WIZARD — service cards ═══════════ */
/* twinroot.js rewrites the service checkboxes into the numbered cards from
   the design. Everything else keeps the pill look above. */
:is(.brxe-form,.wpcf7-form) .tw-choice.wiz-cards .options-wrapper{
  display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:12px;align-items:stretch;
}
/* an odd final option ("Not sure yet") spans the row, as in the design */
:is(.brxe-form,.wpcf7-form) .tw-choice.wiz-cards li:last-child:nth-child(odd){grid-column:1 / -1}
/* every card fills its grid cell fully, so a short description no longer
   produces a shorter card than its row-mate - widths and heights stay
   consistent across the whole grid */
:is(.brxe-form,.wpcf7-form) .tw-choice.wiz-cards li{height:100%}
:is(.brxe-form,.wpcf7-form) .tw-choice.wiz-cards label.wiz-svc{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:5px;padding:18px;
  width:100%;height:100%;min-height:0;box-sizing:border-box;
  border:1px solid var(--line);border-radius:16px;background:transparent;color:var(--ink);
  font-size:inherit;font-weight:inherit;letter-spacing:0;text-transform:none;
  transition:border-color .2s var(--eo),background .2s,transform .2s var(--eo);
}
:is(.brxe-form,.wpcf7-form) .tw-choice.wiz-cards label.wiz-svc:hover{border-color:var(--teal);transform:translateY(-2px)}
:is(.brxe-form,.wpcf7-form) .tw-choice.wiz-cards input:checked+label.wiz-svc,
:is(.brxe-form,.wpcf7-form) .tw-choice.wiz-cards label.wiz-svc.on{
  border-color:var(--teal);background:var(--teal-soft);color:var(--ink);
}
:is(.brxe-form,.wpcf7-form) .tw-choice.wiz-cards .ic{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--teal-d)}
:is(.brxe-form,.wpcf7-form) .tw-choice.wiz-cards strong{font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
:is(.brxe-form,.wpcf7-form) .tw-choice.wiz-cards small{font-size:12.5px;line-height:1.5;color:var(--faint)}
/* the cards carry their own heading, so hide the duplicated field label */
:is(.brxe-form,.wpcf7-form) .tw-choice.wiz-cards>.label{display:none}
@media(max-width:600px){:is(.brxe-form,.wpcf7-form) .tw-choice.wiz-cards .options-wrapper{grid-template-columns:1fr}}

/* The wizard injects its own chrome, so the form's own submit row moves into
   .wiz-nav and the panels take over visibility. Each panel is a wrapping
   flex row like the form itself, so the field widths pinned by twinroot.js
   still lay out side by side. */
.wiz .wiz-panel{display:none}
.wiz .wiz-panel.active{
  display:flex;flex-wrap:wrap;align-items:flex-start;
  margin-inline:-7px;animation:wizIn .4s var(--eo);
}
.wiz .wiz-panel>.wiz-sum{width:100%;margin:0 7px 22px}
/* The panel is a wrapping flex row so the pinned field widths sit side by
   side, but the step's own heading is not a field - without a width it
   only takes as much room as its text needs, leaving space on the same row
   for the first field to wrap up beside it instead of starting a new line. */
.wiz .wiz-panel>.wiz-h{width:100%;padding-inline:7px}
.wiz .wiz-nav .submit-button-wrapper{margin:0;width:auto}
.wiz .wiz-nav [hidden]{display:none!important}
.wiz .wiz-nav{clear:both}

/* ═══════════════════════════════════════════════════════════════════
   UTILITIES — the static pages' inline styles, as named classes
   ─────────────────────────────────────────────────────────────────
   The source HTML tuned a handful of spots with style="…" attributes.
   Bricks elements carry classes rather than style attributes, so each
   one becomes a class here with the identical value. Nothing new is
   invented; this is a straight translation.
═══════════════════════════════════════════════════════════════════ */

/* .tc-tag was centred in all four places it appears — twice by sitting
   inside .sec-head (which is text-align:center) and twice by an inline
   style. Centring the class itself covers both. */
.tc-tag{text-align:center}

/* style="margin-bottom:0" — a section head with no grid following it */
.sec-head.gap-0{margin-bottom:0}

/* style="margin-top:24px" — second paragraph in a statement block */
.lede.gap-top{margin-top:24px}

/* style="margin-bottom:28px;font-size:15px" — contact form intro */
.lede.small{margin-bottom:28px;font-size:15px}

/* style="margin-bottom:10px" — contact form heading */
.h-sec.gap-tight{margin-bottom:10px}

/* style="padding-bottom:0" / padding-top overrides on .sec */
.sec.pb-0{padding-bottom:0}
.sec.tight.pt-sm{padding-top:clamp(24px,3.5vw,48px)}
.sec.tight.pt-md{padding-top:clamp(56px,8vw,96px)}

/* style="margin-top:28px;justify-content:center;color:var(--bg)" —
   the centred link under the philosophy statement on a dark section */
.u-link.link-centered{margin-top:28px;justify-content:center;color:var(--bg)}
.u-link.link-centered:hover{color:var(--teal)}

/* style="margin-top:0" — first heading inside an article body */
.prose>h2:first-child,.prose>h3:first-child{margin-top:0}

/* Wordmark shown until a logo image is uploaded. */
.logo-word{font-weight:700;letter-spacing:-.03em;color:var(--ink);white-space:nowrap;line-height:1}
/* The footer sits on the page background, not on ink — only genuinely dark
   surfaces invert the wordmark. */
.on-dark .logo-word{color:var(--bg)}

/* ═══════════ ARCHIVE PAGINATION ═══════════ */
.tw-pager{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:clamp(40px,5.5vw,64px);
}
.tw-pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 14px;border-radius:999px;
  border:1px solid var(--line);font-size:14.5px;font-weight:600;color:var(--ink);
  transition:border-color .2s,background .2s,color .2s,transform .2s var(--eo);
}
.tw-pager a.page-numbers:hover{border-color:var(--ink);transform:translateY(-1px)}
.tw-pager .page-numbers.current{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tw-pager .page-numbers.dots{border-color:transparent}
.on-dark .tw-pager .page-numbers{border-color:var(--line-d);color:var(--bg)}

/* Logo sizing: 46px in the header, 56px in the footer, as the design has it.
   Applies whether the mark is an <img> or the wordmark fallback. */
.logo img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.footer .logo img{width:56px;height:56px}
.brxe-block.logo{display:inline-flex;align-items:center;flex:0 0 auto;width:auto}

/* ═══════════ HEADER REFINEMENTS ═══════════ */

/* The mega panel's drop shadow fell across the page below it as a visible
   grey band. The bottom hairline already separates the panel from the
   content, so the shadow goes. */
.dd-panel{box-shadow:none}

/* More air above and below the bar. --nav-h drives the fixed header height
   and every hero's top padding, so changing it here keeps them in step. */
:root{--nav-h:88px}

/* Logo size is a DEFAULT only.

   Both selectors are wrapped in :where(), which contributes zero specificity,
   so any width or height set on the logo image in Bricks simply wins. The
   design's own two fixed-size rules are cancelled first, otherwise they would
   beat the builder at (0,1,1) and the setting would appear to do nothing. */
.logo img{width:auto;height:auto}
.footer .logo img{width:auto;height:auto}
:where(.logo) img{width:56px;height:56px;border-radius:50%;object-fit:cover}
/* The drawer's logo is a separate element from the header's, so a size set
   on the header in Bricks never reaches it - it was rendering at the raw
   file's 80px. Pinned here (0,2,1 beats .logo img's width:auto) so the
   drawer always matches the compact size the bar uses. */
.mn-head .logo img{width:48px;height:48px}
:where(.footer .logo) img{width:64px;height:64px}

/* ═══════════════════════════════════════════════════════════════════
   HOME HERO — full-viewport banner
   Every class is prefixed trm- on purpose: the site already has its own
   .hero / .wrap / .h-hero / .blob vocabulary with different values, and
   reusing those names here would silently corrupt every other hero on
   the site rather than just replace this one. Colours are the site's own
   tokens throughout - no new custom properties.
═══════════════════════════════════════════════════════════════════ */
.trm-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.trm-hero-bg{position:absolute;inset:0;z-index:0;display:block}
.trm-blob-px{position:absolute;inset:0;will-change:transform;display:block}
.trm-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;display:block}
.trm-blob--a{width:52vw;height:52vw;top:-14%;right:-12%;background:radial-gradient(circle,rgba(46,196,182,.4),transparent 70%);animation:trmDrift1 22s ease-in-out infinite}
.trm-blob--b{width:38vw;height:38vw;bottom:-14%;left:-8%;background:radial-gradient(circle,rgba(31,163,150,.3),transparent 70%);animation:trmDrift2 26s ease-in-out infinite}
.trm-blob--c{width:26vw;height:26vw;top:38%;left:38%;background:radial-gradient(circle,rgba(46,196,182,.22),transparent 70%);animation:trmDrift3 19s ease-in-out infinite}
@keyframes trmDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,5%) scale(1.08)}}
@keyframes trmDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,-4%) scale(1.1)}}
@keyframes trmDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,4%) scale(.92)}}
.trm-hero:before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(1,22,39,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(1,22,39,.05) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 40%,#000 25%,transparent 100%);mask-image:radial-gradient(ellipse 75% 65% at 50% 40%,#000 25%,transparent 100%)}

/* ambient particle network - drifts on its own, nudges near the cursor */
.trm-hero-net{position:absolute;inset:0;z-index:0;width:100%;height:100%;opacity:.9;display:block}

/* soft glow that trails the cursor, reinforcing the grid's depth */
.trm-cursor-glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s var(--eo);background:radial-gradient(400px circle at var(--mx,50%) var(--my,32%),rgba(46,196,182,.13),transparent 62%);display:block}
.trm-cursor-glow.is-in{opacity:1}

.trm-hero-inner{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--nav-h) + clamp(32px,6vw,64px))}

.trm-hero-eyebrow{display:flex;flex-direction:row;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:26px}
.trm-hero-eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);flex:0 0 auto}

.trm-h-hero{font-weight:600;letter-spacing:-.035em;line-height:1.04;font-size:clamp(38px,7.4vw,104px);max-width:18ch}
.trm-h-hero em{font-style:normal;color:var(--teal)}

.trm-hero-actions{margin-top:44px;display:flex;flex-direction:row;align-items:center;gap:30px;flex-wrap:wrap}
.trm-watch-btn{display:inline-flex;flex-direction:row;align-items:center;gap:14px}
.trm-watch-circle{position:relative;width:58px;height:58px;border-radius:50%;border:1px solid var(--line);display:flex;flex-direction:row;align-items:center;justify-content:center;transition:border-color .25s,transform .25s}
.trm-watch-circle:before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(46,196,182,.5);animation:trmRing 2.6s ease-out infinite}
.trm-watch-circle svg{width:16px;height:16px;fill:var(--ink);margin-left:2px;transition:fill .25s}
.trm-watch-btn:hover .trm-watch-circle{border-color:var(--teal);transform:scale(1.06)}
.trm-watch-btn:hover .trm-watch-circle svg{fill:var(--teal)}
@keyframes trmRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.trm-watch-label{font-size:14px;font-weight:600;color:var(--body)}
.trm-watch-btn:hover .trm-watch-label{color:var(--ink)}

.trm-hero-foot{position:relative;z-index:1;padding:0 0 36px;display:flex;flex-direction:row;align-items:center;justify-content:space-between}
/* .wrap already carries a same-specificity .brxe-container.wrap{display:block}
   rule from the generated Bricks-wrapper block elsewhere in this file - a
   second class on the same element (rather than relying on source order
   against that rule) makes this one win outright, in the builder too. */
.trm-hero-foot .wrap.trm-hero-foot-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
.trm-scroll-cue{display:flex;flex-direction:row;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.trm-scroll-line{width:1px;height:34px;background:var(--line);position:relative;overflow:hidden;display:block}
.trm-scroll-line:after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--teal);animation:trmScrollDown 2.2s ease-in-out infinite}
@keyframes trmScrollDown{0%{top:-100%}50%{top:0}100%{top:100%}}

.trm-hero-tags{display:flex;flex-direction:row;justify-content:flex-end;gap:10px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--faint)}
.trm-hero-tags span:not(:last-child):after{content:"\00b7";margin-left:10px;color:var(--line)}

@media (max-width:860px){
  .trm-hero-inner{padding-top:calc(var(--nav-h) + clamp(24px,5vw,40px))}
  .trm-hero-tags{display:none}
  /* An element-level display:block was set on the actions row in the
     builder. Harmless on desktop where both actions fit one line, but on a
     phone it stops them wrapping and pushes the watch button off screen -
     so the flex row is enforced here for small screens only. */
  .trm-hero-actions{display:flex!important;flex-wrap:wrap!important;flex-direction:row!important}
}
.admin-bar .trm-hero-inner{padding-top:calc(var(--nav-h) + var(--bar) + clamp(32px,6vw,64px))}

/* builder canvas: a full-viewport-height hero makes editing everything
   below it a scroll-heavy chore, so it collapses to content height there,
   matching how the other heroes are already handled in the canvas. */
body:not(.bricks-is-frontend) .trm-hero{min-height:auto!important}
body:not(.bricks-is-frontend) .trm-hero-inner{padding-top:clamp(48px,6vw,96px)!important}

@media (prefers-reduced-motion: reduce){
  .trm-blob,.trm-watch-circle:before,.trm-scroll-line:after{animation:none}
}