/* ==========================================================================
   Ipswich Elite Flooring Company — design system v2
   Concept: every page opens in a room. Petrol wall, white skirting, the floor
   in question. Type is one variable family (Archivo) at two widths.
   All spacing, type and colour come from the tokens below. [G] = Gestalt note.
   ========================================================================== */
@font-face {
  font-family: "Archivo"; font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
}

:root {
  --wall: #0D2F30;        /* the painted wall: header, hero, CTA */
  --wall-deep: #092324;   /* footer */
  --wall-line: #2A4E4F;
  --skirting: #F4F1EA;    /* text on the wall */
  --ink: #0B2526;         /* text on light */
  --muted: #4A5F60;
  --paper: #FFFFFF;
  --mist: #EEF2EF;        /* tinted panels */
  --line: #D3DAD6;
  --tape: #FFC933;        /* tape-measure yellow: actions only */
  --tape-deep: #D99F00;

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;

  /* perfect fourth (1.333) for display, steps shared with body */
  --t-1: 0.825rem; --t0: 1rem; --t1: 1.25rem; --t2: 1.667rem; --t3: 2.222rem; --t4: 2.962rem; --t5: 3.948rem; --t6: 5.263rem;

  --font: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --grid-max: 78rem; --gutter: var(--s6); --measure: 66ch;
  --r: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 106.25%; scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-stretch: 100%; font-size: var(--t0); line-height: 1.62; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
p, ul, ol, table, figure, h1, h2, h3, h4 { margin: 0; }
h1, h2, h3, h4 { font-weight: 800; font-stretch: 72%; line-height: 1; letter-spacing: -0.015em; text-wrap: balance; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--tape-deep); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--tape); outline-offset: 2px; box-shadow: 0 0 0 6px var(--ink); border-radius: var(--r); }
strong, b { font-weight: 700; }
[hidden] { display: none !important; }
.skip-link { position: absolute; left: var(--s4); top: -10rem; background: var(--tape); color: var(--ink); padding: var(--s3) var(--s4); z-index: 100; font-weight: 700; }
.skip-link:focus { top: var(--s4); }
.wrap { width: min(100% - 2 * var(--s5), var(--grid-max)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: var(--s3) var(--s6); font: 700 var(--t0)/1.1 var(--font); font-stretch: 88%; letter-spacing: 0.005em; border-radius: var(--r); border: 2px solid transparent; text-decoration: none; cursor: pointer; }
.btn--primary { background: var(--tape); color: var(--ink); }
.btn--primary:hover { background: var(--skirting); }
.on-light .btn--primary:hover, .sec .btn--primary:hover { background: var(--ink); color: var(--tape); }
.btn--ghost { color: var(--skirting); border-color: rgba(244,241,234,.55); }
.btn--ghost:hover { border-color: var(--skirting); background: rgba(244,241,234,.08); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---------- The call button: icon + number, the loudest thing on every screen ---------- */
.callbtn { display: inline-flex; align-items: center; gap: var(--s3); background: var(--tape); color: var(--ink); text-decoration: none; border-radius: var(--r); padding: var(--s3) var(--s5); min-height: 3.25rem; font-weight: 800; font-stretch: 70%; font-size: var(--t2); line-height: 1; letter-spacing: -0.005em; white-space: nowrap; justify-self: start; }
.callbtn .ico { width: 1.15em; height: 1.15em; flex: none; }
.callbtn:hover { background: var(--skirting); color: var(--ink); }
.callbtn--sm { font-size: var(--t1); min-height: 2.75rem; padding: var(--s2) var(--s4); }
.callbtn--lg { margin-top: var(--s6); font-size: clamp(var(--t3), 1.3rem + 2.4vw, var(--t5)); padding: var(--s4) var(--s6); gap: var(--s4); box-shadow: 0 0 0 0 rgba(255,201,51,.5); }
.site-footer .callbtn { margin-top: var(--s2); }

/* ---------- Header (on the wall) ---------- */
.site-header { background: var(--wall); color: var(--skirting); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--wall-line); }
.site-header__in { display: flex; align-items: center; gap: var(--s6); min-height: 4.75rem; }
.brand { display: flex; align-items: baseline; gap: var(--s2); text-decoration: none; margin-right: auto; font-weight: 800; font-stretch: 70%; font-size: var(--t2); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.brand small { font-size: var(--t-1); font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: #A9C0BE; }
.nav-toggle { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav > ul { display: flex; align-items: center; gap: var(--s6); }
.site-nav a, .site-nav summary { text-decoration: none; font-weight: 600; font-size: var(--t0); cursor: pointer; color: var(--skirting); }
.site-nav a:hover, .site-nav summary:hover, .site-nav a[aria-current="page"] { color: var(--tape); }
.site-nav details { position: relative; }
.site-nav summary { list-style: none; display: flex; align-items: center; gap: var(--s2); }
.site-nav summary::-webkit-details-marker { display: none; }
.site-nav summary::after { content: ""; width: .4rem; height: .4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.site-nav details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.site-nav details ul { position: absolute; top: calc(100% + 1.4rem); left: calc(-1 * var(--s5)); min-width: 17rem; background: var(--paper); padding: var(--s3); border-radius: var(--r); box-shadow: 0 18px 40px -12px rgba(9,35,36,.45); }
.site-nav details li a { display: block; padding: var(--s3) var(--s4); color: var(--ink); font-weight: 500; border-radius: var(--r); }
.site-nav details li a:hover { background: var(--mist); color: var(--ink); }
.header-phone { font-weight: 800; font-stretch: 72%; font-size: var(--t1); text-decoration: none; white-space: nowrap; color: var(--tape); }
.header-phone:hover { color: var(--skirting); }
.header-cta { min-height: 2.6rem; padding: var(--s2) var(--s5); }
@media (max-width: 68rem) {
  .site-header .callbtn { order: 2; }
  .js .nav-toggle { display: inline-flex; align-items: center; background: none; border: 2px solid rgba(244,241,234,.55); border-radius: var(--r); min-height: 2.6rem; padding: 0 var(--s4); font: 700 var(--t0) var(--font); color: var(--skirting); cursor: pointer; }
  .site-header__in { flex-wrap: wrap; padding-block: var(--s3); gap: var(--s3); }
  .site-nav { flex-basis: 100%; order: 5; }
  .js .site-nav { display: none; }
  .js .nav-open .site-nav { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--wall-line); }
  .site-nav > ul > li { border-bottom: 1px solid var(--wall-line); }
  .site-nav > ul > li > a, .site-nav summary { display: flex; justify-content: space-between; padding: var(--s4) 0; }
  .site-nav details ul { position: static; background: none; box-shadow: none; padding: 0 0 var(--s3); min-width: 0; }
  .site-nav details li a { color: var(--skirting); padding-left: var(--s4); }
  .site-nav details li a:hover { background: var(--wall-line); color: var(--skirting); }
}
@media (max-width: 34rem) { .brand small { display: none; } .brand { font-size: var(--t1); } .site-header .callbtn { font-size: var(--t0); padding-inline: var(--s3); min-height: 2.6rem; } }

/* ---------- Hero: the room ---------- */
.hero { background: var(--wall); color: var(--skirting); }
.hero__in { padding-block: var(--s7) var(--s7); row-gap: var(--s7); }
.hero--plain .hero__in { padding-block: var(--s8); }
.hero__text { grid-column: 1 / span 7; align-self: center; }
.hero--noform .hero__text { grid-column: 1 / span 8; }
.hero__form { grid-column: 9 / span 4; align-self: center; background: var(--paper); color: var(--ink); padding: var(--s6); border-radius: var(--r); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
/* [G] figure/ground: the one light panel on the wall is the form. Nothing else on the page competes with it or the phone number. */
.bigtel { display: inline-block; margin-top: var(--s6); font-weight: 800; font-stretch: 66%; font-size: clamp(var(--t3), 1.4rem + 2.2vw, var(--t5)); line-height: 1; color: var(--tape); text-decoration: none; letter-spacing: -0.01em; }
.bigtel:hover { color: var(--skirting); }
.crumbs { font-size: var(--t-1); color: #A9C0BE; margin-bottom: var(--s5); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); opacity: .5; }
.crumbs a { text-decoration-color: transparent; }
.crumbs a:hover { text-decoration-color: currentColor; }
h1 { font-size: clamp(var(--t3), 1.3rem + 3vw, var(--t5)); font-stretch: 66%; font-weight: 800; line-height: .96; letter-spacing: -0.02em; max-width: 22ch; }
.lead { margin-top: var(--s6); font-size: clamp(1.1rem, 1rem + .5vw, var(--t1)); line-height: 1.5; max-width: 54ch; color: #DCE5E1; }
.lead a { color: var(--skirting); }
.hero .btn-row { margin-top: var(--s6); }
.room { display: block; width: 100%; height: clamp(9rem, 21vw, 25rem); object-fit: cover; object-position: center top; background: var(--wall); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%); mask-image: linear-gradient(180deg, transparent 0, #000 9%); }
@media (max-width: 60rem) {
  .grid { display: block; }
  .hero__figure { margin-top: var(--s7); }
  .footer-links { margin-top: var(--s7); }
  .hero__in { padding-block: var(--s7); }
  .hero__form { margin-top: var(--s7); padding: var(--s5); }
}

/* Photo hero: photograph behind, wall colour laid over it.
   The overlay is heaviest under the headline and lifts towards the right so the room still reads. */
.hero--photo { position: relative; isolation: isolate; overflow: hidden; }
.hero--photo .hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; z-index: -2; }
.hero--photo::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(13,47,48,.92) 0%, rgba(13,47,48,.80) 38%, rgba(13,47,48,.52) 70%, rgba(13,47,48,.42) 100%),
              linear-gradient(0deg, rgba(9,35,36,.55) 0%, rgba(9,35,36,0) 40%); }
.hero--photo .hero__in { min-height: min(38rem, 74vh); align-content: center; }
.hero--photo .room { position: relative; height: clamp(7rem, 15vw, 17rem); background: transparent; }
.hero--photo .hero__in { padding-bottom: var(--s6); }
@media (max-width: 60rem) { .hero--photo::before { background: rgba(13,47,48,.86); } .hero--photo .hero__in { min-height: 0; } }

/* ---------- Floor build-up figure (on the wall) ---------- */
/* [G] proximity + closure: bands touch, reading as one section through the floor.
   [G] continuity: a hairline carries the eye from each band to its label. */
.stack ol { list-style: none; padding: 0; margin: 0; }
.stack li { position: relative; display: grid; grid-template-columns: 42% 1fr; column-gap: var(--s4); min-height: var(--h, 3.1rem); }
.stack li::before { content: ""; position: absolute; inset: 0 0 auto 0; border-top: 1px solid var(--wall-line); }
.stack li:first-child::before { display: none; }
.stack .band { width: var(--w, 100%); background-size: cover; background-position: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.35); }
.stack .lab { align-self: center; padding-block: var(--s2); font-size: var(--t-1); line-height: 1.35; color: #A9C0BE; }
.stack .lab b { display: block; color: var(--skirting); font-size: var(--t0); font-weight: 700; font-stretch: 88%; }
.stack figcaption, .route figcaption { margin-top: var(--s4); font-size: var(--t-1); color: #A9C0BE; }
.p-wear { background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(210,222,226,.75)); }
.p-finish { background: linear-gradient(180deg, #F3E7CF, #DCC79C); }
.p-print { background-color: #C9A06A; }
.p-vinyl { background: #7E8B90; }
.p-foam { background: #B7BEB2; }
.p-hdf { background: #94734C; }
.p-ply { background: repeating-linear-gradient(0deg, #E3C99A 0 5px, #C4A063 5px 10px); }
.p-underlay { background: #5F8F73; }
.p-adhesive { background: repeating-linear-gradient(90deg, #9FA9AD 0 3px, #C9D0D2 3px 9px); }
.p-compound { background: #CDD1CA; }
.p-primer { background: #9DB6D6; }
.p-dpm { background: #2F6F9F; }
.p-concrete { background: #8D918C; }
.p-boards { background: repeating-linear-gradient(90deg, transparent 0 86px, rgba(30,20,5,.6) 86px 88px), #9C7646; }
.p-backing { background: repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, rgba(0,0,0,.16) 0 1px, transparent 1px 5px), #CFC7B6; }
.p-ghost { background: repeating-linear-gradient(135deg, rgba(244,241,234,.22) 0 2px, transparent 2px 9px); outline: 1px dashed rgba(244,241,234,.5); outline-offset: -1px; }

/* the same figure inside the page body, on a light panel */
.sec .stack, .fold__body .stack { background: var(--mist); padding: var(--s6); margin-top: var(--s6); max-width: 44rem; }
.sec .stack li::before, .fold__body .stack li::before { border-top-color: var(--line); }
.sec .stack .lab, .fold__body .stack .lab, .sec .stack figcaption { color: var(--muted); }
.sec .stack .lab b, .fold__body .stack .lab b { color: var(--ink); }
.sec .stack .p-ghost { background: repeating-linear-gradient(135deg, rgba(11,37,38,.16) 0 2px, transparent 2px 9px); outline-color: rgba(11,37,38,.45); }
.sec .stack li { max-width: none; margin: 0; }

/* ---------- Route figure ---------- */
.route ol { list-style: none; margin: 0; padding: 0; position: relative; }
.route ol::before { content: ""; position: absolute; left: .55rem; top: .6rem; bottom: 1.6rem; width: 2px; background: var(--tape); }
.route li { position: relative; padding: 0 0 var(--s5) var(--s7); }
.route li:last-child { padding-bottom: 0; }
.route li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--wall); border: 2px solid var(--tape); }
.route li.is-here::before { background: var(--tape); }
.route b, .route a { font-size: var(--t1); font-weight: 750; font-stretch: 80%; }
.route a { text-decoration-color: transparent; }
.route a:hover { text-decoration-color: var(--tape); }
.route span { display: block; font-size: var(--t-1); color: #A9C0BE; }

/* the route, when it sits in the page body */
.sec .route { margin-top: var(--s6); }
.sec .route li { max-width: none; margin: 0; }
.sec .route li::before { background: var(--paper); border-color: var(--tape-deep); }
.sec .route li.is-here::before { background: var(--tape-deep); }
.sec .route ol::before { background: var(--tape-deep); }
.sec .route span, .sec .route figcaption { color: var(--muted); }
.sec .route a:hover { text-decoration-color: var(--tape-deep); }

/* ---------- Page body: heading rail left, content right ---------- */
/* [G] continuity: every H2 sits on one left edge, so the rail reads as the page outline.
   [G] proximity: 8rem between sections, 1rem inside them. */
.page-body { padding-block: var(--s9) var(--s10); }
.sec, .folds { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); border-top: 1px solid var(--line); padding-top: var(--s6); }
.sec + .sec, .sec + .folds, .folds + .sec { margin-top: var(--s9); }
.page-body > .wrap > :first-child { border-top: 0; padding-top: 0; }
.sec > h2, .folds > .rail { grid-column: 1 / span 4; font-size: var(--t3); align-self: start; position: sticky; top: 6.5rem; padding-right: var(--s5); }
.folds > .rail { font-weight: 800; font-stretch: 72%; line-height: 1; letter-spacing: -0.015em; color: var(--muted); }
.sec > *:not(h2), .folds > *:not(.rail) { grid-column: 5 / -1; }
.sec > * + * { margin-top: var(--s4); }
.sec > h2 + * { margin-top: 0; }
.sec > h3 { font-size: var(--t1); font-stretch: 84%; font-weight: 750; letter-spacing: -0.005em; line-height: 1.15; margin-top: var(--s6); }
.sec > h2 + h3 { margin-top: 0; }
.sec > h3 + * { margin-top: var(--s2); }
.sec p, .sec li, .fold__body p, .fold__body li, .faq__body p { max-width: var(--measure); }
.sec ul:not(.cards), .sec ol:not(.steps), .fold__body ul, .fold__body ol { padding-left: 1.15rem; }
.sec li + li, .fold__body li + li { margin-top: var(--s2); }
.sec li::marker, .fold__body li::marker { color: var(--tape-deep); font-weight: 700; }
.sec--intro p { font-size: var(--t1); line-height: 1.5; color: var(--muted); }
@media (max-width: 60rem) {
  .page-body { padding-block: var(--s8) var(--s9); }
  .sec, .folds { display: block; }
  .sec > h2, .folds > .rail { position: static; font-size: var(--t2); margin-bottom: var(--s5); padding-right: 0; }
  .sec + .sec, .sec + .folds, .folds + .sec { margin-top: var(--s8); }
}

/* ---------- Disclosure ---------- */
/* [G] similarity: every expandable row shares one look and one behaviour */
details.fold, details.faq { border-bottom: 1px solid var(--line); margin: 0 !important; }
details.fold:first-of-type, .faq-list details.faq:first-child { border-top: 1px solid var(--line); }
.folds details.fold:first-of-type { border-top: 0; }
details.fold > summary, details.faq > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding-block: var(--s5); }
details.fold > summary::-webkit-details-marker, details.faq > summary::-webkit-details-marker { display: none; }
details.fold > summary::after, details.faq > summary::after { content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--mist) linear-gradient(var(--ink), var(--ink)) center / .75rem 2px no-repeat; background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)); background-size: .75rem 2px, 2px .75rem; background-position: center, center; background-repeat: no-repeat; }
details[open].fold > summary::after, details[open].faq > summary::after { background-size: .75rem 2px, 0 0; background-color: var(--tape); }
details.fold > summary h2 { font-size: var(--t2); font-stretch: 78%; }
details.faq > summary h3 { font-size: var(--t1); font-stretch: 90%; font-weight: 700; letter-spacing: 0; line-height: 1.25; }
details.fold > summary:hover::after, details.faq > summary:hover::after { background-color: var(--tape); }
.fold__body, .faq__body { padding-bottom: var(--s6); }
.fold__body > * + *, .faq__body > * + * { margin-top: var(--s4); }
.fold__body h3 { font-size: var(--t1); font-stretch: 84%; font-weight: 750; margin-top: var(--s5); }
.folds > .folds__list { padding-top: 0; }
.folds { padding-top: 0; }
.folds > .rail { padding-top: var(--s6); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; line-height: 1.45; min-width: 34rem; }
th, td { text-align: left; vertical-align: top; padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--line); }
thead th { font-size: var(--t-1); font-weight: 700; color: var(--muted); border-bottom: 2px solid var(--ink); padding-bottom: var(--s3); }
tbody td:first-child { font-weight: 700; font-stretch: 90%; padding-right: var(--s5); }

/* ---------- Cards: the floors themselves ---------- */
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--gutter); }
.cards > li { margin: 0 !important; max-width: none !important; }
.card { display: grid; gap: var(--s4); align-content: start; }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.card h3 { font-size: var(--t2); font-stretch: 76%; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-decoration-color: var(--tape-deep); }
.card p { color: var(--muted); }
@media (max-width: 68rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .cards { grid-template-columns: 1fr; gap: var(--s6); } }

/* ---------- Steps (a real sequence) ---------- */
ol.steps { list-style: none; padding: 0; counter-reset: step; }
ol.steps > li { counter-increment: step; position: relative; padding: var(--s5) 0 var(--s5) 5rem; border-bottom: 1px solid var(--line); margin: 0 !important; max-width: none; min-height: 4.5rem; }
ol.steps > li:first-child { border-top: 1px solid var(--line); }
ol.steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: var(--s5); font-weight: 800; font-stretch: 66%; font-size: var(--t3); line-height: 1; color: var(--tape-deep); }
ol.steps + * { margin-top: var(--s5); }

/* ---------- CTA ---------- */
.nudge { margin-top: var(--s5) !important; padding-left: var(--s4); border-left: 4px solid var(--tape); font-weight: 600; max-width: var(--measure); }
/* the tape: a measuring tape laid along the top of the closing band */
.tape { height: 1.75rem; background:
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 8px) 0 0 / auto .5rem repeat-x,
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 40px) 0 0 / auto .85rem repeat-x,
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 80px) 0 0 / auto 1.25rem repeat-x,
    var(--tape); }
.cta-band { background: var(--wall); color: var(--skirting); padding-block: var(--s9); }
.cta-band h2 { font-size: clamp(var(--t3), 1.4rem + 3vw, var(--t5)); font-stretch: 66%; line-height: .96; max-width: 16ch; }
.cta-band p { margin-top: var(--s5); max-width: 52ch; color: #DCE5E1; font-size: var(--t1); line-height: 1.5; }
.cta-band__text { grid-column: 1 / span 7; align-self: center; }
.cta-band .hero__form { grid-column: 9 / span 4; }

/* ---------- Form ---------- */
.form { display: grid; gap: var(--s4); max-width: 38rem; }
.form__title { font-size: var(--t2); font-stretch: 72%; margin-bottom: var(--s2); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.form > .btn { width: 100%; }
.field { display: grid; gap: var(--s2); }
.field label { font-weight: 700; font-stretch: 92%; }
.field .hint { font-size: var(--t-1); color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid #8FA3A1; border-radius: var(--r); padding: var(--s3) var(--s4); min-height: 3rem; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--tape); outline-offset: 0; box-shadow: none; }
.field textarea { min-height: 7rem; resize: vertical; }
.form details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.form details > summary { cursor: pointer; font-weight: 700; padding-block: var(--s4); }
.form details .form__more { padding-bottom: var(--s5); display: grid; gap: var(--s5); }
.form .btn--primary { background: var(--ink); color: var(--skirting); }
.form .btn--primary:hover { background: var(--wall); color: var(--tape); }
.hp { position: absolute; left: -999rem; }
.form__privacy { font-size: var(--t-1); color: var(--muted); }
address { font-style: normal; line-height: 1.6; }
#call-us p a { font-weight: 800; font-stretch: 66%; font-size: var(--t5); line-height: 1; text-decoration: none; }
#call-us p a:hover { text-decoration: underline; text-decoration-color: var(--tape-deep); }

/* ---------- Footer ---------- */
.site-footer { background: var(--wall-deep); color: #C7D5D1; padding-block: var(--s8) var(--s6); }
.site-footer a { color: var(--skirting); text-decoration-color: transparent; }
.site-footer a:hover { text-decoration-color: var(--tape); }
.footer-grid { row-gap: var(--s7); }
.footer-nap { grid-column: 1 / span 4; display: grid; gap: var(--s3); align-content: start; }
.footer-nap .brand { font-size: var(--t2); color: var(--skirting); margin: 0; }
.footer-nap .tel { font-weight: 800; font-stretch: 66%; font-size: var(--t3); line-height: 1; }
.footer-links { grid-column: 6 / span 7; display: grid; align-content: start; }
.footer-links > ul { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); font-weight: 600; }
.footer-links details { border-top: 1px solid var(--wall-line); }
.footer-links details:last-of-type { border-bottom: 1px solid var(--wall-line); }
.footer-links summary { cursor: pointer; list-style: none; padding-block: var(--s4); font-weight: 700; color: var(--skirting); display: flex; justify-content: space-between; align-items: center; }
.footer-links summary::-webkit-details-marker { display: none; }
.footer-links summary::after { content: "+"; font-size: var(--t1); line-height: 1; color: var(--tape); }
.footer-links details[open] summary::after { content: "\2212"; }
.footer-links details ul { list-style: none; margin: 0; padding: 0 0 var(--s5); display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--s3) var(--s5); }
.footer-legal { grid-column: 1 / -1; border-top: 1px solid var(--wall-line); padding-top: var(--s5); font-size: var(--t-1); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); justify-content: space-between; }
@media (max-width: 60rem) { .footer-nap, .footer-links { grid-column: 1 / -1; } }

/* ---------- Mobile action bar ---------- */
.actionbar { display: none; }
@media (max-width: 48rem) {
  .actionbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; inset: auto 0 0 0; z-index: 60; background: var(--wall-deep); padding: var(--s2); gap: var(--s2); box-shadow: 0 -8px 24px rgba(9,35,36,.35); }
  .actionbar { grid-template-columns: 1.5fr 1fr; }
  .actionbar .btn, .actionbar .callbtn { min-height: 3.25rem; padding-inline: var(--s3); justify-content: center; justify-self: stretch; font-size: var(--t1); }
  body { padding-bottom: 4.25rem; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .site-header, .site-footer, .cta-band, .tape, .actionbar, .room { display: none; } .hero { background: none; color: #000; } details > * { display: block !important; } }

/* compact form inside the hero and closing band, so Send stays above the fold */
.hero__form { padding: var(--s5) var(--s6); }
.hero__form .form { gap: var(--s3); }
.hero__form .field { gap: var(--s1); }
.hero__form .field input, .hero__form .field select { min-height: 2.75rem; padding-block: var(--s2); }
.hero__form .form details > summary { padding-block: var(--s3); }

/* ==========================================================================
   v3 simplification: one column, two actions, nothing to get lost in.
   [G] figure/ground: on every screen the yellow call button and the white form
   are the only two elements that stand off the page.
   ========================================================================== */

/* Header: brand, call button, and a Menu button at every width */
.js .nav-toggle { display: inline-flex; align-items: center; background: none; border: 2px solid rgba(244,241,234,.55); border-radius: var(--r); min-height: 2.75rem; padding: 0 var(--s4); font: 700 var(--t0) var(--font); color: var(--skirting); cursor: pointer; order: 3; }
.site-header__in { flex-wrap: wrap; row-gap: 0; }
.site-header .callbtn { order: 2; }
.site-nav { flex-basis: 100%; order: 5; }
.js .site-nav { display: none; }
.js .nav-open .site-nav { display: block; padding-bottom: var(--s4); }
.site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--wall-line); }
.site-nav > ul > li { border-bottom: 1px solid var(--wall-line); }
.site-nav > ul > li > a, .site-nav summary { display: flex; justify-content: space-between; padding: var(--s4) 0; }
.site-nav details ul { position: static; background: none; box-shadow: none; padding: 0 0 var(--s3); min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.site-nav details li a { color: var(--skirting); padding-left: var(--s4); }
.site-nav details li a:hover { background: var(--wall-line); color: var(--skirting); }

/* Hero: short proof points under the lead */
.ticks { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s2); color: var(--skirting); font-weight: 600; }
.ticks li { position: relative; padding-left: var(--s6); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .28em; width: 1.05rem; height: .55rem; border-left: 3px solid var(--tape); border-bottom: 3px solid var(--tape); transform: rotate(-45deg); }
.lead { margin-top: var(--s5); }

/* Body: a single readable column, centred */
.page-body { padding-block: var(--s8) var(--s9); }
.sec, .folds { display: block; max-width: 50rem; margin-inline: auto; border-top: 0; padding-top: 0; }
.sec:has(.cards) { max-width: none; }
.sec:has(.cards) > h2 { text-align: left; }
.sec + .sec, .sec + .folds, .folds + .sec { margin-top: var(--s8); }
.sec > h2, .folds > .rail { position: static; font-size: var(--t3); padding-right: 0; margin-bottom: var(--s5); }
.folds > .rail { font-size: var(--t1); padding-top: 0; margin-bottom: var(--s3); }
.sec > h2 + * { margin-top: 0; }
.folds details.fold:first-of-type { border-top: 1px solid var(--line); }
details.fold > summary h2 { font-size: var(--t1); font-stretch: 84%; font-weight: 750; line-height: 1.2; letter-spacing: 0; }
details.fold > summary { padding-block: var(--s4); }
.card h3 { font-size: var(--t1); font-stretch: 80%; }
.card p { font-size: .95rem; }

/* One call-to-action strip, mid page: the same two actions again */
.ctastrip { margin-top: var(--s7) !important; background: var(--wall); color: var(--skirting); border-radius: var(--r); padding: var(--s5) var(--s6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); }
.ctastrip p { flex: 1 1 16rem; font-weight: 800; font-stretch: 72%; font-size: var(--t2); line-height: 1.05; max-width: none; margin: 0; }
.btn--line { color: var(--skirting); border-color: rgba(244,241,234,.6); }
.btn--line:hover { background: rgba(244,241,234,.1); }
.form .btn--primary { min-height: 3.5rem; font-size: var(--t1); }
@media (max-width: 34rem) { .site-header .callbtn { display: none; } .site-header__in { flex-wrap: nowrap; } .js .nav-open.site-header .site-header__in { flex-wrap: wrap; } }

/* ---------- WordPress additions ---------- */
.form__note { margin: 0; padding: var(--s3) var(--s4); border-radius: var(--r); font-weight: 600; font-size: .95rem; }
.form__note--ok { background: #E3F3E8; color: #0F4A2A; }
.form__note--err { background: #FCE8E6; color: #7A1C12; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-nav .menu { list-style: none; margin: 0; padding: 0; }
.hero__photo { color: transparent; }
/* Consent banner: a slim bar along the bottom edge, below the call button and the form */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--wall-deep); color: var(--skirting); padding: var(--s3) var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3) var(--s5); font-size: .9rem; border-top: 1px solid var(--wall-line); }
.consent[hidden] { display: none; }
.consent p { margin: 0; max-width: none; }
.consent a { color: var(--skirting); }
.consent div { display: flex; gap: var(--s3); }
.consent .btn { min-height: 2.25rem; padding: 0 var(--s4); font-size: .85rem; cursor: pointer; }
.consent .btn--line { background: transparent; color: var(--skirting); border: 2px solid rgba(244,241,234,.55); }
@media (max-width: 60rem) { .consent { bottom: 4.25rem; } }

/* ---------- Reviews, trust line, cost table, footer extras ---------- */
.trustline { margin-top: var(--s4); font-weight: 600; color: var(--skirting); font-size: .95rem; }
.sec--reviews { max-width: none; }
.reviews { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--gutter); }
.review { margin: 0; background: var(--mist); border-radius: var(--r); padding: var(--s6); display: grid; gap: var(--s4); align-content: start; max-width: none; }
.review blockquote { margin: 0; }
.review blockquote p { font-size: 1.05rem; max-width: none; }
.review__by { display: grid; gap: var(--s1); font-size: .95rem; }
.review__by span { color: var(--muted); }
.reviews__more { margin-top: var(--s5); }
.sec table { width: 100%; border-collapse: collapse; margin-top: var(--s5); font-size: .95rem; }
.sec th, .sec td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: top; }
.sec thead th { background: var(--wall); color: var(--skirting); font-weight: 700; border-bottom: 0; }
.sec tbody tr:nth-child(even) { background: var(--mist); }
.sec td:nth-child(2) { white-space: nowrap; font-weight: 700; }
@media (max-width: 40rem) { .sec td:nth-child(2) { white-space: normal; } .sec th, .sec td { padding: var(--s3); } }
.footer-hours { margin-top: var(--s4); font-size: .95rem; }
.footer-profiles { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: .95rem; }
.sec .sec--reviews { margin-top: var(--s8); }
.sec ul.reviews { margin: 0; padding: 0; }
.sec ul.reviews > li { margin: 0; padding: var(--s6); max-width: none; }
.sec ul.reviews > li::before { content: none; }