/* @fonts: Big Shoulders Display | Public Sans */
/* --- generated fonts --- */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:400 900;font-display:swap;src:url("/assets/fonts/bigshoulders-400-900-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}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url("/assets/fonts/publicsans-300-800-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}
/* --- end generated fonts --- */
/* Portfolio: "Gallery". Gallery-wall black, signal yellow for the numbers. Yellow is
   the fastest colour to catch the eye; the tall, Chicago-built Big Shoulders makes
   every metric read like a headline. Case images sit in greyscale and come into
   colour on hover. */
:root {
  --bg: #0b0b0b; --bg-raised: #131313; --bg-card: #161616;
  --line: rgba(250, 250, 250, 0.12); --line-strong: rgba(250, 250, 250, 0.3);
  --text: #fafafa; --text-dim: #c4c4c4; --text-faint: #939393;
  --accent: #ffd60a; --accent-rgb: 255, 214, 10; --accent2-rgb: 255, 255, 255;
  --cta-bg: #ffd60a; --cta-ink: #0b0b0b; --cta-hover: #ffe14d;
  --font-display: "Big Shoulders Display", Impact, sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;
  --num-font: "Big Shoulders Display", sans-serif;
  --btn-radius: 0; --card-radius: 0; --card-radius-lg: 0;
  --three-a: #ffd60a; --three-b: #fafafa; --three-comet: #ff5c00; --three-x: 7;
}
h1, h2, h3 { font-weight: 800; letter-spacing: 0; text-transform: uppercase; line-height: 0.95; }
.page-hero h1 { font-size: clamp(3rem, 1.4rem + 6.4vw, 7rem); font-weight: 900; }
.page-hero h1 em, .section__title em, .band h2 em { color: var(--accent); }
.case-card__body h3, .service-card h3 { font-size: 1.6rem; }
.case-card__metric, .stat__num { font-family: var(--num-font); font-weight: 900; color: var(--accent); font-size: clamp(3rem, 2rem + 3vw, 4.6rem); }
.case-card__tag { color: var(--accent); }
.case-card { background: var(--bg-card); }
.case-card__img { filter: grayscale(1) contrast(1.05); transition: filter 0.45s var(--ease-out-expo); }
.case-card:hover .case-card__img { filter: none; }
.case-card:hover { transform: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.stats__grid > * { border-left-color: var(--accent); }
.band { background: var(--accent); border-left-color: #0b0b0b; }
.band h2, .band p { color: #0b0b0b; }
.band h2 em { color: #0b0b0b; text-decoration: underline; text-decoration-thickness: 4px; }
.band .btn--primary { background: #0b0b0b; color: var(--accent); }