/* ==========================================================================
   Druff Interactive — druff.co.za
   Light theme. Loaded after main.css and overrides its colour decisions.

   The palette comes straight out of the 2026 co.za logo:
     ink    #1D1C26   cream #F1EDE6   lime #C8FF00

   Lime is near-white in luminance, so it never carries text on a light
   surface. It is reserved for the dark nav strip, the two dark bands and the
   off-canvas menu, where it has ink to sit against.
   ========================================================================== */

:root {
  --ink: #0A0F2E;        /* deep navy — the site's dark */
  --ink-70: rgba(10, 15, 46, .78);
  --ink-55: rgba(10, 15, 46, .64);
  --ink-40: rgba(10, 15, 46, .40);
  --ink-16: rgba(10, 15, 46, .16);
  --ink-10: rgba(10, 15, 46, .10);
  --cream: #F1EDE6;
  --lime: #C8FF00;
  --deep-lime: #80AB00;   /* the brand lime, only as dark as a light ground needs */
  --orange: #FE5D34;      /* the dot on the D, and the rocket it becomes */

  --white: #FFFFFF;
  --grey: #F4F3F1;      /* light section ground */
  --grey-2: #EDEBE7;    /* alternate band */
  --line: #E2E0DB;      /* hairline rules */

  /* remap the tokens main.css reasons about */
  --accent: #1D1C26;
  --dark: #0A0F2E;      /* overrides the shared token in main.css */
  --light: #FFFFFF;
  --page-bg: #FFFFFF;
  --hero-bg: #FFFFFF;
  --hero-heading: #1D1C26;
  --hero-meta: #1D1C26;
  --services-bg: #F4F3F1;
  --radius: 14px;
  --nav-h: 106px;
}
@media (max-width: 900px) { :root { --nav-h: 86px; } }

body { background: var(--white); color: var(--ink); }
/* no single-word last lines: browsers that know text-wrap: pretty avoid them,
   and main.js ties the last two words of every paragraph for the rest */
p, li, td, dd, summary, blockquote, figcaption, .sc-p { text-wrap: pretty; }
::selection { background: var(--lime); color: var(--ink); }

/* =========================================================
   HEADER — solid ink strip, real navigation
   ========================================================= */
.site-header {
  position: fixed;
  height: var(--nav-h);
  background: var(--ink);
  padding: 0 clamp(18px, 2.4vw, 34px);
  gap: 24px;
}
.site-header.is-solid,
.site-header.scheme-dark,
.site-header.on-light { background: var(--ink); height: var(--nav-h); }
.site-header.is-hidden { transform: translateY(-110%); }

.site-header .logo { width: clamp(206px, 20vw, 298px); flex: 0 0 auto; display: block; }
.site-header .logo img { width: 100%; height: auto; }
/* one mark for every state — the strip is always ink */
.site-header .logo .logo-light,
.site-header.scheme-dark .logo .logo-light,
.site-header.is-solid .logo .logo-light,
.site-header.on-light .logo .logo-light { display: block; }
.site-header .logo .logo-dark,
.site-header.scheme-dark .logo .logo-dark,
.site-header.is-solid .logo .logo-dark,
.site-header.on-light .logo .logo-dark { display: none; }
.site-header .logo.canvas-on img { display: none !important; }
.site-header .logo canvas { display: block; width: 100%; height: auto; }

/* inline nav */
.nav-inline { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); margin-left: auto; }
.nav-inline a {
  position: relative;
  font-size: .88rem; font-weight: 450; letter-spacing: -0.005em;
  color: rgba(241, 237, 230, .72);
  padding: 6px 0;
  transition: color .28s ease;
}
.nav-inline a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--lime);
  transform: scaleX(0); transform-origin: right;
  transition: transform .38s cubic-bezier(.215, .61, .355, 1);
}
.nav-inline a:hover { color: var(--cream); }
.nav-inline a:hover::after, .nav-inline a.current::after { transform: scaleX(1); transform-origin: left; }
.nav-inline a.current { color: var(--cream); }
@media (max-width: 1080px) { .nav-inline { display: none; } }

.header-right { gap: 18px; margin-left: 0; }
@media (max-width: 1080px) { .header-right { margin-left: auto; } }

/* Talk to Us — lime pill, the one place lime carries a control */
.site-header .btn-pill,
.site-header.scheme-dark .btn-pill,
.site-header.is-solid .btn-pill {
  background: var(--lime);
  border: 1px solid var(--lime);
  color: var(--ink);
  font-weight: 600; font-size: .88rem;
  padding: 13px 26px;
}
.site-header .btn-pill:hover,
.site-header.scheme-dark .btn-pill:hover,
.site-header.is-solid .btn-pill:hover {
  background: var(--cream); border-color: var(--cream); color: var(--ink);
}
@media (max-width: 520px) { .site-header .btn-pill { display: none; } }

.burger span,
.site-header.scheme-dark .burger span,
.site-header.is-solid .burger span,
.site-header.on-light .burger span { background: var(--cream); }
@media (min-width: 1081px) { .burger { display: none; } }

/* content clears the fixed strip */
.page-wrap { padding-top: var(--nav-h); }

/* =========================================================
   OFF-CANVAS MENU — full lime panel, ink type
   ========================================================= */
.ocm { background: var(--lime); }
.ocm-eyebrow { color: rgba(10, 15, 46, .55); }
.ocm nav ul li,
.ocm nav ul li:first-child { border-color: rgba(10, 15, 46, .22); }
.ocm nav ul a { color: var(--ink); font-weight: 600; }
.ocm nav ul a .mn { color: rgba(10, 15, 46, .45); }
.ocm nav ul a:hover .ml, .ocm nav ul li.current a .ml,
.ocm nav ul a:hover .mn, .ocm nav ul li.current a .mn { color: var(--ink); }
.ocm nav ul a:hover .ml { text-decoration: underline; text-underline-offset: 5px; }
.ocm-mail { color: var(--ink); border-color: rgba(10, 15, 46, .4); }
.ocm-mail:hover { color: var(--ink); border-color: var(--ink); }
.ocm-clocks .c-city { color: rgba(10, 15, 46, .55); }
.ocm-clocks .c-time { color: var(--ink); }
.ocm-close { background: var(--ink); }
.ocm-close svg { stroke: var(--lime); }

/* =========================================================
   HERO — ink ground, copy left, the Druff HQ queue right.
   The headline is plain markup and paints first; only the
   background and the queue panel move.
   ========================================================= */
.hero {
  min-height: min(calc(100svh - var(--nav-h)), 860px);
  background: var(--ink);
  color: var(--cream);
  padding: clamp(30px, 5vh, 70px) var(--pad-x) clamp(36px, 5vh, 74px);
  display: grid; grid-template-columns: 1fr; align-content: center; justify-items: stretch;
  position: relative;
  overflow: hidden;
}
.hero-inner {
  /* no 1600px cap: the homepage board runs full-bleed inside --pad-x, and the
     two heroes have to start on the same left edge as it */
  position: relative; z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(34px, 4vw, 76px);
}

/* --- background: the contour field over a fine grid ---------------------- */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hb-grid {
  position: absolute; inset: -10%;
  background-image:
    linear-gradient(rgba(241, 237, 230, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241, 237, 230, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 62% 45%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 62% 45%, #000 0%, transparent 78%);
}
.hb-glow {
  position: absolute; right: -4%; top: 50%;
  width: 68vw; height: 78vh; transform: translateY(-50%);
  background: radial-gradient(ellipse at center,
    rgba(200, 255, 0, .12) 0%, rgba(200, 255, 0, .04) 42%, rgba(200, 255, 0, 0) 72%);
  filter: blur(10px);
}

/* --- the still board -------------------------------------------------------
   The homepage runs a live montage behind its headline; these two heroes get
   the same idea holding still: a few pieces of work we have not shown on the
   homepage, sunk behind the Druff HQ panel. The panel's own frost blurs
   whatever sits under it, the well below keeps the copy column clear, and the
   whole board is dimmed so it reads as texture, not as a gallery.
   -------------------------------------------------------------------------- */
.hb-shots {
  /* full bleed, like the homepage board: pieces run behind the copy column on
     the left and the well below sinks them, rather than a hard mask cutting
     them off */
  position: absolute; inset: 0;
  opacity: .58;
}
.hb-shot {
  /* Only the HEIGHT is set. The width is whatever the picture's own proportions
     make it (width:auto on an absolutely positioned box shrink-wraps to the
     image), so there is no box for the image to be cropped against — no
     object-fit, no declared ratio that could disagree with the file. Each tile
     is anchored to the edge it sits nearest — --r and --b rather than --x and
     --y on the right and bottom — so a wide window can only ever move a piece
     inwards, never push it off the edge. */
  position: absolute;
  left: var(--x, auto); right: var(--r, auto);
  top: var(--y, auto); bottom: var(--b, auto);
  height: var(--h); width: auto;
  display: block; overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 34px 74px -30px rgba(0, 0, 0, .95);
}
.hb-shot img { height: 100%; width: auto; display: block; }
.hero-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    /* the well, as the homepage cuts it: the copy column sits in still ink */
    radial-gradient(ellipse 56% 82% at 20% 50%,
      rgba(10, 15, 46, .99) 0%, rgba(10, 15, 46, .96) 44%, rgba(10, 15, 46, 0) 80%),
    linear-gradient(90deg, rgba(10, 15, 46, .96) 0%, rgba(10, 15, 46, .72) 32%,
      rgba(10, 15, 46, 0) 54%),
    /* and the board sinks into the ink before it reaches the proof strip */
    linear-gradient(0deg, rgba(10, 15, 46, .94) 0%, rgba(10, 15, 46, .6) 13%,
      rgba(10, 15, 46, 0) 30%);
}
@media (max-width: 1080px) {
  /* the panel stacks under the copy here, so the board would only be clutter */
  .hb-shots { display: none; }
}

/* --- copy ---------------------------------------------------------------- */
.hero-copy { min-width: 0; }
.hero-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime);
  margin-bottom: clamp(18px, 2.4vh, 30px);
}
.hero-eyebrow::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 14px rgba(200, 255, 0, .8);
  flex: 0 0 auto;
}
.hero h1 {
  color: var(--cream);
  /* the homepage weight, one size down: bold sets wider, and the hero has to
     keep the proof strip above the fold */
  font-size: clamp(2.2rem, 4.6vw, 72px);
  line-height: .92;
  letter-spacing: -0.05em;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}
.hero-sub {
  color: rgba(241, 237, 230, .88);
  font-size: clamp(1rem, 1.15vw, 1.22rem);
  line-height: 1.55;
  max-width: 34em;
  margin-top: clamp(20px, 2.6vh, 32px);
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(22px, 3vh, 34px); }

/* --- proof strip --------------------------------------------------------- */
.proof-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 14px;
  margin: clamp(26px, 3.4vh, 40px) 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(241, 237, 230, .18);
  list-style: none;
}
.proof-strip li {
  position: relative;
  font-size: .84rem; line-height: 1.4;
  color: rgba(241, 237, 230, .82);
  padding-left: 20px;   /* dot sits 14px from the text on both sides */
}
.proof-strip li::before {
  content: ''; position: absolute; left: 0; top: .48em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
}
.page-light .proof-strip { border-top-color: var(--line); }
.page-light .proof-strip li { color: var(--ink-70); }

/* --- Druff HQ panel ------------------------------------------------------ */
.hero-vis { min-width: 0; }
.hq {
  /* heavy frost, but not opaque: the contours behind survive as a soft blurred
     wash — present enough to give the panel depth, far too diffuse to read as
     pattern behind the queue */
  background: rgba(10, 15, 46, .58);
  backdrop-filter: blur(26px) saturate(1.06);
  -webkit-backdrop-filter: blur(26px) saturate(1.06);
  border: 1px solid rgba(241, 237, 230, .16);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 40px 90px -46px rgba(0, 0, 0, .85);
}
.hq-head {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(241, 237, 230, .13);
  background: rgba(255, 255, 255, .04);
}
.hq-dots { display: flex; gap: 6px; }
.hq-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(241, 237, 230, .22); }
.hq-title {
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(241, 237, 230, .82);
  margin-right: auto;
}
.hq-live {
  display: flex; align-items: center; gap: 7px;
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lime);
}
.hq-live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
  animation: hq-pulse 2.4s ease-in-out infinite;
}
@keyframes hq-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

.hq-rows { list-style: none; margin: 0; padding: 6px 0; }
.hq-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  padding: 14px 20px 16px;
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1),
              max-height .45s ease;
  max-height: 90px;
}
.hq-row.is-entering { opacity: 0; transform: translateY(14px); }
.hq-row.is-leaving { opacity: 0; transform: translateY(-12px); max-height: 0; padding-top: 0; padding-bottom: 0; }
.hq-name {
  font-size: .93rem; line-height: 1.3;
  color: var(--cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hq-meta { display: flex; align-items: center; gap: 10px; justify-self: end; }
.hq-stage {
  font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  padding: 4px 11px; border-radius: 20px;
  white-space: nowrap;
  background: rgba(241, 237, 230, .10);
  border: 1px solid rgba(241, 237, 230, .18);
  color: rgba(241, 237, 230, .82);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.hq-row[data-stage="0"] .hq-track { visibility: hidden; }   /* queued: no bar */
.hq-row[data-stage="1"] .hq-stage { background: rgba(200, 255, 0, .13); border-color: rgba(200, 255, 0, .34); color: var(--lime); }
.hq-row[data-stage="2"] .hq-stage { background: rgba(200, 255, 0, .20); border-color: rgba(200, 255, 0, .48); color: var(--lime); }
.hq-row[data-stage="3"] .hq-stage { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.hq-sla {
  font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  color: rgba(241, 237, 230, .5);
  min-width: 26px; text-align: right;
}
.hq-track {
  grid-column: 1 / -1;
  height: 3px; border-radius: 3px;
  background: rgba(241, 237, 230, .12);
  overflow: hidden;
  margin-top: 4px;
}
.hq-track i {
  display: block; height: 100%; width: 100%;
  background: var(--lime);
  transform-origin: 0 50%;
  border-radius: 3px;
}
.hq-row.flash::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(200, 255, 0, .09);
  animation: hq-flash .7s ease-out forwards;
  pointer-events: none;
}
@keyframes hq-flash { to { opacity: 0; } }
.hq-row.is-done .hq-name { color: rgba(241, 237, 230, .55); }

.hq-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
  border-top: 1px solid rgba(241, 237, 230, .13);
  background: rgba(255, 255, 255, .04);
}
.hq-foot-l { font-size: .78rem; color: rgba(241, 237, 230, .68); }
.hq-foot-r { font-size: .95rem; font-weight: 600; color: var(--lime); letter-spacing: -0.01em; }

@media (max-width: 1080px) {
  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 34px; }
  .hero h1 { font-size: clamp(2.5rem, 10vw, 60px); }
  .hero-vis { max-width: 560px; }
}
@media (max-width: 640px) {
  .hq-name { font-size: .86rem; }
  .hq-row { padding: 12px 16px 14px; }
  .hq-head, .hq-foot { padding: 13px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hq-live i { animation: none; }
}

/* =========================================================
   HERO — LIGHT
   Same layout, same contour field, same Druff HQ panel; a cream
   ground instead of ink. The header strip stays dark above it.
   ========================================================= */
.hero {
  --con-core: 200 255 0;      /* the contour accent at the centre */
  --con-edge: 241 237 230;    /* and at the outermost ring */
  --con-rig: 200 255 0;       /* the pen anchors and handles */
  --con-alpha: .58;
  --con-alpha-min: .09;
}
.hero.hero-light {
  --con-core: 122 164 0;
  --con-edge: 29 28 38;
  --con-rig: 104 138 0;
  --con-alpha: .52;
  --con-alpha-min: .07;
  background: #F7F6F3;
  color: var(--ink);
}

/* the fine grid and the bloom invert */
.hero-light .hb-grid {
  background-image:
    linear-gradient(rgba(10, 15, 46, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 15, 46, .055) 1px, transparent 1px);
}
.hero-light .hb-glow {
  background: radial-gradient(ellipse at center,
    rgba(200, 255, 0, .16) 0%, rgba(200, 255, 0, .05) 42%, rgba(200, 255, 0, 0) 70%);
}
.hero-light.hero .hero-bg::after {
  background: radial-gradient(ellipse 44% 48% at 24% 50%,
    rgba(247, 246, 243, .94) 0%, rgba(247, 246, 243, .76) 46%, rgba(247, 246, 243, 0) 100%);
}

/* copy ------------------------------------------------------------------- */
.hero-light .hero-eyebrow { color: var(--ink); }
.hero-light .hero-eyebrow::before {
  background: var(--deep-lime);
  box-shadow: 0 0 12px rgba(128, 171, 0, .55);
}
.hero-light h1 { color: var(--ink); }
.hero-light .hero-sub { color: var(--ink-78, var(--ink-70)); }
.hero-light .btn-line {
  color: var(--ink);
  border-color: rgba(10, 15, 46, .3);
}
.hero-light .btn-line:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.hero-light .btn-ink:hover { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.hero-light .proof-strip { border-top-color: var(--line); }
.hero-light .proof-strip li { color: var(--ink-70); }
.hero-light .proof-strip li::before { background: var(--deep-lime); }

/* Druff HQ, as a white card ----------------------------------------------- */
.hero-light .hq {
  background: rgba(255, 255, 255, .86);
  border-color: rgba(10, 15, 46, .10);
  box-shadow: 0 34px 74px -40px rgba(10, 15, 46, .40);
}
.hero-light .hq-head,
.hero-light .hq-foot { background: rgba(10, 15, 46, .028); }
.hero-light .hq-head { border-bottom-color: rgba(10, 15, 46, .10); }
.hero-light .hq-foot { border-top-color: rgba(10, 15, 46, .10); }
.hero-light .hq-dots i { background: rgba(10, 15, 46, .16); }
.hero-light .hq-title { color: var(--ink); }
.hero-light .hq-live { color: var(--deep-lime); }
.hero-light .hq-live i { background: var(--deep-lime); }
.hero-light .hq-name { color: var(--ink); }
.hero-light .hq-sla { color: var(--ink-55); }
.hero-light .hq-track { background: rgba(10, 15, 46, .10); }
.hero-light .hq-track i { background: var(--deep-lime); }

.hero-light .hq-stage {
  background: rgba(10, 15, 46, .05);
  border-color: rgba(10, 15, 46, .14);
  color: var(--ink-70);
}
.hero-light .hq-row[data-stage="1"] .hq-stage {
  background: rgba(200, 255, 0, .30);
  border-color: rgba(128, 171, 0, .45);
  color: #4E6A00;
}
.hero-light .hq-row[data-stage="2"] .hq-stage {
  background: rgba(200, 255, 0, .55);
  border-color: rgba(128, 171, 0, .6);
  color: #3F5600;
}
.hero-light .hq-row[data-stage="3"] .hq-stage {
  background: var(--lime); border-color: var(--lime); color: var(--ink);
}
.hero-light .hq-row.flash::after { background: rgba(200, 255, 0, .16); }
.hero-light .hq-row.is-done .hq-name { color: var(--ink-55); }
.hero-light .hq-foot-l { color: var(--ink-70); }
.hero-light .hq-foot-r { color: var(--deep-lime); }

/* =========================================================
   Sticky mobile action bar
   ========================================================= */
.mbar { display: none; }
@media (max-width: 780px) {
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(10, 15, 46, .94);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(241, 237, 230, .14);
  }
  .mbar a {
    flex: 1 1 0; text-align: center;
    font-size: .9rem; font-weight: 600; letter-spacing: -0.01em;
    padding: 13px 10px; border-radius: 100px;
    text-decoration: none;
  }
  .mbar-primary { background: var(--lime); color: var(--ink); }
  .mbar-secondary { border: 1px solid rgba(241, 237, 230, .38); color: var(--cream); }
  body { padding-bottom: 74px; }
}

/* buttons — lime primary on the ink fold, cream outline beside it */
.btn-ink {
  display: inline-block;
  font-size: .95rem; font-weight: 600; letter-spacing: -0.01em;
  background: var(--lime); color: var(--ink);
  border: 1px solid var(--lime);
  border-radius: 100px; padding: 15px 34px;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.btn-ink:hover { background: var(--cream); border-color: var(--cream); transform: translateY(-2px); }
.btn-line {
  display: inline-block;
  font-size: .95rem; font-weight: 550; letter-spacing: -0.01em;
  border: 1px solid rgba(241, 237, 230, .42); color: var(--cream);
  border-radius: 100px; padding: 15px 34px;
  transition: border-color .3s ease, background .3s ease, color .3s ease, transform .3s ease;
}
.btn-line:hover { border-color: var(--cream); background: var(--cream); color: var(--ink); transform: translateY(-2px); }

/* the light-page variants keep the ink treatment */
.page-light .btn-ink { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.page-light .btn-ink:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.page-light .btn-line { border-color: rgba(10, 15, 46, .3); color: var(--ink); }
.page-light .btn-line:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* =========================================================
   MISSION CONTROL — light grey. Rocket in ink + deep lime.
   ========================================================= */
.services.mc { background: var(--grey); color: var(--ink); }
.mc-copy h2 { color: var(--ink); }
.mc-copy h2 strong span { color: var(--deep-lime); white-space: nowrap; }
.t-eyebrow {
  display: inline-block;
  background: var(--ink); color: var(--lime);
  padding: 6px 13px; border-radius: 20px;
  font-size: .7rem; letter-spacing: .12em;
}
.t-h { color: var(--ink); }
/* main.css sets this line to nowrap above 1250px, sized for the old, shorter
   sentence. The new copy is longer, so let it wrap and cap the measure. */
.t-p { color: var(--ink-70); white-space: normal; max-width: 34em; }
.t-h { max-width: 20em; }
.services.mc { height: 150vh; }
.t-stat .num { color: var(--ink); }
/* the stat suffix wears the marker rather than a second, darker green —
   one lime across the whole page, on a block where it needs contrast */
.t-stat .num em {
  color: var(--ink);
  background: var(--lime);
  font-style: normal;
  padding: 0 .1em .02em;
  margin-left: .02em;
  border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.t-stat .lbl { color: var(--ink-55); }
.services.mc .cta-underline { color: var(--ink); }
.lp-track { background: var(--ink-16); }
.lp-tick { background: var(--ink-16); }
.lp-tick span { color: var(--ink-40); }
.lp-tick.lit { background: var(--orange); }
.lp-tick.lit span { color: var(--orange); }
.lp-base { background: var(--ink); }

/* =========================================================
   GUARD RADAR — the one dark feature band
   ========================================================= */
.guard { background: var(--ink); color: var(--cream); }
/* the section label reads as a title in its own right, not a caption */
.g-eye {
  color: var(--lime);
  font-size: clamp(.86rem, 1.15vw, 1.08rem);
  font-weight: 700; letter-spacing: .14em;
  margin-bottom: clamp(14px, 1.8vh, 22px);
}
.g-lead { color: var(--cream); }
.g-sub { color: rgba(241, 237, 230, .55); }
.g-list { border-top: 1px solid rgba(241, 237, 230, .16); }
.g-item { border-bottom: 1px solid rgba(241, 237, 230, .16); }
.g-item .gn { color: rgba(241, 237, 230, .4); }
.g-item .gname { color: var(--cream); }
.g-item .gblip { background: rgba(241, 237, 230, .25); }
.g-item .gchips span { background: rgba(241, 237, 230, .1); color: rgba(241, 237, 230, .85); }
.g-item.on .gn { color: var(--lime); }
.g-item.on .gblip { background: var(--lime); box-shadow: 0 0 12px rgba(200, 255, 0, .8); }
/* the sweep passing a contact lights the blip and its row */
.g-item .gblip { transition: background .25s ease, box-shadow .3s ease, transform .35s var(--ease-out, ease); }
.g-item.ping .gblip {
  background: var(--lime);
  box-shadow: 0 0 16px rgba(200, 255, 0, .95);
  transform: scale(1.9);
}
.g-item.ping .gn { color: var(--lime); }
.g-item.ping { border-bottom-color: rgba(200, 255, 0, .34); }

/* =========================================================
   STATEMENT
   ========================================================= */
.statement { background: var(--grey); }
.statement h2 { color: var(--ink); letter-spacing: -0.045em; }

/* =========================================================
   WORK LIST
   ========================================================= */
.worklist { background: var(--white); }
.worklist .eyebrow, .otherwork .eyebrow-lg { color: var(--ink-55); }
.postlist-item { border-top-color: var(--line); }
.postlist-item:last-child { border-bottom-color: var(--line); }
.postlist-item h2, .postlist-item h3 { color: var(--ink-40); }
.postlist-item .arrow svg { fill: var(--ink-40); }
.postlist-item:hover { background: var(--ink); }
.postlist-item:hover h2, .postlist-item:hover h3 { color: var(--cream); }
.postlist-item:hover .arrow svg { fill: var(--lime); }
.follow-img { box-shadow: 0 20px 60px rgba(10, 15, 46, .22); }

/* =========================================================
   CLIENT LOGO BAND — light, ink logos
   ========================================================= */
.logo-band { background: var(--ink); }
.logo-band .eyebrow { color: var(--lime); }
.logo-band-grid img { filter: brightness(0) invert(1); opacity: .8; }
.logo-band-grid img:hover { opacity: 1; }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
/* The druff.io client-stories slider, moved onto the lime palette. Bright lime
   as small text on a light ground fails contrast badly, so the accent lands
   two ways: as a filled shape at display sizes (the counter and the quote
   glyph, both carrying an ink stroke so the edge holds), and as the ink-on-lime
   marker used elsewhere on the site wherever the type is small. */
/* the slider sits on the site's dark, between the FAQ and the closer */
.testimonials { background: var(--ink) !important; color: var(--cream); }
/* one line on white between the logo wall and the client stories */
.band-line { background: #FFFFFF; color: var(--ink); padding: clamp(30px, 4vw, 52px) var(--pad-x); text-align: center; }
.band-line p { margin: 0 auto; max-width: 40em; font-size: clamp(1.05rem, 1.7vw, 1.55rem); line-height: 1.3; letter-spacing: -.015em; font-weight: 500; }
.t-texture::before {
  background:
    radial-gradient(40vw 40vw at 86% 2%, rgba(200, 255, 0, .12), transparent 62%),
    radial-gradient(34vw 34vw at 0% 98%, rgba(241, 237, 230, .05), transparent 62%);
}
.t-rail .eyebrow { color: rgba(241, 237, 230, .6); opacity: 1; }
.t-index .cur { color: var(--lime); -webkit-text-stroke: 0; }
.t-index .sep { background: rgba(241, 237, 230, .25); }
.t-index .tot { color: rgba(241, 237, 230, .5); opacity: 1; }
.t-nav button { border-color: rgba(241, 237, 230, .25); color: var(--cream); }
.t-nav button:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.t-glyph { color: var(--lime); -webkit-text-stroke: 0; }
.tslide blockquote p { color: var(--cream); }
.tslide .who { border-top-color: rgba(241, 237, 230, .18); }
.tslide .who .name { color: var(--cream); }
.tslide .who .org {
  color: var(--ink); background: var(--lime);
  padding: .22em .5em .26em; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.tslide .who .org:empty { background: none; padding: 0; }
.t-progress { background: rgba(241, 237, 230, .15); }
.t-progress .t-bar { background: var(--lime); }

/* =========================================================
   CONTACT + FOOTER — the closing dark band
   ========================================================= */
/* The contact block is capped at 1600px, so on a wide screen the page behind
   it showed either side of the navy — a pale band down both edges of the
   footer. The colour now lives on a full-bleed shell and the section keeps
   only the width cap, so the navy runs edge to edge into the footer below it
   whatever the viewport is doing. */
.contact-shell { background: var(--ink); }
.contact { background: transparent !important; color: var(--cream); }
.contact .eyebrow { color: var(--lime); }
.contact-cta { color: var(--cream); }
.cform input, .cform textarea {
  background: rgba(241, 237, 230, .06);
  border-color: rgba(241, 237, 230, .22);
  color: var(--cream);
}
.cform input::placeholder, .cform textarea::placeholder { color: rgba(241, 237, 230, .45); }
.cform input:focus, .cform textarea:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(200, 255, 0, .16);
  background: rgba(241, 237, 230, .09);
}
.cform button { background: var(--lime); color: var(--ink); font-weight: 600; }
.cform button:hover { background: var(--cream); color: var(--ink); }
.cform .form-note.ok { color: var(--lime); }
.cform .form-note.err { color: #FFB4A2; }
.cta-reveal { color: var(--cream); }
.s-ico { border-color: rgba(241, 237, 230, .3); color: var(--cream); }
.s-ico:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.contact-address { color: rgba(241, 237, 230, .45); }
.d-anim-card { background: transparent; }

.site-footer { background: var(--ink); }
.site-footer p { color: rgba(241, 237, 230, .45); }
.site-footer .foot-nav a { color: rgba(241, 237, 230, .55); }
.site-footer .foot-nav a:hover { color: var(--lime); }

/* =========================================================
   INTERIOR PAGES
   ========================================================= */
body.page-light { background: var(--white); }
.case-intro { padding-top: clamp(70px, 8vw, 130px); }
.case-intro .eyebrow { color: var(--ink-55); }
.case-intro h1 { color: var(--ink); letter-spacing: -0.045em; }
.case-meta .eyebrow { color: var(--ink-55); }
.case-meta h4 { color: var(--ink); }
.case-meta .divider { border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.grow figure img { border-radius: var(--radius); background: var(--grey); }
/* One tall piece with no partner: a half-width figure in a two-column row
   leaves an obvious empty column, so it gets a centred row of its own with a
   sane cap instead of running the full 1600px and towering over the page. */
.grow.cols-solo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.grow.cols-solo figure { width: 100%; max-width: 660px; }
.grow figure figcaption { color: var(--ink-55); }

.filters a { color: var(--ink); }
.archive-item p { color: var(--ink-55); }
.view-tip { background: rgba(10, 15, 46, .8); color: var(--cream); }
.share-rail .share-toggle { background: var(--ink); }
.share-rail .share-toggle svg { fill: var(--lime); }
.share-rail .share-items a { background: var(--ink); color: var(--cream); }
.share-rail .share-items a:hover { background: var(--lime); color: var(--ink); }

.nf-wrap h1 { color: var(--ink); }
.skip-link { background: var(--ink); color: var(--lime); }

/* the ins-article variant keeps sentence-case headings */
.ins-article .case-intro h1 { text-transform: none; letter-spacing: -0.035em; }


/* ==========================================================================
   THE CLOSER — the queue, clearing
   The panel beside the final form. A brief runs, flips over as finished work,
   lifts away, and the next one moves up. It replaces the particle mark, which
   belongs to druff.io.
   ========================================================================== */
.qbox {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: 620px; height: 100%;
  padding: clamp(20px, 2vw, 30px);
  border: 1px solid rgba(241, 237, 230, .14);
  border-radius: 20px;
  background:
    radial-gradient(115% 85% at 100% 0%, rgba(200, 255, 0, .16), transparent 60%),
    rgba(255, 255, 255, .025);
  overflow: hidden;
}
.q-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid rgba(241, 237, 230, .12);
}
.q-live {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--cream);
}
.q-live i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 0 rgba(200, 255, 0, .5);
  animation: q-pulse 2.4s ease-out infinite;
}
@keyframes q-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200, 255, 0, .45); }
  70%  { box-shadow: 0 0 0 9px rgba(200, 255, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 255, 0, 0); }
}
.q-note { font-size: .78rem; color: rgba(241, 237, 230, .45); }

/* the card that turns over */
.q-stage { perspective: 1400px; height: clamp(196px, 20vw, 264px); flex: none; }
.q-card {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.72, 0, .18, 1),
              opacity .5s ease;
}
.q-card.is-done { transform: rotateX(180deg); }
.q-card.is-out  { transform: rotateX(180deg) translateY(-30px) scale(.955); opacity: 0; }
/* the next brief arrives rather than blinking into place */
.q-card.is-fresh { transform: translateY(16px); opacity: 0; }
/* Both faces need real separation in z as well as backface-visibility: with
   the two sitting on the same plane Chrome picks a winner by paint order, and
   the brief showed through the flip mirrored. A pixel apart settles it. */
.q-face {
  position: absolute; inset: 0;
  border-radius: 15px; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.q-brief { transform: translateZ(1px); }
.q-done  { transform: rotateX(180deg) translateZ(1px); }
.q-brief {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(18px, 2vw, 26px);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(241, 237, 230, .16);
}
.q-lab {
  margin: 0; font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--lime);
}
.q-txt {
  margin: 14px 0 0; max-width: 15em;
  font-size: clamp(1.05rem, 1.6vw, 1.6rem); line-height: 1.22;
  letter-spacing: -.02em; font-weight: 500; color: var(--cream);
}
.q-bar {
  height: 3px; margin-top: 22px; border-radius: 3px;
  background: rgba(241, 237, 230, .14); overflow: hidden;
}
.q-bar i {
  display: block; height: 100%; background: var(--lime);
  transform: scaleX(0); transform-origin: left center;
}
.q-done { background: #080E2E; }
.q-done img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* this one is a rotated tablet: centre-cropping cuts it through the middle */
.q-done img[src*="q-francisherd"] { object-position: 50% 26%; }
.q-tag {
  position: absolute; left: 16px; bottom: 16px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--lime); color: var(--ink);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

/* what is behind it */
.q-nextlab {
  margin: clamp(22px, 3vw, 34px) 0 0;
  color: rgba(241, 237, 230, .4);
}
.q-next {
  list-style: none; margin: 14px 0 0; padding: 0;
  flex: 1; min-height: 0;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.q-next li {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0;
  border-top: 1px solid rgba(241, 237, 230, .09);
  font-size: .92rem; color: rgba(241, 237, 230, .55);
  transition: opacity .45s ease;
}
.q-next li::before {
  content: ''; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(241, 237, 230, .22);
}
.q-next li.q-fade { opacity: 0; }
.q-next li.q-new  { animation: q-rise .55s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes q-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}


/* what has already gone out — the strip fills as each card completes, so the
   panel shows both ends of the loop rather than only the waiting half */
.q-out {
  margin-top: clamp(18px, 2.4vw, 28px); padding-top: 18px;
  border-top: 1px solid rgba(241, 237, 230, .12);
}
.q-out-row {
  display: flex; gap: 10px; margin-top: 13px;
  overflow: hidden;
}
.q-out-row img {
  flex: none; width: clamp(72px, 8vw, 96px); aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: 9px; display: block;
  background: #080E2E;
}
.q-out-row img.q-slid { animation: q-slide .6s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes q-slide {
  from { opacity: 0; transform: translateX(-16px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1000px) {
  .qbox { min-height: 0; }
  .q-stage { height: clamp(190px, 40vw, 250px); }
  .q-next li:nth-child(n+4) { display: none; }
  .q-out-row img:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .q-card, .q-next, .q-next li { transition: none !important; }
  .q-live i, .q-next li.q-new, .q-out-row img.q-slid { animation: none !important; }
}

/* ---------- the work index: close the band before the list ----------
   The case-study intro spacing is built for a full-height two-column
   introduction; this page's intro is four lines, so the standard padding
   left about 200px of empty page between the copy and the first heading. */
.insights-land .case-intro { padding-bottom: clamp(28px, 3.2vw, 52px); }
.insights-land .worklist { padding-top: clamp(24px, 2.8vw, 44px); }