/* ─────────────────────────────────────────────────────────────
   Sphere Sync Connect

   Repalleted 5 Sep 2026 against the client's actual logo, which arrived
   after the first build. The teal is gone — it was ours, not theirs.

   Colours are SAMPLED from the logo file, not eyeballed: the dominant red
   is #C70403 across ~8,400px, the orange #FB6704, the amber #FC9805, and
   "CONNECT" is grey #888787. The ground moved from a cool navy to a warm
   near-black, because a warm identity on a cool ground fights itself.

   Contrast, measured not assumed:
     #C70403 on paper #F7F4EF ......... 5.07:1   links and accents on light
     #FB6704 on ink #15100F ........... 6.33:1   accents on dark
     #FC9805 on ink ................... 8.36:1   numerals, eyebrows
     #5A4F4C on paper ................. 7.20:1   body copy
     #B0A5A2 on ink ................... 7.86:1   body copy on dark

   The one thing the logo dictates rather than suggests: its "CONNECT" is
   set in that mid grey, which is 1.9:1 on our ink and vanishes. So the
   header and footer are LIGHT surfaces. Dark is reserved for the hero,
   the page heads, the why band and the closing band.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Ground — warm, to sit under a warm identity */
  --paper:      #F7F4EF;
  --paper-2:    #FFFDFA;
  --paper-3:    #EFEAE2;
  --line:       #E4DCD1;
  --line-2:     #D5C9B9;

  /* Ink */
  --ink:        #15100F;
  --ink-2:      #1F1817;
  --ink-3:      #2C2220;
  --text:       #1C1513;
  --text-2:     #5A4F4C;
  --text-3:     #8C817E;
  --on-dark:    #F2EBE8;
  --on-dark-2:  #B0A5A2;

  /* Brand — sampled from logo.png */
  --acc:        #C70403;
  --acc-d:      #A80603;
  --acc-l:      #FB6704;
  --acc-tint:   rgba(199, 4, 3, .06);
  --acc-rgb:    199, 4, 3;
  --acc-l-rgb:  251, 103, 4;
  --amber:      #FC9805;
  --amber-rgb:  252, 152, 5;

  /* Type */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --t-xs:   .78rem;
  --t-sm:   clamp(.94rem, .91rem + .14vw, 1.02rem);
  --t-base: clamp(1rem, .96rem + .2vw, 1.1rem);
  --t-lede: clamp(1.08rem, 1rem + .38vw, 1.28rem);
  --t-h3:   clamp(1.08rem, 1rem + .38vw, 1.28rem);
  --t-h2:   clamp(1.85rem, 1.35rem + 2.1vw, 3.1rem);
  /* Retuned 6 Sep 2026, after title case widened every heading.

     Chased through three wrong diagnoses before this, all recorded so
     nobody repeats them: it is not the clamp FLOOR (the preferred term
     was winning), it is not `text-wrap: balance` (line counts are
     identical with it off), and shrinking the font alone could not work
     while `max-width` was set in `ch`, because ch scales with the font
     and the cap shrank in step with the text.

     What it actually was: the hero's left column is 610px at 1440 while
     "Managed From The UK." needs 643px, so the last two characters fell
     to a line of their own. Verified by measuring rendered line boxes at
     nine widths — the check is a stranded line under a third of the
     widest, not "any wrap", because a headline wrapping naturally on a
     phone is fine and only an orphan looks broken. */
  --t-h1:   clamp(1.85rem, 1.2rem + 3.2vw, 4rem);

  /* Rhythm — three steps, used consistently, not arbitrary values */
  --gutter:  clamp(1.15rem, .85rem + 1.4vw, 2.5rem);
  --wrap:    76rem;
  --sec:     clamp(3.75rem, 2.6rem + 5vw, 7.5rem);
  --gap:     clamp(1.4rem, 1rem + 1.6vw, 2.75rem);

  --r:    10px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* Depth: base -> elevated -> floating. Shadows are ink-tinted, and the
     ink is now warm, so they warm with it. */
  --sh-1: 0 1px 2px rgba(21, 16, 15, .05), 0 2px 8px rgba(21, 16, 15, .04);
  --sh-2: 0 2px 4px rgba(21, 16, 15, .05), 0 10px 26px rgba(21, 16, 15, .08);
  --sh-3: 0 4px 8px rgba(21, 16, 15, .07), 0 22px 54px rgba(21, 16, 15, .18);

  --fast: 140ms;
  --norm: 260ms;
  --slow: 620ms;
  --ease: cubic-bezier(.2, .7, .25, 1);
  --ease-spring: cubic-bezier(.16, 1, .3, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'opsz' 96, 'SOFT' 0, 'WONK' 0;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); letter-spacing: -.038em; }
h2 { font-size: var(--t-h2); letter-spacing: -.034em; }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.02em; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 2.5px solid var(--acc);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-dark :focus-visible, .bar :focus-visible, .band :focus-visible,
.why :focus-visible, .foot :focus-visible, .pagehead :focus-visible,
.hero :focus-visible, .offer-lead:focus-visible { outline-color: var(--acc-l); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--on-dark);
  padding: .8rem 1.2rem; border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip:focus { left: 0; }

.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Type helpers ────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--body);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--acc);
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before {
  content: ''; width: 1.75rem; height: 1px; flex: none;
  background: currentColor; opacity: .5;
}
.eyebrow.on-dark { color: var(--acc-l); }

h1 em, h2 em { font-style: normal; color: var(--acc); }
.on-dark h1 em, .hero h1 em, .pagehead h1 em, .band h2 em, .why h2 em { color: var(--acc-l); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .78rem 1.3rem;
  border-radius: 999px;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent;
  transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), color var(--fast) var(--ease),
              box-shadow var(--norm) var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn.lg { padding: .95rem 1.6rem; font-size: var(--t-base); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-o { background: var(--acc); color: #fff; box-shadow: 0 4px 14px rgba(var(--acc-rgb), .28); }
.btn-o:hover { background: var(--acc-d); box-shadow: 0 8px 24px rgba(var(--acc-rgb), .34); }

.btn-dark { background: var(--ink); color: var(--on-dark); box-shadow: var(--sh-1); }
.btn-dark:hover { background: var(--ink-3); box-shadow: var(--sh-2); }

.btn-ghost { border-color: rgba(255, 255, 255, .28); color: var(--on-dark); }
.btn-ghost:hover { border-color: var(--acc-l); color: #fff; background: rgba(var(--acc-l-rgb), .12); }

/* ── Header ──────────────────────────────────────────────────
   Light, because the logo requires it — see the note at the top. A
   hairline rule rather than a shadow, so it reads as a sheet of paper
   the page slides under rather than as a floating bar. */
.bar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 253, 250, .95);
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(12px)) {
  .bar { background: rgba(255, 253, 250, .82); backdrop-filter: blur(14px) saturate(1.4); }
}
.bar-in {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.5rem;
}

.brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.brand img { height: 2.5rem; width: auto; }
@media (max-width: 400px) { .brand img { height: 2.1rem; } }

.links { display: none; margin-left: auto; align-items: center; gap: .25rem; }
.links > a, .sub-top {
  display: block; padding: .55rem .8rem; border-radius: var(--r);
  font-size: .93rem; font-weight: 500; text-decoration: none;
  color: var(--text-2);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.links > a:hover, .sub-top:hover { color: var(--acc); background: var(--acc-tint); }
.links > a.on, .sub-top.on { color: var(--text); font-weight: 600; }
/* A straight rule, not an inset shadow — the shadow followed the pill's
   border-radius and rendered as a shallow arc under the word. */
.links > a { position: relative; }
.links > a.on::after {
  content: ''; position: absolute; left: .8rem; right: .8rem; bottom: .28rem;
  height: 2px; border-radius: 2px; background: var(--acc);
}

.sub { position: relative; }
.sub-top { display: flex; align-items: center; gap: .4rem; }
.caret {
  width: .42rem; height: .42rem; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--fast) var(--ease);
}
.sub:hover .caret, .sub.open .caret { transform: rotate(225deg) translate(-2px, -2px); }
.sub-menu {
  position: absolute; top: calc(100% + .5rem); left: 50%;
  transform: translate(-50%, -6px);
  min-width: 17rem; padding: .5rem;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--fast) var(--ease), transform var(--norm) var(--ease), visibility var(--fast);
}
.sub:hover .sub-menu, .sub:focus-within .sub-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.sub-menu a {
  display: block; padding: .6rem .8rem; border-radius: var(--r);
  font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--text-2);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.sub-menu a:hover { color: var(--acc); background: var(--acc-tint); }

.bar-cta { display: none; align-items: center; gap: .75rem; }
.tel {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .93rem; font-weight: 600; text-decoration: none; color: var(--text);
}
.tel svg { width: 1rem; height: 1rem; color: var(--acc); }

.burger { margin-left: auto; display: grid; gap: 5px; padding: .6rem .4rem; }
.burger span {
  display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--text);
  transition: transform var(--norm) var(--ease), opacity var(--fast) var(--ease);
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sheet {
  position: sticky; top: 4.5rem; z-index: 55;
  background: var(--paper-2); color: var(--text);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-2);
  padding: .8rem var(--gutter) 1.4rem;
  max-height: calc(100dvh - 4.5rem); overflow-y: auto;
}
.sheet a {
  display: block; padding: .72rem .2rem; text-decoration: none;
  font-size: 1rem; font-weight: 500; color: var(--text);
  border-bottom: 1px solid var(--line);
}
.sheet a:hover { color: var(--acc); }
.sheet-h {
  margin-top: 1.1rem; padding-bottom: .3rem;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acc);
}
.sheet-cta {
  display: flex !important; align-items: center; gap: .55rem;
  margin-top: 1.1rem; border: 0 !important;
  background: var(--acc); color: #fff !important;
  border-radius: 999px; justify-content: center; font-weight: 600 !important;
  padding: .85rem 1.2rem !important;
}
.sheet-cta svg { width: 1.05rem; height: 1.05rem; }

@media (min-width: 940px) {
  .links, .bar-cta { display: flex; }
  .burger, .sheet { display: none !important; }
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: var(--on-dark);
  padding-block: clamp(3.25rem, 2rem + 6vw, 6.5rem) clamp(3.5rem, 2.2rem + 6vw, 7rem);
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 56% at 6% 6%, rgba(var(--amber-rgb), .16), transparent 62%),
    radial-gradient(72% 76% at 96% 96%, rgba(var(--acc-rgb), .52), transparent 64%),
    radial-gradient(48% 42% at 76% 4%, rgba(var(--acc-l-rgb), .18), transparent 66%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: .30; mix-blend-mode: overlay;
}
.hero-in {
  display: grid; gap: var(--gap); align-items: center;
  grid-template-areas: 'lead' 'art' 'foot';
}
.hero-lead { grid-area: lead; }
.hero-art  { grid-area: art; }
.hero-foot { grid-area: foot; }
.hero-lead > * + * { margin-top: 1.25rem; }
/* 15ch until 6 Sep 2026, when title case made every heading wider and
   "Managed From The UK." wrapped off the end of its own line — at 1440
   as well as on a phone, so this was never a mobile problem. Diagnosed
   by measuring the rendered line boxes: the h1 box was pinned at 15ch
   while the container had room to spare. Two earlier attempts to fix it
   by shrinking the font could not work, because ch scales with the font
   and the constraint shrank in step with the text. */
.hero h1 { max-width: 18ch; }
.hero-sub { font-size: var(--t-lede); color: var(--on-dark-2); max-width: 46ch; line-height: 1.6; }
.hero-act { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-chips {
  display: flex; flex-wrap: wrap; gap: .5rem .5rem;
  margin-top: 1.75rem;
}
.hero-chips li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  font-size: .84rem; font-weight: 500; color: var(--on-dark-2);
}
.hero-chips svg { width: 1rem; height: 1rem; color: var(--acc-l); flex: none; }

/* Hero photograph. Layered rather than dropped in flat: a gradient scrim
   toward the ink ground so the panel joins the section instead of sitting
   on it, a teal treatment layer in multiply so it belongs to the palette,
   and the sphere motif over the top so the brand mark still reads. */
.hero-art {
  position: relative; isolation: isolate; margin-top: 2rem;
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-3); color: var(--acc-l);
}
.hero-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 60% 40%; }
.hero-art::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(200deg, rgba(21, 16, 15, 0) 38%, rgba(21, 16, 15, .72) 100%);
}
.hero-art::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Kept deliberately light. At the .40 that suited the old teal, this red
     tints skin pink — the treatment layer has to fall as the accent gets
     more saturated, not stay put. */
  background: linear-gradient(150deg, rgba(var(--amber-rgb), .16), rgba(21, 16, 15, .18) 62%);
  mix-blend-mode: multiply;
}
.hero-art-motif {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  width: 62%; height: auto; margin: 0 0 -14% -8%;
  opacity: .5; pointer-events: none;
}

@media (min-width: 900px) {
  .hero-in {
    /* 1.1/.9 until 6 Sep 2026. The extra 0.05 buys the headline the ~30px
       it was short of at 1440 without visibly shrinking the photograph. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    grid-template-areas: 'lead art' 'foot art';
    align-items: start; row-gap: 2rem;
  }
  .hero-art { margin-top: 0; align-self: center; }
  .hero-photo { aspect-ratio: 4 / 3; }
}

/* ── Service page media band ─────────────────────────────────── */
.band-media { padding-top: var(--sec); }
.band-media figure {
  position: relative; isolation: isolate;
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2);
}
.band-media figure::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--amber-rgb), .10), rgba(21, 16, 15, .20));
  mix-blend-mode: multiply; pointer-events: none;
}
.band-photo { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 42%; }
@media (max-width: 640px) { .band-photo { aspect-ratio: 4 / 3; } }

/* ── Page head (inner pages) ─────────────────────────────────── */
.pagehead {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: var(--on-dark);
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(3rem, 2rem + 4.5vw, 5.5rem);
}
.pagehead::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(62% 72% at 96% 100%, rgba(var(--acc-rgb), .54), transparent 62%),
    radial-gradient(48% 52% at 4% 0%, rgba(var(--acc-l-rgb), .18), transparent 64%);
}
.pagehead::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: .28; mix-blend-mode: overlay;
}
.pagehead h1 { max-width: 20ch; margin-top: 1.1rem; }
.pagehead-sub {
  margin-top: 1.15rem; max-width: 52ch;
  font-size: var(--t-lede); color: var(--on-dark-2); line-height: 1.6;
}
.pagehead .hero-act { margin-top: 1.75rem; }

.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: var(--t-xs); color: var(--on-dark-2);
  margin-bottom: 1.5rem;
}
.crumb a { text-decoration: none; color: var(--on-dark-2); }
.crumb a:hover { color: var(--acc-l); text-decoration: underline; text-underline-offset: 3px; }
.crumb span[aria-hidden] { opacity: .4; }
.crumb > span:last-child { color: var(--on-dark); }

/* ── Sections ────────────────────────────────────────────────── */
.sec { padding-block: var(--sec); }
.alt-sec { background: var(--paper-3); padding-block: var(--sec); }

.sec-head { max-width: 46rem; }
.sec-head h2 { margin-top: .9rem; }
/* :not(.eyebrow) for the same reason as the .why rule below — this
   selector (0-1-1) outranks .eyebrow (0-1-0), so without it every eyebrow
   that sits inside a .sec-head renders body-grey instead of accent. That
   was true site-wide from the first build and only showed up once the
   accent changed to something that draws the eye. */
.sec-head p:not(.eyebrow) { margin-top: 1rem; max-width: 58ch; color: var(--text-2); font-size: var(--t-sm); }
.sec-head + * { margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }

/* Intro: an asymmetric two-column so the statement and the argument
   are visibly different weights, rather than one long column. */
.sec-intro { padding-bottom: 0; }
.intro h2 { margin-top: 1rem; max-width: 18ch; }
.intro-body { margin-top: 1.75rem; }
.intro-body > p + p { margin-top: 1rem; }
.intro-body p { color: var(--text-2); }
.intro-body .lede { font-size: var(--t-lede); color: var(--text); line-height: 1.62; }
.intro-cta { margin-top: 1.75rem !important; }

@media (min-width: 900px) {
  .sec-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--gap); align-items: start; }
  .intro { position: sticky; top: 6rem; }
  .intro-body { margin-top: 0; }
}

/* ── Services: lead panel + ruled index ──────────────────────
   Never six identical cards. One of these services is what most
   clients arrive for, and the layout has to say so.             */
.offer { display: grid; gap: var(--gap); }
@media (min-width: 900px) {
  .offer { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: stretch; }
}
.offer > * { min-width: 0; }

.offer-lead {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: clamp(340px, 44vw, 500px);
  padding: clamp(1.35rem, 1rem + 1.5vw, 2.25rem);
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--ink); color: var(--on-dark);
  text-decoration: none; box-shadow: var(--sh-3);
  transition: transform var(--norm) var(--ease), box-shadow var(--norm) var(--ease);
}
.offer-lead-media { position: absolute; inset: 0; z-index: -2; }
.offer-lead-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  transition: transform var(--slow) var(--ease-spring);
}
.offer-lead-media .artpanel { height: 100%; aspect-ratio: auto; }
.offer-lead::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(21, 16, 15, .95) 14%, rgba(21, 16, 15, .60) 54%, rgba(21, 16, 15, .22) 100%),
    radial-gradient(88% 68% at 0% 100%, rgba(var(--acc-rgb), .48), transparent 64%);
}
.offer-lead:hover { transform: translateY(-3px); box-shadow: var(--sh-3), 0 0 0 1.5px var(--acc-l); }
.offer-lead:hover .offer-lead-media img { transform: scale(1.04); }
.offer-lead-body { display: flex; flex-direction: column; min-width: 0; }

.offer-n {
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  letter-spacing: .04em; color: var(--acc-l); flex: none;
}
.offer-kicker {
  margin-top: .4rem;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--on-dark-2);
}
.offer-lead-name {
  margin-top: .55rem;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.7rem);
  line-height: 1.03; letter-spacing: -.035em;
}
.offer-lead-blurb { margin-top: .75rem; max-width: 40ch; font-size: var(--t-sm); color: var(--on-dark-2); }
.offer-go {
  margin-top: 1.2rem;
  font-family: var(--display); font-size: .92rem; font-weight: 700; color: var(--acc-l);
}
.offer-go span { display: inline-block; transition: transform var(--fast) var(--ease); }
.offer-lead:hover .offer-go span { transform: translateX(4px); }

.offer-list { border-top: 1px solid var(--line); }
.offer-list li { border-bottom: 1px solid var(--line); }
.offer-list a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .9rem; align-items: baseline;
  padding: clamp(1rem, .85rem + .6vw, 1.45rem) .3rem;
  text-decoration: none; color: inherit;
  transition: padding-left var(--norm) var(--ease), background-color var(--fast) var(--ease);
}
.offer-list a:hover { padding-left: .9rem; background: var(--acc-tint); }
.offer-list .offer-n { color: var(--text-3); transition: color var(--fast) var(--ease); }
.offer-list a:hover .offer-n { color: var(--acc); }
.offer-txt { display: block; min-width: 0; }
.offer-name {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.14rem, 1rem + .7vw, 1.55rem);
  line-height: 1.14; letter-spacing: -.026em;
}
.offer-blurb { display: block; margin-top: .35rem; max-width: 54ch; font-size: var(--t-sm); color: var(--text-2); }
.offer-arrow {
  font-family: var(--display); font-size: 1.1rem; color: var(--text-3);
  transition: transform var(--norm) var(--ease), color var(--fast) var(--ease);
}
.offer-list a:hover .offer-arrow { transform: translateX(5px); color: var(--acc); }
.offer-list.wide .offer-blurb { max-width: 70ch; }

/* ── Fallback graphic panel ──────────────────────────────────
   Stands in for a photo we do not have yet. Honest and designed,
   rather than a stock photo of a call centre that says nothing —
   and it disappears the moment a real file lands in photos/.    */
.artpanel {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: inherit;
  background:
    radial-gradient(78% 78% at 20% 12%, rgba(var(--acc-l-rgb), .16), transparent 62%),
    radial-gradient(70% 70% at 90% 92%, rgba(var(--acc-rgb), .32), transparent 62%),
    var(--ink-2);
  color: var(--acc-l);
}
.artpanel svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; }
.artpanel::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--grain); opacity: .22; mix-blend-mode: overlay;
}

/* ── Why: bento, first cell wider ────────────────────────────── */
.why {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: var(--on-dark);
  padding-block: var(--sec);
}
.why::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(58% 62% at 100% 0%, rgba(var(--acc-rgb), .46), transparent 62%),
    radial-gradient(44% 48% at 0% 100%, rgba(var(--acc-l-rgb), .15), transparent 64%);
}
/* :not(.eyebrow) matters. Without it this rule (0-2-1) outranks
   .eyebrow.on-dark (0-2-0) and the eyebrow renders grey instead of accent
   — which it silently did in this section from the first build. */
.why .sec-head p:not(.eyebrow) { color: var(--on-dark-2); }
.why-grid { display: grid; gap: 1px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--r-xl); overflow: hidden; }
.why-grid li {
  background: var(--ink-2);
  padding: clamp(1.35rem, 1.1rem + 1.1vw, 2.15rem);
  transition: background-color var(--norm) var(--ease);
}
.why-grid li:hover { background: var(--ink-3); }
.why-ico { width: 1.85rem; height: 1.85rem; color: var(--acc-l); }
.why-grid h3 { margin-top: 1rem; }
.why-grid p { margin-top: .6rem; font-size: var(--t-sm); color: var(--on-dark-2); }
.why-grid .wide h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); }

/* Three columns with the lead reason spanning two of them fills exactly
   six cells with five items and no dead space. An earlier 4-column
   version had the lead spanning 2x2 and left roughly 700px of empty
   panel above it, which read as a bug rather than as emphasis. */
@media (min-width: 720px) {
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid .wide { grid-column: span 2; }
}
@media (min-width: 1020px) {
  .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .why-grid .wide { grid-column: span 2; }
  .why-grid .wide p { max-width: 52ch; font-size: var(--t-base); }
}

/* ── Steps ───────────────────────────────────────────────────── */
.steps { display: grid; gap: 0; counter-reset: step; }
.steps li {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem;
  padding: clamp(1.15rem, 1rem + .8vw, 1.75rem) 0;
  border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.step-n {
  font-family: var(--display); font-weight: 700; font-size: .84rem;
  letter-spacing: .04em; color: var(--acc); padding-top: .3rem;
}
.steps p { margin-top: .45rem; font-size: var(--t-sm); color: var(--text-2); max-width: 62ch; }
.steps.compact li { padding-block: 1rem; }

@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .steps li:nth-child(2) { border-top: 1px solid var(--line); }
  .steps li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .steps.compact { grid-template-columns: minmax(0, 1fr); }
  .steps.compact li:nth-child(2) { border-top: 1px solid var(--line); }
}

/* ── Industries: ruled index, no cards ───────────────────────── */
.ind-list { border-top: 1px solid var(--line-2); }
.ind-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: baseline;
  padding: clamp(.95rem, .85rem + .5vw, 1.35rem) .2rem;
  border-bottom: 1px solid var(--line-2);
}
.ind-n { font-family: var(--display); font-weight: 700; font-size: .8rem; color: var(--text-3); }
.ind-txt { display: block; min-width: 0; }
.ind-txt strong {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.14rem, 1rem + .65vw, 1.5rem); letter-spacing: -.026em; line-height: 1.16;
}
.ind-txt em { display: block; margin-top: .3rem; font-style: normal; font-size: var(--t-sm); color: var(--text-2); max-width: 66ch; }

@media (min-width: 880px) {
  .ind-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-top: 0; }
  .ind-list li { border-top: 1px solid var(--line-2); border-bottom: 0; }
  .ind-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-2); }
}

/* ── Split ───────────────────────────────────────────────────── */
.split { display: grid; gap: var(--gap); align-items: center; }
.split > * { min-width: 0; }
.split-txt h2 { margin-top: .9rem; }
.split-txt > p { margin-top: 1rem; color: var(--text-2); }
.split-txt > p strong { color: var(--text); font-weight: 600; }
.split-txt h2 + p { margin-top: 1.25rem; }
.split-txt .eyebrow + h2 { margin-top: .9rem; }
.split-txt .steps { margin-top: 1.5rem; }
.split-art { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2); }
.split-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 1rem + 4vw, 4.5rem); }
}

/* ── Included list ───────────────────────────────────────────── */
.inc { display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.inc li {
  background: var(--paper-2);
  padding: clamp(1.2rem, 1rem + .9vw, 1.85rem);
  transition: background-color var(--fast) var(--ease);
}
.inc li:hover { background: #fff; }
.inc h3 { letter-spacing: -.024em; }
.inc p { margin-top: .5rem; font-size: var(--t-sm); color: var(--text-2); }
@media (min-width: 700px) { .inc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .inc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Tick lists ──────────────────────────────────────────────── */
.who { margin-top: 1.75rem; display: grid; gap: .75rem; }
.who li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; font-size: var(--t-sm); color: var(--text-2); }
.tick { width: 1.15rem; height: 1.15rem; color: var(--acc); margin-top: .28rem; flex: none; }

.contact-list { margin-top: 1.75rem; display: grid; gap: 1.1rem; }
.contact-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; }
.contact-list span { display: block; min-width: 0; font-size: var(--t-sm); color: var(--text-2); }
.contact-list strong {
  display: block; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: .15rem;
}
.contact-list a { color: var(--acc); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); max-width: 54rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem;
  padding: 1.15rem .2rem; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.02rem, .96rem + .38vw, 1.22rem); letter-spacing: -.022em; line-height: 1.3;
  transition: color var(--fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--acc); }
.chev {
  flex: none; width: .6rem; height: .6rem; margin-top: .42rem;
  border-right: 2px solid var(--acc); border-bottom: 2px solid var(--acc);
  transform: rotate(45deg);
  transition: transform var(--norm) var(--ease);
}
.faq details[open] .chev { transform: rotate(225deg); }
.ans { padding: 0 .2rem 1.3rem; max-width: 68ch; }
.ans p { font-size: var(--t-sm); color: var(--text-2); }

/* ── Band ────────────────────────────────────────────────────── */
.band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: var(--on-dark);
  padding-block: clamp(3rem, 2rem + 4.5vw, 5.5rem);
}
.band::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(66% 74% at 0% 100%, rgba(var(--acc-rgb), .60), transparent 62%),
    radial-gradient(52% 56% at 100% 0%, rgba(var(--acc-l-rgb), .20), transparent 64%);
}
.band::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: .26; mix-blend-mode: overlay;
}
.band-in { display: grid; gap: var(--gap); align-items: center; }
.band h2 { margin-top: .9rem; max-width: 20ch; }
.band-sub { margin-top: 1rem; max-width: 52ch; color: var(--on-dark-2); font-size: var(--t-sm); }
.band-act { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 900px) {
  .band-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .band-act { justify-content: flex-end; }
}

/* ── Footer ──────────────────────────────────────────────────
   Light, for the same reason as the header: the logo lives here too. */
.foot {
  background: var(--paper-3); color: var(--text-2);
  border-top: 1px solid var(--line);
  padding-top: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}
.foot-in { display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.foot h3 {
  font-family: var(--body); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text);
  margin-bottom: .9rem;
}
.foot h3.mt { margin-top: 1.75rem; }
.foot ul { display: grid; gap: .55rem; font-size: .92rem; }
.foot a { text-decoration: none; transition: color var(--fast) var(--ease); }
.foot a:hover { color: var(--acc); }
.foot-mark img { height: 2.9rem; }
.foot-blurb { margin-top: 1.1rem; font-size: var(--t-sm); max-width: 42ch; line-height: 1.62; }
.foot-social { display: flex !important; flex-wrap: wrap; gap: 1rem !important; margin-top: 1.1rem; }
.foot-areas li { color: var(--text-2); }
.foot-contact li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; }
.foot-contact svg { width: 1.05rem; height: 1.05rem; color: var(--acc); margin-top: .22rem; }
.foot-contact a { overflow-wrap: anywhere; }

@media (min-width: 720px) { .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .foot-in { grid-template-columns: 1.35fr 1fr .95fr 1.35fr; } }

.foot-base {
  margin-top: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  padding-block: 1.4rem;
  border-top: 1px solid var(--line-2);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  font-size: .82rem;
}
.foot-base p { margin: 0; }
.foot-base p:nth-child(2) { color: var(--text-3); }
/* The credit link inherits the size and colour of its siblings on purpose
   — it should read as part of this footer, not an advert bolted onto it.
   Do not give it its own colour or weight. */
.foot-credit { margin-left: auto !important; }
.foot-credit a { color: inherit; font: inherit; }
.foot-credit a:hover { color: var(--acc); }

/* ── Floating CTA ────────────────────────────────────────────── */
.fab {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 70;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.15rem; border-radius: 999px;
  background: var(--acc); color: #fff; text-decoration: none;
  font-size: .92rem; font-weight: 600;
  box-shadow: 0 6px 22px rgba(var(--acc-rgb), .42);
  transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.fab svg { width: 1.1rem; height: 1.1rem; }
.fab:hover { transform: translateY(-2px); background: var(--acc-d); }
@media (min-width: 940px) { .fab { display: none; } }

/* ── Reveal ──────────────────────────────────────────────────── */
.js-on .rise { opacity: 0; transform: translateY(14px); }
.js-on .rise.in {
  opacity: 1; transform: none;
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease-spring);
}
.js-on .rise.d1.in { transition-delay: 70ms; }
.js-on .rise.d2.in { transition-delay: 140ms; }
.js-on .rise.d3.in { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  .js-on .rise, .js-on .rise.in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── Demo expiry ─────────────────────────────────────────────
   The head script stamps .demo-expired on <html> before first paint,
   so the real page is hidden by CSS rather than removed by script.
   That is what stops an expired preview flashing its content while
   site.js loads. Not a security control — see BRIEF.md. */
html.demo-expired body > *:not(.demo-gate) { display: none !important; }
html.demo-expired body { background: var(--paper); }
.demo-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; padding: 24px;
  background: var(--paper); color: var(--text); overflow-y: auto;
}
.demo-gate main {
  max-width: 34rem; text-align: center;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(28px, 6vw, 52px);
  box-shadow: var(--sh-2);
}
.demo-gate h1 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); margin-bottom: 14px; }
.demo-gate p { font-size: 1rem; line-height: 1.65; color: var(--text-2); }
.demo-gate p + p { margin-top: 14px; }
.demo-gate a { color: var(--acc); font-weight: 600; }

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .bar, .sheet, .burger, .fab, .band, .demo-gate { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .pagehead, .why, .foot { background: #fff !important; color: #000 !important; }
  .hero::before, .hero::after, .pagehead::before, .pagehead::after, .why::before { display: none; }
  .js-on .rise { opacity: 1; transform: none; }
}