/* ============================================================
   ConstructCert Australia — shared page furniture

   Skip link, sticky nav, the contact section and lead form, the
   footer, and their responsive overrides. Every page loads this;
   nothing section-specific belongs here.

   LOAD ORDER is tokens.css, base.css, this, then exactly one
   page sheet:
     /            variants.css
     /services    services.css
     /contact     contact-page.css
     404          notfound.css
   So a rule here is overridden by whichever of those four the page
   carries, and by nothing else.

   The five prototyped home-page sections — hero, service streams,
   Our Commitment, Our Expertise, Where we work — are in
   variants.css. They were switchable once; none of them is now, and
   no [data-variant] selector survives anywhere in the build. The
   file keeps the name.

   The two alternating .feature rows went with them: Residential and
   Commercial are one two-part section, .cc-streams, in variants.css,
   and every .feature* rule was deleted here rather than left to rot.
   The build those rules were written for is in
   archive/2026-08-review-superseded/, with its own stylesheet; if a
   rule exists there and not here, that directory's README says which
   one ships.
   ============================================================ */


/* ============================================================
   0 · SKIP LINK
   ============================================================ */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-xs);
  background: var(--button-bg);
  color: var(--button-fg);
  font: 600 0.95rem/1 var(--font-body);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
}
.skip-link:focus-visible { transform: translateY(0); }


/* ============================================================
   1 · HEADER / STICKY NAV
   ============================================================ */

.nav-shell {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--logo-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.03);
  transition: background-color var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* data-scrolled is set by main.js once the hero has passed under the nav. */
.nav-shell[data-scrolled="true"] {
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.06);
}

.nav {
  width: min(96rem, calc(100% - 2rem));
  /* Matched to MyReno's header, which is 126px at 1280 rising to 168px past
     1700. Its bar has no stated height — the height comes from its logo's
     image box, which is 29vw of a canvas that is 24% blank. This logo is
     trimmed, so the bar is stated instead: MyReno's box height, clamp(22rem,
     29vw, 31rem) / 3, written out. */
  min-height: clamp(7.33rem, 9.67vw, 10.33rem);
  display: grid;
  grid-template-columns: minmax(22rem, 1fr) max-content max-content;
  align-items: center;
  gap: clamp(0.65rem, 1vw, 1rem);
  margin-inline: auto;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  /* The logo used to arrive with ~14.5% of its own width as blank pixels down
     its left edge, which is what held the wordmark off the nav's left rail —
     it read as an inset but nothing set one. Trimming the asset took it away,
     so the inset is stated here instead, tracking the logo's own clamp: it
     lands within a few px of where the brand has always sat, 24px on a phone
     up to 44px past 1700. */
  padding-inline-start: clamp(1.5rem, 2.6vw, 2.75rem);
  text-decoration: none;
  background-image: none;
}

.nav-brand img {
  /* The asset is the artwork — 1200x403, trimmed to the lockup's own bounds,
     on transparency. Sized off MyReno's logo, but by height rather than width:
     that lockup is horizontal at 3.26:1 and this one is stacked at 2.98:1, so
     matching widths would leave this one standing taller in the same bar.
     Matching heights puts both at 105px at 1440, with the same air above and
     below. The numbers are MyReno's clamp(22rem, 29vw, 31rem) times 0.7504 —
     0.82 of it is artwork, and the two aspect ratios do the rest. */
  width: clamp(16.5rem, 21.75vw, 23.25rem);
  height: auto;
  transition: filter var(--transition-fast);
}

.nav-links {
  min-width: max-content;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  /* Three links instead of five, so they get the room the other two were
     using rather than the bar keeping the gap it needed when it was full. */
  gap: clamp(0.9rem, 1.4vw, 1.6rem);
  white-space: nowrap;
}

.nav-link {
  position: relative;
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  background-image: none;
}

.nav-link::after {
  position: absolute;
  right: 0;
  bottom: -0.35rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.nav-link:hover::after,
.nav-link[data-active="true"]::after,
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-link[data-active="true"],
.nav-link[aria-current="page"] {
  color: var(--brand);
}

.nav-aside {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.nav-phone {
  width: 2.65rem;
  height: 2.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--brand);
  text-decoration: none;
  background-image: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.nav-phone:hover,
.nav-phone:focus-visible {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

/* Icon-only on every breakpoint; the number stays for screen readers. */
.nav-phone span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nav-phone svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.nav-cta {
  min-height: 2.6rem;
  padding-inline: 0.75rem;
  font-size: 0.92rem;
}

.nav-toggle {
  display: none;
  min-width: 2.7rem;
  min-height: 2.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
}

.nav-toggle svg {
  width: 1.1rem;
  height: 1.1rem;
}

.nav-toggle [data-nav-icon="close"] { display: none; }
.nav-toggle[aria-expanded="true"] [data-nav-icon="menu"] { display: none; }
.nav-toggle[aria-expanded="true"] [data-nav-icon="close"] { display: block; }
.nav-toggle[aria-expanded="false"] [data-nav-icon="menu"] { display: block; }

/* Shown only inside the mobile panel — see the 767px block. */
.nav-menu__cta { display: none; }


/* --- 1b · the section bar --------------------------------------------
   The five section links the top row used to carry. It borrows the bar's own
   underline-on-active language rather than inventing a second one: the site
   has one way of marking a live link and this is a quieter tier of the same
   navigation, not a different kind of thing. No pills, no filled band — a
   second row that shouts competes with the row that matters.

   It is a sibling of .nav inside the sticky .nav-shell, so both rows move as
   one and --nav-offset measures them together. */

.cc-subnav { border-top: 1px solid var(--border); }

.cc-subnav__inner {
  width: min(96rem, calc(100% - 2rem));
  min-height: 3rem;
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  margin-inline: auto;
  /* Tracks .nav-brand's inset, so the label starts on the logo's left rail. */
  padding-inline-start: clamp(1.5rem, 2.6vw, 2.75rem);
}

.cc-subnav__label {
  flex: none;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* 82% of --muted over white is 4.78:1 — the same mix the hero's placeholders
     use, and the lightest one on this site that still clears AA. */
  color: color-mix(in srgb, var(--muted) 82%, var(--bg));
}

.cc-subnav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  min-width: 0;
  /* One line at every width. Below the breakpoint it scrolls sideways rather
     than wrapping, so the sticky block keeps a fixed height and --nav-offset
     stays true; main.js keeps the active link scrolled into view. */
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.cc-subnav__links::-webkit-scrollbar { display: none; }

.cc-subnav__link {
  position: relative;
  flex: none;
  padding-block: 0.85rem;
  color: var(--muted);
  font-size: 0.88rem;
  text-decoration: none;
  background-image: none;
  transition: color var(--transition-fast);
}

.cc-subnav__link::after {
  position: absolute;
  right: 0;
  bottom: 0.35rem;
  left: 0;
  height: 2px;
  background: var(--brand);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.cc-subnav__link:hover { color: var(--text); }
.cc-subnav__link[data-active="true"] { color: var(--text); font-weight: 600; }
.cc-subnav__link[data-active="true"]::after { transform: scaleX(1); }


/* 3 · The alternating feature rows stood here. They are now section 3 of
   variants.css, .cc-streams, and every .feature* rule has been deleted with
   them — including the .feature__inner / .feature--commercial pair in the
   RESPONSIVE block below. */

/* 6 · The marquee stood here — a band scrolling BUILDING PERMITS •
   INSPECTIONS • COMPLIANCE between Our Commitment and Our Expertise.
   Removed 13 August 2026. Its rules, its keyframes, its clone in
   ../scripts/main.js and its reduced-motion exception below are
   deleted rather than disabled. */

/* ============================================================
   9 · CONTACT + LEAD FORM

   /contact only since 20 August 2026. This block closed the home page too,
   with the same markup; the home page now links to the page instead of
   carrying a second copy of the form. The rules stay here rather than moving
   to contact-page.css because page.css is what both pages load, and one of
   them still needs them.
   ============================================================ */

.contact {
  position: relative;
  min-height: calc(100svh - var(--nav-offset));
  padding: clamp(4rem, 7vw, 7.5rem) 0;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--brand) 24%, var(--border));
  background: var(--surface);
}

.contact__layout { position: relative; }

.contact__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.8fr);
  row-gap: clamp(2.25rem, 4vw, 3.5rem);
  column-gap: clamp(3.5rem, 7vw, 7rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  /* No inline padding: the template inset this block by up to 4rem, which
     pushed the heading off the page's left margin while the form card below
     stayed on it. Every other section starts at the container edge. */
  padding: 0 0 clamp(0.5rem, 1.5vw, 1.25rem);
}

.contact__intro > div { min-width: 0; }

.contact__intro > div:first-child {
  display: grid;
  align-content: start;
  gap: clamp(0.85rem, 1.5vw, 1.25rem);
}

.contact__intro-copy {
  display: grid;
  align-content: end;
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

/* :is(h1, h2) because /contact/ carries this heading as its <h1> — it is
   that page's title, not a section heading under one. The home page still
   sets it as an <h2>; both land here. */
.contact :is(h1, h2) {
  max-width: 13ch;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.contact__eyebrow { margin-bottom: var(--space-3); }

.contact__lede {
  max-width: 40rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.75;
}

.contact__promise {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.contact__promise svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--brand);
}

/* --- lead form --- */
.lead-form {
  position: relative;
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2.75rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent 28%),
    color-mix(in srgb, var(--surface) 54%, transparent);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
}

/* The wide field and the actions row break out of the two-column rhythm. */
.field--details,
.form-actions {
  grid-column: 1 / -1;
}

.field--details {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.55rem;
}

.field label {
  color: var(--text);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.015em;
}

.required-mark { color: var(--brand); }

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
  color: var(--text);
  outline: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.field input,
.field select {
  min-height: 3.35rem;
  padding: 0.75rem 0.9rem;
}

.field select {
  padding-right: 3rem;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1.4rem) 50%,
    calc(100% - 1.05rem) 50%;
  background-repeat: no-repeat;
  background-size: 0.38rem 0.38rem;
}

.field textarea {
  min-height: 10rem;
  padding: 0.9rem;
  line-height: 1.55;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 76%, transparent);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: color-mix(in srgb, var(--brand) 56%, var(--border-strong));
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent);
}

.field select:invalid { color: var(--muted); }

.field select option {
  background: var(--surface-strong);
  color: var(--text);
}

/* Filled in on arrival from the home page's hero intake. One pass of tint, so
   a field the visitor answered on the page before reads as answered rather than
   as a form that mysteriously remembered them.

   background-color, not box-shadow or outline: both of those belong to focus,
   and an animation outranks a plain declaration in the cascade — tinting them
   would swallow the focus ring of anyone who clicked in mid-fade. There is no
   `to` keyframe on purpose; the browser synthesises it from the field's own
   background, so the ramp lands exactly on it with nothing duplicated here.
   The global reduced-motion rule below already cuts this to nothing. */
@keyframes cc-intake-fill {
  from { background-color: color-mix(in srgb, var(--brand) 22%, var(--surface-strong)); }
}

.field [data-intake-filled] {
  animation: cc-intake-fill 1.8s ease-out 1;
}

/* --- submit + status --- */
.form-actions {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-2);
}

.submit-button {
  width: max-content;
  min-width: 12.5rem;
}

.form-status {
  min-height: 1.6rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Collapse entirely when there's no message, so it reserves no space. */
.form-status:empty {
  min-height: 0;
  padding: 0;
}

/* The form provider key is still a placeholder, so nothing sends. The notice
   state says so plainly and hands over the two channels that do work. It is
   deliberately NOT the success green — no submission has happened. */
.form-status[data-state="notice"] {
  border-color: color-mix(in srgb, var(--brand) 38%, transparent);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: var(--text);
}

.form-status[data-state="error"] {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 11%, transparent);
  color: var(--text);
}

.call-line {
  margin-top: var(--space-6);
  color: var(--muted);
  font-size: 0.9rem;
  text-align: right;
}

.call-line a {
  color: var(--text);
  font-weight: 700;
}

/* Honeypot — must stay in the layout for bots but never be reachable. */
.botcheck {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ============================================================
   10 · FOOTER
   A near-black band. --text (#0A1417) would render black on
   black, so every text colour on the band is restated here.
   Contrast against #0A1417: white 18.66:1, --muted 7.47:1,
   the lightened teal 9.52:1. The brand teal itself only reaches
   3.86:1 (#287C8B on #0A1417, recomputed 13 Aug 2026 — the 4.07 recorded
   here was stale), so links and the button use the tint.
   ============================================================ */

.site-footer {
  /* A deliberately neutral step off the token ramp, so the band separates
     from the page background without reading as a tint. */
  --footer-bg: #0A1417;
  /* Darkened to hold 4.5:1 on the band above. Re-check if --footer-bg moves. */
  --muted: #9AA6A9;
  --footer-link: #7FC4D0;
  /* --border is mixed from --text, which is this band's own colour — every
     hairline in the footer was black on black. Restate it off white. */
  --border: color-mix(in srgb, #FFFFFF 15%, transparent);
  position: relative;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--brand) 42%, var(--border));
  background: var(--footer-bg);
  color: #E6EBEC;
}

.footer-main {
  display: grid;
  grid-template-areas: "brand nav contact hours start";
  grid-template-columns:
    minmax(15rem, 1.65fr)
    minmax(8rem, 0.9fr)
    minmax(9rem, 1fr)
    minmax(9rem, 1fr)
    minmax(8rem, 0.85fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
}

.footer-block { min-width: 0; }

.footer-brand {
  grid-area: brand;
  /* the query container the wordmark sizes itself off — see .footer-brand__name.
     Safe from circularity: this track's min is a fixed length and its max an fr,
     so the column never sizes to its contents. */
  container-type: inline-size;
  padding-right: var(--space-6);
  border-right: 1px solid var(--border);
}

.footer-nav { grid-area: nav; }
.footer-contact { grid-area: contact; }
.footer-hours { grid-area: hours; }
.footer-start { grid-area: start; }

.footer-heading {
  display: block;
  margin-bottom: 1rem;
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.footer-brand__name {
  /* "ConstructCert" is a single unbreakable word 6.77x the font size wide, and
     the brand column stops growing once .container reaches its cap — so a
     viewport-sized name ran the word straight over the divider at 72 of the 80
     widths measured between 961 and 2560, by up to 26px. The column decides the
     size instead: 14cqi against an exact fit of 14.76cqi. min() keeps the old
     viewport clamp in charge below 60rem, where the column is the full page
     width and cqi would blow the name up.
     width: min-content replaces a max-width of 12ch, which was wider than this
     column ever gets and so never constrained anything; min-content is the
     wordmark's own width, so the box can no longer be narrower than its text. */
  width: min-content;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: min(clamp(1.7rem, 3vw, 2.5rem), 14cqi);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.footer-abn {
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.035em;
}

.footer-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.15rem 0;
  background-image: none;
  color: var(--footer-link);
  font-size: 0.91rem;
  /* the email address has no natural break point */
  overflow-wrap: anywhere;
}

.footer-link:hover {
  background-image: none;
  color: #FFFFFF;
}

.footer-link svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--footer-link);
}

/* Two rows since the client confirmed the weekend hours, so the list needs a
   gap of its own. Without it "Sat–Sun" sits hard against the weekday time
   above it and the pair reads as one four-line block. */
.footer-hours-list { margin: 0; display: grid; gap: 0.55rem; }
.footer-hours-list div { display: grid; gap: 0.2rem; }
.footer-hours-list dt { color: #FFFFFF; font-size: 0.91rem; }
.footer-hours-list dd { margin: 0; color: var(--muted); font-size: 0.84rem; }

.footer-start__button {
  min-height: 2.6rem;
  padding: 0.65rem 1rem;
  font-size: 0.82rem;
  /* the primary button sits on the dark band, so it takes the lightened tint */
  background: var(--footer-link);
  border-color: var(--footer-link);
  color: #06212A;
}
.footer-start__button:hover { background: #FFFFFF; border-color: #FFFFFF; color: #06212A; }

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: 0.8rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.74rem;
}

/* The build credit, same link and same place as MyReno's. It inherits the
   legal row's --muted rather than the link teal, so it sits behind the notice
   instead of competing with it. On hover it takes the lightened tint, not
   --brand as MyReno does: --brand is only 3.86:1 on this band and this is
   0.74rem text. */
.footer-powered {
  background-image: none;
  color: inherit;
  white-space: nowrap;
}

.footer-powered:hover,
.footer-powered:focus-visible {
  background-image: none;
  color: var(--footer-link);
}
/* =====================================================================
   RESPONSIVE — every breakpoint override, in section order
   ===================================================================== */

/* 3 · the feature rows' only breakpoint override stood here. The whole
   @media block held nothing but .feature__inner and .feature--commercial, so
   it is gone entire — no selector was trimmed out of a grouped rule and left
   the rest of that rule live. .cc-streams carries its own breakpoints in
   variants.css. */

/* --- 1 · tablet nav: logo and CTA shrink before the links wrap -------
   Sized to the five links by measurement: they need 463px at full size and
   372px compressed. The bar offers 463px at 900 — no margin at all — and
   597px at 1050, so the compressed set holds this band and the full-size one
   takes over above it with 134px to spare. Same band MyReno uses. */
@media (min-width: 768px) and (max-width: 1050px) {
  .nav {
    width: calc(100% - 1rem);
    /* back to the flat bar through this band, as MyReno's is — the fluid
       height above is a desktop measure and 9.67vw would undercut it here */
    min-height: 5.8rem;
    grid-template-columns: minmax(13rem, 15rem) max-content max-content;
    gap: 0.55rem;
  }

  .nav-brand img { width: min(100%, 11.2rem); }
  .nav-links { gap: 0.9rem; }
  .nav-link { font-size: 0.85rem; }
  .nav-aside { gap: 0.4rem; }

  .nav-cta {
    min-height: 2.35rem;
    padding-inline: 0.6rem;
    font-size: 0.76rem;
  }

  .cc-subnav__inner { padding-inline-start: 0.5rem; }
}

/* --- 1 · mobile nav: links collapse into a toggled panel -------------
   Back to 768, the number site.config.json declares. The bar collapsed at 820
   because five compressed links needed 372px; three need about 200 and the
   bar still has room to spare at 768 — measured, not assumed. The matchMedia
   in ../scripts/main.js reads the same number off data-nav-breakpoint in the
   markup, so the two can no longer drift.

   767.98, not 767: a viewport can land on a fractional width, and 767/768
   would leave it matching neither band — which showed up as a width with no
   links and no hamburger at all.

   The section bar does NOT collapse. It is already one scrolling line, it is
   the wayfinding for the page you are on, and burying it behind the same
   toggle as the site links would put both tiers back in one place. */
@media (max-width: 767.98px) {
  .nav {
    width: min(var(--content-max), calc(100% - 1rem));
    min-height: 5.1rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto;
    gap: 0.5rem;
    padding-block: 0;
  }

  .nav-brand img { width: clamp(6.4rem, 31.5vw, 7.9rem); }

  .nav-aside { gap: 0.5rem; }

  .nav-phone {
    flex: none;
    padding: 0;
    background: color-mix(in srgb, var(--logo-bg) 92%, var(--surface));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--logo-bg);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  }

  .nav-links {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0.5rem;
    width: max-content;
    max-width: calc(100vw - 1rem);
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-lg) + 0.25rem);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
  }

  .nav-shell[data-menu-open="false"] .nav-links { display: none; }
  .nav-shell[data-menu-open="true"] .nav-links { z-index: 2; }

  .nav-link {
    width: 100%;
    min-height: 2.9rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.85rem 0.2rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 0;
    background: transparent;
    background-image: none;
  }

  .nav-link::after { display: none; }

  .nav-link:hover,
  .nav-link[data-active="true"],
  .nav-link[aria-current="page"] { color: var(--brand); }

  /* The portal CTA moves into the panel, so hide the inline one. It is
     reachable on a phone here — on the old site it was hidden below 1024px
     and left out of the hamburger entirely. */
  .nav-menu__cta {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
  }

  .nav-menu__cta .nav-cta {
    width: 100%;
    display: inline-flex;
    justify-content: center;
  }

  .nav-aside > .nav-cta { display: none; }

  /* "On this page" goes: at this width the row is plainly a row of sections,
     and 100px of label is 100px the section names could be using. */
  .cc-subnav__inner { padding-inline-start: 0.5rem; gap: 0.9rem; }
  .cc-subnav__label { display: none; }
  .cc-subnav__link { font-size: 0.84rem; }
}

/* --- 10 · footer: widen the contact column ---------------------------
   The five-column default allots contact ~190px, and an email address has no
   natural break point. admin@constructcertaustralia.com.au sets 261.6px of
   text and 286.4px with its icon and gap, so the track has to clear that or
   .footer-link's overflow-wrap: anywhere breaks the address mid-domain and
   strands a single letter on line two.

   The 18.5rem comes out of brand, which had the most to give: the wordmark
   sizes itself off its own column (14cqi), so a narrower track buys a
   proportionally smaller name rather than an overflow. Every other minimum
   here is a measured floor, not a preference:

     nav      6.5rem   "QUICK LINKS" sets 105px
     hours    9rem     "BUSINESS HOURS" sets 139px, and at 7.5rem it broke
                       across two lines everywhere below 1140px
     start    7.5rem   the Get started button is 103px

   Total 51.5rem, down from 53rem. That does not clear the over-subscription
   between 961 and 1035 — the five tracks still ask 42px more than the
   container holds there, where they used to ask 66px — but the footer folds
   to two columns before it matters. */
@media (min-width: 60rem) {
  .site-footer .footer-main {
    grid-template-columns:
      minmax(10rem, 1.16fr)     /* brand   */
      minmax(6.5rem, 0.62fr)    /* nav     */
      minmax(18.5rem, 1.62fr)   /* contact */
      minmax(9rem, 0.72fr)      /* hours   */
      minmax(7.5rem, 0.74fr);   /* start   */
  }
}

/* --- 10 · footer folds to two columns -------------------------------
   959.98, not 960: at exactly 960px this and the widen rule above both
   matched, and that one won on specificity, so five column tracks were laid
   into this two-column template and contact collapsed to 112px. */
@media (max-width: 959.98px) {
  .footer-main {
    grid-template-areas:
      "brand brand"
      "nav contact"
      "hours start";
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    padding-right: 0;
    padding-bottom: var(--space-7);
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

/* --- 9 · contact ---------------------------------------------------- */
@media (max-width: 760px) {
  .contact { padding-top: 3.5rem; }

  .contact__intro {
    grid-template-columns: 1fr;
    row-gap: 2.25rem;
    align-items: start;
    padding: 1.75rem 0.75rem;
  }

  .form-grid { grid-template-columns: 1fr; }
  .form-actions { grid-template-columns: 1fr; }
  .call-line { text-align: left; }
  .submit-button { width: 100%; }
}

/* --- page gutter narrows ------------------------------------------- */
@media (max-width: 640px) {
  .container { width: min(100% - 2rem, var(--content-max)); }
}

/* --- 10 · footer stacks --------------------------------------------- */
@media (max-width: 620px) {
  .footer-main {
    grid-template-areas:
      "brand"
      "nav"
      "contact"
      "hours"
      "start";
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .footer-brand { padding-bottom: var(--space-7); }

  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

/* =====================================================================
   MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}