/*
Theme Name: Kurt Binder Bau
Theme URI: https://kurtbinderbau.de
Author: Kurt Binder Bau GmbH
Author URI: https://kurtbinderbau.de
Description: Modernes, industrielles WordPress-Theme für die Kurt Binder Bau GmbH – Tiefbau, Fräsarbeiten, Recycling und Vermietung. Familienunternehmen seit über 20 Jahren.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kurt-binder-bau
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --color-ink:        #15181c;   /* near-black charcoal */
  --color-ink-2:      #1f242a;   /* panels */
  --color-ink-3:      #2a3037;   /* borders on dark */
  --color-steel:      #3a424b;
  --color-concrete:   #e8e6e1;   /* warm light bg */
  --color-concrete-2: #f4f3f0;
  --color-paper:      #ffffff;
  --color-accent:     #c8202a;   /* signal red */
  --color-accent-2:   #e23b32;
  --color-accent-ink: #ffffff;   /* text on accent */
  --color-text:       #20242a;
  --color-text-soft:  #5a626c;
  --color-text-invert:#eef0f2;
  --color-text-mute-invert:#9aa3ad;

  /* License-free, self-contained system font stacks (no external loading → DSGVO-safe). */
  --font-display: "Helvetica Neue", "Arial Narrow", "Segoe UI", system-ui, Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1200px;
  --radius: 4px;
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.45);
  --shadow-md: 0 12px 30px -12px rgba(0,0,0,.35);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.005em; }
p { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--color-accent); display: inline-block; }

.section { padding: 110px 0; }
.section--dark { background: var(--color-ink); color: var(--color-text-invert); }
.section--concrete { background: var(--color-concrete-2); }
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3.1rem); text-transform: uppercase; }
.section--dark .section-head p,
.section--dark p { color: var(--color-text-mute-invert); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  font-size: .92rem;
  padding: 16px 30px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); transform: translateY(-3px); }
.btn--ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-3px); }
.btn--dark { background: var(--color-ink); color: #fff; }
.btn--dark:hover { background: var(--color-steel); transform: translateY(-3px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s, box-shadow .3s, padding .3s;
  padding: 18px 0;
}
.site-header.is-scrolled {
  background: rgba(21,24,28,.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px -12px rgba(0,0,0,.6);
  padding: 10px 0;
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; color: #fff; }
.brand__mark {
  width: 46px; height: 46px; flex: 0 0 auto;
  background: var(--color-accent); color: var(--color-accent-ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  border-radius: var(--radius);
  transform: skewX(-6deg);
}
.brand__mark span { transform: skewX(6deg); }
.brand__name { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; font-size: 1.18rem; }
.brand__name small { display: block; font-size: .62rem; letter-spacing: .28em; color: var(--color-accent); font-weight: 500; }
.brand--logo { gap: 0; }
.brand--text .wordmark { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 1.5rem; line-height: 1; color: #fff; white-space: nowrap; }
.brand--text .wm-accent { color: var(--color-accent); }
@media (max-width: 540px) { .brand--text .wordmark { font-size: 1.1rem; } }
.brand--logo img, .custom-logo { max-height: 58px; width: auto; height: auto; display: block; border-radius: 4px; }
.site-header.is-scrolled .brand--logo img, .site-header.is-scrolled .custom-logo { max-height: 46px; transition: max-height .3s; }
.brand--footer img, .brand--footer .custom-logo { max-height: 74px; }
@media (max-width: 540px) {
  .brand--logo img, .custom-logo { max-height: 46px; }
}

.main-nav ul { display: flex; align-items: center; gap: 30px; }
.main-nav a {
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .1em; font-size: .92rem; font-weight: 500;
  color: var(--color-text-invert); position: relative; padding: 4px 0;
}
.main-nav a::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--color-accent); transition:width .25s var(--ease); }
.main-nav a:hover::after { width:100%; }
.header-cta { display: flex; align-items: center; gap: 18px; }
.header-phone { display:flex; align-items:center; gap:8px; color:#fff; font-family:var(--font-display); font-size:1.05rem; letter-spacing:.04em; }
.header-phone svg { width:18px; height:18px; color:var(--color-accent); }

.nav-toggle { display:none; background:none; border:0; cursor:pointer; width:44px; height:44px; }
.nav-toggle span { display:block; width:26px; height:2px; background:#fff; margin:5px auto; transition:.3s; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  color: #fff; overflow: hidden;
  background: var(--color-ink);
}
.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__bg img { width:100%; height:100%; object-fit:cover; }
.hero__bg::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(105deg, rgba(15,17,20,.94) 0%, rgba(15,17,20,.78) 42%, rgba(15,17,20,.35) 100%),
    linear-gradient(0deg, rgba(15,17,20,.85), rgba(15,17,20,0) 40%);
}
.hero__content { position: relative; z-index: 2; max-width: 760px; padding-top: 90px; }
.hero h1 {
  font-size: clamp(2.8rem, 6.5vw, 5.6rem);
  text-transform: uppercase;
  margin-bottom: .35em;
}
.hero h1 .accent { color: var(--color-accent); display:block; }
.hero__lead { font-size: 1.25rem; color: #d5d9de; max-width: 560px; margin-bottom: 2.2rem; }
.hero__actions { display:flex; flex-wrap:wrap; gap:16px; }
.hero__stats {
  position: relative; z-index: 2;
  display:flex; flex-wrap:wrap; gap: 48px;
  margin-top: 64px; padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.stat__num { font-family:var(--font-display); font-size:2.8rem; font-weight:600; color:var(--color-accent); line-height:1; }
.stat__label { font-size:.9rem; letter-spacing:.04em; color:#aeb6bf; text-transform:uppercase; }
/* ============================================================
   SERVICES
   ============================================================ */
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.service-card {
  position:relative; background:var(--color-ink-2); border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--color-ink-3);
  display:flex; flex-direction:column;
  transition: transform .35s var(--ease), border-color .35s;
}
.service-card:hover { transform:translateY(-8px); border-color:var(--color-accent); }
.service-card__media { aspect-ratio: 4/3; overflow:hidden; position:relative; }
.service-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.service-card:hover .service-card__media img { transform:scale(1.07); }
.service-card__num { position:absolute; top:14px; left:14px; background:var(--color-accent); color:var(--color-accent-ink); font-family:var(--font-display); font-weight:700; font-size:.85rem; padding:4px 10px; border-radius:3px; letter-spacing:.05em; }
.service-card__body { padding:26px 24px 28px; display:flex; flex-direction:column; flex:1; }
.service-card__body h3 { color:#fff; text-transform:uppercase; font-size:1.4rem; margin-bottom:.5em; }
.service-card__body p { color:var(--color-text-mute-invert); font-size:.97rem; margin-bottom:1.1em; }
.service-card__list { margin-top:auto; }
.service-card__list li { display:flex; gap:9px; align-items:flex-start; color:#c7cdd4; font-size:.92rem; padding:5px 0; border-top:1px solid var(--color-ink-3); }
.service-card__list li:first-child { border-top:0; }
.service-card__list li::before { content:""; flex:0 0 auto; width:7px; height:7px; margin-top:7px; background:var(--color-accent); transform:rotate(45deg); }

/* ============================================================
   ABOUT
   ============================================================ */
.about { display:grid; grid-template-columns:1.05fr 1fr; gap:70px; align-items:center; }
.about__media { position:relative; }
.about__media img { border-radius:var(--radius); box-shadow:var(--shadow-md); }
.about__badge {
  position:absolute; bottom:-28px; left:-28px;
  background:var(--color-accent); color:var(--color-accent-ink);
  padding:22px 26px; border-radius:var(--radius); box-shadow:var(--shadow-md);
}
.about__badge b { font-family:var(--font-display); font-size:2.6rem; display:block; line-height:1; }
.about__badge span { text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:600; }
.about h2 { font-size:clamp(2rem,4vw,3rem); text-transform:uppercase; }
.feature-list { display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; margin-top:28px; }
.feature-list li { display:flex; gap:12px; align-items:flex-start; font-weight:500; }
.feature-list svg { flex:0 0 auto; width:24px; height:24px; color:var(--color-accent); margin-top:2px; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-grid { display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:200px; gap:14px; }
.gallery-grid figure { margin:0; overflow:hidden; border-radius:var(--radius); position:relative; }
.gallery-grid img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery-grid figure:hover img { transform:scale(1.08); }
.gallery-grid figure::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(245,166,35,.0),rgba(0,0,0,0)); transition:background .3s; }
.gallery-grid figure:hover::after { background:linear-gradient(0deg,rgba(245,166,35,.18),rgba(0,0,0,0)); }
.g-wide { grid-column:span 3; }
.g-tall { grid-row:span 2; grid-column:span 2; }
.g-std  { grid-column:span 2; }

/* ============================================================
   CTA STRIP
   ============================================================ */
.cta-strip { background:var(--color-accent); color:var(--color-accent-ink); }
.cta-strip__inner { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:64px 0; flex-wrap:wrap; }
.cta-strip h2 { font-size:clamp(1.8rem,3.4vw,2.6rem); text-transform:uppercase; margin:0; max-width:680px; }
.cta-strip p { margin:.6em 0 0; font-weight:500; opacity:.85; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.contact-card {
  background:var(--color-ink-2); border:1px solid var(--color-ink-3); border-radius:var(--radius);
  padding:34px 30px; transition:border-color .3s, transform .3s;
}
.contact-card:hover { border-color:var(--color-accent); transform:translateY(-6px); }
.contact-card__role { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; color:var(--color-accent); font-size:.85rem; margin-bottom:14px; }
.contact-card h3 { color:#fff; font-size:1.5rem; margin-bottom:18px; }
.contact-card a { display:flex; align-items:center; gap:11px; color:#c7cdd4; padding:8px 0; font-size:1rem; transition:color .25s; }
.contact-card a:hover { color:var(--color-accent); }
.contact-card svg { width:19px; height:19px; flex:0 0 auto; color:var(--color-accent); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:#0e1013; color:var(--color-text-mute-invert); padding:64px 0 28px; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-brand .brand { margin-bottom:18px; }
.footer-brand p { max-width:340px; font-size:.95rem; }
.footer-col h4 { color:#fff; text-transform:uppercase; font-size:1rem; letter-spacing:.08em; margin-bottom:18px; }
.footer-col a { display:block; padding:6px 0; transition:color .25s; }
.footer-col a:hover { color:var(--color-accent); }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-top:24px; font-size:.86rem; }
.footer-bottom a:hover { color:var(--color-accent); }

/* ============================================================
   PAGE (legal etc.)
   ============================================================ */
.page-hero { background:var(--color-ink); color:#fff; padding:160px 0 70px; }
.page-hero h1 { font-size:clamp(2.2rem,5vw,3.4rem); text-transform:uppercase; }
.page-body { padding:70px 0 110px; }
.page-body .container { max-width:820px; }
.page-body h2 { font-size:1.7rem; margin-top:1.6em; text-transform:uppercase; }
.page-body h3 { font-size:1.25rem; margin-top:1.3em; }
.page-body a { color:var(--color-accent-ink); border-bottom:2px solid var(--color-accent); }
.page-body ul { list-style:disc; padding-left:1.3em; margin:0 0 1.2em; }
.page-body ul li { padding:3px 0; }

/* ============================================================
   ANIMATIONS (reveal on scroll)
   ============================================================ */
[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal]{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .gallery-grid { grid-template-columns:repeat(4,1fr); }
  .g-wide{grid-column:span 2;} .g-tall{grid-column:span 2;grid-row:span 1;} .g-std{grid-column:span 2;}
}
@media (max-width: 820px) {
  .section { padding:72px 0; }
  .main-nav, .header-phone { display:none; }
  .nav-toggle { display:block; }
  .main-nav.is-open {
    display:block; position:absolute; top:100%; left:0; right:0;
    background:rgba(21,24,28,.98); padding:20px 24px;
  }
  .main-nav.is-open ul { flex-direction:column; align-items:flex-start; gap:6px; }
  .main-nav.is-open a { padding:10px 0; font-size:1.1rem; }
  .about { grid-template-columns:1fr; gap:48px; }
  .about__badge { left:auto; right:18px; bottom:-22px; }
  .feature-list { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; gap:30px; }
  .cta-strip__inner { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 540px) {
  body{font-size:16px;}
  .services-grid { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .g-wide,.g-tall,.g-std{grid-column:span 1;grid-row:span 1;}
  .hero__stats{gap:28px;}
  .stat__num{font-size:2.1rem;}
}

/* ============================================================
   SIGNATURE ELEMENTS (distinctive identity)
   ============================================================ */

/* Hazard stripe – construction-tape motif used as section dividers */
.hazard {
  height: 14px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--color-accent) 0, var(--color-accent) 22px,
    var(--color-ink) 22px, var(--color-ink) 44px
  );
}
.hazard--sm { height: 8px; }

/* Blueprint grid overlay for the hero */
.hero__grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 60%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 60%);
}

/* Vertical side label */
.hero__side {
  position: absolute; right: 30px; top: 50%; z-index: 2;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .42em;
  font-size: .72rem; color: rgba(255,255,255,.4);
  display: flex; align-items: center; gap: 16px;
}
.hero__side::after { content:""; width:1px; height:70px; background:linear-gradient(var(--color-accent),transparent); }

/* Running service ticker / marquee */
.ticker {
  background: var(--color-accent); color: var(--color-accent-ink);
  overflow: hidden; white-space: nowrap; padding: 16px 0;
  border-top: 3px solid var(--color-ink); border-bottom: 3px solid var(--color-ink);
}
.ticker__track { display: inline-flex; align-items: center; gap: 0; animation: ticker 26s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker span { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 1.55rem; padding: 0 26px; display: inline-flex; align-items: center; gap: 26px; }
.ticker span::after { content:"★"; font-size: .9rem; opacity: .7; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Big section index label */
.section-index { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 9vw, 7rem); line-height: .85; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.5px rgba(20,24,28,.13); margin-bottom: .15em; }
.section--dark .section-index { -webkit-text-stroke-color: rgba(255,255,255,.16); }

/* Leistungs-Index – interactive numbered rows with photo reveal */
.svc-index { border-top: 1px solid var(--color-ink-3); }
.svc-row {
  position: relative; display: grid;
  grid-template-columns: 80px minmax(0,1fr) 56px; align-items: center; gap: 24px;
  padding: 36px 28px; border-bottom: 1px solid var(--color-ink-3);
  color: var(--color-text-invert); overflow: hidden;
  transition: color .35s var(--ease);
}
.svc-row > * { position: relative; z-index: 2; }
.svc-row__bg { position: absolute; inset: 0; z-index: 0; background: var(--color-accent); transform: translateY(101%); transition: transform .45s var(--ease); }
.svc-row__num { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: transparent; -webkit-text-stroke: 1.4px var(--color-accent); transition: -webkit-text-stroke-color .35s, color .35s; }
.svc-row__main { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.svc-row__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1; transition: text-shadow .35s; }
.svc-row__tags { color: var(--color-text-mute-invert); font-family: var(--font-body); font-size: .74rem; font-weight: 500; line-height: 1.5; text-transform: uppercase; letter-spacing: .16em; max-width: 540px; transition: color .35s; }
.svc-row__arrow { width: 52px; height: 52px; border: 2px solid var(--color-ink-3); border-radius: 50%; display: grid; place-items: center; transition: transform .4s var(--ease), border-color .35s, background .35s; }
.svc-row__arrow svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.svc-row__thumb { position: absolute; z-index: 1; right: 30px; top: 50%; width: 340px; height: 215px; transform: translateY(-50%) scale(.82) rotate(-3deg); opacity: 0; border-radius: var(--radius); overflow: hidden; border: 3px solid var(--color-accent-ink); box-shadow: var(--shadow-lg); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; }
.svc-row__thumb img { width: 100%; height: 100%; object-fit: cover; }

@media (hover: hover) {
  .svc-row:hover { color: var(--color-accent-ink); }
  .svc-row:hover .svc-row__bg { transform: translateY(0); }
  .svc-row:hover .svc-row__num { color: var(--color-accent-ink); -webkit-text-stroke-color: transparent; }
  .svc-row:hover .svc-row__title { text-shadow: 0 2px 18px rgba(10,6,6,.55); }
  .svc-row:hover .svc-row__tags { color: rgba(255,255,255,.92); }
  .svc-row:hover .svc-row__arrow { background: var(--color-accent-ink); border-color: var(--color-accent-ink); transform: rotate(-45deg); }
  .svc-row:hover .svc-row__arrow svg { color: var(--color-accent); }
  .svc-row:hover .svc-row__thumb { opacity: 1; transform: translateY(-50%) scale(1) rotate(-3deg); }
}
/* Touch / no-hover: show thumbnail inline so photos are always visible */
@media (hover: none) {
  .svc-row { grid-template-columns: 60px 1fr; gap: 18px; padding: 24px 18px; }
  .svc-row__main { align-items: flex-start; text-align: left; }
  .svc-row__thumb { position: relative; right: auto; top: auto; transform: none; opacity: 1; width: 100%; height: 180px; grid-column: 1 / -1; margin-top: 8px; box-shadow: none; }
  .svc-row__arrow { display: none; }
}

/* Project carousel */
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; }
.carousel__track {
  display: flex; gap: 20px;
  scroll-snap-type: x mandatory; overflow-x: auto;
  scroll-behavior: smooth; padding-bottom: 6px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide {
  flex: 0 0 calc(33.333% - 14px); scroll-snap-align: start;
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4/3; background: var(--color-ink-2);
}
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.carousel__slide:hover img { transform: scale(1.06); }
.carousel__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 18px 14px; color: #fff;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: 1rem;
  background: linear-gradient(0deg, rgba(8,9,11,.85), transparent);
}
.carousel__cap::before { content:""; display:inline-block; width:18px; height:3px; background:var(--color-accent); margin-right:9px; vertical-align:middle; }
.carousel__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; gap: 16px; }
.carousel__dots { display: flex; gap: 8px; }
.carousel__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-ink-3); border: 0; padding: 0; cursor: pointer; transition: background .3s, transform .3s; }
.carousel__dot.is-active { background: var(--color-accent); transform: scale(1.25); }
.carousel__btns { display: flex; gap: 10px; }
.carousel__btn {
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 2px solid var(--color-ink-3); color: var(--color-text-invert);
  display: grid; place-items: center; transition: background .3s, border-color .3s, color .3s, transform .2s;
}
.carousel__btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.carousel__btn:active { transform: scale(.92); }
.carousel__btn svg { width: 22px; height: 22px; }
@media (max-width: 1024px) { .carousel__slide { flex-basis: calc(50% - 10px); } }
@media (max-width: 600px)  { .carousel__slide { flex-basis: 86%; } }

/* Red-framed about image */
.about__media--framed::before { content:""; position:absolute; inset:18px -18px -18px 18px; border:3px solid var(--color-accent); border-radius:var(--radius); z-index:0; }
.about__media--framed img { position:relative; z-index:1; }

/* CTA hazard variant tweak */
.cta-strip { position: relative; }

@media (max-width: 820px) {
  .hero__side { display: none; }
  .ticker span { font-size: 1.15rem; }
  .svc-row { grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 16px; }
  .svc-row__main { align-items: flex-start; text-align: left; }
  .svc-row__arrow { display: none; }
  .svc-row__thumb { position: relative; right:auto; top:auto; transform:none; opacity:1; width:100%; height:170px; grid-column:1 / -1; margin-top:8px; box-shadow:none; }
}