/* ==========================================================================
   Divines Homecare — site styles
   Ported from the Claude Design prototypes (home/about/services/contact).
   Colours, sizes and spacing are kept exactly as designed.
   ========================================================================== */

:root {
  /* Brand */
  --violet:        #4A3BC4;
  --violet-dark:   #2D2196;
  --violet-soft:   #EFEDFB;
  --violet-pale:   #8E7BFF;
  --violet-text:   #3A2F8F;
  --amber:         #FFC94B;
  --amber-ink:     #3A2B00;
  --amber-ink-2:   #2E2200;
  --amber-ink-3:   #4A3900;
  --amber-ink-4:   #6B5200;

  /* Ink */
  --ink:           #221F3B;
  --ink-2:         #4B4671;
  --ink-3:         #5B5585;
  --ink-4:         #6460A0;
  --ink-nav:       #453F6E;

  /* Surfaces */
  --bg:            #F6F5FC;
  --surface:       #fff;
  --field:         #FBFAFF;
  --field-border:  #E4E1F5;

  /* On dark */
  --on-dark:       #D8D4F0;
  --on-dark-muted: #B9B3E0;
  --footer-text:   #CFCAEC;
  --footer-muted:  #9A93CC;

  /* Layout */
  --maxw:  1320px;
  --pad-x: clamp(16px, 4vw, 48px);

  /* Type */
  --font-heading: 'Outfit', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;

  /* Motion */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--violet-dark); }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -.03em;
  text-wrap: pretty;
  margin: 0;
}

img { display: block; max-width: 100%; }

cite { font-style: normal; }

input, textarea, select { font-family: var(--font-body); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--violet); outline-offset: 1px; }
::placeholder { color: #8A84B4; }

summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
}
.skip-link:focus { left: 12px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.page { min-height: 100vh; }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/*
 * Bands.
 *
 * Each section is a full-width strip whose background runs edge to edge, with
 * the content held in the centre column. That is what separates one section
 * from the next, and what stops a wide screen reading as a single narrow
 * strip of text down the middle.
 */
.band { padding-block: clamp(50px, 5.5vw, 100px); }
.band__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.band--white { background: var(--surface); }
.band--soft  { background: var(--violet-soft); }
.band--dark  { background: var(--ink); color: #fff; }
.band--dark .body,
.band--dark .body--muted { color: var(--on-dark-muted); }

/* First band on a page sits tight under the header. */
.band--hero { padding-top: clamp(24px, 3vw, 52px); padding-bottom: clamp(40px, 4.5vw, 84px); }
.band--flush-bottom { padding-bottom: 0; }
.band--tight { padding-block: clamp(34px, 3.6vw, 64px); }

/*
 * Section heading block: eyebrow, heading, one supporting line. Corporate
 * pages are scanned, not read, so the supporting line stays to one sentence.
 */
.section-head { margin-bottom: clamp(26px, 3vw, 44px); }
.section-head--center { text-align: center; margin-inline: auto; max-width: 62ch; }
.section-head--center .lead-line { margin-inline: auto; }
.section-head .eyebrow { display: block; margin-bottom: 12px; }
.section-head h2 { margin-bottom: 12px; }
.lead-line {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 17.5px);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 58ch;
}
.band--dark .lead-line { color: var(--on-dark-muted); }

/* Legacy per-section padding, still used by the inset closing band. */
.pt-hero { padding-top: clamp(20px, 3vw, 44px); }
.pt-lg   { padding-top: clamp(40px, 5vw, 76px); }
.pt-md   { padding-top: clamp(36px, 4.5vw, 68px); }
.pt      { padding-top: clamp(38px, 5vw, 74px); }
.pt-sm   { padding-top: clamp(34px, 4.5vw, 64px); }
.pb      { padding-bottom: clamp(30px, 4vw, 56px); }

.mt-lg { margin-top: clamp(40px, 5vw, 76px); }
.mt    { margin-top: clamp(38px, 5vw, 74px); }
.mt-sm { margin-top: clamp(34px, 4.5vw, 64px); }

/* Two-column rows that stack when there isn't room. */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px);
}
.split--wide  { gap: clamp(22px, 3vw, 48px); }
.split--tight { gap: clamp(16px, 2.5vw, 28px); }
.split--panel { gap: clamp(18px, 2.5vw, 32px); }
.split--gap44 { gap: clamp(20px, 3vw, 44px); }

.split--center  { align-items: center; }
.split--top     { align-items: flex-start; }
.split--stretch { align-items: stretch; }

.col { min-width: 0; }
.col--1    { flex: 1 1 300px; }
.col--wide { flex: 1.2 1 320px; }
.col--lead { flex: 1.3 1 340px; }

/* Auto-fitting card grids. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.grid > * { min-width: 0; }
.grid--150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.grid--190 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid--200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid--220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.grid--230 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.grid--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--gap12 { gap: 12px; }
.grid--gap14 { gap: 14px; }

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stack--10 { gap: 10px; }
.stack--14 { gap: 14px; }
.stack--16 { gap: 16px; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet);
  font-weight: 700;
}
.eyebrow--amber { color: var(--amber); }
.eyebrow--sm { font-size: 12.5px; }
.eyebrow--muted {
  display: block;
  font-size: 12px;
  color: var(--ink-4);
  font-weight: 400;
  margin-bottom: 10px;
}

.badge {
  display: inline-block;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--amber-ink);
  font-size: 13.5px;
  font-weight: 600;
}

.h1 {
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1;
  margin: 20px 0 16px;
}
.h1--home { font-size: clamp(38px, 5.6vw, 68px); margin: 20px 0 18px; }

.h2       { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08; }
.h2--lg   { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.06; }
.h2--welcome { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; }
.h2--md   { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.08; }
.h2--sm   { font-size: clamp(25px, 3vw, 36px);   line-height: 1.08; }
.h2--xs   { font-size: clamp(24px, 3vw, 34px);   line-height: 1.08; }
.h2--card { font-size: clamp(23px, 2.6vw, 30px); line-height: 1.1; }
.h2--form { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.1; }
.h2--cta { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.05; color: var(--amber-ink-2); }
.h2--dark { font-size: clamp(25px, 3vw, 36px); line-height: 1.1; color: #fff; }
.h2--panel-dark { font-size: clamp(25px, 3vw, 38px); line-height: 1.08; color: #fff; }
.h2--svc  { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.1; margin: 8px 0 12px; }

.lead {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 44ch;
  margin: 0;
}
.lead--wide { max-width: 46ch; }

.prose {
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-2);
}
.prose--loose { line-height: 1.7; }
.prose:last-child { margin-bottom: 0; }

.body {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
}
.body--muted { color: var(--ink-3); line-height: 1.65; }
.note  { margin: 0; font-size: 14.5px; color: var(--ink-4); }
.note--sm { font-size: 13.5px; }

.mw-20 { max-width: 20ch; }
.mw-22 { max-width: 22ch; }
.mw-24 { max-width: 24ch; }
.mw-34 { max-width: 34ch; }
.mw-36 { max-width: 36ch; }
.mw-38 { max-width: 38ch; }
.mw-40 { max-width: 40ch; }
.mw-44 { max-width: 44ch; }
.mw-46 { max-width: 46ch; }
.mw-48 { max-width: 48ch; }
.mw-52 { max-width: 52ch; }
.mw-56 { max-width: 56ch; }
.mw-60 { max-width: 60ch; }

.mb-6  { margin-bottom: 6px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-18 { margin-bottom: 18px; }
.mb-20 { margin-bottom: 20px; }
.mb-22 { margin-bottom: 22px; }
.mb-24 { margin-bottom: 24px; }
.mb-26 { margin-bottom: 26px; }
.mt-12 { margin-top: 12px; }

.heading-gap { margin: 12px 0 14px; }
.heading-gap--wide { margin: 12px 0 16px; }

/* --------------------------------------------------------------------------
   Buttons and pills
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.2;
  min-height: 46px;
  cursor: pointer;
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.btn--sm { padding: 15px 26px; font-size: 16px; }

.btn--violet { background: var(--violet); color: #fff; }
.btn--dark   { background: var(--ink); color: #fff; }
.btn--amber  { background: var(--amber); color: var(--amber-ink); }
.btn--white  { background: #fff; color: var(--ink); box-shadow: 0 2px 0 #DDD9F2; }
.btn--ghost  { border: 1.5px solid rgba(255, 255, 255, .45); color: #fff; }

/* On the amber closing band. */
.btn--ink { background: var(--ink); color: #fff; }
.btn--outline-ink {
  border: 1.5px solid rgba(46, 34, 0, .3);
  color: var(--amber-ink-2);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn-row--top { margin-top: 26px; }
.btn-row--top-lg { margin-top: 28px; }

.pill {
  padding: 9px 15px;
  border-radius: 999px;
  color: var(--violet-text);
  font-size: 14px;
  font-weight: 600;
}
.pill--white { background: #fff; }
.pill--soft  { background: var(--violet-soft); }

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15.5px;
  font-weight: 600;
  white-space: nowrap;
}
.link-arrow::after {
  content: "\2192";
  transition: transform 220ms var(--ease-out);
}
.link-arrow--sm { font-size: 14.5px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(246, 245, 252, .94);
  backdrop-filter: blur(12px);
}

.site-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--pad-x);
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand svg { flex: none; }
.brand__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -.03em;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.8vw, 22px);
  font-size: 15.5px;
  font-weight: 500;
}
.nav a {
  color: var(--ink-nav);
  white-space: nowrap;
  transition: color 180ms ease;
}
.nav a > span {
  position: relative;
  display: inline-block;
  padding-block: 4px;
}
.nav a > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav a[aria-current="page"] > span::after {
  background: var(--amber);
  transform: scaleX(1);
}

.btn-phone {
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 15.5px;
  white-space: nowrap;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out);
}
.btn-phone .icon { display: none; }
.btn-phone:active { transform: scale(0.97); }

/* --------------------------------------------------------------------------
   Hero images
   -------------------------------------------------------------------------- */

.hero-copy {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-figures {
  flex: 1.1 1 340px;
  min-width: 0;
  display: flex;
  gap: 12px;
  /* The copy beside it is short, so the row needs its own height. */
  min-height: clamp(300px, 33vw, 460px);
}
.hero-figures__main {
  flex: 1.5;
  min-width: 0;
  position: relative;
}
.hero-figures__main img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: 38% 42%;
  border-radius: 180px 180px 28px 28px;
}
.hero-figures__side {
  flex: 1;
  min-width: 0;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: 24px 24px 24px 90px;
}
.hero-figures__tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(74, 59, 196, .16);
}

.hero-portrait {
  flex: 1 1 300px;
  min-width: 0;
  height: clamp(260px, 32vw, 380px);
  object-fit: cover;
  object-position: 50% 28%;
  border-radius: 150px 150px 26px 26px;
}
.hero-portrait--tall {
  height: clamp(260px, 32vw, 400px);
  object-position: 50% 50%;
  border-radius: 180px 180px 28px 28px;
}

.hero-pair {
  flex: 1 1 300px;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hero-pair img {
  width: 100%;
  height: clamp(200px, 21vw, 290px);
  object-fit: cover;
  border-radius: 22px;
}
.hero-pair img:last-child {
  object-position: 38% 42%;
  border-radius: 22px 22px 22px 70px;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border-radius: 26px;
  padding: 26px;
  min-width: 0;
}
.card--24 { border-radius: 24px; padding: 24px; }
.card--22 { border-radius: 22px; padding: 20px 22px; }
.card--soft { background: var(--bg); }
.card--amber { background: var(--amber); color: var(--amber-ink-2); }
.card--dark { background: var(--ink); color: #fff; }

.card h3 { font-size: 20px; margin-bottom: 7px; }
.card--22 h3 { font-size: 18px; margin-bottom: 5px; }
.card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
}
.card--amber p { color: var(--amber-ink-3); }
.card--dark p { color: var(--on-dark-muted); }
.card--dark h3 { color: #fff; }

/* Tile — the padded square blocks inside white panels. */
.tile {
  min-width: 0;
  padding: 22px;
  border-radius: 22px;
  background: var(--bg);
}
.tile h3 { font-size: 19px; margin-bottom: 6px; }
.tile--sm h3 { font-size: 18px; }
.tile p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* Stat card — big number over a caption. */
.stat {
  min-width: 0;
  background: var(--surface);
  border-radius: 24px;
  padding: 24px;
}
.stat--lg { padding: 26px; }
.stat--amber { background: var(--amber); }
.stat__num {
  display: block;
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  color: var(--violet);
  line-height: 1;
}
.stat--lg .stat__num { font-size: clamp(34px, 4vw, 50px); }
.stat--amber .stat__num { color: var(--amber-ink-2); }
.stat__label {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-3);
}
.stat--amber .stat__label { color: var(--amber-ink-3); }

/* Numbered process card. */
.step {
  min-width: 0;
  background: var(--surface);
  border-radius: 24px;
  padding: 24px;
}
.step__num {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--violet);
  margin-bottom: 8px;
}
.step h3 { font-size: 19px; margin-bottom: 6px; }
.step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* Numbered card with a badge, used on the contact page. */
.step-card {
  min-width: 0;
  background: var(--surface);
  border-radius: 26px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.step-card--dark { background: var(--ink); color: #fff; }
.step-card h3 { font-size: 19px; }
.step-card--dark h3 { color: #fff; }
.step-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
}
.step-card--dark p { color: var(--on-dark-muted); }
.chip-num {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: var(--violet-soft);
  display: grid;
  place-items: center;
  color: var(--violet);
  font-weight: 700;
}
.chip-num--dark { background: rgba(255, 255, 255, .12); color: var(--amber); }

/* Service card with a photo (home page). */
.svc-card {
  min-width: 0;
  background: var(--surface);
  border-radius: 26px;
  padding: 8px 8px 22px;
  display: flex;
  flex-direction: column;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.svc-card__media {
  border-radius: 20px;
  overflow: hidden;
}
.svc-card img {
  width: 100%;
  height: 176px;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}
.svc-card__body {
  padding: 18px 16px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.svc-card h3 { font-size: 20px; margin-bottom: 8px; }
.svc-card p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
}
.svc-card .link-arrow { margin-top: auto; }

/* Full-width service row with a photo beside the copy (services page). */
.svc-row {
  background: var(--surface);
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.svc-row--flip { flex-direction: row-reverse; }
.svc-row__img {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 260px;
  object-fit: cover;
}
.svc-row__body {
  flex: 1.2 1 320px;
  min-width: 0;
  padding: clamp(22px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.svc-row__body p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Panels — the big rounded blocks
   -------------------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border-radius: 34px;
  padding: clamp(22px, 3vw, 40px);
}
.panel--tight { padding: clamp(20px, 3vw, 34px); }
.panel--36 { padding: clamp(22px, 3vw, 36px); }
.panel--soft { background: var(--violet-soft); }
.panel--dark { background: var(--ink); color: #fff; padding: clamp(24px, 3.5vw, 44px); }
.panel--dark .body { color: var(--on-dark-muted); }

.panel-card {
  flex: 1 1 280px;
  min-width: 0;
  background: var(--surface);
  border-radius: 30px;
  padding: clamp(22px, 3vw, 34px);
}
.panel-card--soft { background: var(--violet-soft); }

.side-card {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--violet-soft);
  border-radius: 28px;
  padding: clamp(22px, 3vw, 32px);
}
.side-card h3 { font-size: 21px; margin-bottom: 10px; }
.side-card p {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.65;
  color: #453F6E;
}

/* Dark split panel: copy on one side, photo on the other. */
.feature {
  background: var(--ink);
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.feature__img {
  flex: 1 1 280px;
  min-width: 0;
  min-height: 300px;
  object-fit: cover;
}
.feature__body {
  flex: 1.2 1 320px;
  min-width: 0;
  padding: clamp(26px, 3.5vw, 48px);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* "Four things we will never do" list. */
.promise {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.promise > div {
  padding-left: 16px;
  border-left: 3px solid var(--amber);
}
.promise strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
}
.promise span {
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-dark-muted);
}

/* Numbered "how support starts" list. */
.steps-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.steps-list li { display: flex; gap: 14px; }
.steps-list__num {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: rgba(255, 255, 255, .1);
  display: grid;
  place-items: center;
  color: var(--amber);
  font-weight: 700;
}
.steps-list strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
}
.steps-list li > span > span {
  font-size: 15px;
  line-height: 1.55;
  color: var(--on-dark-muted);
}

/* Funding cards inside the dark panel. */
.fund {
  min-width: 0;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .07);
}
.fund h3 { font-size: 18px; color: var(--amber); margin-bottom: 6px; }
.fund p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--on-dark);
}

/* --------------------------------------------------------------------------
   Gallery, quotes, FAQs
   -------------------------------------------------------------------------- */

.gallery-figure {
  margin: 0;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.gallery-figure img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.gallery-figure figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(34, 31, 59, .86);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.quote {
  margin: 0;
  background: var(--surface);
  border-radius: 26px;
  padding: 26px;
}
.quote p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.55;
}
.quote cite {
  font-size: 14.5px;
  color: var(--ink-3);
}
.quote--amber { background: var(--amber); color: var(--amber-ink-2); }
.quote--amber cite { color: var(--amber-ink-3); }

.quote--feature {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  background: var(--amber);
  border-radius: 28px;
  padding: clamp(22px, 3vw, 32px);
  color: var(--amber-ink-2);
}
.quote--feature p {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.3;
  letter-spacing: -.02em;
  margin: 0 0 14px;
}
.quote--feature cite { font-size: 15px; color: var(--amber-ink-3); }

.faq {
  background: var(--surface);
  border-radius: 20px;
  padding: 20px 22px;
}
.faq {
  transition: background 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.faq summary {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::after {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--violet-soft);
  /* A chevron drawn with a rotated corner, centred in the disc. */
  background-image:
    linear-gradient(to bottom, var(--violet), var(--violet)),
    linear-gradient(to bottom, var(--violet), var(--violet));
  background-repeat: no-repeat;
  background-size: 9px 2px, 2px 9px;
  background-position: center, center;
  transition: transform 260ms var(--ease-out), background-color 220ms ease;
}
.faq[open] summary::after { transform: rotate(135deg); }
/* overflow keeps the paragraph's top margin inside the measured height */
.faq__panel { overflow: hidden; }

/*
 * Modern browsers wrap a <details>'s content in ::details-content, so that is
 * the box to animate. --faq-h is the measured pixel height, set by site.js;
 * interpolate-size lets the `auto` fallback animate where it is supported.
 * Anywhere this is unsupported the disclosure simply snaps open, as it always
 * did — nothing breaks.
 */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}

@supports selector(details::details-content) {
  .faq::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 280ms var(--ease-out),
      content-visibility 280ms allow-discrete;
  }
  .faq[open]::details-content { block-size: var(--faq-h, auto); }

  @media (prefers-reduced-motion: reduce) {
    .faq::details-content { transition-duration: 120ms; }
  }
}
.faq p {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-3);
}

/* Trust strip of pills under the page content. */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.trust-strip__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-right: 6px;
}

/* --------------------------------------------------------------------------
   Closing CTA band

   Amber, not ink. It used to be the same near-black as the footer directly
   beneath it, so the two ran together into one dark slab — and the photograph
   was invisible under the overlay doing the darkening. Now the photograph
   bleeds off the right edge and dissolves into the colour, and the band is
   the loudest moment on the page, which is what a final call to action
   should be. It also gives the dark footer a clean edge to start from.
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  background: var(--amber);
}
.cta__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  /* A soft dissolve rather than a hard vertical seam against the amber. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
}
.cta__inner {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.cta__copy {
  max-width: 34rem;
  padding-block: clamp(52px, 6vw, 104px);
}
.cta__text {
  margin: 14px 0 28px;
  font-size: clamp(16.5px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--amber-ink-3);
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.form {
  flex: 1.3 1 340px;
  min-width: 0;
  background: var(--surface);
  border-radius: 34px;
  padding: clamp(22px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
}
.field--half { flex: 1 1 180px; min-width: 0; }

.field input,
.field select,
.field textarea {
  padding: 14px 16px;
  border: 1.5px solid var(--field-border);
  border-radius: 14px;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  background: var(--field);
  min-height: 48px;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 0; }
.field--error input,
.field--error select,
.field--error textarea { border-color: #C2334A; }

.field__error {
  font-size: 13.5px;
  font-weight: 500;
  color: #C2334A;
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.form__note { font-size: 13.5px; color: var(--ink-4); }
.form .btn { align-self: flex-start; }

.form-alert {
  border-radius: 20px;
  padding: 18px 20px;
  font-size: 15.5px;
  line-height: 1.6;
}
.form-alert--ok {
  background: #E8F6EE;
  border: 1.5px solid #9BD3B4;
  color: #14532D;
}
.form-alert--error {
  background: #FDECEF;
  border: 1.5px solid #F0B3BE;
  color: #7A1128;
}
.form-alert strong { display: block; margin-bottom: 4px; font-weight: 600; }

/* Honeypot — hidden from people, visible to naive bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.info-card {
  background: var(--surface);
  border-radius: 26px;
  padding: 24px;
}
.info-card--amber { background: var(--amber); color: var(--amber-ink-2); }
.info-card p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
}
.info-card p + p {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--ink-3);
}
.info-card--amber p + p { color: var(--amber-ink-3); }
.info-card--amber a { color: var(--amber-ink-2); font-weight: 600; }
.info-card__label {
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 10px;
}
.info-card--amber .info-card__label { color: var(--amber-ink-4); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--footer-text);
  /* Butts straight against the amber band above it — no strip of page
     background between the two. */
  margin-top: 0;
}
.site-footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(30px, 4vw, 56px) var(--pad-x);
}
.site-footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 4vw, 56px);
}
.site-footer__brand { flex: 1 1 260px; min-width: 0; }
/* The links column takes only what it needs, so the other two stay balanced. */
.site-footer__col   { flex: 0 1 150px; min-width: 0; }

.site-footer__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.site-footer__mark span {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.03em;
  color: #fff;
}
.site-footer p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  max-width: 34ch;
}
.contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 15px;
}
.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.55;
}
.contact-list .icon {
  flex: none;
  margin-top: 1px;
  color: var(--violet-pale);
}
.contact-list a {
  color: var(--amber);
  transition: color 180ms ease;
}
.contact-list--plain .icon { color: var(--footer-muted); }
.site-footer__heading {
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--footer-muted);
  margin-bottom: 12px;
}
.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 15px;
}
.site-footer__links a {
  color: var(--footer-text);
  transition: color 180ms ease, transform 220ms var(--ease-out);
}
.site-footer__mail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: var(--amber);
  transition: color 180ms ease;
}
.site-footer__legal {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 13.5px;
  color: var(--footer-muted);
}


/* --------------------------------------------------------------------------
   Additions used by individual pages
   -------------------------------------------------------------------------- */

.pt-strip { padding-top: clamp(30px, 4vw, 56px); }

/* Heading beside a supporting paragraph, both baseline-aligned. */
.headrow {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 26px;
}
.headrow--sm { gap: 14px; margin-bottom: 22px; }
.headrow--xs { gap: 14px; margin-bottom: 20px; }
.headrow > h2 { flex: 1 1 300px; min-width: 0; }
.headrow--sm > h2 { flex: 1 1 240px; }
.headrow > p { flex: 1 1 280px; min-width: 0; margin: 0; }
.headrow > div { flex: 1 1 260px; min-width: 0; }

.tile--white { background: var(--surface); }

/* Small "to be confirmed" note beside a panel's main copy. */
.aside-box {
  flex: 1 1 240px;
  min-width: 0;
  background: var(--bg);
  border-radius: 26px;
  padding: 24px;
}
.aside-box p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: #453F6E;
}

/* Two stacked photos beside a panel's copy. */
.photo-pair {
  flex: 1 1 240px;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.photo-pair img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 18px;
}

/* Flex-basis utilities — the column ratios the prototypes use. */
.f-1-240  { flex: 1 1 240px; }
.f-1-250  { flex: 1 1 250px; }
.f-1-260  { flex: 1 1 260px; }
.f-1-280  { flex: 1 1 280px; }
.f-1-300  { flex: 1 1 300px; }
.f-1-340  { flex: 1 1 340px; }
.f-12-300 { flex: 1.2 1 300px; }
.f-12-320 { flex: 1.2 1 320px; }
.f-12-340 { flex: 1.2 1 340px; }
.f-13-300 { flex: 1.3 1 300px; }
.f-13-320 { flex: 1.3 1 320px; }
.f-13-340 { flex: 1.3 1 340px; }
.f-14-340 { flex: 1.4 1 340px; }
.f-none   { flex: 0 0 auto; }

.mt-8  { margin-top: 8px; }
.mt-20 { margin-top: 20px; }
.mt-26 { margin-top: 26px; }
.self-start { align-self: flex-start; }

.subhead {
  margin: 8px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

.heading-gap--lg { margin: 12px 0 18px; }
.heading-gap--sm { margin: 10px 0 12px; }
.note--15 { font-size: 15px; }

.body--deep { color: #453F6E; }

.body--on-dark { color: var(--on-dark-muted); font-size: 15.5px; line-height: 1.65; }
.mt-22 { margin-top: 22px; }

.body--15 { font-size: 15.5px; line-height: 1.7; }
.body--muted.body--15 { line-height: 1.65; }

/* ==========================================================================
   Motion
   ========================================================================== */

/* Anchor jumps land below the sticky header rather than under it. */
:root { --header-h: 74px; }
[id] { scroll-margin-top: calc(var(--header-h) + 18px); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --- Press feedback -------------------------------------------------------
   :active is a real press on touch, so this needs no pointer gating. */

.btn:active,
a.pill:active,
.link-arrow:active { transform: scale(0.97); }

.svc-card:active { transform: scale(0.99); }

/* --- Hover, only where there is a real pointer ---------------------------- */

@media (hover: hover) and (pointer: fine) {
  .btn--violet:hover { background: var(--violet-dark); color: #fff; transform: translateY(-2px); }
  .btn--dark:hover   { background: var(--violet); color: #fff; transform: translateY(-2px); }
  .btn--amber:hover  { background: #fff; color: var(--amber-ink); transform: translateY(-2px); }
  .btn--white:hover  { color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(74, 59, 196, .14); }
  .btn--ghost:hover  { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }
  .btn--ink:hover    { background: var(--violet); color: #fff; transform: translateY(-2px); }
  .btn--outline-ink:hover {
    border-color: var(--amber-ink-2);
    background: rgba(255, 255, 255, .42);
    color: var(--amber-ink-2);
    transform: translateY(-2px);
  }

  .btn-phone:hover { background: var(--violet); color: #fff; transform: translateY(-2px); }

  .nav a:hover { color: var(--violet-dark); }
  .nav a:hover > span::after { transform: scaleX(1); }

  .svc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(74, 59, 196, .14);
  }
  .svc-card:hover img { transform: scale(1.05); }

  .gallery-figure:hover img { transform: scale(1.06); }

  .link-arrow:hover::after { transform: translateX(4px); }

  .faq:hover { box-shadow: 0 6px 20px rgba(74, 59, 196, .08); }
  .faq summary:hover::after { background-color: #E2DEFA; }

  .site-footer__links a:hover { color: #fff; transform: translateX(3px); }
  .contact-list a:hover,
  .site-footer__mail:hover { color: #fff; }
  .footer-office a:hover { color: var(--amber); }

  a.pill:hover { background: var(--violet); color: #fff; }

  .info-card--amber a:hover { color: var(--amber-ink-2); }
}

/* --- Sticky header behaviour ---------------------------------------------- */

.site-header {
  transition:
    transform 320ms var(--ease-out),
    box-shadow 260ms ease,
    background 260ms ease;
}
.site-header.is-scrolled {
  background: rgba(246, 245, 252, .82);
  box-shadow: 0 6px 26px rgba(34, 31, 59, .07);
}

/* --- Photo drift on the closing bands -------------------------------------
   Scroll-driven, so it costs no JavaScript. Ignored where unsupported. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
    .cta__img {
      animation: cta-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes cta-drift {
      from { transform: translateY(-4%) scale(1.09); }
      to   { transform: translateY(4%)  scale(1.09); }
    }
  }
}

/* ==========================================================================
   Mobile navigation
   ========================================================================== */

.nav-toggle { display: none; }

.nav-toggle {
  width: 46px;
  height: 46px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--violet-soft);
  color: var(--ink);
  cursor: pointer;
  transition: background 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.nav-toggle:active { transform: scale(0.94); }
.nav-toggle[aria-expanded="true"] { background: var(--ink); color: #fff; }

.nav-toggle__box {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
}
.nav-toggle__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 300ms var(--ease-out), opacity 140ms ease;
}
.nav-toggle__box span:nth-child(1) { top: 0; }
.nav-toggle__box span:nth-child(2) { top: 5px; }
.nav-toggle__box span:nth-child(3) { top: 10px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 2;
  padding: 10px var(--pad-x) calc(20px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-radius: 0 0 26px 26px;
  box-shadow: 0 26px 54px rgba(34, 31, 59, .18);
  max-height: calc(100dvh - var(--header-h) - 16px);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-14px);
  transition:
    opacity 220ms var(--ease-out),
    transform 280ms var(--ease-drawer),
    visibility 0s linear 280ms;
}
.mobile-nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
}
.mobile-nav__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 4px 6px;
  border-bottom: 1px solid #F0EEFA;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 240ms var(--ease-out),
    transform 240ms var(--ease-out),
    color 160ms ease;
}
.mobile-nav__links a .icon { color: var(--violet); transition: transform 240ms var(--ease-out); }
.mobile-nav__links a[aria-current="page"] { color: var(--violet); }
.mobile-nav__links a:active .icon { transform: translateX(4px); }

.mobile-nav__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding-top: 18px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.mobile-nav__contact .btn { align-self: stretch; gap: 9px; }
.mobile-nav__mail,
.mobile-nav__hours {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
}
.mobile-nav__mail { color: var(--violet); font-weight: 600; }
.mobile-nav__hours .icon { flex: none; }

/* Children arrive after the panel, not with it. */
.mobile-nav.is-open .mobile-nav__links a,
.mobile-nav.is-open .mobile-nav__contact { opacity: 1; transform: none; }
.mobile-nav.is-open .mobile-nav__links a:nth-child(1) { transition-delay: 60ms; }
.mobile-nav.is-open .mobile-nav__links a:nth-child(2) { transition-delay: 95ms; }
.mobile-nav.is-open .mobile-nav__links a:nth-child(3) { transition-delay: 130ms; }
.mobile-nav.is-open .mobile-nav__links a:nth-child(4) { transition-delay: 165ms; }
.mobile-nav.is-open .mobile-nav__contact { transition-delay: 200ms; }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(34, 31, 59, .38);
  backdrop-filter: blur(2px);
  opacity: 0;
  /* Inert when closed — opacity alone would leave it swallowing every click. */
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 240ms var(--ease-out),
    visibility 0s linear 240ms;
}
.nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 880px) {
  :root { --header-h: 68px; }

  .site-header__inner {
    flex-wrap: nowrap;
    gap: 10px;
    padding-block: 11px;
  }
  .brand { gap: 9px; }
  .brand svg { width: 36px; height: 36px; }
  .brand__name { font-size: 18px; }

  /* Only swap in the toggle when JavaScript can drive it; otherwise the
     wrapping text nav from the original design stays. */
  .js .nav { display: none; }
  .js .nav-toggle { display: inline-flex; }

  .js .btn-phone {
    width: 46px;
    padding: 0;
    justify-content: center;
  }
  .js .btn-phone__number { display: none; }
  .js .btn-phone .icon { display: block; }

  .site-header.is-hidden { transform: translateY(-100%); }
}

@media (max-width: 760px) {
  /* Too narrow to sit side by side: the photograph takes the top of the band
     and the copy sits on solid amber beneath it. The image comes first in the
     markup, so switching it back to static flow is all this needs. */
  .cta__img {
    position: static;
    width: 100%;
    height: clamp(190px, 44vw, 270px);
    object-position: 50% 32%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .cta__copy {
    max-width: none;
    padding-block: clamp(34px, 7vw, 54px);
  }

  .feature__img { min-height: 230px; }
  .svc-row__img { min-height: 210px; }
}

@media (max-width: 620px) {
  .panel,
  .feature,
  .svc-row,
  .form { border-radius: 26px; }
  .panel-card,
  .side-card,
  .quote--feature { border-radius: 24px; }

  .hero-figures__main img { min-height: 230px; }
  .hero-figures { min-height: 280px; }
  .hero-pair img { height: clamp(150px, 38vw, 210px) !important; }

  .headrow { align-items: flex-start; }
  .trust-strip { justify-content: flex-start; }
  .trust-strip__label { flex: 1 0 100%; margin-bottom: 2px; }

  .form .btn,
  .mobile-nav__contact .btn { align-self: stretch; }
}

@media (max-width: 420px) {
  .brand__name { font-size: 16.5px; }
  .hero-figures { gap: 9px; }
  .hero-figures__main img { border-radius: 130px 130px 22px 22px; }
  .hero-figures__side { border-radius: 20px 20px 20px 64px; }
  .hero-portrait { border-radius: 120px 120px 22px 22px; }
  .quote--feature p { font-size: 19px; }
}

/* ==========================================================================
   Reduced motion — gentler, not absent
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .svc-card:hover,
  .btn:hover,
  .btn-phone:hover,
  .site-footer__links a:hover { transform: none; }

  .svc-card:hover img,
  .gallery-figure:hover img { transform: none; }

  .mobile-nav { transition: opacity 160ms ease, visibility 0s linear 160ms; transform: none; }
  .mobile-nav.is-open { transform: none; }
  .mobile-nav.is-open .mobile-nav__links a,
  .mobile-nav.is-open .mobile-nav__contact { transform: none; transition-delay: 0s; }
  .mobile-nav__links a,
  .mobile-nav__contact { transform: none; }

  .site-header.is-hidden { transform: none; }
  .cta__img { animation: none; }
}

/* ==========================================================================
   Band components
   ========================================================================== */

.band--dark h2,
.band--dark h3 { color: #fff; }
.band--dark .eyebrow { color: var(--amber); }

/* Heading on the left, a link on the right. */
.section-head--row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
}
.section-head--row h2 { margin-bottom: 0; }

/* Figures strip: rules rather than boxes, so it reads as a summary line. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(22px, 3vw, 48px);
}
.stat-item {
  min-width: 0;
  padding-left: 18px;
  border-left: 3px solid var(--amber);
}
.stat-item__num {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  color: var(--violet);
  line-height: 1;
  margin-bottom: 9px;
  letter-spacing: -.03em;
}
.stat-item__label {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* Service cards on a white band carry no card of their own. */
.svc-card--bare {
  background: transparent;
  padding: 0;
}
.svc-card--bare .svc-card__body { padding: 18px 2px 0; }
.svc-card--bare:hover { box-shadow: none; }

/* A single large photograph beside a column of copy. */
.feature-photo {
  flex: 1 1 340px;
  min-width: 0;
  width: 100%;
  height: clamp(280px, 32vw, 440px);
  object-fit: cover;
  object-position: 30% 50%;
  border-radius: 28px;
}

/* Coverage areas, grouped by region. */
.area-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.area-group__name {
  display: block;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 700;
  margin-bottom: 11px;
}

/* Ticked list of pre-employment checks. */
.checklist {
  background: var(--surface);
  border-radius: 26px;
  padding: 26px 28px;
}
.checklist__title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 15px;
}
.checklist ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 11px 20px;
}
.checklist li {
  position: relative;
  padding-left: 25px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--violet-soft);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 7.5px;
  width: 6px;
  height: 3px;
  border-left: 1.8px solid var(--violet);
  border-bottom: 1.8px solid var(--violet);
  transform: rotate(-45deg);
}

/* ==========================================================================
   Footer offices
   ========================================================================== */

.site-footer__col--offices { flex: 1 1 280px; min-width: 0; }
.footer-offices {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14.5px;
  line-height: 1.55;
}
.footer-office a {
  display: block;
  color: #fff;
  font-weight: 600;
  transition: color 180ms ease;
}
.footer-office span { color: var(--footer-muted); }

@media (max-width: 620px) {
  .checklist { padding: 22px; }
  .section-head--row { align-items: flex-start; }
}

/* Office cards on the contact page. */
.office-card {
  min-width: 0;
  background: var(--surface);
  border-radius: 26px;
  padding: 28px;
}
.office-card__label {
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--violet);
  font-weight: 700;
  margin-bottom: 9px;
}
.office-card h3 {
  font-size: 24px;
  margin-bottom: 16px;
}
.office-card .contact-list { margin-bottom: 16px; font-size: 15.5px; }
.office-card .note { font-size: 14px; }

.contact-list--ink li { color: var(--ink-2); }
.contact-list--ink .icon { color: var(--violet); }
.contact-list--ink a { color: var(--violet); font-weight: 600; }

/* The "to be confirmed" aside sits on white bands too. */
.aside-box--white { background: var(--violet-soft); }

/* Process cards on a white band need their own tint. */
.step--soft { background: var(--bg); }

/* --------------------------------------------------------------------------
   White cards on a white band need an edge of their own.
   -------------------------------------------------------------------------- */

.band--white :is(
  .card,
  .form,
  .faq,
  .info-card:not(.info-card--amber),
  .office-card,
  .svc-row,
  .quote:not(.quote--amber),
  .stat:not(.stat--amber),
  .tile--white,
  .checklist,
  .step-card:not(.step-card--dark)
) {
  border: 1.5px solid #ECE9F8;
}

.band--white .faq { background: var(--surface); }