/* ==========================================================================
   Ina4 theme
   Single sans family (Inter / Inter Tight), neutral palette, green as the one
   accent: primary buttons, key stat numbers and active/hover states only.

   Contrast (WCAG AA), checked 2026-10-06:
   - #111 on #fff 18.9:1, #5a5a5a on #fff 6.9:1, #5a5a5a on #f5f5f3 6.3:1
   - #f5f5f3 on #141414 16.9:1, #a8a8a4 on #141414 7.7:1, #2FBF71 on #141414 7.7:1
   - #111 on #2FBF71 (buttons) 7.9:1, form field borders #8a8e92 3.3:1
   - #2FBF71 fails as text on light backgrounds (2.4:1), so stat numbers on
     light sections use --accent-ink #1A7F4B (5.0:1 on white, 4.6:1 on #f5f5f3)
   ========================================================================== */

:root {
  /* Palette */
  --ink: #111;
  --ink-muted: #5a5a5a;
  --surface: #fff;
  --surface-alt: #f5f5f3;
  --dark: #141414;
  --dark-raised: #1e1e1e;
  --accent: #2FBF71;
  --accent-ink: #1A7F4B;
  --border: #e6e6e3;
  --border-strong: #c9c9c5;
  --field-border: #8a8e92;

  /* Type */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;

  /* Spacing (8px base) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-12: 96px;
  --gutter: max(20px, 5vw);
  --section-y: var(--s-12);
  --radius: 12px;
  --radius-btn: 8px;
  --header-h: 80px;

  /* Green-glow tiles: Services cards (.pillar-row) and service page offering boxes (.offering-card) */
  --tile-bg: linear-gradient(180deg, rgba(47, 191, 113, .06) 0%, var(--surface) 55%);
  --tile-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(47, 191, 113, .12);
  --tile-shadow-hover: 0 16px 36px rgba(47, 191, 113, .22), 0 2px 6px rgba(0, 0, 0, .06);
  --tile-icon-shadow: 0 4px 10px rgba(47, 191, 113, .18);

  /* Contextual tokens: light sections by default, flipped by .on-dark */
  --bg: var(--surface);
  --fg: var(--ink);
  --muted: var(--ink-muted);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --panel: var(--surface-alt);
  --stat: var(--accent-ink);
  --focus: var(--ink);
  --icon-accent: var(--ink-muted);
  --icon-bg: var(--surface);
}
.on-dark, .site-header, .site-footer {
  --bg: var(--dark);
  --fg: #f5f5f3;
  --muted: #a8a8a4;
  --line: #ffffff1f;
  --line-strong: #ffffff47;
  --panel: var(--dark-raised);
  --stat: var(--accent);
  --focus: #f5f5f3;
  --icon-accent: #a8a8a4;
  --icon-bg: var(--dark);
  background-color: var(--bg);
  color: var(--fg);
}

/* === Base === */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--fg);
  font: 400 var(--fs-18)/1.6 var(--font-body);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}
h3, h4 { font-weight: 600; letter-spacing: -0.01em; }
p { max-width: 70ch; }
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* === Shared type and furniture === */
.eyebrow {
  display: inline-block;
  font: 500 13px/1.4 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stat);
}
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-5); }
.section-head h2 { font-size: clamp(var(--fs-28), 3.6vw, var(--fs-40)); letter-spacing: -0.02em; margin: 12px 0 0; max-width: 22ch; }
.section-intro { margin: 12px 0 0; color: var(--muted); }
.section-head-link, .text-link {
  font-weight: 600; color: var(--fg);
  text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.section-head-link:hover, .text-link:hover,
a:hover > .text-link, a:hover .text-link { color: var(--stat); text-decoration-color: currentColor; }

.primary-cta, .header-cta, .lead-form button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px; border-radius: var(--radius-btn); border: 1px solid var(--accent);
  background: var(--accent); color: var(--ink);
  font: 600 var(--fs-16)/1.2 var(--font-body);
  cursor: pointer; transition: background-color .2s ease, border-color .2s ease;
}
.primary-cta:hover, .header-cta:hover, .lead-form button:hover { background: #3ad281; border-color: #3ad281; }
/* Header CTA on /contact: there is no Contact nav link, so the button shows the current page. */
.site-header .header-cta[aria-current="page"] { background: #3ad281; border-color: #3ad281; }
.secondary-cta {
  display: inline-flex; align-items: center; padding: 14px 22px; border-radius: var(--radius-btn);
  border: 1px solid var(--line-strong); color: var(--fg); font-weight: 600; font-size: var(--fs-16);
  transition: border-color .2s ease;
}
.secondary-cta:hover { border-color: var(--fg); }

.pillar-icon { width: 32px; height: 32px; color: var(--fg); flex-shrink: 0; }

/* Neutral branded placeholder for missing case study images */
.case-placeholder {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 240px; height: 100%; overflow: hidden;
  background: var(--surface-alt); color: #3d3d3d;
  border: 1px solid var(--border);
}
.case-placeholder span { font: 600 clamp(20px, 2.2vw, 28px)/1.2 var(--font-head); letter-spacing: -0.01em; text-align: center; padding: 0 var(--s-3); }
.case-placeholder::after {
  content: ''; position: absolute; left: 20px; bottom: 16px; width: 52px; height: 21px;
  background: url('../images/ina4-logo.svg') no-repeat left center / contain; opacity: .35;
}
.case-photo { position: relative; overflow: hidden; }
.case-photo img { width: 100%; height: 100%; object-fit: cover; }

/* === Header === */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  transition: background-color .25s ease;
}
.site-header.is-scrolled { background: rgba(20, 20, 20, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* A backdrop-filter makes the header the containing block for the fixed mobile menu, which then
   collapses to the header's height. The open menu covers the page, so drop the blur while it is open. */
.site-header.nav-open { background: var(--dark); -webkit-backdrop-filter: none; backdrop-filter: none; }
.brand-link { margin-right: auto; }
.brand-logo { width: 100px; height: auto; filter: invert(1); }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; align-items: center; font-size: var(--fs-16); font-weight: 500; }
.nav-item-row { display: flex; align-items: center; gap: 2px; }
.nav-link { padding: 8px 0; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.nav-link:hover { text-decoration: underline; text-decoration-color: var(--line-strong); }
.nav-link[aria-current] { text-decoration: underline; text-decoration-color: var(--accent); }
.menu-toggle { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
.menu-toggle svg { width: 11px; height: 8px; transition: transform .2s ease; }
.has-menu.is-open .menu-toggle svg { transform: rotate(180deg); }
.mega-menu { display: none; }
.has-menu.is-open .mega-menu { display: block; }
.mega-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mega-link { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 10px; border: 1px solid transparent; transition: border-color .2s ease; }
.mega-link:hover, .mega-link[aria-current] { border-color: var(--line-strong); }
.mega-link strong { display: block; font-size: var(--fs-16); font-weight: 600; margin-bottom: 4px; }
.mega-link span span { display: block; font-size: var(--fs-14); line-height: 1.45; color: var(--muted); }
.mega-footer { display: block; padding: 16px; margin-top: 8px; border-top: 1px solid var(--line); font-size: var(--fs-14); font-weight: 600; color: var(--fg); }
.mega-footer:hover { color: var(--accent); }
.nav-toggle { display: none; align-items: center; gap: 10px; padding: 10px 4px; background: none; border: 0; color: inherit; font-size: var(--fs-16); font-weight: 600; cursor: pointer; }
.nav-toggle-bars { display: grid; gap: 4px; width: 20px; }
.nav-toggle-bars i { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform .2s ease, opacity .2s ease; }
.nav-open .nav-toggle-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.site-nav .nav-cta-mobile { display: none; }
.nav-locked { overflow: hidden; }
.site-header > .header-cta { padding: 11px 18px; font-size: var(--fs-14); white-space: nowrap; }
/* Tighten the top-level link spacing on narrower desktops so the CTA stays on one line. */
@media (min-width: 901px) and (max-width: 1100px) {
  .nav-list { gap: 18px; }
}
/* Below 1260px four columns are too narrow for the service labels, so show the dropdown as 2x2. */
@media (min-width: 901px) and (max-width: 1259px) {
  .site-header .mega-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Insights: two items, so a compact panel aligned to the right of the header instead of full width. */
@media (min-width: 901px) {
  .has-narrow-menu .mega-menu { left: auto; width: min(640px, calc(100% - 2 * var(--gutter))); }
  .has-narrow-menu .mega-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 901px) {
  .site-nav { margin-right: 8px; }
  .mega-menu {
    position: absolute; top: calc(100% + 1px); left: var(--gutter); right: var(--gutter);
    padding: 14px; background: var(--panel);
    border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
  }
  .mega-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  :root { --header-h: 72px; }
  .nav-toggle:not([hidden]) { display: inline-flex; order: 3; }
  .site-header > .header-cta { order: 2; }
  .site-nav {
    display: none; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 12px var(--gutter) 40px; background: var(--dark);
  }
  .nav-open .site-nav { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; font-size: var(--fs-18); }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-item-row { justify-content: space-between; }
  .nav-link { display: block; flex: 1; padding: 18px 0; }
  .menu-toggle { width: 48px; height: 48px; }
  .menu-toggle svg { width: 14px; height: 10px; }
  .mega-menu { padding: 0 0 14px; }
  .mega-link { padding: 12px 0; border: 0; }
  .mega-footer { padding: 14px 0 0; }
}
@media (max-width: 600px) {
  .brand-logo { width: 84px; }
  .site-header > .header-cta { display: none; }
  .site-nav .nav-cta-mobile { display: flex; margin-top: 28px; padding: 16px; font-size: var(--fs-16); }
}

/* === Footer === */
.site-footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-5); padding: var(--s-8) var(--gutter) var(--s-5); border-top: 1px solid var(--line); font-size: var(--fs-16); }
.site-footer .brand-logo { width: 88px; margin-bottom: 18px; }
.footer-brand p { margin: 0 0 16px; color: var(--muted); line-height: 1.5; max-width: 320px; }
.footer-contact a, .footer-social a, .footer-col a { color: var(--fg); text-underline-offset: 4px; }
.footer-contact a:hover, .footer-social a:hover, .footer-col a:hover { color: var(--accent); }
.footer-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.footer-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--fg); transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.social-icon { width: 18px; height: 18px; }
.footer-col h2 { font: 500 13px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 6px 0 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-offices li { color: var(--muted); line-height: 1.45; }
.footer-offices strong { color: var(--fg); font-weight: 600; }
.footer-policies { grid-column: 1 / -1; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.footer-policies ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-14); }
.footer-policies a { color: var(--muted); }
.footer-policies a:hover, .footer-policies a:focus-visible { color: var(--fg); text-decoration: underline; }
.footer-cookie-settings { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.footer-cookie-settings:hover, .footer-cookie-settings:focus-visible { color: var(--fg); text-decoration: underline; }
.footer-cookie-settings[hidden] { display: none; }

/* Cookie consent (partials/cookie-consent): Accept and Reject share one style so neither is favoured. */
.cookie-banner {
  position: fixed; left: var(--s-2); bottom: var(--s-2); z-index: 40;
  width: min(440px, calc(100% - 2 * var(--s-2))); padding: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35); font-size: var(--fs-16);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-title { margin: 0 0 var(--s-1); font: 700 var(--fs-18)/1.3 var(--font-head); }
.cookie-banner p { margin: 0; color: var(--muted); line-height: 1.5; }
.cookie-banner p a { color: var(--fg); text-decoration: underline; }
.cookie-banner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); margin-top: var(--s-2); }
.cookie-banner-actions .secondary-cta { justify-content: center; background: none; font-family: inherit; cursor: pointer; }

.footer-legal { grid-column: 1 / -1; font-size: var(--fs-14); color: var(--muted); }

/* === Page intros (dark heroes on inner pages) === */
.work-intro, .about-intro { padding: var(--s-12) var(--gutter) var(--s-8); }
.work-intro h1, .about-intro h1 { font-size: clamp(var(--fs-40), 5.5vw, var(--fs-72)); letter-spacing: -0.02em; margin: 16px 0 20px; max-width: 18ch; }
.work-intro p, .about-intro p { font-size: var(--fs-18); color: var(--muted); margin: 0; max-width: 62ch; }
.case-crumb { display: block; width: fit-content; margin-bottom: var(--s-3); font-size: var(--fs-16); font-weight: 500; color: var(--muted); }
.case-crumb:hover { color: var(--fg); }

/* === Home: hero === */
.hero {
  --hero-bg: var(--dark);
  isolation: isolate; padding: 140px var(--gutter) 150px; background: var(--hero-bg);
}
/* Soft green lighting and an edge vignette behind the content */
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero::before {
  z-index: 0;
  background:
    radial-gradient(900px 520px at 20% 110%, rgba(47, 191, 113, .24), transparent 70%),
    radial-gradient(700px 420px at 90% 20%, rgba(47, 191, 113, .08), transparent 70%);
}
.hero::after { z-index: 0; background: radial-gradient(120% 85% at 50% 45%, transparent 50%, var(--hero-bg) 100%); }
/* The grid fades out towards the edges */
.hero .hero-grid-canvas {
  -webkit-mask-image: radial-gradient(90% 80% at 50% 50%, #000 30%, transparent 95%);
  mask-image: radial-gradient(90% 80% at 50% 50%, #000 30%, transparent 95%);
}
/* Content above the lighting; the wrapper lets the pointer through so the grid reacts across the whole hero */
.hero-copy { position: relative; z-index: 1; pointer-events: none; }
.hero-copy a { pointer-events: auto; }
.hero h1 { margin: 0; font-size: clamp(46px, 7.2vw, 96px); font-weight: 700; line-height: .96; letter-spacing: -0.045em; color: #f5f5f3; text-wrap: initial; }
.hero-accent {
  display: inline-block; padding-bottom: .06em;
  background: linear-gradient(180deg, #6ff0a8 0%, #2fbf71 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-copy > p { max-width: 600px; margin: 22px 0 0; font-size: 19px; line-height: 1.55; color: rgba(255, 255, 255, .62); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.hero-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 26px; border-radius: 12px; font: 600 16px/1 var(--font-body);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.hero-btn--primary {
  background: var(--accent); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 12px 40px -10px rgba(47, 191, 113, .7);
}
.hero-btn--primary:hover, .hero-btn--primary:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 18px 50px -10px rgba(47, 191, 113, .85); }
.hero-arrow { display: inline-block; transition: transform .2s ease; }
.hero-btn--primary:hover .hero-arrow, .hero-btn--primary:focus-visible .hero-arrow { transform: translateX(3px); }
.hero-btn--ghost {
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03); color: #f5f5f3;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero-btn--ghost:hover, .hero-btn--ghost:focus-visible { background: rgba(255, 255, 255, .08); }
@media (max-width: 560px) {
  .hero { padding-top: 88px; padding-bottom: 96px; }
}
/* Decorative rising line on the right of the hero (aria-hidden, no pointer events).
   .on-dark raises specificity above the shared [data-kinetic-grid] > :not(canvas) rule. */
.hero.on-dark > .hero-line {
  position: absolute; z-index: 1; top: 50%; right: var(--gutter); transform: translateY(-46%);
  width: min(44vw, 600px); height: auto; overflow: visible; pointer-events: none;
}
.hero-line-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: hl-draw 2.6s cubic-bezier(.6, .05, .25, 1) .3s forwards; }
.hero-line-area { opacity: 0; animation: hl-fade .8s ease 1.8s forwards; }
.hero-line-dot { opacity: 0; animation: hl-fade .5s ease 2.8s forwards; }
.hero-line-halo { transform-box: fill-box; transform-origin: center; animation: hl-pulse 2.4s ease-out 3.1s infinite; opacity: 0; }
@keyframes hl-draw { to { stroke-dashoffset: 0; } }
@keyframes hl-fade { to { opacity: 1; } }
@keyframes hl-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.4); opacity: 0; } }
/* Keep clear of the headline and buttons on smaller desktops */
@media (max-width: 1280px) { .hero.on-dark > .hero-line { width: min(38vw, 600px); } }
@media (max-width: 1000px) { .hero.on-dark > .hero-line { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-line-path { animation: none; stroke-dashoffset: 0; }
  .hero-line-area, .hero-line-dot { animation: none; opacity: 1; }
  .hero-line-halo { animation: none; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-btn, .hero-arrow { transition: none; }
  .hero-btn--primary:hover, .hero-btn--primary:focus-visible, .hero-btn--primary:hover .hero-arrow { transform: none; }
}

/* === Home: section padding === */
.what-we-do, .selected-work, .testimonials, .latest-insights { padding: var(--section-y) var(--gutter); }

/* === Work: lead case + cards === */
.selected-work { background: var(--surface-alt); }
.lead-case { margin-bottom: var(--s-3); }
.lead-case-link {
  display: grid; grid-template-columns: 1.35fr 1fr; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .2s ease, border-color .2s ease;
}
.lead-case-link:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.lead-case-media { min-height: 360px; background: var(--surface-alt); }
.lead-case-media img { width: 100%; height: 100%; object-fit: cover; }
.lead-case-media .case-placeholder { border: 0; }
.lead-case-body { display: flex; flex-direction: column; justify-content: center; padding: var(--s-6); }
.lead-case-body h3 { font-size: var(--fs-28); margin: 6px 0 var(--s-3); }
.lead-case-stat { margin: 0 0 var(--s-3); color: var(--ink); }
.lead-case-stat strong { display: block; font: 600 clamp(var(--fs-40), 4.6vw, var(--fs-56))/1 var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--accent-ink); }
.lead-case-summary { color: var(--muted); margin: 0 0 var(--s-3); }
.lead-case-body .text-link { align-self: flex-start; }

.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.work-card-link {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .2s ease, border-color .2s ease;
}
.work-card-link:hover { transform: translateY(-2px); border-color: var(--border-strong); }
/* Homepage "Selected work": grey border */
.selected-work .lead-case-link, .selected-work .work-card-link { border: 2px solid var(--border-strong); }
.selected-work .lead-case-link:hover, .selected-work .work-card-link:hover { border-color: var(--border-strong); }
.work-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-alt); }
.work-card-media img { width: 100%; height: 100%; object-fit: cover; }
.work-card-media .case-placeholder { min-height: 0; border: 0; border-bottom: 1px solid var(--border); }
.work-card-body { display: flex; flex-direction: column; flex: 1; padding: var(--s-3); }
.work-card-sector { font: 500 13px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.work-card-body h3 { font-size: var(--fs-22); margin: 8px 0 var(--s-2); }
.work-card-stat { margin: 0 0 var(--s-2); color: var(--ink-muted); font-size: var(--fs-16); }
.work-card-stat strong { display: block; font: 600 var(--fs-28)/1.1 var(--font-head); font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.work-card-body .text-link { margin-top: auto; align-self: flex-start; }

.work-index { padding: var(--s-8) var(--gutter) var(--section-y); background: var(--surface-alt); }
.work-filters { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-4); }
.work-filters button { padding: 9px 16px; border: 1px solid var(--field-border); border-radius: 100px; background: var(--surface); color: var(--ink); font-weight: 500; font-size: var(--fs-16); cursor: pointer; }
.work-filters button:hover { border-color: var(--ink); }
.work-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.work-grid-item[hidden] { display: none; }

/* === Home: how we work === */
.how-we-work { padding: var(--section-y) var(--gutter); }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.how-steps li { position: relative; display: flex; flex-direction: column; }
.how-step-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--fg); background: var(--bg); position: relative; z-index: 1; }
.how-icon { width: 26px; height: 26px; }
.how-steps li:not(:last-child)::after { content: ''; position: absolute; top: 26px; left: 64px; right: -20px; border-top: 1px solid var(--line); }
.how-step-number { margin-top: var(--s-3); font: 500 13px var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: var(--muted); }
.how-steps h3 { font-size: var(--fs-22); margin: 6px 0 10px; }
.how-steps p { color: var(--muted); font-size: var(--fs-16); margin: 0 0 var(--s-2); }
.how-steps .how-step-gets { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--fg); }
.how-step-gets span { display: block; font: 500 13px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

/* === Team strip and team grid === */
.team-photo { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--surface-alt); margin-bottom: 12px; }

/* === Testimonials === */
.testimonials { background: var(--surface-alt); }
.testimonials > .eyebrow { display: block; margin-bottom: var(--s-3); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.testimonial {
  position: relative; margin: 0; display: flex; flex-direction: column;
  padding: 3.75rem var(--s-4) var(--s-4);
  background: var(--surface); border: 1px solid #ecebe7; border-top: 3px solid var(--accent); border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease;
}
.testimonial::before {
  content: '\201C'; position: absolute; top: .6rem; left: 1.4rem;
  font: 700 4.5rem/1 Georgia, serif; color: var(--accent);
}
.testimonial blockquote { flex: 1; margin: 0; }
.testimonial p { margin: 0; font: 400 clamp(20px, 1.8vw, 24px)/1.45 var(--font-body); color: var(--ink); }
.testimonial figcaption { display: flex; align-items: center; gap: 12px; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #f0efeb; font-size: var(--fs-16); font-weight: 600; color: var(--ink); }
.testimonial-badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); border: 0; font: 600 var(--fs-16) var(--font-head); color: #fff; flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .testimonial:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, .08); }
}

/* === Insights === */
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.insight-grid-2 { grid-template-columns: repeat(2, 1fr); }
.insight-grid-2 .insight-thumb, .insight-grid-1 .insight-thumb { aspect-ratio: 21 / 9; }
.insight-grid-1 { grid-template-columns: minmax(0, 560px); }
.insight-card a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  transition: transform .2s ease, border-color .2s ease;
}
.insight-card a:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.insight-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--surface-alt); border-bottom: 1px solid var(--border); display: flex; align-items: flex-end; padding: var(--s-3); overflow: hidden; }
.insight-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.insight-thumb-label { font: 700 clamp(40px, 5vw, 64px)/1 var(--font-head); letter-spacing: -0.03em; color: #d6d6d2; }
.insight-thumb::after { content: ''; position: absolute; right: 20px; top: 18px; width: 48px; height: 19px; background: url('../images/ina4-logo.svg') no-repeat right center / contain; opacity: .3; }
.insight-thumb:has(img)::after { display: none; }
.insight-body { display: flex; flex-direction: column; flex: 1; padding: var(--s-3); }
.insight-category { align-self: flex-start; font: 500 13px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); border: 1px solid var(--border); border-radius: 100px; padding: 3px 10px; margin-bottom: 12px; }
.insight-card h3 { font-size: var(--fs-22); margin: 0 0 var(--s-2); }
.insight-meta { margin: auto 0 0; font-size: var(--fs-14); color: var(--ink-muted); }

.blog-list { padding: var(--s-8) var(--gutter) var(--section-y); }
.blog-empty { color: var(--muted); }

/* === Contact block (dark CTA, shared) === */
.contact-section { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; padding: var(--section-y) var(--gutter); align-items: start; }
.contact-copy h1, .contact-copy h2 { font-size: clamp(var(--fs-40), 4.8vw, var(--fs-56)); letter-spacing: -0.02em; margin: 16px 0 20px; }
.contact-copy p { color: var(--muted); }
.contact-call { display: inline-block; margin-top: var(--s-3); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 5px; }
.contact-call:hover { color: var(--accent); }
.lead-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: var(--s-4);
  background: var(--surface); color: var(--ink); border-radius: var(--radius);
  --focus: var(--ink);
}
.lead-form label { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-14); font-weight: 600; }
.lead-form label:nth-child(3), .lead-form label:nth-child(4) { grid-column: 1 / -1; }
.lead-form input, .lead-form select, .lead-form textarea { width: 100%; border: 1px solid var(--field-border); padding: 13px 14px; border-radius: var(--radius-btn); background: var(--surface); color: var(--ink); font-size: var(--fs-16); font-weight: 400; resize: vertical; }
.lead-form button { grid-column: 1 / -1; padding: 16px 20px; }
.lead-form small, .form-status { grid-column: 1 / -1; margin: 0; font-size: var(--fs-14); color: var(--ink-muted); }
.form-status { font-weight: 600; color: var(--ink); }
.form-status:empty { display: none; }
/* The form is hidden once sent (the thank-you panel takes its place); display: grid would otherwise override [hidden] */
.lead-form[hidden] { display: none; }
/* Spam trap: hidden from people, filled in by bots */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-thanks { padding: var(--s-4); background: var(--surface); color: var(--ink); border-radius: var(--radius); border-top: 4px solid var(--accent); }
.form-thanks:focus { outline: none; }
.form-thanks h2, .form-thanks h3 { font-size: var(--fs-22); margin: 0 0 8px; }
.form-thanks p { margin: 0; color: var(--ink-muted); }
.form-thanks a { font-weight: 600; color: var(--accent-ink); text-decoration: underline; }

/* === Case study page === */
.case-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 5vw; align-items: center; padding: var(--s-8) var(--gutter) var(--s-12); }
.case-hero h1 { font-size: clamp(var(--fs-40), 5vw, var(--fs-72)); letter-spacing: -0.02em; margin: 16px 0 18px; }
.case-summary { font-size: var(--fs-18); color: var(--muted); max-width: 52ch; margin: 0; }
.case-hero-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-alt); }
.case-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.case-hero-media .case-placeholder { min-height: 0; border: 0; }
.case-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); column-gap: var(--s-3); margin: var(--s-5) 0 0; border-top: 1px solid var(--line); }
.case-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 22px 0 0; }
.case-stats dd { margin: 0 0 6px; font: 600 clamp(32px, 3.4vw, 44px)/1 var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--stat); white-space: nowrap; }
.case-stats dt { font-size: var(--fs-14); color: var(--muted); }
.case-body { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: var(--s-6); padding: var(--section-y) var(--gutter); }
.case-block h2 { font-size: var(--fs-22); margin: 0 0 14px; }
.case-block p, .case-services { color: var(--muted); margin: 0; }
.case-services { list-style: none; padding: 0; font-size: var(--fs-16); }
.case-services li { padding: 10px 0; border-top: 1px solid var(--line); }
/* Extra phase of work within one case study, e.g. Sunbelt Sales after Sunbelt Rentals */
.case-phase { grid-column: 1 / -1; margin-top: var(--s-4); padding-top: var(--s-8); border-top: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + var(--s-3)); }
.case-phase h2 { font-size: clamp(var(--fs-28), 3vw, var(--fs-40)); letter-spacing: -0.02em; margin: 12px 0 0; }
.case-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0 var(--gutter) var(--section-y); }
.case-gallery figure { margin: 0; }
.case-gallery img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.case-gallery figcaption { margin-top: 10px; font-size: var(--fs-14); color: var(--muted); }
@media (max-width: 900px) { .case-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .case-gallery { grid-template-columns: minmax(0, 1fr); } }
.case-quote { padding: var(--section-y) var(--gutter); }
.case-quote blockquote { margin: 0 auto; max-width: 900px; }
.case-quote p { font: 400 clamp(22px, 2.4vw, 28px)/1.45 var(--font-body); margin: 0 0 20px; }
.case-quote cite { font-style: normal; font-weight: 600; color: var(--muted); }
/* Optional results block inside .case-body: full width under the three columns */
.case-results-block { grid-column: 1 / -1; margin-top: var(--s-2); padding-top: var(--s-6); border-top: 1px solid var(--border); }
.case-results-block h2 { font-size: var(--fs-22); margin: 0 0 6px; }
.case-results-intro { margin: 0 0 var(--s-4); color: var(--muted); }
.case-results-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4) var(--s-3); margin: 0 0 var(--s-5); }
.case-results-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.case-results-stats dd { margin: 0 0 6px; font: 600 clamp(32px, 3.4vw, 44px)/1 var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--stat); white-space: nowrap; }
.case-results-stats dt { font-size: var(--fs-14); line-height: 1.45; color: var(--muted); }
.case-results-body { max-width: 760px; }
.case-results-body p { margin: 0 0 var(--s-2); color: var(--muted); }
.case-results-body p:last-child { margin-bottom: 0; }
/* Four stats: one row of four on desktop, then two by two (avoids an empty right-hand area) */
.case-results-stats--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .case-results-stats { grid-template-columns: repeat(3, 1fr); } .case-results-stats--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .case-results-stats { grid-template-columns: repeat(2, 1fr); } }
.case-next { padding: 0 var(--gutter) var(--section-y); }
.case-next a { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; padding: var(--s-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case-next span { font-weight: 500; color: var(--muted); }
.case-next strong { font: 700 clamp(var(--fs-28), 3.4vw, var(--fs-40)) var(--font-head); letter-spacing: -0.02em; }
.case-next strong span { color: inherit; display: inline-block; transition: transform .2s ease; }
.case-next a:hover strong { color: var(--stat); }
.case-next a:hover strong span { transform: translateX(6px); }

/* === Service pages === */
.service-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 5vw; align-items: center; padding: var(--s-8) var(--gutter) var(--s-12); }
.service-hero h1 { font-size: clamp(var(--fs-40), 5vw, var(--fs-72)); letter-spacing: -0.02em; margin: 16px 0 20px; }
.service-hero-copy > p { font-size: var(--fs-18); color: var(--muted); max-width: 56ch; margin: 0; }
/* Small reassurance line under the hero CTA, e.g. "30 minutes, no obligation. See our results →" */
.service-hero-copy > .hero-note { margin-top: var(--s-2); font-size: var(--fs-14); }
.hero-note a { font-weight: 600; color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.hero-note a:hover { color: var(--accent); }
.service-hero-art { color: var(--fg); }
/* Sub-service pages (templates/sub-service): no illustration, so one column; copy uses .post-body. */
.sub-service-hero { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--s-8); }
.sub-service-hero .service-hero-copy > p { max-width: 64ch; }
.sub-service-body h2 { font-size: var(--fs-28); margin: var(--s-6) 0 12px; }
.sub-service-body h3 { font-size: var(--fs-22); margin: var(--s-4) 0 8px; }
.sub-service-more { max-width: 70ch; margin: 0 auto; padding: 0 var(--gutter) var(--s-8); box-sizing: content-box; }
.sub-service-more h2 { font-size: var(--fs-22); margin: 0 0 var(--s-2); }
.sub-service-more ul, .service-subpages ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sub-service-more a, .service-subpages a {
  display: block; padding: 8px 14px; font-size: var(--fs-16); font-weight: 500; color: var(--ink-muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 100px;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.sub-service-more a:hover, .sub-service-more a:focus-visible,
.service-subpages a:hover, .service-subpages a:focus-visible { border-color: var(--accent); color: var(--accent-ink); background: rgba(47, 191, 113, .08); }
.service-subpages { margin-top: var(--s-5); }
.service-subpages h3 { font-size: var(--fs-18); margin: 0 0 12px; }
.offering-more { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.service-illustration { width: 100%; height: auto; max-width: 460px; margin-left: auto; display: block; }
.service-offerings, .service-why { padding: var(--section-y) var(--gutter) 0; }
.service-offerings > h2, .service-why > h2, .service-faqs > h2 { font-size: clamp(var(--fs-28), 3.4vw, var(--fs-40)); letter-spacing: -0.02em; margin: 0 0 var(--s-4); }
.offering-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
.offering-card {
  position: relative; overflow: hidden;
  padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
/* Green bar that sweeps in on hover */
.offering-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
/* Hover: same green glow and border as the homepage and Services tiles */
.offering-card:hover { background: var(--surface); border-color: var(--accent); box-shadow: var(--tile-shadow-hover); transform: translateY(-3px); }
.offering-card:hover::before { transform: scaleX(1); }
.offering-card h3 { font-size: var(--fs-22); margin: 0 0 10px; }
.offering-card p { font-size: var(--fs-16); color: var(--muted); margin: 0; max-width: 62ch; }
/* Divider above the list, green ticks instead of grey dots */
.offering-card ul { margin: var(--s-2) 0 0; padding: var(--s-2) 0 0; list-style: none; border-top: 1px solid var(--border); }
.offering-card li { position: relative; padding: 5px 0 5px 20px; font-size: var(--fs-16); }
.offering-card li::before {
  content: ''; position: absolute; left: 1px; top: 11px; width: 9px; height: 5px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
/* Odd number of cards: the last one spans the full width */
.offering-grid > .offering-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) {
  .offering-card, .offering-card::before { transition: none; }
  .offering-card:hover { transform: none; }
}
/* Service pages: offering cards white with green border + top bar, no shadow */
body.tpl-service .offering-card,
body.tpl-service .offering-card:hover {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: none;
}
body.tpl-service .offering-card::before { transform: scaleX(1); }      /* green top bar always visible */
body.tpl-service .offering-card:hover { transform: translateY(-3px); } /* keep the small lift on hover */
@media (prefers-reduced-motion: reduce) {
  body.tpl-service .offering-card:hover { transform: none; }
}
.featured-proof { display: grid; grid-template-columns: .9fr 1.1fr; gap: 5vw; align-items: center; margin: var(--section-y) var(--gutter) 0; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.featured-proof + .testimonials { margin-top: var(--section-y); }
.featured-proof-photo { height: 300px; }
/* Stat card on the photo: reuses .ind-photo / .ind-stat. The card clips its contents (overflow: hidden),
   so the stat sits 24px inside the photo rather than overlapping its edge, and the photo fills the panel. */
.featured-proof .ind-photo { height: 100%; min-height: 340px; margin: 0; }
.featured-proof .ind-photo img { height: 100%; aspect-ratio: auto; border-radius: 0; }
.featured-proof .ind-stat { left: 24px; bottom: 24px; }
.featured-proof-photo.case-placeholder { border: 0; border-right: 1px solid var(--border); }
.featured-proof-copy { padding: var(--s-4) var(--s-5) var(--s-4) 0; }
.featured-proof-copy h2 { font-size: clamp(var(--fs-22), 2.4vw, var(--fs-28)); margin: 12px 0 var(--s-3); }
.pillar-case-link { font-size: var(--fs-16); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.pillar-case-link:hover { color: var(--stat); text-decoration-color: currentColor; }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-6); }
.why-grid h3 { font-size: var(--fs-18); margin: 0 0 6px; }
.why-grid p { font-size: var(--fs-16); color: var(--muted); margin: 0; }
/* Why work with Ina4: four tick cards */
body.tpl-service .service-why .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
body.tpl-service .service-why .why-grid > div { position: relative; padding: 28px 24px 26px; background: var(--surface-alt); border-radius: 16px; transition: transform .25s ease; }
body.tpl-service .service-why .why-grid > div::before {
  content: ""; display: block; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 12px;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 22px no-repeat;
}
body.tpl-service .service-why .why-grid > div:hover { transform: translateY(-3px); }
body.tpl-service .service-why .why-grid h3 { font-size: 1.2rem; letter-spacing: -.01em; margin: 0 0 8px; color: var(--ink); }
body.tpl-service .service-why .why-grid p { margin: 0; line-height: 1.6; color: var(--ink-muted); }
@media (max-width: 1000px) { body.tpl-service .service-why .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { body.tpl-service .service-why .why-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { body.tpl-service .service-why .why-grid > div { transition: none; } body.tpl-service .service-why .why-grid > div:hover { transform: none; } }
.service-faqs { padding: var(--section-y) var(--gutter); max-width: 980px; }
.service-faqs details { border-top: 1px solid var(--line); padding: var(--s-2) 0; }
.service-faqs details:last-of-type { border-bottom: 1px solid var(--line); }
.service-faqs summary { cursor: pointer; font-weight: 600; font-size: var(--fs-18); }
.service-faqs summary::marker { color: var(--muted); }
.service-faqs p { margin: 12px 0 0; font-size: var(--fs-16); color: var(--muted); }


/* === About page === */
.about-story { padding: var(--section-y) var(--gutter); }
.about-story h2, .about-team > h2, .about-offices > h2, .about-values > h2 { font-size: clamp(var(--fs-28), 3.4vw, var(--fs-40)); letter-spacing: -0.02em; margin: 0 0 var(--s-4); }
.about-body p { margin: 0 0 18px; }
.about-values { padding: 0 var(--gutter) var(--section-y); }
.about-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.about-values-grid article { padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.about-value-icon { width: 32px; height: 32px; color: var(--ink); margin-bottom: var(--s-3); }
.about-values-grid h3 { font-size: var(--fs-18); margin: 0 0 8px; }
.about-values-grid p { font-size: var(--fs-16); color: var(--ink-muted); margin: 0; }
.about-team { padding: var(--section-y) var(--gutter) var(--s-8); background: var(--surface-alt); }
.team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s-4) var(--s-3); }
.about-offices { padding: var(--section-y) var(--gutter); }
.office-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 420px)); gap: var(--s-2); }
.office-card { padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius); }
.office-label { display: block; font: 500 13px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; }
.office-card h3 { font-size: var(--fs-22); margin: 0 0 10px; }
.office-card p { margin: 0 0 14px; color: var(--ink-muted); font-size: var(--fs-16); line-height: 1.5; }
.office-card a { font-weight: 600; font-size: var(--fs-16); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }
.office-card a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }

/* === Insight post === */
.post-header { padding: var(--s-8) var(--gutter); }
.post-header h1 { font-size: clamp(36px, 4.6vw, var(--fs-56)); letter-spacing: -0.02em; max-width: 24ch; margin: 16px 0 20px; }
.post-meta { margin: 0; font-size: var(--fs-16); color: var(--muted); }
.post-image { width: min(1100px, 90vw); height: auto; margin: var(--s-6) auto 0; border-radius: var(--radius); }
.post-body { max-width: 70ch; margin: 0 auto; padding: var(--s-8) var(--gutter) var(--s-4); box-sizing: content-box; }
.post-body p, .post-body li { font-size: var(--fs-18); line-height: 1.7; }
.post-body h2 { font-size: clamp(var(--fs-22), 2.4vw, var(--fs-28)); margin: var(--s-6) 0 14px; }
.post-body a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.post-body a:hover { color: var(--accent-ink); }
/* Legal pages (privacy, terms, policies) */
.legal-body h2, .legal-body h3 { margin: var(--s-5) 0 12px; }
.legal-body h2, .legal-body h3 { font-size: var(--fs-22); }
.legal-body > :first-child { margin-top: 0; }
.legal-body .pillar-link { text-decoration: none; }
.legal-body table { width: 100%; margin: var(--s-2) 0 var(--s-3); border-collapse: collapse; font-size: var(--fs-16); line-height: 1.5; }
.legal-body th, .legal-body td { padding: 12px 12px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-body th { font-weight: 600; border-bottom-color: var(--line-strong); }
.legal-body td:first-child { width: 30%; }
.legal-body code { font-size: .9em; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .legal-body table { font-size: var(--fs-14); }
  .legal-body th, .legal-body td { padding-right: 8px; }
}
.post-footer { max-width: 70ch; margin: 0 auto; padding: 0 var(--gutter) var(--section-y); box-sizing: content-box; display: grid; gap: var(--s-4); }
.author-box { display: flex; gap: 18px; align-items: center; padding: var(--s-3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.author-box .team-photo { width: 64px; height: 64px; margin: 0; border-radius: 50%; flex-shrink: 0; }
.author-box p { margin: 0; }
.author-label { font-size: var(--fs-14); color: var(--ink-muted); }
.author-name { font-size: var(--fs-18); font-weight: 600; }
.author-role { color: var(--ink-muted); font-size: var(--fs-16); }
.related-service { padding: var(--s-4); border-radius: var(--radius); background: var(--surface-alt); border: 1px solid var(--border); }
.related-service-label { margin: 0 0 6px; font: 500 13px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.related-service h2 { font-size: var(--fs-28); margin: 0 0 10px; }
.related-service p:not(.related-service-label) { color: var(--ink-muted); margin: 0 0 var(--s-3); }

/* === Contact page === */

/* === Responsive === */
@media (max-width: 1100px) {
  .work-grid, .insight-grid, .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .how-steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-6); }
  .how-steps li:nth-child(2)::after { display: none; }
  .about-values-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .case-hero, .service-hero, .contact-section, .lead-case-link { grid-template-columns: 1fr; }
  .lead-case-media { min-height: 0; aspect-ratio: 16 / 10; }
  .lead-case-body { padding: var(--s-4); }
  .case-hero { padding-top: var(--s-5); }
  .case-hero-media { order: -1; }
  .case-hero-media:has(.case-placeholder) { display: none; }
  .case-body { grid-template-columns: 1fr; gap: var(--s-5); }
  .offering-grid, .office-grid, .why-grid { grid-template-columns: 1fr; }
  .service-hero { padding-top: var(--s-5); }
  .service-hero-art { max-width: 340px; }
  .service-illustration { margin-left: 0; }
  .featured-proof { grid-template-columns: 1fr; }
  .featured-proof-photo.case-placeholder { border-right: 0; border-bottom: 1px solid var(--border); }
  .featured-proof-copy { padding: var(--s-4); }
  .contact-section { gap: var(--s-5); }
}
@media (max-width: 640px) {
  :root { --section-y: var(--s-8); }
  .work-grid, .insight-grid, .insight-grid-2, .testimonial-grid, .how-steps, .about-values-grid { grid-template-columns: 1fr; }
  .how-steps li::after { display: none; }
  .lead-form { padding: 20px; gap: 14px; grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; gap: var(--s-4); }
  .work-intro, .about-intro { padding-top: var(--s-8); }
  .lead-case-body, .offering-card, .office-card, .about-values-grid article { padding: var(--s-3); }
  .testimonial { padding: 3.25rem var(--s-3) var(--s-3); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .work-card-link:hover, .lead-case-link:hover, .insight-card a:hover { transform: none; }
}

/* === Kinetic grid behind heroes (js/kinetic-grid.js) === */
[data-kinetic-grid] { position: relative; overflow: hidden; }
[data-kinetic-grid] > :not(.hero-grid-canvas) { position: relative; z-index: 1; }
.hero-grid-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* No eyebrow above these headings, so no gap above the h2 */
.selected-work .section-head h2,
.how-we-work .section-head h2,
.testimonials .section-head h2 { margin-top: 0; }
.how-we-work h2 .accent { color: var(--accent); }

/* === Icons: one line set (Lucide), green accent, optional tinted badge === */
.pillar-icon, .mega-link .pillar-icon, .how-icon, .about-value-icon { color: var(--accent); }

/* === Home: Selected work === */
.selected-work { background: var(--surface); }

/* === Services page (scoped: .services-intro and .pillar-list only exist on /services) === */
.services-intro {
  position: relative; overflow: hidden;
  background: radial-gradient(circle at 100% 0, rgba(47, 191, 113, .2), transparent 45%), var(--dark);
}
.services-intro p { font-size: 1.15rem; }
.services-intro-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-4); }

/* Jump nav: frosted bar of pills, sticky under the header */
.jump-nav {
  position: sticky; top: var(--header-h); z-index: 20;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.jump-nav ul { list-style: none; margin: 0; padding: 12px var(--gutter); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.jump-nav a {
  display: block; padding: 8px 14px; white-space: nowrap;
  font-size: var(--fs-16); font-weight: 500; color: var(--ink-muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 100px;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.jump-nav a:hover, .jump-nav a:focus-visible { border-color: var(--accent); color: var(--accent-ink); background: rgba(47, 191, 113, .08); }

/* Service cards: 2x2 grid */
.pillar-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 56px var(--gutter); }
.pillar-row {
  display: flex; flex-direction: column; padding: 36px;
  /* Land below the sticky header (header height) plus the jump nav (~62px). */
  scroll-margin-top: calc(var(--header-h) + 78px);
  background: var(--tile-bg); color: var(--ink); border: 2px solid var(--accent); border-radius: 20px;
  box-shadow: var(--tile-shadow);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pillar-main { display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.pillar-main .pillar-icon {
  width: 52px; height: 52px; padding: 14px; margin-bottom: var(--s-3);
  border-radius: 14px; background: var(--surface); border: 1.5px solid var(--accent); color: var(--accent);
  box-shadow: var(--tile-icon-shadow);
  transition: background-color .2s ease, color .2s ease;
}
.pillar-row h2 { font-size: 1.9rem; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--ink); }
.pillar-row h2 a:hover { color: var(--accent-ink); }
.pillar-slogan { font-size: 1.25rem; font-weight: 600; color: var(--accent-ink); margin: 0 0 12px; }
.pillar-main > p:not(.pillar-slogan) { font-size: var(--fs-16); color: var(--ink-muted); margin: 0 0 var(--s-3); }
.pillar-points { list-style: none; width: 100%; margin: 0 0 var(--s-4); padding: 20px 0 0; border-top: 1px solid var(--border-strong); display: grid; gap: 10px; }
.pillar-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.pillar-tick { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: rgba(47, 191, 113, .15); color: var(--accent-ink); }
.pillar-tick svg { width: 12px; height: 12px; }
/* Flat solid button, matching the header "Book a free strategy call" CTA */
.pillar-link {
  display: inline-block; margin-top: auto; padding: 12px 20px; border-radius: var(--radius-btn);
  background: var(--accent); border: 1px solid var(--accent); color: var(--ink); box-shadow: none;
  font-size: var(--fs-16); font-weight: 600;
  transition: background-color .2s ease, border-color .2s ease;
}
.pillar-link span { display: inline-block; transition: transform .2s ease; }
.pillar-link:hover, .pillar-link:focus-visible { background: #3ad281; border-color: #3ad281; color: var(--ink); }
.pillar-link:hover span { transform: translateX(3px); }
.pillar-row:hover { border-color: var(--accent); box-shadow: var(--tile-shadow-hover); }
.pillar-row:hover .pillar-icon { background: var(--accent); color: var(--surface); }
@media (prefers-reduced-motion: no-preference) {
  .pillar-row:hover { transform: translateY(-4px); }
}

@media (max-width: 800px) {
  .pillar-list { grid-template-columns: 1fr; }
  .pillar-row { padding: 28px; }
  .pillar-row h2 { font-size: var(--fs-28); }
}

/* === About page polish (scoped: these classes only exist on /about; .office-banner is shared with /contact) === */
.about-intro {
  position: relative; overflow: hidden;
  background: radial-gradient(circle at 100% 0, rgba(47, 191, 113, .22), transparent 45%), var(--dark);
}
.about-intro p { font-size: 1.15rem; }

/* Story text spans the full content width (same container and gutter as the cards below). */
.about-story .about-body p { max-width: none; font-size: clamp(var(--fs-16), 0.95rem + 0.25vw, 1.2rem); line-height: 1.6; }
.about-story .about-body p:first-child { font-size: clamp(var(--fs-18), 1rem + 0.6vw, 1.5rem); line-height: 1.5; font-weight: 500; color: var(--ink); }

/* What matters to us: cards to match /services */
.about-values-grid article {
  padding: 28px; background: var(--surface-alt);
  border: 1.5px solid var(--accent); border-radius: 20px;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.about-values-grid .about-value-icon {
  width: 48px; height: 48px; padding: 12px; margin-bottom: var(--s-3);
  border-radius: 14px; background: var(--surface); color: var(--accent-ink);
}
.about-values-grid article:hover { background: #eef8f1; box-shadow: 0 24px 48px -24px rgba(26, 127, 75, .35); }

/* Meet the team */
.team-grid li { transition: transform .2s ease; }
.team-grid .team-photo { border-radius: 16px; margin-bottom: 0; transition: box-shadow .2s ease; }
.team-grid strong { display: block; margin-top: 12px; font-size: 1rem; font-weight: 700; color: var(--ink); }
.team-grid span { display: block; margin-top: 2px; font-size: .9rem; line-height: 1.35; color: var(--accent-ink); overflow-wrap: break-word; }
.team-grid li:hover .team-photo { box-shadow: 0 0 0 3px var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .about-values-grid article:hover, .team-grid li:hover { transform: translateY(-4px); }
}

/* Where to find us: full-width dark banner */
.office-banner .office-grid { grid-template-columns: 1fr; }
.office-banner .office-card {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px var(--s-4);
  padding: 32px 36px; border: 0; border-radius: 20px; color: #fff;
  background: radial-gradient(circle at 100% 0, rgba(47, 191, 113, .25), transparent 50%), var(--ink);
}
.office-banner .office-card h3 { grid-column: 1; margin: 0; font-size: 1.6rem; color: #fff; }
.office-banner .office-card p { grid-column: 1; margin: 0; color: #c9c9c5; }
.office-banner .office-card a {
  grid-column: 2; grid-row: 1 / span 2;
  display: inline-block; padding: 12px 20px; border-radius: var(--radius-btn);
  background: var(--accent); color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease;
}
.office-banner .office-card a:hover, .office-banner .office-card a:focus-visible { background: #3ad281; color: var(--ink); }
.office-banner .office-card a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 800px) {
  .about-values-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-2); }
  .office-banner .office-card { grid-template-columns: 1fr; padding: 28px; }
  .office-banner .office-card a { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--s-2); }
}

/* === About page spacing (scoped via the body class tpl-about) === */
.tpl-about { --section-y: 72px; }
.tpl-about .about-intro { padding-top: 80px; padding-bottom: 64px; }
.tpl-about .about-story { padding-top: var(--section-y); padding-bottom: 0; }
.tpl-about .about-values { padding-top: 56px; padding-bottom: var(--section-y); }
.tpl-about .about-team { padding-bottom: var(--section-y); }
.tpl-about .about-story h2, .tpl-about .about-values > h2, .tpl-about .about-team > h2, .tpl-about .about-offices > h2 { margin-bottom: var(--s-3); }
.tpl-about .about-story h2 { margin-bottom: var(--s-2); }
.tpl-about .about-story .about-body p { margin-bottom: 12px; }
.tpl-about .about-story .about-body p:last-child { margin-bottom: 0; }
.tpl-about .testimonials > .eyebrow { margin-bottom: 20px; }
@media (max-width: 800px) {
  .tpl-about { --section-y: 48px; }
  .tpl-about .about-intro { padding-top: 56px; padding-bottom: 48px; }
  .tpl-about .about-story { padding-top: 48px; }
  .tpl-about .about-values { padding-top: 40px; }
}

/* === Home: client logo strip (under the hero) === */
.client-strip { padding: var(--s-6) 0; background: var(--surface); border-bottom: 1px solid var(--border); text-align: center; overflow: hidden; }
.client-strip > .eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 0 var(--gutter) var(--s-4);
  font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: .1em; color: var(--ink);
}
.client-strip > .eyebrow::before, .client-strip > .eyebrow::after { content: ""; flex: 0 0 48px; height: 2px; border-radius: 2px; background: var(--accent); }
.client-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.client-track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s-8); width: max-content; animation: client-scroll 45s linear infinite; }
.client-track li { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 150px; height: 56px; }
.client-track img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; opacity: .75; transition: opacity .2s ease; }
.client-track img:hover { opacity: 1; }
/* Client slider: bring the three coloured logos in line with the grey ones */
.client-track img[src*="deu-estates"],
.client-track img[src*="mhs-lettings"] {
  filter: grayscale(1);
}
/* Spencer is white text on a purple box: invert, drop the box, tone to match */
.client-track img[src*="spencer-properties"] {
  filter: grayscale(1) invert(1) brightness(1.2) contrast(10);
  mix-blend-mode: multiply;
  opacity: .48;
}
.client-track img[src*="spencer-properties"]:hover { opacity: .65; }
.client-marquee:hover .client-track { animation-play-state: paused; }
@keyframes client-scroll { to { transform: translateX(calc(-50% - var(--s-8) / 2)); } }
@media (max-width: 640px) {
  .client-strip > .eyebrow { font-size: 14px; gap: 10px; }
  .client-strip > .eyebrow::before, .client-strip > .eyebrow::after { display: none; }
  .client-track { gap: var(--s-5); animation-duration: 35s; }
  .client-track li { width: 120px; height: 44px; }
  @keyframes client-scroll { to { transform: translateX(calc(-50% - var(--s-5) / 2)); } }
}
@media (prefers-reduced-motion: reduce) {
  .client-marquee { -webkit-mask-image: none; mask-image: none; }
  .client-track { width: auto; flex-wrap: wrap; justify-content: center; gap: var(--s-4) var(--s-5); padding: 0 var(--gutter); animation: none; }
  .client-track .client-dup { display: none; }
}

/* Resources: downloadable whitepapers, styled like the Services cards */
.resource-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 56px var(--gutter) var(--section-y); }
.resource-card {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 32px; align-items: start; padding: 36px;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: 20px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.resource-card:hover { border-color: var(--accent); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .18); }
.resource-cover { display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45); }
.resource-cover img { display: block; width: 100%; height: auto; }
.resource-body { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.resource-body h2 { font-size: 1.9rem; letter-spacing: -0.02em; margin: 10px 0 10px; color: var(--ink); }
.resource-body > p { font-size: var(--fs-16); color: var(--ink-muted); margin: 0 0 var(--s-3); }
.resource-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: auto; }
.resource-actions .pillar-link { margin-top: 0; }
.resource-meta { font-size: var(--fs-14); color: var(--ink-muted); }
@media (prefers-reduced-motion: no-preference) {
  .resource-card:hover { transform: translateY(-4px); }
}
@media (max-width: 1100px) {
  .resource-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .resource-list { padding-top: 32px; }
  .resource-card { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .resource-cover { width: min(200px, 60%); }
}

/* Resources: download details form in a modal dialog */
.resource-actions button.pillar-link { font-family: inherit; line-height: inherit; cursor: pointer; }
.resource-dialog {
  width: min(600px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 40px; overflow: auto;
  background: var(--surface); color: var(--ink); border: 0; border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
}
.resource-dialog::backdrop { background: rgba(17, 17, 17, .7); }
.resource-dialog h2 { font-size: var(--fs-28); letter-spacing: -0.02em; margin: 10px 40px 8px 0; }
.resource-dialog h2:focus { outline: none; }
.resource-dialog-intro { color: var(--ink-muted); margin: 0 0 var(--s-3); }
.resource-dialog-close {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--ink);
  font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.resource-dialog-close:hover { background: var(--surface-alt); border-color: var(--border-strong); }
.resource-form { padding: 0; }
.resource-form label:nth-child(n) { grid-column: auto; }
.resource-form label:nth-child(5) { grid-column: 1 / -1; }
.resource-success .pillar-link { margin-top: var(--s-1); }
@media (max-width: 640px) {
  .resource-dialog { padding: 28px 20px 24px; }
  .resource-form { padding: 0; }
  .resource-dialog h2 { font-size: var(--fs-22); }
}

/* === Industries page (/industries) === */
/* Nav: the Industries dropdown has six items: two rows of three on desktop, three rows of two on narrow desktops so "Construction & engineering" fits */
@media (min-width: 901px) { #industries-menu .mega-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { #industries-menu .mega-grid { grid-template-columns: repeat(3, 1fr); } }

.ind-hero { grid-template-columns: 1fr; }
.ind-hero .service-hero-copy { max-width: 820px; }

/* Sticky pill nav under the hero */
.ind-nav {
  --ind-nav-h: 64px;
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.ind-nav ul {
  list-style: none; margin: 0 auto; padding: 12px var(--gutter); max-width: calc(1120px + 2 * var(--gutter));
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.ind-nav ul::-webkit-scrollbar { display: none; }
.ind-nav li { flex: 0 0 auto; }
.ind-nav a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ind-nav a:hover, .ind-nav a.is-active { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.ind-pill-icon { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

/* Industry sections */
.ind {
  position: relative; overflow: hidden; padding: 96px var(--gutter);
  background: var(--surface-alt); color: var(--ink);
  /* Clear the sticky header and the pill nav when jumping to a section */
  scroll-margin-top: calc(var(--header-h) + 72px);
}
.ind--white { background: var(--surface); }
.ind--dark { --muted: #bdbdbd; background: var(--dark); color: #fff; }
.ind-inner { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; }
.ind-num {
  position: absolute; top: 40px; right: var(--gutter); z-index: 0;
  font: 800 180px/1 var(--font-head); letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px var(--accent); opacity: .25; pointer-events: none; user-select: none;
}
.ind-top { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.ind-top--flip { grid-template-columns: .95fr 1.05fr; }
.ind-top--flip .ind-media { order: -1; }
.ind-badge { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--s-3); border-radius: 14px; background: var(--accent); }
.ind-badge-icon { width: 26px; height: 26px; color: #fff; }
.ind-copy h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.025em; margin: 12px 0 var(--s-3); }
.ind-intro { font-size: var(--fs-18); color: var(--muted); margin: 0; }

/* Photo with a floating stat card on the side facing the copy */
.ind-photo { position: relative; margin: 0; }
.ind-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
.ind-stat {
  /* Always a white card, so use the light-section colours */
  --stat: var(--accent-ink);
  position: absolute; bottom: -24px; left: -24px;
  display: flex; flex-direction: column; gap: 4px; min-width: 200px; padding: 18px 22px;
  background: var(--surface); color: var(--ink); border-left: 4px solid var(--accent); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
}
.ind-top--flip .ind-stat { left: auto; right: -24px; }
.ind-stat strong { font: 800 40px/1 var(--font-head); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--stat); }
.ind-stat span { font-size: var(--fs-16); font-weight: 700; }
.ind-stat small { font-size: var(--fs-14); color: var(--ink-muted); }

/* Housing: logo panel in place of a photo */
.ind-logos {
  padding: 28px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 16px 40px rgba(0, 0, 0, .08);
}
.ind-logos-label { margin: 0 0 var(--s-2); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.ind-logos ul { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ind-logos li { display: grid; place-items: center; height: 64px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; }
.ind-logos img { max-height: 36px; max-width: 100%; width: auto; height: auto; object-fit: contain; opacity: .9; }
/* The MHS logo has extra built-in white space, so it gets a little more height */
.ind-logos img[src*="mhs-lettings"] { max-height: 46px; }

/* Service cards */
.ind-services { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ind-card {
  display: flex; flex-direction: column; height: 100%; padding: 24px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ind-card:hover, .ind-card:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0, 0, 0, .1); }
.ind-card-icon { width: 28px; height: 28px; color: var(--accent); }
.ind-card h3 { font-size: var(--fs-22); margin: 14px 0 8px; }
.ind-card p { flex: 1; margin: 0 0 var(--s-3); font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.ind-card-link { font-size: var(--fs-14); font-weight: 700; color: var(--accent-ink); }
.ind--dark .ind-card { background: var(--dark-raised); border-color: #2c2c2c; border-top-color: var(--accent); color: #fff; }
.ind--dark .ind-card p { color: #b5b5b5; }
.ind--dark .ind-card-link { color: var(--accent); }
.ind--dark .ind-card:hover, .ind--dark .ind-card:focus-visible { box-shadow: 0 16px 32px rgba(0, 0, 0, .4); }

/* A dark last section sits directly above the dark contact form, so separate them */
.ind--dark + .contact-section { border-top: 1px solid #2a2a2a; }

/* Proof links */
.ind-proof { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.ind--dark .ind-proof .pillar-case-link { color: #fff; }
.ind--dark .ind-proof .pillar-case-link:hover { color: var(--accent); }

@media (max-width: 1100px) {
  .ind-services { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .ind-top, .ind-top--flip { grid-template-columns: 1fr; gap: 48px; }
  .ind-top--flip .ind-media { order: 0; }
}
@media (max-width: 640px) {
  .ind { padding: 72px var(--gutter); }
  .ind-num { top: 24px; font-size: 110px; }
  .ind-stat, .ind-top--flip .ind-stat { left: 12px; right: auto; bottom: -20px; min-width: 0; }
  .ind-services { grid-template-columns: 1fr; margin-top: 64px; }
  .ind-logos { padding: 24px; }
}
@media (max-width: 560px) {
  .ind-logos li { height: 56px; }
  .ind-logos img { max-height: 30px; }
  .ind-logos img[src*="mhs-lettings"] { max-height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .ind-card:hover, .ind-card:focus-visible { transform: none; }
}

/* === Landing page (/grow, PPC traffic) === */
.lp-hero {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px 56px; align-items: start;
  grid-template-areas: "copy form" "stats form"; grid-template-rows: auto 1fr;
  padding: var(--s-8) var(--gutter);
  background: radial-gradient(60% 70% at 100% 100%, rgba(47, 191, 113, .18), transparent 70%), #141414;
}
.lp-hero-copy { grid-area: copy; padding-top: var(--s-3); }
.lp-hero h1 { margin: 16px 0 20px; font: 800 clamp(38px, 5vw, 60px)/1.02 var(--font-head); letter-spacing: -0.035em; }
.lp-hero h1 em { font-style: normal; color: var(--accent); }
.lp-lede { margin: 0 0 var(--s-4); font-size: 19px; line-height: 1.6; color: #c9c9c9; max-width: 56ch; }
.lp-ticks, .lp-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-ticks li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; color: #fff; }
.lp-tick { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(47, 191, 113, .18); color: var(--accent); }
.lp-tick svg { width: 13px; height: 13px; }
.lp-mini-stats { grid-area: stats; align-self: start; display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 8px 0 0; padding-top: 24px; border-top: 1px solid #2a2a2a; }
.lp-mini-stats div, .lp-results dl > div, .lp-case-stats div { display: flex; flex-direction: column; }
.lp-mini-stats dd, .lp-results dd, .lp-case-stats dd { order: -1; margin: 0; }
.lp-mini-stats dd { font: 800 30px/1.1 var(--font-head); color: var(--accent); }
.lp-mini-stats dt { font-size: 13px; color: #a8a8a4; }

/* Form card */
.lp-form-card {
  grid-area: form; padding: 32px; background: var(--surface); color: var(--ink);
  border-top: 4px solid var(--accent); border-radius: 20px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6);
  --stat: var(--accent-ink); --muted: var(--ink-muted); --focus: var(--ink);
}
.lp-form-card h2 { font-size: var(--fs-28); letter-spacing: -0.02em; margin: 0 0 8px; }
.lp-form-card > p { margin: 0 0 var(--s-3); color: var(--ink-muted); }
.lp-form { padding: 0; gap: 14px; }
.lp-form label:nth-child(n) { grid-column: 1 / -1; }
.lp-form label:nth-child(1), .lp-form label:nth-child(2) { grid-column: auto; }
.lp-optional { font-weight: 400; color: var(--ink-muted); }
.lp-thanks { padding: 0; border: 0; }
.lp-form-note { margin: var(--s-2) 0 0; font-size: var(--fs-14); color: var(--ink-muted); text-align: center; }
.lp-form-note a { font-weight: 600; color: var(--ink); }

/* Results band */
.lp-results { padding: var(--s-6) var(--gutter); background: var(--accent); color: #0b2416; }
.lp-results dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1120px; margin: 0 auto; }
.lp-results dd { font: 800 clamp(40px, 4.4vw, 56px)/1 var(--font-head); letter-spacing: -0.03em; }
.lp-results dt { margin-top: 8px; font-weight: 700; }
.lp-results dt span { display: block; margin-top: 2px; font-size: var(--fs-14); font-weight: 500; opacity: .8; }

/* Shared section layout */
.lp-section { padding: var(--section-y) var(--gutter); }
.lp-section > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.lp-head { margin-bottom: var(--s-6); }
.lp-head h2 { font-size: clamp(var(--fs-28), 3.6vw, var(--fs-40)); letter-spacing: -0.02em; margin: 12px 0; }
.lp-head p { margin: 0; font-size: var(--fs-18); color: var(--ink-muted); }

/* Services */
.lp-service-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.lp-service {
  display: flex; flex-direction: column; height: 100%; padding: 28px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 18px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lp-service:hover, .lp-service:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0, 0, 0, .1); }
.lp-service-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 12px; background: #141414; }
.lp-icon { width: 24px; height: 24px; color: var(--accent); }
.lp-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.lp-service h3 { font-size: var(--fs-22); margin: 6px 0 8px; }
.lp-service > p { margin: 0 0 16px; color: var(--ink-muted); }
.lp-points { gap: 8px; margin-bottom: 20px; }
.lp-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.lp-points .lp-tick { flex-basis: 20px; width: 20px; height: 20px; color: var(--accent-ink); }
.lp-more { margin-top: auto; font-weight: 700; color: var(--accent-ink); }

/* How it works */
.lp-steps { background: var(--surface-alt); }
.lp-step-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-step-grid li { padding: 28px; border-radius: 18px; background: #141414; }
.lp-step-num { display: block; font: 800 44px/1 var(--font-head); color: var(--accent); }
.lp-step-grid h3 { font-size: var(--fs-22); margin: 16px 0 8px; }
.lp-step-grid p { margin: 0; color: var(--muted); }

/* Industries */
.lp-industry-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-industry { display: flex; align-items: center; gap: 16px; height: 100%; padding: 18px; border: 1px solid var(--border); border-radius: 14px; transition: border-color .2s ease; }
.lp-industry:hover, .lp-industry:focus-visible { border-color: var(--accent); }
.lp-industry-icon { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent); }
.lp-industry-icon .lp-icon { width: 22px; height: 22px; color: #fff; }
.lp-industry strong { display: block; }
.lp-industry strong + span { font-size: var(--fs-14); color: var(--ink-muted); }

/* Featured case study */
.lp-case-wrap { background: var(--surface-alt); }
.lp-case { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 24px; background: #141414; }
.lp-case img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.lp-case-body { padding: 40px; align-self: center; }
.lp-case-body h3 { font-size: var(--fs-28); margin: 12px 0; }
.lp-case-body > p { margin: 0 0 24px; color: var(--muted); }
.lp-case-stats { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 0 0 24px; }
.lp-case-stats dd { font: 800 32px/1 var(--font-head); color: var(--accent); }
.lp-case-stats dt { margin-top: 4px; font-size: var(--fs-14); color: var(--muted); }

/* Final CTA */
.lp-cta { padding: var(--section-y) var(--gutter); text-align: center; }
.lp-cta h2 { font-size: clamp(var(--fs-40), 5vw, var(--fs-56)); letter-spacing: -0.03em; margin: 0 0 12px; }
.lp-cta p { margin: 0 auto var(--s-4); color: var(--muted); font-size: var(--fs-18); }
.lp-cta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; }
.lp-cta .contact-call { margin-top: 0; }

@media (max-width: 1000px) {
  .lp-industry-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; grid-template-areas: "copy" "form" "stats"; gap: 32px; }
  .lp-results dl { grid-template-columns: repeat(2, 1fr); }
  .lp-step-grid, .lp-case { grid-template-columns: 1fr; }
  .lp-case img { min-height: 0; aspect-ratio: 3 / 2; }
}
@media (max-width: 640px) {
  .lp-form-card { padding: 24px 20px; }
  .lp-form label:nth-child(1), .lp-form label:nth-child(2) { grid-column: 1 / -1; }
  .lp-service-grid, .lp-industry-grid { grid-template-columns: 1fr; }
  .lp-case-body { padding: 28px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-service:hover, .lp-service:focus-visible { transform: none; }
}

/* === Services page – pillar cards ===
   Scoped to .tpl-services: .pillar-link, .pillar-points and .pillar-tick are also used on /resources,
   and .pillar-icon in the mega menu. The extra class also outranks the earlier rules, so no !important. */

/* Jump nav */
.tpl-services .jump-nav { background: var(--surface); border-bottom: 1px solid var(--border); }
.tpl-services .jump-nav a { border: 1px solid var(--border); background: var(--surface-alt); font-weight: 500; transition: background-color .2s, color .2s, border-color .2s; }
.tpl-services .jump-nav a:hover, .tpl-services .jump-nav a:focus-visible { background: var(--dark); border-color: var(--dark); color: #fff; }

/* Section */
.tpl-services .pillar-list { gap: 24px; padding: 64px var(--gutter) 96px; background: var(--surface); }
.tpl-services .pillar-list::before { content: "What we do"; grid-column: 1 / -1; font-size: var(--fs-14); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 4px; }

/* Card */
.tpl-services .pillar-row {
  position: relative; overflow: hidden; isolation: isolate; padding: 40px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tpl-services .pillar-row::after { content: ""; position: absolute; inset: 0 auto auto 0; height: 4px; width: 64px; background: var(--accent); border-radius: 0 0 4px 0; transition: width .35s ease; }
.tpl-services .pillar-row:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 20px 40px rgba(0, 0, 0, .08); }
.tpl-services .pillar-row:hover::after { width: 100%; }

/* Icon */
.tpl-services .pillar-main .pillar-icon { width: 56px; height: 56px; padding: 15px; margin-bottom: 28px; border: 0; border-radius: 16px; background: var(--accent); color: var(--dark); box-shadow: none; }
.tpl-services .pillar-row:hover .pillar-icon { background: var(--accent); color: var(--dark); }

/* Text */
.tpl-services .pillar-row h2 { font-size: 2rem; margin: 0 0 8px; }
.tpl-services .pillar-slogan { font-size: 1.125rem; line-height: 1.45; margin: 0 0 14px; max-width: 34ch; }
.tpl-services .pillar-main > p:not(.pillar-slogan) { max-width: 52ch; line-height: 1.6; }

/* Ticks in a grey box */
.tpl-services .pillar-points { margin: 4px 0 32px; padding: 20px 22px; border: 0; border-radius: 16px; background: var(--surface-alt); gap: 12px; }
.tpl-services .pillar-points li { font-weight: 500; color: var(--ink); }
.tpl-services .pillar-tick { background: var(--accent); color: var(--dark); border-radius: 50%; }

/* Text link with a round arrow, pinned to the bottom of the card */
.tpl-services .pillar-link,
.tpl-services .pillar-link:hover,
.tpl-services .pillar-link:focus-visible {
  margin-top: auto; display: inline-flex; align-items: center; gap: 12px; padding: 0;
  background: none; border: 0; box-shadow: none; color: var(--ink); font-weight: 600; text-decoration: none;
}
.tpl-services .pillar-link span { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--dark); color: #fff; transition: transform .25s ease, background-color .25s; }
.tpl-services .pillar-row:hover .pillar-link span { transform: translateX(4px); background: var(--accent); color: var(--dark); }

@media (max-width: 860px) {
  .tpl-services .pillar-list { grid-template-columns: 1fr; padding: 56px var(--gutter); gap: 16px; }
  .tpl-services .pillar-row { padding: 28px; border-radius: 20px; }
  .tpl-services .pillar-row h2 { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tpl-services .pillar-row, .tpl-services .pillar-row::after, .tpl-services .pillar-link span { transition: none; }
  .tpl-services .pillar-row:hover { transform: none; }
}

/* === Home: What we do as a growth story (.growth / .gc-*) === */
.growth {
  position: relative; overflow: hidden; padding: var(--section-y) var(--gutter);
  background: radial-gradient(55% 60% at 100% 100%, rgba(47, 191, 113, .16), transparent 70%), var(--surface-alt);
  color: var(--ink);
}
.growth-inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--s-8); align-items: center; }

/* Copy */
.gc-dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); }
.gc-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: gc-pulse 1.8s ease-out infinite; }
.growth h2 { margin: 0 0 var(--s-3); font: 700 clamp(40px, 5.2vw, 72px)/1.02 var(--font-head); letter-spacing: -.035em; color: var(--ink); max-width: none; }
.growth h2 span { color: var(--accent-ink); }
.gc-lede { margin: 0 0 var(--s-5); font-size: var(--fs-18); line-height: 1.6; color: var(--ink-muted); max-width: 52ch; }
.gc-steps { list-style: none; margin: 0 0 var(--s-5); padding: 0; border-top: 1px solid var(--border-strong); }
.gc-steps li { border-bottom: 1px solid var(--border-strong); }
.gc-steps a { display: flex; align-items: center; gap: var(--s-3); padding: 18px 4px; color: var(--ink); transition: transform .25s ease; }
.gc-num {
  flex: none; display: grid; place-items: center; min-width: 44px; height: 30px; padding: 0 10px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--accent); color: var(--accent-ink);
  font: 700 var(--fs-14)/1 var(--font-head); transition: background-color .25s ease, color .25s ease;
}
.gc-step-text { flex: 1; display: grid; gap: 2px; }
.gc-step-text strong { font-size: var(--fs-18); }
.gc-step-text span { font-size: 15px; color: var(--ink-muted); }
.gc-arrow { flex: none; font-size: 20px; color: var(--ink-muted); transition: transform .25s ease, color .25s ease; }
.gc-steps a:hover, .gc-steps a:focus-visible { transform: translateX(8px); }
.gc-steps a:hover .gc-num, .gc-steps a:focus-visible .gc-num { background: var(--accent); color: var(--dark); }
.gc-steps a:hover .gc-arrow, .gc-steps a:focus-visible .gc-arrow { transform: translateX(4px); color: var(--accent-ink); }
.gc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.gc-link { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.gc-link:hover { color: var(--accent-ink); }

/* Collage: 12 x 12 grid of 44px rows, layered images and cards */
.gc-collage { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 44px); gap: 12px; }
.gc-img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.gc-img-a { grid-column: 1 / 9; grid-row: 1 / 9; object-position: 35% 40%; box-shadow: 0 30px 60px -24px rgba(17, 17, 17, .35); }
.gc-img-b { grid-column: 6 / 13; grid-row: 7 / 13; object-position: 45% 35%; border: 4px solid var(--surface-alt); box-shadow: 0 24px 48px -24px rgba(17, 17, 17, .35); z-index: 1; }
.gc-card { position: relative; z-index: 2; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 40px -18px rgba(17, 17, 17, .28); }
.gc-stat { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.gc-stat strong { font: 700 clamp(30px, 3vw, 40px)/1 var(--font-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gc-stat span { font-weight: 600; }
.gc-stat small { font-size: 13px; color: var(--ink-muted); }
.gc-icon { width: 22px; height: 22px; margin-bottom: 6px; color: var(--accent-ink); }
.gc-stat--green { grid-column: 9 / 13; grid-row: 1 / 5; background: var(--accent); border-color: var(--accent); color: var(--dark); }
.gc-stat--green .gc-icon, .gc-stat--green small { color: var(--dark); }
.gc-stat--white { grid-column: 1 / 6; grid-row: 9 / 13; }
.gc-stat--white strong { color: var(--accent-ink); }
.gc-chart { grid-column: 8 / 13; grid-row: 5 / 8; display: flex; flex-direction: column; gap: 6px; }
.gc-chart-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-14); font-weight: 600; }
.gc-chart-head strong { font: 700 var(--fs-22)/1 var(--font-head); color: var(--accent-ink); }
.gc-spark { flex: 1; width: 100%; min-height: 0; }
.gc-chart small { font-size: 12px; color: var(--ink-muted); }
.gc-note { grid-column: 2 / 8; grid-row: 8 / 9; align-self: center; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 999px; }
.gc-note strong { display: block; font-size: var(--fs-14); }
.gc-note small { font-size: 12px; color: var(--ink-muted); }
.gc-badge {
  position: absolute; top: -18px; left: 24px; z-index: 3; display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: 0 12px 28px -14px rgba(17, 17, 17, .3); font-size: var(--fs-14); font-weight: 600;
}
.gc-ads { display: flex; }
.gc-ads i { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -6px; border: 2px solid var(--surface); border-radius: 50%; background: var(--dark); color: #fff; font: 700 10px/1 var(--font-body); font-style: normal; }
.gc-ads i:first-child { margin-left: 0; }

/* Motion: staggered fade-up, sparkline draw, counters and a gentle float (JS adds .js-anim, then .is-in) */
@keyframes gc-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }
@keyframes gc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.growth.js-anim .gc-collage > * { opacity: 0; translate: 0 24px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1); }
.growth.js-anim.is-in .gc-collage > * { opacity: 1; translate: 0 0; }
.growth.js-anim .gc-img-a { transition-delay: 0s; }
.growth.js-anim .gc-img-b { transition-delay: .12s; }
.growth.js-anim .gc-stat--green { transition-delay: .24s; }
.growth.js-anim .gc-chart { transition-delay: .36s; }
.growth.js-anim .gc-stat--white { transition-delay: .48s; }
.growth.js-anim .gc-note { transition-delay: .6s; }
.growth.js-anim .gc-badge { transition-delay: .72s; }
.growth.js-anim .gc-spark-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease .5s; }
.growth.js-anim.is-in .gc-spark-line { stroke-dashoffset: 0; }
.growth.is-in .gc-float { animation: gc-float 6s ease-in-out 1.2s infinite; }
.growth.is-in .gc-stat--white.gc-float { animation-duration: 7s; animation-delay: 1.8s; }
.growth.is-in .gc-note.gc-float { animation-duration: 5s; animation-delay: 2.4s; }

@media (max-width: 980px) {
  .growth-inner { grid-template-columns: 1fr; gap: var(--s-8); }
  .gc-collage { max-width: 600px; width: 100%; margin: var(--s-2) auto 0; }
}
@media (max-width: 560px) {
  .gc-collage { grid-template-rows: repeat(12, 30px); gap: 8px; }
  .gc-chart, .gc-badge { display: none; }
  .gc-card { padding: 12px 14px; }
  .gc-stat strong { font-size: 26px; }
  .gc-stat span { font-size: var(--fs-14); }
  .gc-stat small { font-size: 11px; }
  .gc-icon { width: 18px; height: 18px; margin-bottom: 2px; }
  .gc-stat--green { grid-column: 8 / 13; }
  /* Narrow portrait crop: shift the laptop photo so the face clears the stat card */
  .gc-img-a { object-position: 62% 40%; }
  .gc-stat--white { grid-column: 1 / 7; }
  .gc-note { grid-column: 1 / 9; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gc-dot::after, .growth.is-in .gc-float { animation: none; }
  .growth.js-anim .gc-collage > *, .growth.js-anim .gc-spark-line { opacity: 1; translate: none; stroke-dashoffset: 0; transition: none; }
  .gc-steps a, .gc-num, .gc-arrow { transition: none; }
  .gc-steps a:hover, .gc-steps a:focus-visible, .gc-steps a:hover .gc-arrow, .gc-steps a:focus-visible .gc-arrow { transform: none; }
}

/* Work cards – refined */
.work-grid { gap: var(--s-4) var(--s-3); }
.work-card-link {
  position: relative;
  box-shadow: 0 1px 2px rgba(17,17,17,.04);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s cubic-bezier(.2,.7,.2,1), border-color .3s;
}
.work-card-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.work-card-link:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 2px 4px rgba(17,17,17,.04), 0 16px 32px -12px rgba(17,17,17,.16);
}
.work-card-link:hover::after { transform: scaleX(1); }
.work-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.work-card-media { border-bottom: 1px solid var(--border); }
.work-card-media img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.work-card-link:hover .work-card-media img { transform: scale(1.04); }
.work-card-body { padding: var(--s-3) var(--s-3) 28px; }
.work-card-sector {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12px/1.4 var(--font-body); letter-spacing: .08em;
  color: var(--stat);
}
.work-card-sector::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.work-card-body h3 {
  font-size: var(--fs-22); line-height: 1.2; letter-spacing: -0.015em;
  margin: 10px 0 var(--s-3);
}
.work-card-body .text-link { display: inline-block; font-size: 15px; }
.work-card-body .text-link::after {
  content: "→"; display: inline-block; margin-left: 8px;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.work-card-link:hover .text-link::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .work-card-link, .work-card-link::after, .work-card-media img,
  .work-card-body .text-link::after { transition: none; }
  .work-card-link:hover, .work-card-link:hover .work-card-media img { transform: none; }
}