/* Shared UI components (Card / Eyebrow / Button) are generated from
   shared/ssds-components.css - edit that file, not this copy. */

/* ============================================================================
   Sydney South Driving School - shared UI components
   ----------------------------------------------------------------------------
   Source of truth for the Card, Eyebrow and Button components.
   Extracted verbatim from the homepage design system used by the static
   production build.

   Consumers:
     - Homepage Restructure/homepage/styles.css   (linked stylesheet)
     - Chipping Norton/styles.css                 (linked stylesheet)
     - Chipping Norton/index.html                 (inlined <style>)
     - Chipping Norton/wordpress-html-block.html  (inlined, scoped to
                                                   .ssds-chipping-norton-page)

   Static hosting with no build step means the WordPress block cannot link an
   external file, so its copy is generated from this one. Edit here first, then
   regenerate the consumers - never patch a consumer directly.

   Contains no credentials, endpoints or keys: presentation only.
   ============================================================================ */

/* ============================================================
   1. DESIGN TOKENS
   THREE-ROLE COLOUR SYSTEM
     ink   - all body copy and headings
     trust - structure, credentials, the parent audience
     go    - action and outcome only, the learner audience
   Red, amber and orange are never accents. Red survives only
   as --danger, for form validation.
   ============================================================ */
:root {
  /* Ink */
  --ink: #101820;
  --ink-muted: #5a6470;

  /* Trust. Brand navy retained: 14.11:1 on white. */
  --trust: #1a2b4a;
  --trust-tint: #edf2f7;
  --trust-deep: #101f38;
  --trust-soft: #24385e;

  /* Go */
  --go: #157f3d;
  --go-hover: #0e6b33;
  --go-tint: #e7f4ec;
  /* Same Go role, lifted for dark surfaces where --go falls to
     2.78:1. Not a fourth accent role, so it keeps the Go hue instead of
     drifting mint: 5.14:1 on --trust-soft, 6.22:1 on --trust. */
  --go-bright: #35c46c;

  /* Semantic aliases for heading emphasis. */
  --accent-heading: var(--go);
  --accent-heading-on-dark: var(--go-bright);

  /* Neutrals */
  --white: #ffffff;
  --surface: #f6f7f5;
  --border: #e2e6e1;

  /* Validation only, never decorative */
  --danger: #b3261e;
  --danger-bright: #ffb4ab;

  /* RGB triplets so every rgba() still resolves to a token */
  --ink-rgb: 16, 24, 32;
  --trust-rgb: 26, 43, 74;
  --trust-deep-rgb: 16, 31, 56;
  --go-rgb: 21, 127, 61;
  --white-rgb: 255, 255, 255;
  --danger-rgb: 179, 38, 30;

  /* Geometry */
  --shadow-sm: 0 12px 30px rgba(var(--trust-rgb), 0.08);
  --shadow-md: 0 20px 50px rgba(var(--trust-rgb), 0.15);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --radius-btn: 14px;
  --max-width: 1180px;
  --section-pad: clamp(4.5rem, 9vw, 7rem);
  --header-offset: 5.25rem;
  --font-heading: "Poppins", sans-serif;
  --font-body: "Nunito Sans", sans-serif;
  /* Labels and kickers: a system monospace stack, so no third webfont
     request on an LCP-sensitive page. */
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* ---- Legacy token aliases -------------------------------------------
     The suburb pages were built on the earlier red/gold/navy palette. These
     aliases repoint the old names at the three-role system, so page-level
     rules that were never part of this component migration still resolve to
     the new palette instead of stranding red and gold on the page. Prefer
     the role tokens above in all new work. */
  --primary: var(--go);
  --primary-dark: var(--go-hover);
  --primary-light: var(--go-tint);
  --accent: var(--go-bright);
  --accent-soft: var(--go-tint);
  --navy: var(--trust);
  --navy-soft: var(--trust-soft);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --surface-strong: var(--trust-tint);
}

/* ============================================================
   2. FOCUS
   --go on light surfaces (5.08:1 on white, 4.73:1 on --surface)
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--go);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --go only reaches 2.78:1 on --trust and 1:1 on a --go fill, so dark
   surfaces and the green button take a white ring instead. */
.hero :focus-visible,
.site-header :focus-visible,
.section--accent :focus-visible,
.cta-panel :focus-visible,
.site-footer :focus-visible,
.video-card :focus-visible,
.button--go:focus-visible,
.skip-link:focus-visible {
  outline-color: var(--white);
}

/* ============================================================
   3. EYEBROW
   A full pill with a 1px border, a 3px zero-blur offset shadow
   matching the buttons, a small accent dot, and heading-font text
   at normal tracking. No uppercase and no letterspacing - that is
   what separates this from a stretched kicker. Colour stays
   --trust; the dot carries --go as a 7px mark rather than a block.
   ============================================================ */
.eyebrow,
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.56rem;
  margin-bottom: 1rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--trust);
  border-radius: var(--radius-pill);
  background: var(--trust-tint);
  box-shadow: 3px 3px 0 0 var(--trust);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: var(--trust);
}

.eyebrow::before,
.hero__eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: var(--go);
}

/* Against the photo rather than a flat band */
.hero__eyebrow {
  box-shadow: 3px 3px 0 0 rgba(var(--trust-deep-rgb), 0.55);
}

/* The pill carries its own ground, so it reads the same on light bands,
   dark bands and photos. But the eyebrow is a <p>, and the dark sections
   set p { color: white } at higher specificity, which would put white text
   on the light fill at 1.13:1. Re-assert it. */
.hero .eyebrow,
.section--accent .eyebrow,
.section--deep .eyebrow,
.cta-panel .eyebrow {
  color: var(--trust);
}

/* Badge form of the eyebrow used over media: mono, 6px radius rather than
   a pill, 1px border, tight padding. */
.video-card__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(var(--white-rgb), 0.34);
  border-radius: 6px;
  background: rgba(var(--white-rgb), 0.16);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   4. BUTTONS
   14px radius, 700 weight, and the signature zero-blur offset
   shadow (5px 5px 0 0) with a trailing arrow. The role is encoded
   in the fill, not only in the offset.
   ============================================================ */
.button {
  --btn-offset: 5px;
  --btn-offset-colour: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.4rem;
  padding: 0.95rem 1.65rem;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--btn-offset) var(--btn-offset) 0 0 var(--btn-offset-colour);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Trailing arrow. Decorative: every label already reads correctly
   without it. */
.button::after {
  content: "\2192";
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.15s ease;
}

.button:hover::after,
.button:focus-visible::after {
  transform: translateX(3px);
}

/* Presses into its own offset, so the affordance survives greyscale */
.button:active {
  transform: translate(var(--btn-offset), var(--btn-offset));
  box-shadow: 0 0 0 0 var(--btn-offset-colour);
}

.button__icon {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button--lg {
  gap: 0.6rem;
  min-height: 3.75rem;
  padding: 1rem 2rem;
  font-size: 1.05rem;
}

/* Small header variant takes a 3px offset */
.site-header .button {
  --btn-offset: 3px;
  min-height: 2.7rem;
  padding: 0.6rem 1.15rem;
  font-size: 0.92rem;
}

/* Primary action. Solid --go, white label, 5.08:1. */
.button--go {
  --btn-offset-colour: var(--ink);
  background: var(--go);
  border-color: var(--go);
  color: var(--white);
}

.button--go:hover,
.button--go:focus-visible {
  --btn-offset-colour: var(--trust);
  background: var(--go-hover);
  border-color: var(--go-hover);
}

/* --go against a --trust ground is only 2.78:1, so on the dark bands the
   offset switches to white to delineate the block itself. */
.hero .button--go,
.cta-panel .button--go,
.section--accent .button--go,
.section--deep .button--go {
  --btn-offset-colour: var(--white);
}

.hero .button--go:hover,
.cta-panel .button--go:hover,
.section--accent .button--go:hover,
.section--deep .button--go:hover {
  --btn-offset-colour: var(--go-bright);
}

/* A form card is white wherever it sits, including inside the dark bands
   above, so a submit button in one takes the light-ground offset rather than
   the white the band would otherwise hand it and lose against the card. */
.form-grid .button--go {
  --btn-offset-colour: var(--ink);
}

.form-grid .button--go:hover,
.form-grid .button--go:focus-visible {
  --btn-offset-colour: var(--trust);
}

/* Go action, stroked rather than filled. For paired CTAs where two solid
   blocks would breach the one-block rule. */
.button--go-outline {
  --btn-offset-colour: var(--go);
  background: var(--white);
  border-color: var(--go);
  color: var(--go);
}

.button--go-outline:hover,
.button--go-outline:focus-visible {
  --btn-offset-colour: var(--ink);
  background: var(--go);
  border-color: var(--go);
  color: var(--white);
}

/* Trust actions: solid navy on light ground */
.button--trust {
  --btn-offset-colour: var(--ink);
  background: var(--trust);
  border-color: var(--trust);
  color: var(--white);
}

.button--trust:hover,
.button--trust:focus-visible {
  --btn-offset-colour: var(--go);
  background: var(--trust-deep);
  border-color: var(--trust-deep);
}

/* Trust actions: outlined, for pairing with a solid without competing */
.button--trust-outline {
  --btn-offset-colour: var(--trust);
  background: var(--white);
  border-color: var(--trust);
  color: var(--trust);
}

.button--trust-outline:hover,
.button--trust-outline:focus-visible {
  --btn-offset-colour: var(--ink);
  background: var(--trust-tint);
}

/* On dark bands: the offset has to be lighter than the ground */
.button--on-dark {
  --btn-offset-colour: rgba(var(--white-rgb), 0.55);
  background: rgba(var(--white-rgb), 0.08);
  border-color: rgba(var(--white-rgb), 0.45);
  color: var(--white);
}

.button--on-dark:hover,
.button--on-dark:focus-visible {
  --btn-offset-colour: var(--go-bright);
  background: rgba(var(--white-rgb), 0.16);
  border-color: var(--white);
}

.button--on-dark-solid {
  --btn-offset-colour: rgba(var(--white-rgb), 0.55);
  background: var(--white);
  border-color: var(--white);
  color: var(--trust);
}

.button--on-dark-solid:hover,
.button--on-dark-solid:focus-visible {
  --btn-offset-colour: var(--go-bright);
  background: var(--trust-tint);
  border-color: var(--trust-tint);
}

.button-row--center {
  justify-content: center;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

/* ============================================================
   5. CARDS
   One base: 1px border, --radius-md, white ground, --shadow-sm.
   Every card variant on the brand inherits it, so padding and
   typography stay identical across pages.
   ============================================================ */
.service-card,
.price-card,
.prep-card,
.mini-card,
.accreditation-card,
.note-card,
.step-card,
.link-card,
.quote-card,
.timeline-card {
  flex: 1 1 16rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.service-card p,
.price-card p,
.mini-card p,
.prep-card p,
.accreditation-card p,
.note-card p,
.step-card p,
.link-card p,
.quote-card p,
.timeline-card p {
  margin-bottom: 0;
  color: var(--ink-muted);
}

.service-card,
.mini-card,
.price-card,
.note-card,
.step-card,
.link-card,
.quote-card {
  height: 100%;
}

/* Lift on hover, shared by every interactive card */
.service-card,
.price-card,
.accreditation-card,
.link-card,
.step-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.service-card:hover,
.accreditation-card:hover,
.link-card:hover,
.step-card:hover,
.price-card:not(.price-card--featured):hover {
  transform: translateY(-3px);
  border-color: var(--trust);
  box-shadow: var(--shadow-md);
}

/* --- Proof cards: the strip that overlaps the hero --- */
.proof-card {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 22px 48px rgba(var(--trust-rgb), 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.proof-card:hover {
  transform: translateY(-4px);
  border-color: var(--trust);
  box-shadow: 0 28px 58px rgba(var(--trust-rgb), 0.26);
}

.proof-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.15rem;
  border-radius: 0.9rem;
  background: var(--trust-tint);
  color: var(--trust);
}

.proof-card__icon svg {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.proof-card h2,
.proof-card h3 {
  margin-bottom: 0.65rem;
  font-size: 1.3rem;
  color: var(--ink);
}

.proof-card p {
  margin-bottom: 1.35rem;
  color: var(--ink-muted);
}

.proof-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  color: var(--trust);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}

.proof-card__link:hover,
.proof-card__link:focus-visible {
  color: var(--go);
}

.proof-card__link span {
  transition: transform 0.18s ease;
}

.proof-card__link:hover span,
.proof-card__link:focus-visible span {
  transform: translateX(4px);
}

/* --- Service cards --- */
.service-card {
  position: relative;
  overflow: hidden;
}

.service-card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.service-card h3 a:hover,
.service-card h3 a:focus-visible {
  color: var(--go);
}

/* A linked card heading is only a line of text tall. This grows the touch
   target to the whole card without changing how the card looks, which matters
   most on the service-area hub where every suburb is a card. */
.service-card h3 a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* The focus ring follows the enlarged target rather than the text alone. */
.service-card:has(h3 a:focus-visible) {
  outline: 3px solid var(--go);
  outline-offset: 3px;
}

.service-card::after {
  content: "";
  position: absolute;
  inset: auto 1.5rem 0.9rem auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(var(--trust-rgb), 0.06);
  pointer-events: none;
}

.service-links {
  margin-top: 1.35rem;
  color: var(--ink-muted);
}

.service-links a {
  color: var(--trust);
  font-weight: 700;
  text-decoration: none;
}

.service-links a:hover,
.service-links a:focus-visible {
  color: var(--go);
}

/* --- Price cards --- */
.price-card {
  text-align: center;
}

/* Pricing tier kicker: an H3, so no accent */
.price-card h3 {
  margin-bottom: 0.35rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.price-card__title {
  margin-bottom: 0.9rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

/* Every price figure stays ink */
.price-card__price {
  margin-bottom: 0.8rem;
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}

/* The recommended flag: --go-tint ground with --go-hover text.
   --go on --go-tint is only 4.49:1, below AA at this 15.2px size. */
.price-card--featured {
  border-color: var(--go);
  box-shadow: 0 0 0 1px var(--go), 0 26px 54px rgba(var(--go-rgb), 0.18);
}

.price-card--featured h3 {
  display: block;
  margin: -0.35rem -0.35rem 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--go-tint);
  color: var(--go-hover);
}

/* --- Accreditation cards --- */
.accreditation-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-color: rgba(var(--trust-rgb), 0.3);
}

.accreditation-card img {
  width: auto;
  max-width: 11rem;
  max-height: 5.5rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--trust-tint);
  object-fit: contain;
}

.accreditation-card h3 {
  color: var(--ink);
}

.accreditation-card h3 a {
  color: var(--trust);
}

.accreditation-card h3 a:hover,
.accreditation-card h3 a:focus-visible {
  color: var(--go);
}

/* --- Cards on the dark bands --- */
.prep-card {
  background: rgba(var(--white-rgb), 0.08);
  border-color: rgba(var(--white-rgb), 0.15);
  box-shadow: none;
}

.prep-card h2,
.prep-card h3 {
  font-size: 1.2rem;
}

/* --- Step cards (numbered process) --- */
.step-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--trust-tint);
  color: var(--trust);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
}

/* --- Link cards --- */
.link-card h3,
.quote-card h3 {
  margin-bottom: 0.55rem;
}

.link-card a {
  color: var(--trust);
  text-decoration: none;
}

.link-card a:hover,
.link-card a:focus-visible {
  color: var(--go);
}

/* --- Quote cards --- */
.quote-card blockquote {
  margin: 0 0 0.9rem;
  color: var(--ink);
  font-size: 1.02rem;
}

.quote-card cite {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

/* --- Timeline cards --- */
.timeline-card {
  display: grid;
  gap: 1rem;
}

.timeline-step {
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.timeline-step p + p {
  margin-top: 0.6rem;
}

/* --- FAQ cards. Borders sit in trust. --- */
.faq-item {
  padding: 1.2rem 1.25rem;
  border: 1px solid rgba(var(--trust-rgb), 0.16);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--ink);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item p {
  margin-top: 0.9rem;
  margin-bottom: 0;
  color: var(--ink-muted);
}

.faq-item p a {
  color: var(--trust);
}

.faq-item p a:hover,
.faq-item p a:focus-visible {
  color: var(--go);
}

/* --- Media cards (photo frames) --- */
.media-card,
.image-panel,
.image-stack__photo,
.cta-panel__photo,
.map-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.image-panel__copy a {
  color: var(--trust);
}

.image-panel__copy a:hover,
.image-panel__copy a:focus-visible {
  color: var(--go);
}

/* --- Video cards --- */
.video-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(var(--white-rgb), 0.08);
  border-radius: calc(var(--radius-md) + 2px);
  background: var(--trust-deep);
  box-shadow: var(--shadow-md);
}

.video-card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(var(--trust-deep-rgb), 0) 0%, rgba(var(--trust-deep-rgb), 0.82) 52%, rgba(var(--trust-deep-rgb), 0.96) 100%);
  pointer-events: none;
}

.video-card__title {
  margin: 0.75rem 0 0;
  max-width: 14ch;
  color: var(--white);
  font-size: 1.25rem;
  line-height: 1.08;
  text-shadow: 0 10px 24px rgba(var(--ink-rgb), 0.32);
}

/* ============================================================
   6. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .proof-card,
  .proof-card__link span,
  .service-card,
  .price-card,
  .accreditation-card,
  .link-card,
  .step-card,
  .button,
  .button::after {
    transition: none;
  }

  .proof-card:hover,
  .service-card:hover,
  .accreditation-card:hover,
  .link-card:hover,
  .step-card:hover,
  .price-card:not(.price-card--featured):hover,
  .button:hover,
  .button:active,
  .button:hover::after,
  .button:focus-visible::after {
    transform: none;
  }

  /* keep the pressed state legible without the movement */
  .button:active {
    box-shadow: 0 0 0 0 var(--btn-offset-colour);
  }
}

/* ============================================================
   7. RESPONSIVE
   ============================================================ */
@media (min-width: 62rem) {
  .price-card--featured {
    transform: scale(1.03);
  }
}

@media (max-width: 47.99rem) {
  /* Full-width buttons: tighter side padding keeps the longest label on one
     line, so the trailing arrow stays next to the text. */
  .button {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  .site-header .button {
    display: none;
  }

  .proof-card {
    padding: 1.5rem;
  }
}


/* ===== Page-specific styles ===== */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: linear-gradient(180deg, var(--white) 0%, var(--surface) 100%);
  line-height: 1.65;
  overflow-x: hidden;
}

body.page-id-19443 #middle,
body.page-id-19443 .middle_inner,
body.page-id-19443 .content_wrap.fullwidth,
body.page-id-19443 .middle_content.entry {
  width: 100%;
  max-width: none;
  padding: 0;
}

body.page-id-19443 .ssds-chipping-norton-page {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

body.page-id-19443 .ssds-chipping-norton-page .hero {
  padding-top: clamp(6.75rem, 11vw, 8.5rem);
}

img {
  display: block;
  width: 100%;
  height: auto;
}

a {
  color: inherit;
}

p {
  margin: 0 0 1rem;
}

h1,
h2,
h3 {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(2.7rem, 6vw, 4.7rem);
  color: var(--white);
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--navy);
}

h3 {
  font-size: 1.15rem;
  color: var(--navy);
}

ul {
  margin: 0;
  padding: 0;
}

.container {
  width: min(calc(100% - 2rem), var(--max-width));
  margin: 0 auto;
}

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

.section--light {
  background: linear-gradient(180deg, rgba(242, 244, 247, 0.85), rgba(255, 255, 255, 0.98));
}

.section--accent {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--trust) 0%, var(--trust-soft) 100%);
  color: var(--white);
}

.section--cta {
  padding-top: 0;
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

.section-lead {
  max-width: 52rem;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: var(--text-muted);
}

.section-lead--light {
  color: rgba(255, 255, 255, 0.8);
}

.hero {
  position: relative;
  /* Own stacking context, so the hero__bg photo and hero__scrim (both on a
     negative z-index) paint above this gradient instead of behind it. */
  isolation: isolate;
  overflow: clip;
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 4.8rem);
  background: linear-gradient(135deg, var(--trust-deep) 0%, var(--trust) 48%, var(--trust-soft) 100%);
}

/* A photo hero needs more room than the flat gradient version. */
.hero:has(.hero__bg) {
  padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem);
}

.hero__backdrop {
  position: absolute;
  inset: auto -10rem -8rem auto;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  background: rgba(var(--trust-rgb), 0.35);
  filter: blur(12px);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.25rem;
  align-items: center;
}

.hero__lead {
  max-width: 40rem;
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.8);
}

.hero__chips,
.button-row,
.section-nav__inner,
.proof-strip__grid,
.skills-grid,
.contact-list,
.suburb-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-weight: 700;
}

.hero__content .button-row {
  gap: 0.7rem;
  margin-top: 0.35rem;
}

.hero__content .button-row .button {
  min-width: 12.8rem;
}

.hero__media {
  display: grid;
  gap: 1rem;
}

/* Paid service heroes keep the static enquiry form above the fold. */
.hero--form {
  padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}

.hero--form .hero__grid { align-items: start; gap: 1.5rem; }
.hero--form .hero__content { padding-top: 0.75rem; }
.hero-form > h2 { margin-bottom: 0.2rem; color: var(--white); font-size: 1.3rem; }
.hero-form > p { margin-bottom: 0.65rem; color: rgba(var(--white-rgb), 0.82); }
.hero-form .form-grid { gap: 0.55rem; padding: 1rem; border-radius: var(--radius-md); }
.hero-form .form-actions { margin-top: 0; }
.hero-form .form-actions .button { width: 100%; min-height: 2.75rem; }
.hero-form .form-note { margin-top: 0; line-height: 1.35; }
.hero-form__phone { margin: 0.55rem 0 0; text-align: center; }
.hero-form__phone a { color: var(--go-bright); font-weight: 800; }

.media-card img,
.cta-panel__photo img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.media-card--primary {
  transform: rotate(-2deg);
}

.media-card--secondary {
  width: min(78%, 22rem);
  margin-left: auto;
  transform: rotate(3deg);
}

.proof-strip {
  position: relative;
  margin-top: -3.4rem;
  margin-bottom: -0.95rem;
  z-index: 2;
}

.proof-strip__grid {
  gap: 1rem;
  align-items: stretch;
}

.section-nav {
  position: sticky;
  top: 0;
  margin-top: -0.2rem;
  z-index: 10;
  backdrop-filter: blur(14px);
  background: rgba(252, 253, 255, 0.82);
  border-top: 1px solid rgba(214, 220, 230, 0.7);
  border-bottom: 1px solid rgba(214, 220, 230, 0.7);
}

.section-nav__inner {
  padding: 0.22rem 0 0.32rem;
  align-items: center;
  justify-content: center;
}

.section-nav a {
  padding: 0.22rem 0.68rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
}

.section-nav a:hover,
.section-nav a:focus-visible {
  background: var(--primary-light);
  color: var(--primary);
}

.intro-grid,
.split-grid,
.local-grid,
.faq-layout,
.cta-panel {
  display: grid;
  gap: 1.5rem;
}

.tick-list {
  display: grid;
  gap: 0.9rem;
  list-style: none;
}

.tick-list li {
  position: relative;
  padding-left: 1.8rem;
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--primary);
}

.tick-list--light li::before {
  background: var(--accent);
}

.card-grid,
.pricing-grid,
.steps-grid {
  display: grid;
  gap: 1rem;
}

.accreditation-grid {
  display: grid;
  gap: 1rem;
}

.skills-grid {
  gap: 0.75rem;
}

.skill-pill {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--border);
  font-weight: 700;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

.image-panel img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.image-panel__copy {
  padding: 1.25rem;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 38rem;
}

.info-table th,
.info-table td {
  padding: 1rem 1.1rem;
  text-align: left;
  vertical-align: top;
}

.info-table th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.86rem;
}

.info-table td {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

.map-stack {
  display: grid;
  gap: 1rem;
}

.map-card iframe {
  display: block;
  width: 100%;
  min-height: 25rem;
  border: 0;
}

.steps-grid {
  counter-reset: steps;
}

.prep-card h2,
.prep-card h3,
.section--accent h2,
.section--accent h3,
.section--accent p,
.section--accent li {
  color: var(--white);
}

.image-stack {
  position: relative;
  min-height: 28rem;
}

.image-stack__photo {
  position: absolute;
  width: min(82%, 25rem);
  background: var(--white);
  border-color: var(--border);
}

.image-stack__photo img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.image-stack__photo--offset {
  right: 0;
  bottom: 0;
  width: min(70%, 18rem);
  transform: translateY(1.4rem);
}

.shortcode-block {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
}

.video-grid {
  display: grid;
  gap: 1rem;
}

.video-card wistia-player {
  display: block;
}

.faq-list {
  display: grid;
  gap: 1rem;
}

.cta-panel {
  gap: 1.25rem;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--trust) 0%, var(--trust-soft) 100%);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.cta-panel__content {
  padding: clamp(2rem, 5vw, 3.5rem);
}

.cta-panel__content h2 {
  color: var(--white);
}

.cta-panel__content p {
  color: rgba(255, 255, 255, 0.82);
}

.cta-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.4rem 0 1.6rem;
}

.cta-highlights span {
  padding: 0.7rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  font-weight: 700;
}

.cta-panel__sidebar {
  margin: clamp(1rem, 4vw, 1.5rem);
  padding: 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(var(--radius-lg) - 6px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cta-panel__sidebar h3 {
  color: var(--white);
}

.cta-panel__sidebar p {
  color: rgba(255, 255, 255, 0.78);
}

.contact-list {
  margin: 1.8rem 0;
  display: grid;
  gap: 0.75rem;
}

.contact-list a,
.contact-list span {
  font-size: 1rem;
}

@media (min-width: 48rem) {  .hero__grid,
  .intro-grid,
  .split-grid,
  .local-grid,
  .faq-layout,
  .cta-panel,
  .service-area {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card-grid--three,
  .pricing-grid,
  .accreditation-grid,
  .video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .card-grid--two,
  .steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cta-panel {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  }
  .proof-card {
    min-width: 0;
  }}

@media (min-width: 62rem) {  .hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(20rem, 0.88fr);
  }
  .split-grid--reverse {
    grid-template-columns: 0.9fr 1.1fr;
  }}

@media (max-width: 47.99rem) {  h1 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.95rem, 9.6vw, 3rem);
    line-height: 1.02;
  }
  .hero__chips {
    display: none;
  }
  body.page-id-19443 .ssds-chipping-norton-page .hero {
    padding-top: 4.75rem;
  }
  .hero {
    padding-top: 1rem;
    padding-bottom: 2.2rem;
  }
  .hero__grid {
    gap: 1rem;
  }
  .hero__lead {
    margin-bottom: 0.75rem;
    font-size: 0.98rem;
    line-height: 1.5;
  }
  .hero__media {
    display: none;
  }
  .hero--form { padding-top: 0.65rem; padding-bottom: 1rem; }
  .hero--form h1 { font-size: clamp(1.8rem, 8.7vw, 2.35rem); }
  .hero--form .hero__lead { margin-bottom: 0; line-height: 1.35; }
  .hero--form .hero__content { padding-top: 0; }
  .hero-form > h2 { font-size: 1.05rem; }
  .hero-form > p { margin-bottom: 0.35rem; font-size: 0.86rem; }
  .hero-form .form-grid { gap: 0.4rem; padding: 0.8rem; }
  .hero-form .form-field { gap: 0.15rem; }
  .hero-form .form-field label { font-size: 0.78rem; }
  .hero-form .form-field input,
  .hero-form .form-field select { min-height: 2.75rem; padding: 0.65rem 0.75rem; }
  .hero-form .form-note { font-size: 0.78rem; }
  .hero-form__phone { font-size: 0.86rem; }
  .proof-strip {
    margin-top: -1.2rem;
    margin-bottom: -0.2rem;
  }
  .section-nav__inner {
    justify-content: flex-start;
  }
  .media-card--secondary {
    width: 88%;
  }
  .image-stack {
    min-height: 24rem;
  }
  .button-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }
  .button-row .button {
    width: 100%;
  }
  .cta-panel__sidebar {
    margin: 0 1rem 1rem;
  }}


/* ---------------------------------------------------------------
   Location hero: full-bleed photo, key points, booking router card
   and the trust stat bar. Ported from the standalone build so the
   shared templates can render them from page data.
   --------------------------------------------------------------- */

/* Inline SVGs in these components are stroke-drawn, not filled. Without
   this they paint as solid black shapes. */
.router-item__icon svg,
.router-item__chevron,
.stat__icon svg {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.router-item__chevron {
  width: 1.15rem;
  height: 1.15rem;
}

/* The star is a filled glyph, so it opts out of the stroke defaults. */
.stat__icon--star svg {
  fill: currentColor;
  stroke: none;
}

.hero :focus-visible,
.site-header :focus-visible,
.section--accent :focus-visible,
.stat-bar :focus-visible,
.cta-panel :focus-visible,
.site-footer :focus-visible,
.video-card :focus-visible,
.button--go:focus-visible,
.router-item--go:focus-visible,
.skip-link:focus-visible {
  outline-color: var(--white);
}

.hero .hl,
.section--accent .hl,
.stat-bar .hl,
.cta-panel .hl {
  color: var(--accent-heading-on-dark);
}

/* .section--deep renders on the light page ground, so its highlight takes
   the light-surface accent. --accent-heading-on-dark reads 2.2:1 there. */
.section--deep .hl {
  color: var(--accent-heading);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(var(--trust-deep-rgb), 0.56) 0%,
    rgba(var(--trust-deep-rgb), 0.72) 46%,
    rgba(var(--trust-deep-rgb), 0.48) 100%);
}

.hero__points {
  display: grid;
  gap: 0.7rem;
  max-width: 34rem;
  margin: 0;
  list-style: none;
}

.hero__points li {
  position: relative;
  padding-left: 1.8rem;
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 12px rgba(var(--trust-deep-rgb), 0.45);
}

.hero__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 2px;
  background: var(--go-bright);
  transform: rotate(45deg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.9rem;
}

.hero__actions .button {
  flex: 0 1 auto;
}

.hero__router {
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 32px 70px rgba(var(--trust-deep-rgb), 0.4);
}

.hero__router-title {
  margin-bottom: 0.35rem;
  font-size: 1.5rem;
  color: var(--ink);
}

.hero__router-lead {
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.router-list {
  display: grid;
  gap: 0.6rem;
  list-style: none;
}

.router-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--surface);
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.router-item:hover,
.router-item:focus-visible {
  border-color: var(--go);
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.router-item--go {
  background: var(--go);
  border-color: var(--go);
}

.router-item--go:hover,
.router-item--go:focus-visible {
  background: var(--go-hover);
  border-color: var(--go-hover);
}

.router-item--go .router-item__text strong,
.router-item--go .router-item__text small,
.router-item--go .router-item__chevron {
  color: var(--white);
}

.router-item--go .router-item__icon {
  background: rgba(var(--white-rgb), 0.18);
  color: var(--white);
}

.router-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  background: var(--trust-tint);
  color: var(--trust);
  transition: transform 0.18s ease;
}

.router-item:hover .router-item__icon {
  transform: scale(1.06);
}

.router-item__text {
  display: grid;
  gap: 0.12rem;
  line-height: 1.3;
}

.router-item__text strong {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.router-item__text small {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.router-item__chevron {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--ink-muted);
  transition: transform 0.18s ease, color 0.18s ease;
}

.router-item:hover .router-item__chevron,
.router-item:focus-visible .router-item__chevron {
  color: var(--go);
  transform: translateX(3px);
}

.router-item--go:hover .router-item__chevron,
.router-item--go:focus-visible .router-item__chevron {
  color: var(--white);
}

.router-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 1.25rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}

.router-rating__stars {
  color: var(--trust);
  letter-spacing: 0.08em;
}

.router-rating a {
  color: var(--trust);
  text-underline-offset: 3px;
}

.router-rating a:hover,
.router-rating a:focus-visible {
  color: var(--go);
}

.stat-bar {
  padding: 1.6rem 0;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  background: linear-gradient(135deg, var(--trust-deep) 0%, var(--trust) 100%);
  color: var(--white);
}

/* The hero sits outside <main>, so a stat bar that butts against it is the
   first section inside that main, not an adjacent sibling of the hero. */
.hero + main > .stat-bar:first-child {
  margin-top: 0;
}

.hero:has(+ main > .stat-bar:first-child) {
  padding-bottom: clamp(2.75rem, 6vw, 5rem);
}

.stat-bar__grid {
  display: grid;
  gap: 1.25rem;
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: rgba(var(--white-rgb), 0.1);
  color: var(--trust-tint);
}

.stat__text {
  display: grid;
  gap: 0.1rem;
  line-height: 1.25;
}

.stat__text strong {
  font-family: var(--font-heading);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--white);
}

.stat__text small {
  font-size: 0.85rem;
  color: rgba(var(--white-rgb), 0.68);
}

@media (min-width: 48rem) {
  .stat-bar__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.5rem 2rem;
    }
}

@media (min-width: 62rem) {
  .hero__scrim {
      background:
        radial-gradient(125% 105% at 16% 52%,
          rgba(var(--trust-deep-rgb), 0.88) 0%,
          rgba(var(--trust-deep-rgb), 0.78) 34%,
          rgba(var(--trust-deep-rgb), 0.28) 64%,
          rgba(var(--trust-deep-rgb), 0) 100%),
        linear-gradient(180deg,
          rgba(var(--trust-deep-rgb), 0.2) 0%,
          transparent 30%,
          rgba(var(--trust-deep-rgb), 0.44) 100%);
    }
  
  .hero__router {
      padding: 2rem;
    }
  
  .stat-bar__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1.5rem;
    }
  
  .stat + .stat {
      padding-left: 1.5rem;
      border-left: 1px solid rgba(var(--white-rgb), 0.14);
    }
}

@media (max-width: 47.99rem) {
  .hero__points {
      gap: 0.55rem;
    }
  
  .hero__points li {
      padding-left: 1.6rem;
      font-size: 0.92rem;
      letter-spacing: 0.05em;
    }
  
  .hero__actions {
      display: grid;
      gap: 0.7rem;
      margin-top: 1.5rem;
    }
  
  .hero__actions .button--lg {
      width: 100%;
    }
  
  .hero__router {
      padding: 1.35rem 1.15rem;
    }
  
  .router-item {
      padding: 0.8rem;
      gap: 0.75rem;
    }
}

/* ============================================================
   ENQUIRY FORM
   One shared form component, posted to the provider configured
   in app/config/site.js. Ported from the homepage design system
   (its dark CTA sidebar), with light-surface defaults for the
   standard section bands. Red appears only for validation.
   ============================================================ */
.form-layout {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 60rem) {
  .form-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.form-grid {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.form-field {
  display: grid;
  gap: 0.3rem;
}

.form-field label {
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
}

.form-required {
  font-weight: 400;
  color: var(--ink-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
}

.form-field select { cursor: pointer; }

.form-field textarea {
  min-height: 6.5rem;
  resize: vertical;
}

/* The only permitted use of red anywhere on the page */
.form-field input:user-invalid,
.form-field select:user-invalid,
.form-field textarea:user-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(var(--danger-rgb), 0.28);
}

.form-actions { margin-top: 0.35rem; }

.form-note {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-muted);
}

.form-error {
  min-height: 1rem;
  color: var(--danger);
  font-size: 0.78rem;
  line-height: 1.2;
}

[aria-invalid="true"] { border-color: var(--danger); }

@media (min-width: 48rem) {
  .hero-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-form .form-actions,
  .hero-form .form-note { grid-column: 1 / -1; }
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Dark-surface variant: the form keeps its white card, only the copy
   around it changes, so nothing extra is needed for section--accent or
   the CTA panel beyond the label colour staying on the card. */

/* ============================================================
   LOGO GRID - Service NSW testing centres
   Borderless on purpose: the band sits directly under the hero,
   where a fifth row of bordered cards would read as more
   structure than the page needs. The logo is the only frame.
   ============================================================ */
.logo-grid {
  display: grid;
  gap: 2.25rem 1.5rem;
}

.logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  text-align: center;
}

.logo-card__mark {
  width: 100%;
  max-width: 9.5rem;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.logo-card h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--trust);
  text-wrap: balance;
}

/* The card is the tap target's only company, so the button keeps its
   full offset shadow but drops to the compact end of the scale. */
.logo-card .button {
  margin-top: auto;
  min-height: 3rem;
  padding: 0.8rem 1.35rem;
  font-size: 0.95rem;
}

/* These four scroll down to the booking band rather than off to another
   page, so the shared arrow turns to match, and its nudge with it. */
.logo-card .button::after {
  content: "\2193";
}

.logo-card .button:hover::after,
.logo-card .button:focus-visible::after {
  transform: translateY(3px);
}

@media (min-width: 48rem) {
  .logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* Stacked, these four cards sat 1600px tall between the hero and the first
   band. The logo is a repeated mark rather than four different ones, so it
   is the part that can shrink without costing the reader anything. */
@media (max-width: 47.99rem) {
  .logo-grid {
    gap: 1.75rem;
  }

  .logo-card {
    gap: 0.85rem;
  }

  .logo-card__mark {
    max-width: 5.5rem;
  }
}

/* ============================================================
   SUBURB DROPDOWN - collapsed suburb lists
   ============================================================ */
.suburb-dropdown {
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(var(--trust-rgb), 0.2);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.suburb-dropdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--ink);
}

.suburb-dropdown summary::-webkit-details-marker {
  display: none;
}

.suburb-dropdown summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--go);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}

.suburb-dropdown[open] summary {
  border-bottom: 1px solid rgba(var(--trust-rgb), 0.14);
}

.suburb-dropdown[open] summary::after {
  content: "\2212";
}

.suburb-dropdown summary:focus-visible {
  outline: 3px solid rgba(var(--go-rgb), 0.35);
  outline-offset: -3px;
}

.suburb-dropdown .card-grid {
  padding: 1.25rem;
}

.suburb-dropdown__after {
  margin-top: 2.75rem;
}

.suburb-dropdown__group + .suburb-dropdown__group {
  margin-top: 2.25rem;
}

.suburb-dropdown__group-title {
  margin-bottom: 1rem;
}

/* ============================================================
   STUDENT RESULTS COLLAGE + PHOTO WALL
   Ported from the standalone homepage so the service-area hub can
   run the same reviews block. Kept in step with the homepage rules.
   ============================================================ */
/* Centred section header: eyebrow + heading + lead */
.section-head {
  max-width: 48rem;
  margin: 0 auto clamp(2.25rem, 4vw, 3.25rem);
  text-align: center;
}

.section-head .section-lead {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

/* The pill carries its own ground, so it reads the same on light bands,
   dark bands and the photo. But the eyebrow is a <p>, and the dark
   sections set p { color: white } at higher specificity, which would put
   white text on the light fill at 1.13:1. Re-assert it. */

/* Student-results collage. Mobile: one column, tallest tiles first.
   Desktop: 4 columns x 2 rows with the two outcome photos as bookends. */
.collage {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

.collage__item {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-lg);
  background: var(--trust-deep);
  box-shadow: var(--shadow-sm);
}

.collage__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: center 28%;
}

.collage__item--tall img {
  aspect-ratio: 4 / 5;
  object-position: center 22%;
}

/* Chip: scrim plus a glass pill, so the label holds over any photo */
.collage__chip {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.1rem;
  padding: 2.5rem 0.9rem 0.9rem;
  background: linear-gradient(180deg, rgba(var(--trust-deep-rgb), 0) 0%, rgba(var(--trust-deep-rgb), 0.72) 48%, rgba(var(--trust-deep-rgb), 0.94) 100%);
  pointer-events: none;
}

.collage__result {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
  text-shadow: 0 2px 10px rgba(var(--trust-deep-rgb), 0.6);
}

.collage__meta {
  font-size: 0.8rem;
  line-height: 1.25;
  color: rgba(var(--white-rgb), 0.76);
}

/* The two outcome tiles. Green on the label only, never a filled block,
   so the one-block rule still holds. */
.collage__chip--result .collage__result {
  color: var(--go-bright);
}

@media (min-width: 48rem) {
  .collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .collage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 12rem);
  }

  /* Explicit placement: auto-flow leaves a hole at column 4 row 1 and
     pushes the last tile into an implicit third row. */
  .collage__item:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .collage__item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .collage__item:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }

  .collage__item:nth-child(4) {
    grid-column: 2 / span 2;
    grid-row: 2;
  }

  .collage__item:nth-child(5) {
    grid-column: 4;
    grid-row: 1 / span 2;
  }

  .collage__item img,
  .collage__item--tall img {
    aspect-ratio: auto;
  }
}

/* Pass wall: every tile is a real student on the day they passed, so the
   proof here is volume. Uniform tiles, small chips, no hierarchy. */
.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.6rem;
}

.wall__item {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-md);
  background: var(--trust-deep);
  box-shadow: var(--shadow-sm);
}

.wall__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 22%;
}

.wall__chip {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.05rem;
  padding: 1.9rem 0.6rem 0.6rem;
  background: linear-gradient(180deg, rgba(var(--trust-deep-rgb), 0) 0%, rgba(var(--trust-deep-rgb), 0.74) 46%, rgba(var(--trust-deep-rgb), 0.95) 100%);
  pointer-events: none;
}

.wall__result {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--go-bright);
  text-shadow: 0 1px 8px rgba(var(--trust-deep-rgb), 0.7);
}

.wall__meta {
  font-size: 0.7rem;
  line-height: 1.2;
  color: rgba(var(--white-rgb), 0.74);
}

/* Third-party review widget. Spacing only: the embed brings its own
   card chrome, so no border, background or shadow here. */
.reviews-embed {
  margin-top: 1.75rem;
}

/* The embed keeps a crawlable link out of the widget iframe. */
.embed-fallback {
  margin-top: 0.85rem;
  font-size: 0.92rem;
}

/* ============================================================
   PRACTICE ROUTE CARDS
   ------------------------------------------------------------
   The animated map block. Geometry comes from the page JSON as
   an SVG path, so a route card carries no tiles, no map script
   and no third-party key: it renders instantly and stays legible
   when printed or when JavaScript is off. Motion is decorative
   and is removed under prefers-reduced-motion below.
   ============================================================ */
.route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.route-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.route-card__map {
  position: relative;
  background: var(--trust-tint);
}

.route-card__map svg {
  display: block;
  width: 100%;
  height: auto;
}

.route-map__ground {
  fill: var(--trust-tint);
}

/* The street grid is scenery, not data: it reads as a map without
   claiming to be a survey of any particular block. */
.route-map__streets path {
  fill: none;
  stroke: rgba(var(--trust-rgb), 0.16);
  stroke-width: 6;
  stroke-linecap: round;
}

.route-map__line {
  fill: none;
  stroke: var(--go);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: route-draw 2.2s ease-out forwards;
}

/* A short dash that keeps moving gives the card its direction of
   travel: start marker to finish marker, the way the lesson runs. */
.route-map__trace {
  fill: none;
  stroke: var(--go-bright);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 26 874;
  stroke-dashoffset: 900;
  animation: route-trace 4.2s linear 1.4s infinite;
}

.route-map__start,
.route-map__finish {
  stroke: var(--white);
  stroke-width: 3;
}

.route-map__start {
  fill: var(--go);
}

.route-map__finish {
  fill: var(--trust);
}

.route-card__badge {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--trust);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.route-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
}

.route-card__area {
  margin: 0;
  color: var(--go);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.route-card__body h3 {
  margin: 0;
  font-size: 1.1rem;
}

.route-card__body p {
  margin: 0;
  font-size: 0.95rem;
}

.route-card__meta {
  display: flex;
  gap: 1.5rem;
  margin: 0.15rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.route-card__meta dt {
  color: var(--text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.route-card__meta dd {
  margin: 0.1rem 0 0;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
}

.route-card__roads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
}

.route-card__roads li {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--trust-tint);
  font-size: 0.8rem;
}

.route-note {
  margin-top: 1.25rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}

@keyframes route-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes route-trace {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .route-map__line {
    stroke-dashoffset: 0;
    animation: none;
  }

  .route-map__trace {
    display: none;
  }
}

/* ============================================================
   INLINE LINKS ON THE DARK BANDS
   ------------------------------------------------------------
   Body copy on --trust turns white, so an inline link inside it
   inherited white and carried an underline as its only cue. The
   accent green is what marks emphasis everywhere else on dark
   (.hl, tick bullets, hero highlights), so it marks links too.
   Buttons are unaffected: they never sit inside a paragraph.

   .section--deep is deliberately not in this list. Despite the name
   it sets no background and no colour, so it renders on the light
   page ground: --go-bright falls to 2.2:1 there and the white hover
   disappears outright. Its links keep the light-surface treatment.
   ============================================================ */
.section--accent p a,
.section--accent li a,
.cta-panel__content p a {
  color: var(--go-bright);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.section--accent p a:hover,
.section--accent li a:hover,
.cta-panel__content p a:hover {
  color: var(--white);
}