/* ============================================================================
   CODORE — LOCKED HOME-PAGE TEMPLATE
   Colour, type, spacing all come from tokens.css. Rules of the house:
   square corners (radius 0), hairline borders (no shadows), flat fills
   (no gradients — the hero overlay is a flat navy at fixed opacity), no icons.
   Colour law: brand-blue fills take white text (--on-cyan), never dark ink.
   ========================================================================== */

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

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--text-body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  font-family:var(--font-head);
  color:var(--text-strong);
  line-height:1.1;
  margin:0;
}

a{ color:var(--blue); }

:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px; }

.shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--space-4); }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--white); color:var(--text-strong);
  padding:10px 16px; z-index:200;
}
.skip-link:focus{ left:8px; top:8px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.btn{
  display:inline-block; border-radius:var(--radius);
  padding:15px 26px; font-weight:500; font-size:var(--step-0);
  text-decoration:none; border:2px solid transparent; cursor:pointer;
}

/* =====================================================================
   Sticky stack: emergency banner + header travel together
   ===================================================================== */
.topstack{ position:sticky; top:0; z-index:100; }

/* 3.3 Emergency banner — WHITE, navy text (amber retired here; it stays the
   reserved emergency colour in tokens but is not applied on this page). ------ */
.emergency{
  background:var(--white);
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.emergency-inner{
  display:flex; align-items:center; gap:var(--space-3);
  min-height:40px; padding-block:6px;
}
.emergency p{ margin:0; font-size:var(--step--1); font-weight:500; }
.emergency-word{ font-family:var(--font-head); font-weight:700; }
.emergency a{ color:var(--ink); font-weight:700; text-underline-offset:3px; }
.emergency-close{
  margin-left:auto; background:transparent; border:0; cursor:pointer;
  color:var(--ink); font-size:1.5rem; line-height:1;
  padding:2px 8px; border-radius:var(--radius);
}
.emergency-close:hover{ background:color-mix(in srgb, var(--ink) 8%, transparent); }

/* 3.1 Header — sticky CYAN bar, dark logo + dark nav + inline phone link.
   Cyan is the final decision (navy fallback retired). ----------------------- */
.site-header{
  background:var(--cyan);
  color:var(--on-cyan);
}
.header-inner{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-4);
  min-height:72px; padding-block:8px;
}
.brand{ display:inline-flex; align-items:center; flex:0 0 auto; }
.brand-logo{ height:52px; width:auto; }

/* Nav centred between the logo (left) and the phone link (right) so the header
   reads balanced: logo ↔ nav ↔ phone, rather than nav shoved against the phone. */
.primary-nav{ margin:0 auto; }
.nav-list{
  display:flex; align-items:center; gap:var(--space-3);
  list-style:none; margin:0; padding:0;
}
.nav-list > li > a,
.menu-trigger{
  display:inline-block;
  font-family:var(--font-body); font-weight:500; font-size:var(--step-0);
  color:var(--on-cyan);
  text-decoration:none; background:transparent; border:0; cursor:pointer;
  padding:10px 12px; border-radius:var(--radius);
}
.nav-list > li > a:hover,
.menu-trigger:hover{ background:color-mix(in srgb, var(--on-cyan) 10%, transparent); }
.caret{ font-size:0.7em; margin-left:2px; }

/* 3.2 Dropdown menus — open on hover AND focus/click ---------------------- */
.has-menu{ position:relative; }
.menu-panel{
  position:absolute; top:100%; left:0; min-width:250px;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius);
  padding:6px; display:none; z-index:20;
}
.has-menu:hover .menu-panel,
.has-menu:focus-within .menu-panel,
.has-menu.is-open .menu-panel{ display:block; }
.menu-panel a{
  display:block; padding:10px 14px; text-decoration:none;
  color:var(--text-strong); font-size:var(--step-0); border-radius:var(--radius);
}
.menu-panel a:hover{ background:var(--soft); color:var(--blue); }

/* 3.4 Header phone — glyph + number as a text link (no button slab).
   White on the brand-blue bar (colour law). */
.header-call{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; white-space:nowrap;
  color:var(--on-cyan); padding:8px 4px;
}
.header-call:hover .header-call-num{ text-decoration:underline; text-underline-offset:3px; }
.header-call-icon{ flex:0 0 auto; display:block; }
.header-call-num{ font-family:var(--font-head); font-weight:700; font-size:var(--step-1); letter-spacing:-0.2px; }

.nav-toggle{ display:none; }

/* =====================================================================
   Home hero — full-bleed photo, FLAT navy overlay, left-aligned.
   (Scoped to .hero-home; the plain .hero class is the light page-title
   band used by inner pages — see the inner-page section further down.)
   ===================================================================== */
.hero-home{ position:relative; background:var(--ink-deep); isolation:isolate; }
.hero-home::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:var(--hero-bg) center/cover no-repeat;
}
.hero-home::after{
  /* Flat navy overlay at fixed opacity — not a gradient. */
  content:""; position:absolute; inset:0; z-index:-1;
  background:color-mix(in srgb, var(--ink) 82%, transparent);
}
.hero-inner{ padding-block:clamp(64px,10vw,140px); }
.hero-eyebrow{
  color:var(--cyan-lift); font-weight:500; letter-spacing:0.08em;
  text-transform:uppercase; font-size:var(--step--1); margin:0 0 var(--space-4);
}
.hero-home h1{
  color:var(--on-dark);
  font-size:var(--step-hero); font-weight:700; letter-spacing:-1.4px;
  max-width:14ch; margin:0 0 var(--space-4);
}
.hero-amp{ color:var(--cyan-lift); }
.hero-sub{
  color:var(--on-dark-2); font-size:var(--step-1);
  max-width:44ch; margin:0 0 var(--space-5);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.btn-call{
  background:var(--cyan); color:var(--on-cyan);           /* white on blue */
  font-family:var(--font-head); font-weight:700;
}
.btn-call:hover{ background:var(--cyan-lift); }
.btn-ghost{ color:var(--on-dark); border-color:var(--on-dark-muted); }
.btn-ghost:hover{ border-color:var(--on-dark); background:color-mix(in srgb, var(--on-dark) 8%, transparent); }

/* =====================================================================
   3.5 Accreditation bar — directly under hero
   ===================================================================== */
.accred{ background:var(--soft); border-bottom:1px solid var(--line); }
.accred-inner{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-5); padding-block:var(--space-4);
}
/* Accreditation marks — official third-party logos on clean white chips.
   Square corners, hairline border, no shadow; aspect ratio preserved and
   FENSA/CHAS sized consistently by matched height. */
.accred-logo{
  margin:0; display:flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--line-strong);
  border-radius:0; padding:8px 14px; height:64px; box-sizing:border-box;
}
.accred-logo img{ height:44px; width:auto; display:block; }
.accred-text{
  margin:0; font-family:var(--font-head); font-weight:500;
  color:var(--text-strong); font-size:var(--step-0);
}
.accred-text + .accred-text{ /* keep as separate items */ }

/* Accreditation strip — modest in-content row for service pages */
.accred-strip{ border-block:1px solid var(--line); background:var(--soft); }
.accred-strip-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--space-4); padding-block:var(--space-4);
}
.accred-strip-chip{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--line-strong); border-radius:0;
  padding:6px 12px; height:52px; box-sizing:border-box;
}
.accred-strip-chip img{ height:36px; width:auto; display:block; }
.accred-strip-text{
  margin:0; font-size:var(--step--1); color:var(--text-muted);
  max-width:34ch;
}

/* Hatched placeholder — visibly marks a missing real asset (brief-sanctioned) */
.placeholder-hatch{
  border:1px solid var(--line-strong);
  background:repeating-linear-gradient(45deg,
    var(--soft-2), var(--soft-2) 9px, var(--line) 9px, var(--line) 11px);
}

/* =====================================================================
   3.6 Services — current-site card layout, SQUARE corners, hairlines
   ===================================================================== */
.services{ padding-block:var(--space-7); }
.section-title{
  font-size:var(--step-3); font-weight:700; letter-spacing:-0.5px;
  text-align:center; margin-bottom:var(--space-6);
}
.service-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4);
}
.service-card{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius);           /* square */
}
.service-img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-bottom:1px solid var(--line); border-radius:0;
}
.service-body{ padding:var(--space-4); display:flex; flex-direction:column; flex:1; }
.service-body h3{ font-size:var(--step-1); font-weight:700; margin-bottom:var(--space-3); }
.service-body p{ margin:0 0 var(--space-3); font-size:var(--step-0); flex:1; }
.card-link{ font-weight:500; text-decoration:none; align-self:flex-start; }
.card-link:hover{ text-decoration:underline; }

/* Placeholder card image — same square footprint as a real photo (home
   .service-img and inner-page .card-img variants) */
.service-img.placeholder,
.card-img.placeholder{
  margin:0; aspect-ratio:4/3; position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
  display:flex; align-items:flex-end;
}
.service-img.placeholder .placeholder-hatch,
.card-img.placeholder .placeholder-hatch{ position:absolute; inset:0; border:0; }
.service-img.placeholder figcaption,
.card-img.placeholder figcaption{
  position:relative; margin:var(--space-3);
  background:var(--white); border:1px solid var(--line-strong);
  padding:8px 10px; font-size:var(--step--1); font-style:italic; color:var(--text-muted);
}

/* =====================================================================
   3.7 Why choose — Depot's split layout, recoloured to the main scheme
   ===================================================================== */
.why{ display:grid; grid-template-columns:1fr 1fr; border-block:1px solid var(--line); }
.why-photo{ margin:0; position:relative; min-height:420px; }
.why-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.why-copy{
  /* The ONE pale-cyan-tinted mid-page section (cyan ~6% over white). */
  background:color-mix(in srgb, var(--cyan) 6%, white); color:var(--text-body);
  padding:clamp(40px,6vw,88px) clamp(24px,5vw,72px);
}
.why-copy .kicker{ color:var(--blue); }
.kicker{
  font-family:var(--font-head); font-weight:500; text-transform:uppercase;
  letter-spacing:0.08em; font-size:var(--step--1); margin:0 0 var(--space-3);
}
.why-copy h2{
  color:var(--text-strong); font-size:var(--step-3); font-weight:700;
  letter-spacing:-0.5px; margin-bottom:var(--space-4);
}
.why-lead{ margin:0 0 var(--space-5); }
.why-list{ list-style:none; margin:0; padding:0; }
.why-list li{
  padding:var(--space-4) 0; border-top:1px solid var(--line-strong);
  display:flex; flex-direction:column; gap:4px;
}
.why-list li:last-child{ border-bottom:1px solid var(--line-strong); }
.why-item-title{
  font-family:var(--font-head); font-weight:700; color:var(--text-strong);
  font-size:var(--step-1);
}
.why-item-body{ font-size:var(--step-0); }

/* =====================================================================
   3.8 Credibility / how we work
   ===================================================================== */
.about{ padding-block:var(--space-7); background:var(--soft); }
.about-inner{
  display:grid; grid-template-columns:5fr 6fr; gap:clamp(28px,5vw,72px);
  align-items:start;
}
.about-text h2{ font-size:var(--step-2); font-weight:700; margin:0 0 var(--space-4); }
.about-text p{ margin:0 0 var(--space-4); }
.text-link{ font-weight:500; text-decoration:none; }
.text-link:hover{ text-decoration:underline; }
.how-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-strong); }
.how-list li{
  display:grid; grid-template-columns:44px 1fr; gap:var(--space-3);
  padding:var(--space-4) 0; border-bottom:1px solid var(--line);
}
.how-num{
  font-family:var(--font-head); font-weight:700; font-size:var(--step-2);
  color:var(--cyan); line-height:1;
}
.how-list h3{ font-size:var(--step-1); font-weight:500; margin:0 0 6px; }
.how-list p{ margin:0; font-size:var(--step-0); }

/* =====================================================================
   Closing emergency CTA — navy, phone large in cyan
   ===================================================================== */
.cta{ background:var(--ink); color:var(--on-dark-2); padding-block:var(--space-8); }
.cta h2{
  color:var(--on-dark); font-size:var(--step-3); font-weight:700;
  letter-spacing:-0.5px; max-width:22ch; margin:0 0 var(--space-3);
}
.cta-note{ margin:0 0 var(--space-5); }
.cta-phone{
  display:inline-block; font-family:var(--font-head); font-weight:700;
  font-size:var(--step-4); letter-spacing:-1.4px; line-height:1;
  color:var(--cyan-lift); text-decoration:none;
}
.cta-phone:hover{ color:var(--cyan); }
.cta-alt{ margin:var(--space-5) 0 0; }
.cta-alt a{ color:var(--on-dark-2); }

/* =====================================================================
   Footer
   ===================================================================== */
/* Footer — brand blue, white elements (colour law), to bookend the header.
   The logo's navy wordmark reads on blue; its ring blends (resolves with
   a proper light/mono logo later). */
.site-footer{ background:var(--cyan); color:var(--on-cyan); font-size:var(--step-0); }
.site-footer a{ color:var(--on-cyan); text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1.1fr 1.4fr; gap:var(--space-5);
  padding-block:var(--space-6) var(--space-5);
}
.footer-logo{ height:64px; width:auto; margin-bottom:var(--space-3); }

/* Social links — dark ink glyphs on cyan, square hairline tiles, no shadow. */
.footer-social{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-4) 0 0; padding:0; }
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; color:var(--on-cyan);
  border:1px solid color-mix(in srgb, var(--on-cyan) 32%, transparent);
}
.footer-social a:hover{ background:color-mix(in srgb, var(--on-cyan) 12%, transparent); text-decoration:none; }
.footer-social a:focus-visible{ outline:3px solid var(--on-cyan); outline-offset:2px; }
.footer-social svg{ width:20px; height:20px; display:block; fill:currentColor; }
.footer-heading{
  color:var(--ink); font-family:var(--font-head); font-weight:700;
  font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.08em;
  margin:0 0 var(--space-3);
}
.footer-heading + .footer-links + .footer-heading{ margin-top:var(--space-4); }
.footer-links{ list-style:none; margin:0; padding:0; }
.footer-links li{ margin-bottom:7px; }
.footer-address{ font-style:normal; line-height:1.7; }
.footer-phone{ font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:var(--step-1); }
.footer-hours{ margin-top:var(--space-3); }
.footer-bottom{ border-top:1px solid color-mix(in srgb, var(--on-cyan) 22%, transparent); padding-block:var(--space-4); font-size:var(--step--1); }
.footer-bottom p{ margin:0; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:900px){
  .nav-toggle{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    order:3; margin-left:auto; width:44px; height:44px;
    background:transparent; border:1px solid var(--on-cyan); border-radius:var(--radius);
    cursor:pointer;
  }
  .nav-toggle-bar{ display:block; height:2px; width:22px; margin:0 auto; background:var(--on-cyan); }
  .header-call{ order:2; }
  .primary-nav{ order:4; flex-basis:100%; margin-left:0; display:none; }
  .primary-nav.is-open{ display:block; background:var(--cyan); margin-inline:calc(-1 * var(--space-4)); padding-inline:var(--space-4); }
  .nav-list{ flex-direction:column; align-items:stretch; gap:0; padding-block:var(--space-2); }
  .nav-list > li > a,
  .menu-trigger{ width:100%; text-align:left; padding:12px; }
  .has-menu{ position:static; }
  .menu-panel{ position:static; min-width:0; border:0; padding:0 0 0 var(--space-4);
    display:none; background:transparent; }
  .has-menu.is-open .menu-panel{ display:block; }
  .has-menu:hover .menu-panel{ display:none; }
  .has-menu.is-open:hover .menu-panel{ display:block; }
  .menu-panel a{ color:var(--on-cyan); }
  .menu-panel a:hover{ background:color-mix(in srgb, var(--on-cyan) 10%, transparent); }

  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .why{ grid-template-columns:1fr; }
  .why-photo{ min-height:300px; }
  .about-inner{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:560px){
  .service-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:var(--space-5); }
  .accred-inner{ gap:var(--space-4); }
}

@media (prefers-reduced-motion:no-preference){
  a,.btn,.menu-trigger,.header-call,.emergency-close,.cta-phone{
    transition:background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  }
}

/* ============================================================================
   INNER PAGES — legacy page vocabulary re-skinned to the locked template.
   Same markup as before (re-skin, not rewrite): square corners, hairline
   borders, no shadows, no gradients, white/--soft alternating sections,
   navy reserved for the single .cta-band per page.
   ========================================================================== */

.container{ max-width:var(--shell); margin:0 auto; padding-inline:var(--space-4); }

/* --- Page-title hero (light band; the photographic hero is .hero-home) ----- */
.hero{ background:var(--soft); border-bottom:1px solid var(--line); }
.hero .container{ padding-block:clamp(44px,6.5vw,84px); }
.hero .eyebrow{
  color:var(--blue); font-weight:500; letter-spacing:0.08em;
  text-transform:uppercase; font-size:var(--step--1); margin:0 0 var(--space-3);
}
.hero h1{
  font-size:var(--step-4); font-weight:700; letter-spacing:-0.8px;
  max-width:24ch; margin:0 0 var(--space-4);
}
.hero p{ font-size:var(--step-1); color:var(--text-body); max-width:64ch; margin:0 0 var(--space-4); }
.hero p.eyebrow{ font-size:var(--step--1); }
.hero .hero-actions{ margin-top:var(--space-4); }

/* --- Photographic inner-page hero — flat navy overlay over a real photo, the
   same treatment as the home hero, used where a page genuinely calls for an
   image. Applied as `class="hero hero-photo"` with an inline `--hero-bg`. Text
   sits on the dark overlay (on-dark ink), so it stays legible on any photo. --- */
.hero-photo{
  position:relative; background:var(--ink-deep); isolation:isolate;
}
.hero-photo::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:var(--hero-bg) center/cover no-repeat;
}
.hero-photo::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:color-mix(in srgb, var(--ink) 78%, transparent);
}
.hero-photo .eyebrow{ color:var(--cyan-lift); }
.hero-photo h1{ color:var(--on-dark); }
.hero-photo p{ color:var(--on-dark-2); }
.hero-photo .btn-outline-light{ color:var(--on-dark); border-color:var(--on-dark-muted); }
.hero-photo .btn-outline-light:hover{
  border-color:var(--on-dark); background:color-mix(in srgb, var(--on-dark) 8%, transparent);
}

/* --- Sections --------------------------------------------------------------- */
.section{ padding-block:var(--space-7); background:var(--white); }
.section-alt{ background:var(--soft); border-block:1px solid var(--line); }
.section-narrow{ max-width:820px; margin-inline:auto; }
.text-center{ text-align:center; }
.lead{ font-size:var(--step-1); }
.center-btn{ text-align:center; margin-top:var(--space-5); }
.center-btn .btn{ margin:6px 6px 0 0; }
.mb-0{ margin-bottom:0; }
.section h2{ font-size:var(--step-3); font-weight:700; letter-spacing:-0.5px; margin:0 0 var(--space-3); }
.section h3{ font-size:var(--step-1); font-weight:700; }

/* --- Grids ------------------------------------------------------------------ */
.grid{ display:grid; gap:var(--space-4); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* --- Feature blocks — hairline top rule, no icons ---------------------------- */
.feature{ border-top:1px solid var(--line-strong); padding-top:var(--space-4); }
.feature h2{ font-size:var(--step-2); margin:0 0 var(--space-3); }
.feature h3{ margin:0 0 var(--space-2); }
.feature p{ margin:0 0 var(--space-2); }
/* Off-the-shelf line-icon blobs are banned everywhere — suppress any leftover. */
.feature-icon{ display:none; }

/* --- Cards (square, hairline, image-top) -------------------------------------- */
.card{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
}
.card-img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-bottom:1px solid var(--line); border-radius:0; }
.card-body{ padding:var(--space-4); display:flex; flex-direction:column; flex:1; }
.card-body h3{ margin:0 0 var(--space-2); }
.card-body p{ margin:0 0 var(--space-3); flex:1; }
.card-link{ font-weight:500; text-decoration:none; align-self:flex-start; }
.card-link:hover{ text-decoration:underline; }

/* --- Blog category filter ----------------------------------------------------- */
.blog-filter{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0 0 var(--space-5); }
.blog-filter-btn{
  font-family:var(--font-head); font-weight:500; font-size:var(--step--1);
  color:var(--text-strong); background:var(--white);
  border:1px solid var(--line-strong); border-radius:var(--radius-ctl);
  padding:8px 14px; cursor:pointer;
}
.blog-filter-btn:hover{ border-color:var(--text-strong); }
.blog-filter-btn.is-active{ background:var(--ink); color:var(--on-dark); border-color:var(--ink); }
.blog-filter-empty{ color:var(--text-muted); font-style:italic; margin:var(--space-4) 0 0; }
.post-cat{ color:var(--text-muted); }

/* In-article hero placeholder — banner-proportioned so it doesn't dwarf the copy */
.post-hero-ph{ aspect-ratio:16/7; margin:0 0 var(--space-5); border:1px solid var(--line); }

/* --- Buttons ------------------------------------------------------------------ */
.btn-primary{ background:var(--ink); color:var(--on-dark); }
.btn-primary:hover{ background:var(--ink-deep); }
.btn-accent{
  background:var(--cyan); color:var(--on-cyan);           /* white on blue — law */
  font-family:var(--font-head); font-weight:700;
}
.btn-accent:hover{ background:var(--cyan-lift); }
.btn-outline,
.btn-outline-light{ color:var(--text-strong); border-color:var(--line-strong); }
.btn-outline:hover,
.btn-outline-light:hover{ border-color:var(--text-strong); }

/* --- Closing CTA band — the ONE navy block per page ----------------------------- */
.cta-band{ background:var(--ink); color:var(--on-dark-2); padding-block:var(--space-7); text-align:center; }
.cta-band h2{ color:var(--on-dark); font-size:var(--step-3); font-weight:700; letter-spacing:-0.5px; margin:0 0 var(--space-3); }
.cta-band p{ margin:0 0 var(--space-4); }
.cta-band .btn{ margin:4px 6px; }
.cta-band .btn-outline{ color:var(--on-dark); border-color:var(--on-dark-muted); }
.cta-band .btn-outline:hover{ border-color:var(--on-dark); }

/* --- Lists / FAQ ------------------------------------------------------------------ */
.check-list{ list-style:square; padding-left:1.2em; margin:0 0 var(--space-4); }
.check-list li{ margin-bottom:8px; }
.check-list li::marker{ color:var(--cyan); }
.faq details{ border-top:1px solid var(--line-strong); }
.faq details:last-child{ border-bottom:1px solid var(--line-strong); }
.faq summary{
  font-family:var(--font-head); font-weight:500; font-size:var(--step-1);
  color:var(--text-strong); padding:var(--space-3) 0; cursor:pointer;
}
.faq summary:hover{ color:var(--blue); }
.faq details p{ margin:0 0 var(--space-4); }

/* --- Media (text + image) ----------------------------------------------------------- */
.media{ display:grid; grid-template-columns:3fr 2fr; gap:clamp(24px,5vw,64px); align-items:center; }
.media img{ border:1px solid var(--line); border-radius:0; }
.media-text h2{ margin-bottom:var(--space-3); }

/* --- Prose (long copy, blog posts) ---------------------------------------------------- */
.prose h1{ font-size:var(--step-4); letter-spacing:-0.8px; margin:0 0 var(--space-3); }
.prose h2{ font-size:var(--step-2); margin:var(--space-5) 0 var(--space-3); }
.prose h3{ font-size:var(--step-1); margin:var(--space-4) 0 var(--space-2); }
.prose p{ margin:0 0 var(--space-3); }
.prose ul, .prose ol{ margin:0 0 var(--space-3); padding-left:1.3em; }
.prose li{ margin-bottom:6px; }
.prose li::marker{ color:var(--cyan); }
.prose img{ border:1px solid var(--line); border-radius:0; }
.post-body{ max-width:820px; }
.post-meta{ color:var(--text-muted); font-size:var(--step--1); margin:0 0 var(--space-4); }
.breadcrumbs{ font-size:var(--step--1); color:var(--text-muted); margin-bottom:var(--space-4); }
.breadcrumbs a{ text-decoration:none; }
.breadcrumbs a:hover{ text-decoration:underline; }

/* --- Contact block ---------------------------------------------------------------------- */
.contact-block{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); align-items:start; }
.contact-details h3{ margin:0 0 var(--space-3); }
.contact-details address{ font-style:normal; line-height:1.8; margin:0 0 var(--space-3); }
.big-phone{
  font-family:var(--font-head); font-weight:700; font-size:var(--step-2);
  color:var(--text-strong); text-decoration:none; letter-spacing:-0.5px;
}
.big-phone:hover{ color:var(--blue); }
.form-card{ background:var(--white); border:1px solid var(--line); padding:var(--space-5); }
.form-card h3{ margin:0 0 var(--space-3); }
.form-note{ font-size:var(--step--1); color:var(--text-muted); }
.badge-chip{
  display:inline-block; border:1px solid var(--line-strong); padding:4px 12px;
  font-family:var(--font-head); font-weight:500; font-size:var(--step--1);
  color:var(--text-strong); letter-spacing:0.05em; text-transform:uppercase;
}

/* --- Inner-page responsive ---------------------------------------------------------------- */
@media (max-width:900px){
  .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-2, .media, .contact-block{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .grid-3, .grid-4{ grid-template-columns:1fr; }
}