/* ==========================================================================
   RIGHTO — GLOBAL STYLES
   Mobile-first. Every colour, size and space references tokens.css —
   do not hard-code values here. Rebrand by editing tokens.css only.
   ========================================================================== */

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

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

/* ---- Typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); font-weight: var(--weight-display); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-display); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-heading);
     line-height: var(--leading-snug); }

p  { max-width: var(--width-text); margin-inline: auto; }

a  { color: var(--ink); text-decoration-thickness: 1.5px;
     text-underline-offset: 0.15em; }
a:hover { color: var(--accent); }

.lead {
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--ink-soft);
}

.small { font-size: var(--text-small); color: var(--ink-soft); }

/* Small uppercase label (eyebrows, badges) */
.kicker {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--text { max-width: var(--width-text); }

.section { padding-block: var(--section-pad); }

/* Dark full-width band (closing CTA etc.) */
.band {
  background: var(--band);
  color: var(--on-band);
}
.band h1, .band h2, .band h3, .band a { color: var(--on-band); }

/* ---- Buttons -------------------------------------------------------------
   Flat, confident pills. Primary = accent. Secondary = ink outline.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-button);
  border: var(--border-width) solid transparent;
  font-family: var(--font-display);
  font-size: var(--btn-text);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 45%, transparent);
}

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--secondary:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Secondary button on a dark band */
.band .btn--secondary { color: var(--on-band); border-color: var(--on-band); }
.band .btn--secondary:hover { background: var(--on-band); color: var(--band); }

/* Button row — stacks full-width on phones, sits inline from ~600px */
.actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.actions .btn { width: 100%; }

@media (min-width: 600px) {
  .actions { flex-direction: row; }
  .actions .btn { width: auto; }
}

/* Visible keyboard focus — accessibility, do not remove */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { border-radius: var(--radius-button); }

/* ---- Logo lockup (text placeholder until branding) ----------------------
   "Righto" large + "Cleaning Services" small beneath — Pink's-style.
   When the real logo lands, replace the markup with
   <img src="assets/img/logo.svg" alt="Righto Cleaning Services"
        style="height:var(--logo-height)"> — nothing else changes.
   --------------------------------------------------------------------------- */
.logo { display: inline-block; text-decoration: none; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo__name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 1.6rem;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}
.logo__descriptor {
  display: block;
  font-size: 0.62rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.2em;
}

/* ---- Sticky header ---------------------------------------------------------
   Pink's-style: logo CENTRED, nav split either side of it (desktop).
   Left: Strata · Commercial · Our Proof
   Right: For FMs ▾ · Areas ▾ · About + [Get a Quote]
   Mobile: logo left, Get a Quote + menu button right.
   --------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--band);
  border-bottom: 0;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.header__side { display: none; }
.header__right { display: flex; align-items: center; gap: var(--space-5); }
.header .btn { padding: 0.65em 1.4em; font-size: 0.95rem; white-space: nowrap; }

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav__list a {
  text-decoration: none;
  font-weight: var(--weight-semibold);
  font-size: 0.95rem;
  white-space: nowrap;
}
.nav__item { position: relative; }
.nav__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 230px;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  list-style: none;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub { display: flex; }
.nav__sub a { font-weight: var(--weight-body); color: var(--ink-soft); }

/* Menu button (mobile only) */
.menu-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-btn span {
  display: block;
  height: 2.5px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
}

/* Mobile nav panel — all links, opened by the menu button */
.nav-mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--band);
  border-bottom: 1px solid color-mix(in srgb, var(--on-band) 25%, transparent);
  padding: var(--space-4) var(--gutter) var(--space-6);
}
.nav-mobile.is-open { display: block; }
.nav-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.nav-mobile a {
  display: block;
  padding: 10px 0;               /* ≥44px tap target on touch screens */
  text-decoration: none;
  font-weight: var(--weight-semibold);
  font-size: 1rem;
}

@media (min-width: 1100px) {
  .menu-btn, .nav-mobile.is-open { display: none; }
  .header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .header__side { display: block; justify-self: start; }
  .logo { justify-self: center; text-align: center; }
  .header__right { justify-self: end; }
}

/* ---- Sticky "Get a Quote" ---------------------------------------------------
   Always visible: full-width bottom bar on mobile, corner pill on desktop.
   Pages that include it set class "has-quote-sticky" on <body> so content
   never hides behind the bar.
   --------------------------------------------------------------------------- */
.quote-sticky {
  position: fixed;
  z-index: 60;
  left: var(--space-4);
  right: var(--space-4);
  /* clears the iPhone home-bar / gesture area */
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}
.quote-sticky .btn {
  display: block;
  width: 100%;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
.has-quote-sticky { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 720px) {
  .quote-sticky { left: auto; right: var(--space-5); bottom: var(--space-5); }
  .quote-sticky .btn { display: inline-block; width: auto; }
  .has-quote-sticky { padding-bottom: 0; }
}

/* ---- Footer -----------------------------------------------------------------
   Dark band. NAP block (keep identical to Google Business Profile),
   service areas, links (Bond Cleaning lives HERE, not the header),
   legal + social.
   --------------------------------------------------------------------------- */
.footer {
  background: var(--band);
  color: var(--on-band);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--text-small);
}
.footer a { color: var(--on-band); }
.footer a:hover { color: var(--accent-on-navy); }
.footer p { max-width: 60ch; }

.footer .logo { color: var(--on-band); }
.footer .logo__descriptor { color: var(--on-band); opacity: 0.65; }

.footer__grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 720px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-7); }
}

.footer__heading {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: var(--space-3);
}
.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer__list a {
  display: inline-block;
  padding-block: 5px;            /* comfortable tap targets in the footer */
  text-decoration: none;
}
.footer__list a:hover { text-decoration: underline; }

.footer__brand > * + * { margin-top: var(--space-3); }

.footer__legal {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--on-band) 25%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  opacity: 0.8;
}

/* ---- Hero ------------------------------------------------------------------
   Big, bold, generous. Headline + one line + actions.
   --------------------------------------------------------------------------- */
.hero {
  /* top tightened (July 2026): title sits close under the navy header */
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(4rem, 10vw, 7rem);
}
.hero__title {
  font-size: var(--text-hero);
  max-width: 14ch;              /* keeps lines short and punchy */
}
.hero__lead {
  margin-top: var(--space-5);
  max-width: 42ch;
}
.hero .actions { margin-top: var(--space-6); }

/* ---- Motion: soft rise on scroll (respects reduced-motion) ---------------- */
/* Content is visible by default; the animation only adds the entrance.
   If it ever fails to run, nothing is hidden. */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.6s var(--ease) backwards; }
  .rise:nth-child(2) { animation-delay: 0.08s; }
  .rise:nth-child(3) { animation-delay: 0.16s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
  }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ---- 01 Hero media variant ---------------------------------------------
   Add class "hero--media band" and drop an <img class="hero__media"> or
   <video class="hero__media" autoplay muted loop playsinline> inside. -----*/
.hero--media { position: relative; overflow: hidden; }
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
}
.hero--media .container { position: relative; }
.hero--media .lead { color: var(--on-band); opacity: 0.9; }

/* ---- 02 Proof promise strip (the Pink's .01/.02/.03 move) ---------------- */
.promises {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.promise { border-top: 3px solid var(--ink); padding-top: var(--space-4); }
.promise__num {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-caps);
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.promise h3 { margin-bottom: var(--space-2); }
.promise p { font-size: var(--text-small); color: var(--ink-soft); }
@media (min-width: 600px) { .promises { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .promises { grid-template-columns: repeat(4, 1fr); } }

/* ---- 03 Comparison table (typical cleaner vs Righto) --------------------- */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  width: 100%;
  max-width: 860px;
  min-width: 560px;   /* scrolls sideways on phones instead of crushing */
  border-collapse: collapse;
}
.compare th, .compare td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 0.95rem;
}
.compare thead th {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  font-size: 1.05rem;
}
.compare tbody th { font-weight: var(--weight-semibold); }
.compare .is-righto { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  margin-right: 8px;
  flex-shrink: 0;
}
.mark--tick { background: var(--accent); color: var(--on-accent); }
.mark--cross { background: var(--line); color: var(--ink-soft); }

/* ---- 04 Service & audience cards ----------------------------------------- */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: center;   /* orphan rows centre (July 2026) */
}
.cards .card { flex: 1 1 260px; max-width: 380px; }
.cards--two .card { flex-basis: 320px; max-width: 480px; }
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
.card p { color: var(--ink-soft); }
.card__link {
  margin-top: auto;
  font-weight: var(--weight-semibold);
  color: var(--accent);
  text-decoration: none;
}
.card__link:hover { text-decoration: underline; }
.card--door { border: var(--border-width) solid var(--ink); }
.card--door .btn { margin-top: auto; align-self: flex-start; }

/* ---- 05 Region chips ------------------------------------------------------ */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.chip {
  display: inline-block;
  padding: 0.5em 1.1em;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-button);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.chip:hover { background: var(--ink); color: var(--paper); }
.chip--ghost {
  border-style: dashed;
  border-color: var(--ink-soft);
  color: var(--ink-soft);
}
/* Suburb listed on the hub but page not yet built (no thin pages) */
.chip--pending {
  border-color: var(--line);
  color: var(--ink-soft);
  cursor: default;
}
span.chip--pending:hover { background: transparent; color: var(--ink-soft); }

/* ---- 06 FAQ accordion (native <details> — works without JS) --------------- */
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  cursor: pointer;
  font-weight: var(--weight-semibold);
  font-size: 1.05rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq__body {
  padding: 0 0 var(--space-5);
  color: var(--ink-soft);
  max-width: var(--width-text);
}

/* ---- 07 Trust badge row ---------------------------------------------------- */
.trustbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.badge {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  padding: 0.55em 1.1em;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}

/* ---- 08 Testimonial card (+ honest empty state) ----------------------------- */
.testimonial {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  max-width: 560px;
  margin: 0;
}
.testimonial blockquote {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  font-weight: 500;
}
.testimonial figcaption { color: var(--ink-soft); font-size: var(--text-small); }
.testimonial--empty {
  background: transparent;
  border-style: dashed;
  text-align: center;
  color: var(--ink-soft);
}

/* ---- 09 Closing CTA band ----------------------------------------------------- */
.cta-band { padding-block: var(--section-pad); }
.cta-band h2 { font-size: var(--text-h1); max-width: 16ch; margin-inline: auto; }
.cta-band p { margin-top: var(--space-4); opacity: 0.85; }
.cta-band .actions { margin-top: var(--space-6); }

/* ---- 09b Quote promise badge --------------------------------------------------
   Pushed hard wherever the Get a Quote CTA appears: sticky bar, quote page,
   closing CTA bands. Deliberately loud -- this is our headline promise. */
.quote-promise {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-button);
  padding: 0.5em 1.1em;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
.cta-band .quote-promise { margin-bottom: var(--space-4); }
.hero .quote-promise { margin-bottom: var(--space-5); }
.quote-sticky__promise {
  display: block;
  text-align: center;
  margin: 0 0 var(--space-2);
}
@media (min-width: 720px) {
  .quote-sticky__promise { text-align: right; }
}

/* ---- 10 Quote form ------------------------------------------------------------ */
.form {
  display: grid;
  gap: var(--space-5);
  max-width: 760px;
}
.form__field label {
  display: block;
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  margin-bottom: var(--space-2);
}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="number"],
.form select,
.form textarea {
  width: 100%;
  padding: 0.8em 1em;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-field);
}
.form input:focus,
.form select:focus,
.form textarea:focus { border-color: var(--accent); }
.form textarea { min-height: 130px; resize: vertical; }
.form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-small);
  color: var(--ink-soft);
}
.form__consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}
.req { color: var(--accent); }
@media (min-width: 720px) {
  .form { grid-template-columns: 1fr 1fr; }
  .form__full { grid-column: 1 / -1; }
}


/* Multi-step quote flow (v1.3) — progress, choice cards, step nav.
   Steps hide via [hidden]; the active step carries [data-active]. */
.form-progress { display: grid; gap: var(--space-3); }
.form-progress__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: var(--text-small);
  color: var(--ink-soft);
}
.form-progress__list li[aria-current="step"] {
  color: var(--accent);
  font-weight: var(--weight-semibold);
}
.form-progress__bar {
  height: 4px;
  border-radius: var(--radius-field);
  background: var(--line);
  overflow: hidden;
}
.form-progress__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0.3334);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.form-progress__text { margin: 0; color: var(--ink-soft); }

.form-step {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: auto;
}
.form-step__legend {
  padding: 0;
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  font-size: 1.15rem;
}
.form-step__fields { display: grid; gap: var(--space-5); }
.form-step__fields[hidden] { display: none; }
.form-step__notes { margin-top: var(--space-5); }

.choice-grid { display: grid; gap: var(--space-4); }
.choice-card {
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  font: inherit;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.choice-card:hover { border-color: var(--accent); }

.form input[type="date"] {
  width: 100%;
  padding: 0.8em 1em;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-field);
}
.form input[type="date"]:focus { border-color: var(--accent); }

.form__urgent { margin-top: var(--space-3); }
.form__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-small);
  color: var(--ink-soft);
}

.form-nav {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (min-width: 720px) {
  .form-step__fields { grid-template-columns: 1fr 1fr; }
  .choice-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 11 Proof visuals (v1.3) ---------------------------------------------
   The differentiator made visual: framed portal shot, before/after pair,
   GPS pin motif. .proof-slot divs are honest placeholders (dashed, like
   .testimonial--empty) until real assets arrive — swap for <img> then. */
.proof-figure {
  margin: var(--space-6) auto 0;
  max-width: 760px;
}
.proof-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-button);
  padding: 0.3em 0.9em;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.proof-verified::before { content: "\2713"; font-weight: 700; }
.proof-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  font-size: var(--text-small);
  color: var(--ink-soft);
}
.proof-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4);
  border: 2px dashed var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--text-small);
}
.proof-slot--photo  { aspect-ratio: 4 / 3; }
.proof-slot--portal { aspect-ratio: 8 / 5; border: 0; border-radius: 0; }
.proof-slot--log    { aspect-ratio: 4 / 1; min-height: 96px; }
.proof-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
.proof-frame img, .proof-slot + img { border-radius: 0; }

.before-after { display: grid; gap: var(--space-4); }
.before-after__item { margin: 0; }
.ba-label {
  display: inline-block;
  margin-bottom: var(--space-2);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ba-label--after { color: var(--accent); }
@media (min-width: 600px) { .before-after { grid-template-columns: 1fr 1fr; } }

.proof-gps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-small);
  color: var(--ink-soft);
}
.proof-pin { width: 22px; height: 22px; fill: var(--accent); flex-shrink: 0; }

.proof-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}
.proof-frame__bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.proof-frame__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }

.proof-more {
  margin-top: var(--space-6);
  text-align: center;
  font-weight: var(--weight-semibold);
}

/* ---- 12 Services rows (services.html, July 2026) --------------------------
   Pink's-style: big uppercase title left, copy centre, photo right.
   Rows are LEFT-aligned by design. Photo slots are placeholders until
   real photos arrive (same .proof-slot dashes as the proof page). */
.svc-row {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding-block: var(--space-5);
}
.svc-row + .svc-row { border-top: 1px solid var(--line); }
.svc-row {
  border-radius: var(--radius-card);
  padding-inline: var(--space-5);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.svc-row:hover { background: var(--band); color: var(--on-band); border-color: transparent; }
.svc-row:hover + .svc-row { border-top-color: transparent; }
.svc-row:hover .svc-row__title a { color: var(--accent-on-navy); }
.svc-row:hover .svc-row__body p { color: var(--on-band); }
.svc-row:hover .card__link { color: var(--accent-on-navy); }
.svc-row:hover .proof-slot {
  background: transparent;
  border-color: color-mix(in srgb, var(--on-band) 35%, transparent);
  color: var(--on-band);
}
.svc-row__title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--text-h1);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.svc-row__title a { color: inherit; text-decoration: none; }
.svc-row__title a:hover { color: var(--accent); }
.svc-row__body p { margin-inline: 0; max-width: 52ch; }
.svc-row__body .card__link { display: inline-block; margin-top: var(--space-3); }
.svc-row__media { aspect-ratio: 16 / 10; max-width: 360px; justify-self: end; width: 100%; }
@media (min-width: 900px) {
  .svc-row { grid-template-columns: 1.1fr 1.6fr 0.9fr; gap: var(--space-7); }
}

/* ---- Page helpers ------------------------------------------------------- */
.list-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  max-width: 760px;
}
@media (min-width: 600px) {
  .list-checks:not(.list-checks--stack) { grid-template-columns: 1fr 1fr; }
}
.list-checks li { position: relative; padding-left: 2em; }
.list-checks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.78em;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  max-width: var(--width-text);
}
.steps li { counter-increment: step; position: relative; padding-left: 3.4em; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.2em;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  border: var(--border-width) solid var(--ink);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  display: flex;
  align-items: center;
  justify-content: center;
}

.caveat { font-size: var(--text-small); color: var(--ink-soft); font-style: italic; }

/* ---- Blog article ---------------------------------------------------------- */
.article h1 { font-size: var(--text-h1); }
.article .lead { margin-top: var(--space-5); }
.article h2 { margin-top: var(--space-8); }
.article h3 { margin-top: var(--space-6); }
.article p { margin-top: var(--space-4); }
.article ul, .article ol { margin-top: var(--space-4); padding-left: 1.3em; max-width: var(--width-text); }
.article li { margin-top: var(--space-2); }
.article blockquote {
  margin: var(--space-5) 0 0;
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: var(--radius-card);
  color: var(--ink-soft);
}
.article__meta {
  margin-top: var(--space-7);
  font-size: var(--text-small);
  color: var(--ink-soft);
}
.article .actions { margin-top: var(--space-7); }

/* Author bio box (E-E-A-T) */
.bio {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  margin-top: var(--space-6);
  max-width: var(--width-text);
}
.bio__avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 1.1rem;
}
.bio p { margin: 0; font-size: var(--text-small); color: var(--ink-soft); }
.bio__name { font-weight: var(--weight-semibold); color: var(--ink); font-size: var(--text-body); }

/* Blog hub list */
.post-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.post-list li { border-bottom: 1px solid var(--line); }
.post-list a {
  display: block;
  padding: var(--space-4) 0;
  text-decoration: none;
  font-weight: var(--weight-semibold);
  font-size: 1.1rem;
}
.post-list a:hover { color: var(--accent); }

/* Bond page — same system, lighter consumer lane */
.theme-bond { background: var(--surface); }
.theme-bond .hero { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.theme-bond .card,
.theme-bond .badge { background: var(--paper); }

/* ==========================================================================
   ALIGNMENT — centred hero, headings, tiles, trust bar & CTA band;
   everything else (lists, steps, paragraphs, tables, FAQs, cards, forms)
   is LEFT-aligned. Headings render sentence case as written (July 2026);
   uppercase is reserved for small labels: .kicker, .quote-promise chip,
   .footer__heading, .logo__descriptor.
   ========================================================================== */

/* CENTRED: hero */
.hero .container { text-align: center; }
.hero__title, .hero__lead { margin-inline: auto; }
.hero .actions { justify-content: center; }

/* CENTRED: section headings (direct children of the section container only —
   headings inside cards stay left with their card) */
.section .container > h1,
.section .container > h2,
.section .container > h3 { text-align: center; margin-inline: auto; }
.section .container > .promise__num { display: block; text-align: center; }

/* CENTRED: at most one short lead line under a heading (class="lead") */
.section .container > p.lead { text-align: center; margin-inline: auto; }

/* CENTRED: proof-promise tiles */
.promises { text-align: center; }
.promises--three { max-width: 900px; margin-inline: auto; }
@media (min-width: 960px) { .promises--three { grid-template-columns: repeat(3, 1fr); } }
.promise p { margin-inline: auto; }

/* CENTRED: the numbered proof points on How Our Proof Works */
.page-proof .section .container > p { text-align: center; margin-inline: auto; }

/* CENTRED: trust bar + region chips */
.trustbar, .chips { justify-content: center; }

/* CENTRED: closing CTA band */
.band.cta-band { text-align: center; }
.band.cta-band .actions { justify-content: center; }
.band.cta-band p { margin-inline: auto; }

/* LEFT: lists, steps, tables, FAQ, cards, forms inherit the default
   left alignment from base styles. Keep their content blocks centred
   as blocks on the page where they have a max-width: */
.list-checks, .steps, .faq, .form, .post-list { margin-inline: auto; }
.compare-wrap { display: flex; justify-content: center; }
.compare th, .compare td { text-align: left; }

/* ============================================================================
   BRANDING ROLLOUT — logo pack + colour blocking (July 2026)
   Logos live in assets/img/ (SVG, from Logo Pack/Final).
   Colour blocking: cream (paper) / white (surface) alternation by default,
   with .section--ink for deliberate dark navy blocks. CTA band stays navy.
   ============================================================================ */

/* Logo images (replace the old text lockup) */
.logo__img { display: block; height: var(--logo-height); width: auto; }
.footer .logo__img { height: 92px; }

/* Default zebra blocking: every second content section sits on white */
main > section.section:nth-of-type(even):not(.section--ink) {
  background: var(--surface);
}

/* Deliberate dark block — headline sections that need weight */
.section--ink { background: var(--band); color: var(--on-band); }
.section--ink h2, .section--ink h3, .section--ink a { color: var(--on-band); }
.section--ink .badge {
  background: transparent;
  border-color: color-mix(in srgb, var(--on-band) 45%, transparent);
  color: var(--on-band);
}

/* Primary button inverts on dark blocks so it stays visible */
.section--ink .btn--primary, .band .btn--primary {
  background: var(--on-band);
  color: var(--band);
}
.section--ink .btn--primary:hover, .band .btn--primary:hover {
  background: #ffffff;
  color: var(--band);
}

/* Quote-promise chip inverts on dark blocks */
.section--ink .quote-promise, .band .quote-promise {
  background: var(--on-band);
  color: var(--band);
}

/* Accent recolours on dark navy surfaces — the cream-side berry rose
   (--accent) fails contrast on navy, so dark bands use --accent-on-navy */
.section--ink a:hover, .band a:hover { color: var(--accent-on-navy); }
.section--ink .kicker, .band .kicker { color: var(--accent-on-navy); }
.section--ink .promise__num, .band .promise__num { color: var(--accent-on-navy); }
.section--ink .req, .band .req { color: var(--accent-on-navy); }
.section--ink .list-checks li::before, .band .list-checks li::before {
  background: var(--accent-on-navy);
  color: var(--band);
}

/* Trust bar chips sit centred (site-wide centring rule) */
.trustbar { justify-content: center; }

/* Brand marks placed in page flow */
.hero__badge {
  display: block;
  margin: 0 auto var(--space-6);
  height: clamp(120px, 18vw, 176px);
  width: auto;
}
.cta-band__logo {
  display: block;
  margin: 0 auto var(--space-5);
  height: 72px;
  width: auto;
}
.form-lockup {
  display: block;
  margin: 0 auto var(--space-6);
  height: clamp(120px, 16vw, 168px);
  width: auto;
}

/* Navy header theme (July 2026) — wordmark-reverse logo, on-band nav */
.header a { color: var(--on-band); }
.header a:hover { color: var(--accent-on-navy); }
.header .menu-btn span { background: var(--on-band); }
.nav-mobile a { color: var(--on-band); }
.header .btn--primary { background: var(--accent-on-navy); color: var(--band); }
.header .btn--primary:hover { background: var(--on-band); color: var(--band); }

/* Display H1 — short, loud, Pink's-style stamp: caps, berry, hard navy offset.
   Section H2/H3 stay sentence case (see ALIGNMENT block). */
.hero__title {
  font-family: var(--font-title);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-on-navy);  /* exact pink of the logo star + header tab */
  letter-spacing: 0.05em;
  /* navy outline + offset, per the "Join our team" reference */
  -webkit-text-stroke: 0.026em var(--ink);
  text-shadow: 0.045em 0.05em 0 var(--ink);
}

/* Header fit (July 2026) — wordmark sits tidy in the navy bar */
.header .container { max-width: 1400px; }
.header {
  --logo-h: clamp(56px, 6vw, 84px);
  --hdr: 0; /* 0 = full size, 1 = compact; driven by scroll (motion script) */
}
.header .logo__img { height: calc(var(--logo-h) - (var(--logo-h) - 54px) * var(--hdr)); }
.header__inner { padding-block: calc(var(--space-4) * (1 - 0.45 * var(--hdr))); }
.header .nav__list a { font-size: 1.3rem; }
.header .nav__list { gap: var(--space-6); }
.header .btn {
  text-transform: uppercase;
  border-radius: var(--radius-card);
  letter-spacing: 0.04em;
}
@media (min-width: 1100px) {
  .header__side[aria-label="Primary"] { justify-self: end; }
  .header__right { justify-self: stretch; justify-content: space-between; }
  .header__inner { column-gap: var(--space-7); }
}

/* Hero brand mark under the H1 (about page) */
.hero__logo {
  display: block;
  margin: var(--space-5) auto 0;
  height: clamp(90px, 12vw, 130px);
  width: auto;
}

/* Hero quote-promise chip sits well clear of the blurb */
.hero .quote-promise { margin-top: var(--space-7); margin-bottom: var(--space-2); }
.hero .quote-promise + .form-lockup { margin-top: var(--space-7); }


/* Split section — content pushed left, brand mark right (home manifesto,
   about "How we work"). Text left-aligns; centring rules don't reach in. */
.split { display: grid; gap: var(--space-6); align-items: center; }
.split__body h2, .split__body h3 { text-align: left; }
.split__body p { margin-inline: 0; }
.split__logo { display: block; width: min(100%, 340px); height: auto; margin: 0 auto; }
.split__logo--wide { width: min(100%, 430px); }
.split__logo--icon { width: min(45%, 190px); }
@media (min-width: 900px) {
  .split { grid-template-columns: 3fr 2fr; gap: var(--space-7); }
  .split__logo { margin: 0; justify-self: end; }
}

/* Home services photo cards (photo + label pill, links to each service).
   Dashed = placeholder until real photos drop in. */
.svc-cards__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.svc-cards__head h2 { text-align: left; margin: 0; }
.svc-cards {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.svc-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 3 / 4;
  padding: var(--space-4);
  border: 2px dashed var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.svc-card:hover { border-color: var(--accent); }
.svc-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc-card__hint {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding: var(--space-4);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--text-small);
}
.svc-card__label {
  position: relative;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-button);
  padding: 0.5em 1.4em;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 1.05rem;
}
@media (min-width: 720px) { .svc-cards { grid-template-columns: repeat(3, 1fr); } }

/* Centred include tiles (bond "what's included") — title + short blurb centred */
.cards--centred .card { text-align: center; align-items: center; }
.cards--centred .card p { margin-inline: auto; }

/* Media splits — photo slots left/right of copy (July 2026 "shake it up") */
.split__media { width: 100%; }
.split__media .proof-slot { aspect-ratio: 4 / 3; max-width: 420px; margin: 0 auto; }
@media (min-width: 900px) {
  .split--media.split--flip { grid-template-columns: 2fr 3fr; }
  .split--flip .split__media { order: -1; }
  .split__media .proof-slot { margin: 0; }
  .split--media:not(.split--flip) .split__media .proof-slot { margin-left: auto; }
}

/* Bond room-by-room — Foxy's-style: photo, centred title, centred blurb */
.rooms {
  display: grid;
  gap: var(--space-6) var(--space-5);
  margin-top: var(--space-6);
}
.room { text-align: center; }
.room .proof-slot { aspect-ratio: 4 / 3; margin-bottom: var(--space-4); }
.room h3 { margin-bottom: var(--space-2); }
.room p { color: var(--ink-soft); margin-inline: auto; max-width: 34ch; }
@media (min-width: 600px) { .rooms { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .rooms { grid-template-columns: repeat(3, 1fr); } }

/* Photo slots + trailing links on navy blocks */
.section--ink .proof-slot {
  background: transparent;
  border-color: color-mix(in srgb, var(--on-band) 35%, transparent);
  color: var(--on-band);
}

/* Centred blocks read centred: standalone paragraphs + trailing links */
.section .container > p { text-align: center; }
.section .container > .card__link {
  display: block !important;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

/* ==========================================================================
   MOTION & DELIGHT LAYER (impeccable pass, July 2026)
   No-JS safe: .reveal is only ever added by script, so content is fully
   visible without it. Everything entrance-y sits behind reduced-motion.
   ========================================================================== */

/* Skip link (WCAG 2.4.1) — hidden until keyboard focus */
.skip-link {
  position: fixed;
  top: -100px;
  left: var(--space-4);
  z-index: 200;
  background: var(--band);
  color: var(--on-band);
  padding: 0.8em 1.2em;
  border-radius: var(--radius-card);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--space-3); }

/* Compact header: --hdr is eased per-frame by the motion script, so the
   shrink glides with the scroll instead of snapping between two states.
   overflow-anchor off: anchoring otherwise fights the height change. */
html { overflow-anchor: none; }
.header--compact { --hdr: 1; } /* reduced-motion fallback: simple snap */

/* Nav underline slide */
.header .nav__list a { position: relative; }
.header .nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: var(--accent-on-navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out-expo);
}
.header .nav__list a:hover::after,
.header .nav__list a:focus-visible::after { transform: scaleX(1); }

/* Card lift feedback */
.card, .svc-card {
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover, .svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(1, 0, 28, 0.10);
}

/* Before/after slider (proof page) — placeholder-ready, swap slots for imgs */
.ba-slider {
  --pos: 50%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 4 / 3;
  touch-action: pan-y;
}
.ba-slider__layer { position: absolute; inset: 0; }
.ba-slider__layer .proof-slot { position: absolute; inset: 0; aspect-ratio: auto; }
.ba-slider__layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-slider__layer--after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: var(--accent);
  pointer-events: none;
}
.ba-slider__handle::after {
  content: "\2194";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ba-slider--portrait {
  aspect-ratio: 3 / 4;
  max-width: 460px;
  margin-inline: auto;
}
.ba-slider input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}
.ba-slider .ba-label {
  position: absolute;
  top: var(--space-3);
  margin: 0;
  padding: 0.25em 0.8em;
  border-radius: var(--radius-button);
  background: var(--band);
  color: var(--on-band);
  z-index: 1;
}
.ba-slider .ba-label--before { left: var(--space-3); }
.ba-slider .ba-label--after { right: var(--space-3); color: var(--band); background: var(--accent-on-navy); }

@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveals: class + stagger index set by JS, one-shot */
  .reveal {
    --reveal-i: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s var(--ease-out-expo), transform 0.55s var(--ease-out-expo);
    transition-delay: calc(var(--reveal-i, 0) * 60ms);
  }
  .reveal.is-in { opacity: 1; transform: none; }

  /* Quote form step + error entrances */
  .form-step[data-active] { animation: step-in 0.3s var(--ease-out-expo); }
  #form-error:not([hidden]) { animation: step-in 0.3s var(--ease-out-expo); }
  @keyframes step-in { from { opacity: 0; transform: translateX(12px); } }

  /* FAQ opens softly (native details) */
  .faq[open] .faq__body { animation: faq-in 0.3s var(--ease-out-expo); }
  @keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }

  /* Signature home hero: blur-to-sharp title, then chip and buttons */
  .hero--home .hero__title.rise { animation: title-in 0.7s var(--ease-out-expo) backwards; }
  @keyframes title-in {
    from { opacity: 0; transform: translateY(26px) scale(0.985); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: blur(0); }
  }
  .hero--home .rise:nth-child(2) { animation-delay: 0.25s; }
  .hero--home .rise:nth-child(3) { animation-delay: 0.4s; }
  .hero--home .rise:nth-child(4) { animation-delay: 0.55s; }

  /* Logo glow holds for as long as the cursor stays on it */
  .logo .logo__img { transition: filter 0.3s var(--ease); }
  .logo:hover .logo__img, .logo:focus-visible .logo__img {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-on-navy) 85%, transparent));
  }
}

/* Sections swell gently under the cursor (whole site, July 2026) */
body { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
  main > .section { transition: transform 0.35s var(--ease-out-expo); }
  main > .section:not(.article):hover { transform: scale(1.015); }
}

/* ==========================================================================
   BLOG ARTICLE READING LAYOUT (Oct 2026)
   Long-form reads left-aligned in one measured column. Headings step down
   from the marketing scale: the title leads, H2s organise, body text rests.
   Same specificity as the site centring rules (.section .container > x),
   placed after them so these win inside articles only.
   ========================================================================== */
.article {
  --a-title: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);   /* ~34px phone, 52px desktop */
  --a-h2:    clamp(1.5rem, 1.2rem + 1.2vw, 2rem);      /* ~24px phone, 32px desktop */
  --a-muted: color-mix(in srgb, var(--ink-soft) 72%, var(--ink)); /* 6.8:1 on paper */
}
.article.section { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-pad); }

.article .container > h1,
.article .container > h2,
.article .container > h3,
.article .container > p,
.article .container > p.lead,
.article .container > ul,
.article .container > ol { text-align: left; margin-inline: 0; }

.article h1 {
  font-size: var(--a-title);
  font-weight: var(--weight-display);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.article .lead {
  margin-top: var(--space-5);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.4rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 85%, var(--paper)); /* 13:1 */
  text-wrap: pretty;
}
.article h2 {
  margin-top: clamp(2.25rem, 1.75rem + 2vw, 3rem);
  font-size: var(--a-h2);
  font-weight: var(--weight-heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.article h2 + p,
.article h2 + ul { margin-top: var(--space-3); }      /* heading sits tight to its content */
.article p { margin-top: var(--space-4); line-height: 1.7; text-wrap: pretty; }
.article ul { margin-top: var(--space-4); padding-left: 1.2em; }
.article li { margin-top: var(--space-2); line-height: 1.6; text-wrap: pretty; }
.article li::marker { color: var(--accent); }
.article li strong { color: var(--ink); }
.article .caveat { margin-top: var(--space-5); color: var(--a-muted); }

.article__cta {
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.article__cta p { margin: 0; font-weight: var(--weight-semibold); }
.article__cta .btn { margin-top: var(--space-4); }
.article .article__meta { margin-top: var(--space-6); color: var(--a-muted); }
.article .bio p:not(.bio__name) { color: var(--a-muted); }
/* .bio p (0,1,1) was beating .bio__name (0,1,0): the author name rendered small and grey */
.bio .bio__name { color: var(--ink); font-size: var(--text-body); }

/* Blog hub: each topic list sits in the same centred reading column as its
   heading, and the short topic groups don't float in full marketing padding. */
.post-list { max-width: var(--width-text); }
.section:has(> .container > .post-list) { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* ==========================================================================
   BOND QUOTE FORM (Oct 2026), built to WEBSITE-QUOTE-FORM.md.
   Three steps, no prices. Extras are one row each: the question on the
   left, a stepper or a Yes/No switch on the right.
   ========================================================================== */
.form[hidden], .bond-done[hidden], .extras__sub[hidden], .email-suggest[hidden] { display: none !important; }
.bond-form, .bond-done { scroll-margin-top: 120px; }

.form__optional { font-weight: var(--weight-body); color: color-mix(in srgb, var(--ink-soft) 72%, var(--ink)); }
.bond-form .form__hint { color: color-mix(in srgb, var(--ink-soft) 72%, var(--ink)); }

.extras__lead { margin: 0 0 var(--space-4); max-width: none; color: color-mix(in srgb, var(--ink-soft) 72%, var(--ink)); }
.extras { border-top: 1px solid var(--line); }
.extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.extra__q { margin: 0; max-width: none; font-weight: var(--weight-semibold); }
.extras__sub { padding: var(--space-4) 0 0 var(--space-5); }
.extras__sub-title {
  margin: 0;
  max-width: none;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: color-mix(in srgb, var(--ink-soft) 72%, var(--ink));
}
.extra--sub .extra__q { font-weight: var(--weight-body); }
.extras__sub .extra:last-child { border-bottom: 0; }

.stepper {
  display: inline-flex;
  flex: none;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-button);
}
.stepper button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.stepper button:hover:not(:disabled) { color: var(--accent); }
.stepper button:disabled { color: var(--line); cursor: default; }
.form .stepper input[type="number"] {
  width: 2.4em;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font-weight: var(--weight-semibold);
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.yesno {
  display: inline-flex;
  flex: none;
  gap: 3px;
  padding: 3px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-button);
}
.yesno label { position: relative; margin: 0; }
.yesno input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.yesno span {
  display: block;
  min-width: 3.4em;
  padding: 0.5em 1em;
  border-radius: var(--radius-button);
  text-align: center;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}
.yesno input:checked + span { background: var(--ink); color: var(--paper); }
.yesno input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.bond-form .form-step__notes textarea { min-height: 100px; }
.bond-note { margin: var(--space-5) 0 0; max-width: none; font-weight: var(--weight-semibold); }
.email-suggest { margin: var(--space-2) 0 0; font-size: var(--text-small); }
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.bond-done {
  max-width: 760px;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.bond-done h2 { margin: 0; font-size: var(--text-h3); text-align: left; }
.bond-done p { margin: var(--space-3) 0 0; max-width: none; text-align: left; }
/* Step titles and the thank-you heading take focus so screen readers announce
   them; they aren't controls, so no focus box. */
.form-step__legend[tabindex="-1"]:focus,
.bond-done h2[tabindex="-1"]:focus { outline: none; }

/* ========================================================================
   PHOTOS (October 2026)
   The 26 AI photos that replaced the dashed placeholder slots. Illustrative
   only: the real before/after photos on the proof page are untouched and
   nothing here is ever presented as "our work".
   ======================================================================== */

.photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-card);
  /* Holds the space in the site's own line colour rather than flashing
     white, so nothing jumps and nothing blinks as it loads. */
  background: var(--line);
}
.photo--4x3 { aspect-ratio: 4 / 3; }
.photo--3x4 { aspect-ratio: 3 / 4; }

/* The home cards. The pink label sits across the bottom, so the photo is
   anchored there and keeps its foot of plain floor behind it. */
.svc-card__img { object-position: bottom; }
/* A dashed border says "placeholder". With a photo in it, it is a card. */
.svc-card:has(.svc-card__img) { border-style: solid; }

/* Service and manager rows. The crop is 4:3, so the slot is too: these
   override .svc-row__media's 16/10, which was the placeholder's shape. */
.svc-row__media.photo { aspect-ratio: 4 / 3; max-width: 360px; justify-self: end; }

/* On a phone the photo goes above the text rather than after it. */
@media (max-width: 899.98px) {
  .svc-row__title { order: 1; }
  .svc-row__media { order: 2; }
  .svc-row__body  { order: 3; }
  .svc-row__media.photo { max-width: none; justify-self: stretch; }
}

.room .photo { margin-bottom: var(--space-4); }

.split__media .photo { max-width: 420px; margin: 0 auto; }
@media (min-width: 900px) {
  .split__media .photo { margin: 0; }
  .split--media:not(.split--flip) .split__media .photo { margin-left: auto; }
}

/* ------------------------------------------------------------------------
   The two slots that have no photo (27 areas, 28 about)
   ------------------------------------------------------------------------
   Neither could be made to look real, so neither gets a picture. These are
   drawn from the site's own colours and fonts and sized exactly like a 4:3
   photo slot, so dropping a real photo in later moves nothing.
   ------------------------------------------------------------------------ */

.slot-panel {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  box-shadow: 0 10px 28px rgba(1, 0, 28, 0.10);
  overflow: hidden;
  max-width: 420px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .split__media .slot-panel { margin: 0; }
  .split--media:not(.split--flip) .split__media .slot-panel { margin-left: auto; }
}

/* 27 — Areas. A pin with rings going out from it, on a pale tint of the
   brand pink. Decoration only: aria-hidden, and it says nothing. */
.slot-panel--areas {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.slot-panel--areas svg { display: block; width: 100%; height: 100%; }
.slot-panel--areas .pin { fill: var(--accent); }
.slot-panel--areas .pin-hole { fill: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.slot-panel--areas .ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  transform-origin: 120px 92px;
  animation: areas-ring 6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.slot-panel--areas .ring--2 { animation-delay: 2s; }
.slot-panel--areas .ring--3 { animation-delay: 4s; }

@keyframes areas-ring {
  0%   { transform: scale(0.55); opacity: 0; }
  18%  { opacity: 0.45; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* 28 — About. The come-back promise, set large. Real text, not a picture
   of text, so it is readable, selectable and searchable. */
.slot-panel--quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  margin-block: 0;
  background: var(--ink);
  color: #fff;
}
.slot-panel--quote .slot-panel__mark {
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 0.5;
  color: var(--accent-on-navy);
}
.slot-panel--quote blockquote { margin: 0; }
.slot-panel--quote p {
  margin: 0;
  max-width: none;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(1.1rem, 1.6vw + 0.7rem, 1.6rem);
  line-height: 1.25;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .slot-panel--areas .ring { animation: none; opacity: 0.3; }
}

/* ------------------------------------------------------------------------
   Five "What we clean" cards, not four
   ------------------------------------------------------------------------
   A three-column grid strands the last row on the left. Flex wraps the same
   way and centres what is left over, so two cards sit under the middle of
   three rather than hard against the gutter.
   ------------------------------------------------------------------------ */
.svc-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.svc-card { flex: 1 1 100%; }
@media (min-width: 720px) {
  .svc-card { flex: 0 1 calc((100% - 2 * var(--space-5)) / 3); }
}