/* Extracted from page-studio.php (was inline). Heading override kept here because
   WP's global styles never print on loader-served templates. */

h1,h2,h3,h4{font-family:'Bricolage Grotesque','Schibsted Grotesk',Helvetica,Arial,sans-serif!important;font-weight:800;letter-spacing:-.025em}
em,i{font-style:normal}


Scoped colors_and_type.css
   ───────────────────────────────────────────────────────────── */
/* =====================================================================
   SetpointHQ, Colour & Type Tokens
   Brand Style Guide v1.1 · 2026
   ===================================================================== */
/* Local 'Schibsted Grotesk' family, all 9 weights as static TTFs in fonts/ */
.shq-studio-2026 {
    /* ------------------------------------------------------------------
         CORE PALETTE, exact hex from the brand guide
         ------------------------------------------------------------------ */
    --shq-grape: #C8102E;
    /* PRIMARY · Dusty Grape */
    --shq-blue: #244C47;
    /* SECONDARY · Smart Blue */
    --shq-pink: #C8102E;
    /* CTA / ACCENT · Bubblegum Pink */
    --shq-cyan: #26635C;
    /* HIGHLIGHT / LABEL · Strong Cyan */
    --shq-navy: #0C2422;
    /* DARK BG / TEXT · Dark Navy */
    --shq-platinum: #EBEBEB;
    /* NEUTRAL / BG · Platinum */
    --shq-white: #FFF;
    /* Tints & shades, derived for hover/press/borders */
    --shq-grape-700: #1B3A36;
    --shq-grape-300: #92A8A3;
    --shq-grape-100: #E7EBE8;
    --shq-pink-700: #B00E29;
    --shq-pink-300: #F0505A;
    --shq-pink-100: #F7E3E6;
    --shq-cyan-700: #1F5A54;
    --shq-cyan-100: #E2EDEB;
    --shq-navy-700: #081A18;
    --shq-navy-300: #475450;
    --shq-platinum-300: #BFC9C4;
    --shq-platinum-700: #6B6B6B;
    /* ------------------------------------------------------------------
         SEMANTIC ROLES
         ------------------------------------------------------------------ */
    --bg: var(--shq-white);
    --bg-alt: var(--shq-platinum);
    --bg-dark: var(--shq-navy);
    --bg-brand: var(--shq-grape);
    --fg: var(--shq-navy);
    /* body text on light */
    --fg-muted: var(--shq-navy-300);
    /* secondary text */
    --fg-on-dark: var(--shq-white);
    --fg-on-grape: var(--shq-white);
    --fg-on-pink: var(--shq-white);
    --border: var(--shq-platinum-300);
    --border-strong: var(--shq-navy);
    --divider: var(--shq-platinum);
    --link: var(--shq-grape);
    --link-hover: var(--shq-grape-700);
    --label: var(--shq-cyan);
    /* eyebrows / section labels */
    --cta: var(--shq-pink);
    /* all CTA buttons */
    --cta-hover: var(--shq-pink-700);
    --focus-ring: var(--shq-cyan);
    /* Signature gradient, Grape → Blue (only documented gradient) */
    --gradient-brand: linear-gradient(135deg, var(--shq-grape) 0%, var(--shq-blue) 100%);
    /* ------------------------------------------------------------------
         TYPOGRAPHY, 'Schibsted Grotesk' Variable 100-900
         Scale taken verbatim from p.3 of the brand guide
         ------------------------------------------------------------------ */
    --font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    /* Font sizes, explicit, named after the brand-guide rows */
    --fs-display: 52px;
    --fs-h1: 36px;
    --fs-h2: 24px;
    --fs-h3: 14px;
    --fs-body: 13px;
    --fs-label: 9px;
    --fs-cta: 11px;
    /* Weights */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;
    /* Line heights, tight on display, generous on body */
    --lh-display: 1.05;
    --lh-heading: 1.15;
    --lh-body: 1.55;
    --lh-label: 1;
    /* Letter spacing, labels & CTAs are the "engineered" voice of the brand */
    --ls-display: -0.02em;
    --ls-h1: -0.015em;
    --ls-h2: -0.005em;
    --ls-body: 0;
    --ls-label: 0.28em;
    /* the wide-tracked uppercase label voice */
    --ls-cta: 0.18em;
    /* ------------------------------------------------------------------
         RADIUS, explicit four-step scale from the guide
         0  document cards · 4  buttons/tags · 8  cards · 12  panels
         ------------------------------------------------------------------ */
    --r-0: 0;
    --r-1: 4px;
    --r-2: 8px;
    --r-3: 12px;
    --r-pill: 999px;
    /* ------------------------------------------------------------------
         SPACING, 4px base, doubling-ish for rhythm
         ------------------------------------------------------------------ */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;
    --s-10: 128px;
    /* ------------------------------------------------------------------
         SHADOWS, restrained; the brand prefers solid blocks over float
         ------------------------------------------------------------------ */
    --shadow-1: 0 1px 2px rgba(12,36,34, 0.06);
    --shadow-2: 0 4px 12px rgba(12,36,34, 0.08);
    --shadow-3: 0 12px 32px rgba(12,36,34, 0.12);
    --shadow-card: 0 2px 0 0 var(--shq-navy);
    /* "stacked" hard offset for buttons & tags */
    /* Motion */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 360ms;
    /* Layout */
    --max-w-text: 66ch;
    --max-w-content: 1200px;
    --max-w-narrow: 720px
    }
/* =====================================================================
   SEMANTIC TYPE CLASSES
   Use these directly OR mirror them in component CSS via the vars above.
   ===================================================================== */
.shq-studio-2026 {
    font-family: var(--font-sans);
    color: var(--fg);
    background: var(--bg)
    }
.shq-studio-2026 {
    font-size: var(--fs-body);
    line-height: var(--lh-body)
    }
.shq-studio-2026 .t-display, .shq-studio-2026 .display {
    font-size: var(--fs-display);
    font-weight: var(--fw-black);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    color: var(--fg)
    }
.shq-studio-2026 .t-h1, .shq-studio-2026 h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-black);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-h1);
    color: var(--fg)
    }
.shq-studio-2026 .t-h2, .shq-studio-2026 h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-h2);
    color: var(--fg)
    }
.shq-studio-2026 .t-h3, .shq-studio-2026 h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    color: var(--fg)
    }
.shq-studio-2026 .t-body, .shq-studio-2026 p {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--fg);
    text-wrap: pretty
    }
.shq-studio-2026 .t-body-lg {
    font-size: 16px;
    font-weight: var(--fw-regular);
    line-height: 1.6;
    color: var(--fg)
    }
/* The signature wide-tracked uppercase label/eyebrow */
.shq-studio-2026 .t-label, .shq-studio-2026 .eyebrow {
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--label)
    }
.shq-studio-2026 .t-cta {
    font-size: var(--fs-cta);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: var(--ls-cta);
    text-transform: uppercase
    }
/* "Stat", the big number style used across the site */
.shq-studio-2026 .t-stat {
    font-size: 64px;
    font-weight: var(--fw-black);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--shq-grape)
    }
.shq-studio-2026 a {
    color: var(--link);
    text-decoration: none
    }
.shq-studio-2026 a:hover {
    color: var(--link-hover);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px
    }
.shq-studio-2026 ::selection {
    background: var(--shq-grape);
    color: var(--shq-white)
    }

/* ─────────────────────────────────────────────────────────────
   Scoped shared.css
   ───────────────────────────────────────────────────────────── */
/* =====================================================================
   SetpointHQ Website Redesign, shared page chrome
   Loads on top of ../colors_and_type.css
   ===================================================================== */
.shq-studio-2026 * {
    box-sizing: border-box
    }
.shq-studio-2026, .shq-studio-2026 {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #0C2422;
    font-family: "Schibsted Grotesk", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased
    }
/* Each page artboard renders inside an iframe at fixed 1440 width */
.shq-studio-2026 .page {
    width: 1440px;
    margin: 0 auto
    }
/* -------- Nav -------- */
.shq-studio-2026 .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid #EBEBEB
    }
.shq-studio-2026 .nav-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 18px 40px;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: nowrap;
    white-space: nowrap
    }
.shq-studio-2026 .nav-logo {
    display: inline-flex;
    align-items: center;
    font: 800 22px/1 'Schibsted Grotesk';
    letter-spacing: -0.5px;
    color: #0C2422;
    text-decoration: none
    }
.shq-studio-2026 .nav-logo .hq {
    color: #26635C
    }
.shq-studio-2026 .nav-logo svg {
    display: block
    }
.shq-studio-2026 .nav-items {
    display: flex;
    gap: 28px
    }
.shq-studio-2026 .nav-items a {
    font: 600 12px/1 'Schibsted Grotesk';
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0C2422;
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    cursor: pointer
    }
.shq-studio-2026 .nav-items a:hover {
    color: #C8102E
    }
.shq-studio-2026 .nav-items a.active {
    color: #C8102E;
    border-bottom-color: #C8102E
    }
.shq-studio-2026 .nav-items a .caret {
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.65
    }
.shq-studio-2026 .nav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px
    }
.shq-studio-2026 .nav-actions .login {
    font: 600 12px/1 'Schibsted Grotesk';
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0C2422;
    text-decoration: none
    }
/* -------- Buttons -------- */
.shq-studio-2026 .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 700 11px/1 'Schibsted Grotesk';
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 14px 22px;
    border-radius:0;
    border: 0;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
    text-decoration: none
    }
.shq-studio-2026 .btn-primary {
    background: #C8102E;
    color: #fff;
    box-shadow: 0 2px 0 0 #0C2422
    }
.shq-studio-2026 .btn-primary:hover {
    background: #B00E29;
    box-shadow: 0 0 0 0 #0C2422;
    transform: translatey(2px)
    }
.shq-studio-2026 .btn-secondary {
    background: transparent;
    color: #0C2422;
    box-shadow: inset 0 0 0 2px #0C2422
    }
.shq-studio-2026 .btn-secondary:hover {
    background: #0C2422;
    color: #fff
    }
.shq-studio-2026 .btn-on-dark {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 2px #fff
    }
.shq-studio-2026 .btn-on-dark:hover {
    background: #fff;
    color: #0C2422
    }
.shq-studio-2026 .btn-tertiary {
    background: transparent;
    color: #C8102E;
    padding: 14px 0;
    box-shadow: none
    }
.shq-studio-2026 .btn-tertiary:hover {
    color: #1B3A36
    }
/* -------- Eyebrow -------- */
.shq-studio-2026 .eyebrow {
    font: 600 11px/1 'Schibsted Grotesk';
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #26635C
    }
.shq-studio-2026 .eyebrow.grape {
    color: #C8102E
    }
.shq-studio-2026 .eyebrow.pink {
    color: #C8102E
    }
.shq-studio-2026 .eyebrow.platinum {
    color: #5C6B67
    }
.shq-studio-2026 .eyebrow.navy {
    color: #0C2422
    }
.shq-studio-2026 .eyebrow-rule {
    display: flex;
    align-items: center;
    gap: 14px
    }
.shq-studio-2026 .eyebrow-rule::after {
    /* Neutral hairline, matching .shq-sec-label site-wide: the label carries the
       colour, the rule carries the structure. */
    content: "";
    flex: 1;
    height: 1px;
    background: #BFC9C4
    }
/* -------- Type -------- */
.shq-studio-2026 .display {
    font: 800 56px/1.04 'Schibsted Grotesk';
    letter-spacing: -0.02em
    }
.shq-studio-2026 .h1 {
    font: 800 40px/1.1 'Schibsted Grotesk';
    letter-spacing: -0.018em
    }
.shq-studio-2026 .h2 {
    font: 800 28px/1.15 'Schibsted Grotesk';
    letter-spacing: -0.01em
    }
.shq-studio-2026 .h3 {
    font: 700 18px/1.25 'Schibsted Grotesk';
    letter-spacing: -0.005em
    }
.shq-studio-2026 .body {
    font: 400 14px/1.6 'Schibsted Grotesk';
    color: #0C2422
    }
.shq-studio-2026 .body-lg {
    font: 400 16px/1.6 'Schibsted Grotesk';
    color: #0C2422
    }
.shq-studio-2026 .muted {
    color: #475450
    }
.shq-studio-2026 .mono {
    font-variant-numeric: tabular-nums
    }
/* -------- Section helpers -------- */
.shq-studio-2026 .section {
    padding: 96px 40px
    }
.shq-studio-2026 .section-tight {
    padding: 64px 40px
    }
.shq-studio-2026 .container {
    max-width: 1280px;
    margin: 0 auto
    }
.shq-studio-2026 .container-narrow {
    max-width: 920px;
    margin: 0 auto
    }
.shq-studio-2026 .bg-grape {
    background: #C8102E;
    color: #fff
    }
.shq-studio-2026 .bg-navy {
    background: #0C2422;
    color: #fff
    }
.shq-studio-2026 .bg-platinum {
    background: #EBEBEB
    }
.shq-studio-2026 .bg-gradient {
    background: linear-gradient(135deg, #C8102E 0%, #244C47 100%);
    color: #fff
    }
.shq-studio-2026 .bg-cyan-soft {
    background: #E2EDEB
    }
/* -------- Cards / panels -------- */
.shq-studio-2026 .card {
    background: #fff;
    border: 1px solid #BFC9C4;
    border-radius:0;
    padding: 24px;
    box-shadow: 0 2px 0 0 #0C2422;
    transition: box-shadow 200ms ease, transform 200ms ease
    }
.shq-studio-2026 .card:hover {
    transform: translatey(-2px);
    box-shadow: 0 12px 32px rgba(12,36,34, 0.12)
    }
.shq-studio-2026 .card-flat {
    background: #fff;
    border: 1px solid #EBEBEB;
    border-radius:0;
    padding: 24px
    }
.shq-studio-2026 .card-doc {
    background: #fff;
    border: 1px solid #BFC9C4;
    border-radius:0;
    padding: 28px
    }
.shq-studio-2026 .panel {
    background: #fff;
    border-radius:0;
    padding: 32px
    }
/* -------- Stats -------- */
.shq-studio-2026 .stat-num {
    font: 800 64px/1 'Schibsted Grotesk';
    letter-spacing: -0.025em;
    color: #C8102E
    }
.shq-studio-2026 .stat-num.lg {
    font-size: 84px
    }
.shq-studio-2026 .stat-num.on-dark {
    color: #fff
    }
.shq-studio-2026 .stat-cap {
    font: 600 11px/1.2 'Schibsted Grotesk';
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #0C2422;
    margin-top: 10px
    }
.shq-studio-2026 .stat-cap.on-dark {
    color: #BFC9C4
    }
.shq-studio-2026 .stat-sub {
    font: 500 11px/1.5 'Schibsted Grotesk';
    color: #475450;
    margin-top: 8px;
    max-width: 200px
    }
/* -------- Service tag -------- */
.shq-studio-2026 .svc-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 700 11px/1 'Schibsted Grotesk';
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 8px 12px;
    border-radius:0;
    background: #fff;
    color: #C8102E;
    border: 1px solid #BFC9C4
    }
/* -------- Footer -------- */
.shq-studio-2026 .footer {
    background: #0C2422;
    color: #fff;
    padding: 72px 40px 28px
    }
.shq-studio-2026 .footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 40px
    }
.shq-studio-2026 .footer-lede {
    font: 400 13px/1.6 'Schibsted Grotesk';
    color: #BFC9C4;
    margin: 18px 0 0;
    max-width: 320px
    }
.shq-studio-2026 .footer h4 {
    font: 600 11px/1 'Schibsted Grotesk';
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #26635C;
    margin: 0 0 16px
    }
.shq-studio-2026 .footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px
    }
.shq-studio-2026 .footer a {
    font: 500 12px/1.4 'Schibsted Grotesk';
    color: #EBEBEB;
    text-decoration: none;
    cursor: pointer
    }
.shq-studio-2026 .footer a:hover {
    color: #fff
    }
.shq-studio-2026 .footer-base {
    max-width: 1280px;
    margin: 56px auto 0;
    padding-top: 24px;
    border-top: 1px solid #475450;
    display: flex;
    justify-content: space-between;
    font: 500 11px/1 'Schibsted Grotesk';
    color: #92A8A3;
    letter-spacing: 0.06em
    }
.shq-studio-2026 .footer-base a {
    color: #92A8A3;
    text-decoration: none;
    margin: 0 8px
    }
.shq-studio-2026 .footer-base a:hover {
    color: #fff
    }
/* -------- Misc -------- */
.shq-studio-2026 .divider {
    height: 1px;
    background: #EBEBEB
    }
.shq-studio-2026 .divider.dark {
    background: #475450
    }
.shq-studio-2026 .kbd {
    font: 600 11px/1 'Schibsted Grotesk';
    letter-spacing: 0.18em;
    text-transform: uppercase
    }
.shq-studio-2026 .arrow-link {
    font: 700 11px/1 'Schibsted Grotesk';
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #C8102E;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px
    }
.shq-studio-2026 .arrow-link:hover {
    color: #1B3A36
    }
.shq-studio-2026 .arrow-link .ar {
    font-size: 14px
    }
.shq-studio-2026 .check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 500 13px/1.5 'Schibsted Grotesk';
    color: #0C2422
    }
.shq-studio-2026 .check::before {
    content: "✓";
    color: #1F5A54;
    font-weight: 800;
    font-size: 14px
    }
.shq-studio-2026 .glyph {
    font-feature-settings: "tnum" 1, "cv11" 1
    }
/* -------- Selection -------- */
.shq-studio-2026 ::selection {
    background: #C8102E;
    color: #fff
    }

/* ─────────────────────────────────────────────────────────────
   Page-specific styles (scoped)
   ───────────────────────────────────────────────────────────── */
.shq-studio-2026 .hero {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFB 100%);
    padding: 110px 40px 80px;
    position: relative;
    overflow: hidden
    }
.shq-studio-2026 .hero::before {
    content: "";
    position: absolute;
    top: 80px;
    right: -180px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,16,46,0.06), transparent 70%);
    pointer-events: none;
    z-index: 0
    }
.shq-studio-2026 .hero::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 18%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(38,99,92,0.05), transparent 70%);
    pointer-events: none;
    z-index: 0
    }
.shq-studio-2026 .hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 80px;
    align-items: end;
    position: relative;
    z-index: 1
    }
.shq-studio-2026 .hero h1 {
    font: 800 60px/1.04 'Schibsted Grotesk';
    letter-spacing: -0.025em;
    color: #0C2422;
    margin: 24px 0 24px
    }
.shq-studio-2026 .hero h1 .grape {
    color: #C8102E
    }
.shq-studio-2026 .hero p {
    font: 400 17px/1.65 'Schibsted Grotesk';
    color: #475450;
    max-width: 540px;
    margin: 0 0 32px
    }
.shq-studio-2026 .hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap
    }
.shq-studio-2026 .hero-counter {
    background: #0C2422;
    color: #fff;
    border-radius:0;
    padding: 32px;
    box-shadow: 0 6px 0 0 #C8102E
    }
.shq-studio-2026 .hero-counter .big {
    font: 800 84px/1 'Schibsted Grotesk';
    letter-spacing: -0.025em;
    color: #fff
    }
.shq-studio-2026 .hero-counter .big .grape {
    color: #26635C
    }
.shq-studio-2026 .hero-counter .row {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 1px solid #475450;
    font: 500 12px/1.4 'Schibsted Grotesk';
    color: #BFC9C4
    }
.shq-studio-2026 .hero-counter .row b {
    color: #fff;
    font-weight: 700
    }
.shq-studio-2026 .hero-counter .ftr {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #475450;
    font: 500 12px/1.55 'Schibsted Grotesk';
    color: #BFC9C4
    }
/* Workflow strip */
.shq-studio-2026 .strip {
    background: #EBEBEB;
    padding: 64px 40px
    }
.shq-studio-2026 .strip-inner {
    max-width: 1280px;
    margin: 0 auto
    }
.shq-studio-2026 .strip-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px
    }
.shq-studio-2026 .stage {
    font: 700 11px/1 'Schibsted Grotesk';
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 12px 14px;
    border-radius:0;
    background: #fff;
    color: #C8102E;
    border: 1px solid #BFC9C4;
    box-shadow: 0 2px 0 0 #0C2422;
    white-space: nowrap
    }
.shq-studio-2026 .stage b {
    color: #0C2422
    }
.shq-studio-2026 .stage-arrow {
    color: #5C6B67;
    font: 700 16px/1 'Schibsted Grotesk'
    }
/* Tools grid */
.shq-studio-2026 .tools {
    background: #fff;
    padding: 96px 40px
    }
.shq-studio-2026 .tools-inner {
    max-width: 1280px;
    margin: 0 auto
    }
.shq-studio-2026 .tools-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 40px
    }
.shq-studio-2026 .tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
    }
.shq-studio-2026 a.tool {
    text-decoration: none;
    color: inherit
    }
.shq-studio-2026 .tool {
    background: #fff;
    border: 1px solid #BFC9C4;
    border-radius:0;
    padding: 22px;
    transition: box-shadow 200ms ease, transform 200ms ease;
    box-shadow: 0 2px 0 0 #0C2422;
    cursor: pointer;
    min-height: 184px;
    display: flex;
    flex-direction: column
    }
.shq-studio-2026 .tool:hover {
    transform: translatey(-2px);
    box-shadow: 0 12px 24px rgba(12,36,34, 0.12)
    }
.shq-studio-2026 .tool .ic {
    width: 36px;
    height: 36px;
    border-radius:0;
    background: #E7EBE8;
    display: grid;
    place-items: center;
    font: 800 12px/1 'Schibsted Grotesk';
    color: #C8102E;
    letter-spacing: 0.04em
    }
.shq-studio-2026 .tool h3 {
    font: 800 15px/1.25 'Schibsted Grotesk';
    margin: 14px 0 6px;
    color: #0C2422
    }
.shq-studio-2026 .tool p {
    font: 400 12px/1.5 'Schibsted Grotesk';
    color: #475450;
    margin: 0 0 12px;
    flex: 1
    }
.shq-studio-2026 .tool .meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
    }
.shq-studio-2026 .tool .chip {
    font: 700 11px/1 'Schibsted Grotesk';
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 5px 7px;
    background: #E2EDEB;
    color: #1F5A54;
    border-radius:0}
/* Siblings strip */
.shq-studio-2026 .sib {
    background: #EBEBEB;
    padding: 96px 40px
    }
.shq-studio-2026 .sib-inner {
    max-width: 1280px;
    margin: 0 auto
    }
.shq-studio-2026 .sib-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 32px
    }
.shq-studio-2026 .sib-card {
    background: #fff;
    border: 1px solid #BFC9C4;
    border-radius:0;
    padding: 32px;
    box-shadow: 0 2px 0 0 #0C2422
    }
.shq-studio-2026 .sib-card h3 {
    font: 800 26px/1.15 'Schibsted Grotesk';
    margin: 14px 0 14px
    }
.shq-studio-2026 .sib-card p {
    font: 400 14px/1.65 'Schibsted Grotesk';
    color: #475450;
    margin: 0 0 24px
    }
.shq-studio-2026 .sib-card.dark {
    background: #0C2422;
    color: #fff;
    border-color: #0C2422;
    box-shadow: 0 2px 0 0 #C8102E
    }
.shq-studio-2026 .sib-card.dark p {
    color: #BFC9C4
    }
.shq-studio-2026 .faqs {
    background: #F4F4F8;
    padding: 96px 24px
    }
.shq-studio-2026 .faqs-inner {
    max-width: 1080px;
    margin: 0 auto
    }
.shq-studio-2026 .faqs h2 {
    font: 800 36px/1.15 'Schibsted Grotesk';
    letter-spacing: -0.02em;
    color: #0C2422;
    margin: 14px 0 6px
    }
.shq-studio-2026 .faq-list { margin-top: 28px }
.shq-studio-2026 .faq-list details { border-top: 1px solid rgba(12,36,34,0.1) }
.shq-studio-2026 .faq-list details:last-of-type { border-bottom: 1px solid rgba(12,36,34,0.1) }
.shq-studio-2026 .faq-list summary {
    cursor: pointer;
    list-style: none;
    font: 600 17px/1.4 'Schibsted Grotesk';
    color: #0C2422;
    padding: 20px 40px 20px 0;
    position: relative
    }
.shq-studio-2026 .faq-list summary::-webkit-details-marker { display: none }
.shq-studio-2026 .faq-list summary::marker { display: none; content: '' }
.shq-studio-2026 .faq-list summary::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 16px;
    font: 300 26px/1 'Schibsted Grotesk';
    color: #C8102E
    }
.shq-studio-2026 .faq-list details[open] summary::after { content: '\2013' }
.shq-studio-2026 .faq-list details > div {
    padding: 0 0 24px;
    font: 400 15px/1.65 'Schibsted Grotesk';
    color: rgba(12,36,34,0.75);
    max-width: 760px
    }
.shq-studio-2026 .faq-list details > div a { color: #C8102E; font-weight: 600 }
.shq-studio-2026 .close {
    background: linear-gradient(135deg, #C8102E 0%, #244C47 100%);
    color: #fff;
    padding: 96px 40px;
    text-align: center
    }
.shq-studio-2026 .close h2 {
    font: 800 44px/1.1 'Schibsted Grotesk';
    letter-spacing: -0.02em;
    color: #fff;
    margin: 14px 0 16px
    }
.shq-studio-2026 .close p {
    font: 400 16px/1.6 'Schibsted Grotesk';
    color: #fff;
    max-width: 580px;
    margin: 0 auto 32px
    }

/* ── Breadcrumbs (June 2026 internal-linking pass) ── */
.shq-studio-2026 .crumbs { display:flex; align-items:center; gap:10px; font:600 12px/1 'Schibsted Grotesk', sans-serif; color:rgba(12,36,34,0.62); margin-bottom:22px; }
.shq-studio-2026 .crumbs a { color:rgba(12,36,34,0.72); text-decoration:none; transition:color 140ms ease; }
.shq-studio-2026 .crumbs a:hover { color:#C8102E; }

/* rebrand: teal reads light on dark grounds (AA) */
.shq-studio-2026 .bg-navy [style*="26635C"], .shq-studio-2026 .footer [style*="26635C"],
.shq-studio-2026 .sib-card.dark [style*="26635C"], .shq-studio-2026 .hero-counter [style*="26635C"]{ color:#7FBFB8 !important; }
.shq-studio-2026 .footer h4, .shq-studio-2026 .bg-navy .eyebrow,
.shq-studio-2026 .sib-card.dark .eyebrow, .shq-studio-2026 .sib-card.dark .arrow-link,
.shq-studio-2026 .hero-counter .eyebrow{ color:#7FBFB8 !important; }

.shq-studio-2026 .close [style*="26635C"]{ color:#fff !important; }