/*
 * Plankora Flooring — site stylesheet.
 *
 * Realises the operator-supplied "Maroof" template (themehealer, v1.0; data/template.json) in this
 * repository's own build: its palette and the role each colour plays, its Yantramanav type and size
 * relationships, its pill buttons with the circled arrow, its pill section tags, its rounded dark
 * panels, its red call-to-action band and its motion character. Reimplemented rather than copied:
 * the package's Bootstrap, jQuery and eleven plugins are not carried, because none of them is needed
 * to draw this language and every one of them is weight a reader downloads.
 *
 * Tokens first. Nothing below states a colour, a radius or a duration that is not one of these.
 */

@font-face { font-family: "Yantramanav"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/yantramanav-300.83670a12f9.woff2") format("woff2"); }
@font-face { font-family: "Yantramanav"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/yantramanav-400.a6feaec1d2.woff2") format("woff2"); }
@font-face { font-family: "Yantramanav"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/yantramanav-500.ac18987cef.woff2") format("woff2"); }
@font-face { font-family: "Yantramanav"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/yantramanav-700.569c2d7dac.woff2") format("woff2"); }
@font-face { font-family: "Yantramanav"; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/fonts/yantramanav-900.823c039b61.woff2") format("woff2"); }

:root {
  /* The template's own tokens, by value. */
  --base: #E63A27;
  --base-rgb: 230, 58, 39;
  --base-deep: #C92E1D;
  --black: #141422;
  --black-rgb: 20, 20, 34;
  --ink-soft: #1E1E30;
  --gray: #52515E;
  --white: #FFFFFF;
  --primary: #FFF4F3;
  --bdr: #CDCDCD;
  --bdr-soft: #E9E6E6;

  --font: "Yantramanav", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1290px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(80px, 9vw, 120px);

  --r-pill: 999px;
  --r-card: 20px;
  --r-panel: 40px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 300ms;
  --t: 500ms;
  --t-slow: 1000ms;

  /* Seal tokens, read by scripts/generate-badges.mjs. */
  --seal-edge: var(--base-deep);
  --seal-face: var(--base);
  --seal-ink: var(--white);
}

/* ── base ─────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 19px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--gray);
  background: var(--white);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font); color: var(--black); margin: 0; line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: clamp(34px, 4.4vw, 59px); font-weight: 700; }
h3 { font-size: clamp(22px, 2vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
h4 { font-size: 20px; font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--base); text-decoration: none; transition: color var(--t) ease; }
a:hover { color: var(--black); }
strong { font-weight: 500; color: var(--black); }
ul, ol { margin: 0; padding: 0; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }
.prose h3 { margin: 1.4em 0 .5em; }
.prose h3:first-child { margin-top: 0; }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { background: var(--base); color: var(--white); }
:focus-visible { outline: 2px solid var(--base); outline-offset: 3px; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 760px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--base); color: var(--white); padding: 10px 18px; border-radius: var(--r-pill); font-weight: 500; }
.skip-link:focus { top: 16px; color: var(--white); }

.section { padding: var(--section) 0; position: relative; }
.section--tight { padding: calc(var(--section) * .55) 0; }
.section--tint { background: var(--primary); }

/* ── section title: the pill tagline over a heavy headline with one red phrase ─────────────── */
.tag {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  color: var(--base);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid var(--bdr);
  padding: 8px 18px 7px;
  border-radius: 14px;
  margin: 0 0 16px;
}
.on-dark .tag { border-color: rgba(255, 255, 255, .25); }
.section-title { margin-bottom: clamp(36px, 5vw, 58px); }
.section-title--center { text-align: center; }
.section-title--center .section-title__lede { margin-left: auto; margin-right: auto; }
.section-title h2 em, h1 em, .cta-band h2 em { font-style: normal; color: var(--base); }
.section-title__lede { max-width: 700px; margin-top: 18px; }

/* ── buttons: the template's pill with the circled arrow, and its filled red pill ──────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .32px;
  color: var(--black);
  background: transparent;
  border: 1px solid var(--bdr);
  padding: 5px 5px 5px 22px;
  border-radius: var(--r-pill);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: color .4s ease-in-out, border-color .4s ease-in-out;
  white-space: nowrap;
}
.btn::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 0;
  background: var(--black);
  transform: translate(-50%, -50%) rotate(-45deg);
  transition: height .6s ease;
  z-index: -1;
}
.btn:hover { color: var(--white); border-color: var(--black); }
.btn:hover::after { height: 380%; }
.btn__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  background: var(--base);
  color: var(--white);
  transition: transform var(--t) var(--ease), background-color var(--t) ease;
}
@media (hover: hover) and (pointer: fine) { .btn:hover .btn__icon { transform: rotate(-45deg); } }
/* Pressed: a press is confirmed before navigation, fast and small. */
.btn:active, .round-btn:active, .tabs__btn:active, .chooser__btn:active, .menu-toggle:active, .scrollup:active { transform: scale(.97); transition-duration: .12s; }
.btn--solid { background: var(--base); border-color: var(--base); color: var(--white); padding: 17px 30px; }
.btn--solid::after { background: var(--black); }
.btn--solid .btn__icon { width: auto; height: auto; background: none; }
.btn--light { color: var(--white); border-color: rgba(255, 255, 255, .35); }
.btn--light::after { background: var(--white); }
.btn--light:hover { color: var(--black); border-color: var(--white); }
.btn[disabled] { opacity: .6; cursor: default; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 34px; }

/* The template's "need help?" call box: a circled phone beside a two-line number. */
.callbox { display: inline-flex; align-items: center; gap: 16px; color: inherit; }
.callbox__icon {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1); color: var(--white);
  transition: background-color var(--t) ease, transform var(--t) var(--ease);
}
.callbox:hover .callbox__icon { background: var(--base); transform: scale(1.06); }
.callbox__label { display: block; font-size: 16px; line-height: 1.2; opacity: .85; }
.callbox__num { display: block; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: .02em; color: var(--white); }
.callbox--dark .callbox__icon { background: var(--primary); color: var(--base); }
.callbox--dark .callbox__num { color: var(--black); }

/* The red check circle the template lists with. */
.checks { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 34px; line-height: 1.45; }
.checks li::before {
  content: "";
  position: absolute; left: 0; top: .15em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.checks--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
@media (max-width: 767px) { .checks--two { grid-template-columns: 1fr; } }

/* ── header ───────────────────────────────────────────────────────────────────────────────── */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; padding: 28px 0; transition: background-color var(--t) ease, padding var(--t) ease, box-shadow var(--t) ease; }
.site-header.is-stuck { position: fixed; background: var(--black); padding: 14px 0; box-shadow: 0 10px 40px rgba(0, 0, 0, .18); animation: header-drop .6s var(--ease-out); }
@keyframes header-drop { from { transform: translateY(-100%); } to { transform: none; } }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; flex: none; }
.brand-logo { height: 46px; width: auto; }
.primary-nav ul { list-style: none; display: flex; gap: 4px; border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--r-pill); padding: 8px; }
.primary-nav a {
  display: block; padding: 9px 18px; border-radius: var(--r-pill);
  color: var(--white); font-size: 16px; font-weight: 500; line-height: 1.2;
  transition: background-color var(--t) ease, color var(--t) ease;
}
.primary-nav a:hover { color: var(--base); }
.primary-nav a[aria-current="page"] { background: var(--base); color: var(--white); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.header-phone { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; min-width: 44px; color: var(--white); font-weight: 700; font-size: 18px; letter-spacing: .02em; }
.header-phone:hover { color: var(--base); }
.header-phone svg { color: var(--base); }
.menu-toggle {
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--base); color: var(--white);
  display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; padding: 0 17px;
  transition: background-color var(--t) ease;
}
.menu-toggle:hover { background: var(--white); }
.menu-toggle:hover span:not(.sr-only) { background: var(--base); }
.menu-toggle span:not(.sr-only) { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: width var(--t) var(--ease); }
.menu-toggle span:nth-child(1) { width: 26px; }
.menu-toggle span:nth-child(2) { width: 18px; }
.menu-toggle span:nth-child(3) { width: 26px; }
.menu-toggle:hover span:nth-child(2) { width: 26px; }
.primary-nav a { white-space: nowrap; }
@media (max-width: 1279px) { .primary-nav { display: none; } }
@media (min-width: 1280px) and (max-width: 1399px) { .primary-nav a { padding: 9px 14px; } .header-phone__num { display: none; } }
@media (max-width: 767px) { .header-phone .header-phone__num { display: none; } .brand-logo { height: 38px; } .menu-toggle { width: 50px; height: 50px; padding: 0 14px; } .site-header { padding: 18px 0; } }
/* The narrowest phones: the header row is logo, call icon and menu, and it has to fit in 320px. */
@media (max-width: 374px) { .brand-logo { height: 31px; } .header-in { gap: 10px; } .header-actions { gap: 8px; } .menu-toggle { width: 46px; height: 46px; padding: 0 12px; } }

/* Off-canvas menu. Hidden and out of the accessibility tree until opened. */
.side-panel { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.side-panel.is-open { visibility: visible; pointer-events: auto; }
.side-panel__scrim { position: absolute; inset: 0; background: rgba(var(--black-rgb), .6); opacity: 0; transition: opacity var(--t) ease; border: 0; width: 100%; cursor: pointer; }
.side-panel.is-open .side-panel__scrim { opacity: 1; }
.side-panel__sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw);
  background: var(--black); color: rgba(255, 255, 255, .8); padding: 30px 34px 40px; overflow-y: auto;
  transform: translateX(100%); transition: transform .6s var(--ease-out);
}
.side-panel.is-open .side-panel__sheet { transform: none; }
.side-panel__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 34px; }
.panel-close { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: none; color: var(--white); font-size: 28px; line-height: 1; cursor: pointer; transition: background-color var(--t) ease, transform var(--t) var(--ease); }
.panel-close:hover { background: var(--base); transform: rotate(90deg); }
.side-panel nav ul { list-style: none; }
.side-panel nav a { display: block; padding: 12px 0; color: var(--white); font-size: 20px; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.side-panel nav a:hover, .side-panel nav a[aria-current="page"] { color: var(--base); }
.side-panel__contact { margin-top: 30px; }
.side-panel__contact .callbox__num { font-size: 22px; }

/* ── home hero: navy under a blurred red glow, the copy left, the photograph right ─────────── */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--black); color: rgba(255, 255, 255, .85);
  padding: clamp(150px, 16vw, 210px) 0 clamp(80px, 9vw, 130px);
}
.hero__glow { translate: 0 calc(var(--depth, 0) * 0.3px); position: absolute; width: 1287px; height: 1287px; left: -255px; top: -823px; background: var(--base); filter: blur(444px); border-radius: 50%; opacity: .85; z-index: -2; pointer-events: none; }
.hero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 120px);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.hero h1 { color: var(--white); font-size: clamp(42px, 5.6vw, 80px); font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.hero__lede { font-size: clamp(18px, 1.5vw, 20px); margin: 26px 0 0; max-width: 560px; }
.hero__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 34px 0 0; }
.hero__facts li { display: flex; flex-direction: column; }
.hero__facts b { font-size: 34px; line-height: 1; font-weight: 700; color: var(--white); }
.hero__facts span { font-size: 15px; color: rgba(255, 255, 255, .75); margin-top: 6px; }
.hero__media { position: relative; translate: 0 calc(var(--depth, 0) * -0.06px); }
.hero__frame {
  position: absolute; top: -34px; left: -34px; width: 58%; height: 62%;
  border: 1px solid rgba(var(--base-rgb), .8); z-index: 0;
}
.hero__photo { position: relative; z-index: 1; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s ease; }
.hero.is-in .hero__photo img { transform: scale(1); }
.hero__seal { position: absolute; z-index: 2; left: -44px; bottom: 40px; width: 128px; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .35)); }
.hero__seal .seal { animation: seal-turn 40s linear infinite; }
@keyframes seal-turn { to { transform: rotate(360deg); } }
.hero__form { margin-top: clamp(40px, 5vw, 70px); position: relative; z-index: 2; }
.lead-form--bar { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 3fr); gap: 10px 36px; align-items: end; }
.lead-form--bar .lead-bar__head { align-self: center; }
.lead-bar__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 14px; align-items: end; }
.lead-bar__fields .lead-field, .lead-bar__fields .lead-actions { margin: 0; }
.lead-form--bar .lead-status, .lead-form--bar .lead-consent, .lead-form--bar noscript { grid-column: 2; }
.lead-form--bar .lead-status:empty { display: none; }
@media (max-width: 1199px) { .lead-form--bar { grid-template-columns: 1fr; } .lead-form--bar .lead-status, .lead-form--bar .lead-consent, .lead-form--bar noscript { grid-column: 1; } .lead-bar__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lead-bar__fields .lead-actions { grid-column: 1 / -1; } }
@media (max-width: 575px) { .lead-bar__fields { grid-template-columns: 1fr; } }
@media (max-width: 991px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__media { max-width: 560px; }
  .hero__seal { left: auto; right: 16px; bottom: -30px; width: 112px; }
  .hero__frame { display: none; }
}

/* The hero's entrance: each beat slides in after the last, as the template's slider does. Tight
   steps (90ms) so the headline is legible almost at once and the rest follows in reading order. */
[data-reveal-armed] .beat { opacity: 0; transform: translateX(-40px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--beat, 0) * 90ms + 60ms); }
[data-reveal-armed] .beat--up { transform: translateY(36px); }
[data-reveal-armed] .beat--right { transform: translateX(40px); }
[data-reveal-armed] .is-in .beat { opacity: 1; transform: none; }
/* The hero photograph unveils upward, like a floor going down row by row, then settles. */
[data-reveal-armed] .hero__photo { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-out) .25s; }
[data-reveal-armed] .is-in .hero__photo { clip-path: inset(0 0 0 0); }

/* ── page head on inner pages: the full-bleed photograph under navy, centred title and crumbs ─ */
.page-head { position: relative; overflow: hidden; isolation: isolate; background: var(--black); padding: clamp(170px, 17vw, 230px) 0 clamp(90px, 9vw, 130px); text-align: center; color: rgba(255, 255, 255, .85); }
.page-head__bg { position: absolute; inset: 0; z-index: -2; }
.page-head__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 7s ease; }
.page-head.is-in .page-head__bg img { transform: scale(1); }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--black-rgb), .78) 0%, rgba(var(--black-rgb), .62) 55%, rgba(var(--black-rgb), .86) 100%); }
.page-head h1 { color: var(--white); font-size: clamp(38px, 5vw, 64px); font-weight: 700; max-width: 980px; margin: 0 auto; }
.page-head__lede { max-width: 720px; margin: 20px auto 0; font-size: clamp(17px, 1.4vw, 20px); }
.crumbs ol { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin: 24px 0 0; font-weight: 500; font-size: 16px; }
.crumbs li { display: inline-flex; align-items: center; gap: 14px; color: var(--white); }
.crumbs li + li::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--base); border-bottom: 2px solid var(--base); transform: rotate(-45deg); }
.crumbs a { color: var(--white); }
.crumbs a:hover { color: var(--base); }
.crumbs [aria-current] { color: rgba(255, 255, 255, .75); }

/* ── the red marquee band ─────────────────────────────────────────────────────────────────── */
.marquee { background: var(--base); color: var(--white); overflow: hidden; padding: 24px 0; position: relative; }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee__set { display: flex; align-items: center; flex: none; }
.marquee__item { display: inline-flex; align-items: center; gap: 34px; padding-right: 34px; font-size: clamp(28px, 3vw, 40px); font-weight: 700; line-height: 1; white-space: nowrap; }
.marquee__item:nth-child(even) .marquee__word { color: transparent; -webkit-text-stroke: 1.2px var(--white); }
.marquee__item svg { width: 44px; height: 44px; flex: none; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ── about split: portrait photograph inside the template's line-and-triangle geometry ─────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.split--reverse > :first-child { order: 2; }
@media (max-width: 991px) { .split, .split--reverse { grid-template-columns: minmax(0, 1fr); } .split--reverse > :first-child { order: 0; } }
.figure-geo { position: relative; padding: 40px 0 40px 60px; }
.figure-geo::before {
  content: ""; position: absolute; left: 0; top: 10%; width: 78%; height: 80%;
  background: linear-gradient(135deg, rgba(var(--base-rgb), .08), rgba(var(--base-rgb), .02));
  clip-path: polygon(0 100%, 42% 0, 100% 0, 58% 100%);
}
.figure-geo__lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.figure-geo__lines path { fill: none; stroke-width: 2; stroke-dasharray: 2000; stroke-dashoffset: 2000; transition: stroke-dashoffset 2.2s var(--ease-out); }
.figure-geo.is-in .figure-geo__lines path { stroke-dashoffset: 0; }
.figure-geo__photo { position: relative; z-index: 1; max-width: 400px; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px rgba(var(--black-rgb), .12); }
.figure-geo__photo img { width: 100%; height: 100%; object-fit: cover; }
.figure-geo__card {
  position: absolute; z-index: 2; left: 0; bottom: 70px;
  display: flex; align-items: center; gap: 16px;
  background: var(--primary); padding: 20px 26px; border-radius: 10px;
  box-shadow: 0 20px 40px rgba(var(--black-rgb), .08);
}
.figure-geo__card b { display: block; font-size: 34px; line-height: 1; font-weight: 700; color: var(--black); }
.figure-geo__card span { font-size: 16px; }
.figure-geo__card .seal { width: 84px; flex: none; }

/* Tabs, in the template's pill style. Every panel is in the DOM; only one is shown. */
.tabs__list { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 24px; }
.tabs__btn {
  font: 500 16px/1 var(--font); color: var(--black); background: var(--white);
  border: 1px solid var(--bdr); border-radius: var(--r-pill); padding: 15px 30px; cursor: pointer;
  transition: background-color var(--t) ease, color var(--t) ease, border-color var(--t) ease;
}
.tabs__btn:hover { border-color: var(--base); color: var(--base); }
.tabs__btn[aria-selected="true"] { background: var(--base); border-color: var(--base); color: var(--white); }
.tabs__panel[hidden] { display: none; }
.tabs__panel { animation: fade-up .6s var(--ease-out); }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── service cards (carousel and grid) ────────────────────────────────────────────────────── */
.svc-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1px solid var(--bdr); border-radius: var(--r-card); overflow: hidden; color: var(--gray); transition: box-shadow var(--t) ease, transform var(--t) var(--ease), border-color var(--t) ease; }
.svc-card:hover { box-shadow: 0 30px 60px rgba(var(--black-rgb), .1); border-color: transparent; color: var(--gray); }
@media (hover: hover) and (pointer: fine) { .svc-card:hover { transform: translateY(-6px); } }
.svc-card__media { position: relative; aspect-ratio: 410 / 300; overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .svc-card:hover .svc-card__media img { transform: scale(1.08); } }
.svc-card__media::after { content: ""; position: absolute; inset: 0; background: rgba(var(--black-rgb), .35); opacity: 0; transition: opacity var(--t) ease; }
.svc-card:hover .svc-card__media::after { opacity: 1; }
.svc-card__top { position: relative; display: block; }
.svc-card__icon {
  position: absolute; right: 40px; bottom: -40px; z-index: 2;
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--primary); color: var(--base);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--t) ease, color var(--t) ease, transform var(--t) var(--ease);
}
.svc-card:hover .svc-card__icon { background: var(--base); color: var(--white); transform: rotateY(180deg); }
.svc-card__icon svg { width: 40px; height: 40px; }
.svc-card__body { display: flex; flex-direction: column; flex: 1; padding: 42px 40px 40px; }
.svc-card__title { font-size: 24px; font-weight: 700; color: var(--black); line-height: 1.2; margin: 0 0 14px; }
.svc-card__text { font-size: 17px; line-height: 1.6; margin: 0 0 28px; }
.svc-card__more { margin-top: auto; }
.svc-card .btn { pointer-events: none; }
.svc-card:hover .btn { color: var(--white); border-color: var(--black); }
.svc-card:hover .btn::after { height: 380%; }
@media (max-width: 575px) { .svc-card__body { padding: 36px 26px 30px; } .svc-card__icon { right: 26px; bottom: -35px; width: 70px; height: 70px; } }

/* The showcase carousel: SiteKit animated-carousel-v1 mechanics, the template's card and its
   progress-bar indicator. The track is a native scroll container of real links. */
.showcase__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.showcase__controls { display: flex; gap: 12px; }
.round-btn {
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--primary); color: var(--base);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--t) ease, color var(--t) ease;
}
.round-btn:hover { background: var(--base); color: var(--white); }
.showcase__viewport { overflow: hidden; }
.showcase__track {
  list-style: none; display: flex; gap: 30px; overflow-x: auto; scrollbar-width: none;
  padding: 10px max(var(--gutter), calc((100vw - var(--container)) / 2)) 30px;
}
.showcase__track::-webkit-scrollbar { display: none; }
.showcase__track > li { flex: 0 0 clamp(290px, 30vw, 410px); }
.showcase__bar { height: 10px; max-width: 300px; margin: 20px auto 0; border-radius: 5px; background: var(--primary); overflow: hidden; }
.showcase__bar span { display: block; height: 100%; width: 34%; border-radius: 5px; background: var(--base); transform-origin: left; transition: transform .4s ease; }

/* ── the dark panel: rounded navy block with fact cards, the template's counter section ────── */
.dark-panel { position: relative; background: var(--black); color: rgba(255, 255, 255, .8); border-radius: 0 0 var(--r-panel) var(--r-panel); padding: var(--section) 0 calc(var(--section) + 120px); overflow: hidden; isolation: isolate; }
.dark-panel::before { content: ""; position: absolute; width: 700px; height: 700px; right: -260px; top: -300px; border-radius: 50%; background: var(--base); filter: blur(300px); opacity: .35; z-index: -1; }
.dark-panel h2 { color: var(--white); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.fact { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 34px 20px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-card); transition: border-color var(--t) ease, background-color var(--t) ease; }
.fact:hover { border-color: rgba(var(--base-rgb), .6); background: rgba(255, 255, 255, .02); }
.fact__top { display: flex; align-items: center; gap: 16px; }
.fact__top svg { width: 58px; height: 58px; color: var(--base); flex: none; }
.fact__num { font-size: clamp(44px, 4.5vw, 60px); font-weight: 700; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.fact__label { font-size: 18px; color: rgba(255, 255, 255, .85); }
.fact .seal { width: 106px; }
@media (max-width: 575px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* ── red call-to-action band, lifted over the dark panel's lower edge ─────────────────────── */
.cta-band-wrap { position: relative; margin-top: -120px; z-index: 2; }
/* On service pages the band closes the page on white, so it does not lift over anything. */
.cta-band-wrap--flat { margin-top: 0; }
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 30px 44px;
  background: var(--base); color: var(--white); border-radius: var(--r-card);
  padding: 44px 60px;
}
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 70% 120%, rgba(255, 255, 255, .18), transparent 55%); }
.cta-band__icon { width: 74px; height: 74px; color: var(--white); }
.cta-band h2 { color: var(--white); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; }
.cta-band h2 em { color: var(--black); }
.cta-band p { margin: 10px 0 0; color: rgba(255, 255, 255, .9); font-size: 17px; }
.cta-band__photo { align-self: stretch; width: 200px; margin: -44px 0; border-radius: 0; overflow: hidden; }
.cta-band__photo img { width: 100%; height: 100%; object-fit: cover; }
.cta-band .btn { color: var(--white); border-color: rgba(255, 255, 255, .6); }
.cta-band .btn::after { background: var(--white); }
.cta-band .btn:hover { color: var(--black); }
.cta-band .btn__icon { background: var(--black); }
@media (max-width: 1199px) { .cta-band { grid-template-columns: auto minmax(0, 1fr); } .cta-band__photo { display: none; } .cta-band .actions { grid-column: 1 / -1; margin-top: 0; } }
@media (max-width: 575px) { .cta-band { grid-template-columns: 1fr; padding: 36px 26px; } .cta-band__icon { width: 56px; height: 56px; } }

/* ── room chooser: the template's "we serve" pill list beside a white card ────────────────── */
.chooser { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 30px; align-items: start; }
.chooser__list { display: grid; gap: 18px; }
.chooser__btn {
  text-align: left; font: 700 18px/1.2 var(--font); color: var(--black);
  background: var(--white); border: 1px solid var(--bdr); border-radius: var(--r-pill); padding: 20px 30px; cursor: pointer;
  transition: border-color var(--t) ease, color var(--t) ease, box-shadow var(--t) ease;
}
.chooser__btn:hover { border-color: var(--base); }
.chooser__btn[aria-selected="true"] { border-color: var(--base); color: var(--base); box-shadow: 0 10px 30px rgba(var(--base-rgb), .12); }
.chooser__card { min-height: 360px; background: var(--white); border-radius: 30px; box-shadow: 0 30px 70px rgba(var(--black-rgb), .08); padding: clamp(30px, 4vw, 56px); min-height: 100%; }
.chooser__card h3 { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 14px; }
.chooser__picks { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; list-style: none; }
.chooser__picks a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-pill); background: var(--primary); color: var(--black); font-weight: 500; font-size: 16px; }
.chooser__picks a:hover { background: var(--base); color: var(--white); }
@media (max-width: 991px) { .chooser { grid-template-columns: minmax(0, 1fr); } .chooser__list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .chooser__btn { padding: 15px 20px; text-align: center; } }

/* ── boroughs ─────────────────────────────────────────────────────────────────────────────── */
.boroughs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.borough { position: relative; display: flex; flex-direction: column; padding: 30px 26px 28px; border: 1px solid var(--bdr); border-radius: var(--r-card); background: var(--white); color: var(--gray); transition: border-color var(--t) ease, transform var(--t) var(--ease), box-shadow var(--t) ease; overflow: hidden; }
.borough::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--base); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.borough:hover::before { transform: scaleX(1); }
.borough:hover { box-shadow: 0 24px 48px rgba(var(--black-rgb), .08); }
@media (hover: hover) and (pointer: fine) { .borough:hover { transform: translateY(-4px); } }
.borough__num { font-size: 14px; font-weight: 500; color: var(--base); letter-spacing: .1em; margin-bottom: 18px; }
.borough h3 { font-size: 24px; margin-bottom: 10px; }
.borough h3 a { color: var(--black); }
.borough h3 a:hover { color: var(--base); }
.borough p { font-size: 16px; line-height: 1.55; margin: 0; }
.borough__go { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 16px; }
@media (max-width: 1199px) { .boroughs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .boroughs { grid-template-columns: minmax(0, 1fr); } }

/* ── FAQ: the centred accordion contract, drawn as the template's pill questions ──────────── */
.faq { max-width: 900px; margin: 0 auto; display: grid; gap: 18px; }
:root { interpolate-size: allow-keywords; }
/* Open and close as a pair, where the browser can animate to an auto height. Elsewhere it simply opens. */
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq details { border: 1px solid var(--bdr); border-radius: 30px; background: var(--white); transition: border-color var(--t) ease, box-shadow var(--t) ease; }
.faq details[open] { border-color: rgba(var(--base-rgb), .5); box-shadow: 0 20px 44px rgba(var(--black-rgb), .06); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 18px 18px 30px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 18px; font-weight: 700; line-height: 1.35; }
.faq__arrow { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--primary); color: var(--black); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--t) var(--ease), background-color var(--t) ease, color var(--t) ease; }
.faq details[open] .faq__arrow { transform: rotate(90deg); background: var(--base); color: var(--white); }
.faq__answer { padding: 0 30px 26px; font-size: 17px; }
.faq__answer p:last-child { margin: 0; }

/* ── service detail layout: content column beside a sticky sidebar ────────────────────────── */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: clamp(30px, 4vw, 60px); align-items: start; }
.detail__main > * + * { margin-top: 1.1em; }
.detail__main h2 { font-size: clamp(30px, 3.4vw, 44px); margin-top: 1.4em; }
.detail__main h2:first-child { margin-top: 0; }
.detail__main .lede { font-size: 20px; color: var(--black); font-weight: 400; }
.detail__main .prose > p, .detail__main .prose > ul, .detail__main .prose > ol, .detail__main .lede { max-width: 70ch; }
.detail__figure { border-radius: var(--r-card); overflow: hidden; margin: 1.6em 0; }
.detail__figure img { width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.detail__figure:hover img { transform: scale(1.04); }
.detail__side { position: sticky; top: 110px; display: grid; gap: 30px; }
@media (max-width: 1199px) { .detail { grid-template-columns: minmax(0, 1fr); } .detail__side { position: static; } }
.side-box { border: 1px solid var(--bdr); border-radius: var(--r-card); padding: 34px 34px 36px; }
.side-box h2 { font-size: 30px; margin: 0 0 22px; }
.side-list { list-style: none; display: grid; gap: 14px; }
.side-list a { display: flex; align-items: center; gap: 12px; padding: 17px 22px; border-radius: 18px; background: var(--primary); color: var(--black); font-weight: 500; font-size: 16px; transition: background-color var(--t) ease, color var(--t) ease; }
.side-list a svg { color: var(--black); flex: none; transition: transform var(--t) var(--ease); }
.side-list a:hover, .side-list a[aria-current="page"] { background: var(--black); color: var(--white); }
.side-list a:hover svg, .side-list a[aria-current="page"] svg { color: var(--base); transform: translateX(3px); }
.side-call { position: relative; overflow: hidden; isolation: isolate; background: var(--black); color: rgba(255, 255, 255, .8); border-radius: var(--r-card); padding: 40px 34px; text-align: center; }
.side-call::before { content: ""; position: absolute; width: 360px; height: 360px; left: -120px; top: -200px; border-radius: 50%; background: var(--base); filter: blur(120px); opacity: .7; z-index: -1; }
.side-call h2 { color: var(--white); font-size: 28px; margin: 18px 0 10px; }
.side-call .seal { width: 106px; margin: 0 auto; }
.side-call .callbox { margin-top: 20px; justify-content: center; }
.side-call .btn { margin-top: 18px; }

/* Icon cards: the template's bordered card with a red-outlined icon box. */
.icon-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin: 2em 0; }
.icon-card { border: 1px solid var(--bdr); border-radius: var(--r-card); padding: 36px 36px 34px; transition: box-shadow var(--t) ease, border-color var(--t) ease; }
.icon-card:hover { border-color: transparent; box-shadow: 0 24px 50px rgba(var(--black-rgb), .08); }
.icon-card__head { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.icon-card__icon { width: 80px; height: 80px; flex: none; border: 1px solid var(--base); border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--base); transition: background-color var(--t) ease, color var(--t) ease; }
.icon-card:hover .icon-card__icon { background: var(--base); color: var(--white); }
.icon-card__icon svg { width: 42px; height: 42px; }
.icon-card h3 { font-size: 22px; }
.icon-card p { font-size: 17px; }
@media (max-width: 767px) { .icon-cards { grid-template-columns: minmax(0, 1fr); } .icon-card { padding: 28px 24px; } }

.figure-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.figure-pair figure { margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 410 / 361; }
.figure-pair img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 575px) { .figure-pair { grid-template-columns: minmax(0, 1fr); } }

/* Steps: a numbered process, one red node per step on a line that draws in. */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(var(--count, 4), minmax(0, 1fr)); gap: 30px; position: relative; margin-top: 10px; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 35px; height: 1px; background: var(--bdr); }
.steps::after { content: ""; position: absolute; left: 0; right: 0; top: 35px; height: 2px; background: var(--base); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease-out); }
.steps.is-in::after { transform: scaleX(1); }
.step { position: relative; counter-increment: step; }
.step__node { position: relative; z-index: 1; width: 70px; height: 70px; border-radius: 50%; background: var(--white); border: 1px solid var(--bdr); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: var(--black); margin-bottom: 22px; transition: background-color var(--t) ease, color var(--t) ease, border-color var(--t) ease; transition-delay: calc(var(--i, 0) * 250ms + 400ms); }
.steps.is-in .step__node { background: var(--base); color: var(--white); border-color: var(--base); }
.step h3 { font-size: 21px; margin-bottom: 10px; }
.step p { font-size: 16px; }
.dark-panel .steps::before { background: rgba(255, 255, 255, .15); }
.dark-panel .step__node { background: var(--black); border-color: rgba(255, 255, 255, .25); color: var(--white); }
.dark-panel .step h3 { color: var(--white); }
@media (max-width: 991px) { .steps { grid-template-columns: 1fr; gap: 24px; } .steps::before, .steps::after { left: 35px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; } .steps::after { width: 2px; transform: scaleY(0); transform-origin: top; } .steps.is-in::after { transform: scaleY(1); } .step { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 0 22px; } .step__node { margin: 0; } }

/* Inside the service content column the process is always the vertical timeline. */
.steps--vertical { grid-template-columns: 1fr; gap: 24px; margin-top: 26px; }
.steps--vertical::before, .steps--vertical::after { left: 35px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
.steps--vertical::after { width: 2px; transform: scaleY(0); transform-origin: top; }
.steps--vertical.is-in::after { transform: scaleY(1); }
.steps--vertical .step { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 0 22px; align-items: start; }
.steps--vertical .step__node { margin: 0; }
.steps--vertical .step h3 { margin-top: 18px; }

/* Comparison table. Real rows and headers, scrollable on a phone rather than squeezed. */
.table-wrap { overflow-x: auto; border: 1px solid var(--bdr); border-radius: var(--r-card); margin: 1.6em 0; }
.table-wrap table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 16px; }
.table-wrap th, .table-wrap td { text-align: left; padding: 18px 22px; border-bottom: 1px solid var(--bdr-soft); vertical-align: top; line-height: 1.45; }
.table-wrap thead th { background: var(--black); color: var(--white); font-weight: 500; }
.table-wrap tbody th { color: var(--black); font-weight: 700; white-space: nowrap; }
.table-wrap tbody tr:last-child > * { border-bottom: 0; }
.table-wrap tbody tr { transition: background-color var(--t-fast) ease; }
.table-wrap tbody tr:hover { background: var(--primary); }

/* Material cards on the installation hub. */
.material-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 1199px) { .material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .material-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── lead form. Dark glass in the hero, light elsewhere. ──────────────────────────────────── */
.lead-form { position: relative; border-radius: var(--r-card); padding: clamp(24px, 3vw, 36px); background: var(--white); border: 1px solid var(--bdr); }
.lead-form--glass { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: rgba(255, 255, 255, .85); }
.lead-form__heading { font-size: 22px; font-weight: 700; color: var(--black); margin: 0 0 4px; line-height: 1.25; }
.lead-form--glass .lead-form__heading { color: var(--white); }
.lead-form__sub { font-size: 16px; margin: 0 0 18px; }
.lead-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 575px) { .lead-row { grid-template-columns: minmax(0, 1fr); } }
.lead-field { margin: 0 0 14px; }
.lead-field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; color: var(--black); }
.lead-form--glass .lead-field label { color: rgba(255, 255, 255, .9); }
.lead-optional { font-weight: 300; opacity: .8; }
.lead-field input, .lead-field textarea, .lead-field select {
  width: 100%; font: 400 17px/1.3 var(--font); color: var(--black);
  background: var(--white); border: 1px solid var(--bdr); border-radius: var(--r-pill); padding: 15px 22px;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.lead-field textarea { border-radius: 22px; resize: vertical; min-height: 84px; }
.lead-form--glass .lead-field input, .lead-form--glass .lead-field textarea, .lead-form--glass .lead-field select { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); color: var(--white); }
.lead-form--glass .lead-field select option { color: var(--black); }
.lead-field input:focus, .lead-field textarea:focus, .lead-field select:focus { outline: none; border-color: var(--base); box-shadow: 0 0 0 3px rgba(var(--base-rgb), .25); }
.lead-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lead-actions { margin: 6px 0 0; }
.lead-form .btn { color: var(--black); }
.lead-form--glass .btn { color: var(--white); border-color: rgba(255, 255, 255, .5); }
.lead-form--glass .btn::after { background: var(--white); }
.lead-form--glass .btn:hover { color: var(--black); }
.lead-status { font-size: 16px; margin: 12px 0 0; min-height: 1.4em; }
.lead-status[data-state="error"] { color: #ff8e82; }
.lead-form:not(.lead-form--glass) .lead-status[data-state="error"] { color: var(--base-deep); }
.lead-status[data-state="ok"] { color: #7fd6a0; }
.lead-form:not(.lead-form--glass) .lead-status[data-state="ok"] { color: #1f7a45; }
.lead-consent { font-size: 13px; line-height: 1.5; margin: 12px 0 0; opacity: .85; }
.lead-consent a { color: inherit; text-decoration: underline; }
.lead-noscript { font-size: 15px; }

/* ── contact page ─────────────────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
@media (max-width: 991px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-cards { display: grid; gap: 20px; }
.contact-card { display: flex; gap: 20px; align-items: flex-start; padding: 26px 28px; border-radius: var(--r-card); background: var(--primary); }
.contact-card__icon { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--base); color: var(--white); display: inline-flex; align-items: center; justify-content: center; }
.contact-card h2 { font-size: 20px; margin-bottom: 6px; }
.contact-card p { font-size: 17px; margin: 0; }
.contact-card a { color: var(--black); font-weight: 700; font-size: 22px; }
.locations { list-style: none; display: grid; gap: 10px; margin: 8px 0 0; }
.locations li { font-size: 16px; line-height: 1.45; }
.locations a { font-weight: 500; font-size: 16px; }
.map { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--primary); aspect-ratio: 16 / 10; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.25); }

/* ── footer ───────────────────────────────────────────────────────────────────────────────── */
.site-footer { position: relative; background: var(--black); color: rgba(255, 255, 255, .72); overflow: hidden; isolation: isolate; }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-radial-gradient(circle at 20% 110%, rgba(255, 255, 255, .025) 0 2px, transparent 2px 38px); }
.footer-touch { border-bottom: 1px solid rgba(255, 255, 255, .1); padding: clamp(60px, 7vw, 90px) 0; }
.footer-touch a { display: flex; align-items: center; justify-content: center; gap: 30px; color: var(--white); font-size: clamp(44px, 7vw, 90px); line-height: 1; letter-spacing: -.02em; }
.footer-touch b { font-weight: 900; }
.footer-touch span { font-weight: 300; }
.footer-touch__arrow { width: clamp(56px, 6vw, 80px); height: clamp(56px, 6vw, 80px); flex: none; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--base); display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--t) ease, color var(--t) ease, transform var(--t) var(--ease); }
.footer-touch a:hover .footer-touch__arrow { background: var(--base); color: var(--white); transform: rotate(45deg); }
.footer-main { display: grid; grid-template-columns: 1.3fr .9fr .9fr 1.2fr; gap: 40px; padding: clamp(60px, 7vw, 90px) 0; }
@media (max-width: 1199px) { .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .footer-main { grid-template-columns: 1fr; } }
.footer-logo { height: 46px; width: auto; margin-bottom: 22px; }
.footer-about { font-size: 17px; }
.footer-seals { display: flex; gap: 14px; margin-top: 22px; }
.footer-seals .seal { width: 100px; }
.footer-title { color: var(--white); font-size: 24px; font-weight: 700; margin: 0 0 22px; }
.footer-links { list-style: none; display: grid; gap: 12px; }
.footer-links a { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .78); font-size: 17px; }
.footer-links a::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--base); border-bottom: 2px solid var(--base); transform: rotate(-45deg); transition: transform var(--t) var(--ease); }
.footer-links a:hover { color: var(--white); }
.footer-links a:hover::before { transform: translateX(3px) rotate(-45deg); }
.footer-contact { list-style: none; display: grid; gap: 16px; }
.footer-contact li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 1.45; }
.footer-contact__icon { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); display: inline-flex; align-items: center; justify-content: center; color: var(--white); }
.footer-contact a { color: var(--white); font-weight: 500; }
.footer-contact a:hover { color: var(--base); }
.footer-map { margin-top: 20px; aspect-ratio: 16 / 9; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; border-top: 1px solid rgba(255, 255, 255, .1); padding: 26px 90px 30px 0; font-size: 16px; }
.footer-bottom ul { list-style: none; display: flex; gap: 26px; flex-wrap: wrap; }
.footer-bottom a { color: rgba(255, 255, 255, .78); }
.footer-bottom a:hover { color: var(--white); }

/* Sticky call bar on phones, and the back-to-top control. */
.call-bar { display: none; }
/* The sticky call bar runs up to the width where the sidebar call card sits beside the content, so
   there is no width at which a long page has no way to call. */
@media (max-width: 1199px) {
  .call-bar { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; }
  .call-bar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: var(--r-pill); background: var(--base); color: var(--white); font-weight: 700; font-size: 17px; box-shadow: 0 14px 30px rgba(var(--base-rgb), .4); }
  body { padding-bottom: 84px; }
}
.scrollup { position: fixed; right: 26px; bottom: 26px; z-index: 80; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--base); color: var(--white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity var(--t) ease, transform var(--t) var(--ease), visibility var(--t); }
.scrollup.is-visible { opacity: 1; visibility: visible; transform: none; }
.scrollup:hover { background: var(--black); }
@media (max-width: 1199px) { .scrollup { bottom: 96px; right: 16px; width: 46px; height: 46px; } }
@media (min-width: 768px) and (max-width: 1199px) { .call-bar { left: auto; right: 24px; bottom: 24px; } .call-bar a { padding: 16px 30px; } .scrollup { bottom: 100px; right: 24px; } }

/* Seals are inline SVG so they take the page's type. */
.seal { display: block; width: 100%; height: auto; }
.seal__word { font-family: var(--font); font-weight: 700; font-size: 10.4px; letter-spacing: 1.6px; fill: var(--seal-ink); }

/* ── error and legal ──────────────────────────────────────────────────────────────────────── */
.legal { max-width: 820px; }
.legal h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 1.6em 0 .6em; }
.legal h2:first-child { margin-top: 0; }
.link-row { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.link-row a { display: inline-flex; padding: 12px 22px; border-radius: var(--r-pill); border: 1px solid var(--bdr); color: var(--black); font-weight: 500; font-size: 16px; }
.link-row a:hover { border-color: var(--base); color: var(--base); }

/* ── scroll reveals: the template's wow.js entrances, by IntersectionObserver ───────────────
   Hidden only under [data-reveal-armed], which the head sets where an observer exists and removes
   again if site.js never confirms it is running. Four moves, one easing:
     rise / side slide  groups arriving, in reading order
     mask               a photograph uncovered left to right, the way boards are laid
     zoom               the closing call to action arriving with more weight than what came before
     plank line         the red phrase in each heading underlined as the heading lands */
[data-reveal-armed] [data-reveal] { opacity: 0; transform: translateY(44px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), clip-path 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
[data-reveal-armed] [data-reveal="left"] { transform: translateX(-56px); }
[data-reveal-armed] [data-reveal="right"] { transform: translateX(56px); }
[data-reveal-armed] [data-reveal="zoom"] { transform: translateY(40px) scale(.94); }
[data-reveal-armed] [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
[data-reveal-armed] [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* A PHONE NEVER PANS SIDEWAYS. An element waiting to slide in from the side sits outside the
   viewport until it is revealed, and on a phone that widens the whole page: measured 426px of
   document on a 390px screen, so the page could be dragged left and right and the browser zoomed
   out to fit it. Below the desktop layout every arrival is vertical, and main clips anything that
   still reaches past the edge. clip, not hidden: it creates no scroll container, so the sticky
   sidebar keeps working. */
main { overflow-x: clip; }
@media (max-width: 991px) {
  [data-reveal-armed] [data-reveal="left"], [data-reveal-armed] [data-reveal="right"] { transform: translateY(44px); }
  [data-reveal-armed] .beat, [data-reveal-armed] .beat--right { transform: translateY(28px); }
  [data-reveal-armed] [data-reveal].is-in, [data-reveal-armed] .is-in .beat { transform: none; }
}

/* The plank line: the red phrase in a section heading gets an underline laid down as the heading
   arrives. The signature moment, on section titles only, never on the H1. */
.section-title h2 em { background: linear-gradient(var(--base), var(--base)) 0 100% / 100% 4px no-repeat; padding-bottom: 2px; }
[data-reveal-armed] .section-title h2 em { background-size: 0% 4px; transition: background-size 1s var(--ease-out) .35s; }
[data-reveal-armed] .section-title.is-in h2 em { background-size: 100% 4px; }

/* The closing band arrives heavier, and its icon swings into place. */
.cta-band__icon svg { transition: transform 1s var(--ease-out) .35s; }
[data-reveal-armed] .cta-band:not(.is-in) .cta-band__icon svg { transform: rotate(-35deg) scale(.6); }

/* Nothing stays hidden unless the script armed the reveals. If site.js never ran, the head's
   failsafe adds .reveal-off after 2.5s and every section shows. */
.reveal-off [data-reveal], .reveal-off .beat, .reveal-off .hero__photo { opacity: 1 !important; transform: none !important; clip-path: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  [data-reveal], .beat, .hero__photo { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .section-title h2 em { background-size: 100% 4px !important; }
  .hero__photo img, .page-head__bg img { transform: none !important; }
}