:root{
  --bg: #14181d;
  --bg-alt: #191e24;
  --surface: #1e242b;
  --ink: #f4f6f8;
  --ink-dim: #b9c1c9;
  /* was #7c848c: 4.12:1 on the darkest surface, under AA for
       the small labels using it. Same hue, lifted until it clears. */
    --muted: #848C93;
  --yellow: #ffcc33;
  --blue: #3d9bff;
  --border: rgba(244,246,248,0.1);
  --border-strong: rgba(244,246,248,0.2);
  /* Text/icon-safe version of the accent colour (kept equal to --yellow for the
     dark theme, since yellow-on-dark already passes contrast; the light theme
     below swaps this for a deeper amber so accent text stays readable). */
  --accent-ink: var(--yellow);
  --header-bg: rgba(20,24,29,0.9);
  --band-from: #1c2229;
  --band-to: #14181d;
  --focus-ring: var(--yellow);
  --font-head: "Teko", sans-serif;
  --font-body: "Inter", sans-serif;
}

/* ===== Light theme, derived from the palette above, not inverted =====
   Surfaces stay in the same relative order (surface lighter than bg, bg-alt
   distinct from bg); text colours are new dark tones, never a reused surface
   colour; the accent (--yellow) is unchanged since it is only ever used as a
   background under fixed dark text, but --accent-ink becomes a deeper amber
   wherever the accent is used as text/icon colour, to keep contrast on light
   surfaces. */
:root[data-theme="light"]{
  --bg: #f6f4ef;
  --bg-alt: #ece8df;
  --surface: #ffffff;
  --ink: #1b1f24;
  --ink-dim: #4c545c;
  --muted: #5b636d;
  --border: rgba(27,31,36,0.12);
  --border-strong: rgba(27,31,36,0.22);
  --accent-ink: #8a5a00;
  --header-bg: rgba(255,255,255,0.85);
  --band-from: #ffffff;
  --band-to: #f1eee6;
  --focus-ring: #8a5a00;
}
@media (prefers-color-scheme: light){
  /* No-JS fallback only: the inline head script normally sets data-theme
     explicitly before paint, so this rule only matters if JS is disabled. */
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    --bg: #f6f4ef;
    --bg-alt: #ece8df;
    --surface: #ffffff;
    --ink: #1b1f24;
    --ink-dim: #4c545c;
    --muted: #5b636d;
    --border: rgba(27,31,36,0.12);
    --border-strong: rgba(27,31,36,0.22);
    --accent-ink: #8a5a00;
    --header-bg: rgba(255,255,255,0.85);
    --band-from: #ffffff;
    --band-to: #f1eee6;
    --focus-ring: #8a5a00;
  }
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.6; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
section{ padding: clamp(56px, 8vw, 110px) 0; }

.demo-bar{
  background: var(--yellow); color:#14181d; font-family:var(--font-body); font-weight:600; font-size:13.5px;
  text-align:center; padding:10px 16px; position:sticky; top:0; z-index:200;
}
.demo-bar a{ text-decoration:underline; font-weight:700; }

/* The header sticks directly under the demo bar. 37px is the bar at one
   line; script.js measures the real height and overwrites --demo-bar-h,
   because the bar wraps to two or three lines on narrow screens. */
header{ position:sticky; top:var(--demo-bar-h, 37px); z-index:100; background:var(--header-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-size:28px; font-weight:600; letter-spacing:0.01em; text-transform:uppercase; min-width:0; }
.brand svg{ flex:none; }
nav.main-nav{ display:flex; gap:32px; min-width:0; }
nav.main-nav a{ font-size:14.5px; font-weight:500; color:var(--ink-dim); transition:color 200ms; }
nav.main-nav a:hover{ color:var(--ink); }
.header-actions{ display:flex; align-items:center; gap:16px; }
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; padding:13px 24px; border-radius:4px; transition:transform 200ms, background 200ms, color 200ms; }
.btn-yellow{ background:var(--yellow); color:#14181d; }
.btn-yellow:hover{ transform:translateY(-2px); background:#ffd75c; }
.btn-outline{ border:1px solid var(--border-strong); color:var(--ink); }
.btn-outline:hover{ border-color:var(--accent-ink); color:var(--accent-ink); }
.menu-toggle{ display:none; width:38px; height:38px; flex-direction:column; align-items:center; justify-content:center; gap:5px; flex:none; }
.menu-toggle span{ width:20px; height:2px; background: var(--ink); transition: transform 200ms, opacity 200ms; }
.menu-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:300;
  background: var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:32px;
  padding: 100px 24px 40px;
  overflow-y:auto;
  transform: translateY(-100%);
  transition: transform 320ms cubic-bezier(.65,0,.35,1);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu nav{ display:flex; flex-direction:column; gap:18px; }
.mobile-menu nav a{ font-family: var(--font-head); font-size: clamp(1.6rem,7vw,2.4rem); font-weight:600; text-transform:uppercase; color: var(--ink); }
.mobile-menu .btn{ align-self:flex-start; margin-top:8px; }

/* Close button inside the overlay. The hamburger in <header> (z-index:100)
   is buried by the open .mobile-menu (z-index:300), so the menu carries its
   own close affordance, sitting where the hamburger was. */
.mobile-menu-close{
  /* Fixed, not absolute, so it stays put if the menu has to scroll on a
     short (landscape) viewport. The open menu's transform makes it the
     containing block; when closed the rule below hides it outright. */
  position:fixed; top:18px; right:18px;
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: calc(18px + env(safe-area-inset-right, 0px));
  width:44px; height:44px; display:none;
  align-items:center; justify-content:center; color:var(--ink);
}
.mobile-menu.is-open .mobile-menu-close{ display:flex; }
.mobile-menu-close svg{ width:24px; height:24px; }

/* ===== Hazard-stripe accent, the site's signature motif ===== */
.hazard-stripe{
  height:12px;
  background: repeating-linear-gradient(135deg, var(--yellow) 0 16px, #14181d 16px 32px);
}

/* ===== Bold typographic hero (no photo) ===== */
.hero{ padding-top:clamp(64px,9vw,100px); padding-bottom:clamp(48px,7vw,80px); position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; top:-10%; right:-15%; width:55%; height:130%;
  background: radial-gradient(circle, rgba(255,204,51,0.14), transparent 70%);
  pointer-events:none; z-index:0;
}
.hero-inner{ position:relative; z-index:1; max-width:820px; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:12.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-ink); border:1px solid var(--border-strong); padding:7px 14px; border-radius:999px; margin-bottom:24px; }
h1{ font-family:var(--font-head); font-size:clamp(3rem,7.5vw,5.6rem); font-weight:600; text-transform:uppercase; line-height:0.98; letter-spacing:0; }
h1 em{ font-style:normal; color:var(--accent-ink); }
.hero p.lead{ margin-top:22px; font-size:18px; color:var(--ink-dim); max-width:56ch; }
.hero-cta{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }

.hero-badge-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:40px; }
.hero-badge{ display:inline-flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border-strong); border-radius:4px; padding:12px 18px; font-size:13px; color:var(--ink-dim); }
.hero-badge strong{ font-family:var(--font-head); color:var(--accent-ink); font-size:19px; font-weight:600; }

/* ===== Full-width stacked rows, services / process / emergencies ===== */
.impact-list{ display:flex; flex-direction:column; min-width:0; }
.impact-row{
  display:grid; grid-template-columns:minmax(min(76px,100%),76px) minmax(0,1fr); gap:24px; align-items:start;
  padding:32px 0; border-bottom:1px solid var(--border);
  transition:background 200ms;
}
.impact-list .impact-row:first-child{ border-top:1px solid var(--border); }
.impact-row:hover{ background:rgba(255,204,51,0.04); }
.impact-row > div{ min-width:0; }
.impact-num{ font-family:var(--font-head); font-size:44px; color:var(--border-strong); font-weight:600; line-height:1; transition:color 200ms; }
.impact-row:hover .impact-num{ color:var(--accent-ink); }
.impact-title{ display:flex; align-items:center; gap:14px; margin-bottom:8px; flex-wrap:wrap; }
.impact-title svg{ width:26px; height:26px; color:var(--accent-ink); flex:none; }
.impact-title h3{ font-family:var(--font-head); font-size:clamp(1.5rem,2.8vw,2.1rem); text-transform:uppercase; font-weight:600; }
.impact-row p{ color:var(--ink-dim); font-size:14.5px; max-width:60ch; }

.section-head{ max-width:620px; margin-bottom:48px; }
.tag{ display:inline-block; font-family:var(--font-body); font-size:12.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:14px; }
h2{ font-family:var(--font-head); font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:600; text-transform:uppercase; letter-spacing:0; }

.process{ background:var(--bg-alt); }

.emergency-band{ background: linear-gradient(120deg, var(--band-from), var(--band-to)); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.emergency-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.emergency-inner > *{ min-width:0; }
.emergency-inner h3{ font-family:var(--font-head); font-size:30px; text-transform:uppercase; }
.emergency-inner p{ color:var(--ink-dim); margin-top:6px; font-size:15px; }

.cta-band{ text-align:center; }
.cta-band .btn{ margin-top:26px; }

footer{ border-top:1px solid var(--border); padding:40px 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:13.5px; color:var(--muted); }

.reveal{ opacity:0; transform:translateY(20px); transition:opacity 600ms ease, transform 600ms ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (max-width:900px){
  nav.main-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .emergency-inner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:560px){
  .impact-row{ grid-template-columns:1fr; gap:8px; }
  .impact-num{ font-size:30px; }
}

/* ===========================================================
   Additions for the multi-page split, interior page hero
   banner, homepage services teaser, and the contact page.
   All rules below reuse the color tokens, border treatment,
   border-radius scale and fonts already defined above.
   =========================================================== */

/* ----- Interior page hero banner (services / process / emergency / contact) ----- */
.page-hero{
  padding: clamp(96px,14vw,150px) 0 clamp(48px,7vw,72px);
  position:relative; overflow:hidden;
  background: linear-gradient(160deg, var(--band-from), var(--band-to));
  border-bottom:1px solid var(--border);
}
.page-hero::before{
  content:""; position:absolute; top:-30%; right:-12%; width:60%; height:160%;
  background: radial-gradient(circle, rgba(255,204,51,0.14), transparent 70%);
  pointer-events:none;
}
.page-hero-inner{ position:relative; z-index:1; max-width:680px; }
.page-hero h1{ margin-top:14px; }
.page-hero p.lead{ margin-top:18px; font-size:17px; color:var(--ink-dim); max-width:56ch; }

/* ----- Homepage services teaser ----- */
.teaser-cta{ margin-top:40px; text-align:center; }

/* ----- Contact page ----- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; }
.contact-copy{ min-width:0; }
.contact-copy p{ color:var(--ink-dim); margin-top:14px; font-size:15px; max-width:48ch; }
.contact-details{ margin-top:28px; display:flex; flex-direction:column; gap:14px; }
.contact-details a{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; color:var(--ink); transition:color 200ms; min-width:0; }
.contact-details a:hover{ color:var(--accent-ink); }
.contact-details svg{ width:20px; height:20px; color:var(--accent-ink); flex:none; }

.contact-form{ background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:32px; min-width:0; }
.form-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.form-field{ margin-bottom:20px; min-width:0; }
.form-field:last-of-type{ margin-bottom:28px; }
.form-field label{ display:block; font-size:12.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.form-field input, .form-field textarea{
  width:100%; background:var(--bg); border:1px solid var(--border-strong); border-radius:4px; color:var(--ink);
  font-family:var(--font-body); font-size:15px; padding:12px 14px; transition:border-color 200ms;
}
.form-field input:focus, .form-field textarea:focus{ border-color:var(--accent-ink); }
.form-field textarea{ resize:vertical; min-height:120px; }

@media (max-width:900px){
  .contact-grid{ grid-template-columns:minmax(0,1fr); }
  .form-row{ grid-template-columns:minmax(0,1fr); }
}

/* ===========================================================
   Compliance pass additions. Skip link, theme toggle, back-to-
   top, the Kirosconsult badge, focus styles and reduced motion.
   All reuse the existing colour tokens and border/radius scale.
   =========================================================== */

/* ----- Skip link ----- */
.skip-link{
  position:absolute; left:12px; top:12px; z-index:1000;
  transform:translateY(-140%);
  background:var(--yellow); color:#14181d; font-weight:700; font-size:14px;
  padding:12px 18px; border-radius:4px; transition:transform 200ms ease;
}
.skip-link:focus{ transform:translateY(0); }

/* ----- Theme toggle (header + mobile menu variant) ----- */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:38px; height:38px; flex:none;
  border:1px solid var(--border-strong); border-radius:4px;
  color:var(--ink); background:none; transition:border-color 200ms, color 200ms;
}
.theme-toggle:hover{ border-color:var(--accent-ink); color:var(--accent-ink); }
.theme-toggle svg{ width:19px; height:19px; flex:none; }
.theme-toggle .icon-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:block; }
.theme-toggle-label{ display:none; }

@media (max-width:900px){
  /* The header's compact icon button has no room to spare on phone widths
     (it already fits brand + Book a Callout + hamburger with nothing left
     over), so the toggle moves into the slide-out mobile menu instead,
     same pattern the nav links and CTA already use. */
  .header-actions .theme-toggle{ display:none; }
}
.mobile-menu .theme-toggle{
  width:auto; height:auto; justify-content:flex-start; gap:12px;
  padding:12px 16px; align-self:stretch; border-radius:4px;
}
.mobile-menu .theme-toggle svg{ width:22px; height:22px; }
.mobile-menu .theme-toggle-label{
  display:inline; font-family:var(--font-body); font-size:15px; font-weight:600; text-transform:none; letter-spacing:0;
}

/* ----- Back to top ----- */
.back-to-top{
  position:fixed; right:20px; bottom:20px; z-index:250;
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  background:var(--yellow); color:#14181d; border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,0.28);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity 200ms ease, transform 200ms ease, visibility 200ms;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top svg{ width:20px; height:20px; }

/* ----- Kirosconsult demo badge (fixed, every page) ----- */
.kiros-badge{
  position:fixed; left:16px; bottom:16px; z-index:250;
  background:var(--surface); color:var(--ink-dim);
  border:1px solid var(--border-strong); border-radius:999px;
  padding:9px 16px; font-size:12.5px; font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,0.28);
}
.kiros-badge:hover{ color:var(--accent-ink); border-color:var(--accent-ink); }

@media (max-width:560px){
  .kiros-badge{ left:10px; bottom:10px; padding:8px 12px; font-size:11.5px; }
  .back-to-top{ right:14px; bottom:14px; width:42px; height:42px; }
}

/* ----- Visible focus styles on every interactive element ----- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ----- Reduced motion: turn every transition/animation off ----- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .back-to-top{ transform:none; }
}


/* ── Kirosconsult shared compliance fixes, 21 Sep 2026 ───────────────────────
   1. The off-canvas menu is moved with transform only, so its links stayed in
      the keyboard tab order while off screen. visibility:hidden takes them out;
      the 320ms delay lets the slide-out animation finish before it disappears.
   2. The menu overlay (z-index 300) sat above the header (100), so the burger
      could not be tapped a second time to close it. The header now sits above
      the overlay. The menu already pads 100px at the top, so nothing is hidden.
   (The sticky-offset fix is already implemented above via --demo-bar-h.)      */
.mobile-menu{visibility:hidden;transition:transform 320ms cubic-bezier(.65,0,.35,1),visibility 0s linear 320ms}
.mobile-menu.is-open{visibility:visible;transition:transform 320ms cubic-bezier(.65,0,.35,1),visibility 0s linear 0s}
header{z-index:400}
@media (prefers-reduced-motion:reduce){
  .mobile-menu,.mobile-menu.is-open{transition:none}
}

/* Scoped over the shared sweep above. The sweep raises the header to 400 so
   the burger stays tappable above the overlay; this demo instead closes the
   menu from a button inside the overlay (and Escape), so while the menu is
   open the header drops back under it and stays hidden. One close control,
   not two, and no reliance on backdrop-filter stacking on iOS Safari. */
body.menu-open header{ z-index:100; }


/* ── No-JS fallback for the demo bar height, 21 Sep 2026 ────────────────────
   The header sits under the demo bar using --demo-bar-h, which JavaScript
   measures at runtime. If the script does not run, the hardcoded fallback is
   all there is — and a single value cannot be right at both widths, because
   the bar is about 41px on one line and about 62px once it wraps below ~500px.
   A desktop-tuned fallback overlaps the header on a phone; a mobile-tuned one
   leaves a gap on desktop. Declaring the token responsively gives a sensible
   value at BOTH widths without trading one off against the other. JS still
   overrides it with the measured height the moment it runs. */
:root{ --demo-bar-h: 41px; }
@media (max-width: 500px){ :root{ --demo-bar-h: 62px; } }