/* The Appointment Firm: marketing site
   Design language borrowed from the crm-Sales-Website: League Spartan + Montserrat,
   pink #D8327C, warm sand background, 22px cards, pill buttons, warm shadows. */

:root {
  --pink: #D8327C;
  --pink-dark: #b32463;
  --pink-tint: #fdf1f6;
  --pink-border: #f6d3e4;
  --ink: #1e232b;
  --grey: #5c5550;
  --grey-soft: #66605a;   /* was #8a827c: 3.77 on white, 2.78 on the beige card, failed AA everywhere */
  --sand: #f6f2ec;
  --sand-alt: #fbf8f4;
  --paper: #ffffff;
  --dark: #0a0608;
  --dark2: #14110f;
  --border: #ece4d9;
  /* tri-colour card cycle (white / dark / warm-taupe), for grids of 3+ cards */
  --card-dark: #1e232b;
  --card-dark-head: #faf7f4;
  --card-dark-text: #cdc6bf;
  --card-beige: #e5dccd;
  --radius: 22px;
  --radius-sm: 12px;
  --shadow: 0 24px 60px rgba(30, 35, 43, .10);
  --shadow-pink: 0 26px 52px rgba(216, 50, 124, .16);
  --gutter: 5vw;
  --maxw: 1240px;
  --display: 'League Spartan', system-ui, sans-serif;
  --body: 'Montserrat', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { font-family: var(--display); letter-spacing: -.02em; line-height: 1.02; margin: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(60px, 8vw, 108px) 0; }
.section-alt { background: var(--sand-alt); }
.section-dark { background: var(--dark); color: #f4efe9; }
/* hairline between two adjacent dark sections so they read as separate blocks
   (e.g. the services page: capabilities spotlight followed by the matcher) */
.section-dark + .section-dark { border-top: 1px solid rgba(255, 255, 255, .07); }

.eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--pink-dark); margin-bottom: 14px;
}
.eyebrow-light { color: #ef7fae; }
.section-h2 { font-size: clamp(30px, 4vw, 52px); font-weight: 800; max-width: 16ch; }
.section-h2.light { color: #faf7f4; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-weight: 600; font-size: 15px;
  padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-lg { padding: 17px 34px; font-size: 16px; }
.btn-pink { background: var(--pink-dark); color: #fff; }   /* white on #D8327C is 4.4996, just under AA */
.btn-pink:hover { background: var(--pink-dark); transform: translateY(-2px); box-shadow: var(--shadow-pink); }
.btn-ghost-light { border-color: rgba(255, 255, 255, .35); color: #faf7f4; }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(20, 23, 29, .95); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 15px var(--gutter);
  display: flex; align-items: center; }
.brand { font-family: var(--display); font-weight: 800; font-size: 21px; color: #fff; letter-spacing: -.02em; display: inline-flex; align-items: center; }
.nav-inner .brand { margin-right: auto; }         /* brand left, everything else right */
/* the settings/staff gear: pinned faint in the header's very top-right corner,
   out of the nav flow so the gutter can't push it inward. Reveals on hover. */
.nav-gear { position: absolute; top: 7px; right: 14px; margin: 0; text-decoration: none; }
.admin-gear.nav-gear { color: #cbc3c7; opacity: .5; font-size: 15px; }   /* was .22, which measured 1.66:1 */
/* flex:none and object-fit stop the logo being squashed when the row is tight. */
.brand { flex: none; }
.brand-logo { height: 38px; width: auto; max-width: none; flex: none; object-fit: contain; display: block; }
.footer-brand .brand-logo { height: 44px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: #cbc3c7; font-size: 15px; font-weight: 500; transition: color .16s; }
.nav-links a:hover { color: #fff; }
.nav-links a.btn-pink { color: #fff; }
.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: .25s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; background: #0a0608;
  color: #faf7f4;
  padding: calc(clamp(70px, 11vw, 150px) + clamp(37.5px, 4.05vw, 52.5px)) 0
           calc(clamp(70px, 10vw, 140px) + clamp(37.5px, 4.05vw, 52.5px));
}
.hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: brightness(calc(var(--img-bright, 100) / 100)); }
/* the original gradient, now an overlay whose strength the CMS controls */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1; opacity: calc(var(--hero-overlay, 100) / 100);
  background:
    radial-gradient(120% 120% at 85% 0%, rgba(216, 50, 124, .32) 0%, rgba(216, 50, 124, 0) 46%),
    linear-gradient(160deg, #17120f 0%, #0a0608 60%);
}
.hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); max-width: 980px; }
.hero-h1 {
  font-size: clamp(42px, 7vw, 84px); font-weight: 800; line-height: .98; margin: 0 0 22px;
  color: #faf7f4;
}
.hero-h1 em { color: var(--pink); font-style: normal; }
.hero-sub { font-size: clamp(17px, 1.8vw, 21px); color: #c9c1bb; max-width: 60ch; margin: 0 0 32px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.svc-card {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform .22s ease, box-shadow .22s ease;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-pink); }
.svc-art { position: relative; overflow: hidden; height: 150px; display: flex; align-items: flex-end; padding: 16px; background: linear-gradient(150deg, var(--ov-from, #2a1220), var(--ov-to, #6d1e42)); }
.services-page .svc-art { height: 180px; }
.svc-art-1 { --svc-grad: linear-gradient(150deg, #2a1220, #6d1e42); }
.svc-art-2 { --svc-grad: linear-gradient(150deg, #6d1e42, #b32463); }
.svc-art-3 { --svc-grad: linear-gradient(150deg, #b32463, #D8327C); }
.svc-art-4 { --svc-grad: linear-gradient(150deg, #17120f, #2a1220); }
.svc-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(calc(var(--img-bright, 100) / 100)); }
/* the card gradient, now an overlay over the uploaded photo; CMS controls opacity */
.svc-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(150deg, var(--ov-from, #2a1220), var(--ov-to, #6d1e42)); opacity: calc(var(--svc-overlay, 100) / 100); }
.svc-num { position: relative; z-index: 2; font-family: var(--display); font-weight: 800; font-size: 40px; color: var(--num-color, #fff); opacity: calc(var(--num-opacity, 80) / 100); }
.svc-body { padding: 22px; }
.svc-tagline { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pink-dark); }
.svc-name { font-size: 21px; font-weight: 700; margin: 8px 0 10px; }
.svc-desc { font-size: 14.5px; color: var(--grey); margin: 0; }

/* ---------- keyboard focus ----------
   One visible indicator for every interactive element. Only the capability tabs
   had one, so a keyboard user could not see where they were anywhere else.
   :focus-visible means a mouse click does not draw a ring, only keyboard focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--pink-dark);
  outline-offset: 2px;
  border-radius: 3px;
}
/* On the dark sections a dark pink ring disappears, so use the light one. */
.hero :focus-visible,
.cta-band :focus-visible,
.matcher-wrap :focus-visible,
.site-footer :focus-visible,
.quote-card:nth-child(3n+2) :focus-visible {
  outline-color: #ef7fae;
}

/* Visible to screen readers, not to sighted users. Used for dialog names where
   a visible heading would duplicate what the embedded form already shows. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* A compliance notice that must be read before the paid services below it,
   so it is deliberately the loudest thing on the page. */
.notice-card {
  border: 2px solid var(--pink-border); background: var(--pink-tint);
  border-radius: var(--radius); padding: 28px 32px; max-width: 760px;
}
.notice-card h2 { font-size: 22px; margin: 0 0 12px; }
.notice-card p { margin: 0 0 12px; color: var(--ink); font-size: 15.5px; line-height: 1.6; }
.notice-card p:last-child { margin-bottom: 0; }

/* Privacy notice: a long read, so a comfortable measure and clear hierarchy. */
.legal-wrap { max-width: 780px; }
.legal-body h2 { font-size: 24px; margin: 36px 0 12px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { font-size: 16px; line-height: 1.65; color: var(--grey); }
.legal-body p { margin: 0 0 14px; }
.legal-body ul { margin: 0 0 16px; padding-left: 22px; }
.legal-body li { margin: 8px 0; }
.legal-body a { color: var(--pink-dark); font-weight: 600; }
.legal-updated { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 14px; color: var(--grey-soft); }

/* ---------- consultation enquiry modal ---------- */
.enq-inner { height: auto; max-height: 94vh; overflow-y: auto; padding: 38px 40px 34px; }
.enq-form h2, .enq-done h2 { font-size: clamp(24px, 3vw, 30px); margin: 0 0 6px; }
.enq-sub { color: var(--grey); font-size: 15px; margin: 0 0 22px; }
.enq-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.enq-field { margin-bottom: 14px; display: flex; flex-direction: column; }
.enq-field label { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.enq-field input, .enq-field select, .enq-field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--sand-alt); font: inherit; font-size: 15px; color: var(--ink);
  transition: border-color .15s;
}
.enq-field input:focus, .enq-field select:focus, .enq-field textarea:focus { border-color: var(--pink-dark); }
.enq-field [aria-invalid="true"] { border-color: var(--pink-dark); background: var(--pink-tint); }
.enq-field textarea { resize: vertical; min-height: 74px; }
.enq-err { font-size: 13px; color: var(--pink-dark); font-weight: 600; margin: 6px 0 0; }
.enq-err-form { margin: 0 0 14px; }
.enq-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.enq-actions .enq-submit { flex: 1 1 200px; }
.enq-submit { width: 100%; margin-top: 4px; }
.enq-consent { font-size: 12.5px; color: var(--grey-soft); margin: 14px 0 0; text-align: center; }
.enq-consent a { color: var(--pink-dark); font-weight: 600; }
/* Off screen, not display:none, so a bot still sees a fillable field. */
.enq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.enq-done { text-align: center; padding: 14px 0 6px; }
.enq-tick { width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%;
  background: #e8f4ec; color: #2f6b4f; font-size: 30px; line-height: 58px; font-weight: 700; }
.enq-done p { color: var(--grey); font-size: 15.5px; line-height: 1.6; margin: 0 auto 22px; max-width: 46ch; }
.enq-done .btn { width: 100%; }
.enq-dismiss { margin-top: 12px; font-size: 14px; }
@media (max-width: 560px) {
  .enq-inner { padding: 30px 22px 26px; }
  .enq-row2 { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- pricing calculator ----------
   Ported from a standalone widget, restyled onto the site tokens so it uses the
   brand pink and the site fonts rather than its own. The original hardcoded
   #e11577 and tried to load Plus Jakarta Sans through an @import that browsers
   ignore, so it silently fell back to a system font. */
.calc { margin-top: 28px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.calc-controls { padding: 26px 28px 6px; }
.calc-field { margin-bottom: 20px; }
.calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.calc-row label { font-size: 15px; font-weight: 700; color: var(--ink); }
.calc-row output { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--ink); }
.calc-scale { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--grey-soft); font-weight: 500; }

.calc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 999px; background: var(--border); outline: none; margin: 10px 0 4px; }
.calc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px;
  border-radius: 50%; background: var(--pink-dark); border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(179, 36, 99, .4); cursor: pointer; }
.calc-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%;
  background: var(--pink-dark); border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(179, 36, 99, .4); cursor: pointer; }

.calc-out { padding: 0 28px 26px; }
.calc-headline { position: relative; overflow: hidden; border-radius: var(--radius-sm);
  background: var(--card-dark); padding: 18px 22px; display: flex; flex-wrap: wrap;
  align-items: flex-end; gap: 8px 26px; }
.calc-headline-label { color: var(--card-dark-text); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; }
.calc-rate { font-family: var(--display); color: #fff; font-weight: 800; font-size: 40px;
  line-height: 1; letter-spacing: -.02em; margin: 4px 0 0; }
.calc-pct { color: #ef7fae; font-size: 22px; }
.calc-headline-vs { padding-bottom: 6px; display: flex; flex-direction: column; gap: 3px; }
.calc-strike { color: #b8b1aa; font-size: 13.5px; font-weight: 600; text-decoration: line-through; }
.calc-vs-note { color: #ef7fae; font-size: 13px; font-weight: 700; }

.calc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.calc-card { border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; background: var(--sand-alt); }
.calc-card-ours { border-color: var(--pink-border); background: var(--pink-tint); }
.calc-card-label { font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--grey-soft); }
.calc-card-ours .calc-card-label { color: var(--pink-dark); }
.calc-card-num { font-family: var(--display); font-size: 24px; font-weight: 800;
  color: var(--ink); margin: 6px 0 3px; letter-spacing: -.02em; }
.calc-card:not(.calc-card-ours) .calc-card-num { color: var(--grey); }
.calc-card-note { font-size: 13px; color: var(--grey-soft); font-weight: 500; }
.calc-card-ours .calc-card-note { color: var(--pink-dark); font-weight: 600; }

.calc-lines { --border: color-mix(in srgb, var(--card-beige) 80%, var(--ink)); margin: 12px 0 0; border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 4px 0; }
.calc-lines > div { display: flex; justify-content: space-between; align-items: center;
  gap: 14px; padding: 9px 18px; }
.calc-lines > div + div { border-top: 1px solid var(--border); }
.calc-lines dt { font-size: 14.5px; color: var(--ink); font-weight: 600; margin: 0; }
.calc-lines dd { font-size: 15.5px; color: var(--ink); font-weight: 800; margin: 0; text-align: right; }
.calc-per { color: var(--grey-soft); font-weight: 600; font-size: 13px; }

.calc-save { margin-top: 12px; background: var(--pink-dark); border-radius: var(--radius-sm);
  padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px; }
.calc-save-label { color: #ffd9ec; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; }
.calc-save-num { font-family: var(--display); color: #fff; font-size: 28px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.05; margin: 4px 0 2px; }
.calc-save-note { color: #ffd9ec; font-size: 13.5px; font-weight: 600; }
.calc-cta { background: var(--ink); color: #fff; white-space: nowrap; }
.calc-cta:hover { background: #000; }
.calc-save :focus-visible { outline-color: #fff; }

@media (max-width: 560px) {
  .calc-controls, .calc-out { padding-left: 18px; padding-right: 18px; }
  .calc-compare { grid-template-columns: 1fr; }
  .calc-cta { width: 100%; text-align: center; }
}

/* ---------- skip link ----------
   WCAG 2.4.1, the first thing any scanner flags. Off screen until focused, then
   it lands over the header so a keyboard user can jump the whole nav. */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 500;
  background: var(--pink-dark); color: #fff; padding: 10px 18px;
  border-radius: 0 0 8px 8px; font-weight: 700; font-size: 15px;
  text-decoration: none; transition: top .12s;
}
.skip-link:focus { top: 0; }

/* ---------- capabilities: interactive spotlight ---------- */
.cap-head { max-width: 760px; }
.cap-sub { font-size: 17px; line-height: 1.6; color: #c9c1bb; margin: 14px 0 0; }
.cap-spotlight { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 30px; margin-top: 42px; align-items: start; }

/* the hoverable service list */
.cap-list { list-style: none; margin: 0; padding: 0; max-height: 496px; overflow-y: auto;
  border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius-sm); background: rgba(255,255,255,.02);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.cap-list::-webkit-scrollbar { width: 8px; }
.cap-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; }
.cap-item { width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 12px; row-gap: 2px; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 14px 18px; cursor: pointer; color: #f4efe9; position: relative; transition: background .2s ease; }
.cap-item:last-child { border-bottom: 0; }
.cap-item::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: var(--pink); transform: scaleY(0); transition: transform .25s ease; }
.cap-item-name { grid-column: 1; font-weight: 700; font-size: 16px; letter-spacing: -.01em; transition: color .2s ease; }
.cap-item-tag { grid-column: 1; font-size: 12.5px; color: #9a938c; }
.cap-item-arrow { grid-column: 2; grid-row: 1 / 3; color: var(--pink); font-weight: 700; opacity: 0;
  transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
.cap-item:hover, .cap-item[aria-selected="true"] { background: rgba(216,50,124,.11); }
.cap-item:hover::before, .cap-item[aria-selected="true"]::before { transform: scaleY(1); }
.cap-item:hover .cap-item-name, .cap-item[aria-selected="true"] .cap-item-name { color: #fff; }
.cap-item:hover .cap-item-arrow, .cap-item[aria-selected="true"] .cap-item-arrow { opacity: 1; transform: none; }
.cap-item:focus-visible { outline: 2px solid var(--pink); outline-offset: -2px; }

/* the morphing preview stage: panels are stacked in one grid cell and crossfade */
.cap-stage { display: grid; }
.cap-panel { grid-area: 1 / 1; display: flex; flex-direction: column; overflow: hidden;
  background: var(--dark2); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.99); pointer-events: none;
  transition: opacity .4s ease, transform .55s cubic-bezier(.22,1,.36,1), visibility .4s; }
.cap-panel:first-child { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } /* no-JS default */
.cap-spotlight.js .cap-panel:first-child { opacity: 0; visibility: hidden; transform: translateY(10px) scale(.99); pointer-events: none; }
.cap-spotlight.js .cap-panel.on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
/* base art = a soft glow over the panel's gradient; shows on image-less panels
   and sits behind any uploaded photo */
.cap-art { position: relative; height: 208px; overflow: hidden;
  background: radial-gradient(120% 120% at 12% 12%, rgba(216,50,124,.4), transparent 56%), var(--cap-grad, linear-gradient(150deg, #2a1220, #6d1e42)); }
.cap-panel:nth-child(4n+1) .cap-art { --cap-grad: linear-gradient(150deg, #2a1220, #6d1e42); }
.cap-panel:nth-child(4n+2) .cap-art { --cap-grad: linear-gradient(150deg, #6d1e42, #b32463); }
.cap-panel:nth-child(4n+3) .cap-art { --cap-grad: linear-gradient(150deg, #b32463, #D8327C); }
.cap-panel:nth-child(4n)   .cap-art { --cap-grad: linear-gradient(150deg, #17120f, #2a1220); }
.cap-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(calc(var(--img-bright, 100) / 100)); }
/* the panel gradient as a colour wash over the photo; opacity is per item (CMS).
   0 = the uploaded photo shows untinted. */
.cap-art-glow { position: absolute; inset: 0; z-index: 1; background: linear-gradient(150deg, var(--ov-from, #2a1220), var(--ov-to, #6d1e42)); opacity: calc(var(--cap-overlay, 0) / 100); }
.cap-art-num { position: absolute; right: 20px; bottom: 2px; z-index: 2; font-family: var(--display); font-weight: 800; font-size: 104px; line-height: 1; color: var(--num-color, #fff); opacity: calc(var(--num-opacity, 14) / 100); pointer-events: none; }
.cap-panel-body { padding: 26px 28px 30px; display: flex; flex-direction: column; }
.cap-panel-tag { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ef7fae; }
.cap-panel-name { font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; color: #faf7f4; margin: 8px 0 12px; letter-spacing: -.01em; }
.cap-panel-desc { font-size: 15.5px; line-height: 1.62; color: #c9c1bb; margin: 0 0 22px; }
.cap-enquire { align-self: flex-start; margin-top: auto; }
@media (max-width: 860px) {
  .cap-spotlight { grid-template-columns: 1fr; gap: 22px; }
  .cap-list { max-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .cap-panel { transition: opacity .18s ease; transform: none !important; }
}

/* ---------- stats ---------- */
.stats-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; }
.stats-body { font-size: 17px; color: var(--grey); margin: 0; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 48px 0 32px; }
.stat { text-align: left; }
.stat-num { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5vw, 64px); color: var(--pink); line-height: 1; }
.stat-label { font-size: 14.5px; color: var(--grey); margin-top: 8px; max-width: 18ch; }
.metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.metric { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px; }
.metric h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.metric p { font-size: 13.5px; color: var(--grey); margin: 0; }
/* tri-colour cycle */
.metric:nth-child(3n+2) { background: var(--card-dark); border-color: transparent; }
.metric:nth-child(3n+2) h3 { color: var(--card-dark-head); }
.metric:nth-child(3n+2) p { color: var(--card-dark-text); }
.metric:nth-child(3n) { background: var(--card-beige); border-color: transparent; }

/* ---------- care: both sides of a placement ---------- */
.care-head { max-width: 820px; }
.care-intro { font-size: 17px; line-height: 1.7; color: var(--grey); margin: 18px 0 0; }
.care-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; margin-top: 44px; }
.care-card { display: flex; flex-direction: column; border-radius: var(--radius); padding: 36px 32px; background: #fff; box-shadow: var(--shadow); }
.care-sand { background: var(--card-beige); box-shadow: none; }
.care-dark { background: var(--card-dark); box-shadow: 0 34px 60px -26px rgba(216, 50, 124, .5); }
.care-ico { width: 30px; height: 30px; margin-bottom: 22px; background: var(--pink);
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.care-ico[data-ico="briefcase"] { --u: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--u); mask-image: var(--u); }
.care-ico[data-ico="heart"] { --u: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--u); mask-image: var(--u); }
.care-ico[data-ico="loop"] { --u: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 1 21 5 17 9'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpolyline points='7 23 3 19 7 15'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--u); mask-image: var(--u); }
.care-label { font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--pink-dark); }
.care-title { font-family: var(--display); font-weight: 800; font-size: clamp(21px, 2vw, 25px); line-height: 1.12; letter-spacing: -.01em; margin: 12px 0 14px; color: var(--ink); }
.care-body { color: var(--grey); line-height: 1.65; font-size: 15.5px; margin: 0; }
.care-dark .care-title { color: var(--card-dark-head); }
.care-dark .care-body { color: var(--card-dark-text); }
.care-sand .care-body { color: #6a6055; }
.care-points { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.care-point { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.care-point:empty { display: none; }
.care-point::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--pink); font-weight: 800; }
.care-dark .care-point { color: var(--card-dark-text); }
.care-cta { margin-top: auto; padding-top: 24px; color: var(--pink-dark); font-weight: 700; font-size: 15px; text-decoration: none; }
.care-cta:empty { display: none; }
.care-cta::after { content: ' →'; }
.care-cta:hover { color: var(--pink-dark); }
.care-dark .care-label { color: #ff8fc2; }   /* pink-dark measures 2.52 on this card */
.care-dark .care-cta { color: #ff8fc2; }
@media (max-width: 900px) { .care-grid { grid-template-columns: 1fr; } }

/* ---------- pricing page + password gate ---------- */
.pricing-table-wrap { overflow-x: auto; margin-top: 20px; border-radius: var(--radius); border: 1px solid var(--border); }
.pricing-table { width: 100%; border-collapse: collapse; background: #fff; min-width: 480px; }
.pricing-table th, .pricing-table td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.pricing-table thead th { font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--ink); background: var(--card-beige); }
.pricing-table thead th:nth-child(2) { color: var(--pink); }
.pricing-table tbody tr:last-child td { border-bottom: none; }
.pricing-table .pt-label { font-weight: 600; color: var(--ink); }
.pricing-table .pt-ours { font-weight: 800; color: var(--pink-dark); }
.pricing-table .pt-trad { color: var(--grey); }
.pricing-note { margin-top: 18px; font-size: 13.5px; color: var(--grey-soft); }
.pricing-lock { min-height: 52vh; display: flex; align-items: center; }
.pricing-access-layout { display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr);gap:clamp(30px,5vw,76px);align-items:center; }
.pricing-lock.section { padding:124px 0;min-height:0; }
.pricing-access-copy h1 { font-size:clamp(30px,3.2vw,46px);margin:10px 0 16px;max-width:24ch; }
.pricing-access-copy .lead-copy { font-size:17px;line-height:1.65; }
.pricing-access-benefits { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:26px 0 0; }
.pricing-access-benefits article { border-left:3px solid var(--pink);padding-left:18px; }
.pricing-access-benefits h2 { font-size:19px;margin:0 0 7px; }
.pricing-access-benefits p { color:var(--grey);font-size:13px;margin:0;line-height:1.55; }
.pricing-access-note { color:var(--grey);font-size:13px;line-height:1.65;max-width:52ch;margin-top:16px; }
.pricing-access-layout .lock-card { width:100%;box-sizing:border-box;padding:28px; }
.pricing-access-layout .lock-title { font-size:28px; }
.pricing-access-layout .lock-lead { font-size:14px; }
@media(max-width:500px) { .pricing-access-benefits { grid-template-columns:1fr;gap:14px; } }
@media(max-width:800px) { .pricing-access-layout { grid-template-columns:1fr; } .pricing-access-layout .lock-card { max-width:none; } }
.lock-card { max-width: 460px; margin: 0 auto; text-align: center; background: #fff; border-radius: var(--radius); padding: 44px 40px; box-shadow: var(--shadow); }
.lock-title { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 4vw, 34px); margin: 14px 0 10px; color: var(--ink); }
.lock-lead { color: var(--grey); line-height: 1.6; }
.lock-form { margin-top: 22px; text-align: left; }
.lock-form label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--grey); margin-bottom: 6px; }
.lock-form input { width: 100%; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; font: inherit; font-size: 16px; box-sizing: border-box; }
.lock-form input:focus { border-color: var(--pink-dark); }   /* outline:none removed: it hid keyboard focus */
.lock-form .btn { width: 100%; margin-top: 16px; }
.lock-error { color: #c0392b; font-size: 14px; margin: 10px 0 0; }
.lock-request { margin-top: 18px; font-size: 14px; color: var(--grey); }
.lock-request a { color: var(--pink-dark); font-weight: 700; }

/* ---------- clients: morphing logo board ---------- */
.client-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 40px; }
.logo-tile {
  position: relative; aspect-ratio: 3 / 2; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; box-shadow: 0 10px 26px rgba(30, 35, 43, .06);
}
.logo-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 10px;
  object-fit: contain; opacity: 0; transition: opacity .7s ease; will-change: opacity;
}
.logo-tile img.on { opacity: 1; }
.logo-tile-name { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 8px; text-align: center; font-family: var(--display); font-weight: 700; font-size: 15px; color: #6b625c; }
.logo-tile img.on ~ .logo-tile-name { opacity: 0; } /* hide the name once a logo shows */
@media (max-width: 960px) { .client-board { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .client-board { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .logo-tile img { transition: none; } }

/* ---------- clients marquee ---------- */
.clients .wrap { margin-bottom: 30px; }
.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); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.client-chip {
  display: flex; align-items: center; gap: 10px; padding: 14px 26px;
  background: var(--paper); border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--display); font-weight: 700; font-size: 18px; color: #4a423d; white-space: nowrap;
}
.client-chip img { height: 26px; width: auto; }

/* ---------- matcher ---------- */
.matcher { max-width: 820px; text-align: center; margin: 0 auto; }
.matcher .eyebrow, .matcher .section-h2 { text-align: center; }
.matcher .section-h2 { margin: 0 auto; }
.matcher-sub { color: #c9c1bb; font-size: 17px; max-width: 55ch; margin: 14px auto 30px; }
.matcher-box, .matcher-result {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius); padding: 30px; backdrop-filter: blur(8px);
}
.matcher-q { font-family: var(--display); font-weight: 700; font-size: 20px; margin: 0 0 20px; color: #faf7f4; }
.matcher-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 721px) {
  .matcher-options > .matcher-opt:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
  }
}
.matcher-opt {
  font-family: var(--body); font-size: 15px; font-weight: 500; color: #faf7f4;
  background: rgba(255, 255, 255, .04); border: 1.5px solid rgba(255, 255, 255, .18);
  border-radius: 999px; padding: 15px 20px; cursor: pointer; transition: .18s;
}
.matcher-opt:hover { border-color: var(--pink); background: rgba(216, 50, 124, .15); transform: translateY(-2px); }
.matcher-result { text-align: center; animation: pop .4s cubic-bezier(.34, 1.42, .5, 1); }
.matcher-result h3 { font-size: 28px; color: var(--pink); margin-bottom: 10px; }
.matcher-result p { color: #d8d0ca; margin: 0 auto 22px; max-width: 46ch; }
.matcher-reset { display: block; margin: 16px auto 0; background: none; border: 0; color: #a89f99;
  font-family: var(--body); font-size: 13px; cursor: pointer; text-decoration: underline; }
@keyframes pop { from { opacity: 0; transform: scale(.9) rotate(-1deg); } to { opacity: 1; transform: none; } }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.rich p { font-size: 16.5px; color: var(--grey); margin: 0 0 16px; }
.bbbee { display: inline-block; margin-top: 8px; padding: 8px 16px; border-radius: 999px;
  background: var(--pink-tint); color: var(--pink-dark); border: 1px solid var(--pink-border);
  font-size: 13px; font-weight: 600; }
.pillars { display: grid; gap: 14px; }
.pillar { background: var(--paper); border: 1px solid var(--border); border-left: 3px solid var(--pink);
  border-radius: var(--radius-sm); padding: 20px 22px; }
.pillar h3 { font-size: 17px; font-weight: 700; margin-bottom: 5px; }
.pillar p { font-size: 14.5px; color: var(--grey); margin: 0; }
/* tri-colour cycle, keeping the pink left accent on every card */
.pillar:nth-child(3n+2) { background: var(--card-dark); border-color: transparent; border-left-color: var(--pink); }
.pillar:nth-child(3n+2) h3 { color: var(--card-dark-head); }
.pillar:nth-child(3n+2) p { color: var(--card-dark-text); }
.pillar:nth-child(3n) { background: var(--card-beige); border-color: transparent; border-left-color: var(--pink); }

/* ---------- industries ---------- */
.ind-cloud { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.ind-chip { padding: 11px 20px; border-radius: 999px; background: var(--paper);
  border: 1px solid var(--border); font-size: 15px; font-weight: 500; transition: .18s; }
.ind-chip:hover { border-color: var(--pink); color: var(--pink); transform: translateY(-2px); }

/* ---------- testimonials ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.quote-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; margin: 0; box-shadow: var(--shadow); }
/* tri-colour cycle: 1 white · 2 dark · 3 taupe (repeats for longer lists) */
.quote-card:nth-child(3n+2) { background: var(--card-dark); border-color: transparent; }
.quote-card:nth-child(3n+2) blockquote { color: var(--card-dark-text); }
.quote-card:nth-child(3n+2) figcaption strong { color: var(--card-dark-head); }
.quote-card:nth-child(3n) { background: var(--card-beige); border-color: transparent; }
.stars { color: var(--pink-dark); letter-spacing: 3px; font-size: 15px; margin-bottom: 14px; }
.quote-card:nth-child(3n+2) .stars { color: #ef7fae; }   /* 6.25 on the dark card */
.quote-card blockquote { font-size: 16.5px; color: var(--grey); margin: 0 0 20px; line-height: 1.55; }
.quote-card figcaption { display: flex; flex-direction: column; }
.quote-card figcaption strong { font-weight: 700; }
.quote-card figcaption span { font-size: 13px; color: var(--grey-soft); }
/* The middle testimonial card is dark, so the darkened grey-soft would drop to
   2.54 there. Light value on that card only: 7.45. */
.quote-card:nth-child(3n+2) figcaption span { color: #b8b1aa; }

/* ---------- cta band ---------- */
.cta-band { background: radial-gradient(130% 150% at 80% 10%, var(--pink) 0%, var(--pink-dark) 36%, #6d1e42 70%, #2a1220 100%); }
#contact-cta .btn-pink { background: #78284e; box-shadow: 0 4px 16px rgba(42, 18, 32, .12); }
#contact-cta .btn-pink:hover { background: #692142; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-sub { color: rgba(255, 255, 255, .85); font-size: 17px; max-width: 46ch; margin: 12px 0 0; }

/* ---------- footer ---------- */
.footer { background: var(--dark2); color: #cbc3bd; padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.footer-brand .brand { color: #fff; font-size: 22px; }
.footer-brand p { font-size: 14.5px; max-width: 34ch; margin: 14px 0 18px; }
.socials { display: flex; gap: 16px; }
.socials a { font-size: 13px; color: #a89f99; transition: .16s; }
.socials a:hover { color: var(--pink); }
.footer-col h5 { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.footer-col p { font-size: 14px; margin: 0 0 8px; }
.footer-col a:hover { color: var(--pink); }
.hours { color: #8a827c; font-size: 13px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 48px; padding-top: 22px; font-size: 13px; color: #8a827c; }
.footer-meta { display: inline-flex; align-items: center; gap: 14px; }
.ver { font-size: 12px; color: #9a908a; user-select: all; }   /* was #6b625c: 3.16 on the dark footer */
.admin-gear { font-size: 18px; transition: .3s; opacity: .6; display: inline-block; }
.admin-gear:hover { transform: rotate(45deg); color: var(--pink); opacity: 1; }

/* ---------- sub-page hero ---------- */
/* A flat base, not the gradient. The gradient belongs to .page-hero-overlay,
   whose strength is editable: painting the same gradient here as well meant
   fading the overlay revealed an identical gradient underneath, so the slider
   worked and nothing appeared to change. The home hero was always built this
   way; the banners copied its layers but kept their own background. */
.page-hero { position: relative; overflow: hidden; background: #0a0608;
  color: #faf7f4; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); }
/* A page banner is now the same three layers as the home hero: the photo, a
   colour wash whose strength is per page, then the words. With no photo the
   wash alone renders, which is the original look. */
.page-hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover;
  background-position: center; filter: brightness(calc(var(--img-bright, 100) / 100)); }
.page-hero-overlay { position: absolute; inset: 0; z-index: 1;
  opacity: calc(var(--hero-overlay, 100) / 100);
  background:
    radial-gradient(120% 120% at 88% 0%, rgba(216, 50, 124, .3) 0%, rgba(216, 50, 124, 0) 48%),
    linear-gradient(160deg, var(--ov-from, #17120f) 0%, var(--ov-to, #0a0608) 65%); }
.page-hero > .wrap { position: relative; z-index: 2; }
.page-hero .wrap { max-width: 900px; }
.page-hero h1 { font-size: clamp(36px, 5.4vw, 66px); font-weight: 800; margin: 0 0 16px; color: #faf7f4; }
.page-hero p { font-size: clamp(16px, 1.7vw, 20px); color: #c9c1bb; max-width: 60ch; margin: 0; }
.crumb { color: #a89f99; font-size: 13px; margin-bottom: 16px; }
.crumb a:hover { color: var(--pink); }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.form { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.form label { display: block; font-size: 13px; font-weight: 700; margin: 16px 0 7px; }
.form label:first-child { margin-top: 0; }
.form input, .form select, .form textarea {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--sand-alt); font: inherit; color: var(--ink); transition: border-color .15s;
}
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--pink-dark); }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .btn { margin-top: 20px; width: 100%; }
.form-note { font-size: 13px; color: var(--grey-soft); margin: 14px 0 0; }
.form-msg { margin-top: 14px; font-size: 14px; font-weight: 600; min-height: 20px; }
.form-msg.ok { color: #2f7a45; }
.form-msg.err { color: var(--pink-dark); }
.contact-cards { display: grid; gap: 14px; }
.contact-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px 22px; }
.contact-card h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--pink); margin-bottom: 6px; }
.contact-card p { margin: 0; font-size: 16px; }
.contact-card a:hover { color: var(--pink); }

/* ---------- candidate resources ---------- */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.res-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.res-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-pink); }
/* icon sits bare on the card (no chip), like the sales site */
.res-icon { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 16px; }
.res-icon svg { width: 34px; height: 34px; display: block; }
.res-card h3 { font-size: 20px; margin-bottom: 8px; }
.res-card p { font-size: 14.5px; color: var(--grey); margin: 0 0 18px; flex: 1; }
.res-card .btn { align-self: flex-start; }
/* res-card used as a button (opens a modal) */
/* The card used to BE a button, which hid its heading from assistive tech.
   Now only the heading holds the button and its ::after stretches over the whole
   card, so the entire tile is still clickable and the heading is a real heading. */
.res-card { position: relative; }
.res-card-trigger {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.res-card-trigger::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.res-card:focus-within { box-shadow: var(--shadow-pink); }
/* The stretched hit area covers the card, so draw focus on the card itself. */
/* Deliberate: the ring is drawn on the parent .res-card instead, because this
   trigger's hit area is stretched over the whole card by ::after. */
.res-card-trigger:focus-visible { outline: none; }
.res-card:has(.res-card-trigger:focus-visible) { outline: 3px solid var(--pink-dark); outline-offset: 2px; }
.res-more { color: var(--pink-dark); font-weight: 600; font-size: 14px; }   /* --pink measured 3.31 on beige */
.res-grid-2 { grid-template-columns: repeat(2, 1fr); }

/* tri-colour cycle for the 3+-card toolkit grid (not the 2-card services grid):
   1 white · 2 dark · 3 taupe, repeating */
.res-grid:not(.res-grid-2) .res-card:nth-child(3n+2) { background: var(--card-dark); border-color: transparent; }
.res-grid:not(.res-grid-2) .res-card:nth-child(3n+2) h3 { color: var(--card-dark-head); }
.res-grid:not(.res-grid-2) .res-card:nth-child(3n+2):has(.res-card-trigger:focus-visible) { outline-color: #ef7fae; }
.res-grid:not(.res-grid-2) .res-card:nth-child(3n+2) p { color: var(--card-dark-text); }
.res-grid:not(.res-grid-2) .res-card:nth-child(3n+2) .res-more { color: #ef7fae; }
.res-grid:not(.res-grid-2) .res-card:nth-child(3n) { background: var(--card-beige); border-color: transparent; }

/* ---------- two apply routes ---------- */
.apply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.apply-card {
  display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.apply-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-pink); border-color: var(--pink-border); }
/* icon sits bare on the card (no chip), like the sales site */
.apply-icon { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 18px; }
.apply-icon svg { width: 40px; height: 40px; display: block; }
.apply-card h3 { font-size: 23px; margin-bottom: 8px; }
.apply-card p { font-size: 15px; color: var(--grey); margin: 0 0 18px; flex: 1; }
.apply-go { color: var(--pink); font-weight: 700; font-size: 15px; }
.cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- resource modal ---------- */
.rmodal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(12, 8, 10, .55); backdrop-filter: blur(4px); }
.rmodal[hidden] { display: none; }
.rmodal-card { position: relative; width: min(720px, 100%); max-height: 86vh; overflow: auto;
  background: var(--paper); border-radius: var(--radius); padding: 38px 40px;
  box-shadow: 0 40px 90px rgba(30, 35, 43, .3); animation: pop .4s cubic-bezier(.34, 1.42, .5, 1); }
.rmodal-close { position: sticky; top: 0; float: right; margin: -16px -18px 0 0; width: 38px; height: 38px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--paper); color: var(--grey);
  font-size: 22px; line-height: 1; cursor: pointer; }
.rmodal-close:hover { background: var(--pink-tint); color: var(--pink-dark); border-color: var(--pink-border); }
.rmodal-body h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 14px; }
.rmodal-body h3 { font-size: 18px; margin: 24px 0 10px; color: var(--pink-dark); }
.rmodal-body p { font-size: 15.5px; color: var(--grey); margin: 0 0 14px; }
.rmodal-body ul, .rmodal-body ol { margin: 0 0 14px; padding-left: 22px; }
.rmodal-body li { font-size: 15px; color: var(--grey); margin-bottom: 9px; line-height: 1.5; }
.rmodal-body a { color: var(--pink); font-weight: 600; }
.price-list { list-style: none; padding: 0; }
.price-list li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid var(--border); }
.price-list li b { color: var(--ink); white-space: nowrap; }
.rm-price { font-family: var(--display); font-weight: 800; font-size: 34px; color: var(--pink); margin: 6px 0 12px; }
.rm-note { font-size: 13.5px !important; color: var(--grey-soft) !important; }

/* ---------- misc page ---------- */
.lead-copy { font-size: clamp(18px, 2vw, 22px); color: var(--grey); max-width: 62ch; line-height: 1.55; }
.svc-detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.svc-detail .svc-card { display: flex; flex-direction: column; }

/* ---------- blog / insights ---------- */
/* blog reading column: 70vw of the viewport, with a capped side gutter so the
   text doesn't shrink on wide screens; full-width (minus gutter) on mobile where
   70vw would be too narrow. */
.wrap.wrap-narrow { max-width: 70vw; padding: 0 clamp(20px, 4vw, 44px); }
@media (max-width: 900px) { .wrap.wrap-narrow { max-width: 100%; } }
/* gradient "art" placeholders: stand in for imagery until photos are added */
.art-1 { background: linear-gradient(150deg, #2a1220, #6d1e42); }
.art-2 { background: linear-gradient(150deg, #6d1e42, #b32463); }
.art-3 { background: linear-gradient(150deg, #b32463, #D8327C); }
.art-4 { background: linear-gradient(150deg, #17120f, #2a1220); }
.art-5 { background: linear-gradient(150deg, #3a1a2a, #8a2a55); }
.art-6 { background: linear-gradient(150deg, #1e232b, #3a2230); }

/* the "types of blogs" nav */
.blog-cats { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 36px; }
.blog-cat { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: 999px;
  border: 1.5px solid var(--border); background: #fff; color: var(--grey); cursor: pointer; transition: .18s; }
.blog-cat:hover { border-color: var(--pink); color: var(--pink); }
.blog-cat.is-active { background: var(--pink); border-color: var(--pink); color: #fff; }

.blog-tag { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 11.5px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: #fff; background: rgba(10, 6, 8, .38);
  backdrop-filter: blur(4px); padding: 5px 11px; border-radius: 999px; }
.blog-tag-inline { position: static; display: inline-block; margin-bottom: 14px; background: var(--pink-tint);
  color: var(--pink-dark); backdrop-filter: none; }

/* section spacing so the magazine hero sits tight under the page title */
.page-hero-tight { padding-bottom: clamp(28px, 4vw, 44px); }
.section-tight { padding-top: clamp(34px, 4vw, 54px); }
.blog-latest-head { display: flex; align-items: center; justify-content: space-between; gap: 20px 26px; flex-wrap: wrap; margin-bottom: 8px; }
.blog-latest-head .blog-cats { margin: 0; }
.blog-latest-head .section-h2 { margin: 0; }

/* widescreen hero: featured story (left) + trending list (right) */
.blog-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: start; }

/* featured story: editorial, no card chrome */
.blog-featured { display: flex; flex-direction: column; color: inherit; }
.blog-featured-art { position: relative; height: clamp(260px, 34vw, 380px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.blog-featured-title { font-size: clamp(26px, 3vw, 40px); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; margin: 22px 0 12px; transition: color .18s; }
.blog-featured:hover .blog-featured-title { color: var(--pink-dark); }
.blog-featured-excerpt { font-size: 16.5px; line-height: 1.6; color: var(--grey); margin: 0 0 20px; max-width: 62ch; }
.blog-byline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--grey-soft); }
.blog-byline-info { display: inline-flex; flex-direction: column; line-height: 1.2; }
.blog-byline-info strong { color: var(--ink); font-size: 14px; }
.blog-byline-role { font-size: 12.5px; color: var(--grey-soft); }
.blog-byline-meta { margin-left: auto; white-space: nowrap; }

/* right column: trending banner + article rows */
.blog-side { display: flex; flex-direction: column; }
.blog-trending { position: relative; overflow: hidden; border-radius: var(--radius); min-height: 172px;
  padding: 26px 28px; margin-bottom: 4px; color: #faf7f4; display: flex; align-items: flex-start;
  background: radial-gradient(130% 130% at 85% 12%, rgba(216,50,124,.55), transparent 55%), linear-gradient(150deg, #241a2e, #12100f);
  transition: transform .2s ease, box-shadow .2s ease; }
.blog-trending:hover { transform: translateY(-3px); box-shadow: var(--shadow-pink); }
.blog-trending-title { position: relative; z-index: 1; font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.04; }
.blog-trending-deco { position: absolute; right: -22px; bottom: -22px; width: 132px; height: 132px; border-radius: 24px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.09) 0 6px, transparent 6px 13px); transform: rotate(12deg); }
.blog-row { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--border); color: inherit; }
.blog-row:last-child { border-bottom: 0; }
.blog-row-art { height: 72px; border-radius: 10px; position: relative; overflow: hidden; }
/* optional hero photo laid over the gradient placeholder (pruned if no src) */
.blog-card-photo, .blog-featured-photo, .blog-row-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-row-title { font-size: 15.5px; font-weight: 700; line-height: 1.25; margin: 0 0 8px; transition: color .18s; }
.blog-row:hover .blog-row-title { color: var(--pink-dark); }
.blog-row-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--grey-soft); }
.blog-tag-mini { position: static; background: var(--pink-tint); color: var(--pink-dark); backdrop-filter: none;
  font-size: 10px; padding: 3px 9px; letter-spacing: .02em; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.blog-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); color: inherit;
  transition: transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-pink); }
.blog-card-art { position: relative; height: 172px; }
.blog-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.blog-card-body h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; line-height: 1.2; }
.blog-card-body p { font-size: 14.5px; color: var(--grey); margin: 0 0 16px; flex: 1; }
.blog-empty-hero { text-align: center; padding: 30px 0 10px; }
.blog-draft-badge { display: inline-block; background: #fff3cd; color: #7a5b00; border: 1px solid #f0d98a;
  font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 8px; margin-bottom: 18px; }

.blog-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--grey-soft); margin-top: auto; }
.blog-meta > span + span::before { content: '·'; margin-right: 10px; color: var(--grey-soft); }
.blog-author { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--grey); }
.blog-author::before { content: none !important; }
.blog-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; background-size: cover; background-position: center; background-repeat: no-repeat; }
.blog-readmore { color: var(--pink); font-weight: 700; font-size: 15px; }
.blog-empty { text-align: center; color: var(--grey-soft); padding: 40px 0; }

/* article foot navigation: prev / next / back-to-index, always present */
.post-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center;
  margin: clamp(28px, 5vw, 52px) auto 0; padding-top: 26px; border-top: 1px solid var(--border); }
.post-nav-link { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 18px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--sand-alt); text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.post-nav-link:hover { transform: translateY(-2px); border-color: var(--pink); box-shadow: var(--shadow); }
.post-nav-link.empty { background: none; border: none; box-shadow: none; transform: none; }
.post-nav-link.next { text-align: right; align-items: flex-end; }
.post-nav-dir { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--pink); }
.post-nav-title { font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-nav-all { align-self: center; white-space: nowrap; font-weight: 700; color: var(--pink); text-decoration: none;
  border: 1px solid var(--pink); border-radius: 999px; padding: 9px 20px; transition: background .15s, color .15s; }
.post-nav-all:hover { background: var(--pink); color: #fff; }
@media (max-width: 720px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-link.empty { display: none; }
  .post-nav-link.next { text-align: left; align-items: flex-start; }
  .post-nav-all { order: 3; justify-self: center; }
}

/* article page */
.blog-article { padding-top: clamp(28px, 4vw, 48px); }
.article-title { font-size: clamp(30px, 4.6vw, 52px); font-weight: 800; line-height: 1.03; margin: 0 0 16px; }
.article-deck { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; color: var(--grey); margin: 0 0 24px; }
.article-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.article-byline { display: inline-flex; flex-direction: column; line-height: 1.25; }
.article-role { font-size: 13px; color: var(--grey-soft); font-weight: 500; }
.article-metabits { font-size: 13.5px; color: var(--grey-soft); }
.article-hero { height: clamp(220px, 40vw, 420px); border-radius: var(--radius); margin: 30px 0 8px; }
.article-body { padding: 20px 0 8px; }
.article-body .lead { font-size: 20px; line-height: 1.6; color: var(--ink); }
.article-body p { font-size: 17px; line-height: 1.75; color: #3f3a35; margin: 0 0 20px; }
.article-body h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; margin: 38px 0 14px; }
.article-body ul { margin: 0 0 22px; padding-left: 22px; }
.article-body li { font-size: 17px; line-height: 1.7; color: #3f3a35; margin-bottom: 10px; }
.article-body blockquote { margin: 30px 0; padding: 6px 0 6px 24px; border-left: 4px solid var(--pink);
  font-family: var(--display); font-weight: 700; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.25; color: var(--ink); }
.article-body a { color: var(--pink); font-weight: 600; text-decoration: underline; }
.article-share { display: flex; align-items: center; gap: 14px; padding: 22px 0; margin-top: 8px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 14px; color: var(--grey-soft); }
.article-share span { font-weight: 700; }
.article-share a { color: var(--grey); font-weight: 600; }
.article-share a:hover { color: var(--pink); }
.article-author { display: flex; gap: 18px; align-items: flex-start; margin: 34px 0 10px; padding: 24px;
  background: var(--sand-alt); border: 1px solid var(--border); border-radius: var(--radius); }
.article-author > div { display: flex; flex-direction: column; }
.article-author strong { font-size: 16px; }
.article-author p { font-size: 14.5px; color: var(--grey); margin: 10px 0 0; line-height: 1.6; }
.blog-avatar-lg { width: 60px; height: 60px; }

@media (max-width: 900px) {
  .blog-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .blog-featured-art { height: clamp(220px, 52vw, 320px); }
}
@media (max-width: 860px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }

/* ---------- CRM form modal (embeds a CRM form in an iframe) ---------- */
.crm-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 12px; background: rgba(12, 8, 10, .6); backdrop-filter: blur(4px); }
.crm-modal[hidden] { display: none; }
/* Height is the only lever that reduces scrolling: the CRM form is a fixed
   single-column ~988px page, so width does not change its height. Take almost
   the whole viewport so it fits without scrolling on standard laptops and up
   (very short screens still scroll inside the modal; the form is taller than
   they are). The cap keeps it from ballooning past the form on big monitors. */
.crm-modal-inner { position: relative; width: min(840px, 100%); height: min(96vh, 1024px);
  background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px rgba(30, 35, 43, .35);
  animation: pop .35s cubic-bezier(.34, 1.42, .5, 1); }
#crmModalFrame { width: 100%; height: 100%; border: 0; display: block; position: relative; z-index: 1; }
/* Sits ABOVE the iframe, not below it. The iframe is opaque white, so at z-index 0
   this message was invisible: a slow or failed CRM just looked like a blank panel. */
.crm-modal-load { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center; text-align: center; padding: 28px;
  background: #fff; color: var(--grey); font-size: 14px; z-index: 2; }
.crm-modal-load[hidden] { display: none; }
.crm-modal-load h3 { font-family: var(--display); font-size: 20px; color: var(--ink); margin: 0; }
.crm-modal-load a { color: var(--pink-dark); font-weight: 600; }
.crm-modal-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px;
  border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--grey);
  font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.crm-modal-close:hover { background: var(--pink-tint); color: var(--pink-dark); border-color: var(--pink-border); }
@media (max-width: 560px) { .crm-modal { padding: 0; } .crm-modal-inner { height: 100%; width: 100%; border-radius: 0; } }

/* ---------- reveal animation ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
[data-reveal].in { opacity: 1; transform: none; }
/* The hero is above the fold and is the page's largest contentful paint. Leaving
   it at opacity 0 until site.js runs makes it ineligible to BE the LCP, so the
   headline is measured against the JavaScript round trip for no visual gain, and
   the hero sits blank if the script fails to load. Everything below the fold
   keeps the reveal. */
.hero [data-reveal] { opacity: 1; transform: none; transition: none; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-row, .metric-row { grid-template-columns: repeat(2, 1fr); }
  .stats-head { grid-template-columns: 1fr; gap: 18px; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .quote-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .res-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-detail { grid-template-columns: 1fr; }
}
/* The nav switches to the burger at 1100px, not 720px. The row carries seven
   items and .nav-links cannot wrap, so between about 721px and 1150px the
   labels broke onto two lines and grew the sticky bar. iPad portrait (768),
   iPad Air (820), iPad Pro 11 (834) and 1024px laptops all sat in that band. */
@media (max-width: 1100px) {
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start;
    gap: 4px; background: rgba(20, 23, 29, .98); padding: 16px var(--gutter) 22px; display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 0; width: 100%; }
  .burger { display: block; }
  .nav-gear { display: none; }   /* burger owns the mobile corner; footer gear covers staff access */
}

@media (max-width: 720px) {
  .svc-grid, .stat-row, .metric-row { grid-template-columns: 1fr; }
  .matcher-options { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .res-grid, .res-grid-2, .apply-grid { grid-template-columns: 1fr; }
  .form .row2 { grid-template-columns: 1fr; }
  .rmodal-card { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}

/* The trending column is hidden when there is nothing to put in it. */
.blog-side.hide { display: none; }

/* The headline rate is retainer + placement, so it can legitimately exceed the
   placement percentage set in the admin. Spelling the sum out stops that
   reading as a fault. */
.calc-headline-parts { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; color: rgba(255,255,255,.62); }

/* When the configured rates leave no headroom under the benchmark there is no
   saving to show, so the strike-through and the percentage are suppressed
   rather than printing "R0" and "0% less". */
.calc-nosave-note { display: none; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.9); margin-top: 4px; }
.calc.is-nosave .calc-save-note { display: none; }
.calc.is-nosave .calc-nosave-note { display: block; }
.calc.is-nosave .calc-save-num { display: none; }
.calc.is-nosave .calc-save-label { display: none; }
.calc.is-nosave .calc-strike { text-decoration: none; opacity: .75; }


/* ---------------------------------------------------- inline editing (edit.js)

   Only ever rendered for a signed-in editor. Nothing here applies to a visitor,

   and no element below exists in the public page. */

.cms-bar { position: fixed; z-index: 400; left: 50%; transform: translateX(-50%); bottom: 18px;

  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px;

  background: #16181d; color: #fff; border-radius: 999px; box-shadow: 0 10px 34px rgba(0,0,0,.34);

  font-size: 13.5px; font-weight: 700; max-width: calc(100vw - 24px); }

.cms-who { display: inline-flex; align-items: center; gap: 8px; color: #cfc9c4; font-weight: 600;

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }

.cms-dot { width: 8px; height: 8px; border-radius: 50%; background: #57c07a; flex: none; }

.cms-none { color: #9a938d; font-weight: 600; }

.cms-btn { appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 800;

  padding: 8px 14px; border-radius: 999px; background: var(--pink, #D8327C); color: #fff;

  text-decoration: none; line-height: 1; }

.cms-btn.ghost { background: transparent; color: #cfc9c4; box-shadow: inset 0 0 0 1.5px #3a3d44; }

.cms-btn.on { background: #2f8f4f; }

.cms-btn:focus-visible, [data-cms]:focus-visible { outline: 3px solid #7cc4ff; outline-offset: 2px; }

/* Keep the bar clear of the footer. */

body.cms-has-bar { padding-bottom: 72px; }



/* Edit mode. The outline has to read on both the cream and the dark sections,

   so it is a translucent pink that darkens on hover rather than a flat colour. */

body.cms-editing [data-cms] { outline: 2px dashed rgba(216,50,124,.5); outline-offset: 3px;

  border-radius: 3px; cursor: text; transition: outline-color .15s, background-color .15s; }

body.cms-editing [data-cms]:hover { outline-color: rgba(216,50,124,.95); background: rgba(216,50,124,.07); }

body.cms-editing [data-cms]:focus { outline: 2px solid var(--pink, #D8327C); background: rgba(216,50,124,.07); }

[data-cms].cms-saving { opacity: .55; }

[data-cms].cms-saved { outline-color: #2f8f4f !important; background: rgba(47,143,79,.10) !important; }



.cms-toast { position: fixed; z-index: 401; left: 50%; transform: translateX(-50%) translateY(12px);

  bottom: 76px; background: #16181d; color: #fff; padding: 10px 16px; border-radius: 10px;

  font-size: 13.5px; font-weight: 700; opacity: 0; pointer-events: none;

  transition: opacity .18s, transform .18s; max-width: calc(100vw - 32px); text-align: center; }

.cms-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.cms-toast.bad { background: #8d2033; }



@media (prefers-reduced-motion: reduce) {

  .cms-toast, body.cms-editing [data-cms] { transition: none; }

}



/* The section pill, and the panel it opens. Edit mode only. */

.cms-pill { position: absolute; z-index: 60; top: 14px; right: 14px; appearance: none; border: 0;

  cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; line-height: 1;

  padding: 9px 14px; border-radius: 999px; background: var(--pink, #D8327C); color: #fff;

  box-shadow: 0 4px 16px rgba(0,0,0,.3); }

.cms-pill:hover { filter: brightness(1.08); }



/* The panel is a side drawer, not a centred modal over a dimmed page. It used
   to sit exactly on top of the thing being edited, so a slider could not be
   seen working. The backdrop no longer dims and no longer takes clicks, so the
   page stays visible and draggable while the panel is open. */
.cms-modal { position: fixed; inset: 0; z-index: 420; background: transparent;
  display: flex; align-items: stretch; justify-content: flex-end; pointer-events: none; }
.cms-dialog { background: #fff; color: #1e232b; width: min(380px, 94vw); max-height: 100vh;
  overflow-y: auto; box-shadow: -14px 0 44px rgba(0,0,0,.34); pointer-events: auto; }
.cms-dhead { display: flex; align-items: center; justify-content: space-between; gap: 12px;

  padding: 16px 18px; border-bottom: 1px solid #e9e4df; font-size: 16px; }

.cms-x { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit;

  font-weight: 700; color: #6b6560; padding: 4px 6px; }

.cms-dbody { padding: 6px 18px 2px; }

.cms-dfoot { display: flex; align-items: center; gap: 10px; padding: 14px 18px 18px; }

.cms-dfoot .cms-derr { flex: 1; color: #8d2033; font-size: 13px; font-weight: 700; }



.cms-field { padding: 14px 0; border-bottom: 1px solid #f0ebe6; }

.cms-field:last-child { border-bottom: 0; }

.cms-lab { display: block; font-weight: 800; font-size: 13.5px; margin-bottom: 6px; }

.cms-fhelp { display: block; color: #6b6560; font-size: 12.5px; line-height: 1.5; margin-bottom: 8px; }

.cms-in { width: 100%; font: inherit; font-size: 14px; padding: 9px 11px; border: 1.5px solid #ddd6cf;

  border-radius: 9px; background: #fbf9f7; color: inherit; margin-top: 6px; }

.cms-in:focus { outline: 2px solid var(--pink, #D8327C); outline-offset: 1px; border-color: transparent; }

.cms-rangerow { display: flex; align-items: center; gap: 12px; }

.cms-range { flex: 1; accent-color: var(--pink, #D8327C); }

.cms-rout { font-weight: 800; font-size: 13px; min-width: 52px; text-align: right; }

.cms-imgrow { display: flex; align-items: center; gap: 14px; }

.cms-thumb { width: 108px; height: 68px; flex: none; border-radius: 9px; overflow: hidden;

  background: #f2ece7; display: flex; align-items: center; justify-content: center; }

.cms-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cms-thumb i { color: #948d87; font-size: 12px; font-style: normal; }

.cms-imgtools { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }

.cms-imgtools .cms-file { font-size: 12.5px; max-width: 100%; }

.cms-field.busy { opacity: .55; pointer-events: none; }



/* Per-image and per-item controls. Edit mode only, created by edit.js. */

.cms-imgbtn { position: absolute; z-index: 55; left: 10px; bottom: 10px; appearance: none; border: 0;

  cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; line-height: 1; padding: 8px 12px;

  border-radius: 999px; background: rgba(20,21,25,.86); color: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.34); }

.cms-imgbtn:hover { background: var(--pink, #D8327C); }



/* The bar used to stretch across the top of every item, which covered the
   titles of anything short: the capabilities list was unreadable in edit
   mode. It now sits in the corner and appears on hover or keyboard focus, so
   the content stays legible while you decide what to reorder. */
.cms-itembar { position: absolute; z-index: 56; top: 6px; right: 6px; display: flex;
  gap: 4px; align-items: center; opacity: 0; pointer-events: none; transition: opacity .12s;
  background: rgba(12,13,16,.72); padding: 3px; border-radius: 10px; }
[data-cms-item]:hover > .cms-itembar,
[data-cms-item]:focus-within > .cms-itembar { opacity: 1; pointer-events: auto; }
.cms-itembar button { appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 11.5px;

  font-weight: 800; line-height: 1; padding: 7px 9px; border-radius: 8px;

  background: rgba(20,21,25,.86); color: #fff; }

.cms-itembar button:hover { background: var(--pink, #D8327C); }

.cms-itembar button.danger:hover { background: #8d2033; }

.cms-itembar [data-cardpill] { margin-left: 0; }



.cms-additem { appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800;

  color: var(--pink, #D8327C); background: transparent; border: 2px dashed rgba(216,50,124,.5);

  border-radius: 14px; min-height: 120px; padding: 20px; display: none; }

body.cms-editing .cms-additem { display: block; }

.cms-additem:hover { background: rgba(216,50,124,.07); border-color: var(--pink, #D8327C); }



/* A card being saved should look busy rather than silently swapping. */

[data-cms-img].cms-saving { opacity: .5; }



.cms-check { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 13.5px; }

.cms-check input { width: 18px; height: 18px; accent-color: var(--pink, #D8327C); margin: 0; }

.cms-field[data-t="number"] .cms-in { max-width: 180px; }



/* Rich-text fields and their toolbar. Edit mode only. */

body.cms-editing [data-cms-rich] { outline: 2px dashed rgba(216,50,124,.5); outline-offset: 6px;

  border-radius: 3px; cursor: text; }

body.cms-editing [data-cms-rich]:hover { outline-color: rgba(216,50,124,.95); }

body.cms-editing [data-cms-rich]:focus { outline: 2px solid var(--pink, #D8327C); }

[data-cms-rich].cms-saving { opacity: .55; }

[data-cms-rich].cms-saved { outline-color: #2f8f4f !important; }



.cms-richbar { position: absolute; z-index: 402; display: none; gap: 3px; padding: 4px;

  background: #16181d; border-radius: 10px; box-shadow: 0 6px 22px rgba(0,0,0,.34); }

.cms-richbar.on { display: flex; }

.cms-richbar button { appearance: none; border: 0; cursor: pointer; background: transparent;

  color: #fff; font: inherit; font-size: 13px; line-height: 1; min-width: 30px; height: 28px;

  border-radius: 7px; }

.cms-richbar button:hover { background: var(--pink, #D8327C); }



/* The button Edit pill. Buttons are never contenteditable: a caret inside a

   styled, overflow-hidden button is unreliable and the fill hides the outline. */

body.cms-editing .cms-has-pill { position: relative; overflow: visible; outline: 2px dashed rgba(216,50,124,.5);

  outline-offset: 4px; }

.cms-btnpill { position: absolute; z-index: 58; top: -11px; right: -8px; cursor: pointer;

  font-size: 10.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;

  line-height: 1; padding: 5px 8px; border-radius: 999px; background: #16181d; color: #fff;

  box-shadow: 0 2px 8px rgba(0,0,0,.34); }

.cms-btnpill:hover, .cms-btnpill:focus-visible { background: var(--pink, #D8327C); outline: none; }



.cms-colorrow { display: flex; align-items: center; gap: 10px; margin-top: 6px; }

.cms-swatch { width: 46px; height: 34px; padding: 0; border: 1.5px solid #ddd6cf; border-radius: 8px;

  background: none; cursor: pointer; flex: none; }

.cms-hex { margin-top: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; max-width: 140px; }



/* Both image affordances sit together on the artwork, so the controls for how

   the image looks are where the image is. */

.cms-imgtools-on { position: absolute; z-index: 55; left: 10px; bottom: 10px; display: flex; gap: 6px;

  flex-wrap: wrap; max-width: calc(100% - 20px); }

.cms-imgtools-on .cms-imgbtn { position: static; }



/* Drag to choose which part of a cropped photo survives the crop. The dot

   marks the point being kept centred. */

body.cms-editing .cms-draggable { cursor: grab; }

body.cms-editing .cms-draggable.cms-dragging { cursor: grabbing; }

.cms-focaldot { position: absolute; z-index: 57; width: 20px; height: 20px; margin: -10px 0 0 -10px;

  border-radius: 50%; border: 2px solid #fff; background: rgba(216,50,124,.85);

  box-shadow: 0 0 0 2px rgba(0,0,0,.35); pointer-events: none; }

.cms-draggable.cms-dragging .cms-focaldot { transform: scale(1.25); }



/* With the panel docked to one side, leave room so it never sits on top of

   the section being edited. */

body.cms-panel-open { padding-right: min(380px, 94vw); }



/* Shown only when the page was loaded before the current build. */

.cms-btn.warn { background: var(--card-beige); color: var(--ink); }
.cms-btn.warn:hover { background: var(--sand); color: var(--ink); }

/* Native upload controls share the site's pill button treatment. */
input[type="file"] { max-width:100%; min-width:0; font:inherit; font-size:13px; color:#5c5550; }
input[type="file"]::file-selector-button { appearance:none; border:1px solid #b32463; border-radius:999px; width:112px; height:30px; padding:4px 10px; margin-right:8px; background:#b32463; color:#fff; font-family:var(--body); font-size:12.5px; line-height:20px; font-weight:400; cursor:pointer; transition:background .15s; }
input[type="file"]:hover::file-selector-button { background:#922052; border-color:#922052; }
input[type="file"]:focus-visible { outline:2px solid #b32463; outline-offset:4px; border-radius:8px; }
input[type="file"]:disabled::file-selector-button { opacity:.5; cursor:not-allowed; }

.cms-imgtools .cms-clear { width:112px; height:30px; min-height:0; padding:4px 10px; font-family:var(--body); font-size:12.5px; line-height:20px; font-weight:400; color:#5c5550; }

/* The saved-image thumbnail supplies selection state for CMS uploads. */
.cms-imgtools .cms-file { width:112px; height:30px; padding:0; border:0; overflow:hidden; color:transparent; font-size:0; }
.cms-imgtools .cms-file::file-selector-button { margin:0; }

/* Homepage recruitment offering: larger photographs and a clear next step. */
.recruitment-offering .section-h2 { max-width: 850px; margin-bottom: 18px; }
.svc-intro { max-width: 750px; color: var(--grey); font-size: 18px; margin: 0; }
.recruitment-offering .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.recruitment-offering .svc-card { display: flex; flex-direction: column; box-shadow: none; border-radius: 22px; }
.recruitment-offering .svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.recruitment-offering .svc-art { height: auto; aspect-ratio: 2 / 1; }
.recruitment-offering .svc-body { display: flex; flex-direction: column; flex: 1; padding: 28px 30px; }
.recruitment-offering .svc-name { font-size: clamp(25px, 2.3vw, 32px); line-height: 1.12; max-width: 440px; margin: 12px 0; }
.recruitment-offering .svc-desc { font-size: 15px; max-width: 460px; margin-bottom: 0; }
.svc-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 36px; list-style: none; padding: 26px 0 0; margin: 30px 0 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--grey); }
.svc-proof li::before { content: '✓'; color: var(--pink-dark); margin-right: 9px; }
.svc-detail .svc-card { scroll-margin-top: 110px; }
@media (max-width: 640px) {
  .recruitment-offering .svc-grid { grid-template-columns: 1fr; gap: 22px; }
  .recruitment-offering .svc-body { padding: 24px; }
  .svc-intro { font-size: 16px; }
  .svc-proof { flex-direction: column; gap: 12px; }
}

/* Scroll stack, homepage only. Grid remains the no-JS/mobile/editor fallback. */
.svc-progress { display: none; }
.recruitment-offering.svc-stack { padding: 0; overflow: visible; }
.svc-stack > .wrap { position: sticky; top: var(--stack-top); height: var(--stack-height); box-sizing: border-box; padding-top: 22px; padding-bottom: 24px; display: flex; flex-direction: column; }
.svc-stack [data-reveal] { opacity: 1; translate: none; }
.svc-stack .eyebrow { margin-bottom: 8px; }
.svc-stack .section-h2 { font-size: clamp(32px, 3vw, 46px); line-height: 1.05; max-width: none; margin: 0 0 8px; }
.svc-stack .svc-intro { font-size: 15px; max-width: 900px; line-height: 1.5; }
.svc-stack .svc-progress { display: block; color: var(--pink-dark); font-size: 12px; margin: 12px 0 8px; }
.recruitment-offering.svc-stack .svc-grid { position: relative; display: block; overflow: hidden; flex: 1; min-height: 0; max-height: 500px; margin: 0; border-radius: 22px; }
.recruitment-offering.svc-stack .svc-card { position: absolute; inset: 0 auto 0 0; display: grid; grid-template-columns: 52% 48%; border: 1px solid var(--border); transition: none; will-change: transform; box-shadow: -8px 0 24px #1e232b12; }
.recruitment-offering.svc-stack .svc-art { height: 100%; aspect-ratio: auto; }
.recruitment-offering.svc-stack .svc-body { justify-content: center; padding: clamp(22px, 3vw, 42px); }
.recruitment-offering.svc-stack .svc-name { font-size: clamp(25px, 2.5vw, 36px); }
.svc-stack .svc-proof { margin: 14px 0 0; padding: 12px 0 0; gap: 10px 24px; font-size: 12px; }

/* Numbered spines remain visible when subsequent cards overlap. */
.recruitment-offering.svc-stack .svc-card::before { content: attr(data-stack-number); position: absolute; z-index: 2; inset: 0 auto 0 0; width: 44px; padding-top: 24px; background: var(--ink); color: #fff; font-family: var(--body); font-size: 15px; font-weight: 600; text-align: center; border-right: 1px solid #ffffff30; pointer-events: none; }
.recruitment-offering.svc-stack .svc-card:nth-child(1)::before { background: var(--paper); color: var(--ink); }
.recruitment-offering.svc-stack .svc-card:nth-child(2)::before { background: var(--ink); }
.recruitment-offering.svc-stack .svc-card:nth-child(3)::before { background: var(--card-beige); color: var(--ink); }
.recruitment-offering.svc-stack .svc-card:nth-child(4)::before { background: var(--pink); }

/* Compact pricing calculator: inputs beside the effective rate on desktop. */
.calc-top { padding: 24px 28px 0; }
.calc-top .calc-controls { padding: 0; }
.calc-top .calc-field { margin-bottom: 18px; }
.calc-top #calcCommitmentHelp { font-size: 13px; line-height: 1.5; margin: 12px 0 0; }
.calc-top .calc-headline { align-content: center; }
@media (min-width: 900px) {
  .calc-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); gap: 24px; }
  .calc-inputs { min-width: 0; }
  .calc-top .calc-headline { flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; margin-bottom: 18px; }
  .calc-top .calc-rate { font-size: 48px; margin: 10px 0; }
  .calc-top .calc-headline-parts { display: block; }
  .calc-out .calc-compare { margin-top: 0; }
  .calc-out .calc-card { padding: 10px 16px; }
  .calc-out .calc-lines { display: grid; grid-template-columns: 1fr 1fr; }
  .calc-out .calc-lines > div + div { border-top: 0; border-left: 1px solid var(--border); }
  .calc-out .calc-save { padding: 12px 20px; }
}
@media (max-width: 560px) {
  .calc-top { padding: 20px 18px 0; }
  .calc-row { flex-wrap: wrap; gap: 2px 12px; }
  .calc-scale { gap: 16px; }
  .calc-scale > :last-child { text-align: right; }
}