/* ==========================================================================
   Just About Cleaning - Commercial landing page
   Built by Pixelate Pty Ltd. Palette and marque derived from the client's
   live site (justaboutcleaning.com.au) so the page reads as genuinely theirs.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand, taken from the live site stylesheet */
  --jac-cyan: #00d4ff;
  --jac-cyan-soft: #7bd7f5;
  --jac-deep: #0c85ac;
  --jac-deeper: #085f79;
  --jac-tint: #dff4fb;
  --jac-tint-2: #eff9fd;

  /* Neutrals */
  --ink: #0e1116;
  --ink-2: #1a1f26;
  --ink-3: #2a313b;
  --slate: #5a6673;
  /* 4.89:1 on white and 4.62:1 on --wash. Was #7d8896 (3.59:1 on white),
     which failed WCAG AA small text in the hero status cards, review bylines
     and scope subheading; #6b7683 passed white but sat at 4.36:1 on wash. */
  --slate-2: #68727e;
  --line: #e2e8ed;
  --line-2: #eef2f5;
  --wash: #f5f9fb;
  --white: #ffffff;

  /* Type. Display face and body face are deliberately split: the Pixelate
     site registry already carries an Archivo+Archivo pairing (another client),
     and no two Pixelate sites may share a display+body pairing. Archivo stays
     on headings, buttons and display numerals; long-form text runs on the
     system grotesque stack, which reads near-identically at body sizes. */
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Rhythm */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --pad: clamp(20px, 5vw, 40px);
  --maxw: 1240px;

  --shadow-sm: 0 1px 2px rgba(14, 17, 22, .06), 0 2px 8px rgba(14, 17, 22, .04);
  --shadow: 0 2px 6px rgba(14, 17, 22, .06), 0 12px 32px rgba(14, 17, 22, .08);
  --shadow-lg: 0 8px 20px rgba(14, 17, 22, .10), 0 28px 60px rgba(14, 17, 22, .14);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-3);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* clip, NOT hidden. overflow-x:hidden on body computes to overflow:hidden auto,
     which promotes BODY to the scroll container. That silently breaks
     position:sticky on the header, window.scrollY, and every IntersectionObserver
     that uses the viewport as its root, so the metrics count-up, the section
     reveals and the sticky CTA all stopped firing. clip suppresses horizontal
     overflow without establishing a scroll container. */
  overflow-x: clip;
}

img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 800;
  font-family: var(--font);
}
/* Display voice: Archivo carries the headings above plus buttons, the brand
   lockup, the stat numerals, the wizard questions and the big phone number. */
.btn, .brand__txt, .metric__v, .card-s__v, .step__q, .cta__ph a { font-family: var(--font); }
p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--jac-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

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

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(56px, 8vw, 104px) 0; }
/* Every .section sits below the fold on both pages, so let the browser skip
   laying them out until they approach the viewport. Cuts first-layout work
   roughly in half on a throttled phone. The 900px hint is only used before a
   section is first rendered; after that the browser remembers the real size.
   Anchor jumps (#quote etc.) still render the target on demand per spec. */
.section { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.section--wash { background: var(--wash); }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  /* --jac-deeper, 7.2:1 on white. --jac-deep is 4.2:1, under AA for 12px text. */
  color: var(--jac-deeper); margin-bottom: 14px;
}
.head { text-align: center; max-width: 660px; margin: 0 auto clamp(32px, 4vw, 52px); }
.head h2 { font-size: clamp(28px, 4.2vw, 44px); text-wrap: balance; }
.head p { margin-top: 14px; color: var(--slate); font-size: clamp(15px, 1.6vw, 17px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 700; font-size: 15px; letter-spacing: -.01em; text-decoration: none;
  cursor: pointer; transition: transform .2s var(--ease), background-color .2s var(--ease),
    border-color .2s var(--ease), box-shadow .2s var(--ease);
  min-height: 48px; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--jac-cyan); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: #22ddff; box-shadow: var(--shadow); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-2); }

.btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

.btn--outline { background: #fff; border-color: var(--line); color: var(--ink); }
.btn--outline:hover { border-color: var(--ink); }

.btn .ar { transition: transform .25s var(--ease); }
.btn:hover .ar { transform: translateX(3px); }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.hdr__in { display: flex; align-items: center; gap: 24px; height: 74px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; min-height: 44px; }
/* No badge disc. The circle read as a sticker pasted onto the bar; the marque
   now sits directly on the header and shares its background. */
.brand__mark { display: grid; place-items: center; flex-shrink: 0; }
.brand__mark img { width: 38px; height: auto; }
.brand__txt { line-height: 1; }
.brand__a { display: block; font-size: 9px; font-weight: 700; letter-spacing: .16em; color: var(--jac-deep); text-transform: uppercase; }
.brand__b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin: 2px 0 1px; }
.brand__c { display: block; font-size: 8px; font-weight: 600; letter-spacing: .18em; color: var(--slate-2); text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav a {
  font-size: 13.5px; font-weight: 600; color: var(--slate);
  text-decoration: none; letter-spacing: .01em; transition: color .18s var(--ease);
  padding: 6px 0; position: relative;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--jac-cyan); transition: right .25s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { right: 0; }

.hdr .btn { padding: 12px 22px; min-height: 44px; font-size: 14px; }
.hdr__cta { flex-shrink: 0; }

@media (max-width: 1020px) { .nav { display: none; } .hdr__in { justify-content: space-between; } .hdr__cta { margin-left: auto; } }
@media (max-width: 374px) {
  /* 320px must not overflow. These mitigations were not enough on their own:
     the header CTA group still measured 179px and pinned the layout viewport to
     343px, so a real 320px phone got 23px of horizontal overflow and the quote
     button was clipped mid-word. Dropping the call button's text label reclaims
     about 55px and keeps the quote CTA whole, which is the one that must never
     be hidden. The icon keeps its accessible name via aria-label, and a call
     action still appears twice more on screen: the floating green button and
     the sticky bar. */
  .hdr__in { gap: 10px; }
  .hdr .btn { padding: 11px 12px; font-size: 12.5px; }
  .hdr .btn .ar { display: none; }
  .brand__c { display: none; }
  /* Arithmetic, not taste: at 320px the .wrap content box is 280px, and the
     header needed brand 136 + gap 10 + CTA 179 = 325. Hiding just the call
     label left it at 179 and the page still overflowed to 343. Dropping the
     header call pill entirely brings the group to 126 and the row to 272,
     which fits. The quote CTA is never hidden; calling stays available twice
     over on this breakpoint, via the floating green button and the sticky
     bar, both of which are on screen. */
  .hdr__cta .btn--call { display: none; }
}
@media (max-width: 420px) { .brand__b { font-size: 16px; } .hdr .btn { padding: 11px 16px; font-size: 13px; } }

/* ---------- Trust bar ---------- */
.trust { background: var(--jac-tint-2); border-bottom: 1px solid var(--line); }
.trust__in {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 42px);
  /* Same fix as .hero__in: the trailing 0 was cancelling .wrap's side padding,
     so the first badge touched the edge. This strip scrolls horizontally on
     narrow screens, so it needs padding-right on the scroll content too, or
     the last badge butts against the edge at the end of the scroll. */
  padding: 13px var(--pad); overflow-x: auto; scrollbar-width: none;
}
.trust__in::-webkit-scrollbar { display: none; }
.trust__i {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.trust__i svg { width: 16px; height: 16px; color: var(--jac-deep); flex-shrink: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; background: #fff; color: var(--ink-3); overflow: hidden; }
.hero__in {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px);
  align-items: center;
  /* The horizontal value is var(--pad), NOT 0. This shorthand used to end in
     "0", which silently cancelled the side padding .wrap sets, so below the
     max-width the headline and the hero image sat flush against the screen
     edge while every other section on the page was inset by 40px. */
  padding: clamp(44px, 6vw, 84px) var(--pad) clamp(80px, 8vw, 120px);
}
.hero h1 {
  font-size: clamp(38px, 6.4vw, 74px); color: var(--ink); letter-spacing: -.035em;
  line-height: .96; text-transform: uppercase;
}
/* --jac-cyan measures 1.8:1 on white and fails even the large-text bar, so
   the accent line uses the text-safe brand teal. */
.hero h1 .accent { color: var(--jac-deep); display: block; }
.hero__sub {
  margin-top: 20px; font-size: clamp(16px, 1.9vw, 19px); line-height: 1.55;
  color: var(--slate); max-width: 44ch;
}
.hero__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; }
.hero__list li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15px; color: var(--ink-3);
}
.hero__list svg { width: 17px; height: 17px; color: var(--jac-deep); flex-shrink: 0; margin-top: 3px; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }

.hero__media { position: relative; }
.hero__img {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4 / 3.4; background: var(--wash);
}
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
/* The scrim existed to hold white type over the photo. On the light theme the
   type sits beside the image, so the photograph is left alone. */

/* Hero status cards */
.cards { position: absolute; right: -10px; top: 8%; display: grid; gap: 12px; width: min(230px, 46%); z-index: 2; }
.card-s {
  background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(14px) scale(.96);
}
.card-s.in { animation: cardIn .55s var(--ease) forwards; }
@keyframes cardIn { to { opacity: 1; transform: translateY(0) scale(1); } }
.card-s__k {
  font-size: 8.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate-2); margin-bottom: 5px;
}
.card-s__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-s__v { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.card-s__v small { font-size: 11px; font-weight: 600; color: var(--slate-2); }
.card-s__m { font-size: 10.5px; color: var(--slate-2); margin-top: 3px; }
.card-s__tick { width: 19px; height: 19px; border-radius: 50%; background: var(--jac-deep); display: grid; place-items: center; flex-shrink: 0; }
.card-s__tick svg { width: 11px; height: 11px; color: #fff; }
.stars { display: flex; gap: 1.5px; margin-top: 3px; }
.stars svg { width: 11px; height: 11px; color: var(--jac-deep); }

@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; padding-bottom: clamp(60px, 8vw, 90px); }
  .hero__media { order: 2; }
  .hero__img { aspect-ratio: 16 / 11; }
  .cards { position: static; width: 100%; grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
  .card-s { padding: 11px 12px; }
}
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } .cards .card-s:nth-child(n+3) { display: none; } }

/* ---------- Metrics ---------- */
.metrics { position: relative; margin-top: clamp(-64px, -6vw, -50px); z-index: 3; }
.metrics__in {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden;
}
.metric { padding: clamp(22px, 3vw, 34px) 18px; text-align: center; border-right: 1px solid var(--line-2); }
.metric:last-child { border-right: 0; }
.metric svg { width: 22px; height: 22px; color: var(--jac-deep); margin: 0 auto 12px; }
.metric__v { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; color: var(--jac-deep); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.metric__l { font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--slate); margin-top: 9px; }

@media (max-width: 760px) {
  .metrics__in { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }
  .metric:nth-child(2n) { border-right: 0; }
}

/* ---------- Industry selector ---------- */
.ind__tabs {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 16px;
}
.ind__tab {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r);
  padding: 0; cursor: pointer; overflow: hidden; text-align: left;
  transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease),
    background-color .22s var(--ease);
  display: flex; flex-direction: column;
}
.ind__tab:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--jac-cyan-soft); }
.ind__tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); }
.ind__tab-h { display: flex; align-items: center; gap: 8px; padding: 14px 13px 12px; }
.ind__tab svg { width: 19px; height: 19px; color: var(--jac-deep); flex-shrink: 0; }
.ind__tab[aria-selected="true"] svg { color: var(--jac-cyan); }
.ind__tab span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink);
}
.ind__tab[aria-selected="true"] span { color: #fff; }
.ind__tab-img { height: 64px; overflow: hidden; background: var(--wash); transition: height .22s var(--ease); }
.ind__tab-img img { width: 100%; height: 100%; object-fit: cover; }
.ind__tab[aria-selected="true"] .ind__tab-img { height: 0; }

.ind__panel {
  background: var(--jac-tint-2); border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 26px);
  display: grid; grid-template-columns: 300px 1fr 1fr; gap: clamp(18px, 2.6vw, 32px); align-items: center;
}
.ind__panel-img { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; }
.ind__panel-img img { width: 100%; height: 100%; object-fit: cover; }
.ind__panel h3 { font-size: clamp(19px, 2.2vw, 25px); margin-bottom: 11px; }
.ind__panel p { color: var(--slate); font-size: 15px; line-height: 1.6; }
.ind__ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ind__ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink-3); }
.ind__ul svg { width: 16px; height: 16px; color: var(--jac-deep); flex-shrink: 0; margin-top: 3px; }

.fade-swap { animation: fadeSwap .32s var(--ease); }
@keyframes fadeSwap { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

@media (max-width: 1000px) { .ind__panel { grid-template-columns: 1fr 1fr; } .ind__panel-img { grid-column: 1 / -1; aspect-ratio: 16 / 7; } }
@media (max-width: 760px) {
  .ind__tabs { grid-template-columns: repeat(2, 1fr); }
  .ind__tab-img { height: 54px; }
  .ind__panel { grid-template-columns: 1fr; }
  .ind__panel-img { aspect-ratio: 16 / 9; }
}

/* ---------- Problem cards ---------- */
.probs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.prob {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r);
  padding: 22px 20px; display: flex; flex-direction: column;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.prob:hover { border-color: var(--jac-cyan-soft); box-shadow: var(--shadow); transform: translateY(-3px); }
.prob__ico { width: 26px; height: 26px; color: var(--jac-deep); margin-bottom: 15px; }
.prob h3 { font-size: 16.5px; margin-bottom: 9px; letter-spacing: -.015em; }
.prob p { font-size: 14px; color: var(--slate); line-height: 1.6; }
.prob__more {
  overflow: hidden; max-height: 0; transition: max-height .34s var(--ease);
}
.prob__more p {
  padding-top: 13px; margin-top: 13px; border-top: 1px solid var(--line-2);
  color: var(--ink-3); font-weight: 500;
}
.prob[data-open="true"] .prob__more { max-height: 220px; }
.prob__btn {
  margin-top: auto; align-self: flex-start; width: 32px; height: 32px; border-radius: 50%;
  background: var(--jac-tint); border: 0; color: var(--jac-deeper); cursor: pointer;
  display: grid; place-items: center; margin-top: 18px;
  transition: background-color .2s var(--ease), transform .28s var(--ease);
}
.prob__btn:hover { background: var(--jac-cyan-soft); }
/* Keep the 32px circle visually, but extend the touch area to 44px so the
   control meets the minimum tap target without bloating the card. */
.prob__btn { position: relative; }
.prob__btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.prob[data-open="true"] .prob__btn { transform: rotate(45deg); background: var(--ink); color: #fff; }
.prob__btn svg { width: 15px; height: 15px; }

@media (max-width: 940px) { .probs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .probs { grid-template-columns: 1fr; } }

/* ---------- Managed service flow ---------- */
.flow { background: var(--jac-tint-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 46px); color: var(--ink-3); }
.flow__grid { display: grid; grid-template-columns: 235px 1fr; gap: clamp(24px, 3.4vw, 48px); align-items: center; }
.flow__t { font-size: clamp(20px, 2.4vw, 27px); color: var(--ink); text-transform: uppercase; letter-spacing: -.02em; line-height: 1.12; }
.flow__t span { color: var(--jac-deep); }
.flow__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.flow__line {
  position: absolute; top: 17px; left: 8%; height: 2px; background: var(--jac-deep);
  width: 0; transition: width 1.1s var(--ease); opacity: .5;
}
.flow__line.in { width: 84%; }
.flow__step { position: relative; z-index: 2; opacity: 0; transform: translateY(9px); }
.flow__step.in { animation: stepIn .45s var(--ease) forwards; }
@keyframes stepIn { to { opacity: 1; transform: none; } }
.flow__ico {
  width: 35px; height: 35px; border-radius: 9px; background: #fff;
  border: 1px solid var(--line);
  display: grid; place-items: center; margin-bottom: 13px;
}
.flow__ico svg { width: 18px; height: 18px; color: var(--jac-deep); }
/* min-height keeps the body copy on a shared baseline when a heading wraps */
.flow__step h3 { font-size: 12px; color: var(--ink); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 7px; min-height: 2.4em; }
.flow__step p { font-size: 12.5px; color: var(--slate); line-height: 1.55; }

@media (max-width: 1000px) { .flow__grid { grid-template-columns: 1fr; } .flow__steps { grid-template-columns: repeat(3, 1fr); gap: 22px; } .flow__line { display: none; } }
@media (max-width: 620px) { .flow__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .flow__steps { grid-template-columns: 1fr; } }

/* ---------- Before / after ---------- */
.ba { display: grid; grid-template-columns: 330px 1fr; gap: clamp(24px, 3.4vw, 48px); align-items: center; }
.ba h2 { font-size: clamp(26px, 3.4vw, 38px); text-transform: uppercase; }
.ba p { margin-top: 14px; color: var(--slate); font-size: 15.5px; }
.ba__hint { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--jac-deeper); }
.ba__hint svg { width: 16px; height: 16px; }

.ba__stage {
  /* 16/9 matches the shipped ba-* pair (1200x675). A 4/3 stage re-cropped
     them and cut the carpet detail the comparison depends on. */
  position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9;
  cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y;
  background: var(--ink-2);
}
.ba__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__after { clip-path: inset(0 0 0 50%); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff;
  transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.ba__knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: var(--shadow);
  display: grid; place-items: center; color: var(--ink);
}
.ba__knob svg { width: 19px; height: 19px; }
.ba__tag {
  position: absolute; top: 14px; padding: 6px 13px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  pointer-events: none;
}
.ba__tag--b { left: 14px; background: rgba(255, 255, 255, .94); color: var(--ink); }
.ba__tag--a { right: 14px; background: var(--jac-cyan); color: var(--ink); }
.ba__range { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: ew-resize; margin: 0; }
/* The range is transparent, so its own outline is invisible. Put the ring
   on the stage instead, keyboard-only. */
.ba__stage:has(.ba__range:focus-visible) { outline: 3px solid var(--jac-deep); outline-offset: 3px; }

@media (max-width: 900px) { .ba { grid-template-columns: 1fr; } }

/* ---------- Scope of works ("what gets done") ----------
   This replaced the before/after slider. The slider markup is preserved in
   docs/HANDOVER.md and the CSS and JS above still support it, so it can be
   restored the day a genuine before and after pair exists. */
.scope { display: grid; grid-template-columns: 330px 1fr; gap: clamp(24px, 3.4vw, 48px); align-items: center; }
.scope h2 { font-size: clamp(26px, 3.4vw, 38px); text-transform: uppercase; }
.scope > div > p { margin-top: 14px; color: var(--slate); font-size: 15.5px; }
.scope__hint { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--jac-deeper); }
.scope__hint svg { width: 16px; height: 16px; flex-shrink: 0; }

.sheet {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow);
}
.sheet__hd {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 20px; background: var(--ink); color: #fff;
}
.sheet__hd p { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.sheet__hd b { display: block; font-size: 14.5px; color: #fff; letter-spacing: -.01em; margin-top: 3px; }
.sheet__badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  background: rgba(0, 212, 255, .14); color: var(--jac-cyan);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; flex-shrink: 0;
}
.sheet__badge svg { width: 13px; height: 13px; }

.sheet__body { display: grid; grid-template-columns: 210px 1fr; }
.sheet__areas { border-right: 1px solid var(--line-2); background: var(--wash); padding: 8px; }
.sheet__area {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 12px; border: 0; background: none; cursor: pointer; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--slate); min-height: 44px;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.sheet__area svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .65; }
.sheet__area:hover { background: rgba(0, 212, 255, .09); color: var(--ink); }
.sheet__area[aria-selected="true"] { background: var(--ink); color: #fff; }
.sheet__area[aria-selected="true"] svg { color: var(--jac-cyan); opacity: 1; }

.sheet__tasks { padding: 20px 24px 22px; min-height: 268px; }
.sheet__tasks h3 { font-size: 16.5px; margin-bottom: 4px; }
.sheet__tasks > p { font-size: 13px; color: var(--slate-2); margin-bottom: 16px; }
.sheet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sheet__list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--ink-3); line-height: 1.5; }
.sheet__tick {
  width: 19px; height: 19px; border-radius: 5px; background: var(--jac-tint);
  display: grid; place-items: center; flex-shrink: 0; margin-top: 1px;
}
.sheet__tick svg { width: 11px; height: 11px; color: var(--jac-deeper); }
.sheet__ft {
  padding: 14px 24px; border-top: 1px solid var(--line-2); background: var(--jac-tint-2);
  font-size: 12.5px; color: var(--slate);
}

@media (max-width: 900px) { .scope { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .sheet__body { grid-template-columns: 1fr; }
  .sheet__areas {
    border-right: 0; border-bottom: 1px solid var(--line-2);
    display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 9px;
  }
  .sheet__areas::-webkit-scrollbar { display: none; }
  .sheet__area { width: auto; flex-shrink: 0; white-space: nowrap; }
  .sheet__tasks { min-height: 0; }
}

/* ---------- Family ---------- */
.fam { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 56px); align-items: center; }
.fam__img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--shadow); }
.fam__img img { width: 100%; height: 100%; object-fit: cover; }
.fam h2 { font-size: clamp(27px, 3.6vw, 40px); margin-bottom: 16px; }
.fam p { color: var(--slate); font-size: 15.5px; line-height: 1.68; }
/* The names used to sit beside the signature at 10.5px, which read as a caption
   on Dave's signature rather than as both directors signing. Stacked now, with
   the names at a readable size, so the joint sign-off is the thing you see. */
.fam__sig { margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fam__sig img { height: 46px; width: auto; }
.fam__sigNames { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.fam__sigName { font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: 0; text-transform: none; }
.fam__sigRole { font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--slate-2); }
.fam__pts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 15px; }
.fam__pts li { display: flex; align-items: center; gap: 13px; }
.fam__pts .ic {
  width: 38px; height: 38px; border-radius: 10px; background: var(--jac-tint);
  display: grid; place-items: center; flex-shrink: 0;
}
.fam__pts .ic svg { width: 18px; height: 18px; color: var(--jac-deeper); }
.fam__pts strong { display: block; font-size: 14.5px; color: var(--ink); font-weight: 700; }

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { transition: opacity .7s var(--ease), transform .7s var(--ease); opacity: 1; transform: none; }

@media (max-width: 860px) { .fam { grid-template-columns: 1fr; } .fam__img { order: -1; aspect-ratio: 16 / 10; } }

/* Two directors sign off. Both handwritten marks sit on one baseline, the
   joint names beneath. Used once Tesh's real signature file is in place. */
.fam__sigMarks { display: flex; align-items: flex-end; gap: clamp(18px, 3vw, 30px); flex-wrap: wrap; }

/* ---------- NDIS price guide ---------- */
.pguide {
  max-width: 760px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.pguide__row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px clamp(18px, 3vw, 26px); border-top: 1px solid var(--line-2);
}
.pguide__row:first-child { border-top: 0; }
.pguide__row--rate { background: var(--jac-tint-2); }
.pguide__svc { font-weight: 700; color: var(--ink); font-size: 15px; }
.pguide__val { text-align: right; color: var(--ink-3); font-size: 14.5px; white-space: nowrap; }
.pguide__val b { font-family: var(--font); font-size: 20px; font-weight: 800; color: var(--jac-deep); letter-spacing: -.02em; }
.pguide__val em {
  display: block; font-style: normal; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--jac-deeper); margin-top: 2px;
}
.pguide__val--poa { color: var(--slate); font-weight: 600; }
.pguide__foot { max-width: 760px; margin: 18px auto 0; color: var(--slate); font-size: 14px; text-align: center; }
@media (max-width: 560px) {
  .pguide__row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pguide__val { text-align: left; white-space: normal; }
}

/* ---------- Quote wizard ---------- */
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.quote__grid { display: grid; grid-template-columns: 320px 1fr; }
.quote__left { padding: clamp(28px, 3.6vw, 44px); border-right: 1px solid var(--line); background: var(--jac-tint-2); }
.quote__left h2 { color: var(--ink); font-size: clamp(23px, 2.8vw, 31px); text-transform: uppercase; line-height: 1.1; }
.quote__left > p { color: var(--slate); font-size: 14.5px; margin-top: 14px; }
.quote__timer { display: flex; align-items: center; gap: 13px; margin-top: 26px; }
.quote__ring {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  border: 2px solid var(--jac-deep);
  /* --jac-deep measures 3.95:1 on this tint, which fails 1.4.3 for text.
     --jac-deeper measures 6.72:1. The 2px border stays --jac-deep: as a
     non-text boundary it only needs 3:1 and clears it. */
  color: var(--jac-deeper);
}
.quote__ring b { font-size: 15px; font-weight: 800; line-height: 1; }
.quote__ring i { font-style: normal; font-size: 7.5px; letter-spacing: .1em; display: block; margin-top: 2px; }
.quote__timer p { font-size: 13px; color: var(--slate); }
.quote__safe { display: flex; align-items: flex-start; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.quote__safe svg { width: 17px; height: 17px; color: var(--jac-deep); flex-shrink: 0; margin-top: 2px; }
.quote__safe span { font-size: 12.5px; color: var(--slate); }

.quote__right { padding: clamp(28px, 3.6vw, 44px); }
.dots { display: flex; align-items: center; gap: 7px; margin-bottom: 28px; }
.dot {
  width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; flex-shrink: 0;
  background: var(--line-2); color: var(--slate);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.dot[data-s="active"] { background: var(--jac-cyan); color: var(--ink); }
.dot[data-s="done"] { background: var(--jac-tint); color: var(--jac-deeper); }
.dot-line { flex: 1; height: 1.5px; background: var(--line); }
.dot-line[data-s="done"] { background: var(--jac-cyan); }

.step { display: none; }
.step[data-active="true"] { display: block; animation: fadeSwap .3s var(--ease); }
.step > label, .step__q {
  display: block; font-size: clamp(17px, 2vw, 21px); font-weight: 700; color: var(--ink);
  margin-bottom: 18px; letter-spacing: -.015em;
}
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 11px; padding: 14px 16px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: 11px; color: var(--ink-3); font-size: 14px; font-weight: 600;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
  min-height: 52px;
}
.opt:hover { border-color: var(--jac-deep); background: var(--jac-tint-2); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt__box {
  width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--slate-2);
  flex-shrink: 0; display: grid; place-items: center; transition: border-color .2s var(--ease);
}
.opt__box::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--jac-deep); transform: scale(0); transition: transform .2s var(--ease); }
.opt input:checked ~ .opt__box { border-color: var(--jac-deep); }
.opt input:checked ~ .opt__box::after { transform: scale(1); }
.opt:has(input:checked) { border-color: var(--jac-deep); background: var(--jac-tint); }
.opt input:focus-visible ~ .opt__box { outline: 3px solid var(--jac-deep); outline-offset: 3px; }

.fld { margin-bottom: 14px; }
.fld label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 7px; }
.fld input, .fld select {
  width: 100%; min-height: 48px; padding: 13px 15px; border-radius: 11px;
  background: #fff; border: 1.5px solid var(--line);
  /* 16px minimum so iOS Safari does not zoom the page on focus */
  color: var(--ink); font-size: 16px; transition: border-color .2s var(--ease);
}
.fld input::placeholder { color: var(--slate-2); }
.fld input:focus, .fld select:focus { outline: none; border-color: var(--jac-deep); }
.fld input:focus-visible, .fld select:focus-visible { outline: 3px solid var(--jac-deep); outline-offset: 2px; }
.fld select option { background: #fff; color: var(--ink); }
.fld--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.err { font-size: 13px; color: #b3261e; font-weight: 600; margin-top: 8px; min-height: 17px; }
.nav-row { display: flex; align-items: center; gap: 11px; margin-top: 24px; }
.nav-row .btn { flex-shrink: 0; }
.back {
  background: none; border: 0; color: var(--slate); font-size: 13.5px;
  font-weight: 600; cursor: pointer; padding: 10px 4px; min-height: 44px;
  /* 4px of side padding made this 37px wide on a phone. Tall enough, too narrow
     to hit, and it is the only way back through the wizard. */
  min-width: 44px;
}
@media (max-width: 760px) { .back { padding: 10px 14px; } }
.back:hover { color: var(--ink); }

.done { text-align: center; padding: 26px 0; }
.done__ic { width: 62px; height: 62px; border-radius: 50%; background: var(--jac-tint); display: grid; place-items: center; margin: 0 auto 20px; }
.done__ic svg { width: 30px; height: 30px; color: var(--jac-deeper); }
.done h3 { color: var(--ink); font-size: 23px; margin-bottom: 12px; }
.done p { color: var(--slate); font-size: 15px; max-width: 42ch; margin: 0 auto; }

@media (max-width: 880px) {
  .quote__grid { grid-template-columns: 1fr; display: flex; flex-direction: column; }
  .quote__left {
    border-right: 0; border-bottom: 1px solid var(--line);
    /* Contents split across the stack: heading first, form next, reassurance
       last. Without this the aside pushed the first question about 500px into
       the section on a phone. */
    display: contents;
  }
  .quote__left > h2, .quote__left > p {
    order: 1; background: var(--jac-tint-2); margin: 0;
    padding-left: clamp(20px, 5vw, 44px); padding-right: clamp(20px, 5vw, 44px);
  }
  /* margin:0 on both, with the spacing carried as padding instead. As separate
     flex items each paints its own background, so any margin between them shows
     as a white stripe through the tinted band. */
  .quote__left > h2 { padding-top: clamp(24px, 4vw, 40px); padding-bottom: 12px; }
  .quote__left > p  { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
  .quote__right { order: 2; }
  .quote__extras {
    order: 3; background: var(--jac-tint-2); border-top: 1px solid var(--line);
    padding: 22px clamp(20px, 5vw, 44px) clamp(24px, 4vw, 34px);
  }
  .quote__extras .quote__timer { margin-top: 0; }
}
@media (max-width: 560px) { .opts { grid-template-columns: 1fr; } .fld--2 { grid-template-columns: 1fr; } }

/* ---------- Reviews ---------- */
.rev__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.rev__arrows { display: flex; gap: 9px; flex-shrink: 0; }
.rev__arrow {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line);
  background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--ink);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.rev__arrow:hover:not(:disabled) { border-color: var(--ink); background: var(--ink); color: #fff; }
.rev__arrow:disabled { opacity: .35; cursor: not-allowed; }
.rev__arrow svg { width: 17px; height: 17px; }

.rev__track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px; scroll-behavior: smooth;
}
.rev__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .rev__track { scroll-behavior: auto; } }
.rev__card {
  flex: 0 0 clamp(270px, 31%, 370px); scroll-snap-align: start;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r); padding: 24px 22px;
  display: flex; flex-direction: column;
}
.rev__stars { display: flex; gap: 2px; margin-bottom: 14px; }
.rev__stars svg { width: 15px; height: 15px; color: var(--jac-deep); }
.rev__card p { font-size: 14.5px; line-height: 1.65; color: var(--ink-3); flex: 1; }
.rev__who { display: flex; align-items: center; gap: 11px; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line-2); }
/* .rev__av is a <span>, so `.rev__who span { display: block }` below (0,1,1)
   was beating `.rev__av` (0,1,0) and overriding the grid. The icon then sat
   on the text baseline, 9px above the circle's centre, in all six cards.
   Scoped to .rev__who .rev__av (0,2,0) so the centring actually applies. */
.rev__who .rev__av { width: 34px; height: 34px; border-radius: 50%; background: var(--jac-tint); display: grid; place-items: center; flex-shrink: 0; }
.rev__av svg { width: 16px; height: 16px; color: var(--jac-deeper); }
.rev__who b { display: block; font-size: 13.5px; color: var(--ink); }
.rev__who span { display: block; font-size: 12px; color: var(--slate-2); }

@media (max-width: 620px) { .rev__card { flex-basis: 84%; } .rev__arrows { display: none; } }

/* ---------- Final CTA ---------- */
.cta { background: var(--jac-tint); }
/* Third instance of the same shorthand mistake: the trailing 0 cancelled the
   side padding .wrap sets, so the heading and the button sat flush against
   the screen edge. Found by measuring every .wrap on the page rather than
   fixing only the two that were reported. */
.cta__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(26px, 3.4vw, 40px) var(--pad); }
.cta__l { display: flex; align-items: center; gap: 17px; }
.cta__ic { width: 50px; height: 50px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; flex-shrink: 0; }
.cta__ic svg { width: 22px; height: 22px; color: var(--jac-cyan); }
.cta__l h2 { font-size: clamp(19px, 2.3vw, 26px); }
.cta__l p { font-size: 14.5px; color: var(--slate); margin-top: 4px; }
.cta__r { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cta__ph span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--slate); }
.cta__ph a { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.cta__ph a:hover { color: var(--jac-deeper); }

/* ---------- Footer ---------- */
.ftr { background: var(--wash); color: var(--slate); border-top: 1px solid var(--line); padding: clamp(40px, 5vw, 60px) 0 28px; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.ftr p { font-size: 14px; line-height: 1.65; margin-top: 15px; max-width: 40ch; }
.ftr h3 { font-size: 11.5px; color: var(--ink); letter-spacing: .13em; text-transform: uppercase; margin-bottom: 15px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ftr a { color: var(--slate); text-decoration: none; font-size: 14px; }
/* Footer links meet the 44px tap-target minimum without changing the layout */
.ftr ul a, .ftr__bot a { display: inline-flex; align-items: center; min-height: 44px; }
.ftr a:hover { color: var(--jac-deeper); }
.ftr__bot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; font-size: 12.5px; }

@media (max-width: 760px) { .ftr__grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- Mobile sticky CTA ---------- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none;
  background: #fff; box-shadow: 0 -6px 24px rgba(14, 17, 22, .12);
  border-top: 1px solid var(--line);
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .34s var(--ease), visibility 0s .34s;
  visibility: hidden;   /* offscreen must not be tabbable (2.4.3, 2.4.7) */
  gap: 10px;
}
.sticky.in { transform: translateY(0); visibility: visible; transition: transform .34s var(--ease); }
.sticky .btn { flex: 1; padding: 13px 14px; font-size: 14px; }
@media (max-width: 900px) { .sticky { display: flex; } body { padding-bottom: 0; } }

/* ---------- Modal (How we work) ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(14, 17, 22, .82); backdrop-filter: blur(6px);
}
.modal[data-open="true"] { display: flex; animation: fadeSwap .25s var(--ease); }
.modal__box {
  background: #fff; border-radius: var(--r-lg); max-width: 620px; width: 100%;
  padding: clamp(24px, 3.4vw, 38px); max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; position: relative;
}
.modal__x {
  position: absolute; top: 15px; right: 15px; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: var(--wash); cursor: pointer; display: grid; place-items: center; color: var(--ink);
}
.modal__x:hover { background: var(--line); }
.modal__x svg { width: 16px; height: 16px; }
.modal__box h3 { font-size: 23px; margin-bottom: 8px; padding-right: 40px; }
.modal__box > p { color: var(--slate); font-size: 14.5px; margin-bottom: 26px; }
.hw { display: grid; gap: 3px; }
.hw__i {
  display: flex; gap: 16px; align-items: flex-start; padding: 15px 0;
  opacity: 0; transform: translateY(10px);
}
.hw__i.in { animation: hwIn .5s var(--ease) forwards; }
@keyframes hwIn { to { opacity: 1; transform: none; } }
/* the number pips light up as the sequence plays */
.hw__i .hw__n { background: var(--wash); color: var(--slate); transition: background-color .35s var(--ease), color .35s var(--ease); }
.hw__i.lit .hw__n { background: var(--ink); color: var(--jac-cyan); }
.hw__bar { height: 3px; background: var(--line-2); border-radius: 2px; overflow: hidden; margin-top: 22px; }
.hw__bar span { display: block; height: 100%; width: 0; background: var(--jac-cyan); border-radius: 2px; }
.hw__bar span.run { transition: width 3.4s linear; width: 100%; }
.hw__replay {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 9px 15px;
  border: 1.5px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink); min-height: 44px;
}
.hw__replay:hover { border-color: var(--ink); }
.hw__replay svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  .hw__i { opacity: 1; transform: none; }
  .hw__i .hw__n { background: var(--ink); color: var(--jac-cyan); }
  .hw__bar { display: none; }
}
.no-js .hw__i { opacity: 1; transform: none; }
.no-js .hw__i .hw__n { background: var(--ink); color: var(--jac-cyan); }
.no-js .hw__bar, .no-js .hw__replay { display: none; }
.hw__n {
  width: 33px; height: 33px; border-radius: 50%; background: var(--ink); color: var(--jac-cyan);
  display: grid; place-items: center; font-size: 13px; font-weight: 800; flex-shrink: 0;
}
.hw__i h4 { font-size: 15.5px; margin-bottom: 5px; }
.hw__i p { font-size: 13.5px; color: var(--slate); line-height: 1.6; }
.hw__i + .hw__i { border-top: 1px solid var(--line-2); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .card-s { opacity: 1; transform: none; }
  .flow__step { opacity: 1; transform: none; }
  .flow__line { width: 84%; }
}

/* ---------- No JS ---------- */
.no-js .reveal, .no-js .card-s, .no-js .flow__step { opacity: 1; transform: none; }
.no-js .step { display: block; margin-bottom: 26px; }
.no-js .dots, .no-js .nav-row .back { display: none; }

.no-js .sticky { display: none; }

/* ---------- Touch and anchor polish (design-qa-gate) ---------- */
button, .btn, .ind__tab, .sheet__area, .prob__btn, .rev__arrow, .opt {
  touch-action: manipulation;              /* removes the 300ms tap delay */
  -webkit-tap-highlight-color: rgba(0, 212, 255, .18);
}
main section[id] { scroll-margin-top: 88px; }   /* anchors clear the sticky header */
@media (max-width: 900px) { .ftr { padding-bottom: 96px; } }  /* sticky bar must not cover the legal line */


/* ==========================================================================
   Added 18 Aug 2026 on client review: light theme support, the reordered quote
   flow, service areas, the two tickers and the extra section motion.
   ========================================================================== */

/* ---------- Buttons added for the light theme ---------- */
.btn--call {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.btn--call:hover { background: var(--jac-deeper); border-color: var(--jac-deeper); }
.btn--call-sm { padding: 12px 18px; min-height: 44px; font-size: 14px; }
.btn--quiet { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--quiet:hover { border-color: var(--ink); background: var(--wash); }
@media (max-width: 620px) { .btn--call-sm .btn__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .btn--call-sm { padding: 12px 14px; } }

/* ---------- Header: hard bar once the page scrolls ---------- */
.hdr.is-stuck { box-shadow: 0 2px 14px rgba(14, 17, 22, .10); }

/* ---------- Quote panel additions ---------- */
.quote__call {
  display: flex; align-items: center; gap: 11px; margin-top: 22px; padding: 13px 15px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  text-decoration: none; color: var(--ink-3); font-size: 13.5px; min-height: 52px;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.quote__call:hover { border-color: var(--jac-deep); transform: translateY(-2px); }
.quote__call svg { width: 18px; height: 18px; color: var(--jac-deep); flex-shrink: 0; }
.quote__call strong { color: var(--ink); font-family: var(--font); white-space: nowrap; }
/* A phone number that folds its last three digits onto a new line reads as
   broken. It is 86px in the panel and up to 196px on the confirmation screen,
   inside containers far wider than that, so holding it on one line cannot
   cause an overflow. */
.done a[href^="tel:"] { white-space: nowrap; }

.fld__opt { font-weight: 400; color: var(--slate-2); text-transform: none; letter-spacing: 0; }
.fld__hint { font-size: 12.5px; color: var(--slate); margin-top: 4px; }

.opts--2up { grid-template-columns: repeat(2, 1fr); }
.opt--big { align-items: flex-start; padding: 18px 18px; min-height: 84px; }
.opt__txt { display: block; }
.opt__txt strong { display: block; font-size: 15.5px; color: var(--ink); font-family: var(--font); }
.opt__txt small { display: block; font-size: 12.5px; font-weight: 500; color: var(--slate); margin-top: 3px; line-height: 1.45; }
@media (max-width: 560px) { .opts--2up { grid-template-columns: 1fr; } }

/* Choice steps advance on click, so the forward button is hidden on them and
   only the Back control remains. Field steps keep a real submit control. */
.nav-row[data-hide-next="true"] .btn--primary { display: none; }
.nav-row[data-hide-next="true"] { justify-content: flex-start; }

/* ---------- Service areas ----------
   Was a single wrapping row of pills. Because every place name is a different
   length the row ragged badly and read as a blob. Grouping by region and
   setting one column per group gives it structure and an even edge. */
.areas__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  background: var(--jac-tint-2); border: 1px solid var(--jac-tint);
  border-radius: var(--r-lg); padding: clamp(24px, 3.2vw, 40px);
}
.areas__group h3 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--jac-deeper); padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--jac-tint);
}
/* Place names as wrapping chips rather than one stacked row each. Fourteen
   full-width rows ran to 1012px on a phone; several names sit on a line now. */
.areas__group ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.areas__group li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; font-size: 14.5px; font-weight: 600; color: var(--ink-3);
  background: var(--jac-tint-2, #f2f8fb);
  border: 1px solid rgba(12, 133, 172, .16);
  border-radius: 999px;
  white-space: nowrap;
}
.areas__group svg { width: 14px; height: 14px; color: var(--jac-deep); flex-shrink: 0; }
.areas__foot { text-align: center; margin-top: clamp(26px, 3vw, 36px); }

@media (max-width: 860px) { .areas__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .areas__grid { grid-template-columns: 1fr; gap: 16px; }
  .areas__group + .areas__group { padding-top: 0; }
  .areas__group h3 { padding-bottom: 8px; margin-bottom: 4px; }
}

/* ---------- Tickers ---------- */
.ticker { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker__track { display: flex; gap: 18px; width: max-content; animation: marquee 68s linear infinite; }
/* David, 25 Aug item 8: "the bottom panel keeps pausing ... I would not have
   it stop when you move the mouse over it". Hover pause removed.
   :focus-within is DELIBERATELY kept: it is the WCAG 2.2.2 mechanism for
   pausing moving content, the strip is tabbable (tabindex="0"), and
   prefers-reduced-motion still stops it outright. */
.ticker:focus-within .ticker__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ticker .rev__card { flex: 0 0 clamp(280px, 30vw, 380px); }

.ticker--logos { padding: 6px 0; }
.ticker__track--rev { list-style: none; margin: 0; padding: 0; gap: clamp(34px, 5vw, 68px); align-items: center; animation-duration: 52s; }
.ticker__track--rev li { flex: 0 0 auto; display: grid; place-items: center; }
.ticker__track--rev img {
  height: 46px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .62;
  transition: filter .25s var(--ease), opacity .25s var(--ease);
}
.ticker__track--rev li:hover img { filter: grayscale(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker { overflow-x: auto; }
}
.no-js .ticker__track { animation: none; }
.no-js .ticker { overflow-x: auto; }

/* ---------- Family heading accent ---------- */
.fam h2 .hl { color: var(--jac-deep); }

/* ---------- Section motion ---------- */
.rise { opacity: 0; transform: translateY(26px); }
.rise.in { transition: opacity .75s var(--ease), transform .75s var(--ease); opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(18px); }
.stagger.in > * { transition: opacity .6s var(--ease), transform .6s var(--ease); opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: .04s; }
.stagger.in > *:nth-child(2) { transition-delay: .10s; }
.stagger.in > *:nth-child(3) { transition-delay: .16s; }
.stagger.in > *:nth-child(4) { transition-delay: .22s; }
.stagger.in > *:nth-child(5) { transition-delay: .28s; }
.stagger.in > *:nth-child(6) { transition-delay: .34s; }
.stagger.in > *:nth-child(7) { transition-delay: .40s; }
.stagger.in > *:nth-child(8) { transition-delay: .46s; }
@media (prefers-reduced-motion: reduce) {
  .rise, .stagger > * { opacity: 1; transform: none; }
}
.no-js .rise, .no-js .stagger > * { opacity: 1; transform: none; }

/* Header at very small widths: the call control is already icon-only, so the
   quote label shortens rather than letting the pair reach the screen edge. */
@media (max-width: 430px) {
  .hdr__in { gap: 8px; }
  .hdr .btn--primary { padding: 11px 14px; font-size: 13px; }
  .hdr .btn--primary .ar { display: none; }
  .brand__c { display: none; }
}


/* ---------- Address lookup ---------- */
.addr { position: relative; }
.addr__list {
  position: absolute; left: 0; right: 0; top: calc(100% - 26px); z-index: 20;
  list-style: none; margin: 6px 0 0; padding: 6px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); max-height: 268px; overflow-y: auto;
}
.addr__list li {
  padding: 11px 12px; border-radius: 9px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center;
}
.addr__list li:hover, .addr__list li.is-active { background: var(--jac-tint); }
.addr__street { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.addr__rest { font-size: 12.5px; color: var(--slate); }

.fld--3 { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 12px; }
@media (max-width: 560px) { .fld--3 { grid-template-columns: 1fr 1fr; } .fld--3 > :first-child { grid-column: 1 / -1; } }

/* ---------- Instant estimate ----------
   Shown on the residential path only. The figures come from the client's own
   published price guide via a deterministic engine, never from a model. */
.est__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 7px; }
.est__select {
  width: 100%; min-height: 48px; padding: 13px 15px; border-radius: 11px;
  background: #fff; border: 1.5px solid var(--line); color: var(--ink);
  font-size: 16px; transition: border-color .2s var(--ease);
}
.est__select:focus { outline: none; border-color: var(--jac-deep); }
.est__select:focus-visible { outline: 3px solid var(--jac-deep); outline-offset: 2px; }

.est {
  margin-top: 22px; border: 1.5px solid var(--jac-tint);
  background: var(--jac-tint-2); border-radius: var(--r); overflow: hidden;
}
.est__hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; background: var(--jac-tint);
}
.est__badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--jac-deeper);
}
.est__from { font-size: 11.5px; color: var(--jac-deeper); text-transform: uppercase; letter-spacing: .08em; }
.est__lines { list-style: none; margin: 0; padding: 14px 18px 6px; }
.est__lines li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid rgba(12, 133, 172, .12);
}
.est__lines li:last-child { border-bottom: 0; }
.est__desc { font-size: 14.5px; color: var(--ink-3); }
.est__val { font-size: 14.5px; font-weight: 700; color: var(--ink); font-family: var(--font); font-variant-numeric: tabular-nums; }
.est__lines small { flex-basis: 100%; font-size: 12px; color: var(--slate); margin-top: 2px; }
.est__total {
  padding: 14px 18px; font-family: var(--font); font-weight: 800;
  font-size: clamp(20px, 2.6vw, 26px); color: var(--jac-deeper);
  border-top: 1.5px solid var(--jac-tint); font-variant-numeric: tabular-nums;
}
.est__note { padding: 0 18px 16px; font-size: 12.5px; color: var(--slate); line-height: 1.55; }
.est__handoff {
  padding: 16px 18px; background: var(--jac-tint-2); border: 1.5px solid var(--jac-tint);
  border-radius: var(--r); font-size: 14.5px; color: var(--ink-3); line-height: 1.6;
}

/* ---- free-text quoting -------------------------------------------------- */
/* Deliberately quieter than the dropdown above it. The dropdown is the path
   most people should take; this is the escape hatch for the job that does not
   fit one, so it should not compete for attention with the primary control. */
/* The estimate repeated on the confirmation screen. Sits under the thank-you
   copy, so it needs its own top margin and a left alignment the centred .done
   block does not give it. */
.done__est { margin-top: 22px; text-align: left; }
.done__est .est__total { font-size: 26px; }
/* .done p is centred and capped at 42ch for the thank-you copy. The estimate's
   note is also a p inside .done, so without this it gets indented and narrowed
   to match, and reads as though it belongs to something else. */
.done__est .est__note { max-width: none; margin: 0; text-align: left; }

.est__loading { font-size: 14.5px; color: var(--slate); padding: 4px 0 2px; }

/* Second question in a two-part ask (tile: treatment, then area). */
.est__label--gap { margin-top: 14px; }
.est__lead { font-size: 14.5px; color: var(--ink-3); line-height: 1.6; margin: 0 0 4px; }
/* The number input reuses the select's box so both questions look like one set. */
input.est__select { -moz-appearance: textfield; }
input.est__select::-webkit-outer-spin-button,
input.est__select::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ai { margin-top: 16px; }
.ai__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 8px 2px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--jac-deeper);
  min-height: 44px;                       /* tap target, not decoration */
}
.ai__toggle svg { width: 16px; height: 16px; flex: none; }
.ai__toggle span { text-decoration: underline; text-underline-offset: 3px; }
.ai__toggle:hover span { text-decoration-thickness: 2px; }
.ai__toggle:focus-visible { outline: 3px solid var(--jac-deep); outline-offset: 2px; border-radius: 6px; }
.ai__body {
  margin-top: 6px; padding: 16px; background: var(--wash);
  border: 1.5px solid var(--line); border-radius: var(--r);
}
.ai__text {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 10px; background: #fff; font: inherit; font-size: 15px;
  color: var(--ink); line-height: 1.55; resize: vertical; min-height: 84px;
}
.ai__text:focus { outline: none; border-color: var(--jac-deep); }
.ai__text:focus-visible { outline: 3px solid var(--jac-deep); outline-offset: 2px; }
.ai__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
/* NOT .btn--ghost: that is white-on-transparent for the dark hero and renders
   invisible on this light panel. White on --jac-deeper clears AA comfortably. */
.ai__go {
  min-height: 44px; padding: 0 22px;
  background: var(--jac-deeper); color: #fff; border: 1.5px solid var(--jac-deeper);
  font-size: 14.5px; font-weight: 700; border-radius: 999px; cursor: pointer;
}
.ai__go:hover { background: var(--jac-deep); border-color: var(--jac-deep); }
.ai__go:focus-visible { outline: 3px solid var(--jac-deep); outline-offset: 3px; }
.ai__go[disabled] { opacity: .55; cursor: progress; }
.ai__status { font-size: 13px; color: var(--slate); line-height: 1.5; flex: 1 1 180px; }
.ai__notes:empty { display: none; }
.ai__notes { margin-top: 12px; }
.ai__notesTitle { margin: 10px 0 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.ai__notesList { margin: 0; padding-left: 18px; }
.ai__notesList li { font-size: 13px; color: var(--slate); line-height: 1.6; }

/* ---- floating call button ------------------------------------------------
   Reproduced from the client's own site. Their declarations, verbatim:
     .fixed-call-button { position:fixed; bottom:50px; right:30px; z-index:9999 }
     .call-link { width:60px; height:60px; background-color:#037e17;
                  border-radius:50%; display:flex; align-items:center;
                  justify-content:center; position:relative;
                  box-shadow:0 10px 25px rgba(0,0,0,.3);
                  transition:transform .3s ease }
     .call-link:hover { transform:scale(1.1) }
     .pulse-ring { position:absolute; width:100%; height:100%;
                   background-color:#037e17; border-radius:50%; opacity:.8;
                   animation:pulse-animation 2s infinite }
     @keyframes pulse-animation { 0%{transform:scale(1);opacity:.8}
                                  100%{transform:scale(1.8);opacity:0} }
   Colour, geometry, shadow, hover and pulse are identical. What is added below
   is a focus ring, a stacking context beneath the mobile menu, and a
   reduced-motion stop, none of which their version has.
   -------------------------------------------------------------------------- */
.fixed-call-button {
  position: fixed; bottom: 50px; right: 30px;
  /* Their z-index is 9999, which would sit ON TOP of this site's full-screen
     mobile menu (z-index 100) and its cookie-free overlays. Kept above page
     content but below the menu, so it cannot cover a nav the user just opened. */
  z-index: 90;
}
.call-link {
  width: 60px; height: 60px; background-color: #037e17; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .3); transition: transform .3s ease;
  color: #fff;   /* the SVG inherits this; 5.25:1 on the green, clears AA */
}
.call-link:hover { transform: scale(1.1); }
.call-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.call-link svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.pulse-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background-color: #037e17; border-radius: 50%; opacity: .8;
  animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.8); opacity: 0; }
}
/* An indefinite pulse is exactly what WCAG 2.2 asks you to stop here. Their
   site does not, ours does. The button keeps working; it just stops throbbing. */
@media (prefers-reduced-motion: reduce) {
  .pulse-ring { animation: none; opacity: 0; }
  .call-link { transition: none; }
  .call-link:hover { transform: none; }
}
/* On small screens the sticky mobile CTA bar owns the bottom edge, so the
   button lifts clear of it rather than sitting on top of it. */
@media (max-width: 760px) {
  .fixed-call-button { bottom: 84px; right: 16px; }
}
/* On a phone this button landed squarely on top of the Phone field. A floating
   call button covering the form is worse than no floating call button: the
   quote panel already carries "Rather talk? 0468 155 546" in its own block, so
   it stands down while the form is on screen and comes back afterwards. */
.fixed-call-button[data-hide="true"] {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--ease), visibility 0s .25s;
}
.fixed-call-button {
  transition: opacity .25s var(--ease), visibility 0s;
}

/* ---------- Photo band ----------
   Added 19 Aug for ndis.html only, on David's request to loosen the layout up
   for more photography. Full-bleed, unlike every other section which sits
   inside .wrap at 1240px, so it reads as a breathing pause between content
   blocks rather than another bordered card. Purely additive: index.html and
   quote.html use none of these classes, so this changes nothing there. */
.photo-band { position: relative; overflow: hidden; background: var(--ink-2); }
.photo-band img {
  width: 100%; height: clamp(240px, 38vw, 460px); object-fit: cover; display: block;
}
.photo-band__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(20px, 3vw, 40px) var(--pad);
  background: linear-gradient(0deg, rgba(14, 17, 22, .74) 0%, rgba(14, 17, 22, 0) 68%);
}
.photo-band__cap p {
  color: #fff; font-family: var(--font); font-weight: 800;
  font-size: clamp(17px, 2.4vw, 26px); letter-spacing: -.015em; line-height: 1.25;
  max-width: 30ch; text-wrap: balance;
}


/* jacq-textarea-lp -----------------------------------------------------------
   Same reasoning as the scoped embed sheet: the form had no textarea until the
   "Anything else we should know?" field was added, so textareas inherited only
   font and colour and rendered with default browser chrome next to the styled
   inputs. Mirrors the .fld input rules.
   -------------------------------------------------------------------------- */
.fld textarea{width:100%;min-height:112px;padding:13px 15px;border-radius:11px;background:#fff;border:1.5px solid var(--line);color:var(--ink);font-size:16px;line-height:1.5;resize:vertical;transition:border-color .2s var(--ease)}
.fld textarea::placeholder{color:var(--slate-2)}
.fld textarea:focus{outline:none;border-color:var(--jac-deep)}
.fld textarea:focus-visible{outline:3px solid var(--jac-deep);outline-offset:2px}
.fld--full{grid-column:1/-1}


/* Multi-item steam cleaning picker (David, 25 Aug: "we need another way for
   people to quote for carpet steam cleaning ... people usually get multiple
   things done"). Replaces a single select that only allowed one item. */
.est__items{margin-top:10px;border:1.5px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.est__grp{margin:0;padding:9px 14px;background:var(--wash,#f3f6f8);font-size:12px;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.est__row{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:10px 14px;border-top:1px solid var(--line)}
.est__grp + .est__row{border-top:0}
.est__rowName{display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--ink);min-width:0}
.est__each{font-size:12.5px;color:var(--ink-3)}
.est__qty{display:flex;align-items:center;gap:0;flex:0 0 auto}
.est__step{width:44px;height:44px;flex:0 0 44px;display:flex;align-items:center;justify-content:center;
border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:20px;line-height:1;
cursor:pointer;border-radius:10px 0 0 10px;transition:border-color .15s,background .15s}
.est__step[data-step="1"]{border-radius:0 10px 10px 0}
.est__step:hover{border-color:var(--jac-deep);background:var(--wash,#f3f6f8)}
.est__step:focus-visible{outline:2px solid var(--jac-deep);outline-offset:2px;z-index:1}
.est__num{width:56px;height:44px;flex:0 0 56px;text-align:center;border:1.5px solid var(--line);
border-left:0;border-right:0;background:#fff;color:var(--ink);font-size:16px;font-weight:700;
-moz-appearance:textfield}
.est__num::-webkit-outer-spin-button,.est__num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.est__num:focus-visible{outline:2px solid var(--jac-deep);outline-offset:-2px}
@media (max-width:420px){
  .est__row{gap:10px;padding:10px 11px}
  .est__rowName{font-size:14.5px}
}

/* David, 25 Aug item 6: "the back button perhaps needs to be more clear".
   It was unstyled text sitting under the options with nothing marking it as
   a control, and he circled it on a phone screenshot. Now a real outlined
   button with a 44px target and a leading arrow. */
.nav-row .back{display:inline-flex;align-items:center;gap:8px;min-height:44px;
padding:11px 18px;border:1.5px solid var(--line);border-radius:11px;background:#fff;
color:var(--ink-2,var(--ink));font-size:15px;font-weight:600;cursor:pointer;
transition:border-color .18s,background .18s,transform .18s}
.nav-row .back::before{content:"";width:8px;height:8px;border-left:2px solid currentColor;
border-bottom:2px solid currentColor;transform:rotate(45deg);flex:0 0 auto}
.nav-row .back:hover{border-color:var(--jac-deep);background:var(--wash,#f3f6f8);transform:translateX(-2px)}
.nav-row .back:focus-visible{outline:2px solid var(--jac-deep);outline-offset:2px}

/* David, 25 Aug item 7: the two handwritten signatures stacked on separate
   lines and "looks funny". They sit side by side now, on one line, with the
   ampersand between them, and wrap only if the screen is genuinely too
   narrow to hold both. */
.fam__sigMarks{display:flex;align-items:flex-end;justify-content:flex-start;gap:10px;flex-wrap:nowrap}
/* The two marks are very different shapes: 120x46 and 511x92. Pinned to a
   single height they total about 390px and wrap on a phone, which is the
   exact complaint. Scaling the height with the viewport keeps both on one
   line at every width. */
.fam__sigMarks img{height:clamp(26px,8vw,44px);width:auto;display:block;flex:0 0 auto}
.fam__sigAmp{font-size:26px;line-height:1;color:var(--ink-3);padding-bottom:4px}

/* ----------------------------------------------------------------------
   Step 4 "Choose one" was clipping its longest option, 4 September 2026.
   Same defect and same fix as quote-embed.css on the main site: this page
   runs the same wizard from app.js, and "Larger homes (quoted individually)"
   measured 246px at 16px against 244px of space, so it was cut outright once
   the native arrow took its share.

   appearance:none reclaims the space the browser reserves for its own arrow
   and gives one chevron that renders the same everywhere. Ellipsis is the
   safety net for any label that still overruns.

   Scoped to select on purpose. input.est__select is the square-metre number
   field on the tile path and must not grow a chevron.
   ---------------------------------------------------------------------- */
select.est__select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding: 13px 36px 13px 14px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235a6673' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

/* The card's own 28px side padding is what actually starves this control on a
   phone: it left the select 278px at a 375px viewport. Trimming it to 18px
   below 430px buys 20px, which is enough for the longest option to show in
   full at 15px instead of truncating, and it stops the step heading wrapping
   to two lines. Below 345px the label still truncates to an ellipsis rather
   than shrink the type past legibility. */
@media (max-width: 430px) {
  select.est__select { font-size: 15px; padding-right: 32px; background-position: right 12px center; }
  .quote__right { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 370px) { select.est__select { font-size: 14px; } }
@media (max-width: 345px) { select.est__select { font-size: 13.5px; padding-left: 12px; } }