/* =========================================================================
   3DOM.uk — main stylesheet
   Ported from design-prototype.html. Tokens live in tokens.css.
   Responsive: fluid via clamp(); one real breakpoint at 1024px for nav/mobile.
   ========================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, figure { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-coral-text); text-decoration: none; } /* coral-text: AA on white (coral fill fails) */
a:hover { color: var(--c-violet); }
button { font-family: inherit; }
input, select, textarea, button { font-family: var(--font-body); }
::selection { background: var(--c-coral); color: #fff; }
::placeholder { color: var(--c-placeholder); }
:focus-visible { outline: 3px solid var(--c-coral); outline-offset: 2px; border-radius: 4px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--alt { background: var(--c-alt); }
.section--violet { background: var(--c-violet); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c-violet); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Typography helpers ---------- */
.font-head { font-family: var(--font-head); }
.eyebrow {
  font-size: var(--fs-eyebrow); letter-spacing: .14em; font-weight: 700;
  color: var(--c-muted); text-transform: uppercase; /* restrained neutral label (top-20 look) */
}
.eyebrow--teal { color: var(--c-muted); }
.eyebrow--coral { color: var(--c-coral-text); } /* opt back to coral for emphasis */
/* Eyebrows on dark grounds: the muted grey is 2.6:1 on violet, so lift them to the
   on-violet palette (7:1+). Coral CTA band gets a near-white. */
.section--violet .eyebrow, .why-band__inner .eyebrow, .svc-testimonial .eyebrow { color: var(--c-on-violet-soft); }
.cta-band__inner .eyebrow { color: rgba(255,255,255,.88); }
.h1 { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h1); line-height: 1.03; letter-spacing: -.02em; color: var(--c-violet); }
.h2 { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.02em; color: var(--c-violet); }
.h2--sm { font-size: var(--fs-h2-sm); line-height: 1.1; }
.lead { font-size: var(--fs-lead); color: var(--c-body); line-height: 1.65; }
.measure { max-width: 640px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 28px; border-radius: var(--r-input);
  font-weight: 700; font-size: var(--fs-btn); line-height: 1; cursor: pointer;
  border: 1.5px solid transparent; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  text-align: center;
}
.btn i { font-size: 19px; }
.btn--primary { background: var(--c-coral); color: #fff; box-shadow: var(--shadow-cta); }
.btn--primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(222,90,60,.26); }
.btn--dark { background: var(--c-violet); color: #fff; }
.btn--dark:hover { color: #fff; transform: translateY(-2px); }
/* Secondary CTA: quiet violet outline so the coral primary stays the clear action. */
.btn--outline { background: transparent; color: var(--c-violet); border-color: var(--c-line); }
.btn--outline:hover { color: var(--c-violet); background: var(--c-alt); border-color: var(--c-violet); }
.btn--sm { padding: 13px 22px; font-size: 14px; }
.btn--ghost-light { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost-light:hover { color: #fff; background: rgba(255,255,255,.24); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.textlink {
  font-size: 14.5px; font-weight: 700; color: var(--c-coral-text);
  display: inline-flex; align-items: center; gap: 6px;
}
.textlink i { font-size: 16px; }

/* ---------- Chips / badges / checklist ---------- */
.pill-chip {
  display: inline-flex; align-items: center; gap: 8px;
  /* violet-biased, not warm: the ground is white now, so a sand chip clashed */
  background: #F3F1FA; border: 1px solid #E4E0F2; border-radius: var(--r-pill);
  padding: 7px 14px; font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: .04em; color: #5B4E86;
}
.pill-chip i { font-size: 14px; color: var(--c-coral-text); }
.check { display: flex; align-items: flex-start; gap: 12px; }
.check i { color: var(--c-teal); font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.check span { font-size: 15px; color: var(--c-ink); }
.stars { color: var(--c-gold); letter-spacing: 1px; }

/* ---------- Icon tiles ---------- */
.icon-tile { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.icon-tile i { font-size: 26px; }
.icon-tile--sm { width: 46px; height: 46px; border-radius: 13px; }
.icon-tile--sm i { font-size: 23px; }
/* Restraint pass (top-20 look): tiles unified to one violet treatment instead of
   four accent colours. Revert everything via the v3.9.5 backup zip. */
.tint-coral, .tint-purple, .tint-teal, .tint-gold { background: var(--c-tint-purple); color: var(--c-violet); }

/* =========================================================================
   Utility bar + header
   ========================================================================= */
.utilitybar { background: var(--c-violet); color: var(--c-on-violet); font-size: 13px; }
.utilitybar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 8px; }
.utilitybar__group { display: flex; align-items: center; gap: 20px; }
.utilitybar span.sep { opacity: .4; }
.utilitybar i { font-size: 14px; }
.utilitybar .ti-star-filled { color: var(--c-gold); }
.utilitybar .ti-map-pin { color: var(--c-coral-text); }
.utilitybar a { color: var(--c-on-violet); }
.utilitybar b { color: #fff; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.site-logo { display: flex; align-items: center; min-width: 0; }
/* horizontal wordmark: 34px desktop, 21px on a 375px phone (clears the burger).
   object-fit keeps the aspect ratio if the box is ever narrower than the image —
   the global img{max-width:100%} reset otherwise squeezes the wordmark sideways. */
.site-logo img { height: clamp(17px, 5.6vw, 34px); width: auto; object-fit: contain; object-position: left center; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a.nav__link, .nav button.nav__link {
  padding: 9px 13px; font-size: 14.5px; font-weight: 500; color: var(--c-violet);
  border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.nav button.nav__link { font-family: inherit; background: none; border: 0; }
.nav a.nav__link:hover, .nav button.nav__link:hover, .nav .menu-item-has-children:hover > a.nav__link { background: rgba(30,14,75,.05); }
.nav .current-menu-item > a.nav__link,
.nav .current-page-ancestor > a.nav__link { color: var(--c-coral-text); }
.nav__phone { margin-left: 10px; padding: 9px 12px; font-size: 14.5px; font-weight: 700; color: var(--c-violet); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nav__phone i { font-size: 16px; color: var(--c-coral); }
.nav__phone:hover { color: var(--c-violet); }
.nav__cta { margin-left: 6px; padding: 12px 22px; border-radius: var(--r-input); background: var(--c-coral); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 18px rgba(222,90,60,.32); }
.nav__cta:hover { color: #fff; }

/* Desktop header fit (v3.24.0). At full size the logo (439px) + links + phone + CTA need
   ~1,195px of content width. Before this fix the logo was flex-shrunk to fit, which distorted
   the wordmark and left 0px between it and "Home". Rule: the logo never shrinks; instead the
   header steps down at narrower desktop widths. Measured tiers, see HANDOVER.md. */
@media (min-width: 1024px) {
  .site-logo { flex-shrink: 0; }
  .site-logo img { max-width: none; }
  .site-header .nav { margin-left: 32px; }
}
@media (min-width: 1024px) and (max-width: 1339px) {
  .site-logo img { height: 26px; }
  .site-header .nav { margin-left: 24px; }
  .nav a.nav__link, .nav button.nav__link { padding: 9px 10px; }
  .nav__cta { padding: 12px 16px; }
}
@media (min-width: 1024px) and (max-width: 1159px) {
  .site-logo img { height: 24px; }
  /* phone collapses to its icon; the number stays in the link for screen readers */
  .nav__phone { font-size: 0; gap: 0; margin-left: 4px; padding: 9px 10px; }
  .nav__phone i { font-size: 18px; }
}

/* Mega menu */
.mega { position: relative; }
.mega__panel {
  position: absolute; top: 44px; left: 50%; transform: translateX(-50%);
  width: 740px; max-width: 92vw; background: var(--c-page); border: 1px solid var(--c-line);
  border-radius: 14px; box-shadow: var(--shadow-pop); padding: 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.mega:hover .mega__panel, .mega:focus-within .mega__panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega__col > a.mega__head {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: 14px;
  color: var(--c-violet); margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid #F1ECF7;
}
.mega__col a.mega__item { display: block; font-size: 13px; color: var(--c-muted); padding: 7px 8px; border-radius: 8px; line-height: 1.4; }
.mega__col a.mega__item:hover { background: #F7F3FB; color: var(--c-violet); }

.hamburger { background: none; border: none; cursor: pointer; width: 44px; height: 44px; display: none; align-items: center; justify-content: center; color: var(--c-violet); }
.hamburger i { font-size: 28px; }

/* Mobile drawer */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 70; background: rgba(30,14,75,.5);
  backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility .2s;
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 360px);
  background: var(--c-page); box-shadow: -20px 0 60px rgba(30,14,75,.3);
  padding: 22px; display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(30px); transition: transform .22s var(--ease);
}
.drawer-overlay.is-open .drawer { transform: translateX(0); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
/* width:auto is load-bearing: without it the width stays pinned to the img's
   width attribute while height is forced to 32px, which squashed the logo. */
.drawer__top img { height: 44px; width: auto; }
.drawer__close { background: none; border: none; cursor: pointer; color: var(--c-violet); width: 40px; height: 40px; }
.drawer__close i { font-size: 26px; }
.drawer a.drawer__link { font-family: var(--font-head); font-weight: 600; font-size: 20px; color: var(--c-violet); padding: 14px 0; border-bottom: 1px solid var(--c-line); }
/* Drawer: group label above the service hubs (matches the desktop "Services"
   menu). Not a link — there is no single services page to point it at. */
.drawer__section {
  font-family: var(--font-head); font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted);
  padding: 22px 0 8px; margin: 0;
}
/* Drawer: expandable service groups */
.drawer__group { border-bottom: 1px solid var(--c-line); }
.drawer__group > summary.drawer__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 0; cursor: pointer; list-style: none;
  min-height: 48px; /* comfortable tap target */
}
.drawer__group > summary::-webkit-details-marker { display: none; }
.drawer__group > summary i { font-size: 20px; color: var(--c-coral); transition: transform .2s var(--ease); }
.drawer__group[open] > summary i { transform: rotate(180deg); }
.drawer__sub { padding: 2px 0 14px; display: flex; flex-direction: column; }
.drawer__sublink {
  display: flex; align-items: center; min-height: 44px; /* tap target */
  padding: 8px 0 8px 14px; font-size: 15.5px; color: var(--c-body);
  border-left: 2px solid var(--c-card-line); margin-left: 2px;
}
.drawer__sublink:hover { color: var(--c-coral); border-left-color: var(--c-coral); }
.drawer__sublink--all { font-weight: 700; color: var(--c-violet); }

.drawer__cta { margin-top: 22px; text-align: center; justify-content: center; }
.drawer__call { text-align: center; margin-top: 12px; padding: 15px; border-radius: var(--r-pill); border: 1.5px solid #D8CEE8; color: var(--c-violet); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.drawer__call i { font-size: 18px; color: var(--c-coral); }

/* =========================================================================
   Hero (home)
   ========================================================================= */
.hero { position: relative; overflow: hidden; padding: clamp(40px,6vw,76px) 0 clamp(48px,6vw,84px); }
.hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,440px),1fr)); gap: clamp(32px,5vw,60px); align-items: center; }
.hero h1 { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.02em; color: var(--c-violet); margin-top: 22px; }
.hero__sub { font-size: var(--fs-lead); color: var(--c-body); max-width: 520px; margin: 24px 0 30px; line-height: 1.65; }
.hero__reassure { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 13.5px; color: var(--c-muted); }
.hero__trust { display: flex; align-items: center; gap: clamp(14px,2vw,26px); margin-top: 30px; flex-wrap: wrap; font-size: 13.5px; color: var(--c-muted); }
.hero__trust b { color: var(--c-violet); }
.hero__trust .divider { width: 1px; height: 20px; background: #E2D6C2; }

/* Text-only hero (no photo yet, 4 Oct 2026): violet, like the inner page heroes
   and the phone hero, so the page does not open on a half-empty white block.
   front-page.php adds .hero--text when there is no hero photo (inc/photos.php).
   A photo hero on violet (.hero--bg-violet) shares the colour rules. */
.hero--text, .hero--bg-violet { background: var(--c-violet); }
.hero--text .hero__grid { grid-template-columns: 1fr; position: relative; } /* above the decorative arc */
.hero--text h1, .hero--bg-violet h1 { color: #fff; max-width: 760px; }
.hero--text .hero__sub, .hero--bg-violet .hero__sub { color: var(--c-on-violet); max-width: 620px; }
.hero--text .pill-chip, .hero--bg-violet .pill-chip { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
.hero--text .pill-chip i, .hero--bg-violet .pill-chip i { color: #F09277; }
.hero--text .btn--outline, .hero--bg-violet .btn--outline { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.hero--text .btn--outline:hover, .hero--bg-violet .btn--outline:hover { color: #fff; background: rgba(255,255,255,.18); border-color: #fff; }
.hero--text .hero__reassure, .hero--bg-violet .hero__reassure { color: var(--c-on-violet-mut); }

/* Photo hero (team shoot, 11 Oct 2026). The crops are composed by hand, so the
   photo is centred rather than biased upward. At 1024px+ the photo runs to the
   screen edge with no back layer (Photo bleed, below); on tablets the arch shows,
   with a violet back rather than the old teal. */
.hero--photo .arch-media__front img { object-position: 50% 50%; }
.hero--photo .arch-media__back { background: var(--c-violet); }
.hero--bg-violet .arch-media__back { background: rgba(255,255,255,.10); }

/* Arch media block */
.arch-media { position: relative; min-height: clamp(300px,38vw,430px); max-width: 520px; width: 100%; margin: 0 auto; }
/* Centred arch. The front fills the (centred) container; the teal back sits
   directly behind, nudged down for a symmetric depth peek. (Was offset right to
   leave room for the floating review card, which has been removed.) */
.arch-media__back { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateY(16px); background: var(--c-teal); border-radius: clamp(120px,16vw,180px) clamp(120px,16vw,180px) 20px 20px; }
.arch-media__front {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: linear-gradient(158deg, #43248A, #1E0E4B);
  border-radius: clamp(120px,16vw,180px) clamp(120px,16vw,180px) 20px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; box-shadow: 0 26px 60px rgba(30,14,75,.28); overflow: hidden;
}
.arch-media__front img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; position: absolute; inset: 0; border-radius: inherit; } /* bias the crop upward: faces sit in the upper-middle of most photos */
.arch-media__ph { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.arch-media__ph i { font-size: 26px; color: #fff; }
.arch-media__label { font-size: 12px; font-family: monospace; max-width: 170px; line-height: 1.5; color: var(--c-meta); }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .review-float { animation: none; } * { scroll-behavior: auto !important; } }

/* Credential strip.
   Label sits above the marks rather than inline: with six marks in the row, an
   inline label pushed the last one onto its own line and orphaned it. Stacking
   also means adding a mark later cannot break the layout. */
.credstrip { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: var(--c-alt); }
/* A claim on the left, the proof on the right. The logos support a sentence
   rather than floating in a band of their own, which is what made the old
   version read as bolted on. */
.credstrip__grid {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 4vw, 56px); flex-wrap: wrap;
  padding-block: clamp(20px, 2.4vw, 26px);
}
/* 32ch: five marks make the right-hand group ~676px, so the claim has to give way
   to keep both on one row. Wraps to three short lines, which reads fine beside a
   logo row. */
.credstrip__claim {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(15px, 1.5vw, 16.5px); color: var(--c-violet);
  line-height: 1.45; max-width: 32ch; margin: 0;
}
.credstrip__proof { text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; margin-left: 4px;
  font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--c-muted);
}
.credstrip__proof .stars { font-size: 13px; }
.credstrip__proof b { color: var(--c-violet); }
.credstrip__proof:hover b { color: var(--c-coral-text); }

.credstrip__marks {
  display: flex; align-items: center; gap: clamp(16px, 2.2vw, 28px);
  flex-wrap: wrap;
}
/* Constrained on both axes so no single mark dominates: height alone let the
   wide wordmarks sprawl. */
.accred { max-height: 30px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
/* Xero capsules: 3.69:1, and unlike the bare wordmarks they carry their own filled
   background. Two of them plus three wordmarks is a wide row, so they run slightly
   smaller than they would alone. */
.accred--xero,
.accred--xero_certified { max-height: 30px; }
.accred--brightpay { max-height: 24px; }   /* wordmark only: reads huge at equal height */
.accred--quickbooks { max-height: 27px; }
/* 4.14:1 and edge-to-edge with no internal padding, so it needs the least height
   of the set. Height only, never width: FreeAgent's terms forbid altering the ratio. */
.accred--freeagent { max-height: 21px; }
.accred--firmpulse { max-height: 22px; }      /* wide 'Powered by' lock-up: cap height like the other wordmarks */
.accred--ifa { max-height: 56px; }         /* footer/other contexts only */

@media (max-width: 900px) {
  .credstrip__grid { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .credstrip__claim { max-width: none; }
  .credstrip__marks { justify-content: center; }
}
@media (max-width: 560px) {
  .credstrip__marks { gap: 16px; }
  .accred--xero { max-height: 34px; }
  .accred--brightpay { max-height: 21px; }
  .accred--quickbooks { max-height: 23px; }
}


/* =========================================================================
   Generic section header
   ========================================================================= */
.sec-head { max-width: 640px; margin: 0 auto clamp(34px,4vw,48px); text-align: center; }
.sec-head .eyebrow { margin-bottom: 14px; display: block; }
.sec-head--left { margin-inline: 0; text-align: left; }
.sec-topbar { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: clamp(28px,3vw,42px); }

/* Grids */
.grid { display: grid; gap: clamp(16px,1.8vw,22px); }
.grid--auto-220 { grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr)); }
.grid--auto-240 { grid-template-columns: repeat(auto-fit, minmax(min(100%,240px),1fr)); }
.grid--auto-260 { grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr)); }
.grid--auto-280 { grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); }
.grid--auto-290 { grid-template-columns: repeat(auto-fit, minmax(min(100%,290px),1fr)); }
.grid--auto-300 { grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); }

/* ---------- Cards ---------- */
.card { background: var(--c-surface); border: 1px solid var(--c-card-line); border-radius: var(--r-card); padding: 26px; display: block; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
a.card:hover { border-color: var(--c-coral); transform: translateY(-4px); box-shadow: var(--shadow-card); color: inherit; }
.card h3 { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--c-violet); margin-bottom: 6px; }
.card p { font-size: 14px; color: var(--c-muted); margin-bottom: 14px; line-height: 1.6; }
.card__more { font-size: 13.5px; font-weight: 700; color: var(--c-coral-text); display: inline-flex; align-items: center; gap: 5px; }
.card__more i { font-size: 15px; }

/* Pillars (home services) */
a.pillar:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(30,14,75,.12); color: inherit; }
/* dark pillar variant */

/* The homepage "3DOM difference" section (.why) was removed on 4 Oct 2026; its styles went with it. */

/* Proof / testimonial + stats */
.bigquote { font-family: var(--font-head); font-weight: 600; font-size: clamp(22px,2.4vw,30px); color: var(--c-violet); line-height: 1.32; letter-spacing: -.01em; }
.quote-by { display: flex; align-items: center; gap: 13px; margin-top: 24px; }
.quote-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--c-purple); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.quote-by strong { font-family: var(--font-head); font-weight: 700; color: var(--c-violet); font-size: 15px; display: block; }
.quote-by small { font-size: 13px; color: var(--c-muted); }

/* Credibility stat band (top-20 style): a full-width row of key numbers, high on the page. */
.statband { border-block: 1px solid var(--c-line); background: var(--c-page); }
.statband__grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; }
.statband__item { padding: clamp(22px,3vw,34px) 18px; text-align: center; border-left: 1px solid var(--c-line); }
.statband__item:first-child { border-left: 0; }
.statband__n { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(24px,2.6vw,34px); color: var(--c-violet); line-height: 1; letter-spacing: -.01em; }
.statband__label { display: block; margin-top: 9px; font-size: 13.5px; color: var(--c-muted); line-height: 1.4; }
@media (max-width: 720px) {
  .statband__grid { grid-template-columns: 1fr 1fr; }
  .statband__item:nth-child(odd) { border-left: 0; }
  .statband__item:nth-child(n+3) { border-top: 1px solid var(--c-line); }
}

/* Proof: single centred testimonial (stats moved to the band above). */
.proof__solo { max-width: 720px; margin-inline: auto; text-align: center; }
.proof__solo .quote-by { justify-content: center; }
.reviews-live { margin-top: 56px; }
.reviews-live__head { text-align: center; margin-bottom: 28px; }
.reviews-live__head .h2 { margin-bottom: 10px; }
.reviews-live__link { font-size: 15px; font-weight: 600; color: var(--c-coral-text); text-decoration: underline; text-underline-offset: 3px; }
.reviews-live .ti-widget { font-family: inherit; }

/* How it works steps */
.step { background: var(--c-surface); border: 1px solid var(--c-card-line); border-radius: var(--r-card); padding: clamp(24px,2.4vw,32px); position: relative; }
.step__num { width: 44px; height: 44px; border-radius: 50%; background: var(--c-violet); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.step h3 { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--c-violet); margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--c-muted); line-height: 1.6; }

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq { background: var(--c-surface); border: 1px solid var(--c-card-line); border-radius: 16px; overflow: hidden; }
.faq__q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-family: var(--font-head); font-weight: 600; font-size: clamp(15px,1.5vw,17px); color: var(--c-violet); }
.faq__q i { font-size: 20px; color: var(--c-coral); flex-shrink: 0; transition: transform .2s var(--ease); }
.faq[open] .faq__q i { transform: rotate(45deg); }
.faq__a { padding: 0 22px 20px; font-size: 14.5px; color: var(--c-body); line-height: 1.65; }
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq-narrow { max-width: 820px; margin-inline: auto; }

/* =========================================================================
   Page hero (interior — violet band with breadcrumb)
   ========================================================================= */
.page-hero { background: var(--c-violet); position: relative; overflow: hidden; padding: clamp(44px,6vw,72px) 0; }
.page-hero__arc { position: absolute; right: -70px; top: -60px; width: 300px; height: 300px; background: rgba(255,255,255,.05); border-radius: 0 0 300px 300px; }
.page-hero .wrap { position: relative; }
.page-hero h1 { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h1); letter-spacing: -.02em; color: #fff; line-height: 1.03; max-width: 720px; }
.page-hero__sub { font-size: var(--fs-lead); color: var(--c-on-violet); margin-top: 16px; max-width: 600px; }
.page-hero__local { font-size: 15.5px; margin-top: 10px; color: var(--c-on-violet-soft); } /* service-specific Wirral/Liverpool line (4 Oct 2026) */
.page-hero .btn { margin-top: 26px; }
.breadcrumb { font-size: 13px; color: var(--c-on-violet-mut); margin-bottom: 14px; }
.breadcrumb a { color: var(--c-on-violet); }
.breadcrumb a:hover { color: #fff; }

/* =========================================================================
   About
   ========================================================================= */
.about-story__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,320px),1fr)); gap: clamp(32px,5vw,56px); align-items: center; }
.about-story__grid p { color: var(--c-body); margin-bottom: 14px; font-size: 15.5px; line-height: 1.7; }
.about-story__grid p b { color: var(--c-violet); }
.about-story__grid--solo { grid-template-columns: 1fr; } /* no office photo yet (4 Oct 2026) */
.about-story__grid--solo > div { max-width: 760px; }
.arch-media--purple .arch-media__back { left: 0; right: auto; background: var(--c-purple); border-radius: 22px 22px clamp(150px,19vw,200px) clamp(150px,19vw,200px); }
.arch-media--purple .arch-media__front { left: auto; right: 0; width: 82%; border-radius: 22px 22px clamp(140px,18vw,190px) clamp(140px,18vw,190px); }
/* Senior leadership: photo beside the bio (not a centred avatar). Two per row on
   desktop, so three people read as part of a larger team rather than the whole of
   it; one per row on mobile. Photo slot is ready for the shoot. */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px),1fr));
  gap: clamp(16px,1.8vw,22px); max-width: 760px; margin-inline: auto;
}
.team-card { display: flex; align-items: flex-start; gap: 18px; text-align: left; }
.team-card__photo {
  width: 96px; height: 112px; flex: none; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__initials { font-family: var(--font-head); font-weight: 700; font-size: 28px; }
.team-card__meta { min-width: 0; }
.team-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--c-violet); }
.team-card__role { color: var(--c-coral-text); font-weight: 600; font-size: 13px; margin: 3px 0 9px; }
.team-card__bio { font-size: 14px; color: var(--c-muted); line-height: 1.6; }
@media (max-width: 420px) {
  .team-card__photo { width: 76px; height: 90px; }
}
.value { border-top: 2px solid var(--c-coral); padding-top: 18px; }
.value h3 { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--c-violet); margin-bottom: 8px; }
.value p { font-size: 14px; color: var(--c-muted); line-height: 1.6; }

/* =========================================================================
   Service detail
   ========================================================================= */
.svc-included__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,320px),1fr)); gap: clamp(32px,5vw,56px); align-items: center; }
.svc-included__list { display: flex; flex-direction: column; gap: 14px; }
/* No service photo yet (4 Oct 2026): the list runs full width in two columns. */
.svc-included__grid--solo { grid-template-columns: 1fr; }
.svc-included__grid--solo .svc-included__list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 40px; } /* two, never three */
@media (max-width: 720px) { .svc-included__grid--solo .svc-included__list { grid-template-columns: 1fr; } }
.svc-media { min-height: clamp(300px,38vw,400px); background: linear-gradient(158deg,#43248A,#1E0E4B); border-radius: var(--r-card-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; box-shadow: 0 26px 60px rgba(30,14,75,.22); overflow: hidden; position: relative; }
.svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-media .arch-media__ph { background: rgba(255,255,255,.12); }
.whofor__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); gap: clamp(28px,4vw,48px); align-items: center; }
.whofor__grid p { font-size: 16px; color: var(--c-body); margin-top: 14px; line-height: 1.7; }
.fees-card { background: var(--c-surface); border: 1px solid var(--c-card-line); border-radius: var(--r-card-lg); padding: clamp(26px,3vw,34px); box-shadow: 0 16px 40px rgba(30,14,75,.06); }
.fees-card__label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .1em; color: var(--c-muted); margin-bottom: 12px; }
.fees-card--solo { max-width: 640px; margin-inline: auto; } /* fees card now stands alone (Who-it's-for removed) */
/* Fees and Why 3DOM side by side on service pages that have a Why line
   (4 Oct 2026, Hollie's feedback); they stack once there is no room for two. */
.fees-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,360px),1fr)); gap: clamp(18px,2.4vw,28px); align-items: stretch; max-width: 1100px; }
.fees-why .why-band__inner { border-radius: var(--r-card-lg); } /* match the fees card beside it */
.fees-why .why-band__body p { font-size: clamp(18px,1.7vw,21px); } /* half width, so a step down from the full-width band */
.fees-card__label i { font-size: 16px; }
.fees-card p { font-size: 16px; color: var(--c-ink); line-height: 1.6; margin-bottom: 20px; }
.fees-card .btn-row { gap: 10px; }
.why-band { max-width: 900px; margin-inline: auto; }
.why-band__inner { background: var(--c-violet); border-radius: 16px; padding: clamp(30px,4vw,48px); position: relative; overflow: hidden; }
.why-band__arc { position: absolute; right: -40px; bottom: -70px; width: 220px; height: 220px; background: rgba(15,169,143,.16); border-radius: 220px 220px 0 0; }
.why-band__row { position: relative; display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.why-band__icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(15,169,143,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.why-band__icon i { font-size: 26px; color: var(--c-teal-bright); }
.why-band__body { flex: 1; min-width: 260px; }
.why-band__body p { font-family: var(--font-head); font-weight: 600; font-size: clamp(19px,2.2vw,25px); color: #fff; line-height: 1.4; letter-spacing: -.01em; }
.svc-testimonial { background: var(--c-purple); text-align: center; }
.svc-testimonial .wrap { max-width: 820px; }
.svc-testimonial p { font-family: var(--font-head); font-weight: 600; font-size: clamp(20px,2.4vw,28px); color: #fff; line-height: 1.35; letter-spacing: -.01em; }
.svc-testimonial .stars { font-size: 20px; margin-bottom: 16px; display: block; }
.svc-testimonial small { font-size: 14px; color: #E4D6EE; margin-top: 18px; display: block; }
.related-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px),1fr)); gap: clamp(14px,1.6vw,20px); }
.related-card { background: var(--c-surface); border: 1px solid var(--c-card-line); border-radius: 16px; padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.related-card:hover { border-color: var(--c-coral); color: inherit; }
.related-card span { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--c-violet); }
.related-card i { color: var(--c-coral); font-size: 20px; }

/* =========================================================================
   Landing page (ads)
   ========================================================================= */
.lp-nav { display: flex; align-items: center; gap: 10px; }
.lp-hero { padding: clamp(28px,4vw,56px) 0 clamp(32px,4vw,60px); }
.lp-hero__grid {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(28px,4vw,56px); align-items: start;
}
.lp-hero h1 {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(30px,3.8vw,50px); line-height: 1.05; letter-spacing: -.02em;
  color: var(--c-violet); margin: 18px 0 14px; text-wrap: balance;
}
.lp-hero__sub { font-size: var(--fs-lead); color: var(--c-body); line-height: 1.6; max-width: 46ch; }
.lp-ticks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--c-ink); }
.lp-ticks i { color: var(--c-teal); font-size: 19px; flex-shrink: 0; margin-top: 2px; }
.lp-hero__proof {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--c-line);
  font-size: 14px; color: var(--c-muted);
}
.lp-hero__proof b { color: var(--c-violet); }
.lp-hero__sep { width: 1px; height: 18px; background: var(--c-line); }
.lp-hero__call {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 16px; color: var(--c-violet);
}
.lp-hero__call i { color: var(--c-coral-text); font-size: 17px; }
.lp-google { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; } .lp-google:hover b { color: var(--c-coral-text); }
.lp-hero__hours { font-size: 13px; }
.lp-form { position: sticky; top: 96px; }
.lp-form h2 { font-family: var(--font-head); font-weight: 700; font-size: 21px; color: var(--c-violet); margin-bottom: 6px; }
.lp-form > p { font-size: 13.5px; color: var(--c-muted); margin-bottom: 20px; }

.lp-aud { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,290px),1fr)); gap: clamp(16px,2vw,24px); }
.lp-aud__item { display: flex; align-items: flex-start; gap: 12px; }
.lp-aud__item i { color: var(--c-teal); font-size: 20px; flex-shrink: 0; margin-top: 3px; }
.lp-aud__item h3 { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--c-violet); margin-bottom: 4px; }
.lp-aud__item p { font-size: 14px; color: var(--c-muted); line-height: 1.55; }

@media (max-width: 900px) {
  /* Form above the fold matters more than the pitch on a paid click. */
  .lp-hero__grid { grid-template-columns: 1fr; }
  .lp-form { position: static; }
  .lp-hero__pitch { order: 1; }
  .lp-form { order: 2; }
}
@media (max-width: 640px) {
  .lp-hero { padding-top: 22px; }
  .lp-hero h1 { margin-top: 14px; }
  .lp-hero__proof { gap: 9px; }
  .lp-hero__sep { display: none; }
}

/* Bank cards (company formation page) */
.bank-card { display: flex; flex-direction: column; }
.bank-card__logo { height: 22px; width: auto; margin-bottom: 12px; align-self: flex-start; }
.bank-card__name { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--c-violet); margin-bottom: 2px; }
.bank-card p { margin-bottom: 0; }
.bank-card .team-card__role { margin-top: 0; }
.bank-card__link { margin-top: auto; padding-top: 16px; }

/* =========================================================================
   Contact
   ========================================================================= */
.contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); gap: clamp(32px,5vw,52px); align-items: start; }
.contact-detail { display: flex; gap: 14px; align-items: center; }
.contact-detail .icon-tile--sm { width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0; }
.contact-detail strong { font-family: var(--font-head); font-weight: 700; color: var(--c-violet); font-size: 15px; display: block; }
.contact-detail span { color: var(--c-body); font-size: 14.5px; }
.contact-detail span.contact-detail__note { display: block; font-size: 13px; color: var(--c-muted); margin-top: 2px; } /* Paul, 4 Oct 2026 */
/* Phone, email and address are links: show it on hover and keyboard focus. */
a.contact-detail:hover strong + span, a.contact-detail:focus-visible strong + span { color: var(--c-coral-text); text-decoration: underline; text-underline-offset: 3px; }
.form-card { background: var(--c-surface); border: 1px solid var(--c-card-line); border-radius: var(--r-card-lg); padding: clamp(24px,3vw,34px); box-shadow: 0 20px 48px rgba(30,14,75,.07); }
.form-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--c-violet); margin-bottom: 6px; }
.form-card > p { font-size: 13.5px; color: var(--c-muted); margin-bottom: 22px; }
.map-block { background: #EDE9F2; height: clamp(260px,30vw,380px); display: flex; align-items: center; justify-content: center; color: var(--c-meta-soft); font-size: 14px; overflow: hidden; }
.map-block i { font-size: 26px; margin-right: 8px; }
/* Complianz wraps the map in its own consent placeholder div. As a flex item
   that wrapper shrank to the iframe's default 300px, so the map sat as a small
   square in a wide grey strip (Hollie, 29 Sep). Make wrapper and map fill it.
   !important: before consent Complianz appends .cmplz-placeholder-N { height }
   sized to its 1280x920 picture (~0.72 x the width), which would spill over the
   form's Send button and the footer; overflow:hidden above is the backstop. */
.map-block > div, .map-block > iframe { width: 100%; height: 100% !important; }
.map-block iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Form fields (native + Gravity Forms) */
.field { margin-bottom: 16px; }
.field label, .gfield_label { display: block; font-size: 13px; font-weight: 600; color: var(--c-violet); margin-bottom: 6px; }
/* Optional-field hint: signals a shorter form without dropping the fields. */
.field label .opt { font-weight: 400; color: var(--c-meta); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,180px),1fr)); gap: 14px; margin-bottom: 16px; }
input[type=text], input[type=email], input[type=tel], input[type=url], select, textarea, .ginput_container input, .ginput_container select, .ginput_container textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--c-line); border-radius: var(--r-input);
  /* 16px: anything smaller makes iOS zoom the page on focus. */
  font-size: 16px; background: var(--c-page); color: var(--c-ink); min-height: 48px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--c-coral); outline: none; box-shadow: 0 0 0 3px rgba(222,90,60,.16);
}
textarea { resize: vertical; min-height: 96px; }
.form-reassure { text-align: center; font-size: 12.5px; color: var(--c-meta-soft); margin-top: 12px; }
.form-reassure i { font-size: 13px; }

/* Gravity Forms (rendered with theme="gravity-theme"): match the native form above.
   GF's theme.min.css loads after main.css, so these carry a .site-main prefix to win. */
.site-main .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: 16px; }
.site-main .gform_wrapper.gravity-theme .gfield_label { font-size: 13px; font-weight: 600; color: var(--c-violet); margin-bottom: 6px; line-height: 1.3; }
.site-main .gform_wrapper.gravity-theme .gfield_required { color: var(--c-coral-text); }
.site-main .gform_wrapper.gravity-theme .gform_required_legend { display: none; }
.site-main .gform_wrapper.gravity-theme input:not([type=submit]):not([type=button]), .site-main .gform_wrapper.gravity-theme select, .site-main .gform_wrapper.gravity-theme textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--c-line); border-radius: var(--r-input);
  font-family: inherit; font-size: 16px; line-height: 1.4; background: var(--c-page); color: var(--c-ink); min-height: 48px;
}
.site-main .gform_wrapper.gravity-theme textarea { min-height: 96px; resize: vertical; }
/* GF sets line-height:2 on inputs through a long :not() chain; this selector outweighs it. */
.site-main .gform_wrapper.gravity-theme .ginput_container input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
.site-main .gform_wrapper.gravity-theme .ginput_container select:not([multiple]):not([size]) { line-height: 1.4; height: 48px; }
.site-main .gform_wrapper.gravity-theme input:focus, .site-main .gform_wrapper.gravity-theme select:focus, .site-main .gform_wrapper.gravity-theme textarea:focus {
  border-color: var(--c-coral); outline: none; box-shadow: 0 0 0 3px rgba(222,90,60,.16);
}
.site-main .gform_wrapper.gravity-theme .gform_footer { padding: 0; margin: 4px 0 0; }
.site-main .gform_wrapper.gravity-theme .gform_button {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  padding: 15px 28px; border-radius: var(--r-input); border: 1.5px solid transparent;
  font-family: inherit; font-weight: 700; font-size: var(--fs-btn); line-height: 1; cursor: pointer;
  background: var(--c-coral); color: #fff; box-shadow: var(--shadow-cta);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.site-main .gform_wrapper.gravity-theme .gform_button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(222,90,60,.26); }
.site-main .gform_wrapper.gravity-theme .gfield_validation_message, .site-main .gform_wrapper.gravity-theme .validation_message { font-size: 13px; color: var(--c-coral-text); background: transparent; border: 0; padding: 6px 0 0; }
.site-main .gform_wrapper.gravity-theme .gform_validation_errors { border-radius: var(--r-input); border: 1px solid var(--c-coral); box-shadow: none; }

/* =========================================================================
   Blog
   ========================================================================= */
.blog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.blog-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.blog-cat {
  display: inline-flex; align-items: center; min-height: 44px; /* tap target */
  padding: 8px 18px; border-radius: var(--r-pill); border: 1px solid var(--c-line);
  background: var(--c-page); color: var(--c-body); font-size: 14px; font-weight: 600; cursor: pointer;
}
.blog-cat.is-active, .blog-cat:hover { background: var(--c-violet); border-color: var(--c-violet); color: #fff; }
.blog-search { position: relative; width: 260px; max-width: 100%; }
.blog-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-meta-soft); font-size: 17px; }
.blog-search input { padding-left: 40px; border-radius: var(--r-pill); }
.post-card { background: var(--c-surface); border: 1px solid var(--c-card-line); border-radius: var(--r-card); overflow: hidden; padding: 0; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); color: inherit; border-color: var(--c-card-line); }
.post-card__img { height: 170px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); background: linear-gradient(135deg,#791E94,#1E0E4B); overflow: hidden; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; }
.post-card__img i { font-size: 38px; }
.post-card__body { padding: 22px; }
.post-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.post-card__cat { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--c-coral-text); text-transform: uppercase; }
.post-card__date { font-size: 12px; color: var(--c-meta); }
.post-card__read { font-size: 12px; color: var(--c-meta); }
.post-card__read::before { content: "\00b7"; margin-right: 8px; color: var(--c-meta); }
.post-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--c-violet); line-height: 1.25; margin-bottom: 8px; }
.post-card p { font-size: 13.5px; color: var(--c-muted); line-height: 1.6; }

/* Article */
.article { width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(36px,5vw,56px) var(--gutter) clamp(44px,6vw,80px); }
.article__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.article__meta .cat { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--c-coral-text); text-transform: uppercase; }
.article__meta .date { font-size: 13px; color: var(--c-meta); }
.article h1 { font-family: var(--font-head); font-weight: 700; font-size: clamp(30px,4.4vw,44px); letter-spacing: -.02em; color: var(--c-violet); line-height: 1.1; margin-bottom: 20px; }
.article__byline { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--c-card-line); }
.article__byline .quote-avatar { width: 42px; height: 42px; font-size: 15px; }
.article__byline strong { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--c-violet); display: block; }
.article__byline small { font-size: 12.5px; color: var(--c-meta-soft); }
.article__hero { height: clamp(220px,32vw,320px); background: linear-gradient(135deg,#791E94,#1E0E4B); border-radius: var(--r-card); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); margin-bottom: 32px; overflow: hidden; }
.article__hero img { width: 100%; height: 100%; object-fit: cover; }
.article__body { font-size: clamp(16px,1.7vw,17px); color: #3a3452; line-height: 1.75; }
.article__body p { margin-bottom: 20px; }
.article__body h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(22px,2.6vw,25px); color: var(--c-violet); margin: 32px 0 14px; letter-spacing: -.01em; }
.article__body h3 { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--c-violet); margin: 26px 0 12px; }
.article__body ul, .article__body ol { margin: 0 0 20px; padding-left: 22px; }
.article__body li { margin-bottom: 8px; }
.article__body blockquote { background: var(--c-alt); border-left: 3px solid var(--c-coral); border-radius: 0 12px 12px 0; padding: 20px 24px; margin: 28px 0; font-size: 17px; color: #4a4360; font-style: italic; }
.article__body img { border-radius: var(--r-card); margin: 24px 0; }
/* Homepage 'Where we are' band (local SEO, 4 Oct 2026). White with a hairline above, like the stat band;
   sits between Who we help (white) and the lavender proof section. Reuses .wrap, .eyebrow, .h2.h2--sm, .textlink. */
.local-band { border-top: 1px solid var(--c-line); background: var(--c-page); }
.local-band__grid {
  display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: 14px clamp(24px,4vw,64px); align-items: start;
  padding-block: clamp(32px,3.6vw,48px);
}
.local-band .eyebrow { display: block; margin-bottom: 12px; }
.local-band__body { padding-top: 26px; } /* first line of copy lines up with the H2, not the eyebrow */
.local-band__body p { font-size: 16px; color: var(--c-body); line-height: 1.7; max-width: 68ch; }
.local-band__links { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 10px; }
.local-band__links .textlink { padding-block: 6px; } /* about 35px tall: a comfortable tap target */
@media (max-width: 900px) {
  .local-band__grid { grid-template-columns: 1fr; }
  .local-band__body { padding-top: 0; }
}
/* Related services under each article (4 Oct 2026); the CTA band follows it. */
.article__related { margin-top: 40px; }
.article__related + .article__cta { margin-top: 24px; }
.article__cta { background: var(--c-violet); border-radius: var(--r-card); padding: 28px; margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.article__cta strong { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: #fff; display: block; }
.article__cta small { font-size: 14px; color: var(--c-on-violet); margin-top: 4px; display: block; }

/* =========================================================================
   Legal pages
   ========================================================================= */
.legal { width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(44px,6vw,56px) var(--gutter) clamp(44px,6vw,80px); }
.legal h1 { font-family: var(--font-head); font-weight: 700; font-size: clamp(30px,4.4vw,44px); letter-spacing: -.02em; color: var(--c-violet); margin-bottom: 8px; }
.legal__updated { font-size: 14px; color: var(--c-meta-soft); margin-bottom: 32px; }
.legal__body { font-size: 15.5px; color: #4a4360; line-height: 1.75; }
.legal__body p { margin-bottom: 18px; }
.legal__body h2 { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--c-violet); margin: 28px 0 12px; }
.legal__body ul { margin: 0 0 18px; padding-left: 22px; }
.legal__body li { margin-bottom: 8px; }

/* =========================================================================
   Pre-footer CTA band
   ========================================================================= */
.cta-band { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) clamp(56px,7vw,90px); }
.cta-band__inner { background: var(--c-coral); border-radius: 16px; padding: clamp(34px,4.5vw,64px); text-align: center; position: relative; overflow: hidden; }
.cta-band__a1 { position: absolute; left: -40px; top: -40px; width: 200px; height: 200px; background: rgba(255,255,255,.1); border-radius: 0 0 200px 200px; }
.cta-band__a2 { position: absolute; right: -30px; bottom: -70px; width: 220px; height: 220px; background: rgba(255,255,255,.08); border-radius: 220px 220px 0 0; }
.cta-band__content { position: relative; max-width: 600px; margin: 0 auto; }
.cta-band h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(26px,3.6vw,42px); color: #fff; letter-spacing: -.02em; line-height: 1.08; }
.cta-band p { color: #FCE3DB; margin-top: 14px; font-size: var(--fs-lead); }
.cta-band .btn-row { justify-content: center; margin-top: 28px; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--c-violet); color: var(--c-on-violet); padding: clamp(48px,6vw,72px) 0 26px; }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,200px),1fr)); gap: clamp(28px,3vw,44px); }
.site-footer__brand img { height: 60px; width: auto; margin-bottom: 16px; }
.site-footer__brand p { font-size: 14px; color: var(--c-on-violet-soft); max-width: 300px; line-height: 1.6; }
/* Social lives in the bottom bar as a peer of the legal links — a plain inline
   link, not a pill. In the brand column a lone icon/pill kept reading as a stray
   button; next to "Privacy policy" it just reads as another link. */
.site-footer__bar-end { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; }
.footer-social { display: flex; align-items: center; gap: 16px; }
.footer-social__link { display: inline-flex; align-items: center; gap: 7px; color: var(--c-on-violet-mut); min-height: 44px; margin: 0; }
.footer-social__link i { font-size: 16px; }
.footer-social__link:hover { color: #fff; }
/* 'Powered by FirmPulse' lock-up in the bottom bar: scaled to the bar's small text. */
.footer-powered { height: 18px; width: auto; opacity: .92; }
.footer-powered-link:hover .footer-powered { opacity: 1; }
.accred-link { display: inline-flex; align-items: center; border: 0; }
.site-footer h4 { color: #fff; font-family: var(--font-head); font-size: 14px; margin-bottom: 16px; }
/* Footer links: tap target comes from padding, not min-height. min-height on a
   flex item with no text to fill it just produced 44px of dead air per link,
   which made the mobile footer enormous. Padding gives the same hit area and
   keeps the list visually tight. */
.site-footer a {
  color: var(--c-on-violet); display: block;
  padding: 7px 0; font-size: 14px; line-height: 1.5;
}
.site-footer a:hover { color: #fff; }
.site-footer .footer-contact p { color: var(--c-on-violet); margin-bottom: 11px; font-size: 13.5px; line-height: 1.5; }
.site-footer .footer-contact a.phone { color: #fff; font-weight: 700; font-size: 14.5px; margin-bottom: 8px; }
.site-footer .footer-contact .hours { color: var(--c-on-violet-mut); font-size: 13px; }
.site-footer__bar { border-top: 1px solid rgba(255,255,255,.15); margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--c-on-violet-mut); line-height: 1.7; }
.site-footer__bar nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer__bar a { color: var(--c-on-violet-mut); display: inline-flex; align-items: center; min-height: 44px; margin: 0; }

/* =========================================================================
   Mobile sticky action bar + chat widget
   ========================================================================= */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none; gap: 10px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: var(--r-pill); font-weight: 700; font-size: 15px; }
.mobile-bar .call { flex: 1; border: 1.5px solid #D8CEE8; color: var(--c-violet); }
.mobile-bar .call i { font-size: 18px; color: var(--c-coral); }
.mobile-bar .book { flex: 2; background: var(--c-coral); color: #fff; box-shadow: 0 8px 20px rgba(222,90,60,.34); }

.chat-btn { position: fixed; right: 24px; bottom: 24px; width: 58px; height: 58px; border-radius: 50%; background: var(--c-violet); border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(30,14,75,.4); cursor: pointer; z-index: 58; }
.chat-btn i { color: #fff; font-size: 26px; }
.chat-panel { position: fixed; right: 24px; bottom: 92px; width: min(300px, calc(100vw - 32px)); background: #fff; border-radius: 14px; box-shadow: var(--shadow-pop); overflow: hidden; z-index: 59; border: 1px solid #eee; animation: rise .2s ease; }
.chat-panel[hidden] { display: none; }
.chat-panel__head { background: var(--c-violet); color: #fff; padding: 16px 18px; }
.chat-panel__head strong { font-family: var(--font-head); font-weight: 700; font-size: 15px; display: block; }
.chat-panel__head small { font-size: 11.5px; color: var(--c-on-violet); margin-top: 2px; display: block; }
.chat-panel__body { padding: 14px; }
.chat-opt { display: flex; align-items: center; gap: 12px; border: 1px solid #eee; border-radius: 14px; padding: 13px; margin-bottom: 10px; cursor: pointer; width: 100%; background: #fff; text-align: left; }
.chat-opt:last-child { margin-bottom: 0; }
.chat-opt:hover { border-color: var(--c-coral); }
.chat-opt i { font-size: 22px; }
.chat-opt .ti-message-2 { color: var(--c-coral-text); }
.chat-opt .ti-sparkles { color: var(--c-teal); }
.chat-opt strong { font-size: 13.5px; font-weight: 600; color: var(--c-violet); display: block; }
.chat-opt small { font-size: 11.5px; color: var(--c-meta-soft); }

/* =========================================================================
   Responsive switch (nav / mobile chrome) at 1024px
   ========================================================================= */
@media (max-width: 1023px) {
  .utilitybar { display: none; }
  .nav { display: none; }
  .hamburger { display: flex; }
  .mobile-bar { display: flex; }
  .chat-btn { bottom: calc(86px + env(safe-area-inset-bottom)); right: 16px; width: 52px; height: 52px; }
  .chat-panel { bottom: calc(148px + env(safe-area-inset-bottom)); right: 16px; }
  body.has-mobile-bar { padding-bottom: 0; }
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* =========================================================================
   Phone (<=640px). Fixes found by testing on a real iPhone, not by resizing
   a desktop window: several of these only show up at true phone width.
   ========================================================================= */
@media (max-width: 640px) {

  /* The chip text is long enough to wrap to two lines inside the pill, which
     made it a tall lozenge rather than a tag. Tighter type, and the pill hugs
     its content. */
  .pill-chip {
    font-size: 11px; letter-spacing: .03em; padding: 6px 12px;
    line-height: 1.35; align-items: flex-start;
  }
  .pill-chip i { margin-top: 1px; }

  /* Buttons: full width so stacked pills line up, but shorter. 19px text stays
     (white-on-coral needs it for WCAG), the heft came from the padding, not the
     type. The sticky Call/Book bar already carries the always-on CTA, so the
     secondary here is lightened to a text link rather than a second big pill. */
  .hero .btn-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .hero .btn-row .btn { width: 100%; justify-content: center; padding: 13px 22px; }
  .hero .btn--outline {
    border: 0; background: none; color: #fff; padding: 6px;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .hero .btn--outline:hover { background: none; }

  /* The hero is very tall on a phone before you reach any content. */
  /* MOBILE HERO: full-bleed photo behind the copy (high impact on first open).
     The photo sits absolutely across the whole hero; a violet gradient keeps the
     white type legible; the copy is pinned to the bottom of the first screen. */
  .hero { padding: 0; min-height: clamp(520px, 76vh, 640px); display: flex; align-items: flex-end; background: linear-gradient(158deg, #43248A, #1E0E4B); }
  .hero h1 { margin-top: 14px; color: #fff; font-size: clamp(36px, 10.5vw, 44px); line-height: 1.02; }
  .hero__sub { margin: 14px 0 20px; color: var(--c-on-violet); max-width: 34ch; }

  /* Mobile: lead with the picture. People expect an image the moment the page
     opens, so the hero media moves ABOVE the copy and renders like a scaled-down
     version of the desktop arch (with the floating review sitting on it). */
  .hero__grid { display: flex; flex-direction: column; width: 100%; padding-block: 48px 30px; }
  .hero__grid > div:first-child { position: relative; z-index: 1; }
  .hero .arch-media { position: absolute; inset: 0; z-index: 0; min-height: 0; max-width: none; margin: 0; }
  .hero .arch-media__back { display: none; }
  .hero .arch-media__front { border-radius: 0; box-shadow: none; }
  .hero .arch-media__front img { object-position: 50% 22%; }
  .hero .arch-media__front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,14,75,.08) 0%, rgba(30,14,75,.55) 48%, rgba(30,14,75,.93) 100%); }
  .hero .arch-media__ph, .hero .arch-media__label { display: none; }
  .hero .pill-chip { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
  .hero .pill-chip i { color: #F09277; }
  .hero__reassure { color: var(--c-on-violet-mut); }
  /* Text-only hero: no photo to show above the copy, so no tall empty block. */
  .hero--text { min-height: 0; }

  .credstrip__grid { gap: 14px; }
  .credstrip__claim { max-width: none; } /* centred now; dropped the 56px right pad that shoved it left */
  .credstrip__marks { gap: 14px 18px; }

  /* Sections run tighter: clamp minimums are still generous on a 390px screen. */
  .section { padding-block: 44px; }
  .section--sm { padding-block: 36px; }

  /* Same empty-placeholder problem on service pages: the media block is a tall
     gradient box saying "photo for this service". Shrink it hard on mobile so it
     reads as a small accent, not a screen of void. */
  .svc-media { min-height: 150px; }
  .svc-media .arch-media__label { display: none; }

  /* Footer was 1.2 full screens tall. Everything stacked into one endless
     column. Put the two short link lists side by side, tighten the vertical
     rhythm, and trim the top/inter-block padding. Tap targets stay >=40px. */
  .site-footer { padding-top: 36px; }
  .site-footer__grid {
    grid-template-columns: 1fr 1fr; gap: 22px 20px;
  }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer .footer-contact { grid-column: 1 / -1; }
  .site-footer h4 { margin-bottom: 6px; }
  .site-footer a { padding: 5px 0; }
  .site-footer__brand p { margin-bottom: 0; }
  .site-footer .footer-contact p { margin-bottom: 6px; }
  .site-footer__bar { margin-top: 24px; padding-top: 16px; }
}
@media (min-width: 1024px) {
  .drawer-overlay { display: none; }
}

/* Utility */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  position: absolute !important; word-wrap: normal !important;
}
.hidden { display: none !important; }
.center { text-align: center; }
.mt-btn { margin-top: 26px; }

/* =========================================================================
   Photo bleed. Images break out of the boxed column: to the right screen edge
   on desktop, edge-to-edge on phones. Sections clip so nothing scrolls sideways.
   ========================================================================= */
.hero, .page-hero, section:has(> .svc-included__grid), section:has(> .about-story__grid) { overflow-x: clip; }
@media (min-width: 1024px) {
  /* bleed-right = the wrap's outer margin + gutter, so the image meets the viewport edge */
  .hero .arch-media,
  .svc-media,
  .about-story__grid .arch-media {
    /* span from the column's left edge to the viewport edge: pin the left margin
       (the base rule's margin-left:auto would otherwise absorb the negative right
       margin and shove the box sideways) and widen the box by the bleed amount. */
    --bleed: calc((100vw - min(100vw, var(--wrap))) / 2 + var(--gutter));
    max-width: none; margin-left: 0; margin-right: calc(-1 * var(--bleed)); width: calc(100% + var(--bleed));
  }
  .hero .arch-media { min-height: clamp(380px, 30vw, 520px); } /* wider box, so a little taller to keep proportion */
  /* No offset 'back' layer behind a bleeding photo: it read as a flat coloured strip. */
  .hero .arch-media__back, .about-story__grid .arch-media__back { display: none; }
  .svc-media { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .hero .arch-media__front, .hero .arch-media__back { border-top-right-radius: 0; border-bottom-right-radius: 0; }
}
@media (max-width: 640px) {
  /* edge-to-edge panels on phones */
  .svc-media, .about-story__grid .arch-media { margin-inline: calc(-1 * var(--gutter)); width: auto; max-width: none; border-radius: 0; }
  .about-story__grid .arch-media__front, .about-story__grid .arch-media__back { border-radius: 0; }
  .svc-media { min-height: clamp(240px, 62vw, 340px); }
}

/* Photo hero on phones (inc/photos.php). "above" (.hero--phone-above): the photo
   sits above the copy as a smaller arch, so the headline never covers the people,
   who stand in the middle of every frame. "over" keeps the full-bleed layout in
   the phone block above, with the -tall crop. */
@media (max-width: 640px) {
  .hero--phone-above { min-height: 0; display: block; }
  .hero--phone-above .hero__grid { padding-block: 16px 30px; gap: 22px; }
  .hero--phone-above .arch-media { position: relative; inset: auto; aspect-ratio: 1040 / 860; order: -1; }
  .hero--phone-above .arch-media__front { border-radius: 110px 110px 16px 16px; }
  .hero--phone-above .arch-media__front::after { display: none; }
  .hero--phone-above .arch-media__front img { object-position: 50% 50%; }
}

/* Photo under the copy on desktop (inc/photos.php, 1024px+). "blend": the photo
   fills the right of the hero and fades into the violet under the headline.
   "behind": the photo spans the hero under a violet fade, darkest behind the
   copy. Both keep the white-on-violet type; tablets and phones keep their own
   layouts. The photo's containing block is .hero (the grid stays static). */
@media (min-width: 1024px) {
  .hero--desk-blend, .hero--desk-behind { display: flex; align-items: center; min-height: clamp(520px, 36vw, 640px); }
  .hero--desk-blend .hero__grid, .hero--desk-behind .hero__grid { grid-template-columns: 1fr; width: 100%; }
  .hero--desk-blend .hero__grid > div:first-child, .hero--desk-behind .hero__grid > div:first-child { position: relative; z-index: 1; }
  .hero--desk-blend .arch-media, .hero--desk-behind .arch-media { position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 0; width: auto; max-width: none; min-height: 0; margin: 0; }
  .hero--desk-blend .arch-media { left: 36%; }
  .hero--desk-blend .arch-media__back, .hero--desk-behind .arch-media__back { display: none; }
  .hero--desk-blend .arch-media__front, .hero--desk-behind .arch-media__front { border-radius: 0; box-shadow: none; padding: 0; }
  .hero--desk-blend .arch-media__front::after, .hero--desk-behind .arch-media__front::after { content: ""; position: absolute; inset: 0; }
  .hero--desk-blend .arch-media__front::after { background: linear-gradient(90deg, #1E0E4B 0%, rgba(30,14,75,.82) 16%, rgba(30,14,75,.35) 42%, rgba(30,14,75,.12) 100%); }
  .hero--desk-behind .arch-media__front::after { background: linear-gradient(90deg, rgba(30,14,75,.94) 0%, rgba(30,14,75,.88) 40%, rgba(30,14,75,.6) 68%, rgba(30,14,75,.42) 100%); }
  .hero--desk-behind .arch-media__front img { object-position: 50% 35%; }
}

/* Phone "blend" (.hero--phone-blend): the photo sits at the top of the hero and
   fades into violet; the copy starts just past half way down it, so the headline
   covers legs and steps, not faces (the crops put faces in the top third). The
   photo carries the same smoky violet veil as the desktop blend (heavier on the
   left, lighter on the right; Paul, 21 Oct 2026), under the fade to the copy. */
@media (max-width: 640px) {
  .hero--phone-blend { min-height: 0; display: block; background: var(--c-violet); }
  .hero--phone-blend .arch-media { position: absolute; inset: 0 0 auto 0; aspect-ratio: 1040 / 860; height: auto; }
  .hero--phone-blend .arch-media__front::after {
    background:
      linear-gradient(180deg, rgba(30,14,75,0) 0%, rgba(30,14,75,0) 36%, rgba(30,14,75,.72) 64%, #1E0E4B 94%),
      linear-gradient(90deg, rgba(30,14,75,.62) 0%, rgba(30,14,75,.38) 40%, rgba(30,14,75,.2) 100%);
  }
  .hero--phone-blend .arch-media__front img { object-position: 50% 50%; }
  .hero--phone-blend .hero__grid { padding-top: calc(100vw * 860 / 1040 * .55); }
}

/* Rotating hero (.hero--rotate, inc/photos.php): the photos stack and crossfade
   every 6 seconds, with a pause button; reduced motion keeps the first photo.
   The button is discreet (Paul asked to hide it, 21 Oct 2026) but stays, because
   WCAG 2.2.2 needs a way to pause anything that changes by itself for more than
   5 seconds: with a mouse it shows only while the pointer is over the hero or it
   has keyboard focus; on touch screens it is small and faint. */
.hero--rotate .hero-slide img { opacity: 0; transition: opacity 1.2s ease; }
.hero--rotate .hero-slide.is-active img { opacity: 1; }
.hero-rotate {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 28px; height: 28px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(30,14,75,.35); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font: 700 9px/1 var(--font-body);
  opacity: .55; transition: opacity .2s ease, background .2s ease;
}
.hero-rotate::before { content: "\275A\275A"; letter-spacing: -1px; }
.hero-rotate.is-paused::before { content: "\25B6"; letter-spacing: 0; margin-left: 2px; }
.hero-rotate:hover { background: rgba(30,14,75,.85); opacity: 1; }
.hero-rotate:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; }
.hero-rotate.is-paused { opacity: 1; } /* once paused, show plainly how to restart */
@media (hover: hover) and (pointer: fine) {
  .hero--rotate .hero-rotate { opacity: 0; }
  .hero--rotate:hover .hero-rotate, .hero--rotate .hero-rotate:focus-visible, .hero--rotate .hero-rotate.is-paused { opacity: 1; }
}
@media (max-width: 640px) {
  .hero--phone-over .hero-rotate, .hero--phone-blend .hero-rotate { top: 10px; bottom: auto; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--rotate .hero-slide img { transition: none; }
}

/* Page header with a photo (.page-hero--photo; About, inc/photos.php).
   "wide" (default; Paul: big, like the home page): the home hero's blend. The
   photo fills the right of the violet header and fades into it under the copy;
   tablets put it behind the copy under a heavier veil; phones show it at the top,
   fading into the violet, with the copy over its faded lower part.
   "full" (editors' alternative): the whole uncropped photo as a tall panel. */
.page-hero__photo { overflow: hidden; }
.page-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.page-hero__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

@media (min-width: 1024px) {
  .page-hero--photo { display: flex; align-items: center; }
  .page-hero--photo > .wrap { width: 100%; }
  .page-hero--photo-wide { min-height: clamp(440px, 33vw, 520px); }
  .page-hero--photo-wide .page-hero__photo { position: absolute; top: 0; bottom: 0; right: 0; left: 36%; }
  .page-hero--photo-wide .page-hero__photo::after { background: linear-gradient(90deg, #1E0E4B 0%, rgba(30,14,75,.82) 16%, rgba(30,14,75,.35) 42%, rgba(30,14,75,.12) 100%); }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .page-hero--photo-wide { display: flex; align-items: center; min-height: 420px; }
  .page-hero--photo-wide > .wrap { width: 100%; }
  .page-hero--photo-wide .page-hero__photo { position: absolute; inset: 0; }
  .page-hero--photo-wide .page-hero__photo::after { background: linear-gradient(90deg, rgba(30,14,75,.92) 0%, rgba(30,14,75,.78) 55%, rgba(30,14,75,.5) 100%); }
}
@media (max-width: 640px) {
  .page-hero--photo-wide { padding-top: calc(100vw * 860 / 1040 * .64); background: var(--c-violet); } /* faces sit lower in this crop than on the home hero */
  .page-hero--photo-wide .page-hero__photo { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1040 / 860; }
  .page-hero--photo-wide .page-hero__photo::after {
    background:
      linear-gradient(180deg, rgba(30,14,75,0) 0%, rgba(30,14,75,0) 50%, rgba(30,14,75,.72) 74%, #1E0E4B 96%),
      linear-gradient(90deg, rgba(30,14,75,.62) 0%, rgba(30,14,75,.38) 40%, rgba(30,14,75,.2) 100%);
  }
}

/* Panel zoom levels (.page-hero--photo-panel: square, tall, full): the photo
   keeps its shape (--ph-ratio, --ph-h = height / width) as a panel on the right of
   the header, fading into the violet on its left (both edges at 1700px+, where it
   sits at the content edge). Tablets: copy, then the photo centred below it, soft
   on all edges. Phones: a band at the top like the wide style (whole photo: as
   tablets). */
.page-hero--photo-square { --ph-ratio: 1 / 1; --ph-h: 1; }
.page-hero--photo-tall   { --ph-ratio: 4 / 5; --ph-h: 1.25; }
.page-hero--photo-full   { --ph-ratio: 2 / 3; --ph-h: 1.5; }
.page-hero--photo-panel .page-hero__photo::after { background: linear-gradient(90deg, rgba(30,14,75,.5) 0%, rgba(30,14,75,.26) 50%, rgba(30,14,75,.15) 100%); }
@media (min-width: 1024px) {
  .page-hero--photo-panel { min-height: clamp(440px, 33vw, 520px); }
  .page-hero--photo-panel .page-hero__photo {
    position: absolute; top: 0; bottom: 0; right: 0; aspect-ratio: var(--ph-ratio);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
  }
}
@media (min-width: 1700px) {
  .page-hero--photo-panel .page-hero__photo {
    right: calc((100% - 1360px) / 2);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 78%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 78%, transparent 100%);
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .page-hero--photo-panel { display: flex; flex-direction: column; padding-bottom: 0; }
  .page-hero--photo-panel > .wrap { width: 100%; }
}
@media (max-width: 1023px) {
  .page-hero--photo-full { display: flex; flex-direction: column; padding-bottom: 0; }
  .page-hero--photo-full > .wrap { width: 100%; }
  .page-hero--photo-panel.page-hero--photo-full .page-hero__photo,
  .page-hero--photo-panel .page-hero__photo {
    position: relative; order: 2; width: 70%; max-width: 420px; margin: 18px auto 0; aspect-ratio: var(--ph-ratio);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    mask-composite: intersect;
  }
}
@media (max-width: 640px) {
  .page-hero--photo-square, .page-hero--photo-tall { display: block; padding-top: calc(100vw * var(--ph-h) * .7); background: var(--c-violet); }
  .page-hero--photo-square .page-hero__photo, .page-hero--photo-tall .page-hero__photo {
    position: absolute; top: 0; left: 0; right: 0; width: auto; max-width: none; margin: 0; aspect-ratio: var(--ph-ratio);
    -webkit-mask-image: none; mask-image: none;
  }
  .page-hero--photo-square .page-hero__photo::after, .page-hero--photo-tall .page-hero__photo::after {
    background:
      linear-gradient(180deg, rgba(30,14,75,0) 0%, rgba(30,14,75,0) 55%, rgba(30,14,75,.72) 78%, #1E0E4B 97%),
      linear-gradient(90deg, rgba(30,14,75,.62) 0%, rgba(30,14,75,.38) 40%, rgba(30,14,75,.2) 100%);
  }
}