/* D'LUXE PAINTING - Batemans Bay, NSW south coast. Quote-first trade site.

   ROUND 2, 24 August 2026. Andrew's feedback: put the lime green through the
   whole site. So the blue is gone and the palette is now the one on his own
   business card - a near-black with a green cast, his lime, and white.

     #8CC63E  THE LIME. Sampled off the "Painting" word on his A-frame sign.
              Every button fill, kicker, rule, tag and step number. It is a
              light colour, so anything sitting ON it is INK, never white.
     #4F7C15  the lime as a WORD on white (4.97:1). Links and small green type.
     #A6D45A  the lime lifted, for when it sits on the dark band (7.8:1).
     #1C2419  THE BAND. Full-bleed sections carrying white writing, used to cut
              a long white page into chapters.
     #141A12  the deeper near-black, for the footer and for type. */

:root {
  --ground:   #FFFFFF;      /* white - the working ground */
  --ground-2: #F5F8EF;      /* alternating bands, faintly lime */
  --ground-3: #EAF1DC;      /* cards, form fields */

  --surface:  #1C2419;      /* THE DARK BAND - white writing sits on this */
  --surface-2:#141A12;      /* deeper, for the footer */
  --concrete: #46543D;      /* hairlines on the dark band, never text */

  --ink: #141A12;           /* near-black with a green cast - body type */
  --ink-dim: #4E5A47;
  --ink-faint: #85937B;

  --deep: #141A12;          /* text that sits ON the lime. INK, not white. */
  --deep-dim: #CBD9BA;      /* secondary text on the dark band */
  --on-dark: #FFFFFF;       /* headings and strong text on the dark band */

  --rust: #8CC63E;          /* THE LIME - button fills, rules, tags */
  --rust-word: #4F7C15;     /* the lime as a WORD on white (4.97:1) */
  --rust-deep: #A6D45A;     /* the lime when it sits on the dark band */
  --rust-bright: #9FD653;   /* hover */

  --steel-blue: #6FA828;    /* NON-TEXT ONLY */

  --hairline: rgba(20,26,18,.14);
  --hairline-soft: rgba(20,26,18,.07);
  --hairline-ink: rgba(255,255,255,.20);

  --head-h: 112px;
  --callbar-h: 60px;
}

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

html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--head-h) + 12px); }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
blockquote { quotes: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--rust); color: var(--deep); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- layout primitives ---------- */

.wrap { max-width: 1360px; margin-inline: auto; padding-inline: clamp(1.15rem, 5vw, 4.5rem); }
.wrap-narrow { max-width: 820px; margin-inline: auto; padding-inline: clamp(1.15rem, 5vw, 4.5rem); }

.section { padding-block: clamp(3.6rem, 9vh, 7rem); }
.section-tight { padding-block: clamp(2.6rem, 6vh, 4.5rem); }
.section-alt { background: var(--ground-2); }

/* THE BLUE BAND. Full-bleed, white writing on it, used to cut a long white page
   into chapters. Three on the home page, one mid-FAQ, one on About. .section-blue
   is the name to reach for; .section-surface is the template's old name for the
   same thing and is kept only so inherited markup does not break. */
.section-surface, .section-blue { background: var(--surface); color: var(--on-dark); }
.section-surface .kicker, .section-blue .kicker { color: var(--rust-deep); }
.section-surface .lede, .section-blue .lede { color: var(--deep-dim); }
.section-surface .btn-ghost, .section-blue .btn-ghost { border-color: var(--hairline-ink); color: var(--on-dark); }
.section-surface .btn-ghost:hover, .section-blue .btn-ghost:hover { border-color: var(--rust-deep); color: var(--rust-deep); }

/* ---------- type ---------- */

h1, h2, h3, h4, .display {
  font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.kicker {
  font-family: Inter, system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--rust-word);
}

.h-xl { font-size: clamp(2.5rem, 7vw, 5.2rem); }
.h-lg { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.h-md { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.h-sm { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

.lede { font-size: clamp(1.02rem, 1.55vw, 1.22rem); color: var(--ink-dim); max-width: 60ch; }
.body-copy p { margin-bottom: 1.15rem; color: var(--ink-dim); }
.body-copy p:last-child { margin-bottom: 0; }
.body-copy strong { color: var(--ink); font-weight: 600; }
.body-copy em { color: var(--ink); font-style: italic; }
.body-copy a { color: var(--rust-word); text-decoration: underline; text-underline-offset: 3px; }

.sect-head { margin-bottom: clamp(2.2rem, 5vh, 3.6rem); }
.sect-head .h-lg { margin-top: .7rem; }
.sect-head .lede { margin-top: 1rem; }

/* ---------- the ground line - this site's ownable mark ----------
   WA sky running into the rust of the soil, wiped in from the left as the
   section enters the viewport. */

.rule {
  height: 3px;
  background-image: linear-gradient(90deg, var(--steel-blue) 0%, var(--rust-bright) 44%, var(--rust) 70%, var(--rust-deep) 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  border: 0;
}
.rule-short { width: 76px; }
.motion .rule { transition: background-position 1.4s cubic-bezier(.25,.7,.3,1) .1s; }
.motion .rule:not(.in) { background-position: 100% 50%; }

/* ---------- motion ---------- */

.motion [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity .8s ease-out, transform .8s ease-out; }
.motion [data-reveal].in { opacity: 1; transform: none; }
.motion [data-exposure] { opacity: 0; filter: saturate(.4) brightness(.7); transition: opacity 1.1s ease-out, filter 1.1s ease-out; }
.motion [data-exposure].in { opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal], .motion [data-exposure] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .motion .rule { transition: none !important; background-position: 0% 50% !important; }
}

/* ---------- buttons - one primary action, repeated ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700; font-size: 1.12rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .92rem 1.6rem; border-radius: 3px; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--rust); color: var(--deep); }
.btn-primary:hover { background: var(--rust-bright); }

.btn-ghost { border: 1.5px solid var(--hairline); color: var(--ink); }
.btn-ghost:hover { border-color: var(--rust-word); color: var(--rust-word); }

.btn-sm { padding: .6rem 1.05rem; font-size: .98rem; }
.btn-lg { padding: 1.08rem 2rem; font-size: 1.25rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.link-accent {
  color: var(--rust-word); font-weight: 600; font-size: .93rem;
  display: inline-flex; align-items: center; gap: .45rem;
}
.link-accent::after { content: "→"; transition: transform .18s ease; }
.link-accent:hover::after { transform: translateX(4px); }
.section-surface .link-accent, .section-blue .link-accent { color: var(--rust-deep); }

/* ---------- header ---------- */

.site-head {
  position: sticky; top: 0; z-index: 60;
  height: var(--head-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.head-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }

.brand { display: flex; align-items: center; gap: .65rem; color: var(--ink); }
.brand img { height: 40px; width: auto; }
.brand-text { display: none; }
@media (min-width: 620px) {
  .brand-text { display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.06rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.05; }
  .brand-text span { display: block; font-family: Inter, sans-serif; font-size: .58rem; font-weight: 500; letter-spacing: .26em; color: var(--ink-faint); }
}

.nav { display: none; }
@media (min-width: 1060px) {
  .nav { display: flex; align-items: center; gap: 1.5rem; }
  .nav a { font-size: .88rem; font-weight: 500; color: var(--ink-dim); transition: color .18s ease; }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
}

.head-actions { display: flex; align-items: center; gap: .6rem; }

.burger { display: inline-flex; flex-direction: column; gap: 4px; padding: .55rem; }
@media (min-width: 1060px) { .burger { display: none; } }
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: var(--head-h) 0 auto 0; z-index: 55;
  background: var(--ground-2); border-bottom: 1px solid var(--hairline);
  padding: 1.1rem clamp(1.15rem, 5vw, 4.5rem) 1.6rem;
  display: none;
}
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: .72rem 0; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--hairline-soft); }
.mobile-nav .btn { margin-top: 1.1rem; }

/* ---------- hero ----------
   Three finished jobs cross-fade behind the copy. Every photo on this site came
   off a phone, so the scrim below is doing double duty: carrying legibility and
   taking the edge off the softness at desktop width. A slow push keeps the frame
   alive. */

.hero { position: relative; overflow: clip; display: flex; align-items: center; min-height: calc(100svh - var(--head-h)); padding-block: clamp(2.6rem, 7vh, 5.2rem); }
@media (min-width: 900px) { .hero { min-height: min(820px, calc(100svh - var(--head-h))); } }

.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--ground); }
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
  opacity: 0; transition: opacity 1.6s ease-in-out;
}
.hero-slide.active { opacity: 1; }
.motion .hero-slide.active { animation: swell 11s ease-out both; }
@keyframes swell { from { transform: scale(1.005); } to { transform: scale(1.075); } }

/* Legibility scrim. Two complementary layers rather than two cumulative ones:
   stacking heavy gradients multiplies to near-opaque and kills the steel. On
   desktop the horizontal layer carries the left-hand copy and lets the right of
   the frame read; on mobile the copy is full width, so it goes vertical. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,13,15,.92) 0%, rgba(10,13,15,.66) 34%, rgba(10,13,15,.54) 74%, rgba(10,13,15,.74) 100%);
}
@media (min-width: 980px) {
  .hero-media::after {
    background:
      linear-gradient(100deg, rgba(10,13,15,.95) 0%, rgba(10,13,15,.88) 32%, rgba(10,13,15,.48) 62%, rgba(10,13,15,.32) 100%),
      linear-gradient(to top, rgba(10,13,15,.52) 0%, transparent 22%, transparent 80%, rgba(10,13,15,.48) 100%);
  }
}

/* slideshow dots */
.hero-dots { position: absolute; z-index: 3; bottom: 1.15rem; right: clamp(1.15rem, 5vw, 4.5rem); display: flex; gap: .5rem; }
.hero-dots button { width: 30px; height: 3px; background: rgba(244,241,234,.30); border-radius: 2px; transition: background-color .3s ease; }
.hero-dots button[aria-selected="true"] { background: var(--rust); }

.hero-grid { position: relative; z-index: 2; width: 100%; display: grid; gap: clamp(2.2rem, 5vw, 3.6rem); align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1fr .74fr; } }

/* On a phone the card would push the quick-pick bar most of a screen further
   down for no gain: the same six steps are the process section. */
@media (max-width: 979px) { .hero-proof { display: none; } }

.hero-content { text-shadow: 0 1px 20px rgba(10,13,15,.75); }
.hero-content .h-xl { margin: .85rem 0 0; max-width: 15ch; }
.hero-sub { margin-top: 1.1rem; font-size: clamp(1.02rem, 1.6vw, 1.24rem); color: #D9DEE1; max-width: 46ch; }
.hero-cta { margin-top: 1.7rem; }

.trust {
  margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center;
  gap: .55rem clamp(.9rem, 2.4vw, 1.9rem);
  font-size: .84rem; color: var(--ink-dim);
}
.trust-item { display: inline-flex; align-items: center; gap: .42rem; }
.trust-item strong { color: var(--ink); font-weight: 600; }
.stars { color: var(--rust-word); letter-spacing: .08em; font-size: .95rem; }

/* ---------- hero card: one job, start to finish ----------
   Sits over the photograph, so everything inside it is white. It lists the six
   steps of a paint job, which is the argument the whole site is making: what
   you are paying for is the prep, not the paint. */

.jobcard {
  background: rgba(20,26,18,.72);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--rust);
  border-radius: 3px;
  padding: 1.5rem 1.6rem 1.6rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px rgba(6,20,40,.45);
}
.jobcard-head { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.75rem; text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; }
.jobcard-list { margin-top: 1.1rem; display: grid; gap: .62rem; }
.jobcard-list li { display: flex; align-items: center; gap: .7rem; font-size: 1rem; font-weight: 500; }
.jobcard-list svg { width: 16px; height: 16px; flex: none; color: var(--rust-word); }
.jobcard-foot { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--hairline-soft); font-size: .86rem; color: var(--ink-dim); }

/* ---------- quick-pick service bar ---------- */

.picker { background: var(--ground-2); border-block: 1px solid var(--hairline-soft); padding-block: clamp(1.6rem, 4vh, 2.4rem); }
.picker h2 { font-size: 1.05rem; letter-spacing: .04em; margin-bottom: 1rem; color: var(--ink-dim); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem; border: 1px solid var(--hairline); border-radius: 100px;
  font-size: .9rem; font-weight: 500; color: var(--ink-dim);
  transition: border-color .18s ease, color .18s ease;
}
.chip:hover { border-color: var(--rust-word); color: var(--rust-word); }

/* ---------- three-step photo sequence ----------
   Inherited from the template and not used on this site. Kept because the
   markup for it may come back with a future page. */

.civil-steps { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); counter-reset: civil; }
@media (min-width: 780px) { .civil-steps { grid-template-columns: repeat(3, 1fr); } }

.civil figure { margin: 0; }
.civil img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 3px; background: var(--concrete);
}
.civil figcaption { margin-top: .9rem; font-size: .95rem; color: var(--deep-dim); }
.civil-no {
  display: block; margin-bottom: .3rem;
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: 1.5rem; line-height: 1; letter-spacing: .06em; color: var(--rust-deep);
}
.civil figcaption strong { color: var(--on-dark); font-weight: 600; }

.pullquote {
  margin-top: clamp(2.2rem, 5vh, 3.4rem);
  border-left: 3px solid var(--rust-deep);
  padding: .2rem 0 .2rem 1.3rem;
  max-width: 44ch;
}
.pullquote p {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.1;
  text-transform: uppercase; color: var(--on-dark);
}
.pullquote cite { display: block; margin-top: .6rem; font-style: normal; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--deep-dim); }

.civil-close {
  margin-top: 1.8rem; padding-top: 1.3rem;
  border-top: 1px solid var(--hairline-ink);
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); text-transform: uppercase;
  letter-spacing: .02em; color: var(--on-dark);
}

/* ---------- services ---------- */

.svc-list { border-top: 1px solid var(--hairline-soft); }
.svc {
  display: grid; gap: .5rem 1.5rem; align-items: start;
  padding-block: clamp(1.5rem, 3.4vh, 2.3rem);
  border-bottom: 1px solid var(--hairline-soft);
  scroll-margin-top: calc(var(--head-h) + 16px);
}
@media (min-width: 860px) { .svc { grid-template-columns: 62px 1fr 210px; } }
.svc-no { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--rust-word); line-height: 1.2; }
.svc-name { font-size: clamp(1.35rem, 2.5vw, 1.85rem); }
.svc-desc { margin-top: .5rem; color: var(--ink-dim); max-width: 62ch; }
.svc-cta { align-self: center; }
@media (max-width: 859px) { .svc-cta { margin-top: .6rem; } .svc-no { font-size: 1.15rem; } }

/* ---------- carousel - services and reviews ---------- */

.carousel { position: relative; --carousel-bg: var(--ground); }
.section-alt .carousel, .book .carousel { --carousel-bg: var(--ground-2); }

.carousel-viewport {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
@media (prefers-reduced-motion: reduce) { .carousel-viewport { scroll-snap-type: x proximity; } }
.carousel-viewport::-webkit-scrollbar { display: none; }

.carousel-track { display: flex; align-items: stretch; gap: clamp(.7rem, 1.4vw, 1.1rem); width: max-content; padding-block: .25rem; }
.carousel-item { flex: none; width: min(84vw, 350px); scroll-snap-align: start; display: flex; }
.carousel-item > * { width: 100%; }

.carousel::before, .carousel::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2;
  width: clamp(20px, 5vw, 90px); pointer-events: none;
}
.carousel::before { left: 0; background: linear-gradient(to right, var(--carousel-bg), transparent); }
.carousel::after { right: 0; background: linear-gradient(to left, var(--carousel-bg), transparent); }

.carousel-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.4rem, 3vh, 2rem); }
.carousel-nav { display: flex; gap: .5rem; }
.carousel-nav button {
  width: 42px; height: 42px; border: 1px solid var(--hairline); border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  transition: border-color .18s ease, color .18s ease;
}
.carousel-nav button:hover { border-color: var(--rust-word); color: var(--rust-word); }
.carousel-nav svg { width: 17px; height: 17px; }
@media (max-width: 600px) { .carousel-nav { display: none; } }

.svc-card {
  display: flex; flex-direction: column; gap: .45rem;
  background: var(--ground-3); border: 1px solid var(--hairline-soft); border-radius: 3px;
  padding: 1.25rem 1.35rem 1.35rem;
  transition: border-color .2s ease, transform .2s ease;
}
.svc-card:hover { border-color: var(--rust-word); transform: translateY(-2px); }
.svc-card .card-no { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1rem; color: var(--rust-word); letter-spacing: .1em; }
.svc-card h3 { font-size: 1.26rem; line-height: 1.1; }
.svc-card p { font-size: .9rem; color: var(--ink-dim); }
.svc-card .link-accent { margin-top: auto; padding-top: .7rem; }

.carousel-item .rev { height: 100%; }

/* ---------- work showcase ---------- */

.work-grid { display: grid; gap: clamp(.6rem, 1.4vw, 1.1rem); }
@media (min-width: 760px) { .work-grid { grid-template-columns: repeat(6, 1fr); } }

.work {
  position: relative; overflow: hidden; background: var(--ground-3);
  border-radius: 3px; grid-column: span 6;
}
.work img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.work:hover img { transform: scale(1.035); }
.work figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(.9rem, 2vw, 1.5rem);
  background: linear-gradient(to top, rgba(10,13,15,.94), rgba(10,13,15,0));
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: .04em; text-transform: uppercase;
}
.work figcaption em { display: block; font-family: Inter, sans-serif; font-style: normal; font-weight: 500; font-size: .76rem; letter-spacing: .14em; color: var(--rust-word); margin-bottom: .25rem; }

/* Editorial rhythm on a 6-column grid. Every row's spans add to 6, so there are
   no holes, and the two shapes that share a row are sized to land on the same
   height: a 4-wide at 16/10 and a 2-wide at 4/5 both compute to 0.417 of the
   grid width. The three 590px-wide photos only ever sit in a span-2 tile, which
   never renders above about 400 CSS px. */
@media (min-width: 760px) {
  .w-wide  { grid-column: span 4; aspect-ratio: 16 / 10; }   /* pairs with .w-tall */
  .w-tall  { grid-column: span 2; aspect-ratio: 4 / 5; }
  .w-half  { grid-column: span 3; aspect-ratio: 4 / 3; }     /* two per row */
  .w-third { grid-column: span 2; aspect-ratio: 4 / 3; }     /* three per row */
}
@media (max-width: 759px) { .work { aspect-ratio: 4 / 3; } }

/* ---------- process ---------- */

.steps { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.step { border-top: 3px solid var(--rust); padding-top: 1.1rem; }
.step:nth-child(1) { border-color: var(--steel-blue); }
.step:nth-child(2) { border-color: var(--rust-deep); }
.step:nth-child(5) { border-color: var(--rust-bright); }
.step-no { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: .9rem; letter-spacing: .2em; color: var(--rust-word); }
.step h3 { font-size: 1.32rem; margin: .5rem 0 .55rem; }
.step p { color: var(--ink-dim); font-size: .94rem; }

/* ---------- reviews ---------- */

.rev-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.4rem;
  padding: 1.15rem 1.4rem; margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
  background: var(--ground-3); border-left: 3px solid var(--rust); border-radius: 3px;
}
.rev-score { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--rust-word); }
.rev-meta { font-size: .9rem; color: var(--ink-dim); }
.rev-meta strong { color: var(--ink); }

.rev-grid { display: grid; gap: clamp(.8rem, 1.6vw, 1.2rem); }
@media (min-width: 720px) { .rev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rev-grid { grid-template-columns: repeat(4, 1fr); } }

.rev {
  background: var(--ground-3); border: 1px solid var(--hairline-soft); border-radius: 3px;
  padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .7rem;
}
.rev-quote { font-size: .96rem; color: var(--ink); }
.rev-by { margin-top: auto; font-size: .82rem; color: var(--ink-faint); }
.rev-by strong { display: block; color: var(--ink); font-size: .92rem; font-weight: 600; }

/* ---------- FAQ ---------- */

.faq-list { border-top: 1px solid var(--hairline-soft); }
.faq { border-bottom: 1px solid var(--hairline-soft); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.2rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.4rem); text-transform: uppercase; letter-spacing: .03em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--rust-word); font-size: 1.5rem; line-height: 1; flex: none; transition: transform .2s ease; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq-body { padding-bottom: 1.25rem; color: var(--ink-dim); max-width: 68ch; }
.faq-body p + p { margin-top: .8rem; }
.faq-body strong { color: var(--ink); font-weight: 600; }
.faq-body a { color: var(--rust-word); text-decoration: underline; text-underline-offset: 3px; }
.faq-body ul { margin-top: .8rem; display: grid; gap: .45rem; }
.faq-body li { padding-left: 1.1rem; position: relative; }
.faq-body li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 2px; background: var(--rust); }

/* ---------- contact / quote block ---------- */

.book { background: var(--ground-2); }
.book-grid { display: grid; gap: clamp(2rem, 5vw, 3.4rem); }
@media (min-width: 940px) { .book-grid { grid-template-columns: 1fr 1fr; } }

.book-points { margin-top: 1.5rem; display: grid; gap: .7rem; }
.book-point { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; color: var(--ink-dim); }
.book-point svg { width: 17px; height: 17px; flex: none; margin-top: .3rem; color: var(--rust-word); }

.detail-list { margin-top: 1.8rem; display: grid; gap: .1rem; }
.detail-row { display: grid; grid-template-columns: 92px 1fr; gap: .8rem; padding: .62rem 0; border-top: 1px solid var(--hairline-soft); font-size: .93rem; }
.detail-row dt { color: var(--ink-faint); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; padding-top: .18rem; }
.detail-row dd { overflow-wrap: anywhere; }
.detail-row dd a:hover { color: var(--rust-word); }

.form { display: grid; gap: .85rem; }
@media (min-width: 560px) { .form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; } }
.field { display: grid; gap: .35rem; }
.field label { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.field input, .field select, .field textarea {
  width: 100%; padding: .78rem .9rem;
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 3px;
  font: inherit; font-size: .96rem;
  transition: border-color .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--rust-word); outline: none; }
.field textarea { resize: vertical; min-height: 108px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%); background-position: calc(100% - 18px) 51%, calc(100% - 13px) 51%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.form-note { font-size: .8rem; color: var(--ink-faint); }
.form-note a { color: var(--rust-word); }
.hp { position: absolute; left: -9999px; }

/* ---------- CTA band ----------
   The one hazard detail on the site, taken from the bunting strung across the
   beam in his own photo. It appears here and nowhere else. */

.cta-band { position: relative; background: linear-gradient(100deg, var(--rust), var(--rust-bright)); color: var(--deep); }
.cta-band::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(-45deg, var(--surface-2) 0 10px, var(--rust-deep) 10px 20px);
}
.cta-band .wrap { padding-block: clamp(2.4rem, 5vh, 3.4rem) clamp(2.2rem, 5vh, 3.2rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; }
.cta-band h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); max-width: 22ch; }
.cta-band p { font-size: .96rem; margin-top: .35rem; color: var(--deep); }
.cta-band .btn { background: #fff; color: var(--rust-word); }
.cta-band .btn:hover { background: var(--ground-2); }

/* ---------- footer ---------- */

.site-foot { background: var(--ground-2); border-top: 1px solid var(--hairline-soft); padding-block: clamp(2.4rem, 5vh, 3.6rem) 1.6rem; }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.foot-grid h3 { font-size: .8rem; letter-spacing: .2em; color: var(--ink-faint); margin-bottom: .9rem; }
.foot-grid li { margin-bottom: .5rem; font-size: .91rem; color: var(--ink-dim); }
.foot-grid li a:hover { color: var(--rust-word); }
.foot-brand { color: var(--ink); }
.foot-brand img { height: 58px; width: auto; margin-bottom: .9rem; }
.foot-blurb { font-size: .9rem; color: var(--ink-dim); max-width: 40ch; }
.foot-base { margin-top: 2.4rem; padding-top: 1.3rem; border-top: 1px solid var(--hairline-soft); display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between; font-size: .8rem; color: var(--ink-faint); }

/* ---------- sticky mobile call bar ---------- */

.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr;
  height: var(--callbar-h);
  background: rgba(20,26,18,.97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--hairline);
}
.callbar a { display: flex; align-items: center; justify-content: center; gap: .5rem; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; }
.callbar a:first-child { background: var(--rust); color: var(--deep); }
.callbar svg { width: 17px; height: 17px; }
@media (min-width: 1060px) { .callbar { display: none; } }
@media (max-width: 1059px) { body { padding-bottom: var(--callbar-h); } }

/* ---------- misc ---------- */

.page-head { padding-block: clamp(2.6rem, 6vh, 4.4rem) clamp(1.6rem, 4vh, 2.4rem); border-bottom: 1px solid var(--hairline-soft); }
.page-head .h-lg { margin-top: .7rem; }
.page-head .lede { margin-top: 1rem; }

.crumbs { font-size: .8rem; color: var(--ink-faint); }
.crumbs a:hover { color: var(--rust-word); }
.crumbs span { margin-inline: .4rem; }

.area-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
.area-list li { font-size: .84rem; color: var(--ink-dim); padding: .35rem .75rem; border: 1px solid var(--hairline-soft); border-radius: 100px; }

/* two-column prose + aside, used on About */
.split { display: grid; gap: clamp(2rem, 5vw, 3.4rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.25fr 1fr; } }
.split figure { border-radius: 3px; overflow: hidden; background: var(--ground-3); margin-bottom: 1.4rem; }
.split figcaption { padding: .8rem 1rem; font-size: .84rem; color: var(--ink-dim); }

.fact-list { display: grid; gap: .1rem; margin-top: 1.6rem; }
.fact { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: .8rem 0; border-top: 1px solid var(--hairline-soft); font-size: .93rem; color: var(--ink-dim); }
.fact strong { font-family: "Barlow Condensed", sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--rust-word); line-height: 1; }


/* ---------- light-ground corrections ----------
   The structure came off a dark-ground template. These are the places where a
   panel still sits on a photograph or on the navy, so the type inside it has to
   stay light while the rest of the site went white. */

.jobcard, .jobcard * { color: var(--on-dark); }
.jobcard-list li { color: var(--deep-dim); }
.callbar a { color: var(--on-dark); }
.callbar a:last-child { color: var(--on-dark); }
.hero-dots button { background: rgba(255,255,255,.34); }

/* nav + burger read on white */
.nav a { color: var(--ink); }
.nav a:hover { color: var(--rust-word); }
.mobile-nav { background: var(--ground); border-bottom: 1px solid var(--hairline); }
.mobile-nav a { color: var(--ink); }

/* cards lift off a white ground with a hairline, not a shadow */
.section-surface .lede, .section-blue .lede { color: var(--deep-dim); }
.section-surface p, .section-blue p { color: var(--deep-dim); }
.section-surface h2, .section-blue h2, .section-surface h3, .section-blue h3, .section-surface strong, .section-blue strong { color: var(--on-dark); }

/* ---------- components this build added on top of the template ---------- */

.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--rust); color: var(--deep); padding: .7rem 1rem; }
.skip:focus { left: 8px; top: 8px; }

/* hero */
.hero-inner { position: relative; z-index: 2; display: grid; gap: 2rem; align-items: center; padding-block: clamp(3rem, 11vh, 6.5rem); }
@media (min-width: 980px) { .hero-inner { grid-template-columns: 1.25fr .85fr; gap: 3rem; } }
.hero-scrim { position: absolute; inset: 0; z-index: 1; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.hero-note { margin-top: 1.1rem; font-size: .87rem; color: var(--deep-dim); max-width: 46ch; }
.hero-content h1 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; font-size: clamp(2.3rem, 6.4vw, 4.3rem); color: #fff; }
.hero-content .lede { color: #E8EEF5; max-width: 52ch; margin-top: 1rem; }
.hero-content .kicker { color: var(--rust-deep); }

/* picker strip */
.picker-label { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .7rem; }
.picker-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* three-up feature blocks */
.grid-3 { display: grid; gap: 1.4rem; margin-top: 2.2rem; }
@media (min-width: 760px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } }
.feat h3 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.3rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .5rem; }
.feat p { font-size: .94rem; }
.section-surface .feat, .section-blue .feat { border-top: 2px solid var(--rust-deep); padding-top: 1rem; }
.section:not(.section-surface) .feat { border-top: 2px solid var(--rust); padding-top: 1rem; }

/* service + review carousel cards */
.scard, .rcard { flex: 0 0 clamp(255px, 78vw, 330px); scroll-snap-align: start; }
.scard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.scard h3 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.24rem; letter-spacing: .04em; text-transform: uppercase; margin: .8rem 0 .35rem; }
.scard p { font-size: .91rem; color: var(--ink-dim); }
.rcard { background: var(--ground-2); border: 1px solid var(--hairline); border-left: 3px solid var(--rust); border-radius: 4px; padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .7rem; }
.rcard blockquote { font-size: .94rem; line-height: 1.62; }
.rcard cite { font-style: normal; font-size: .82rem; color: var(--ink-faint); letter-spacing: .04em; margin-top: auto; }

/* work grid */
.wtile { margin: 0; }
.wtile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.wtile figcaption { font-size: .84rem; color: var(--ink); margin-top: .5rem; }
@media (min-width: 720px) { .wtile-lg { grid-column: span 2; } .wtile-lg img { aspect-ratio: 16 / 9; } }

/* numbered steps */
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rust); color: var(--deep); font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.05rem; margin-bottom: .7rem; }
.steps h3 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.22rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .35rem; }
.steps p { font-size: .93rem; color: var(--ink-dim); }

.area-note { margin-top: 1.2rem; font-size: .9rem; color: var(--ink-dim); }
.sect-foot { margin-top: 1.8rem; }

/* long-form pages */
.prose-grid { display: grid; gap: 2.6rem; }
@media (min-width: 940px) { .prose-grid { grid-template-columns: 1.5fr .8fr; gap: 3.4rem; align-items: start; } }
.prose h2 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: .02em; text-transform: uppercase; margin: 2.2rem 0 .7rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 1rem; max-width: 68ch; }
.prose .steps { margin-top: 1rem; }
.prose-side { display: grid; gap: 1.6rem; }
@media (min-width: 940px) { .prose-side { position: sticky; top: calc(var(--head-h) + 20px); } }
.side-card { background: var(--ground-2); border: 1px solid var(--hairline); border-top: 3px solid var(--rust); border-radius: 4px; padding: 1.4rem; }
.side-card h3 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.25rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .9rem; }
.side-card .btn-block { margin-top: 1.1rem; }
.side-fig img { width: 100%; border-radius: 4px; }
.side-fig figcaption { font-size: .82rem; color: var(--ink); margin-top: .5rem; }

/* services page */
.svc-list { display: grid; gap: 2.6rem; }
.svc { display: grid; gap: 1.3rem; align-items: start; }
@media (min-width: 800px) { .svc { grid-template-columns: .8fr 1.2fr; gap: 2.2rem; } .svc:nth-child(even) img { order: 2; } }
.svc img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.svc h2 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.05rem); letter-spacing: .02em; text-transform: uppercase; margin-bottom: .6rem; }
.svc > div > p { color: var(--ink-dim); margin-bottom: .9rem; max-width: 62ch; }
.tick { display: grid; gap: .45rem; }
.tick li { position: relative; padding-left: 1.5rem; font-size: .93rem; }
.tick li::before { content: ""; position: absolute; left: 0; top: .52em; width: 9px; height: 5px; border-left: 2px solid var(--rust); border-bottom: 2px solid var(--rust); transform: rotate(-45deg); }

/* FAQ page */
.faq-wrap { max-width: 800px; }
.faq-group { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rust-word); margin: 2.4rem 0 .9rem; }
.faq-group:first-child { margin-top: 0; }

/* quote block */
.book-copy .lede { max-width: 50ch; }
.book-alt { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: .6rem; }
.book-alt-label { flex: 1 0 100%; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .2rem; }

/* footer */
.foot-logo { height: 62px; width: auto; margin-bottom: .9rem; }
.foot-list { display: grid; gap: .5rem; font-size: .9rem; color: var(--ink-dim); }
.foot-list a:hover { color: var(--rust-word); }
.foot-list strong { color: var(--ink); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.site-foot h3 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .8rem; }


/* This build hangs the cards straight off .carousel-track with no separate
   viewport element, so the track has to be the scroller itself. */
.carousel > .carousel-track {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  width: auto; max-width: 100%;
  padding-inline: 1px;
}
.carousel > .carousel-track::-webkit-scrollbar { display: none; }
.carousel-nav { margin-top: 1.2rem; }
.carousel-nav .cbtn {
  width: 42px; height: 42px; border: 1px solid var(--hairline); border-radius: 50%;
  display: grid; place-items: center; color: var(--ink); font-size: 1.05rem;
  transition: border-color .18s ease, color .18s ease;
}
.carousel-nav .cbtn:hover { border-color: var(--rust-word); color: var(--rust-word); }

/* ---------- final overrides ----------
   These sit last on purpose. The template treated .btn as an unstyled base and
   only filled .btn-primary; this build uses a bare .btn as the filled action
   everywhere, so the fill moves onto the base and the variants re-assert. */

.btn { background: var(--rust); color: var(--deep); }
.btn:hover { background: var(--rust-bright); color: var(--deep); }

.btn-ghost { background: transparent; border: 1.5px solid var(--hairline); color: var(--ink); }
.btn-ghost:hover { background: transparent; border-color: var(--rust-word); color: var(--rust-word); }

/* ghost buttons that sit on a photograph or on the navy band go light */
.hero .btn-ghost, .section-surface .btn-ghost {
  border-color: rgba(255,255,255,.55); color: #fff; background: transparent;
}
.hero .btn-ghost:hover, .section-surface .btn-ghost:hover {
  border-color: #fff; color: #fff; background: rgba(255,255,255,.12);
}

/* the CTA band is already blue, so its button inverts */
.cta-band .btn { background: #fff; color: var(--rust-word); }
.cta-band .btn:hover { background: var(--ground-3); color: var(--rust-deep); }

/* Lighter scrim than the template shipped, and neutral rather than navy. The
   hero photographs are the finished work: a charcoal house against a hard blue
   sky, a deck fresh out of the oil. Crushing them to near black to make the
   headline easier throws away the only argument the site has. The gradient is
   heavy on the left where the copy sits and lets go by the middle. */
.hero-media::after {
  background: linear-gradient(to top, rgba(8,14,22,.84) 0%, rgba(8,14,22,.52) 40%, rgba(8,14,22,.30) 76%, rgba(8,14,22,.44) 100%);
}
@media (min-width: 980px) {
  .hero-media::after {
    background:
      linear-gradient(100deg, rgba(8,14,22,.88) 0%, rgba(8,14,22,.70) 32%, rgba(8,14,22,.22) 62%, rgba(8,14,22,.04) 100%),
      linear-gradient(to top, rgba(8,14,22,.34) 0%, transparent 26%, transparent 84%, rgba(8,14,22,.26) 100%);
  }
}

/* two-up form rows: the template had no .field-row rule, and this build uses it
   to pair name/phone and stage/timing on anything wider than a phone */
.field-row { display: grid; gap: 0; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; gap: 0 1rem; } }

/* the three promises beside the quote form read as a list, not loose lines */
.book-points { display: grid; gap: .55rem; margin: 1.4rem 0 0; }
.book-points li { position: relative; padding-left: 1.6rem; font-size: .95rem; color: var(--ink-dim); }
.book-points li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 10px; height: 6px; border-left: 2px solid var(--rust); border-bottom: 2px solid var(--rust);
  transform: rotate(-45deg);
}

/* ---------- before and after ----------------------------------------------
   The one section this site is really built around. Andrew has no Google
   listing, no Facebook page and no reviews to lean on, so the proof has to be
   the photographs.

   Two shapes, and the difference matters. Where the two photos were taken from
   the same spot, they get a DRAGGABLE SLIDER, because wiping one over the other
   is what makes it land. Where they were not - same job, different angle or a
   different surface - they get a plain SIDE BY SIDE pair. Sliding two shots
   that do not line up reads as a trick, and the whole point of this section is
   that nothing here is one. */

/* the slider */
.ba-stage {
  position: relative; overflow: hidden; border-radius: 4px;
  background: var(--ground-3); border: 1px solid var(--hairline);
  touch-action: pan-y;
}
.ba-stage img { display: block; width: 100%; height: auto; }
.ba-after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 0 var(--split, 50%)); }

.ba-line {
  position: absolute; top: 0; bottom: 0; left: var(--split, 50%);
  width: 2px; background: var(--rust); transform: translateX(-1px);
  pointer-events: none;
}
.ba-grip {
  position: absolute; top: 50%; left: var(--split, 50%);
  width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: var(--rust); color: var(--deep);
  display: grid; place-items: center; font-size: 1.1rem; font-weight: 700;
  box-shadow: 0 6px 20px rgba(20,26,18,.40); pointer-events: none;
}
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
  background: transparent;
}
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 52px; height: 100%; }
.ba-range::-moz-range-thumb { width: 52px; height: 100%; border: 0; background: transparent; }
.ba-range:focus-visible { opacity: 1; outline: 3px solid var(--rust-word); outline-offset: 4px; }

.ba-hint {
  display: flex; width: fit-content; align-items: center; gap: .45rem;
  margin-top: 1rem; font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rust-word);
}

/* the side-by-side pair */
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ba-shot { position: relative; overflow: hidden; border-radius: 4px; border: 1px solid var(--hairline); background: var(--ground-3); }
.ba-shot img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.ba-tag {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .26rem .6rem; border-radius: 3px;
  background: rgba(16,24,33,.82); color: #fff; pointer-events: none;
}
.ba-tag-after { background: var(--rust); color: var(--deep); }
.ba-stage .ba-tag-before { left: 10px; bottom: 10px; }
.ba-stage .ba-tag-after { left: auto; right: 10px; bottom: 10px; }
/* Flipped pairs: the finished shot sits on the left, so the two tags swap
   sides with it and each label stays over the photo it names. */
.ba-stage.ba-flip .ba-tag-after { left: 10px; right: auto; }
.ba-stage.ba-flip .ba-tag-before { left: auto; right: 10px; }

figure.ba { margin: 0; }
.ba figcaption { margin-top: .85rem; font-size: .95rem; color: var(--ink-dim); max-width: 62ch; }
.ba figcaption strong { display: block; color: var(--ink); font-weight: 600; font-size: 1.05rem; margin-bottom: .2rem; }

/* The hero pair gets the full width; the rest sit three across. The gap under
   the feature is deliberately large and it is ruled off: the slider is one
   idea and the three pairs below are another, and at a smaller gap they read
   as one crowded block of eight photographs. */
/* selector carries the element too, because `figure.ba { margin: 0 }` above
   outranks a bare class and was quietly eating the margin */
figure.ba-feature {
  margin-bottom: clamp(3.4rem, 8vw, 6.5rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 980px) {
  .ba-feature { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 3.2rem); align-items: center; }
  .ba-feature figcaption { margin-top: 0; }
}
.ba-grid { display: grid; gap: clamp(1.6rem, 4vw, 2.4rem); align-items: start; }
@media (min-width: 720px) { .ba-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ba-grid { grid-template-columns: repeat(3, 1fr); } }

@media (prefers-reduced-motion: reduce) { .ba-stage { touch-action: auto; } }

/* ---------- credentials strip ---------- */
.creds { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; }
@media (min-width: 640px) { .creds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .creds { grid-template-columns: repeat(4, 1fr); } }
.cred { background: var(--ground); padding: 1.3rem 1.35rem 1.45rem; }
.cred dt {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rust-word); margin-bottom: .4rem;
}
.cred dd { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.cred dd span { display: block; margin-top: .3rem; font-size: .9rem; font-weight: 400; color: var(--ink-dim); }

/* ---------- blue bands, and the pieces that live on them -------------------
   A page this long, all on white, reads as one undifferentiated wall. The
   blue bands cut it into chapters: you can see where you are on the scrollbar
   and each one carries a single idea. Three on the home page, spaced so a
   white run is never more than two sections long. */

/* the process steps sit on blue, so the numbers, rules and body copy all have
   to flip */
.section-blue .steps li { border-top-color: var(--rust-deep); }
.section-blue .step-n { background: var(--rust-deep); color: var(--surface); }
.section-blue .steps h3 { color: var(--on-dark); }
.section-blue .steps p { color: var(--deep-dim); }

/* the service area list on blue */
.section-blue .area-list li {
  background: rgba(255,255,255,.08);
  border-color: var(--hairline-ink);
  color: var(--on-dark);
}
.section-blue .area-note { color: var(--deep-dim); }

/* the credentials strip on blue: hairline grid inverts */
.section-blue .creds { background: var(--hairline-ink); border-color: var(--hairline-ink); }
.section-blue .cred { background: var(--surface); }
.section-blue .cred dt { color: var(--rust-deep); }
.section-blue .cred dd { color: var(--on-dark); }
.section-blue .cred dd span { color: var(--deep-dim); }

/* ---------- footer, on the deeper blue ----------
   It was on the light grey, which meant the reversed-out logo was sitting
   white on near-white and all but disappeared. A deep blue foot closes the
   page and gives that logo something to sit on. */
.site-foot { background: var(--surface-2); border-top: 0; color: var(--on-dark); }
.site-foot h3 { color: var(--rust-deep); }
.foot-grid li { color: var(--deep-dim); }
.foot-grid li a { color: var(--deep-dim); }
.foot-grid li a:hover { color: #fff; }
.foot-blurb { color: var(--deep-dim); }
.foot-base { border-top: 1px solid var(--hairline-ink); color: var(--deep-dim); }
.foot-base p { color: var(--deep-dim); }
.foot-base a { color: var(--rust-deep); }
.foot-base a:hover { color: #fff; }


/* ==========================================================================
   ROUND 2 - client feedback, 24 August 2026
   ==========================================================================
   Andrew's list, in order:
     - the D'luxe Painting name much bigger and more in your face
     - his lime green through the whole site, and his card logo on the left
     - Batemans Bay first, "servicing Narooma to Ulladulla" small underneath
     - the broken "what needs painting?" chip bar gone
     - fewer sections, better flow, less writing
   ========================================================================== */

/* ---------- header: the logo is the point, so it gets the room ---------- */

.site-head { border-bottom: 1px solid var(--hairline); }
.site-head::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--rust);
}
.brand img { height: 72px; width: auto; }
@media (min-width: 620px)  { .brand img { height: 86px; } }
@media (min-width: 1060px) { .brand img { height: 96px; } }

/* ---------- hero ----------
   The brand comes first and it comes big: the lockup, then BATEMANS BAY, then
   the service area small underneath. That is the order Andrew asked for. */

.hero-inner { grid-template-columns: 1fr !important; justify-items: start; text-align: left; }
.hero-content { max-width: 46rem; }

.hero-lockup { width: clamp(340px, 54vw, 720px); height: auto; margin-bottom: clamp(1.1rem, 3vw, 1.8rem); }

.hero-place {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700; text-transform: uppercase; color: #fff;
  font-size: clamp(2.6rem, 8.5vw, 5.4rem); line-height: .96; letter-spacing: .005em;
}
.hero-area {
  margin-top: .55rem;
  font-size: clamp(.95rem, 2.1vw, 1.22rem); font-weight: 500;
  color: var(--rust-deep); letter-spacing: .04em;
}
.hero-line {
  margin-top: 1.3rem; max-width: 40ch;
  font-size: clamp(1rem, 1.6vw, 1.18rem); color: #EAF1E2;
}
.hero-actions { margin-top: 1.8rem; }

/* the badges under the buttons: licensed, insured, 25 years, both trades */
.hero-badges {
  margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .5rem .55rem;
}
.hero-badges li {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; padding: .34rem .8rem; border-radius: 2px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(4px);
}
.hero-badges li:first-child { background: var(--rust); border-color: var(--rust); color: var(--deep); }

/* ---------- the lime band ----------
   One full-bleed lime section as a chapter break. Everything on it is ink. */

.section-lime { background: var(--rust); color: var(--deep); }
.section-lime .kicker { color: #3B5D10; }
.section-lime .lede, .section-lime p { color: #24350E; }
.section-lime h2, .section-lime h3, .section-lime strong { color: var(--deep); }
.section-lime .feat { border-top: 2px solid rgba(20,26,18,.30); }
.section-lime .btn { background: var(--ink); color: #fff; }
.section-lime .btn:hover { background: #2C3A24; color: #fff; }
.section-lime .steps li { border-top-color: rgba(20,26,18,.3); }
.section-lime .step-n { background: var(--ink); color: #fff; }

/* ---------- the facts strip, straight under the hero ---------- */

.facts { background: var(--ground-2); border-bottom: 1px solid var(--hairline-soft); }
.facts .wrap { padding-block: clamp(1.5rem, 4vh, 2.3rem); }
.facts-grid { display: grid; gap: 1.1rem 1.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .facts-grid { grid-template-columns: repeat(4, 1fr); } }
.fact-item { display: grid; gap: .1rem; padding-left: .9rem; border-left: 3px solid var(--rust); }
.fact-item strong {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.06; color: var(--ink);
}
.fact-item span { font-size: .86rem; color: var(--ink-dim); }

/* ---------- before and after: all three pairs now drag ---------- */

.ba-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) { .ba-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ba-grid { grid-template-columns: repeat(2, 1fr); } }
.ba-hint { color: var(--rust-word); }

/* ---------- services: a plain grid, not an auto-scrolling carousel ---------- */

.svc-grid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.8rem); }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-tile { display: grid; }
.svc-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.svc-tile h3 {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: 1.3rem; letter-spacing: .04em; text-transform: uppercase;
  margin: .85rem 0 .3rem; padding-top: .7rem; border-top: 3px solid var(--rust);
}
.svc-tile p { font-size: .93rem; color: var(--ink-dim); }

/* ---------- work gallery: more photos, and they fill the row ---------- */

.work-grid { display: grid; gap: clamp(.5rem, 1.2vw, .9rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .work-grid { grid-template-columns: repeat(4, 1fr); } }
.wtile img { aspect-ratio: 1 / 1; border-radius: 3px; }
@media (min-width: 900px) { .wtile-lg { grid-column: span 2; grid-row: span 2; } .wtile-lg img { aspect-ratio: 1 / 1; } }
.wtile figcaption { font-size: .8rem; }

/* ---------- the bottom contact strip ----------
   "Contact Andrew from 8am to 5pm" with the service area under it, at the
   bottom, exactly as asked. */

.hours-strip { background: var(--rust); color: var(--deep); text-align: center; }
.hours-strip .wrap { padding-block: clamp(1.7rem, 4vh, 2.6rem); }
.hours-strip p:first-child {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.4rem); text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.06;
}
.hours-strip a { color: var(--deep); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.hours-strip a:hover { color: #2C3A24; }
.hours-strip p:last-child { margin-top: .5rem; font-size: clamp(.92rem, 1.8vw, 1.08rem); color: #24350E; }

/* ---------- footer ---------- */

.foot-logo { height: 64px; }
.site-foot { position: relative; }

/* ---------- fixes the palette swap needs ---------- */

/* the call bar's first button is a lime fill, so its label goes ink */
.callbar a:first-child { background: var(--rust); color: var(--deep); }
.callbar a:last-child { color: var(--on-dark); }
.callbar a:first-child svg { color: var(--deep); }

/* the hazard stripe on the CTA band, restated in the new palette */
.cta-band { background: var(--rust); color: var(--deep); }
.cta-band::before { background: repeating-linear-gradient(-45deg, var(--ink) 0 10px, var(--rust-deep) 10px 20px); }
.cta-band .btn { background: var(--ink); color: #fff; }
.cta-band .btn:hover { background: #2C3A24; color: #fff; }
.cta-band p { color: #24350E; }

/* the ground line, restated green */
.rule { background-image: linear-gradient(90deg, var(--ink) 0%, var(--rust-word) 40%, var(--rust) 72%, var(--rust-deep) 100%); }

/* the skip link sits on lime, so it goes ink */
.skip { background: var(--rust); color: var(--deep); }

/* the dark band's kicker */
.section-blue .kicker, .section-surface .kicker { color: var(--rust-deep); }

/* the "what needs painting?" chip bar is gone from the markup - Andrew's
   buttons never did anything. The rule stays so nothing re-inherits it. */
.picker { display: none; }

/* .hero is a flex row, so .wrap sizes to its content instead of the 1360 grid.
   That was invisible while the hero was a two-column grid; with the single
   column it pushed the whole lockup into the middle of the frame. */
.hero > .hero-inner { width: 100%; }

/* the hero photograph is a wide crop of a whole house, so hold the horizon
   rather than the middle of the frame */
.hero-slide { object-position: center 78%; }

/* the feature slider runs the full width of the page. It is the first thing
   under the hero and it is the argument the site is making, so it gets the
   room rather than sharing a row with its own caption. */
figure.ba-feature { display: block; }
@media (min-width: 980px) {
  .ba-feature { display: block; }
  .ba-feature figcaption { margin-top: 1.1rem; max-width: 70ch; }
}

/* on a phone the two hero buttons stack, so they match width instead of
   sitting at two different lengths */
@media (max-width: 560px) {
  .hero-actions { display: grid; gap: .6rem; width: 100%; max-width: 22rem; }
  .hero-actions .btn { width: 100%; }
}

/* The CTA band on the inner pages sits directly above the lime hours strip.
   Two lime blocks running into each other read as one big slab, so the CTA
   band goes to the ink and the lime strip closes the page on its own. */
.cta-band { background: var(--surface); color: var(--on-dark); }
.cta-band::before { background: repeating-linear-gradient(-45deg, var(--surface-2) 0 10px, var(--rust) 10px 20px); }
.cta-band h2 { color: var(--on-dark); }
.cta-band p { color: var(--deep-dim); }
.cta-band .btn { background: var(--rust); color: var(--deep); }
.cta-band .btn:hover { background: var(--rust-bright); color: var(--deep); }


/* =========================================================================
   ROUND 3, 24 August 2026. Andrew's second feedback list.
   ========================================================================= */

/* ---------- 2. the slideshow transition ----------------------------------
   The old version cross-faded the opacity AND ran a separate Ken Burns
   keyframe that was restarted, by a forced reflow, on whichever slide was
   coming in. The slide going OUT lost its animation the instant its class was
   removed, so its transform snapped from 1.075 back to 1 while it was still
   half visible. That snap is the jolt he was looking at.

   So the zoom is now a transition on the same element rather than a keyframe.
   Off screen a slide sits at 1.06 and it eases to 1 over eleven seconds while
   it is the active one. The one leaving drifts back out over the same eleven
   seconds, which is slow enough that it does not read as movement during the
   two and a bit seconds it takes to fade. Nothing is ever reset mid frame, so
   there is nothing left to jump. */

.hero-slide {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 2.2s cubic-bezier(.37, 0, .18, 1), transform 11s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.hero-slide.active { opacity: 1; transform: scale(1); }
.motion .hero-slide.active { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; transform: none; }
}

/* the dots get a real target on a phone, and say which one is showing */
.hero-dots button { transition: background-color .3s ease, transform .3s ease; }
.hero-dots button[aria-selected="true"] { transform: scale(1.25); }

/* ---------- 7. both before-and-after pairs, same size, both dragging ------
   He asked for the deck pair to be on the slider like the townhouse, and for
   the two to be the same size. Both are now .ba-stage at 4:3, side by side in
   a two column grid, so they match to the pixel.

   The deck shots were taken from two different spots. They are cropped now so
   the doorway sits in the same part of the frame in both, which is what makes
   a wipe read, and the caption says outright that the camera moved. */

.ba-stage img { aspect-ratio: 4 / 3; object-fit: cover; }
.ba-grid .ba-stage img { width: 100%; }

/* the grip and the line want to be findable on a phone without being a lump */
@media (max-width: 620px) {
  .ba-grip { width: 44px; height: 44px; margin: -22px 0 0 -22px; font-size: .95rem; }
}

/* ---------- 6. the email button ------------------------------------------
   "Email andrew does not work." On a phone a mailto opens the mail app. On a
   desktop with no mail client set up, which is most of them now, it opens
   nothing at all and the button looks broken.

   So the address is on the page as text you can read and copy, next to a
   button that still tries the mail app for the people it does work for. The
   long prefilled subject and body are gone too: some handlers drop a mailto
   that long on the floor. */

.mailto-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.mail-copy {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .92rem 1.6rem; border-radius: 3px; min-height: 44px; white-space: nowrap;
  border: 1.5px solid var(--hairline); background: transparent; color: var(--ink);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700; font-size: 1.12rem; letter-spacing: .06em; text-transform: uppercase;
  transition: border-color .2s ease, color .2s ease;
}
.mail-copy:hover { border-color: var(--rust-word); color: var(--rust-word); }
.mail-copy[data-done="1"] { border-color: var(--rust-word); color: var(--rust-word); }
.mail-address {
  display: block; margin-top: .6rem;
  font-size: .95rem; color: var(--ink-dim); overflow-wrap: anywhere;
}
.mail-address a { color: var(--rust-word); text-decoration: underline; text-underline-offset: 3px; }
.section-surface .mail-address, .hero .mail-address { color: var(--deep-dim); }
.section-surface .mail-address a, .hero .mail-address a { color: var(--rust-deep); }

/* ---------- 5. more mobile friendly --------------------------------------
   Measured at 360, 375 and 414 wide. What was actually wrong:
     - the fixed call bar sat over the last of the footer, so the licence line
       was unreadable on a phone
     - the hero ran to a full 100svh even on a short phone, which pushed the
       first proof shot a whole screen down
     - tap targets in the mobile nav and the footer were under 44px
     - the four facts, the credentials and the enquiry form all ran two across
       at 375, which left every label wrapped onto three lines
     - horizontal padding was 1.15rem, which is tight against the edge of the
       glass on a modern phone */

@media (max-width: 720px) {
  .site-foot { padding-bottom: calc(var(--callbar-h) + 1.4rem); }

  .wrap, .wrap-narrow { padding-inline: 1.35rem; }

  /* the hero: shorter, so the before-and-after is nearly in view */
  .hero { min-height: auto; padding-block: 2.4rem 2.8rem; }
  .hero-lockup { max-width: min(88vw, 380px); }

  /* one column everywhere it was cramped at two */
  .facts-grid { grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
  .field-row { grid-template-columns: 1fr; }
  .creds { grid-template-columns: 1fr; }
  .foot-grid { gap: 1.9rem; }

  /* 44px minimum on everything you tap */
  .mobile-nav a { min-height: 48px; display: flex; align-items: center; }
  .foot-list a, .hours-strip a { display: inline-block; padding-block: .35rem; }
  .nav a, .callbar a { min-height: 44px; }
  .hero-dots button { width: 12px; height: 12px; }
  .hero-dots { gap: .85rem; padding: .6rem; }

  /* the section rhythm is tuned for a desktop column, so tighten it */
  .section { padding-block: clamp(2.6rem, 9vw, 3.4rem); }
  .sect-head { margin-bottom: 1.5rem; }

  /* the gallery at four across on a phone was twelve thumbnails */
  .work-grid { grid-template-columns: repeat(2, 1fr); }

  /* stop a long email address forcing the page sideways */
  .foot-list li, .side-card li { overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  .facts-grid { grid-template-columns: 1fr; }
  .hours-strip p:first-child { font-size: 1.35rem; }
}

/* iOS zooms the page in when it focuses an input under 16px. Nothing else on
   the site does that, and it is the single worst thing a form can do on a
   phone, so the fields hold 16px and only the labels stay small. */
@media (max-width: 900px) {
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* ---------- 4. the admin section -----------------------------------------
   Its own shell, not the marketing site's. Dark, dense, and readable in a
   driveway on a phone. */

.admin-body { background: var(--surface-2); color: var(--on-dark); }
.admin-head { background: var(--surface); border-bottom: 3px solid var(--rust); }
.admin-head-inner {
  display: flex; align-items: center; gap: 1.2rem;
  padding-block: .95rem; flex-wrap: wrap;
}
.admin-head .brand img { height: 44px; width: auto; }
.admin-title {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; font-size: 1rem;
  color: var(--rust-deep); margin-right: auto;
}
.admin-out {
  border: 1.5px solid var(--hairline-ink); color: var(--on-dark);
  padding: .5rem 1rem; border-radius: 3px; font-size: .9rem; font-weight: 600;
  min-height: 44px;
}
.admin-out:hover { border-color: var(--rust-deep); color: var(--rust-deep); }

.admin-main { padding-block: clamp(2rem, 6vw, 3.6rem) 5rem; }

.admin-gate { max-width: 26rem; }
.admin-gate h1 {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.05; margin-bottom: .5rem;
}
.admin-gate .lede { color: var(--deep-dim); font-size: 1rem; margin-bottom: 1.6rem; }
.admin-gate .field { margin-bottom: 1.1rem; }
.admin-gate .field label { color: var(--rust-deep); }
.admin-gate input {
  background: var(--surface); border: 1.5px solid var(--concrete); color: var(--on-dark);
  padding: .85rem 1rem; border-radius: 3px; width: 100%; font-size: 16px;
}
.admin-gate input:focus { border-color: var(--rust); outline: none; }

.admin-msg { margin-top: .9rem; font-size: .92rem; color: var(--rust-deep); min-height: 1.4em; }

.admin-bar {
  display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center;
  padding-bottom: 1.2rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--concrete);
}
.admin-counts { display: flex; gap: 1.4rem; margin-right: auto; color: var(--deep-dim); font-size: .95rem; }
.admin-counts strong {
  font-family: "Barlow Condensed", sans-serif; font-size: 1.5rem;
  color: var(--rust-deep); margin-right: .3rem;
}
.admin-tools { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.admin-tools .btn-ghost { border-color: var(--hairline-ink); color: var(--on-dark); background: transparent; min-height: 44px; }
.admin-tools .btn-ghost:hover { border-color: var(--rust-deep); color: var(--rust-deep); background: transparent; }
.admin-check {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .92rem; color: var(--deep-dim); cursor: pointer; min-height: 44px;
}
.admin-check input { width: 20px; height: 20px; accent-color: var(--rust); }

.admin-empty { color: var(--deep-dim); padding: 2.4rem 0; }

.enq {
  background: var(--surface); border: 1px solid var(--concrete);
  border-left: 4px solid var(--rust); border-radius: 4px;
  padding: 1.15rem 1.25rem 1.3rem; margin-bottom: 1rem;
}
.enq.is-done { border-left-color: var(--concrete); opacity: .62; }
.enq-top { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: flex-start; }
.enq-top h2 {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; font-size: 1.35rem; letter-spacing: .02em; line-height: 1.1;
}
.enq-suburb { color: var(--rust-deep); }
.enq-when { font-size: .82rem; color: var(--ink-faint); margin-top: .15rem; }
.enq-when strong { color: #E8825A; }
.enq-done { margin-left: auto; }

.enq-facts { display: grid; gap: .8rem 1.4rem; margin-top: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .enq-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .enq-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.enq-facts dt {
  font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .12rem;
}
.enq-facts dd { font-size: .96rem; overflow-wrap: anywhere; }
.enq-facts a { color: var(--rust-deep); text-decoration: underline; text-underline-offset: 3px; }
.enq-detail {
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--concrete);
  color: var(--deep-dim); font-size: .96rem; white-space: pre-wrap;
}

/* ---------- the form's own status line ------------------------------------
   The submit now goes through /api/enquiry so it can land in his email and in
   the admin section at once. This is what the customer sees while that runs,
   and what they see if it falls over. */

.form-status { margin-top: .8rem; font-size: .92rem; color: var(--rust-word); min-height: 1.4em; }
.form-status[data-state="error"] { color: #B0322A; }
.btn[aria-busy="true"] { opacity: .72; pointer-events: none; }

/* the about page carries five credentials now that the licensed team is one
   of them, so the row fits itself to the count rather than to a hard four */
@media (min-width: 1000px) { .creds { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }

/* Visually hidden, still read by screen readers and by Google. Added 27 Aug 2026
   when the home page went indexable: the hero is a logo image plus a big place
   name, so the page had no h1 at all. The h1 now carries the full phrase and the
   hero still shows just the town, which is what the design wants. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- area pages, added 27 Aug 2026 -------------------------------------- */

/* The sidebar photo is a portrait shot (1200x1600). Left uncropped it made the
   aside taller than the prose beside it, which left a few hundred pixels of
   dead white under the text. Cropping it to landscape puts the two columns
   back in the same ballpark. Same photo, same file, just a shorter box. */
.side-fig-crop img { aspect-ratio: 3 / 2; object-fit: cover; object-position: center 78%; }

/* A short tick list in a full-width band leaves the right half of the band
   empty. Two columns once there is room for them. */
@media (min-width: 720px) { .tick-2 { grid-template-columns: 1fr 1fr; gap: .45rem 2.4rem; } }

/* Breadcrumbs sit directly above the kicker and were touching it. */
.page-head .crumbs { margin-bottom: .9rem; }