/* ============================================================
   Livingstone Concrete - homepage concept
   Morello Web, Oct 2026
   Design language: "control joint" - the saw-cut lines that stop
   a slab cracking become the layout grid. Charcoal + bone +
   one rust accent pulled from their own logo mark.
   ============================================================ */

/* ---------- tokens ----------
   Reds and blues are Livingstone's EXACT existing brand values, lifted from
   their live theme CSS: #F13D15 button, #224B89 button hover, #F26554 coral,
   #1F2834 and #272A2F darks. Nothing here is reinterpreted.                */
:root {
  /* ground */
  --ink:        #101519;   /* deepest ground, sits under their #1F2834 */
  --graphite:   #1F2834;   /* theirs, exact */
  --steel:      #272A2F;   /* theirs, exact */
  --slate:      #5C6872;
  --concrete:   #B4AEA4;
  --bone:       #F5F2EC;
  --bone-dim:   #E7E2D9;
  --paper:      #FFFFFF;

  /* brand - exact */
  --red:        #F13D15;   /* theirs, exact */
  --red-lift:   #F26554;   /* theirs, exact */
  --blue:       #224B89;   /* theirs, exact */
  --blue-deep:  #16315C;   /* #224B89 darkened for section grounds */
  --blue-lift:  #3566AE;

  /* legacy aliases so every existing rule maps to the exact brand values */
  --rust:       var(--red);
  --rust-lift:  var(--red-lift);
  --rust-deep:  #C02F0E;

  /* type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --accent:  "Fraunces", Georgia, serif;

  /* rhythm */
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1320px;
  --section-y: clamp(72px, 10vw, 148px);

  /* joint lines */
  --joint: rgba(255, 255, 255, 0.07);
  --joint-dark: rgba(15, 19, 22, 0.10);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -0.032em; line-height: 1.02; margin: 0; }
p { margin: 0; }
figure, blockquote { margin: 0; }

/* ---------- utilities ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--bone); padding: 14px 20px; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }
:focus-visible { outline: 2px solid var(--rust-lift); outline-offset: 3px; }

/* spec label - the small technical caption voice */
.spec {
  font-family: var(--display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rust);
  display: inline-flex; align-items: flex-start; gap: 10px;
}
.spec::before {
  content: ""; flex: none; width: 26px; height: 1px; margin-top: .72em;
  background: var(--rust); opacity: .8;
}
.spec--light { color: var(--rust-lift); }
.spec--light::before { background: var(--rust-lift); }

/* concrete grain */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  padding: 17px 30px;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: 0.015em;
  border-radius: 2px;
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
  position: relative; overflow: hidden;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--rust { background: var(--rust); color: #fff; }
.btn--rust:hover { background: var(--rust-lift); }
.btn--ink { background: var(--ink); color: var(--bone); }
.btn--ink:hover { background: var(--steel); }
.btn--ghost {
  border: 1px solid rgba(245,242,236,.3); color: var(--bone);
}
.btn--ghost:hover { background: rgba(245,242,236,.1); border-color: rgba(245,242,236,.55); }
.btn--ghost-dark { border: 1px solid rgba(15,19,22,.22); color: var(--ink); }
.btn--ghost-dark:hover { background: rgba(15,19,22,.05); border-color: rgba(15,19,22,.45); }

/* ============================================================
   HEADER
   ============================================================ */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  background: rgba(15,19,22,.93);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: rgba(245,242,236,.1);
}
.hdr__in {
  display: flex; align-items: center; gap: 28px;
  height: 96px;
}
.hdr.is-stuck .hdr__in { height: 78px; }
.hdr__in { transition: height .45s var(--ease); }
.hdr__logo { flex: none; }
/* The logo carries the licence text and the little man, both of which are
   unreadable small, so it is given most of the header height rather than
   sitting politely inside it. */
.hdr__logo img { height: 60px; width: auto; transition: height .45s var(--ease); }
.hdr.is-stuck .hdr__logo img { height: 50px; }

.nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav a {
  font-family: var(--display); font-size: 14px; font-weight: 600;
  color: rgba(245,242,236,.82); letter-spacing: .005em;
  position: relative; padding-block: 6px;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--rust-lift); transition: width .35s var(--ease);
}
.nav a:hover { color: var(--bone); }
.nav a:hover::after { width: 100%; }

.hdr__call {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  color: var(--bone); padding: 11px 20px; border-radius: 2px;
  background: var(--rust);
  transition: background .3s var(--ease);
}
.hdr__call:hover { background: var(--rust-lift); }
.hdr__call svg { width: 15px; height: 15px; }

.burger { display: none; margin-left: auto; width: 46px; height: 46px; align-items: center; justify-content: center; }
.burger span { display: block; width: 24px; height: 2px; background: var(--bone); position: relative; transition: background .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: var(--bone);
  transition: transform .35s var(--ease);
}
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; background: var(--ink); color: var(--bone);
  padding-top: 84px;
  overflow: hidden;
}
/* control joints - the saw cuts */
.hero__joints { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__joints i {
  position: absolute; top: 0; bottom: 0; width: 1px; background: var(--joint);
}
.hero__joints i:nth-child(1) { left: 16%; }
.hero__joints i:nth-child(2) { left: 38%; }
.hero__joints i:nth-child(3) { left: 61%; }
.hero__joints i:nth-child(4) { left: 83%; }
.hero__joints b {
  position: absolute; left: 0; right: 0; height: 1px; background: var(--joint);
}
.hero__joints b:nth-of-type(1) { top: 30%; }
.hero__joints b:nth-of-type(2) { top: 72%; }

.hero__grid {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(56px, 8vw, 104px) 0;
}
.hero__copy { max-width: 640px; }

.hero h1 {
  /* capped so "Sunshine Coast" holds on one line in the hero column
     rather than breaking after "Sunshine" */
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: .96;
  margin: 24px 0 0;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal; display: block; color: var(--concrete);
}
.hero h1 .rust { color: var(--rust-lift); }

.hero__sub {
  margin-top: 26px; font-size: clamp(16px, 1.6vw, 19px);
  color: rgba(245,242,236,.72); max-width: 52ch; line-height: 1.6;
}
.hero__sub strong { color: var(--bone); font-weight: 600; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* hero image panel */
.hero__panel { position: relative; }
.hero__fig {
  position: relative; aspect-ratio: 1 / 1.22; overflow: hidden;
  border-radius: 2px;
}
.hero__fig img { width: 100%; height: 100%; object-fit: cover; }
.hero__fig::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(15,19,22,0) 42%, rgba(15,19,22,.62) 100%);
}
/* caption plate */
.hero__plate {
  position: absolute; left: -1px; bottom: 26px; z-index: 4;
  background: var(--ink); border-left: 2px solid var(--rust);
  padding: 15px 22px 15px 20px;
}
.hero__plate .k {
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--slate);
}
.hero__plate .v { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--bone); margin-top: 3px; }

/* trust strip */
.hero__strip {
  position: relative; z-index: 3;
  margin-top: clamp(44px, 6vw, 76px);
  border-top: 1px solid rgba(245,242,236,.12);
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.hero__strip > div {
  padding: 26px 24px 30px;
  border-right: 1px solid rgba(245,242,236,.12);
}
.hero__strip > div:last-child { border-right: 0; }
.hero__strip .n {
  font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -.03em; color: var(--bone); line-height: 1;
}
/* offset the unit with position, not vertical-align: super, which otherwise
   inflates the line box and leaves a dead gap under every number */
.hero__strip .n sup {
  font-size: .5em; color: var(--rust-lift);
  vertical-align: baseline; position: relative; top: -.62em;
}
.hero__strip .l {
  font-size: 12.5px; color: rgba(245,242,236,.56); margin-top: 8px; line-height: 1.4;
}

/* ============================================================
   SECTION FURNITURE
   ============================================================ */
.sec { padding-block: var(--section-y); position: relative; }
.sec--ink { background: var(--ink); color: var(--bone); }
.sec--graphite { background: var(--graphite); color: var(--bone); }
.sec--bone { background: var(--bone); }
.sec--paper { background: var(--paper); }

.sec__head { max-width: 760px; }
.sec__head h2 {
  font-size: clamp(30px, 4.1vw, 54px); margin-top: 20px; line-height: 1.02;
}
.sec__head p { margin-top: 20px; font-size: 17.5px; color: var(--slate); max-width: 60ch; }
.sec--ink .sec__head p, .sec--graphite .sec__head p { color: rgba(245,242,236,.68); }

/* joint divider */
.joint-rule {
  height: 1px; background: var(--joint-dark); position: relative;
}
.sec--ink .joint-rule, .sec--graphite .joint-rule { background: var(--joint); }
.joint-rule::before, .joint-rule::after {
  content: ""; position: absolute; top: -3px; width: 7px; height: 7px;
  border: 1px solid var(--rust); transform: rotate(45deg); background: transparent;
}
.joint-rule::before { left: 16%; }
.joint-rule::after  { left: 61%; }

/* ============================================================
   UNDER THE SLAB (the differentiator)
   ============================================================ */
.slab { position: relative; overflow: hidden; }
.slab__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 86px);
  align-items: start;
}
.slab__pts { margin-top: 44px; display: grid; gap: 2px; }
.slab__pt {
  display: grid; grid-template-columns: 58px 1fr; gap: 20px;
  padding: 26px 0; border-top: 1px solid var(--joint);
}
.slab__pt:last-child { border-bottom: 1px solid var(--joint); }
.slab__pt .num {
  font-family: var(--display); font-weight: 800; font-size: 13px;
  letter-spacing: .12em; color: var(--rust-lift); padding-top: 4px;
}
.slab__pt h3 { font-size: 20px; letter-spacing: -.02em; }
.slab__pt p { margin-top: 9px; color: rgba(245,242,236,.64); font-size: 15.5px; line-height: 1.6; }

.slab__fig { position: relative; }
.slab__fig img { width: 100%; height: auto; border-radius: 2px; }
.slab__quote {
  margin-top: 28px; padding: 30px 32px;
  background: var(--steel); border-left: 2px solid var(--rust);
}
.slab__quote p {
  font-family: var(--accent); font-style: italic; font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.38; color: var(--bone);
}
.slab__quote cite {
  display: block; margin-top: 16px; font-family: var(--display); font-style: normal;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--concrete);
}

/* ============================================================
   WHAT WE POUR - service grid
   ============================================================ */
.pour__grid {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--joint-dark); border-left: 1px solid var(--joint-dark);
}
.pour__card {
  border-right: 1px solid var(--joint-dark); border-bottom: 1px solid var(--joint-dark);
  padding: 34px 30px 38px; min-height: 230px;
  display: flex; flex-direction: column;
  position: relative; background: var(--bone);
  transition: background .4s var(--ease);
}
.pour__card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 0;
  background: var(--rust); transition: height .45s var(--ease);
}
.pour__card:hover { background: var(--paper); }
.pour__card:hover::before { height: 100%; }
.pour__card .ix {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; color: var(--concrete);
}
.pour__card h3 { font-size: 21px; margin-top: 20px; letter-spacing: -.025em; }
.pour__card p { margin-top: 11px; font-size: 14.5px; color: var(--slate); line-height: 1.58; }
.pour__card .go {
  margin-top: auto; padding-top: 22px;
  font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .06em;
  color: var(--rust); display: inline-flex; align-items: center; gap: 8px;
}
.pour__card .go svg { width: 13px; height: 13px; transition: transform .35s var(--ease); }
.pour__card:hover .go svg { transform: translateX(4px); }

/* ============================================================
   FINISHES - interactive selector
   ============================================================ */
.fin { position: relative; overflow: hidden; }
.fin__grid {
  margin-top: 54px;
  display: grid; grid-template-columns: 420px 1fr; gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
}
.fin__list { display: flex; flex-direction: column; border-top: 1px solid var(--joint); }
.fin__btn {
  text-align: left; width: 100%;
  padding: 22px 20px 22px 0; border-bottom: 1px solid var(--joint);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  position: relative; transition: padding-left .4s var(--ease);
}
.fin__btn::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 0; height: 2px; background: var(--rust); transition: width .4s var(--ease);
}
.fin__btn .ttl {
  font-family: var(--display); font-weight: 700; font-size: clamp(18px, 2vw, 23px);
  letter-spacing: -.025em; color: rgba(245,242,236,.46);
  transition: color .4s var(--ease);
}
.fin__btn .meta {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  font-family: var(--display); font-weight: 600; color: rgba(245,242,236,.28);
  transition: color .4s var(--ease);
}
.fin__btn:hover .ttl { color: rgba(245,242,236,.78); }
.fin__btn[aria-selected="true"] { padding-left: 26px; }
.fin__btn[aria-selected="true"]::before { width: 16px; }
.fin__btn[aria-selected="true"] .ttl { color: var(--bone); }
.fin__btn[aria-selected="true"] .meta { color: var(--rust-lift); }

.fin__stage { position: relative; min-height: 460px; border-radius: 2px; overflow: hidden; background: var(--steel); }
.fin__pane {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), transform .8s var(--ease);
  transform: scale(1.04);
}
.fin__pane.is-on { opacity: 1; visibility: visible; transform: scale(1); }
.fin__pane img { width: 100%; height: 100%; object-fit: cover; }
.fin__pane::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,19,22,.30) 0%, rgba(15,19,22,0) 34%),
    linear-gradient(180deg, rgba(15,19,22,0) 38%, rgba(15,19,22,.72) 72%, rgba(15,19,22,.93) 100%);
}
.fin__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 32px clamp(24px, 3vw, 40px);
}
.fin__cap h3 { font-size: clamp(22px, 2.6vw, 30px); color: var(--bone); }
.fin__cap p { margin-top: 10px; font-size: 15px; color: rgba(245,242,236,.76); max-width: 52ch; }
.fin__cap .tag {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  background: var(--rust-lift); padding: 5px 11px;
}

/* ============================================================
   PROCESS
   ============================================================ */
.proc__grid {
  margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--joint-dark);
}
.proc__step { background: var(--bone); padding: 36px 28px 40px; position: relative; }
.proc__step .n {
  font-family: var(--display); font-weight: 800; font-size: 52px; line-height: 1;
  color: var(--bone-dim); letter-spacing: -.04em;
}
.proc__step h3 { font-size: 19px; margin-top: 14px; letter-spacing: -.02em; }
.proc__step p { margin-top: 11px; font-size: 14.5px; color: var(--slate); line-height: 1.58; }

/* ============================================================
   REVIEWS
   ============================================================ */
.rev__top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 40px; justify-content: space-between; }
.rev__score { display: flex; align-items: center; gap: 20px; }
.rev__score .big {
  font-family: var(--display); font-weight: 800; font-size: 62px; line-height: 1;
  letter-spacing: -.04em; color: var(--bone);
}
.rev__stars { display: flex; gap: 3px; }
.rev__stars svg { width: 17px; height: 17px; fill: var(--rust-lift); }
.rev__score .sub { font-size: 13.5px; color: rgba(245,242,236,.6); margin-top: 7px; }

.rev__grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--joint); }
.rev__card { background: var(--graphite); padding: 36px 32px 34px; display: flex; flex-direction: column; }
.rev__card .q { font-size: 16px; line-height: 1.62; color: rgba(245,242,236,.86); }
.rev__card .by {
  margin-top: auto; padding-top: 26px;
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--concrete);
}

/* ============================================================
   SERVICE AREA
   ============================================================ */
.area__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.area__cols { columns: 3; column-gap: 28px; margin-top: 8px; }
.area__cols a {
  display: block; padding: 10px 0; font-size: 15px; color: var(--slate);
  border-bottom: 1px solid var(--joint-dark); break-inside: avoid;
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.area__cols a:hover { color: var(--rust); padding-left: 7px; }
.area__note { margin-top: 30px; font-size: 14.5px; color: var(--slate); }

/* ============================================================
   CTA
   ============================================================ */
.cta { position: relative; background: var(--ink); color: var(--bone); overflow: hidden; }
.cta__bg { position: absolute; inset: 0; z-index: 0; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.cta__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 18%, rgba(15,19,22,.55) 100%); }
.cta__in { position: relative; z-index: 3; padding-block: clamp(72px, 9vw, 128px); }
.cta h2 { font-size: clamp(32px, 4.6vw, 60px); max-width: 17ch; margin-top: 20px; }
.cta p { margin-top: 22px; font-size: 18px; color: rgba(245,242,236,.74); max-width: 48ch; }
.cta__row { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cta__or { font-size: 14px; color: rgba(245,242,236,.5); }

/* ============================================================
   FOOTER
   ============================================================ */
.ftr { background: var(--graphite); color: var(--bone); padding-block: clamp(56px, 7vw, 84px) 0; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: clamp(28px, 4vw, 56px); }
.ftr__logo img { height: 44px; width: auto; }
.ftr__blurb { margin-top: 22px; font-size: 14.5px; color: rgba(245,242,236,.62); line-height: 1.62; max-width: 34ch; }
.ftr h4 {
  font-family: var(--display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--rust-lift);
}
.ftr ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; }
.ftr ul a, .ftr ul li { font-size: 14.5px; color: rgba(245,242,236,.7); transition: color .3s var(--ease); }
.ftr ul a:hover { color: var(--bone); }
.ftr__hours { display: grid; gap: 9px; margin-top: 20px; }
.ftr__hours div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: rgba(245,242,236,.7); }
.ftr__hours div span:last-child { color: rgba(245,242,236,.5); font-variant-numeric: tabular-nums; }
.ftr__lic {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--joint);
  display: grid; gap: 7px; font-size: 13px; color: rgba(245,242,236,.55);
  font-variant-numeric: tabular-nums;
}
.ftr__bot {
  margin-top: clamp(44px, 5vw, 64px); border-top: 1px solid var(--joint);
  padding-block: 26px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: 13px; color: rgba(245,242,236,.45);
}

/* ---------- reveal ---------- */
[data-rise] { opacity: 0; transform: translateY(22px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
[data-rise].is-in { opacity: 1; transform: none; }

/* ---------- mobile call bar ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; grid-template-columns: 1fr 1fr;
  background: var(--ink); border-top: 1px solid rgba(245,242,236,.14);
}
.callbar a {
  padding: 16px 10px; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 14.5px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.callbar a svg { width: 15px; height: 15px; }
.callbar a:first-child { color: var(--bone); border-right: 1px solid rgba(245,242,236,.14); }
.callbar a:last-child { background: var(--rust); color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .pour__grid { grid-template-columns: repeat(2, 1fr); }
  .proc__grid { grid-template-columns: repeat(2, 1fr); }
  .fin__grid { grid-template-columns: 340px 1fr; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .area__cols { columns: 2; }
}

@media (max-width: 900px) {
  .nav, .hdr__call { display: none; }
  .burger { display: flex; }
  .hero__grid { grid-template-columns: 1fr; padding-top: 40px; }
  .hero__panel { order: -1; }
  .hero__fig { aspect-ratio: 16 / 11; }
  .hero__plate { bottom: 18px; }
  .hero__strip { grid-template-columns: repeat(2, 1fr); }
  .hero__strip > div:nth-child(5) { grid-column: 1 / -1; border-right: 0; }
  .hero__strip > div:nth-child(2n) { border-right: 0; }
  .slab__grid, .area__grid { grid-template-columns: 1fr; }
  .fin__grid { grid-template-columns: 1fr; }
  .fin__stage { min-height: 380px; }
  .rev__grid { grid-template-columns: 1fr; }
  .callbar { display: grid; }
  body { padding-bottom: 56px; }
  .hero__strip > div { padding: 20px 16px 22px; }
  .hero__strip .l { font-size: 12px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .pour__grid { grid-template-columns: 1fr; }
  .proc__grid { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: 1fr; }
  .area__cols { columns: 2; column-gap: 18px; }
  .hero__strip { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: clamp(34px, 10vw, 48px); }
  .rev__score .big { font-size: 48px; }
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: 11px; }
  .hero__cta .btn { width: 100%; }
}

/* ---------- mobile drawer ---------- */
.drawer {
  position: fixed; inset: 0; z-index: 99; background: var(--ink);
  padding: 104px var(--gutter) 40px;
  transform: translateY(-100%); transition: transform .5s var(--ease);
  overflow-y: auto;
}
.drawer.is-open { transform: none; }
.drawer a {
  display: block; padding: 20px 0; border-bottom: 1px solid var(--joint);
  font-family: var(--display); font-weight: 700; font-size: 24px;
  letter-spacing: -.025em; color: var(--bone);
}
.drawer .drawer__cta { margin-top: 32px; display: grid; gap: 12px; }
.drawer .drawer__cta .btn { width: 100%; }

/* ============================================================
   ADDITIONS - review widget, horizontal work scroller,
   service card media, and Livingstone blue brought in
   ============================================================ */

/* shared heading helpers (replace the old inline styles) */
.h2 { font-size: clamp(30px, 4.1vw, 54px); margin-top: 20px; line-height: 1.02; }
.lede { margin-top: 20px; font-size: 17.5px; color: var(--slate); max-width: 60ch; }
.lede--light { color: rgba(245,242,236,.68); }

/* their logo is a flat plate with a concrete background baked in - give it
   a defined edge so it reads as a deliberate sign rather than a stray box */
.hdr__logo img, .ftr__logo img {
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(245,242,236,.10);
}

/* --- their blue, used as the credibility ground --- */
.sec--graphite.slab { background: var(--blue-deep); }
.sec--graphite.slab .slab__quote { background: rgba(16,21,25,.42); border-left-color: var(--red); }
.sec--graphite.slab .slab__pt { border-top-color: rgba(245,242,236,.14); }
.sec--graphite.slab .slab__pt:last-child { border-bottom-color: rgba(245,242,236,.14); }
.btn--ghost:hover { background: rgba(34,75,137,.42); border-color: var(--blue-lift); }

/* ============================================================
   ROTATING REVIEW WIDGET (hero)
   ============================================================ */
.rw {
  margin-top: 34px; max-width: 460px;
  border: 1px solid rgba(245,242,236,.14);
  border-left: 2px solid var(--red);
  background: rgba(31,40,52,.5);
  backdrop-filter: blur(6px);
  padding: 18px 22px 16px;
  border-radius: 2px;
}
.rw__head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.rw__stars { display: flex; gap: 2px; }
.rw__stars svg { width: 15px; height: 15px; fill: var(--red-lift); }
.rw__score { font-size: 13px; color: rgba(245,242,236,.62); }
.rw__score b { font-family: var(--display); font-weight: 800; color: var(--bone); font-size: 15px; }

.rw__stage { position: relative; margin-top: 12px; min-height: 76px; }
.rw__item {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility .55s;
}
.rw__item.is-on { opacity: 1; visibility: visible; transform: none; }
.rw__item blockquote {
  margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(245,242,236,.9);
}
.rw__item figcaption {
  margin-top: 9px; font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--concrete);
}
.rw__dots { display: flex; gap: 7px; margin-top: 12px; }
.rw__dots button {
  width: 22px; height: 3px; border-radius: 2px;
  background: rgba(245,242,236,.22); padding: 0;
  transition: background .35s var(--ease);
}
.rw__dots button[aria-selected="true"] { background: var(--red); }
.rw__dots button:hover { background: rgba(245,242,236,.45); }

/* ============================================================
   SERVICE CARD MEDIA
   ============================================================ */
.pour__card { padding: 0; min-height: 0; overflow: hidden; }
.pour__media {
  display: block; position: relative; aspect-ratio: 640 / 420;
  overflow: hidden; background: var(--steel);
}
.pour__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease), filter .6s var(--ease);
  filter: saturate(.92);
}
.pour__card:hover .pour__media img { transform: scale(1.055); filter: saturate(1.05); }
.pour__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,21,25,0) 55%, rgba(16,21,25,.3) 100%);
}
/* cards with no honest photo yet - deliberate texture panel, never a stock stand-in */
.pour__media--none {
  background: linear-gradient(145deg, var(--graphite), var(--steel));
  display: grid; place-items: center;
}
.pour__ghost {
  font-family: var(--display); font-weight: 800; font-size: 70px;
  letter-spacing: -.05em; color: rgba(245,242,236,.07);
}
.pour__body { display: flex; flex-direction: column; flex: 1; padding: 28px 28px 32px; }
.pour__card .go { margin-top: auto; padding-top: 20px; }

/* ============================================================
   HORIZONTAL WORK SCROLLER
   ============================================================ */
.hsx { position: relative; background: var(--ink); color: var(--bone); }
.hsx__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.hsx__inner { width: 100%; }
.hsx__intro {
  padding-inline: var(--gutter); max-width: var(--maxw);
  margin-inline: auto; width: 100%; margin-bottom: 34px;
}
.hsx__intro h2 { font-size: clamp(28px, 3.6vw, 46px); margin-top: 18px; }
.hsx__intro p { margin-top: 14px; color: rgba(245,242,236,.6); font-size: 16px; }
.hsx__hint {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(245,242,236,.4);
}
.hsx__hint svg { width: 16px; height: 16px; animation: nudge 1.9s var(--ease) infinite; }
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

.hsx__track {
  display: flex; gap: 22px; padding-inline: var(--gutter);
  will-change: transform;
}
.hsx__card {
  flex: none; width: clamp(240px, 27vw, 340px); margin: 0;
  position: relative; border-radius: 2px; overflow: hidden; background: var(--steel);
}
.hsx__card img { width: 100%; height: clamp(300px, 42vh, 430px); object-fit: cover; }
.hsx__card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 20px 18px;
  background: linear-gradient(180deg, rgba(16,21,25,0), rgba(16,21,25,.92));
}
.hsx__card figcaption .k {
  display: block; font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--red-lift);
}
.hsx__card figcaption .v {
  display: block; margin-top: 5px; font-family: var(--display);
  font-weight: 700; font-size: 15px; color: var(--bone);
}
.hsx__card--cta {
  background: var(--blue); display: grid; place-items: center;
  height: clamp(300px, 42vh, 430px); padding: 28px;
}
.hsx__card--cta h3 { font-size: 24px; margin-top: 16px; color: var(--bone); }
.hsx__card--cta p { margin-top: 10px; font-size: 14.5px; color: rgba(245,242,236,.76); }
.hsx__card--cta .btn { margin-top: 22px; }

.hsx__bar {
  max-width: var(--maxw); margin: 32px auto 0; width: 100%;
  padding-inline: var(--gutter);
}
.hsx__bar i {
  display: block; height: 2px; width: 0; background: var(--red);
  box-shadow: 0 0 0 1px rgba(245,242,236,.08);
}

/* no sticky-scroll trick on small screens or for reduced motion:
   fall back to an honest swipeable rail */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .hsx { height: auto !important; }
  .hsx__sticky { position: static; height: auto; padding-block: var(--section-y); }
  .hsx__track {
    overflow-x: auto; scroll-snap-type: x mandatory;
    transform: none !important; padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .hsx__card { scroll-snap-align: start; width: min(76vw, 320px); }
  .hsx__bar { display: none; }
  .hsx__hint svg { animation: none; }
}

/* ============================================================
   CHATBOT - conversational lead capture
   Ported from the Morello landing-page system (~/Sites/morello-landing-pages
   lvg/chatbot.js) so it behaves identically to Fresh Fencing / Abode,
   restyled in Livingstone's exact brand colours.
   ============================================================ */
.chat-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 13px 20px 13px 15px; border-radius: 999px;
  background: var(--red); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 14.5px;
  box-shadow: 0 14px 34px -10px rgba(241,61,21,.65);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.chat-launcher:hover { transform: translateY(-3px); background: var(--red-lift); }
.chat-launcher.hidden { display: none; }
.chat-launcher__label { white-space: nowrap; }
.chat-launcher__pulse {
  position: absolute; inset: 0; border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(241,61,21,.55); animation: cpulse 2.4s infinite;
}
@keyframes cpulse {
  0%   { box-shadow: 0 0 0 0 rgba(241,61,21,.5); }
  70%  { box-shadow: 0 0 0 16px rgba(241,61,21,0); }
  100% { box-shadow: 0 0 0 0 rgba(241,61,21,0); }
}

.chat {
  position: fixed; right: 22px; bottom: 22px; z-index: 71;
  width: min(390px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 44px));
  background: var(--graphite);
  border: 1px solid rgba(245,242,236,.14);
  border-radius: 4px;
  box-shadow: 0 34px 90px -22px rgba(0,0,0,.78);
  display: none; flex-direction: column; overflow: hidden;
}
.chat.open { display: flex; animation: chatin .32s var(--ease); }
@keyframes chatin { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

.chat__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 17px; background: var(--blue-deep);
  border-bottom: 1px solid rgba(245,242,236,.12);
}
.chat__head-id { display: flex; align-items: center; gap: 12px; color: var(--bone); }
.chat__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--red); display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 16px; color: #fff;
}
.chat__head-id b { font-size: 14.5px; display: block; font-family: var(--display); }
.chat__status {
  font-size: 11.5px; color: var(--red-lift);
  display: inline-flex; align-items: center; gap: 6px;
}
.chat__status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,.18);
}
.chat__close { color: var(--bone); font-size: 26px; line-height: 1; opacity: .65; padding: 0 4px; }
.chat__close:hover { opacity: 1; }

.chat__progress { height: 3px; background: rgba(245,242,236,.08); }
.chat__progress-bar { height: 100%; background: var(--red); width: 0; transition: width .45s var(--ease); }

.chat__body {
  flex: 1; overflow-y: auto; padding: 18px;
  display: flex; flex-direction: column; gap: 11px;
}
.msg {
  max-width: 85%; padding: 11px 15px; font-size: 14.5px; line-height: 1.5;
  border-radius: 14px;
}
.msg--bot  { align-self: flex-start; background: var(--steel); color: rgba(245,242,236,.93); border-bottom-left-radius: 4px; }
.msg--user { align-self: flex-end;  background: var(--blue);  color: #fff; border-bottom-right-radius: 4px; }
.typing { display: flex; gap: 4px; align-items: center; padding: 14px 16px; }
.typing span {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(245,242,236,.5);
  animation: blink 1.3s infinite;
}
.typing span:nth-child(2) { animation-delay: .18s; }
.typing span:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

.chat__input { padding: 14px; border-top: 1px solid rgba(245,242,236,.12); background: var(--steel); }
.chat-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-chip {
  padding: 9px 15px; border-radius: 999px;
  border: 1.5px solid var(--red); background: transparent; color: var(--red-lift);
  font-size: 13.5px; font-weight: 600; transition: background .2s, color .2s;
}
.chat-chip:hover { background: var(--red); color: #fff; }
.chat-field { display: flex; gap: 8px; }
.chat-field input {
  flex: 1; padding: 12px 15px; border-radius: 999px;
  border: 1.5px solid rgba(245,242,236,.18); background: rgba(245,242,236,.06);
  color: var(--bone); font-size: 14.5px; outline: none; font-family: var(--body);
}
.chat-field input:focus { border-color: var(--red); }
.chat-field input::placeholder { color: rgba(245,242,236,.38); }
.chat-send {
  flex: none; width: 46px; border-radius: 50%; background: var(--red);
  color: #fff; font-size: 18px; display: grid; place-items: center;
}
.chat-send:hover { background: var(--red-lift); }
.chat__done { text-align: center; padding: 6px 0 2px; }
.chat__done .tick {
  width: 46px; height: 46px; border-radius: 50%; background: var(--red);
  display: grid; place-items: center; margin: 0 auto 12px;
}
.chat__done .tick svg { width: 22px; height: 22px; stroke: #fff; }

@media (max-width: 900px) {
  .chat-launcher { right: 16px; bottom: 74px; padding: 13px; }
  .chat-launcher__label { display: none; }
  .chat { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}

/* ============================================================
   INTERACTIVE SLAB CROSS-SECTION
   The page argues that the invisible work is what you pay for,
   so this lets you actually look at it. Specs are the real ones
   from the quoting engine, not decoration.
   ============================================================ */
.slab__head { max-width: 780px; }
.slab .slab__quote { margin-top: 46px; max-width: 760px; }

.xs { margin-top: 44px; }

.xs__controls { display: flex; flex-wrap: wrap; gap: 10px; }
.xs__chip {
  text-align: left; padding: 14px 20px; border-radius: 2px;
  border: 1px solid rgba(245,242,236,.18);
  background: rgba(16,21,25,.3);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.xs__chip .t {
  display: block; font-family: var(--display); font-weight: 700; font-size: 15.5px;
  color: rgba(245,242,236,.66); transition: color .3s var(--ease);
}
.xs__chip .s {
  display: block; margin-top: 3px; font-size: 12px;
  color: rgba(245,242,236,.36); transition: color .3s var(--ease);
}
.xs__chip:hover { border-color: rgba(245,242,236,.4); }
.xs__chip[aria-selected="true"] {
  background: var(--red); border-color: var(--red);
}
.xs__chip[aria-selected="true"] .t { color: #fff; }
.xs__chip[aria-selected="true"] .s { color: rgba(255,255,255,.76); }

.xs__stage {
  position: relative; margin-top: 22px;
  background: rgba(16,21,25,.42);
  border: 1px solid rgba(245,242,236,.12);
  border-radius: 2px; overflow: hidden;
}
.xs__svg { display: block; width: 100%; height: auto; }

/* geometry properties animate in modern browsers; if they do not, the
   layout still lands on the right numbers, it just snaps */
.xs__svg rect, .xs__svg line, .xs__svg path, .xs__svg text, .xs__svg g {
  transition: y .55s var(--ease), height .55s var(--ease),
              x1 .55s var(--ease), x2 .55s var(--ease),
              y1 .55s var(--ease), y2 .55s var(--ease),
              d .55s var(--ease), opacity .4s var(--ease),
              transform .55s var(--ease);
}
.xs__layer { cursor: pointer; }
.xs__layer.is-dim { opacity: .34; }
.xs__layer.is-hot { filter: brightness(1.12); }

.xs__hint {
  position: absolute; right: 14px; top: 14px;
  font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(245,242,236,.42);
  border: 1px solid rgba(245,242,236,.18);
  padding: 6px 11px; border-radius: 2px;
  pointer-events: none;
}
.xs__hint.is-gone { opacity: 0; }

.xs__readout {
  margin-top: 2px; display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(245,242,236,.12); border-top: 0;
}
.xs__spec { padding: 18px 20px; border-right: 1px solid rgba(245,242,236,.12); }
.xs__spec:last-child { border-right: 0; }
.xs__spec .k {
  display: block; font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(245,242,236,.42);
}
.xs__spec b {
  display: block; margin-top: 7px; font-family: var(--display); font-weight: 800;
  font-size: 20px; letter-spacing: -.02em; color: var(--bone);
}

.xs__detail {
  margin-top: 22px; padding: 24px 26px;
  background: rgba(16,21,25,.42); border-left: 2px solid var(--red);
  min-height: 118px;
}
.xs__detail p {
  margin-top: 12px; font-size: 15.5px; line-height: 1.62;
  color: rgba(245,242,236,.76); max-width: 72ch;
}
.xs__note {
  margin-top: 18px; font-size: 13.5px; color: rgba(245,242,236,.44); max-width: 66ch;
}

@media (max-width: 900px) {
  .xs__readout { grid-template-columns: 1fr 1fr; }
  .xs__spec:nth-child(2) { border-right: 0; }
  .xs__spec:nth-child(1), .xs__spec:nth-child(2) { border-bottom: 1px solid rgba(245,242,236,.12); }
  .xs__chip { flex: 1 1 100%; }
  .xs__hint { display: none; }
}

/* ============================================================
   ACCREDITATION BADGES (their real HIA + QBCC marks)
   ============================================================ */
.accred {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 38px);
  flex-wrap: wrap;
}
.accred__item { display: flex; align-items: center; gap: 13px; }
.accred__item img { height: 46px; width: auto; }
.accred__item img.qbcc { height: 30px; }
.accred__txt {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(245,242,236,.48); line-height: 1.5;
}
.accred__txt b { display: block; color: rgba(245,242,236,.8); letter-spacing: .1em; }
.accred--strip {
  grid-column: 1 / -1; padding: 22px 24px 24px;
  border-top: 1px solid rgba(245,242,236,.12);
}
.ftr .accred { margin-top: 24px; }
.ftr .accred__item img { height: 38px; }
.ftr .accred__item img.qbcc { height: 24px; }

/* ============================================================
   HERO SLIDESHOW
   Crossfade with a slow drift, so it reads as a considered
   gallery rather than a carousel. Caption plate changes with it.
   ============================================================ */
.hero__fig { position: relative; }
.hero__slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.15s var(--ease), visibility 1.15s;
}
.hero__slide:first-child { position: relative; }
.hero__slide.is-on { opacity: 1; visibility: visible; }
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.005);
}
/* the drift only runs on the slide that is showing */
.hero__slide.is-on img { animation: heroDrift 7.6s linear forwards; }
@keyframes heroDrift {
  from { transform: scale(1.005); }
  to   { transform: scale(1.075); }
}

/* caption plate swaps text with the slide */
.hero__plate { transition: opacity .3s var(--ease); }
.hero__plate.is-swapping { opacity: 0; }

/* slim indicators, bottom right of the frame */
.hero__ticks {
  position: absolute; right: 18px; bottom: 24px; z-index: 5;
  display: flex; gap: 7px;
}
.hero__ticks button { padding: 8px 0; }
.hero__ticks i {
  display: block; width: 30px; height: 3px; border-radius: 2px;
  background: rgba(245,242,236,.32);
  position: relative; overflow: hidden;
}
.hero__ticks button[aria-selected="true"] i { background: rgba(245,242,236,.28); }
.hero__ticks button[aria-selected="true"] i::after {
  content: ""; position: absolute; inset: 0; width: 0;
  background: var(--red);
  animation: tickFill 7.6s linear forwards;
}
@keyframes tickFill { from { width: 0; } to { width: 100%; } }
.hero__ticks button:hover i { background: rgba(245,242,236,.55); }

@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-on img { animation: none; transform: none; }
  .hero__ticks button[aria-selected="true"] i::after { animation: none; width: 100%; }
}
@media (max-width: 560px) {
  .hero__ticks { right: 12px; bottom: 14px; }
  .hero__ticks i { width: 22px; }
}

/* ============================================================
   RECENT WORK - larger cards, longer travel, split intro
   Previously the rail ran out of road almost as soon as it
   pinned. Bigger cards and one more job give it real distance.
   ============================================================ */
.hsx__intro {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(24px, 4vw, 70px); align-items: end;
  margin-bottom: clamp(26px, 3.4vw, 44px);
}
.hsx__intro h2 { font-size: clamp(30px, 4vw, 54px); margin-top: 18px; }
.hsx__introR p {
  font-size: 16.5px; line-height: 1.6; color: rgba(245,242,236,.66); max-width: 46ch;
}
.hsx__hint { margin-top: 18px; }

.hsx__track { gap: clamp(16px, 1.8vw, 26px); }

.hsx__card {
  width: clamp(260px, 30vw, 420px);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.9);
}
.hsx__card img {
  height: clamp(330px, 50vh, 520px);
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
  filter: saturate(.94);
}
.hsx__card:hover img { transform: scale(1.05); filter: saturate(1.06); }

.hsx__card figcaption {
  padding: 26px 24px 22px;
  background: linear-gradient(180deg, rgba(16,21,25,0), rgba(16,21,25,.62) 45%, rgba(16,21,25,.95));
}
.hsx__card figcaption .v { font-size: 17px; margin-top: 6px; }

.hsx__card--cta {
  height: clamp(330px, 50vh, 520px);
  width: clamp(260px, 30vw, 420px);
  padding: 34px;
}
.hsx__card--cta h3 { font-size: clamp(22px, 2.4vw, 28px); }
.hsx__card--cta p { font-size: 15px; }

.hsx__bar { margin-top: clamp(22px, 3vw, 36px); }
.hsx__bar i { height: 3px; }

@media (max-width: 900px) {
  .hsx__intro { grid-template-columns: 1fr; align-items: start; }
  .hsx__card { width: min(78vw, 340px); }
  .hsx__card img, .hsx__card--cta { height: clamp(320px, 56vw, 420px); }
  .hsx__card--cta { width: min(78vw, 340px); }
}

/* ============================================================
   FINISHES - revealed one at a time as you scroll
   The section is made tall and its panel pins, so scrolling
   steps through the finishes instead of needing a click.
   Clicking still works and scrolls you to that step.
   ============================================================ */
.fin-scroll {
  position: relative;
  background: var(--ink); color: var(--bone);
}
.fin-scroll__sticky {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; align-items: center;
  padding-block: clamp(70px, 9vh, 110px);
  overflow: hidden;
}
.fin-scroll .sec__head { max-width: 760px; }

/* step pips under the panel */
.fin__steps { display: flex; gap: 8px; margin-top: clamp(22px, 3vh, 34px); }
.fin__steps i {
  display: block; width: 46px; height: 3px; border-radius: 2px;
  background: rgba(245,242,236,.16);
  transition: background .45s var(--ease), transform .45s var(--ease);
  transform-origin: left;
}
.fin__steps i.is-done { background: rgba(245,242,236,.34); }
.fin__steps i.is-now  { background: var(--red); }

/* the list reads as a progressing sequence, not a menu */
.fin__btn { cursor: pointer; }
.fin__btn .ttl { transition: color .45s var(--ease), transform .45s var(--ease); }
.fin__btn[aria-selected="true"] .ttl { transform: translateX(2px); }

@media (max-width: 900px) {
  /* no pinning on a phone: it becomes a normal section you tap through */
  .fin-scroll { height: auto !important; }
  .fin-scroll__sticky {
    position: static; min-height: 0;
    padding-block: var(--section-y);
  }
  .fin__steps { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fin-scroll { height: auto !important; }
  .fin-scroll__sticky { position: static; min-height: 0; padding-block: var(--section-y); }
}

/* ============================================================
   EST. 1994 - tenure made visible at first glance
   ============================================================ */
.hdr__est {
  display: inline-flex; align-items: baseline; gap: 6px; flex: none;
  padding-left: 16px; margin-left: 2px;
  border-left: 1px solid rgba(245,242,236,.22);
  font-family: var(--display); font-weight: 800; font-size: 15px;
  letter-spacing: .02em; color: var(--bone);
  line-height: 1;
}
.hdr__est b {
  font-weight: 700; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--red-lift);
}

/* the strip number carries a longer unit now, so let it sit tighter */
.hero__strip .n sup { font-size: .42em; top: -.9em; letter-spacing: .02em; }

@media (max-width: 1180px) { .hdr__est { display: none; } }

/* ============================================================
   INNER PAGES
   One chassis: banner, prose, checklist, spec table, gallery,
   FAQ, area strip. Mirrors how this ports to a WP template.
   ============================================================ */
.pbanner {
  position: relative; background: var(--ink); color: var(--bone);
  padding-top: 84px; overflow: hidden;
}
.pbanner__bg { position: absolute; inset: 0; z-index: 0; }
.pbanner__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.pbanner__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--ink) 22%, rgba(16,21,25,.72) 62%, rgba(16,21,25,.5) 100%);
}
.pbanner__in { position: relative; z-index: 3; padding-block: clamp(54px, 7vw, 92px) clamp(46px, 6vw, 78px); }
.pbanner h1 {
  font-size: clamp(34px, 4.8vw, 62px); margin-top: 20px; max-width: 18ch; line-height: 1.0;
}
.pbanner__lede {
  margin-top: 22px; font-size: clamp(16.5px, 1.7vw, 19px);
  color: rgba(245,242,236,.76); max-width: 56ch; line-height: 1.6;
}
.pbanner__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 13px; }

/* breadcrumb */
.crumb { font-size: 13px; color: rgba(245,242,236,.5); display: flex; gap: 9px; flex-wrap: wrap; }
.crumb a { color: rgba(245,242,236,.72); }
.crumb a:hover { color: var(--red-lift); }
.crumb span { opacity: .45; }

/* prose + two column intro */
.ptwo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: start; }
.prose p { font-size: 17px; line-height: 1.68; color: var(--slate); }
.prose p + p { margin-top: 18px; }
.sec--ink .prose p, .sec--graphite .prose p { color: rgba(245,242,236,.72); }
.prose strong { color: var(--ink); font-weight: 600; }
.sec--ink .prose strong, .sec--graphite .prose strong { color: var(--bone); }

/* checklist */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--joint-dark); }
.sec--ink .ticks, .sec--graphite .ticks { background: var(--joint); }
.ticks li {
  background: var(--bone); padding: 17px 20px 17px 48px; position: relative;
  font-size: 15.5px; line-height: 1.55;
}
.sec--ink .ticks li { background: var(--ink); color: rgba(245,242,236,.82); }
.sec--graphite .ticks li { background: var(--graphite); color: rgba(245,242,236,.82); }
.ticks li::before {
  content: ""; position: absolute; left: 20px; top: 23px;
  width: 9px; height: 5px; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}
.ticks--x li::before {
  border: 0; width: 11px; height: 11px; top: 21px; transform: none;
  background:
    linear-gradient(to bottom, transparent 45%, var(--slate) 45%, var(--slate) 55%, transparent 55%) rotate(45deg);
}

/* spec table */
.spectbl { width: 100%; border-collapse: collapse; margin-top: 8px; }
.spectbl th, .spectbl td {
  text-align: left; padding: 15px 16px; border-bottom: 1px solid var(--joint-dark); font-size: 15px;
}
.sec--ink .spectbl th, .sec--ink .spectbl td,
.sec--graphite .spectbl th, .sec--graphite .spectbl td { border-bottom-color: var(--joint); color: rgba(245,242,236,.8); }
.spectbl th {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--slate);
}
.sec--ink .spectbl th, .sec--graphite .spectbl th { color: rgba(245,242,236,.46); }
.spectbl td:first-child { font-weight: 600; width: 36%; }
.spectbl tr:last-child td, .spectbl tr:last-child th { border-bottom: 0; }

/* gallery */
.pgal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 46px; }
.pgal figure { position: relative; margin: 0; overflow: hidden; background: var(--steel); }
.pgal img { width: 100%; height: clamp(230px, 26vw, 360px); object-fit: cover; transition: transform 1s var(--ease); }
.pgal figure:hover img { transform: scale(1.05); }
.pgal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(16,21,25,0), rgba(16,21,25,.9));
  font-family: var(--display); font-weight: 700; font-size: 13.5px; color: var(--bone);
}
.pgal figcaption b {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--red-lift); margin-bottom: 4px;
}

/* FAQ */
.faq { margin-top: 44px; border-top: 1px solid var(--joint-dark); }
.sec--ink .faq, .sec--graphite .faq { border-top-color: var(--joint); }
.faq details { border-bottom: 1px solid var(--joint-dark); }
.sec--ink .faq details, .sec--graphite .faq details { border-bottom-color: var(--joint); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--display); font-weight: 700; font-size: clamp(16px, 1.8vw, 19px);
  letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: translateY(-70%) rotate(45deg); transition: transform .35s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .ans { padding: 0 0 24px; font-size: 16px; line-height: 1.66; color: var(--slate); max-width: 74ch; }
.sec--ink .faq .ans, .sec--graphite .faq .ans { color: rgba(245,242,236,.72); }

/* related services */
.rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--joint-dark); margin-top: 8px; }
.rel a {
  background: var(--bone); padding: 26px 24px 28px; display: flex; flex-direction: column;
  transition: background .35s var(--ease);
}
.rel a:hover { background: var(--paper); }
.rel a .t { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
.rel a .d { margin-top: 9px; font-size: 14px; color: var(--slate); line-height: 1.55; }
.rel a .g { margin-top: 16px; font-family: var(--display); font-weight: 700; font-size: 12.5px; color: var(--red); }

@media (max-width: 900px) {
  .ptwo { grid-template-columns: 1fr; }
  .pgal { grid-template-columns: 1fr 1fr; }
  .rel { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pgal { grid-template-columns: 1fr; }
  .spectbl td:first-child { width: 44%; }
}

/* ============================================================
   NAVIGATION v2 - dropdowns so every page is reachable
   from the header rather than only from the homepage.
   ============================================================ */
.nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav__item { position: relative; }
.nav__top {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-size: 14px; font-weight: 600;
  color: rgba(245,242,236,.82); letter-spacing: .005em;
  padding: 10px 12px; border-radius: 2px;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav__top svg { width: 13px; height: 13px; opacity: .6; transition: transform .3s var(--ease); }
.nav__top:hover, .nav__item--open .nav__top { color: var(--bone); background: rgba(245,242,236,.07); }
.nav__item--open .nav__top svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 90;
  min-width: 274px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav__item--open .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menuIn {
  background: var(--graphite);
  border: 1px solid rgba(245,242,236,.14);
  border-top: 2px solid var(--red);
  border-radius: 2px;
  box-shadow: 0 28px 60px -24px rgba(0,0,0,.8);
  padding: 8px;
  display: grid; gap: 1px;
}
.nav__menuIn a {
  display: block; padding: 11px 14px; border-radius: 2px;
  font-size: 14.5px; color: rgba(245,242,236,.78);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav__menuIn a:hover { background: rgba(245,242,236,.08); color: var(--bone); }
.nav__all {
  margin-top: 6px; border-top: 1px solid rgba(245,242,236,.12);
  font-family: var(--display); font-weight: 700; font-size: 12.5px !important;
  letter-spacing: .06em; text-transform: uppercase; color: var(--red-lift) !important;
}
/* bridge the gap so the menu does not close while the cursor travels to it */
.nav__item--has::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
}

/* ---------- mobile drawer groups ---------- */
.drawer__grp { border-bottom: 1px solid var(--joint); }
.drawer__grp > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 40px 20px 0;
  font-family: var(--display); font-weight: 700; font-size: 24px;
  letter-spacing: -.025em; color: var(--bone);
}
.drawer__grp > summary::-webkit-details-marker { display: none; }
.drawer__grp > summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease);
}
.drawer__grp[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.drawer__grp a {
  display: block; padding: 13px 0 13px 16px; border-bottom: 0;
  font-family: var(--body); font-weight: 400; font-size: 16px;
  color: rgba(245,242,236,.72); border-left: 2px solid var(--joint);
}
.drawer__grp a:hover { color: var(--bone); border-left-color: var(--red); }
.drawer__grp:last-of-type { margin-bottom: 8px; }

@media (max-width: 1180px) {
  .nav__top { padding: 10px 9px; font-size: 13.5px; }
  .nav__menu { min-width: 250px; }
}

/* ============================================================
   TYPE RHYTHM v2
   The eyebrow / heading / body stack was set at a flat 20px at
   every size, which reads slack under a 54px heading. Tied the
   gaps to the heading instead, and pulled the section padding in.
   ============================================================ */
:root { --section-y: clamp(64px, 7.5vw, 116px); }

/* eyebrow sits close to its heading, as a label rather than a line of its own */
.sec__head h2,
.h2 { margin-top: 12px; }
.pbanner h1 { margin-top: 13px; }

/* heading to body */
.sec__head p,
.lede { margin-top: 14px; line-height: 1.58; }
.pbanner__lede { margin-top: 16px; line-height: 1.55; }

/* body copy */
.prose p { line-height: 1.6; }
.prose p + p { margin-top: 15px; }

/* headings that sit directly above a block of their own */
.slab__pt h3 + p,
.pour__card h3 + p,
.proc__step h3 + p,
.rel a .t + .d { margin-top: 8px; }

.slab__pt p { margin-top: 8px; }
.pour__card p { margin-top: 9px; }
.proc__step h3 { margin-top: 11px; }
.proc__step p { margin-top: 9px; }

/* intro blocks were doubling up on space before the first element */
.sec__head { margin-bottom: 0; }
.pour__grid,
.proc__grid,
.rev__grid,
.fin__grid { margin-top: 40px; }
.pgal { margin-top: 36px; }
.faq { margin-top: 34px; }

/* tighten the hero stack to match */
.hero h1 { margin-top: 16px; }
.hero__sub { margin-top: 20px; line-height: 1.55; }
.hero__cta { margin-top: 28px; }
.rw { margin-top: 28px; }

/* gallery + spec captions */
.xs__detail p { margin-top: 10px; }
.spectbl { margin-top: 18px; }

/* ============================================================
   TRUST STRIP - on every inner page, directly under the banner
   ============================================================ */
.tstrip { background: var(--graphite); border-bottom: 1px solid var(--joint); }
.tstrip__in {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  padding-block: 20px;
}
.tstrip__stat { display: flex; align-items: baseline; gap: 10px; }
.tstrip__stat b {
  font-family: var(--display); font-weight: 800; font-size: 26px;
  letter-spacing: -.03em; color: var(--bone); line-height: 1;
}
.tstrip__stat span { font-size: 12.5px; color: rgba(245,242,236,.56); max-width: 17ch; line-height: 1.35; }
.tstrip__badges {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-left: auto; padding-left: clamp(16px, 2vw, 30px);
  border-left: 1px solid var(--joint);
}
.tstrip__badges img { height: 34px; width: auto; }
.tstrip__badges img.qbcc { height: 22px; }
.tstrip__lic {
  font-family: var(--display); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245,242,236,.42); line-height: 1.5;
}
.tstrip__lic b { display: block; color: rgba(245,242,236,.78); letter-spacing: .08em; }

/* lead photo in the service page intro */
.pfig { margin: 0; position: relative; border-radius: 2px; overflow: hidden; background: var(--steel); }
.pfig img { width: 100%; height: clamp(330px, 40vw, 520px); object-fit: cover; display: block; }
.pfig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 20px;
  background: linear-gradient(180deg, rgba(16,21,25,0), rgba(16,21,25,.92));
  font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--bone);
}
.pfig figcaption b {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--red-lift); margin-bottom: 5px;
}

@media (max-width: 1100px) {
  .tstrip__badges { margin-left: 0; border-left: 0; padding-left: 0;
                    width: 100%; padding-top: 16px; border-top: 1px solid var(--joint); }
}
@media (max-width: 640px) {
  .tstrip__in { gap: 16px 26px; }
  .tstrip__stat b { font-size: 22px; }
  .tstrip__stat span { font-size: 11.5px; }
}

/* The nav v2 rules are declared after the responsive block, so the original
   "hide the desktop nav under 900px" rule was being overridden. Re-assert it. */
@media (max-width: 900px) {
  .nav, .hdr__est, .hdr__call { display: none !important; }
  .burger { display: flex; }
}

/* On a phone the nav is gone, so the logo can stay generous, but not so tall
   that the header eats the top of the hero. */
@media (max-width: 560px) {
  .hdr__in { height: 82px; }
  .hdr.is-stuck .hdr__in { height: 70px; }
  .hdr__logo img { height: 50px; }
  .hdr.is-stuck .hdr__logo img { height: 44px; }
}

/* Nine services, so the grid goes to three columns: three clean rows rather
   than two rows of four and a widow on the end. Bigger cards too, which the
   photographs are better for. */
.pour__grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .pour__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pour__grid { grid-template-columns: 1fr; } }

/* ============================================================
   QUOTE FORM
   Lives inside the closing CTA band, which is where every "Get a quote"
   button already points. The band becomes two columns: the pitch on the
   left, the form on the right as a light card against the dark ground so
   it reads as the thing to do rather than a footnote.
   ============================================================ */
.cta--form .cta__in { padding-block: clamp(60px, 7vw, 104px); }
.cta__cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 76px); align-items: start;
}
.cta--form h2 { max-width: 15ch; }
.cta--form p { max-width: 42ch; }
.cta__direct {
  margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--joint);
  display: grid; gap: 14px;
}
.cta__direct .lbl {
  font-family: var(--display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(245,242,236,.5);
}

.qf {
  background: var(--paper); color: var(--ink);
  padding: clamp(24px, 3vw, 38px);
  border-radius: 3px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.6);
}
.qf__head { margin-bottom: 22px; }
.qf__head h3 {
  font-family: var(--display); font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 800; letter-spacing: -.01em; line-height: 1.15;
}
.qf__head p { margin-top: 9px; font-size: 14.5px; color: var(--steel); max-width: none; }

.qf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qf__row { display: grid; gap: 7px; }
.qf__row--wide { grid-column: 1 / -1; }
.qf label {
  font-family: var(--display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--steel);
}
.qf label .opt { font-weight: 500; letter-spacing: .04em; text-transform: none; opacity: .62; }
.qf input, .qf select, .qf textarea {
  font-family: var(--body); font-size: 15.5px; color: var(--ink);
  background: #fff; border: 1px solid rgba(31,40,52,.2); border-radius: 2px;
  padding: 12px 13px; width: 100%;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.qf textarea { resize: vertical; min-height: 96px; }
.qf select { appearance: none; background-image: none; cursor: pointer; }
.qf .qf__sel { position: relative; }
.qf .qf__sel::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--steel); border-bottom: 2px solid var(--steel);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.qf input:focus, .qf select:focus, .qf textarea:focus {
  outline: none; border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(241,61,21,.14);
}
.qf input[aria-invalid="true"], .qf select[aria-invalid="true"] {
  border-color: var(--rust); background: rgba(241,61,21,.03);
}
.qf__err { font-size: 13px; color: var(--rust); font-weight: 500; }
.qf__err:empty { display: none; }

/* The honeypot has to be reachable by a bot and invisible to a person, so it
   is moved off-screen rather than display:none, which some bots skip. */
.qf__pot {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.qf__foot { margin-top: 22px; display: grid; gap: 14px; }
.qf__submit {
  font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: .01em; color: var(--paper); background: var(--rust);
  border: none; border-radius: 2px; padding: 15px 22px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.qf__submit svg { width: 18px; height: 18px; }
.qf__submit:hover { background: var(--rust-lift); }
.qf__submit:active { transform: translateY(1px); }
.qf__submit[disabled] { opacity: .6; cursor: default; }
.qf__fine { font-size: 12.5px; color: var(--steel); opacity: .78; line-height: 1.5; }

.qf__done { display: none; text-align: left; }
.qf.is-done .qf__form, .qf.is-done .qf__head { display: none; }
.qf.is-done .qf__done { display: block; }
.qf__tick {
  width: 46px; height: 46px; border-radius: 50%; background: var(--rust);
  display: grid; place-items: center; margin-bottom: 18px;
}
.qf__tick svg { width: 24px; height: 24px; stroke: var(--paper); }
.qf__done h3 {
  font-family: var(--display); font-size: clamp(20px, 2.1vw, 26px); font-weight: 800;
  letter-spacing: -.01em;
}
.qf__done p { margin-top: 10px; font-size: 15px; color: var(--steel); }

@media (max-width: 980px) {
  .cta__cols { grid-template-columns: 1fr; }
  .cta--form h2, .cta--form p { max-width: 32ch; }
}
@media (max-width: 560px) {
  .qf__grid { grid-template-columns: 1fr; }
}