/* objectsource: styles shared by every page (tokens, reset, header, menu, footer, Talk to us panel).
   Load order: site.css, then the page-type file (home, article, case-study, insights, our-work, legal),
   then responsive.css. */

/* Inter, self-hosted (variable font, weights 400 to 700; Latin and Latin Extended only). Licence: assets/fonts/Inter-OFL.txt */
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/inter-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Inter Fallback: Arial resized to Inter's width and line metrics, so text drawn before the Inter web font
   loads takes the same space and nothing shifts when it swaps in. */
@font-face{font-family:"Inter Fallback";src:local("Arial");ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%;size-adjust:107.06%}

/* ==========================================================
   TOKENS: identical names and values to commercescale.ai
   ========================================================== */
:root{
  --paper:#FAF8F5; --ink:#2B2C2D; --ink-70:rgba(43,44,45,.7); --ink-50:rgba(43,44,45,.5);
  --moss:#334B20; --moss-10:rgba(51,75,32,.10); --moss-25:rgba(51,75,32,.25); --moss-50:rgba(51,75,32,.50);
  --sage:#899C7E; --sage-mid:#C5CEC0; --sage-light:#E7EBE6; --mint:#DFFDCC; --mint-light:#EEFDE5;
  --orange:#F46F38; --white:#FFFFFF;
  --fs-mega:clamp(48px,8vw,128px); --fs-h1:clamp(38px,5.5vw,84px); --fs-h2:clamp(28px,3.6vw,52px);
  --fs-h3:clamp(20px,2.2vw,30px); --fs-h4:clamp(16px,1.4vw,20px); --fs-body:clamp(15px,1.15vw,17px);
  --fs-small:clamp(13px,.95vw,14px); --fs-micro:11px;
  --pad-x:clamp(20px,4vw,58px); --pad-y:clamp(48px,8vw,112px); --gap:clamp(16px,2vw,28px); --gap-lg:clamp(24px,3vw,44px);
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:32px;
  --shadow-sm:0 1px 2px rgba(51,75,32,.05),0 2px 6px rgba(51,75,32,.04);
  --shadow-md:0 4px 12px rgba(51,75,32,.06),0 8px 24px rgba(51,75,32,.04);
  /* local helpers derived from the tokens above */
  --paper-90:rgba(250,248,245,.9); --paper-72:rgba(250,248,245,.72); --paper-12:rgba(250,248,245,.12);
  --ease:cubic-bezier(.2,.7,.2,1);
  --nav-h:76px;
}
/* ==========================================================
   BASE
   ========================================================== */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--fs-body);line-height:1.4;letter-spacing:-.015em;font-feature-settings:"cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-weight:400;line-height:1;margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1);letter-spacing:-.035em}
h2{font-size:var(--fs-h2);letter-spacing:-.03em}
h3{font-size:var(--fs-h3);letter-spacing:-.03em;line-height:1.05}
p{margin:0;text-wrap:pretty}
a{color:inherit}
img,svg{display:block;max-width:100%}
picture{display:contents} /* responsive-image wrapper (dev-tools/images/responsive.py): adds no box, so img styles apply as before */
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px;border-radius:2px}
.dark :focus-visible{outline-color:var(--mint)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--moss);color:var(--paper);padding:10px 16px;border-radius:var(--r-sm);font-weight:600;font-size:14px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--pad-x)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.num{font-variant-numeric:tabular-nums}
/* Eyebrow: same pattern as .cs-eyebrow on commercescale.ai */
.eyebrow{display:flex;gap:12px;align-items:center;margin:0 0 28px;font-size:13.8px;font-weight:500;letter-spacing:.04em;color:var(--moss)}
.eyebrow .n{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dark .eyebrow{color:var(--mint)}
/* Buttons: same as .btn on commercescale.ai */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;background:var(--orange);color:var(--ink);border-radius:999px;font-size:14px;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;transition:transform .18s,box-shadow .18s,background .18s;min-height:44px;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:rgba(244,111,56,.32) 0 6px 14px}
.btn .arrow{display:inline-block;transition:transform .18s}
.btn:hover .arrow{transform:translateX(3px)}
/* Text CTAs: one style site-wide (.link on links/buttons, .read inside whole-card links) */
.link,.read{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:var(--moss);text-decoration:none}
.link::after,.read::after{content:"";position:absolute;left:0;right:22px;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.link:hover::after,.link:focus-visible::after,.post:hover .read::after,.post:focus-visible .read::after{transform:scaleX(1)}
.link .arrow,.read .arrow{display:inline-block;transition:transform .18s}
.link:hover .arrow,.post:hover .read .arrow{transform:translateX(3px)}
.dark .link{color:var(--mint)}
.ext::after{content:"↗";font-weight:500;margin-left:2px}
/* Placeholder marker: content still to be supplied */
.ph{display:inline-flex;align-items:center;font-size:var(--fs-micro);font-weight:500;letter-spacing:.02em;line-height:1;color:var(--ink-70);border:1px solid var(--moss-25);border-radius:var(--r-sm);padding:4px 7px;vertical-align:middle;white-space:nowrap}
.ph-text{color:var(--ink-70)}
.frame{position:relative;background:var(--sage-light);border-radius:var(--r-md);overflow:hidden;color:var(--moss)}
.frame .ph{position:absolute;left:14px;bottom:14px;background:var(--paper)}
.frame:has(img) .ph{display:none}
/* Section rhythm */
.sec{padding-block:var(--pad-y)}
.sec + .sec{border-top:1px solid var(--moss-10)}
#what-we-do + .sec{border-top:0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gap-lg);flex-wrap:wrap;margin-bottom:clamp(32px,4.5vw,64px)}
#platforms .sec-head{margin-bottom:0}
#platforms .eyebrow{margin-bottom:24px}
/* ==========================================================
   HEADER: mirrors .nav on commercescale.ai
   ========================================================== */
.nav{position:sticky;top:0;z-index:80;background:rgba(250,248,245,.88);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:0}
/* no bottom rule on the header, scrolled or not */
.nav-inner{max-width:1440px;margin:0 auto;padding:18px var(--pad-x);display:flex;align-items:center;gap:20px;transition:padding .25s var(--ease)}
.nav.scrolled .nav-inner{padding-block:12px}
/* over the Commerce Scale band the header takes the commercescale.ai dark treatment */
.nav{transition:border-color .25s,background .25s}
.nav.on-dark{background:rgba(51,75,32,.94)}
.nav.on-dark .brand,.nav.on-dark .brand .name{color:var(--paper)}
.nav.on-dark .nav-links a{color:var(--paper-72)}
.nav.on-dark .nav-links a:hover{background:rgba(255,255,255,.08);color:var(--paper)}
.nav.on-dark .nav-links a.active{background:rgba(223,253,204,.12);color:var(--paper)}
.nav.on-dark .nav-links a.cs-link{color:var(--mint)}
.nav.on-dark .nav-toggle{color:var(--paper);border-color:rgba(250,248,245,.4)}
.nav.on-dark :focus-visible{outline-color:var(--mint)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--moss);flex-shrink:0}
.brand svg{width:34px;height:auto}
.brand .name{font-size:17px;font-weight:400;letter-spacing:-.02em;color:var(--moss)}
.nav-inner > nav{margin-left:auto}
.nav-links{display:flex;gap:6px;margin:0 12px 0 0;padding:0;list-style:none}
.nav-links a{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);padding:8px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:500;transition:background .18s,color .18s}
.nav-links a:hover{background:var(--sage-light);color:var(--moss)}
.nav-links a.active{color:var(--moss);background:var(--sage-light)}
.nav-links a.cs-link{color:var(--moss)}
.nav-toggle{display:none;margin-left:auto;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--moss);background:none;color:var(--moss);font-size:14px;font-weight:600;cursor:pointer}
.menu{position:fixed;inset:0;z-index:120;background:var(--paper);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:calc(env(safe-area-inset-top,0px) + 18px) var(--pad-x) calc(env(safe-area-inset-bottom,0px) + 24px);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s .25s}
.menu.open{opacity:1;visibility:visible;transition:opacity .25s var(--ease)}
.menu-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.menu ol{list-style:none;margin:0;padding:0;counter-reset:m}
.menu li{border-top:1px solid var(--moss-10)}
.menu li:last-child{border-bottom:1px solid var(--moss-10)}
.menu ol a{display:flex;align-items:baseline;gap:16px;padding:16px 0;font-size:clamp(26px,7vw,40px);letter-spacing:-.03em;text-decoration:none;color:var(--ink)}
.menu ol a .n{font-size:13px;color:var(--moss);letter-spacing:0;font-variant-numeric:tabular-nums;width:22px}
.menu .btn{margin-top:auto;justify-content:center}
.mbar{display:none}
/* page-to-page crossfade; the header stays put */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}
.nav{view-transition-name:site-header}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* ==========================================================
   08 CLOSING + FOOTER
   ========================================================== */
.close{position:relative;overflow:hidden;padding-block:clamp(80px,12vw,176px) clamp(64px,8vw,112px)}
.close h2{color:var(--moss);font-size:var(--fs-mega);letter-spacing:-.045em;line-height:.95;max-width:14ch;position:relative;z-index:1}
.close p:not(.eyebrow){margin-top:32px;max-width:44ch;font-size:clamp(17px,1.5vw,20px);color:var(--ink-70);position:relative;z-index:1}
.close .btn{margin-top:40px;position:relative;z-index:1;padding:15px 24px;font-size:15px}
.close-art{position:absolute;right:-16vw;top:50%;width:min(52vw,760px);aspect-ratio:1;transform:translateY(-50%);color:var(--moss);opacity:.06;pointer-events:none}
.close-art svg{width:100%;height:100%}
.foot{border-top:1px solid var(--moss-10);padding-block:56px calc(32px + env(safe-area-inset-bottom,0px));font-size:var(--fs-small)}
.foot-grid{display:grid;grid-template-columns:5fr 3fr 3fr 2fr;gap:var(--gap-lg)}
.foot .foot-h{font-size:var(--fs-small);line-height:1.4;font-weight:500;color:var(--ink-70);letter-spacing:-.005em;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{text-decoration:none;color:var(--ink)}
.foot-link{background:none;border:0;padding:0;min-height:28px;line-height:28px;font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.foot-link:hover{color:var(--moss);text-decoration:underline;text-underline-offset:3px}
.foot a:hover{color:var(--moss);text-decoration:underline;text-underline-offset:3px}
.foot .brand{margin-bottom:18px;color:var(--moss)}
/* Partner badges and certification marks: hero and footer */
.marks,.foot .marks{display:flex;flex-wrap:wrap;align-items:center;gap:20px clamp(24px,2.6vw,40px);margin:0;padding:0;list-style:none}
.marks img{display:block;width:auto;height:40px}
.marks .cert img{height:64px}
.foot .foot-marks{margin-top:48px}
.foot .co{color:var(--ink-70);display:grid;gap:2px}
/* full-width sage band: the box-shadow paints the background out to the window edges, clip-path keeps it to the band's height */
.offices{display:grid;grid-template-columns:5fr 3fr 3fr 2fr;gap:18px var(--gap-lg);margin-top:56px;padding-block:48px;background:var(--sage-light);box-shadow:0 0 0 100vmax var(--sage-light);clip-path:inset(0 -100vmax)}
.offices + .legal{margin-top:0;border-top:0}
.offices .foot-h{grid-column:1 / -1;margin-bottom:0}
.foot .office-list{grid-column:1 / -1;grid-template-columns:5fr 3fr 3fr 2fr;gap:32px var(--gap-lg)}
.foot address{font-style:normal;color:var(--ink-70);line-height:1.5}
.foot address strong{display:block;margin-bottom:4px;font-weight:500;color:var(--ink)}
.foot .co a,.legal a{display:inline-flex;align-items:center;min-height:28px;width:max-content}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:20px;border-top:1px solid var(--moss-10);color:var(--ink-70)}
.legal a{color:var(--ink-70)}
/* ==========================================================
   TALK TO US PANEL: same as .cs-talk on commercescale.ai
   ========================================================== */
.scrim{position:fixed;inset:0;z-index:130;background:rgba(43,44,45,.42);opacity:0;transition:opacity .32s var(--ease)}
.scrim.open{opacity:1}
.cs-talk{position:fixed;top:0;right:0;bottom:0;z-index:131;width:min(460px,100%);background:var(--moss);color:var(--paper);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .32s var(--ease);box-shadow:rgba(0,0,0,.25) -20px 0 60px;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.cs-talk.open{transform:none}
.cs-talk-top{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;border-bottom:1px solid var(--paper-12);font-size:14px;font-weight:600;letter-spacing:-.02em}
.cs-talk-x{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:none;color:var(--paper);font-size:20px;cursor:pointer}
.cs-talk-x:hover{background:rgba(255,255,255,.08)}
.cs-talk-body{padding:40px 28px;overflow-y:auto}
.cs-talk-body h2{font-size:clamp(28px,3vw,38px);letter-spacing:-.03em;line-height:1;margin:0 0 12px;color:var(--paper)}
.cs-talk-body h2:focus{outline:none}
.cs-talk-lead{color:var(--paper-72);font-size:15px;margin:0 0 28px}
.cs-hs{min-height:120px}
.cs-talk-note{color:var(--paper-72);font-size:12.5px;margin:24px 0 0}
.cs-talk-note a{color:var(--paper)}
/* ==========================================================
   MOTION
   ========================================================== */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .36s var(--ease),transform .36s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js .rv.in{opacity:1;transform:none}
.js .plat .panel.rv:first-child{transform:translateX(-24px)}
.js .plat .panel.rv:last-child{transform:translateX(24px)}
.js .plat .panel.rv.in{transform:none}
.js .hero h1 .l{opacity:0;transform:translateY(28px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .hero h1 .l2{transition-delay:.12s}
.js .hero.ready h1 .l{opacity:1;transform:none}