/* Tranzsure — translated from Tranzsure.dc.html (Claude Design project).
   Desktop values are the design's originals; breakpoints below are additions,
   since the source design is fixed-width desktop only. */

:root {
  --ink: #0E1C0E;
  --cream: #EDE8D0;
  --off: #F8F8F8;
  --white: #FFFFFF;
  --green: #55993B;
  --green-dark: #3E7A28;
  --lime: #8CC63F;
  --charcoal: #202020;
  --charcoal-2: #2A2A2A;
  --charcoal-3: #333333;
  --olive: #4C7500;
  --mint: #EAF3E3;

  --ink-72: rgba(14, 28, 14, .72);
  --ink-68: rgba(14, 28, 14, .68);
  --ink-66: rgba(14, 28, 14, .66);
  --ink-65: rgba(14, 28, 14, .65);
  --ink-62: rgba(14, 28, 14, .62);
  --ink-55: rgba(14, 28, 14, .55);
  --rule: rgba(14, 28, 14, .1);
  --rule-2: rgba(14, 28, 14, .12);

  --cream-72: rgba(237, 232, 208, .72);
  --cream-65: rgba(237, 232, 208, .65);
  --cream-60: rgba(237, 232, 208, .6);
  --cream-55: rgba(237, 232, 208, .55);

  --wrap: 1180px;
  --gutter: 24px;
  --bar-h: 60px;
  /* Height of the sticky header. Single source of truth for anchor
     scroll-margin and the mobile nav panel's max-height. */
  --header-h: 76px;
}

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

html {
  scroll-behavior: smooth;
  /* Stops iOS Safari inflating body text when the phone is rotated. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The header is sticky, so an un-offset anchor drops the target heading
   underneath it. #quote was measurably hidden before this. */
#main, #top, #services, #work, #about, #area, #quote {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--off);
  color: var(--ink);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is required alongside the width/height attributes on <img>,
   otherwise the attribute height wins and aspect-ratio is ignored. */
img, svg { display: block; max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
blockquote, figure, p, h1, h2, h3 { margin: 0; }

a { color: var(--green-dark); text-decoration: none; }
a:hover { color: var(--green); }

::selection { background: var(--lime); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--dark :focus-visible,
.area :focus-visible,
.site-footer :focus-visible,
.banner :focus-visible { outline-color: var(--lime); }

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--cream);
  padding: 12px 18px; border-radius: 0 0 10px 10px;
  font-size: 14px; font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; color: var(--cream); }

/* max() with the horizontal insets because viewport-fit=cover lets content sit
   under a notch in landscape. Falls back to the plain gutter everywhere else. */
.wrap {
  max-width: var(--wrap); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.display { font-family: Anton, Impact, "Arial Narrow", sans-serif; font-weight: 400; text-transform: uppercase; }
.display--xl { font-size: 76px; line-height: .95; letter-spacing: .005em; margin: 22px 0 0; text-wrap: balance; }
.display--lg { font-size: 48px; line-height: 1; }
.display--md { font-size: 46px; line-height: 1; margin: 12px 0 0; }
.display--sm { font-size: 40px; line-height: 1; margin: 12px 0 0; }
.accent { color: var(--lime); }

.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--green); text-transform: uppercase; }
.eyebrow--lime { color: var(--lime); }
.eyebrow--sm { font-size: 11.5px; letter-spacing: .14em; }

.grid { display: grid; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; border-radius: 999px; border: 1.5px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--pill-green { background: var(--green); color: var(--off); padding: 11px 20px; letter-spacing: .01em; }
.btn--pill-green:hover { background: var(--green-dark); color: var(--off); }
.btn--green { background: var(--green); color: var(--off); font-size: 16px; padding: 16px 28px; }
.btn--green:hover { background: var(--green-dark); color: var(--off); }
.btn--outline { border-color: rgba(14, 28, 14, .25); color: var(--ink); font-size: 16px; padding: 15px 26px; }
.btn--outline:hover { border-color: var(--ink); color: var(--ink); }
.btn--lime { align-self: start; background: var(--lime); color: var(--ink); font-size: 15px; padding: 14px 26px; }
.btn--lime:hover { background: var(--cream); color: var(--ink); }

.link-underline {
  align-self: start; color: var(--cream); font-size: 14.5px; font-weight: 600;
  border-bottom: 1px solid rgba(237, 232, 208, .4);
  transition: color .15s ease, border-color .15s ease;
}
.link-underline:hover { color: var(--lime); border-color: var(--lime); }
.link-underline--dark {
  display: inline-block; margin-top: 26px; color: var(--ink);
  border-bottom-color: rgba(14, 28, 14, .3);
}
.link-underline--dark:hover { color: var(--green); border-color: var(--green); }

/* ---------- Top strip + header ---------- */

.topbar {
  background: var(--ink); color: var(--cream);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 28px; padding: 9px 20px;
}
.topbar__lead { color: var(--lime); font-weight: 600; }

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--off); border-bottom: 1px solid var(--rule-2);
}
.site-header__inner {
  padding-top: 14px; padding-bottom: 14px;
  display: flex; align-items: center; gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__mark { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
.brand__text { display: block; line-height: 1; }
.brand__name { display: block; font-family: Anton, Impact, "Arial Narrow", sans-serif; font-size: 27px; letter-spacing: .02em; }
.brand__tag { display: block; font-size: 9.5px; letter-spacing: .22em; color: rgba(14, 28, 14, .6); margin-top: 3px; }

.site-nav {
  margin-left: auto; display: flex; align-items: center; gap: 28px;
  font-size: 14.5px; font-weight: 600;
}
.site-nav a { color: var(--ink); }
.site-nav a:hover { color: var(--green); }
.site-nav .btn--pill-green { color: var(--off); }

.nav-toggle {
  display: none; margin-left: auto; align-items: center; gap: 10px;
  background: none; border: 1.5px solid var(--rule-2); border-radius: 999px;
  padding: 10px 16px; min-height: 44px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink); cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; }
.nav-toggle__bars span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ---------- Hero ---------- */

.hero { background: var(--cream); border-bottom: 1px solid var(--rule); }
.hero__inner {
  padding-top: 64px; padding-bottom: 72px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
/* The h1 is now the first thing in the hero, so drop its 22px top margin
   rather than stacking it on the section padding. */
.hero__copy > :first-child { margin-top: 0; }
.lede { font-size: 20px; line-height: 1.5; color: var(--ink-72); margin: 20px 0 0; max-width: 30em; text-wrap: pretty; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.traits {
  margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 12px 0;
  font-size: 13px; font-weight: 600; letter-spacing: .09em;
  color: var(--ink-62); text-transform: uppercase;
}
/* The pipe belongs to the word that follows it, so it travels with that word
   on wrap instead of being orphaned at the end of a line. */
.traits span + span::before {
  content: "|"; color: rgba(14, 28, 14, .3); margin: 0 26px;
}

.hero__media { position: relative; }
.framed { border-radius: 18px; overflow: hidden; border: 1px solid var(--rule-2); }
.framed img { width: 100%; height: 100%; object-fit: cover; }
.framed--4x5 { aspect-ratio: 4 / 5; }
.framed--1x1 { aspect-ratio: 1 / 1; }
.framed--3x4 { aspect-ratio: 3 / 4; border-radius: 14px; }
.framed--dark { border-color: rgba(237, 232, 208, .14); background: var(--charcoal-2); }

.badge-card {
  position: absolute; left: -22px; bottom: 34px;
  background: var(--off); border-radius: 14px; padding: 16px 20px;
  box-shadow: 0 14px 34px rgba(14, 28, 14, .16); max-width: 250px;
}
.badge-card__title { font-family: Anton, Impact, "Arial Narrow", sans-serif; font-size: 19px; color: var(--green); letter-spacing: .02em; }
.badge-card__body { font-size: 13px; line-height: 1.45; color: rgba(14, 28, 14, .7); margin-top: 4px; }

/* ---------- Full-bleed banner ---------- */

.banner { position: relative; height: 420px; overflow: hidden; background: var(--olive); }
.banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14, 28, 14, .85) 0%, rgba(14, 28, 14, .55) 42%, rgba(14, 28, 14, 0) 72%);
}
.banner__inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  gap: 18px; color: var(--cream);
}
.banner .display--md { font-size: 46px; line-height: 1.02; letter-spacing: .02em; margin: 0; max-width: 12em; }

/* ---------- Sections ---------- */

.section--off { background: var(--off); }
.section--cream { background: var(--cream); }
.section--dark { background: var(--charcoal); color: var(--cream); }
.section--ruled { border-top: 1px solid var(--rule); }
.section > .wrap { padding-top: 78px; padding-bottom: 78px; }
.section--ruled > .wrap, .area > .wrap { padding-top: 66px; padding-bottom: 66px; }

.section__head { display: flex; align-items: end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.section__intro { max-width: 26em; font-size: 15.5px; line-height: 1.6; color: var(--ink-66); }
.section__intro--wide { margin: 14px 0 0; max-width: 34em; color: var(--cream-72); }
.section__intro--light { margin: 14px 0 0; color: rgba(237, 232, 208, .78); }
.section--ruled .section__intro { max-width: 24em; }

/* ---------- Service cards ---------- */

.card-grid { gap: 18px; margin-top: 40px; }
.card {
  background: var(--white); border: 1px solid var(--rule); border-radius: 16px;
  padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--green); transform: translateY(-3px); }
.card__title { font-size: 18.5px; font-weight: 700; }
.card__body { font-size: 14.5px; line-height: 1.55; color: var(--ink-65); }
.card__body--light { color: var(--cream-65); }
.card--dark {
  background: var(--charcoal); color: var(--cream); border: none;
  justify-content: center; gap: 10px;
}
.card--dark:hover { transform: none; }
.card--darker {
  background: var(--charcoal-2); border: none; border-radius: 14px;
  padding: 28px; justify-content: center; gap: 10px;
}
.card--darker:hover { transform: none; }
.card__shout {
  font-family: Anton, Impact, "Arial Narrow", sans-serif; font-weight: 400;
  font-size: 24px; color: var(--lime); text-transform: uppercase; line-height: 1.05;
}
.card--darker .card__shout { font-size: 26px; }

/* ---------- Work gallery ---------- */

/* Row gap is wider than the column gap on purpose: 18px both ways made a
   caption sit as close to the photo below it as to its own photo above. */
.work-grid { column-gap: 18px; row-gap: 34px; margin-top: 34px; }

/* The portfolio shots are single files with several photos composited inside
   them, so dividers have to be drawn over the image. Seam positions were
   measured per image from the largest row/column discontinuity:
     fence, retaining wall  2 rows            --seam 50%
     lawn                   2 rows            --seam 51.15%
     downlight              3 rows            --seam 33.27% + --seam-2 66.83%
     deck                   2x2 grid          --seam 50% + --seam-v 50%
   Three background layers: two horizontal rules and one vertical. Unset ones
   are parked off-canvas rather than needing a modifier class. Percentage
   background-position centres each line exactly on its seam, because the
   offset resolves against (container - line thickness).
   Section colour, so a line reads as a gap rather than a stroke. */
.work .framed { position: relative; }
.work .framed::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--charcoal), var(--charcoal)),
    linear-gradient(var(--charcoal), var(--charcoal)),
    linear-gradient(var(--charcoal), var(--charcoal));
  background-size: 100% 3px, 100% 3px, 3px 100%;
  background-position:
    0 var(--seam, 50%),
    0 var(--seam-2, -99px),
    var(--seam-v, -99px) 0;
}

.work figcaption { display: block; }
.work__title { display: block; margin-top: 12px; font-weight: 600; font-size: 16px; }
.work__story { display: block; font-size: 14px; line-height: 1.5; color: var(--cream-60); }

/* ---------- About ---------- */

.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.about__media { position: relative; }
.mascot-card {
  position: absolute; right: -16px; bottom: -16px; width: 148px;
  background: var(--off); border-radius: 16px; padding: 10px;
  box-shadow: 0 14px 34px rgba(14, 28, 14, .18);
}
.mascot-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; }
.mascot-card figcaption { font-size: 11.5px; line-height: 1.35; color: var(--ink-65); margin-top: 7px; text-align: center; }
.prose { font-size: 16.5px; line-height: 1.65; color: rgba(14, 28, 14, .75); margin: 14px 0 0; max-width: 34em; text-wrap: pretty; }
.prose:first-of-type { margin-top: 18px; }

/* grid-auto-rows: 1fr so every tile matches the tallest, including when the
   grid wraps and a tile ends up alone on its own row. "Free quotes" is one line
   where the other two are two, so it was short whenever it wrapped to its own row. */
.fact-grid { gap: 16px; margin-top: 28px; grid-auto-rows: 1fr; }
.fact { background: var(--off); border-radius: 14px; padding: 18px 18px 20px; }
.fact__key { font-family: Anton, Impact, "Arial Narrow", sans-serif; font-size: 30px; color: var(--green); }
.fact__val { font-size: 13.5px; line-height: 1.4; color: var(--ink-68); }

/* ---------- Reviews ---------- */

.reviews { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; margin-top: 36px; align-items: start; }
.reviews__stack { display: grid; gap: 18px; }
.review { background: var(--white); border: 1px solid var(--rule); border-radius: 16px; padding: 26px 28px 28px; }
.review p { font-size: 15.5px; line-height: 1.6; color: rgba(14, 28, 14, .78); text-wrap: pretty; }
.review__by { margin-top: 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--ink-55); text-transform: uppercase; }
.review--feature { background: var(--mint); border: none; padding: 30px 32px 32px; }
.review--feature p { font-size: 17px; line-height: 1.65; color: rgba(14, 28, 14, .82); }
.review--feature .review__by { margin-top: 18px; font-size: 13px; }
.review--dark { background: var(--charcoal); border: none; color: var(--cream); }
.review--dark p { color: rgba(237, 232, 208, .85); }
.review__by--lime { color: var(--lime); }

/* ---------- Bespoke requests ---------- */

.ask-grid { gap: 18px; margin-top: 34px; align-items: stretch; }
.ask {
  background: var(--off); border: 1px solid var(--rule); border-radius: 16px;
  padding: 26px 26px 28px; display: flex; flex-direction: column; height: 100%;
}
/* margin-bottom, not just the result's padding-top: in a single-column layout
   the result's `margin-top: auto` collapses to zero, which left the rule sitting
   directly under the quote's descenders. */
.ask__quote { margin: 12px 0 20px; font-size: 17px; line-height: 1.55; color: rgba(14, 28, 14, .82); text-wrap: pretty; }
.ask__result {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule-2);
  font-size: 14.5px; line-height: 1.5; color: var(--ink-65);
}

/* ---------- Service area ---------- */

.area {
  position: relative; background: var(--olive); color: var(--cream);
  background-image: url("/img/texture.jpg"); background-size: 340px; background-repeat: repeat;
}
.area__scrim { position: absolute; inset: 0; background: rgba(76, 117, 0, .9); }
.area__inner { position: relative; display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.area .display--sm { font-size: 42px; }
.suburbs { display: flex; flex-wrap: wrap; gap: 12px; }
.suburbs li {
  border: 1.5px solid rgba(237, 232, 208, .45); border-radius: 999px;
  padding: 11px 22px; font-size: 15.5px; font-weight: 600;
}

/* ---------- Quote ---------- */

/* Grid items default to min-width:auto, so the quote column refused to shrink
   below the <select>'s 293px min-content width (set by its longest option).
   That forced the layout viewport to 355px and shifted the whole page on
   320px devices. Both links in the chain need min-width:0. */
.quote__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.quote__inner > * { min-width: 0; }
.quote > .wrap { padding-bottom: 90px; }
.contacts { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.contact {
  display: flex; align-items: center; gap: 14px;
  background: var(--charcoal-2); border-radius: 14px; padding: 18px 20px;
  color: var(--cream); transition: background-color .15s ease;
}
.contact:hover { background: var(--charcoal-3); color: var(--cream); }
.contact__key { font-size: 12px; letter-spacing: .14em; color: var(--cream-55); width: 118px; flex: none; }
.contact__val { font-size: 19px; font-weight: 600; }

.quote-form {
  background: var(--off); color: var(--ink); border-radius: 18px; padding: 30px;
  display: flex; flex-direction: column; gap: 14px;
}
.quote-form__title { font-family: Anton, Impact, "Arial Narrow", sans-serif; font-weight: 400; font-size: 26px; text-transform: uppercase; }
.quote-form input,
.quote-form select,
.quote-form textarea {
  border: 1px solid rgba(14, 28, 14, .2); border-radius: 10px; padding: 14px 16px;
  /* 16px, not the design's 15px: below 16px iOS Safari zooms the page on every
     field focus, which is worse than one pixel of drift on a mobile-first site. */
  font: inherit; font-size: 16px; background: var(--white); color: var(--ink);
  min-width: 0; max-width: 100%;
}
.quote-form select { text-overflow: ellipsis; }
.quote-form textarea { resize: vertical; }
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(85, 153, 59, .25); }
.btn--submit {
  background: var(--green); color: var(--off); border: none; border-radius: 999px;
  padding: 16px; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer;
  transition: background-color .15s ease;
}
.btn--submit:hover { background: var(--green-dark); }
.quote-form__note { font-size: 12.5px; color: var(--ink-55); text-align: center; }
.quote-form__noscript {
  font-size: 14px; line-height: 1.55; color: var(--ink);
  background: var(--mint); border-radius: 10px; padding: 14px 16px;
}
.quote-form__status { font-size: 13.5px; line-height: 1.5; color: var(--green-dark); text-align: center; }
.quote-form__status:empty { display: none; }

/* ---------- Footer ---------- */

.site-footer {
  position: relative; background: var(--ink); color: var(--cream-72);
  background-image: url("/img/texture.jpg"); background-size: 300px;
  background-blend-mode: luminosity; background-repeat: repeat;
}
.site-footer__scrim { position: absolute; inset: 0; background: rgba(14, 28, 14, .88); }
.site-footer__inner {
  position: relative; padding-top: 44px; padding-bottom: 44px;
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
}
.brand--footer { gap: 12px; }
.brand--footer .brand__mark { width: 54px; height: 54px; }
.brand--footer .brand__name { color: var(--cream); font-size: 24px; }
.site-footer__legal { font-size: 13.5px; line-height: 1.6; }
.site-footer__contact { display: flex; align-items: center; gap: 18px; }
.site-footer__contact p { font-size: 13.5px; line-height: 1.6; }
.site-footer__contact a { color: var(--cream-72); }
.site-footer__contact a:hover { color: var(--lime); }
.social {
  width: 44px; height: 44px; border-radius: 50%; background: var(--lime);
  display: grid; place-items: center; flex: none; transition: background-color .15s ease;
}
.social:hover { background: var(--cream); }
.site-footer__spacer { height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }

/* ---------- Sticky action bar ---------- */

.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: stretch;
  min-height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px rgba(14, 28, 14, .18);
}
/* Each panel carries the safe-area inset in its own bottom padding so its own
   colour reaches the physical bottom edge. On an Android phone with gesture
   navigation the page background was showing through that strip as a white bar
   under the bar. Padding the container instead would leave it transparent,
   since the bar has no background of its own. */
.stickybar__brand {
  flex: 1; background: var(--green); color: var(--cream);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.stickybar__name { font-family: Anton, Impact, "Arial Narrow", sans-serif; font-size: 20px; letter-spacing: .02em; }
.stickybar__tag { font-size: 13px; opacity: .85; }
.stickybar__cta {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 26px calc(14px + env(safe-area-inset-bottom, 0px));
  font-size: 15.5px; color: var(--ink); white-space: nowrap;
  transition: background-color .15s ease;
}
.stickybar__cta--call { background: var(--off); font-weight: 700; }
.stickybar__cta--email { background: var(--cream); font-weight: 600; }
.stickybar__cta:hover { background: var(--lime); color: var(--ink); }

/* =========================================================
   Responsive. The source design is desktop-fixed; everything
   below is an addition, not a translation.
   ========================================================= */

@media (max-width: 1080px) {
  .display--xl { font-size: 60px; }
  .display--lg { font-size: 42px; }
  .display--md, .banner .display--md { font-size: 38px; }
  .display--sm, .area .display--sm { font-size: 34px; }
  .hero__inner { gap: 36px; }
  .about { gap: 36px; }
  .quote__inner { gap: 36px; }
  .contact__key { width: 92px; }
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--off); border-bottom: 1px solid var(--rule-2);
    box-shadow: 0 14px 34px rgba(14, 28, 14, .12);
    padding: 8px var(--gutter) 18px;
    /* In landscape the open panel ran past the bottom of the viewport and the
       phone-number CTA could not be reached. The sticky bottom bar is subtracted
       as well so the panel's last row is never hidden behind it. dvh accounts
       for the browser's collapsing chrome; the vh line is the fallback. */
    max-height: calc(100vh - var(--header-h) - var(--bar-h) - env(safe-area-inset-bottom, 0px) - 8px);
    max-height: calc(100dvh - var(--header-h) - var(--bar-h) - env(safe-area-inset-bottom, 0px) - 8px);
    overflow-y: auto; overscroll-behavior: contain;
  }

  .brand { min-height: 44px; }

  /* These three are standalone CTAs, not prose links, and sit at ~22px tall.
     A transparent overlay gives them a 44px touch target without moving the
     underline that is their visual affordance. */
  .link-underline { position: relative; }
  .link-underline::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%); height: 44px;
  }
  .site-header__inner { position: relative; }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav a { padding: 14px 2px; border-bottom: 1px solid var(--rule); font-size: 16px; }
  .site-nav .btn--pill-green {
    border-bottom: none; margin-top: 14px; padding: 14px 20px;
    justify-content: center; font-size: 16px;
  }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { max-width: 520px; }
  .about { grid-template-columns: 1fr; }
  .about__media { max-width: 520px; }
  .quote__inner { grid-template-columns: 1fr; }
  .area__inner { grid-template-columns: 1fr; gap: 28px; }
  .reviews { grid-template-columns: 1fr; }
  .banner { height: 360px; }
  .banner .display--md { max-width: none; }
  .banner__scrim { background: linear-gradient(90deg, rgba(14, 28, 14, .88) 0%, rgba(14, 28, 14, .68) 60%, rgba(14, 28, 14, .35) 100%); }
}

@media (max-width: 760px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  /* Once the work grid drops below three across, an 18px row gap is the same
     spacing as the gap between a photo and its own caption, so it stops being
     obvious which caption belongs to which photo. Widen the row gap only. */
  .work-grid { row-gap: 42px; }
  .section > .wrap { padding-top: 56px; padding-bottom: 56px; }
  .section--ruled > .wrap, .area > .wrap { padding-top: 48px; padding-bottom: 48px; }
  .quote > .wrap { padding-bottom: 64px; }
  .hero__inner { padding-top: 44px; padding-bottom: 52px; }
  .display--xl { font-size: 46px; }
  .lede { font-size: 17.5px; }
  .site-footer__inner { justify-content: flex-start; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; --header-h: 72px; }

  .grid--3 { grid-template-columns: 1fr; }
  /* Three fixed columns left only 64px of text width at 320px, turning
     "Tranzsure Limited, NZ registered company" into a 133px-tall sliver.
     auto-fit keeps three across where they fit and stacks them where they
     don't; min() stops the 150px floor becoming a new overflow source. */
  .fact-grid { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
  .fact { padding: 14px 14px 16px; }
  .fact__key { font-size: 26px; }
  .fact__val { font-size: 13px; }

  .display--xl { font-size: 38px; }
  .display--lg { font-size: 32px; }
  .display--md, .banner .display--md { font-size: 30px; }
  .display--sm, .area .display--sm { font-size: 28px; }

  .topbar { font-size: 11.5px; gap: 6px 16px; padding: 8px 14px; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__name { font-size: 23px; }
  .brand__tag { font-size: 8px; letter-spacing: .16em; }

  /* Negative-offset cards have nowhere to overhang on a phone. */
  .badge-card { position: static; max-width: none; margin-top: 14px; box-shadow: none; border: 1px solid var(--rule-2); }

  /* Pulled up over the photo's corner at 128px wide, this read as a misplaced
     sticker rather than a deliberate inset. Below 560px it becomes a plain
     thumbnail-plus-caption row underneath the photo. */
  .mascot-card {
    position: static; width: auto; margin: 12px 0 0;
    display: flex; align-items: center; gap: 12px;
    padding: 10px; box-shadow: none; border: 1px solid var(--rule-2);
  }
  .mascot-card img { width: 84px; flex: none; }
  .mascot-card figcaption { margin-top: 0; text-align: left; font-size: 13.5px; }

  .traits { font-size: 12.5px; letter-spacing: .07em; }
  .traits span + span::before { margin: 0 12px; }

  .banner { height: 320px; }
  .review--feature { padding: 24px 22px 26px; }
  .review { padding: 22px 22px 24px; }
  .review--feature p { font-size: 16px; }
  .quote-form { padding: 22px; }
  .contact { padding: 16px; gap: 4px; flex-direction: column; align-items: flex-start; }
  .contact__key { width: auto; }

  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 18px; }

  /* Brand block cannot coexist with both CTAs below ~500px. */
  .stickybar__brand { display: none; }
  .stickybar__cta { flex: 1; padding: 14px 8px; font-size: 14px; }
}

/* Narrowest phones only: shrink the trait row just enough that all three fit on
   one line, so no separator starts or ends a line. */
@media (max-width: 350px) {
  .traits { font-size: 11.5px; letter-spacing: .05em; }
  .traits span + span::before { margin: 0 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .card:hover { transform: none; }
}