/* ============================================================
   YPC STYLE REFERENCE DESIGN SYSTEM - ypc-sr.v18.css
   Brex base, one accent (ember), Inter only. It reaches only pages
   that opt in: rules on shared elements and fragments are scoped to
   body.sr-page, and every class rule uses sr- names. styles.css
   still loads first for the shared fragments; these rules sit on
   top of it. The version is in the file name: any change to this
   file ships as a new file name (ypc-sr.v19.css), never in place.
   ============================================================ */

:root {
  --sr-paper: #ffffff;      /* page canvas */
  --sr-tint: #eef2f8;       /* alternate section band (a navy tint), icon tiles, label pills */
  --sr-tint-line: #d5dce8;  /* hairline for white cards on a tint band */
  --sr-ink: #000000;        /* headings, primary text */
  --sr-graphite: #60646c;   /* body copy */
  --sr-pewter: #6f737b;     /* captions, helper text */
  --sr-hairline: #e4e4e7;   /* card borders, dividers */
  --sr-mist: #b9bbc6;       /* muted icons, inactive arrows */
  --sr-ember: #ff5900;      /* THE accent: primary button fill, circle arrows, ticks, Popular pill, one highlighted word */
  --sr-navy: #0f2447;       /* dark surfaces: hero, close band, step cards, footer, photo band panel */
  --sr-green: #3aad5e;      /* Free Trial buttons only: the live nav Free Trial green (styles.css --green-lt). JS's choice over the contrast target */
  --sr-overlay: rgba(0,7,16,.62);  /* pop-up backdrop */

  --sr-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sr-r-tag: 6px;
  --sr-r-btn: 12px;
  --sr-r-card: 12px;
  --sr-r-band: 16px;
  --sr-max: 1280px;          /* content container; 1440px from 1600px wide */
  --sr-sec-y: 88px;          /* vertical padding of a section band; the close band is +8px, the CTA band -8px */
  --sr-head-gap: 48px;       /* section header (pill, H2, lead) to the content under it */
  --sr-card-gap: 24px;       /* gap between cards in a grid */
  --sr-card-pad: 28px;       /* padding inside a card */
  --sr-h2: clamp(32px, 4vw, 44px);        /* section H2 */
  --sr-hero-title: clamp(40px, 5.5vw, 68px);  /* hero headline */
  --sr-hero-col: 560px;      /* hero text column, desktop */
  --sr-hero-btn: 280px;      /* the two stacked hero buttons, desktop */
  --sr-statement: 36px;      /* statement band line (40px from 1600px) */
  --sr-statement-img: 480px; /* statement band photo, maximum width (560px from 1600px) */
  --sr-nav-h: 118px;        /* the shared nav plus the header bar: 120px from 901px (64px nav + 56px bar, set with the
                               top bar below). Up to 900px it stays 118px as in pass 14 (the header there is 126px, but
                               nothing below 1024px reads the token) */
  --sr-head-gutter: clamp(24px, 2vw, 48px); /* the header's side gutter from 901px: the nav row runs the full screen width inside it */
  --sr-bar-inset: calc(var(--sr-head-gutter) + 16px); /* the top bar's content from 901px: one 16px step inside the nav row */
  --sr-topbar-green: #5dd98a; /* the 1300 number in the top bar from 901px: the live top bar's 1300 green (styles.css .header-expert .phone) */
  --sr-error: #b42318;      /* form field errors and failed-send lines */
  --sr-error-bg: #fdf1f1;   /* an error box's fill */
  --sr-error-line: #e5a4a4; /* an error box's edge */

  /* Derived from the tokens above */
  --sr-ember-hover: #e85100;
  --sr-green-hover: #359f56;  /* --sr-green 8% darker */
  --sr-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23ff5900' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.6l3.6 3.6L14.5 5'/%3E%3C/svg%3E");
  --sr-arrow-ember: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23ff5900' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 5h6.2M5.4 2.4L8 5 5.4 7.6'/%3E%3C/svg%3E");
  --sr-arrow-mist: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23b9bbc6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7h8.5M7.8 3.8L11 7l-3.2 3.2'/%3E%3C/svg%3E");
}

/* ── Base: Inter everywhere on the page, fragments included. The logo is
   SVG text in the shared nav and footer; it gets Inter 700 as a
   placeholder, in the live logo's own colours. ── */
body.sr-page { background: var(--sr-paper); color: var(--sr-ink); font-family: var(--sr-font); font-size: 16px; line-height: 1.55; }
:is(.sr-page, .sr-shared) *:not(text):not(tspan):not(.sr-note) { font-family: var(--sr-font) !important; }
:is(.sr-page, .sr-shared) .nav-logo svg text, :is(.sr-page, .sr-shared) .nav-logo svg tspan { font-family: var(--sr-font); font-weight: 700; }

.sr-wrap { max-width: calc(var(--sr-max) + 48px); margin: 0 auto; padding: 0 24px; }
.sr-sec { padding: var(--sr-sec-y) 0; }
.sr-paper { background: var(--sr-paper); }
.sr-tint { background: var(--sr-tint); }

/* ── Type ── */
.sr-h2 { font-size: var(--sr-h2); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; color: var(--sr-ink); margin: 0; }
.sr-h2 em { font-style: normal; color: var(--sr-ember); }
.sr-h3 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; color: var(--sr-ink); margin: 0; }
.sr-lead { font-size: 18px; line-height: 1.55; color: var(--sr-graphite); max-width: 64ch; margin: 16px 0 0; }
.sr-lead + .sr-lead { margin-top: 12px; }
.sr-text { font-size: 16px; line-height: 1.55; color: var(--sr-graphite); max-width: 64ch; margin: 0; }
.sr-label { font-size: 13px; font-weight: 500; letter-spacing: .01em; color: var(--sr-pewter); }
.sr-num { font-variant-numeric: tabular-nums; }
.sr-ember-text { color: var(--sr-ember); }
:is(.sr-page, .sr-shared) .sr-lead a, :is(.sr-page, .sr-shared) .sr-text a, :is(.sr-page, .sr-shared) .sr-faq-item a, :is(.sr-page, .sr-shared) .sr-note-line a {
  color: var(--sr-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--sr-mist);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
:is(.sr-page, .sr-shared) .sr-lead a:hover, :is(.sr-page, .sr-shared) .sr-text a:hover, :is(.sr-page, .sr-shared) .sr-faq-item a:hover, :is(.sr-page, .sr-shared) .sr-note-line a:hover { text-decoration-color: var(--sr-ink); }
.sr-helper { font-size: 14px; line-height: 1.5; color: var(--sr-pewter); margin: 14px 0 0; }

/* ── Section header: label pill, H2, lead. Left-aligned. Pill is tint on white bands, white on tint bands. ── */
.sr-head { margin-bottom: var(--sr-head-gap); max-width: 780px; }
.sr-pill { display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--sr-ink); background: var(--sr-tint); border-radius: var(--sr-r-tag); padding: 6px 10px; margin: 0 0 20px; letter-spacing: .01em; }
.sr-tint .sr-pill { background: #fff; }
/* White cards on a tint band carry the tint hairline */
:is(.sr-page, .sr-shared) .sr-tint .sr-card, :is(.sr-page, .sr-shared) .sr-tint .sr-panel, :is(.sr-page, .sr-shared) .sr-tint .sr-toc, :is(.sr-page, .sr-shared) .sr-tint .sr-tile { border-color: var(--sr-tint-line); }
:is(.sr-page, .sr-shared) .sr-tint .ypc-reviews[data-mode] > div, :is(.sr-page, .sr-shared) .sr-tint .ypc-named-review > div { border-color: var(--sr-tint-line) !important; }

/* ── Buttons and links ── */
.sr-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
:is(.sr-page, .sr-shared) .sr-btn {
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; line-height: 1.2;
  padding: 14px 22px; border-radius: var(--sr-r-btn); border: 1px solid transparent; background: transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
/* Three or more buttons in a row are all on one row or all stacked full width, never two and one: each
   button's basis is 0 while the row is at least 560px wide (the three closing buttons need about 540px) and
   the whole row's width below that, so they wrap together. Browsers without :has() keep the plain wrap. */
:is(.sr-page, .sr-shared) .sr-btns:has(> .sr-btn:nth-child(3)) > .sr-btn { flex: 0 1 calc((560px - 100%) * 999); max-width: 100%; }
/* Primary: the 1px edge is the fill colour, so it reads borderless but matches a secondary's height */
:is(.sr-page, .sr-shared) .sr-btn-primary { background: var(--sr-ember); border-color: var(--sr-ember); color: #fff; }
:is(.sr-page, .sr-shared) .sr-btn-primary:hover { background: var(--sr-ember-hover); border-color: var(--sr-ember-hover); }
:is(.sr-page, .sr-shared) .sr-btn-secondary { color: var(--sr-ink); border-color: var(--sr-ink); }
:is(.sr-page, .sr-shared) .sr-btn-secondary:hover { background: var(--sr-ink); color: #fff; }
.sr-dark .sr-btn-secondary { color: #fff; border-color: #fff; }
:is(.sr-page, .sr-shared) .sr-dark .sr-btn-secondary:hover { background: #fff; color: var(--sr-ink); }
/* Free Trial: every Free Trial button, on any surface, filled green. Nothing else is green. */
:is(.sr-page, .sr-shared) .sr-btn-trial { background: var(--sr-green); border-color: var(--sr-green); color: #fff; font-weight: 700; }
:is(.sr-page, .sr-shared) .sr-btn-trial:hover { background: var(--sr-green-hover); border-color: var(--sr-green-hover); }

.sr-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; }
:is(.sr-page, .sr-shared) .sr-carrow { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--sr-ink); text-decoration: none; }
.sr-carrow::before { content: ''; width: 20px; height: 20px; box-sizing: border-box; flex-shrink: 0; border: 1.5px solid var(--sr-ember); border-radius: 50%; background: var(--sr-arrow-ember) center / 10px 10px no-repeat; }
:is(.sr-page, .sr-shared) .sr-carrow:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Ticks */
.sr-ticks { list-style: none; margin: 24px 0 0; padding: 0; }
.sr-ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.45; color: var(--sr-ink); padding: 8px 0; }
.sr-ticks li::before { content: ''; width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; background: var(--sr-tick) center / 18px 18px no-repeat; }
.sr-dark .sr-ticks li { color: #fff; }

/* Line icons */
.sr-icon { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── Hero (.sr-hero): split, first screen. Desktop (1024px and wider): a navy block
   filling the first screen below the nav (600px floor, 1100px ceiling, min-height so it
   grows with its content); the photo is the right 60% of the stage, clear, with one
   navy fade over its left 35%; the text column sits on navy at the left, centred in the
   stage; the pinned strip (.sr-hero-strip) closes the hero at the bottom. Under 1024px:
   photo 16/9 on top fading into navy, then the text, then the strip.
   Each page sets .sr-hero-bg object-position for desktop and for max-width 1023.98px. ── */
.sr-hero { position: relative; display: flex; flex-direction: column; background: var(--sr-navy); color: #fff; overflow: hidden;
  min-height: clamp(600px, calc(100vh - var(--sr-nav-h)), 1100px);
  min-height: clamp(600px, calc(100svh - var(--sr-nav-h)), 1100px); }
.sr-hero-stage { position: relative; flex: 1 0 auto; display: flex; align-items: center; }
.sr-hero-bg { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; height: 100%; object-fit: cover; }
/* Solid navy at the photo's left edge (1px under it, so no seam), clear by 35% of the photo's width */
.sr-hero-fade { position: absolute; top: 0; bottom: 0; left: calc(40% - 1px); width: calc(21% + 1px); pointer-events: none;
  background: linear-gradient(90deg, var(--sr-navy) 0%, rgba(15,36,71,.94) 22%, rgba(15,36,71,.74) 46%, rgba(15,36,71,.38) 72%, rgba(15,36,71,0) 100%); }
.sr-hero-stage > .sr-wrap { position: relative; z-index: 1; width: 100%; }
.sr-hero-grid { padding: 32px 0; }
.sr-hero-grid > .sr-dark { max-width: var(--sr-hero-col); }
/* Pinned strip: one line, full width, the last thing on the first screen */
.sr-hero-strip { position: relative; z-index: 1; flex: none; background: var(--sr-paper); border-bottom: 1px solid var(--sr-hairline); padding: 28px 0; text-align: center; }
.sr-hero-strip.sr-tint { background: var(--sr-tint); border-bottom: 0; }
:is(.sr-page, .sr-shared) .sr-hero-strip p { font-size: 24px; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; color: var(--sr-ink); margin: 0; }
/* The band the strip introduces carries on directly under it */
.sr-sec.sr-sec-after-strip { padding-top: 20px; }
:is(.sr-page, .sr-shared) .sr-hero-label { font-size: 12px; font-weight: 500; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; color: rgba(255,255,255,.8); margin: 0 0 20px; }
:is(.sr-page, .sr-shared) .sr-hero-title { font-size: var(--sr-hero-title); font-weight: 300; line-height: 1.02; letter-spacing: -.03em; color: #fff; margin: 0; }
:is(.sr-page, .sr-shared) .sr-hero-sub { font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: rgba(255,255,255,.85); margin: 20px 0 0; }
.sr-hero .sr-ticks { margin-top: 20px; }
.sr-hero .sr-ticks li { padding: 4px 0; }
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.sr-hero .sr-btns { margin-top: 24px; flex-direction: column; align-items: flex-start; gap: 12px; }
/* Stacked: Plans & Pricing on top, Free Trial under it, one width (the column's width under 1024px) */
:is(.sr-page, .sr-shared) .sr-hero .sr-btns .sr-btn { width: var(--sr-hero-btn); }
/* .sr-hero-compact (home): its column is the tallest (sub-headline, ticks, two rows of
   chips), so on desktop its vertical gaps close up to fit hero + strip in 1440x900.
   Type sizes, the 280px buttons and their 12px gap are unchanged. */
@media (min-width: 1024px) {
  .sr-hero-compact .sr-hero-grid { padding: 16px 0; }
  .sr-hero-compact .sr-ticks { margin-top: 16px; }
  .sr-hero-compact .sr-ticks li { padding: 2px 0; }
  .sr-hero-compact .sr-chips { margin-top: 16px; }
  .sr-hero-compact .sr-btns { margin-top: 20px; }
  .sr-hero-compact .sr-expert { margin-top: 20px; }
  :is(.sr-page, .sr-shared) .sr-hero-compact .sr-trust { margin-top: 16px; }
}
.sr-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1.2; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 7px 14px; white-space: nowrap; }
.sr-expert { display: flex; flex-direction: column; gap: 2px; margin-top: 24px; }
.sr-expert-talk { font-size: 15px; font-weight: 600; letter-spacing: .02em; line-height: 1.3; color: #fff; }
:is(.sr-page, .sr-shared) .sr-expert a { font-size: 26px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; text-decoration: none; }
:is(.sr-page, .sr-shared) .sr-expert a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Trust strip: the live hero's Google score badge on one line, no card */
:is(.sr-page, .sr-shared) .sr-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; width: fit-content; max-width: 100%; margin-top: 20px; color: #fff; text-decoration: none; }
.sr-trust-num { font-size: 22px; font-weight: 600; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.sr-trust-stars { display: flex; gap: 2px; color: var(--sr-ember); font-size: 18px; line-height: 1; }
.sr-trust-label { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.85); }
.sr-trust-label svg { flex-shrink: 0; }
:is(.sr-page, .sr-shared) .sr-trust:hover .sr-trust-label { text-decoration: underline; text-underline-offset: 3px; }
/* In the hero the strip is a card (pass 23, JS: the live site's badge): a rounded box with a faint white fill and
   line, 4.9 and the stars on the first line, the G and Google Reviews on the second. Stars stay ember (one orange). */
:is(.sr-page, .sr-shared) .sr-hero .sr-trust { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 10px 12px; padding: 14px 20px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(255,255,255,.06); }
.sr-hero .sr-trust-num { font-size: 28px; font-weight: 700; }
.sr-hero .sr-trust-stars { font-size: 20px; }
.sr-hero .sr-trust-label { grid-column: 1 / -1; font-size: 16px; color: rgba(255,255,255,.9); }
:is(.sr-page, .sr-shared) .sr-hero .sr-trust:hover { background: rgba(255,255,255,.1); }
/* Desktop (1024px+): the card sits to the right of the Talk to an EXPERT block, the two centred against each other
   (both inline, same top margin), so the hero keeps to the first screen (pass 24, JS). Only where the card follows
   the block; under 1024px it stays under the 1300. */
@media (min-width: 1024px) {
  :is(.sr-page, .sr-shared) .sr-hero .sr-expert:has(+ .sr-trust) { display: inline-flex; vertical-align: middle; margin-right: 36px; }
  :is(.sr-page, .sr-shared) .sr-hero .sr-expert + .sr-trust { display: inline-grid; vertical-align: middle; margin-top: 24px; }
  :is(.sr-page, .sr-shared) .sr-hero-compact .sr-expert + .sr-trust { margin-top: 20px; }
}

/* ── Proof cards (.sr-card) in .sr-grid-3, also the medical plan cards ── */
.sr-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sr-card-gap); }
.sr-proof-title { margin-bottom: var(--sr-head-gap); max-width: 22ch; }
.sr-card { background: #fff; border: 1px solid var(--sr-hairline); border-radius: var(--sr-r-card); padding: var(--sr-card-pad); display: flex; flex-direction: column; }
/* Card icon: orange, in a 40px navy-tint tile (white on a tint tile inside a tint card) */
.sr-card-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--sr-tint); color: var(--sr-ember); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 20px; }
.sr-card-icon > svg, .sr-card-icon > .sr-icon { width: 20px; height: 20px; }
.sr-card-label { align-self: flex-start; font-size: 13px; font-weight: 500; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; color: var(--sr-pewter); margin: 0 0 10px; }
.sr-card-label.sr-popular { background: var(--sr-ember); color: #fff; border-radius: var(--sr-r-tag); padding: 4px 8px; margin-top: -4px; margin-bottom: 6px; }
.sr-card .sr-h3 { margin-bottom: 8px; }
/* Card titles in navy, as the statement line */
:is(.sr-page, .sr-shared) .sr-card :is(h3, h4, .sr-h3) { color: var(--sr-navy); }
/* Bullet lists in cards (and .sr-list anywhere): orange dots, body text colour */
.sr-list, .sr-card ul:not(.sr-ticks):not(.sr-links) { list-style: none; margin: 12px 0 0; padding: 0; }
.sr-list li, .sr-card ul:not(.sr-ticks):not(.sr-links) > li { position: relative; padding: 4px 0 4px 18px; font-size: 15px; line-height: 1.5; color: var(--sr-graphite); }
.sr-list li::before, .sr-card ul:not(.sr-ticks):not(.sr-links) > li::before { content: ''; position: absolute; left: 2px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--sr-ember); }
.sr-card p { font-size: 16px; line-height: 1.55; color: var(--sr-graphite); max-width: 64ch; margin: 0; }
.sr-card p strong { color: var(--sr-ink); font-weight: 600; }
.sr-price { margin-top: auto; padding-top: 28px; display: flex; align-items: baseline; gap: 6px; font-size: 15px; color: var(--sr-graphite); }
.sr-price strong { font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--sr-ink); font-variant-numeric: tabular-nums; }
/* A price in a card grid (the cost example cards) stays on one line with "a month". The card is a size
   container and the figure is sized from the card's width for the longest price on the site, "2,000.00 a
   month", with about 3px to spare: 40px wherever that fits, scaling down with the card where it does not
   (about 34px at 901px wide, 35px at 320px), never below 32px. The three cards in a row share one size.
   Browsers without container queries or :has() keep the 40px figure and the old wrapping. */
@supports (container-type: inline-size) and selector(.sr-card:has(> .sr-price)) {
  .sr-grid-3 > .sr-card:has(> .sr-price) { container-type: inline-size; }
  .sr-grid-3 > .sr-card > .sr-price { white-space: nowrap; }
  .sr-grid-3 > .sr-card > .sr-price strong { font-size: clamp(32px, calc((100cqi - 64px) / 4.25), 40px); }
}

/* Two columns: text and a review slot (or a panel) */
.sr-side { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; align-items: center; }
.sr-side.sr-side-flip { grid-template-columns: 400px minmax(0, 1fr); }
.sr-side-stack { display: flex; flex-direction: column; gap: 20px; }

/* Plain two-column text (.sr-split): heading and lead left, H3 and paragraph pairs right */
.sr-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.sr-split .sr-head { margin-bottom: 0; }
.sr-rows { border-top: 1px solid var(--sr-hairline); }
.sr-row { padding: 24px 0; border-bottom: 1px solid var(--sr-hairline); }
.sr-row .sr-h3 { margin-bottom: 8px; }
.sr-row p { font-size: 16px; line-height: 1.55; color: var(--sr-graphite); max-width: 64ch; margin: 0; }
.sr-after { margin-top: 32px; }

/* ── Colour photo cards (.sr-pcard). Long paragraphs can make the text block taller
   than 55% of a 4/5 card; the gradient rides on the text block and is dark by the first line. ── */
.sr-pcard { position: relative; aspect-ratio: 4 / 5; border-radius: var(--sr-r-card); overflow: hidden; background: var(--sr-navy); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.sr-pcard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr-pcard-body { position: relative; min-height: 55%; padding: 96px var(--sr-card-pad) var(--sr-card-pad); display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(180deg, rgba(0,7,16,0) 0, rgba(0,7,16,.72) 96px, rgba(0,7,16,.8) 100%); }
:is(.sr-page, .sr-shared) .sr-pcard h3 { font-size: 28px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; color: #fff; margin: 0 0 14px; }
.sr-pcard h3 span { display: block; }
.sr-pcard p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.85); margin: 0; }
.sr-team-close { font-size: 18px; line-height: 1.55; color: var(--sr-graphite); max-width: 64ch; margin: 40px 0 0; }

/* ── Navy step cards (.sr-bw): grayscale photo fading into navy ── */
.sr-bw { background: var(--sr-navy); border-radius: var(--sr-r-card); overflow: hidden; display: flex; flex-direction: column; color: #fff; }
.sr-bw-photo { position: relative; aspect-ratio: 1 / 1; }
.sr-bw-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.sr-bw-photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, rgba(15,36,71,0), var(--sr-navy)); }
.sr-bw-num { position: absolute; top: 20px; left: 20px; z-index: 1; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); background: rgba(15,36,71,.55); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.sr-bw-body { flex: 1; display: flex; flex-direction: column; padding: 0 var(--sr-card-pad) var(--sr-card-pad); margin-top: -8px; position: relative; }
:is(.sr-page, .sr-shared) .sr-bw h3 { font-size: 22px; font-weight: 400; letter-spacing: -.015em; line-height: 1.25; color: #fff; margin: 0 0 10px; }
.sr-bw p { font-size: 15px; line-height: 1.55; color: #b7c2d3; margin: 0; }
.sr-bw .sr-btns { margin-top: auto; padding-top: 24px; }
.sr-review-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sr-card-gap); margin-top: 48px; align-items: start; }
:is(.sr-page, .sr-shared) .sr-review-row .ypc-named-review > div { max-width: none !important; }

/* ── Orange tick columns (.sr-incl) ── */
.sr-incl { background: #fff; border: 1px solid var(--sr-hairline); border-radius: var(--sr-r-card); padding: calc(var(--sr-card-pad) + 8px) calc(var(--sr-card-pad) + 12px); }
.sr-incl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.sr-incl-head { font-size: 13px; font-weight: 500; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; color: var(--sr-pewter); padding-bottom: 12px; border-bottom: 1px solid var(--sr-hairline); }
.sr-incl-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--sr-hairline); font-size: 16px; line-height: 1.4; color: var(--sr-ink); }
.sr-incl-item:last-child { border-bottom: 0; padding-bottom: 0; }
.sr-incl-item::before { content: ''; width: 18px; height: 18px; flex-shrink: 0; background: var(--sr-tick) center / 18px 18px no-repeat; }

/* ── Statement band (.sr-statement): one line from the page as a navy statement headline
   (about 60%) beside one 4:3 photo (about 40%), on the tint band (paper where the
   paper/tint alternation needs it). The photo goes on the side opposite the nearest image
   above it: .sr-statement-left puts it on the left. Under 1024px: one column, the line
   first, then the photo at the column's width. Each page sets .sr-statement-img
   object-position. ── */
.sr-statement { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 72px; align-items: center; }
.sr-statement.sr-statement-left { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.sr-statement-left .sr-statement-img { order: -1; justify-self: start; }
.sr-statement-img { display: block; width: 100%; max-width: var(--sr-statement-img); height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sr-r-card); border: 1px solid var(--sr-hairline); justify-self: end; }
.sr-tint .sr-statement-img { border-color: var(--sr-tint-line); }
:is(.sr-page, .sr-shared) .sr-statement-line { font-size: var(--sr-statement); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; color: var(--sr-navy); max-width: 760px; margin: 0; }  /* 2 to 4 lines */
/* ── Close band (.sr-close): navy, photo with three notes, text right. Text comes
   first in the markup so it leads on mobile; the photo moves left on desktop. ── */
.sr-close { background: var(--sr-navy); padding: calc(var(--sr-sec-y) + 8px) 0; color: #fff; overflow: hidden; }
.sr-close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.sr-close-photo { order: -1; position: relative; }
.sr-close-img { aspect-ratio: 4 / 5; border-radius: var(--sr-r-band); overflow: hidden; }
.sr-close-img img { width: 100%; height: 100%; object-fit: cover; object-position: 78% center; }
.sr-close .sr-h2 { color: #fff; }
.sr-close-text > p { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.85); max-width: 64ch; margin: 16px 0 0; }
.sr-close-text > .sr-h2 + p { margin-top: 24px; }
:is(.sr-page, .sr-shared) .sr-note {
  position: absolute; z-index: 1; margin: 0; max-width: 250px;
  font-family: 'Caveat', cursive; font-weight: 600; font-size: 22px; line-height: 1.2; color: #fff;
  padding: 18px 22px; border-radius: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sr-note-1 { top: 7%; right: -40px; transform: rotate(-3deg); }
.sr-note-2 { top: 45%; left: -40px; transform: rotate(2deg); }
.sr-note-3 { bottom: 8%; right: -32px; transform: rotate(-2deg); }

/* ── CTA band (.sr-cta-band): Talk to an EXPERT, one review, the five buttons.
   The five (.sr-cta-btns) are one column at every width, never a row; the
   close band carries the same five, white-outlined on navy. ── */
.sr-cta-band { padding: calc(var(--sr-sec-y) - 8px) 0; border-top: 1px solid var(--sr-tint-line); }
/* One white card on the tint: Talk to an EXPERT | a Google review | the five buttons */
.sr-cta-card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.45fr) minmax(0, .9fr); background: #fff; border: 1px solid var(--sr-tint-line); border-radius: var(--sr-r-card); }
.sr-cta-col { display: flex; flex-direction: column; justify-content: center; padding: 40px; min-width: 0; }
.sr-cta-col + .sr-cta-col { border-left: 1px solid var(--sr-hairline); }
@media (min-width: 901px) and (max-width: 1100px) { .sr-cta-col { padding: 32px 24px; } }
.sr-cta-talk { font-size: 15px; font-weight: 600; letter-spacing: .02em; line-height: 1.3; color: var(--sr-ink); }
/* The number at the hero's number size */
:is(.sr-page, .sr-shared) .sr-cta-num { white-space: nowrap; display: inline-block; margin-top: 4px; font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--sr-ink); font-variant-numeric: tabular-nums; text-decoration: none; }
:is(.sr-page, .sr-shared) .sr-cta-num:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.sr-shared { font-family: var(--sr-font); line-height: 1.55; }
.sr-cta-btns { display: flex; flex-direction: column; gap: 10px; }
.sr-cta-card .sr-cta-btns { justify-content: center; }
:is(.sr-page, .sr-shared) .sr-cta-btns .sr-btn { width: 100%; }
.sr-close .sr-cta-btns { max-width: 400px; margin-top: 28px; }

/* ── FAQ (.sr-faq): every question an H2, answer always visible, two columns ── */
:is(.sr-page, .sr-shared) .sr-toc { position: static; z-index: auto; box-shadow: none; background: #fff; border: 1px solid var(--sr-hairline); border-radius: var(--sr-r-card); padding: 24px 28px; margin: 0 0 56px; }
.sr-toc ul { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 32px; }
.sr-toc li { break-inside: avoid; padding: 5px 0; }
:is(.sr-page, .sr-shared) .sr-toc a { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--sr-ink); text-decoration: none; }
:is(.sr-page, .sr-shared) .sr-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sr-faq { columns: 2; column-gap: 56px; }
.sr-faq-item { break-inside: avoid; border-top: 1px solid var(--sr-hairline); padding: 28px 0; }
:is(.sr-page, .sr-shared) .sr-faq-item h2 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; color: var(--sr-ink); margin: 0 0 12px; scroll-margin-top: 90px; }
.sr-faq-item p { font-size: 16px; line-height: 1.6; color: var(--sr-graphite); max-width: 64ch; margin: 0 0 12px; }
.sr-faq-item p:last-child { margin-bottom: 0; }

/* ── Link-card grid (.sr-cols / .sr-tile) ── */
.sr-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sr-card-gap); align-items: start; }
.sr-col-label { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; letter-spacing: .01em; color: var(--sr-pewter); margin: 0 0 14px; }
.sr-col-label::after { content: ''; flex: 1; height: 1px; background: var(--sr-hairline); }
.sr-stack { display: flex; flex-direction: column; gap: 10px; }
:is(.sr-page, .sr-shared) .sr-tile { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--sr-hairline); border-radius: var(--sr-r-card); padding: 18px 20px; color: var(--sr-ink); text-decoration: none; transition: border-color .15s; }
:is(.sr-page, .sr-shared) .sr-tile:hover { border-color: var(--sr-mist); }
.sr-tile-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--sr-tint); color: var(--sr-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sr-tile-icon .sr-icon { width: 20px; height: 20px; }
.sr-tile-body { flex: 1; min-width: 0; }
.sr-tile-name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--sr-ink); }
.sr-tile-desc { font-size: 14px; line-height: 1.4; color: var(--sr-graphite); margin-top: 2px; }
.sr-tile-arrow { flex-shrink: 0; font-size: 18px; line-height: 1; color: var(--sr-mist); transition: color .15s, transform .15s; }
.sr-tile:hover .sr-tile-arrow { color: var(--sr-ember); transform: translateX(2px); }
.sr-tile-trial .sr-tile-arrow { color: var(--sr-ember); }
.sr-tile-coming { opacity: .55; cursor: default; pointer-events: none; }
.sr-soon { flex-shrink: 0; font-size: 12px; font-weight: 500; color: var(--sr-pewter); background: var(--sr-tint); border-radius: var(--sr-r-tag); padding: 3px 8px; }

/* ── Review slots: reviews.js draws these with inline styles, so the
   overrides need !important. White card, hairline, ember stars. ── */
:is(.sr-page, .sr-shared) .ypc-reviews[data-mode="inline"] > div { background: #fff !important; border: 1px solid var(--sr-hairline); border-radius: var(--sr-r-card) !important; padding: 24px !important; }
:is(.sr-page, .sr-shared) .ypc-reviews[data-mode="inline"] > div > div:first-child > span { color: var(--sr-ember) !important; }
:is(.sr-page, .sr-shared) .ypc-reviews[data-mode="inline"] p { color: var(--sr-ink) !important; font-style: normal !important; font-size: 15px !important; line-height: 1.6 !important; }
:is(.sr-page, .sr-shared) .ypc-reviews[data-mode="inline"] > div > div:last-child { color: var(--sr-pewter) !important; font-size: 13px !important; }
:is(.sr-page, .sr-shared) .ypc-reviews[data-mode="inline"] > div > div:last-child a { color: var(--sr-ink) !important; text-decoration: underline; text-underline-offset: 2px; }
:is(.sr-page, .sr-shared) .ypc-reviews[data-mode="full"] > div,
:is(.sr-page, .sr-shared) .ypc-named-review > div { border: 1px solid var(--sr-hairline) !important; border-radius: var(--sr-r-card) !important; box-shadow: none !important; padding: var(--sr-card-pad) !important; }
:is(.sr-page, .sr-shared) .ypc-reviews[data-mode="full"] > div { margin: 0 !important; }
:is(.sr-page, .sr-shared) .ypc-reviews[data-mode="full"] > div > div:first-child > span,
:is(.sr-page, .sr-shared) .ypc-named-review > div > div:first-child > span { color: var(--sr-ember) !important; }
:is(.sr-page, .sr-shared) .ypc-reviews[data-mode="full"] p,
:is(.sr-page, .sr-shared) .ypc-named-review p { color: var(--sr-ink) !important; font-style: normal !important; font-size: 16px !important; line-height: 1.6 !important; }
:is(.sr-page, .sr-shared) .ypc-reviews[data-mode="full"] > div > div:last-child > div:first-child > div:first-child,
:is(.sr-page, .sr-shared) .ypc-named-review > div > div:last-child > div:first-child > div:first-child { background: var(--sr-navy) !important; font-weight: 500 !important; font-size: 14px !important; width: 40px !important; height: 40px !important; }
:is(.sr-page, .sr-shared) .ypc-reviews[data-mode="full"] > div > div:last-child > div:first-child > div:last-child > div:first-child,
:is(.sr-page, .sr-shared) .ypc-named-review > div > div:last-child > div:first-child > div:last-child > div:first-child { font-weight: 600 !important; }
:is(.sr-page, .sr-shared) .ypc-reviews[data-mode="full"] > div > div:last-child > div:first-child > div:last-child > div:nth-child(2),
:is(.sr-page, .sr-shared) .ypc-named-review > div > div:last-child > div:first-child > div:last-child > div:nth-child(2) { color: var(--sr-pewter) !important; }
:is(.sr-page, .sr-shared) .ypc-reviews[data-mode="full"] > div > div:last-child > a,
:is(.sr-page, .sr-shared) .ypc-named-review > div > div:last-child > a { color: var(--sr-ink) !important; font-weight: 500 !important; }

/* ── Shared nav and top bar (nav.html: <nav class="sr-nav">, <div class="header-bar sr-topbar">).
   Scoped to the fragment's own classes, not :is(.sr-page, .sr-shared), so every page that loads the
   fragment gets them, converted or not. styles.css still draws the dropdown and the
   mobile menu mechanics; these rules sit on top. Up to 900px both rows use the design system
   container; from 901px they run the full screen width (--sr-head-gutter, --sr-bar-inset). The top bar is 56px
   from 901px (with the nav's 64px, --sr-nav-h 120px) and 62px up to 900px. ── */
nav.sr-nav { background: #fff; border-bottom: 1px solid var(--sr-hairline); box-shadow: none; font-family: var(--sr-font); }
.sr-nav .nav-inner { max-width: calc(var(--sr-max) + 48px); margin: 0 auto; padding: 0 24px; }
.sr-nav .nav-logo svg text, .sr-nav .nav-logo svg tspan { font-family: var(--sr-font); font-weight: 700; }
.sr-nav .nav-menu > li > a { font-family: var(--sr-font); font-size: 14px; font-weight: 500; color: var(--sr-ink); border-radius: 8px; }
.sr-nav .nav-menu > li > a:hover, .sr-nav .nav-menu > li:hover > a { background: var(--sr-tint); color: var(--sr-ink); }
.sr-nav .nav-menu > li > a .arr { opacity: .45; }
.sr-nav .dropdown { border: 1px solid var(--sr-hairline); border-radius: var(--sr-r-card); box-shadow: none; }
.sr-nav .dropdown a { font-family: var(--sr-font); font-size: 14px; color: var(--sr-ink); }
.sr-nav .dropdown a:hover { background: var(--sr-tint); color: var(--sr-ink); }
/* The nav's one button is Free Trial: green, as every Free Trial button */
.sr-nav .nav-menu > li > a.nav-cta { background: var(--sr-green) !important; color: #fff !important; font-weight: 700 !important; padding: 10px 18px !important; border-radius: var(--sr-r-btn) !important; margin-left: 8px; }
.sr-nav .nav-menu > li > a.nav-cta:hover { background: var(--sr-green-hover) !important; }
.sr-nav .nav-hamburger span { background: var(--sr-ink); }
.sr-nav .nav-menu.nav-open { box-shadow: none; border-bottom: 1px solid var(--sr-hairline); }
.sr-topbar { background: var(--sr-tint); border-bottom: 1px solid var(--sr-hairline); font-family: var(--sr-font); }
/* Up to 900px (where the hamburger menu runs): Talk to an EXPERT and 1300 318 671 only, centred, 62px.
   These rules are what that width draws; the full-width bar below starts at 901px. */
.sr-topbar .header-bar-inner { display: flex; align-items: center; justify-content: center; max-width: calc(var(--sr-max) + 48px); min-height: 61px; margin: 0 auto; padding: 4px 24px; }
.sr-topbar .header-expert { align-items: center; padding: 0; text-align: center; flex-shrink: 0; }
.sr-topbar .header-expert .talk { font-family: var(--sr-font); font-size: 16px; font-weight: 600; letter-spacing: .02em; line-height: 1.3; color: var(--sr-ink); }
.sr-topbar .header-expert .talk span { color: var(--sr-ember); }
.sr-topbar .header-expert .phone { font-family: var(--sr-font); font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--sr-ink); font-variant-numeric: tabular-nums; margin-top: 0; }
.sr-topbar .header-cities { display: none; }
/* From 901px the header runs the full width of the screen (pass 16, JS: "use the full width for the menu and then
   same with the number BUT a bit indented"; more room above, between and below the numbers, for laptops and big
   monitors). The nav row (logo, menu, Free Trial) sits in --sr-head-gutter: 24px up to 1200px, 2vw, 48px from
   2400px. The top bar's tint runs edge to edge and its content sits one 16px step further in on both sides
   (--sr-bar-inset), so the bar's six columns run from a step inside the logo to a step inside the Free Trial
   button. The page container below the header (--sr-max) does not change.
   The top bar is a grid of 2 + 1 + 1 + 1 + 1 equal shares across that width, every line centred in its column,
   as on the live site's bar (pass 18, agreed with JS 11 Oct: "spread out evenly 6 columns 2 x 1 x1 x1 x1"; pass
   17's pairs were centred as blocks but left-aligned inside, which he rejected). Columns 1 and 2, joined: Talk to
   an EXPERT over 1300 318 671, both lines centred in the double column and the block centred top to bottom. Navy
   with white writing (pass 19, JS): Talk to an EXPERT 16px regular in white, EXPERT semibold in ember, the button
   orange (JS: semibold because regular ember read dull on navy; amber tried and dropped for one orange, pass 22); 1300 318 671 20px
   bold in --sr-topbar-green, the only bold text in the bar. Columns 3 to 6: one city pair per column, top over
   bottom (Sydney over Brisbane, Melbourne over Adelaide, Perth over Darwin, Canberra over Hobart), each line
   centred on its own; 12px regular, the city in white, the number in #b7c2d3 (the text-on-navy grey). The bar is
   the site navy with a lighter line (#3a5584) under it, so it does not run into the navy hero. Gaps between lines
   in neighbouring columns stay above the 16px floor (JS, pass 13) at every width.
   Vertical: 56px tall with the hairline. City rows are 16px lines, 9px above the first, 5px between, 9px below the
   second: about 12px of clear space above the text, between the rows and below it (pass 15: 42px tall).
   JS chose this bar (site navy with the line) over the live site's blue look and a brighter navy (pass 20). */
@media (min-width: 900.02px) {
  :root { --sr-nav-h: 120px; }
  .sr-topbar { background: var(--sr-navy); border-bottom-color: #3a5584; }
  .sr-nav .nav-inner { max-width: none; margin: 0; padding: 0 var(--sr-head-gutter); }
  .sr-topbar .header-bar-inner { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 16px 16px; column-gap: 0; row-gap: 5px; align-content: center; align-items: center; justify-items: center; justify-content: stretch; max-width: none; height: 55px; min-height: 0; margin: 0; padding: 0 var(--sr-bar-inset); overflow-x: clip; }
  .sr-topbar .header-expert { grid-column: 1 / 3; grid-row: 1 / 3; justify-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0; text-align: center; white-space: nowrap; }
  .sr-topbar .header-expert .talk { font-size: 16px; font-weight: 400; line-height: 18px; color: #fff; white-space: nowrap; }
  .sr-topbar .header-expert .talk span { color: var(--sr-ember); font-weight: 600; }
  .sr-topbar .header-expert .phone { font-size: 20px; font-weight: 700; line-height: 22px; color: var(--sr-topbar-green); white-space: nowrap; }
  .sr-topbar .header-cities { display: contents; }
  .sr-topbar .header-cities a { grid-row: 1; justify-self: center; font-family: var(--sr-font); font-size: 12px; font-weight: 400; line-height: 16px; color: #b7c2d3; justify-content: center; text-align: center; padding: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .sr-topbar .header-cities a:nth-child(n+5) { grid-row: 2; }
  .sr-topbar .header-cities a:nth-child(4n+1) { grid-column: 3; } /* Sydney, Brisbane */
  .sr-topbar .header-cities a:nth-child(4n+2) { grid-column: 4; } /* Melbourne, Adelaide */
  .sr-topbar .header-cities a:nth-child(4n+3) { grid-column: 5; } /* Perth, Darwin */
  .sr-topbar .header-cities a:nth-child(4n+4) { grid-column: 6; } /* Canberra, Hobart */
  .sr-topbar .header-cities strong { color: #fff; font-weight: 400; }
  .sr-topbar .header-cities a:hover, .sr-topbar .header-cities a:hover strong { color: #fff; }
}
/* 901 to 1043px: with six equal columns the centred lines of neighbouring columns come within 16px (Sydney and
   Melbourne), so the 1300 block takes one share (columns 1 and 2 half a share each) and the four city columns stay
   equal: at least 20px between lines at 901px. */
@media (min-width: 900.02px) and (max-width: 1043.98px) {
  .sr-topbar .header-bar-inner { grid-template-columns: repeat(2, minmax(0, .5fr)) repeat(4, minmax(0, 1fr)); }
}

/* ── Footer (footer.html: <footer class="sr-footer">): dark navy, in the container ── */
footer.sr-footer { background: var(--sr-navy); color: #b7c2d3; font-family: var(--sr-font); padding: 64px 0 0; }
.sr-footer .footer-grid { max-width: calc(var(--sr-max) + 48px); padding: 0 24px 56px; }
.sr-footer .nav-logo svg { mix-blend-mode: normal; }
.sr-footer .nav-logo svg text, .sr-footer .nav-logo svg tspan { font-family: var(--sr-font); font-weight: 700; }
.sr-footer p { font-family: var(--sr-font); color: #b7c2d3; }
.sr-footer .footer-col h4 { font-family: var(--sr-font); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: #fff; }
.sr-footer .footer-col ul li a { font-family: var(--sr-font); color: #b7c2d3; font-size: 14px; }
.sr-footer .footer-col ul li a:hover { color: #fff; }
.sr-footer .office-row { font-family: var(--sr-font); font-size: 14px; color: #b7c2d3; border-bottom-color: rgba(255,255,255,.12); font-variant-numeric: tabular-nums; }
.sr-footer .office-row strong { color: #fff; font-weight: 500; }
.sr-footer .footer-bar { font-family: var(--sr-font); font-size: 13px; max-width: calc(var(--sr-max) + 48px); padding: 18px 24px; color: #b7c2d3; border-top-color: rgba(255,255,255,.12); }
.sr-footer .footer-bar a { color: #b7c2d3; text-decoration: underline; text-underline-offset: 2px; }
.sr-footer .footer-bar a:hover { color: #fff; }


/* ── Pop-up panels. components.js builds Ask a Question, Custom Quote and Schedule a
   Call (data-enquiry, Formspree xnpqkngy). Each page builds Email Me the Prices
   (data-pp-enquiry, Formspree mvzbnkar) in the same .eq-modal shell (.sr-pp). ── */
:is(.sr-page, .sr-shared) .eq-backdrop { background: var(--sr-overlay); }
:is(.sr-page, .sr-shared) .eq-dialog { box-shadow: none; border-radius: var(--sr-r-band); }
:is(.sr-page, .sr-shared) .eq-title { font-weight: 600; letter-spacing: -.02em; }
:is(.sr-page, .sr-shared) .eq-panel { background: var(--sr-tint); border-color: var(--sr-hairline); }
:is(.sr-page, .sr-shared) .eq-panel-h { font-weight: 600; color: var(--sr-ink); }
/* The enquiry form's text in the design system's colours (components.js draws it with styles.css's
   --text and --grey-* blues): headings and typed text ink, labels and notes graphite or pewter */
:is(.sr-page, .sr-shared) :is(.eq-panel-note, .eq-note-line, .eq-field label) { color: var(--sr-graphite); }
:is(.sr-page, .sr-shared) :is(.eq-note, .eq-close) { color: var(--sr-pewter); }
:is(.sr-page, .sr-shared) :is(.eq-choice, .eq-done) { color: var(--sr-ink); }
:is(.sr-page, .sr-shared) .eq-field input, :is(.sr-page, .sr-shared) .eq-field select, :is(.sr-page, .sr-shared) .eq-field textarea { border-width: 1px; border-color: var(--sr-hairline); border-radius: 8px; color: var(--sr-ink); }
:is(.sr-page, .sr-shared) .eq-field input:focus, :is(.sr-page, .sr-shared) .eq-field select:focus, :is(.sr-page, .sr-shared) .eq-field textarea:focus { border-color: var(--sr-ink); box-shadow: none; }
:is(.sr-page, .sr-shared) .eq-submit { background: var(--sr-ember); border-radius: var(--sr-r-btn); font-weight: 600; }
:is(.sr-page, .sr-shared) .eq-submit:hover { background: var(--sr-ember-hover); }
:is(.sr-page, .sr-shared) .eq-close { background: var(--sr-tint); color: var(--sr-ink); }
.sr-pp form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.sr-pp .fgrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sr-pp .fg { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sr-pp .fg label { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--sr-graphite); }
.sr-pp .fg input, .sr-pp .fg select, .sr-pp .fg textarea { width: 100%; border: 1px solid var(--sr-hairline); border-radius: 8px; padding: 11px 14px; font-size: 15px; color: var(--sr-ink); background: #fff; outline: none; }
.sr-pp .fg input:focus, .sr-pp .fg select:focus, .sr-pp .fg textarea:focus { border-color: var(--sr-ink); }
.sr-pp .fg textarea { resize: vertical; min-height: 88px; }
:is(.sr-page, .sr-shared) .sr-pp .form-submit { width: 100%; background: var(--sr-ember); color: #fff; border: 0; border-radius: var(--sr-r-btn); padding: 14px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .15s; }
:is(.sr-page, .sr-shared) .sr-pp .form-submit:hover { background: var(--sr-ember-hover); }

/* ── Responsive ── */
/* Big screens (1600px and wider only): a 1440 container, a third more space between and
   inside sections, wider card gaps and padding, one step up for the hero headline and H2.
   Body text keeps its size and its 64ch line cap; full-bleed bands stay full bleed. */
@media (min-width: 1600px) {
  :root {
    --sr-max: 1440px;
    --sr-sec-y: 117px;
    --sr-head-gap: 64px;
    --sr-card-gap: 32px;
    --sr-card-pad: 34px;
    --sr-h2: 52px;
    --sr-hero-title: 80px;
    --sr-hero-col: 640px;
    --sr-statement: 40px;
    --sr-statement-img: 560px;
  }
}
@media (max-width: 1023.98px) {
  /* Hero under 1024px: no full-screen rule, no split. Photo 16/9 first, its bottom
     quarter fading into navy; the text on navy; then the strip. */
  .sr-hero { display: block; min-height: 0; }
  .sr-hero-stage { display: block; }
  .sr-hero-bg { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .sr-hero-fade { left: 0; top: 0; bottom: auto; width: 100%; height: auto; aspect-ratio: 16 / 9;
    background: linear-gradient(180deg, rgba(15,36,71,0) 75%, var(--sr-navy) 100%); }
  .sr-hero-grid { padding: 16px 0 56px; }
  .sr-hero-grid > .sr-dark { max-width: 620px; }
  :is(.sr-page, .sr-shared) .sr-hero .sr-btns { align-items: stretch; }
  :is(.sr-page, .sr-shared) .sr-hero .sr-btns .sr-btn { width: 100%; }
  .sr-hero-strip { padding: 28px 0; }
  :root { --sr-statement: 36px; }
  .sr-statement, .sr-statement.sr-statement-left { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sr-statement-left .sr-statement-img { order: 0; }
  .sr-statement-img { max-width: none; justify-self: stretch; }
}
@media (max-width: 1370px) {
  /* Notes pull in until the 1328px wrap leaves room for the 40px overhang */
  .sr-note-1 { right: -20px; }
  .sr-note-2 { left: -20px; }
  .sr-note-3 { right: -16px; }
}
@media (max-width: 1080px) {
  .sr-side, .sr-side.sr-side-flip { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Stacked, a side review (and a .sr-split aside review, stacked from 900px) takes the column's full width,
     its left edge on the text's, never a narrow card centred alone in the band (reviews.js draws it 760px
     wide with auto margins) */
  :is(.sr-page, .sr-shared) .sr-side .ypc-named-review:not([data-layout]) > div,
  :is(.sr-page, .sr-shared) .sr-split .sr-review-aside .ypc-named-review:not([data-layout]) > div { max-width: none !important; margin: 0 !important; }
  .sr-toc ul { columns: 2; }
  .sr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-col:nth-child(3) { grid-column: 1 / -1; }
  .sr-col:nth-child(3) .sr-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sr-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .sr-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sr-cta-card { grid-template-columns: minmax(0, 1fr); }
  .sr-cta-col { padding: 28px 24px; }
  .sr-cta-col + .sr-cta-col { border-left: 0; border-top: 1px solid var(--sr-hairline); }
  .sr-close-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .sr-close-photo { order: 0; display: flex; flex-direction: column; gap: 12px; }
  :is(.sr-page, .sr-shared) .sr-note { position: static; max-width: none; transform: none; }
  .sr-close-img { margin-bottom: 4px; }
  .sr-faq { columns: 1; }
  .sr-review-row { grid-template-columns: minmax(0, 1fr); }
  .sr-incl-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sr-incl-col + .sr-incl-col { margin-top: 28px; }
  .sr-incl { padding: 28px 22px; }
}
@media (max-width: 768px) {
  .sr-sec { padding: 64px 0; }
  .sr-sec.sr-sec-after-strip { padding-top: 8px; }
  :is(.sr-page, .sr-shared) .sr-hero-strip p { font-size: 19px; }
  .sr-close { padding: 64px 0; }
  .sr-toc { display: none; }
  .sr-pcard { aspect-ratio: auto; min-height: 440px; }
  .sr-cols { grid-template-columns: minmax(0, 1fr); }
  .sr-col:nth-child(3) { grid-column: auto; }
  .sr-col:nth-child(3) .sr-stack { display: flex; }
}
@media (max-width: 560px) {
  .sr-pp .fgrow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .sr-btns { flex-direction: column; align-items: stretch; }
  :is(.sr-page, .sr-shared) .sr-btns .sr-btn { width: 100%; }
}

/* ============================================================
   PASS 10 COMPONENTS
   ============================================================ */

/* ── Trust strip and Talk to an EXPERT on a light band (the hero draws them on navy) ── */
:is(.sr-page, .sr-shared) :is(.sr-sec, .sr-break) .sr-trust, .sr-break.sr-shared .sr-trust { color: var(--sr-ink); }
:is(.sr-sec, .sr-break) .sr-trust-num { color: var(--sr-ink); }
:is(.sr-sec, .sr-break) .sr-trust-label { color: var(--sr-graphite); }
.sr-sec .sr-expert-talk { color: var(--sr-ink); }
:is(.sr-page, .sr-shared) .sr-sec .sr-expert a { color: var(--sr-ink); }

/* ── Slim break band (.sr-break): one row on the tint. Talk to an EXPERT and the number |
   the 4.9 trust strip | Custom Quote (orange), Ask a Question, Schedule a Call. Drawn
   from the template in talk-to-an-expert.html wherever a page has <div class="ypc-break">. ── */
.sr-break { padding: 36px 0; }
.sr-break-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 40px; }
:is(.sr-page, .sr-shared) .sr-break .sr-trust, .sr-break.sr-shared .sr-trust { margin: 0; justify-self: center; }
.sr-break-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
:is(.sr-page, .sr-shared) .sr-break-btns .sr-btn { width: 100%; padding-left: 16px; padding-right: 16px; }
@media (min-width: 1024px) and (max-width: 1240px) {
  .sr-break-row { gap: 20px; }
  .sr-break-btns { gap: 8px; }
  :is(.sr-page, .sr-shared) .sr-break-btns .sr-btn { font-size: 14px; padding: 12px 10px; }
  .sr-break .sr-trust-num { font-size: 20px; }
}
@media (min-width: 761px) and (max-width: 1023.98px) { .sr-break-row { grid-template-columns: auto minmax(0, 1fr); } .sr-break-btns { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .sr-break-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  :is(.sr-page, .sr-shared) .sr-break .sr-trust { justify-self: start; }
  .sr-break-btns { grid-template-columns: minmax(0, 1fr); }
}

/* ── Two bands of the same colour back to back are parted by a hairline (the proof band
   under the pinned strip is a div.sr-sec, so match .sr-sec as well as section) ── */
:is(section, .sr-sec).sr-tint + :is(section, .sr-sec).sr-tint { border-top: 1px solid var(--sr-tint-line); }
.sr-sec.sr-paper + .sr-sec.sr-paper { border-top: 1px solid var(--sr-hairline); }

/* ── Google reviews (reviews.js): a header row (Google mark, stars, Rated 4.9 on Google)
   and three white cards (.ypc-google-review[data-layout="cards"]); the single card
   (data-layout="card") in the CTA band. Stars in ember, as everywhere. ── */
.ypc-greviews-head, .ypc-gcard-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ypc-greviews-head { margin-bottom: 24px; }
.ypc-greviews-head svg, .ypc-gcard-head svg { width: 72px !important; height: auto; display: block; }
:is(.ypc-greviews-head, .ypc-gcard-head) > div:not([class]) { margin: 0 !important; }
:is(.ypc-greviews-head, .ypc-gcard-head) span { color: var(--sr-ember) !important; font-size: 16px !important; }
.ypc-greviews-rating, .ypc-gcard-rating { font-size: 14px; font-weight: 600; color: var(--sr-ink); }
.ypc-greviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sr-card-gap); align-items: stretch; }
.ypc-greviews-card { background: #fff; border: 1px solid var(--sr-hairline); border-radius: var(--sr-r-card); padding: var(--sr-card-pad); display: flex; flex-direction: column; gap: 16px; }
.sr-tint .ypc-greviews-card { border-color: var(--sr-tint-line); }
.ypc-greviews-card p, .ypc-gcard-quote { font-size: 15px; line-height: 1.6; color: var(--sr-ink); margin: 0; }
.ypc-greviews-by, .ypc-gcard-by { margin-top: auto; font-size: 14px; line-height: 1.4; color: var(--sr-pewter); }
.ypc-greviews-name, .ypc-gcard-name { font-weight: 600; color: var(--sr-ink); }
:is(.sr-page, .sr-shared) :is(.ypc-greviews-link, .ypc-gcard-link) { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--sr-ink); text-decoration: underline; text-decoration-color: var(--sr-mist); text-underline-offset: 3px; }
.ypc-gcard { display: flex; flex-direction: column; gap: 14px; }
/* the older review-card rules (.ypc-named-review > div) must not box the Google card */
:is(.sr-page, .sr-shared) .ypc-gcard .ypc-gcard-quote { font-size: 15px !important; line-height: 1.6 !important; color: var(--sr-ink) !important; font-style: normal !important; }
:is(.sr-page, .sr-shared) :is(.ypc-named-review, .ypc-google-review) > .ypc-gcard { border: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; max-width: none !important; margin: 0 !important; background: none !important; }
.ypc-gcard-by { margin-top: 0; }
@media (max-width: 900px) { .ypc-greviews-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Panel (.sr-panel): white list panel with a small label, beside text (was home's page CSS) ── */
.sr-panel { background: #fff; border: 1px solid var(--sr-hairline); border-radius: var(--sr-r-card); padding: var(--sr-card-pad); }
.sr-panel h4 { font-size: 13px; font-weight: 500; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; color: var(--sr-pewter); margin: 0 0 6px; }
.sr-panel ul { list-style: none; margin: 0; padding: 0; }
.sr-panel li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--sr-hairline); font-size: 16px; line-height: 1.4; color: var(--sr-ink); }
.sr-panel li:last-child { border-bottom: 0; padding-bottom: 0; }
.sr-panel li::before { content: ''; width: 14px; height: 14px; flex-shrink: 0; background: var(--sr-arrow-mist) center / 14px 14px no-repeat; }

/* ── FAQ question that is not a heading on the live page (kept a <p>, styled as the FAQ H2) ── */
:is(.sr-page, .sr-shared) .sr-faq-q { font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; color: var(--sr-ink); margin: 0 0 12px; }

/* ── Prose split (.sr-prose-split): long text left at about 64ch; on the right a card on the
   tint, sticky under the nav, carrying the section's tick list, closing line and button.
   The section sits on paper. One column on mobile, in the original order. ── */
.sr-prose-split { display: grid; grid-template-columns: minmax(0, 64ch) minmax(0, 1fr); gap: 64px; align-items: start; }
.sr-prose-main { min-width: 0; }
.sr-prose-main > p { font-size: 16px; line-height: 1.6; color: var(--sr-graphite); margin: 0 0 16px; }
.sr-prose-main > .sr-lead { font-size: 18px; line-height: 1.55; margin: 16px 0; }
.sr-prose-main > p:last-child { margin-bottom: 0; }
.sr-prose-card > .sr-ticks:first-child { margin-top: 0; }
.sr-prose-card { position: sticky; top: 88px; background: var(--sr-tint); border-radius: var(--sr-r-card); padding: 32px; }
.sr-prose-card > p { font-size: 16px; line-height: 1.55; color: var(--sr-ink); margin: 0 0 12px; }
.sr-prose-card .sr-ticks { margin-top: 8px; }
.sr-prose-card .sr-btns { margin-top: 24px; }
.sr-tint .sr-prose-card { background: #fff; border: 1px solid var(--sr-tint-line); }
@media (max-width: 1023.98px) {
  .sr-prose-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sr-prose-card { position: static; }
}

/* ── Form split (.sr-formsplit): a form in its white card on the tint, beside its heading.
   Desktop: heading, then the 4.9 trust strip and the number block, left; the form card
   right. Mobile: heading, form, then the trust strip and number. ── */
.sr-formsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); grid-template-areas: "head form" "meta form"; column-gap: 72px; align-items: start; }
.sr-formsplit-head { grid-area: head; align-self: end; }
.sr-formsplit-meta { grid-area: meta; align-self: start; }
.sr-formsplit-form { grid-area: form; align-self: center; background: #fff; border: 1px solid var(--sr-tint-line); border-radius: var(--sr-r-card); padding: 32px; }
.sr-formsplit-meta > .sr-trust { margin-top: 20px; }
.sr-formsplit-meta > .sr-expert { margin-top: 24px; }
@media (min-width: 1024px) and (max-width: 1199.98px) { .sr-formsplit { column-gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); } }
@media (max-width: 1023.98px) {
  .sr-formsplit { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "meta"; row-gap: 24px; }
  .sr-formsplit-head { align-self: start; }
  .sr-formsplit-form { padding: 24px 20px; }
}

/* ── Preview-only label (option A / option B on allied health) ── */
.sr-preview-label { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sr-pewter); background: var(--sr-tint); border-radius: var(--sr-r-tag); padding: 4px 8px; margin: 0 0 16px; }
.sr-tint .sr-preview-label { background: #fff; }

/* ── A white card never sits on a white band. Card grids and white form cards put their band on
   the tint; a single secondary card on a paper band (a panel, a review card, a note, the FAQ
   contents list: anything with .sr-card-soft) takes the tint fill instead of white. ── */
section.sr-paper :is(.sr-panel, .sr-card-soft, .sr-toc) { background: var(--sr-tint); border-color: transparent; }
:is(.sr-page, .sr-shared) section.sr-paper :is(.ypc-reviews, .ypc-named-review) > div:not(.ypc-gcard) { background: var(--sr-tint) !important; border-color: transparent !important; }

/* ── Follow-ups ── */
/* Link-tile grids are card grids: the icon is orange in a 40px navy-tint tile, the name navy */
.sr-tile-icon { width: 40px; height: 40px; border-radius: 10px; color: var(--sr-ember); }
.sr-tile-name { color: var(--sr-navy); }
/* Dividers that sit on the tint (an FAQ on a tint band, rows in a soft-filled panel) use the tint hairline */
.sr-tint .sr-faq-item { border-top-color: var(--sr-tint-line); }
section.sr-paper :is(.sr-panel, .sr-card-soft) li { border-bottom-color: var(--sr-tint-line); }
/* The shared nav from 901px to 1023px (the full menu shows from 901px, in a 24px gutter): tighter links so the row
   fits. The query starts at 769px, but the menu is behind the hamburger up to 900px */
/* The last dropdown (About Us) opens leftwards from its item so it never runs past the screen edge */
.sr-nav .nav-menu > li:nth-last-child(2) > .dropdown { left: auto; right: 0; }
@media (min-width: 769px) and (max-width: 1023.98px) {
  .sr-nav .nav-menu > li > a { padding: 8px 8px; font-size: 13px; }
  .sr-nav .nav-menu > li > a.nav-cta { padding: 9px 12px !important; margin-left: 4px; }
  .sr-nav .nav-logo svg { height: 60px; }
}
/* 769px to 900px: the full menu does not fit beside the logo, so the hamburger menu (as on phones) runs up to 900px.
   Same open-menu rules components.js applies under 769px. */
@media (min-width: 769px) and (max-width: 900px) {
  .sr-nav .nav-menu { display: none; }
  .sr-nav .nav-hamburger { display: flex; }
  .sr-nav .nav-menu.nav-open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; max-height: calc(100vh - 64px); overflow-y: auto; background: #fff; padding: 12px 20px 20px; z-index: 199; gap: 4px; }
  .sr-nav .nav-menu.nav-open > li > a { padding: 10px 12px; font-size: 16px; }
  .sr-nav .nav-menu.nav-open .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-left: 2px solid var(--sr-hairline); border-radius: 0; margin-left: 12px; padding: 4px 0 4px 8px; }
  .sr-nav .nav-menu.nav-open > li:nth-last-child(2) > .dropdown { right: auto; }
}

/* ══ Pass 14: components for the pages converted in hidden site part 2 ══════════════════════════ */

/* ── Page header (.sr-pagehead): the title band of a page that has no hero photo (the guides and
   articles, terms, reviews, the free trial sign-up and setup forms). Navy, full width, the container
   inside, no photo, no fade, no first-screen height and no pinned strip: just the page's label (where it
   has one), its H1 and its standfirst, left in the container, then the page. Carries .sr-dark so
   buttons, links and the trust strip inside take their white forms. ── */
.sr-pagehead { background: var(--sr-navy); color: #fff; padding: 72px 0 64px; }
.sr-pagehead-label { font-size: 12px; font-weight: 500; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; color: rgba(255,255,255,.8); margin: 0 0 16px; }
:is(.sr-page, .sr-shared) .sr-pagehead-title { font-size: clamp(34px, 4.2vw, 52px); font-weight: 300; line-height: 1.06; letter-spacing: -.03em; color: #fff; max-width: 30ch; margin: 0; }
.sr-pagehead-title em { font-style: normal; color: var(--sr-ember); }
.sr-pagehead-sub { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.85); max-width: 64ch; margin: 16px 0 0; }
.sr-pagehead-sub + .sr-pagehead-sub { margin-top: 10px; }
.sr-pagehead .sr-btns { margin-top: 28px; }
.sr-pagehead .sr-chips { margin-top: 24px; }
@media (max-width: 768px) { .sr-pagehead { padding: 48px 0 44px; } .sr-pagehead-sub { font-size: 17px; } }

/* ── Message band (.sr-msg): a page whose body is one short message (a thank-you, check-your-email,
   setup received, the 404, a holding page). Paper, one centred column about 640px wide, tall enough
   that the footer does not ride up under a short message. The title is an H1 drawn at the section H2
   size; paragraphs at the lead size; one or two buttons centred under them. ── */
.sr-msg { display: flex; align-items: center; min-height: clamp(440px, 62vh, 720px); }
@media (min-width: 1024px) { .sr-msg { min-height: clamp(560px, calc(100svh - var(--sr-nav-h)), 1100px); } }
.sr-msg > .sr-wrap { width: 100%; }
.sr-msg-inner { max-width: 640px; margin: 0 auto; text-align: center; }
:is(.sr-page, .sr-shared) .sr-msg-title { font-size: var(--sr-h2); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; color: var(--sr-ink); margin: 0; }
.sr-msg-title em { font-style: normal; color: var(--sr-ember); white-space: nowrap; }
.sr-msg-inner > p { font-size: 18px; line-height: 1.55; color: var(--sr-graphite); margin: 16px auto 0; max-width: 56ch; text-wrap: pretty; }
.sr-msg-inner a[href^="tel:"] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sr-msg-inner > p a { color: var(--sr-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--sr-mist); text-underline-offset: 3px; }
.sr-msg-inner > p a:hover { text-decoration-color: var(--sr-ink); }
.sr-msg-inner .sr-btns { justify-content: center; }
.sr-msg-code { font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sr-pewter); margin: 0 0 12px; }

/* ── Running text (.sr-prose): an article, a story or a legal text in one reading column, left in the
   container on the same edge as every section head. Its H2s are a step under the section H2 (a long
   article has many), its paragraphs and lists at 16px and 64ch; ul with orange dots, ol numbered.
   Bands break only where white cards force the tint. ── */
.sr-prose { max-width: 760px; }
.sr-prose > :first-child { margin-top: 0; }
:is(.sr-page, .sr-shared) .sr-prose > h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--sr-ink); margin: 56px 0 16px; }
:is(.sr-page, .sr-shared) .sr-prose > h2 em { font-style: normal; color: var(--sr-ember); }
:is(.sr-page, .sr-shared) .sr-prose > h3 { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: var(--sr-ink); margin: 36px 0 10px; }
:is(.sr-page, .sr-shared) .sr-prose > h4 { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--sr-ink); margin: 24px 0 8px; }
:is(.sr-page, .sr-shared) .sr-prose > :first-child { margin-top: 0; }
.sr-prose > p, .sr-prose > ul:not(.sr-numlist), .sr-prose > ol:not(.sr-numlist), .sr-prose li > p { font-size: 16px; line-height: 1.65; color: var(--sr-graphite); max-width: 64ch; margin: 0 0 16px; }
.sr-prose > ul:not(.sr-numlist) { list-style: none; padding: 0; }
.sr-prose > ul:not(.sr-numlist) > li { position: relative; padding: 3px 0 3px 20px; }
.sr-prose > ul:not(.sr-numlist) > li::before { content: ''; position: absolute; left: 3px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--sr-ember); }
.sr-prose > ol:not(.sr-numlist) { padding-left: 1.4em; }
.sr-prose > ol:not(.sr-numlist) > li { padding: 3px 0 3px 4px; }
.sr-prose > ol:not(.sr-numlist) > li::marker { color: var(--sr-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sr-prose strong { color: var(--sr-ink); font-weight: 600; }
.sr-prose a:not(.sr-btn) { color: var(--sr-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--sr-mist); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sr-prose a:not(.sr-btn):hover { text-decoration-color: var(--sr-ink); }
.sr-prose > .sr-btns:last-child { margin-bottom: 0; }

/* Inside running text: a callout (a soft card: tint fill on paper, white with the tint hairline on the
   tint), a big-figure stat, a closing call-to-action row and the related-links block */
.sr-callout { background: #fff; border: 1px solid var(--sr-hairline); border-radius: var(--sr-r-card); padding: 24px 28px; margin: 28px 0; max-width: 64ch; }
.sr-tint .sr-callout { border-color: var(--sr-tint-line); }
section.sr-paper .sr-callout { background: var(--sr-tint); border-color: transparent; }
.sr-callout > p { font-size: 18px; line-height: 1.55; font-weight: 500; color: var(--sr-ink); margin: 0; }
.sr-callout > p + p { margin-top: 10px; }
.sr-stat { background: #fff; border: 1px solid var(--sr-hairline); border-radius: var(--sr-r-card); padding: 28px; margin: 28px 0; max-width: 64ch; }
.sr-tint .sr-stat { border-color: var(--sr-tint-line); }
section.sr-paper .sr-stat { background: var(--sr-tint); border-color: transparent; }
.sr-stat strong, .sr-stat-figure { display: block; font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; color: var(--sr-navy); font-variant-numeric: tabular-nums; margin: 0 0 10px; }
.sr-stat p { font-size: 16px; line-height: 1.6; color: var(--sr-graphite); margin: 0; }
.sr-endcta { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; background: #fff; border: 1px solid var(--sr-hairline); border-radius: var(--sr-r-card); padding: 28px 32px; margin: 48px 0 0; }
.sr-tint .sr-endcta { border-color: var(--sr-tint-line); }
section.sr-paper .sr-endcta { background: var(--sr-tint); border-color: transparent; }
.sr-endcta > p { font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; color: var(--sr-ink); margin: 0; max-width: 40ch; }
.sr-endcta .sr-btns { margin: 0; }
@media (max-width: 480px) { .sr-endcta .sr-btns { flex: 1 1 100%; } }
.sr-related { margin: 40px 0 0; padding: 28px 0 0; border-top: 1px solid var(--sr-hairline); }
.sr-related > h2, .sr-related > h3 { font-size: 13px; font-weight: 500; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; color: var(--sr-pewter); margin: 0 0 14px; }
.sr-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sr-related a { font-size: 16px; font-weight: 500; color: var(--sr-ink); text-decoration: underline; text-decoration-color: var(--sr-mist); text-underline-offset: 3px; }
.sr-related a:hover { text-decoration-color: var(--sr-ink); }

/* ── Numbered rows (.sr-numlist): long numbered items, each a row with its number in a 40px tint tile
   (white on the tint band) and the item beside it, hairlines between. The number is the page's own (an
   element .sr-numlist-n), or, where the page already numbers with a CSS counter, .sr-numlist-auto. ── */
.sr-numlist { list-style: none; margin: 28px 0; padding: 0; max-width: 760px; counter-reset: sr-num; }
.sr-numlist > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 20px; padding: 24px 0; border-top: 1px solid var(--sr-hairline); }
.sr-numlist > li:last-child { border-bottom: 1px solid var(--sr-hairline); }
.sr-tint .sr-numlist > li { border-color: var(--sr-tint-line); }
.sr-numlist-n, .sr-numlist-auto > li::before { width: 40px; height: 40px; border-radius: 10px; background: var(--sr-tint); color: var(--sr-navy); font-size: 17px; font-weight: 600; line-height: 1; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.sr-tint .sr-numlist-n, .sr-tint .sr-numlist-auto > li::before { background: #fff; }
.sr-numlist-auto > li::before { counter-increment: sr-num; content: counter(sr-num); }
.sr-numlist-auto > li > * { grid-column: 2; }
.sr-numlist > li > :first-child:not(.sr-numlist-n), .sr-numlist-n + * { margin-top: 0; }
:is(.sr-page, .sr-shared) .sr-numlist :is(h2, h3) { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: var(--sr-ink); margin: 6px 0 8px; }
.sr-numlist p { font-size: 16px; line-height: 1.65; color: var(--sr-graphite); margin: 0 0 10px; max-width: 64ch; }
.sr-numlist p:last-child { margin-bottom: 0; }

/* ── Card grids of two and four, as .sr-grid-3: the band is tint, the cards white. .sr-grid-4 is the
   /virtual-receptionist page's own rule, moved here unchanged (4 across, 2 at 1080px, 1 at 640px). ── */
.sr-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sr-card-gap); }
.sr-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sr-card-gap); }
@media (max-width: 1080px) { .sr-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sr-grid-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .sr-grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ── A quote typed into a page (not a Google review; those come only through reviews.js): a card with
   the quote and who said it. The AI receptionist page's own rule, moved here unchanged; with
   .sr-card-soft it takes the tint fill on paper. ── */
.sr-quote { background: #fff; border: 1px solid var(--sr-hairline); border-radius: var(--sr-r-card); padding: var(--sr-card-pad); }
.sr-tint .sr-quote { border-color: var(--sr-tint-line); }
.sr-quote p { font-size: 16px; line-height: 1.6; color: var(--sr-ink); margin: 0; }
.sr-quote-who { margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--sr-pewter); }

/* ── Page forms (.sr-form on the form's card): the fields of a page's own form drawn as the pop-up's,
   whatever the form's own class names are (scripts depend on those, so they stay): labels 13px 600
   graphite, inputs, selects and text areas with the hairline, 8px radius, ink focus. Rows of two with
   .sr-form-row. Errors in --sr-error. The card itself: .sr-form-card (white, the tint hairline on
   the tint) or .sr-formsplit-form. ── */
.sr-form label { font-family: var(--sr-font); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--sr-graphite); }
.sr-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), .sr-form select, .sr-form textarea { width: 100%; font-family: var(--sr-font); font-size: 15px; line-height: 1.4; color: var(--sr-ink); background-color: #fff; border: 1px solid var(--sr-hairline); border-radius: 8px; padding: 11px 14px; box-shadow: none; outline: none; }
.sr-form :is(input, select, textarea):focus { border-color: var(--sr-ink); box-shadow: none; }
.sr-form ::placeholder { color: var(--sr-pewter); opacity: 1; }
.sr-form select { appearance: none; -webkit-appearance: none; padding-right: 40px; text-overflow: ellipsis; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b9bbc6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.sr-form textarea { resize: vertical; min-height: 120px; }
.sr-form :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--sr-navy); }
.sr-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 600px) { .sr-form-row { grid-template-columns: minmax(0, 1fr); } }
.sr-form-card { background: #fff; border: 1px solid var(--sr-hairline); border-radius: var(--sr-r-card); padding: 32px; }
.sr-tint .sr-form-card { border-color: var(--sr-tint-line); }
@media (max-width: 1023.98px) { .sr-form-card { padding: 24px 20px; } }
.sr-form-error { font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--sr-error); }
:is(.sr-page, .sr-shared) .sr-btn-block { width: 100%; }

/* ── Form split variants. Top (.sr-formsplit-top): a page with no hero whose form split holds the
   page's H1: the heading at the top of its column, not at the foot, so it is the first thing seen.
   Wide (.sr-formsplit-wide): a form too wide to sit beside its heading (tables, long rows): the
   heading left and the trust strip and number right, the form card the full width under them. Both
   from 1024px; under that every form split is one column (heading, form, then trust strip and number). ── */
@media (min-width: 1024px) {
  .sr-formsplit.sr-formsplit-top { grid-template-rows: auto 1fr; }
  .sr-formsplit-top .sr-formsplit-head { align-self: start; }
  .sr-formsplit-top .sr-formsplit-form { align-self: start; }
  .sr-formsplit.sr-formsplit-wide { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head meta" "form form"; row-gap: 40px; }
  .sr-formsplit-wide .sr-formsplit-head { align-self: end; }
  .sr-formsplit-wide .sr-formsplit-meta { align-self: end; }
  .sr-formsplit-wide .sr-formsplit-form { align-self: stretch; }
}
.sr-formsplit-meta > .ypc-named-review { margin-top: 32px; }
:is(.sr-page, .sr-shared) .sr-formsplit-meta .ypc-named-review:not([data-layout]) > div { max-width: none !important; margin: 0 !important; }

/* The nav placeholder (137px inline on every page) holds the nav and top bar's real height until components.js
   draws them: 126px up to 900px, --sr-nav-h (120px) from 901px, so nothing shifts when they arrive */
#nav-placeholder { min-height: 126px !important; }
@media (min-width: 900.02px) { #nav-placeholder { min-height: var(--sr-nav-h) !important; } }