/* Business Casual - built from the Claude Design export. Design-system
   tokens and the page stylesheet are carried over verbatim; the export
   shipped the token blocks twice and one copy has been dropped. */

/* Business Casual — webfonts. Poppins = display, Rubik = body/UI. Files supplied by the client (OFL, see assets/fonts/*-OFL.txt). */
@font-face{font-family:"Poppins";src:url("../fonts/poppins-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Rubik";src:url("../fonts/rubik-var.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Rubik";src:url("../fonts/rubik-var-italic.woff2") format("woff2");font-weight:300 900;font-style:italic;font-display:swap}

/* Business Casual — color. Four brand values are fixed by the client:
   #121b3e navy, #377bc8 blue, #4f8ac3 blue-light, #ffffff white.
   Everything else is a navy-tinted derivative (neutrals) or a harmonised
   semantic hue added for UI states — see readme.md "Intentional additions". */
:root{
  /* --- brand core --- */
  --navy:#121b3e;
  --blue:#377bc8;
  --blue-light:#4f8ac3;
  --white:#ffffff;

  /* --- logo artwork values, sampled from the supplied PNG. Use these when
     placing or matching the mark; --navy is still the UI ink. --- */
  --logo-ink:#0a203b;
  --sand:#c7b299;
  --sand-light:#ead9c5;
  --tie-blue:#337dbb;

  /* --- navy ramp --- */
  --navy-900:#0b1129;
  --navy-800:#121b3e;
  --navy-700:#1c2851;
  --navy-600:#2a3766;

  /* --- blue ramp --- */
  --blue-800:#20508c;
  --blue-700:#2b64a8;
  --blue-600:#377bc8;
  --blue-500:#4f8ac3;
  --blue-400:#7aa9d8;
  --blue-300:#a3c4e5;
  --blue-200:#c8dcf0;
  --blue-100:#e4eef8;
  --blue-50:#f4f8fc;

  /* --- neutrals (cool, navy-tinted) --- */
  --n-0:#ffffff;
  --n-50:#f7f8fa;
  --n-100:#eef0f5;
  --n-200:#dfe3ec;
  --n-300:#c6ccd9;
  --n-400:#9aa2b4;
  --n-500:#6f7891;
  --n-600:#4c5570;

  /* --- semantic hues (added, not client-supplied) --- */
  --green-600:#1f8a6d;
  --green-100:#e2f4ef;
  --amber-600:#b8770d;
  --amber-100:#fdf1dc;
  --red-600:#c0392f;
  --red-100:#fbe9e7;

  /* --- text --- */
  --text-heading:var(--navy-800);
  --text-body:var(--navy-700);
  --text-muted:var(--n-500);
  --text-inverse:var(--white);
  --text-inverse-muted:rgba(255,255,255,.72);
  --text-accent:var(--blue-600);
  --text-link:var(--blue-600);
  --text-link-hover:var(--blue-800);

  /* --- surfaces --- */
  --surface-page:var(--white);
  --surface-subtle:var(--blue-50);
  --surface-card:var(--white);
  --surface-raised:var(--white);
  --surface-ink:var(--navy-800);
  --surface-ink-deep:var(--navy-900);
  --surface-accent:var(--blue-600);
  --surface-accent-soft:var(--blue-100);
  --surface-overlay:rgba(11,17,41,.62);

  /* --- borders --- */
  --border-subtle:var(--n-200);
  --border-strong:var(--n-300);
  --border-accent:var(--blue-600);
  --border-on-ink:rgba(255,255,255,.16);

  /* --- states --- */
  --focus-ring:rgba(55,123,200,.42);
  --success:var(--green-600);
  --warning:var(--amber-600);
  --danger:var(--red-600);
}

/* Business Casual — typography. Poppins carries every heading, eyebrow and
   button; Rubik carries running text and UI. No third face. */
:root{
  --font-display:"Poppins","Poppins Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Rubik","Rubik Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-extrabold:800; /* @kind font */

  --fs-caption:12px;
  --fs-small:14px;
  --fs-body:16px;
  --fs-body-lg:18px;
  --fs-lead:21px;
  --fs-h6:20px;
  --fs-h5:24px;
  --fs-h4:30px;
  --fs-h3:36px;
  --fs-h2:48px;
  --fs-h1:60px;
  --fs-display:76px;

  --lh-tight:1.04; /* @kind font */
  --lh-snug:1.18; /* @kind font */
  --lh-heading:1.24; /* @kind font */
  --lh-normal:1.55; /* @kind font */
  --lh-relaxed:1.68; /* @kind font */

  --tracking-tight:-0.022em; /* @kind font */
  --tracking-snug:-0.012em; /* @kind font */
  --tracking-normal:0; /* @kind font */
  --tracking-wide:0.04em; /* @kind font */
  --tracking-eyebrow:0.16em; /* @kind font */

  /* composed roles */
  --type-display:var(--fw-extrabold) var(--fs-display)/var(--lh-tight) var(--font-display);
  --type-h1:var(--fw-extrabold) var(--fs-h1)/var(--lh-tight) var(--font-display);
  --type-h2:var(--fw-bold) var(--fs-h2)/var(--lh-snug) var(--font-display);
  --type-h3:var(--fw-bold) var(--fs-h3)/var(--lh-heading) var(--font-display);
  --type-h4:var(--fw-semibold) var(--fs-h4)/var(--lh-heading) var(--font-display);
  --type-h5:var(--fw-semibold) var(--fs-h5)/var(--lh-heading) var(--font-display);
  --type-h6:var(--fw-semibold) var(--fs-h6)/var(--lh-heading) var(--font-display);
  --type-lead:var(--fw-regular) var(--fs-lead)/var(--lh-normal) var(--font-body);
  --type-body:var(--fw-regular) var(--fs-body)/var(--lh-relaxed) var(--font-body);
  --type-small:var(--fw-regular) var(--fs-small)/var(--lh-normal) var(--font-body);
  --type-caption:var(--fw-medium) var(--fs-caption)/1.4 var(--font-body);
  --type-eyebrow:var(--fw-bold) var(--fs-caption)/1.2 var(--font-display);
  --type-button:var(--fw-semibold) var(--fs-small)/1 var(--font-display);
}

/* Business Casual — spacing on a 4px base, plus layout measures. */
:root{
  --space-0:0;
  --space-05:2px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  --container-max:1200px;
  --container-narrow:720px;
  --gutter:24px;
  --gutter-lg:40px;
  --section-y:96px;
  --section-y-tight:64px;
  --control-h-sm:34px;
  --control-h:42px;
  --control-h-lg:52px;
}

/* Business Casual — corner radii. --radius-plate mirrors the wordmark's
   badge: square except for one softened bottom-right corner. */
:root{
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:999px;
  --radius-plate:0 0 14px 0;
}

/* Business Casual — elevation. Shadows are navy-tinted, never neutral grey,
   and stay soft: this brand leans on borders and flat ink panels first. */
:root{
  --shadow-xs:0 1px 2px rgba(18,27,62,.06);
  --shadow-sm:0 2px 6px rgba(18,27,62,.07);
  --shadow-md:0 6px 18px rgba(18,27,62,.09);
  --shadow-lg:0 18px 44px rgba(18,27,62,.13);
  --shadow-accent:0 10px 24px rgba(55,123,200,.26);
  --shadow-focus:0 0 0 3px var(--focus-ring);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.14);
  --border-w:1px;
  --border-w-thick:2px;
}

/* Business Casual — motion. Quick, no bounce, no spring. */
:root{
  --ease-out:cubic-bezier(.2,.8,.25,1); /* @kind other */
  --ease-in-out:cubic-bezier(.5,0,.3,1); /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur:180ms; /* @kind other */
  --dur-slow:320ms; /* @kind other */
  --transition-control:background-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}

/* Business Casual — element defaults. Kept deliberately small: this is a
   token library, not a CSS framework. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading);font-family:var(--font-display);letter-spacing:var(--tracking-tight);text-wrap:balance}
h1{font:var(--type-h1)}h2{font:var(--type-h2)}h3{font:var(--type-h3)}h4{font:var(--type-h4)}h5{font:var(--type-h5)}h6{font:var(--type-h6)}
p{margin:0 0 var(--space-4);text-wrap:pretty}
a{color:var(--text-link);text-decoration-color:color-mix(in oklab,var(--text-link) 40%,transparent);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color var(--dur) var(--ease-out)}
a:hover{color:var(--text-link-hover);text-decoration-color:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}
strong{font-weight:var(--fw-semibold);color:var(--text-heading)}
small{font-size:var(--fs-small)}
code,pre{font-family:var(--font-mono)}
hr{border:0;border-top:var(--border-w) solid var(--border-subtle);margin:var(--space-8) 0}
::selection{background:var(--blue-200);color:var(--navy-800)}

/* ---------------------------------------------------------------------------
   Repeated inline-style patterns from the export, lifted verbatim into classes.
   Values are unchanged; the responsive !important overrides further down still
   win exactly as they did against the original inline styles.
   ------------------------------------------------------------------------ */
.bc-container{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.bc-eyebrow{font:700 clamp(19px,1.9vw,22px)/1.25 var(--font-display);letter-spacing:.10em;text-transform:uppercase;color:var(--blue-600)}
.bc-nav-link{font:500 15px/1 var(--font-body);color:var(--navy-700)}
.bc-nav-link-m{font:500 17px/1 var(--font-body);color:var(--navy-800);padding:16px 0;border-bottom:1px solid var(--border-subtle)}
.bc-burger-bar{display:block;width:20px;height:2px;background:currentColor}
.bc-hero-stat-num{font:800 clamp(40px,4.4vw,58px)/1 var(--font-display);letter-spacing:-0.022em;color:var(--navy-800)}
.bc-hero-stat-label{font:400 14px/1.5 var(--font-body);color:var(--text-muted);margin-top:12px;max-width:24ch}
.bc-svc-tile{background:#fff;border:1px solid var(--border-subtle);border-radius:16px;padding:clamp(32px,3vw,44px)}
.bc-svc-title{margin:0 0 14px;font:600 21px/1.24 var(--font-display);letter-spacing:-0.012em;color:var(--navy-800)}
.bc-svc-text{margin:0;font:400 15px/1.68 var(--font-body);color:var(--text-muted)}
.bc-case-panel{padding:clamp(40px,5vw,64px) 0 0}
.bc-case-grid{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(36px,4vw,64px);align-items:start;grid-auto-rows:min-content}
.bc-case-eyebrow{font:700 clamp(17px,1.6vw,19px)/1.35 var(--font-display);letter-spacing:.10em;text-transform:uppercase;color:var(--blue-600)}
.bc-case-title{margin:18px 0 0;font:700 clamp(26px,3vw,38px)/1.18 var(--font-display);letter-spacing:-0.022em;color:var(--navy-800)}
.bc-tag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:8px;margin-top:28px;max-width:620px}
.bc-tag{background:var(--surface-subtle);border-radius:4px;padding:13px 16px;min-height:50px;display:flex;align-items:center;font:500 14px/1.4 var(--font-body);color:var(--navy-600)}
.bc-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:16px;overflow:hidden}
.bc-stat{background:#fff;padding:clamp(22px,2.4vw,32px)}
.bc-stat-num{font:800 clamp(42px,5.2vw,68px)/1 var(--font-display);letter-spacing:-0.022em;color:var(--navy-800)}
.bc-stat-label{font:400 14px/1.5 var(--font-body);color:var(--text-muted);margin-top:12px}
.bc-media-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.bc-media-label{font:700 clamp(16px,1.5vw,18px)/1.25 var(--font-display);letter-spacing:.10em;text-transform:uppercase;color:var(--blue-600)}
.bc-rule{flex:1;height:1px;background:var(--border-subtle)}
.bc-zoom-img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--border-subtle);cursor:zoom-in}
.bc-case-end{max-width:1240px;margin:clamp(48px,6vw,88px) auto 0;padding:0 clamp(20px,5vw,48px);display:flex;justify-content:center}
.bc-back-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 30px;background:none;border:1px solid var(--border-strong);border-radius:6px;color:var(--navy-800);font:600 15px/1 var(--font-display);letter-spacing:-0.008em;cursor:pointer}
.bc-flip{display:flex;transform:rotate(180deg)}

/* Each raster <img> is wrapped in <picture style="display:contents"> so the
   WebP source can be offered without the wrapper taking part in layout - the
   <img> stays the exact grid/flex item the export laid out. display:contents
   also lifts <source> into the parent's layout, so it has to be told not to
   render (it never renders inside a normal <picture>). */
source{display:none}

/* Honour the OS "reduce motion" setting for the CSS-driven transitions; the
   scroll reveals and count-ups already check the same media query in JS. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0ms!important;
    scroll-behavior:auto!important}
}

/* ---- page stylesheet (from the export) ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
img{max-width:100%}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
::selection{background:var(--blue-200);color:var(--navy-900)}
[data-desktop-nav]{display:flex}
[data-burger]{display:none}
@media (max-width:920px){
  [data-desktop-nav]{display:none}
  [data-burger]{display:inline-flex}
}
[data-only-mobile]{display:none !important}
@media (max-width:760px){
  [data-decor="accent"]{width:76px !important}
  [data-svc]{padding-top:64px !important;padding-bottom:72px !important}
  [data-work]{padding-top:96px !important;padding-bottom:64px !important}
  [data-svc-copy]{margin-top:16px !important}
  [data-svc-copy] h2{font-size:25px !important;line-height:1.26 !important}
  [data-svc-copy] > div:first-child{gap:12px !important}
  [data-svc-grid]{margin-top:26px !important;gap:12px !important}
  [data-svc-grid] > div{padding:22px 20px !important}
  [data-svc-grid] h3{margin-bottom:9px !important;font-size:18px !important}
  [data-svc-grid] p{font-size:14.5px !important;line-height:1.55 !important}
  [data-hide-mobile]{display:none !important}
  [data-only-mobile]{display:flex !important}

  /* case study read as one contained unit */
  [data-case-panel]{margin:0 14px !important;padding:22px 0 26px !important;background:var(--surface-subtle) !important;border:1px solid var(--border-subtle) !important;border-radius:20px !important}
  [data-case-panel] > div{padding-left:16px !important;padding-right:16px !important}
  [data-case-panel] > div:first-child{gap:26px !important}

  /* stat blocks: 2x2 square tiles */
  [data-case-stats]{grid-template-columns:1fr 1fr !important;background:var(--border-subtle) !important}
  [data-case-stats] > div{aspect-ratio:1/1 !important;padding:14px !important;display:flex !important;flex-direction:column !important;justify-content:center !important}
  [data-case-stats] [data-count]{font-size:30px !important;line-height:1 !important}
  [data-case-stats] > div > div:last-child{font-size:11.5px !important;line-height:1.35 !important;margin-top:8px !important}

  /* capability tags: two across, defined edge */
  [data-case-tags]{grid-template-columns:1fr 1fr !important;gap:8px !important}
  [data-case-tags] > div{padding:12px 11px !important;min-height:46px !important;border:1px solid var(--border-subtle) !important;border-radius:8px !important;font-size:13px !important;line-height:1.35 !important}

  /* extra media behind the expand control */
  [data-case-extra][data-open="false"]{display:none !important}

  /* services accordion */
  [data-svc-grid]{grid-template-columns:1fr 1fr !important}
  [data-svc-grid] > div{padding:16px 14px !important;cursor:pointer}
  [data-svc-grid] h3{margin-bottom:0 !important;font-size:15.5px !important;line-height:1.3 !important;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
  [data-svc-grid] h3::after{content:"+";flex:0 0 auto;font:700 18px/1 var(--font-display);color:var(--blue-600)}
  [data-svc-tile][data-open="true"] h3::after{content:"–"}
  [data-svc-tile][data-open="false"] p{display:none !important}
  [data-svc-tile][data-open="true"] h3{margin-bottom:10px !important}
  [data-svc-grid] p{font-size:14px !important;line-height:1.55 !important}
}
[data-mini]{display:none !important}
@media (max-width:760px){
  [data-mini]{display:flex !important}
}
[data-hero-art-sm]{display:none !important}
@media (max-width:560px){
  [data-back-btn]{width:100% !important}
}
@media (max-width:1040px){
  [data-hero-art]{display:none !important}
  [data-hero-art-sm]{display:block !important}
}
@media (max-width:760px){
  [data-hero]{padding-top:34px !important;padding-bottom:38px !important}
  [data-hero] h1{margin-top:14px !important}
  [data-hero] [data-hero-cta]{margin-top:30px !important}
}
@media (max-width:640px){
  [data-stats-band]{padding-top:26px !important;padding-bottom:26px !important}
  [data-stats]{grid-template-columns:repeat(3,1fr) !important;column-gap:12px !important;row-gap:14px !important}
  [data-stats] [data-count]{font-size:27px !important;letter-spacing:-0.012em !important}
  [data-stats] > div > div:last-child{font-size:11.5px !important;line-height:1.35 !important;margin-top:5px !important;max-width:none !important}
}