/* ============================================================
   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: 84px;
}
.hdr.is-stuck .hdr__in { height: 70px; }
.hdr__in { transition: height .45s var(--ease); }
.hdr__logo { flex: none; }
.hdr__logo img { height: 42px; width: auto; transition: height .45s var(--ease); }
.hdr.is-stuck .hdr__logo img { height: 36px; }

.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 {
  font-size: clamp(42px, 6.4vw, 86px);
  line-height: .96;
  margin: 24px 0 0;
}
.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; }