/* =========================================================================
   Carbon Garage — style.css
   Dark-Luxury / Cinematic Automotive Editorial
   Kommentare auf Deutsch. Alle Farben als CSS Custom Properties.
   ========================================================================= */

/* ---------- Fonts (lokal gehostet, kein Google-CDN → DSGVO) ------------- */
@font-face{
  font-family:"Playfair Display";
  src:url("../fonts/playfair/PlayfairDisplay.ttf") format("truetype-variations");
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Playfair Display";
  src:url("../fonts/playfair/PlayfairDisplay-Italic.ttf") format("truetype-variations");
  font-weight:400 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/montserrat/Montserrat.ttf") format("truetype-variations");
  font-weight:300 800; font-style:normal; font-display:swap;
}
@font-face{ font-family:"Tajawal"; src:url("../fonts/tajawal/Tajawal-Regular.ttf")  format("truetype"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Tajawal"; src:url("../fonts/tajawal/Tajawal-Medium.ttf")   format("truetype"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Tajawal"; src:url("../fonts/tajawal/Tajawal-Bold.ttf")     format("truetype"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Tajawal"; src:url("../fonts/tajawal/Tajawal-ExtraBold.ttf")format("truetype"); font-weight:800; font-display:swap; }

/* ------------------------------- Tokens -------------------------------- */
:root{
  /* Farbwelt */
  --ink:#0A0A0A;
  --carbon:#131313;
  --carbon-2:#1C1C1C;
  --line:#2A2A2A;
  --line-2:#383838;
  --gold:#C9A227;
  --gold-hi:#E8CE7A;
  --gold-deep:#8A6D1C;
  --ivory:#F4F1EA;
  --muted:#9A948A;
  --white:#ffffff;

  /* Schrift */
  --font-display:"Playfair Display", Georgia, serif;
  --font-body:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar:"Tajawal", system-ui, sans-serif;

  /* Fluide Typo-Skala */
  --fs-hero:clamp(2.85rem, 7vw, 6.25rem);
  --fs-h1:clamp(2.4rem, 5.2vw, 4.25rem);
  --fs-h2:clamp(1.9rem, 3.8vw, 3rem);
  --fs-h3:clamp(1.3rem, 2.1vw, 1.7rem);
  --fs-lead:clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-body:1.0625rem;
  --fs-small:0.875rem;
  --fs-label:0.75rem;

  /* Zeilenhöhe */
  --lh-tight:1.05;
  --lh-snug:1.25;
  --lh-body:1.7;

  /* Spacing (8px-Basis) */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:88px; --s8:112px; --s9:144px; --s10:184px;

  /* Layout */
  --maxw:1200px;
  --wide:1440px;
  --measure:64ch;
  --gutter:clamp(20px, 5vw, 64px);
  --nav-h:76px;

  /* Effekte */
  --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.6s;
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
}

/* ============================ Intro / Preloader ===========================
   Cinematic Curtain-Reveal beim ersten Aufruf (nur Startseite, 1×/Session).
   Nutzt das Marken-Logo aus assets/logo. Steuerung: main.js (initIntro).
   ========================================================================== */
html.intro-lock{overflow:hidden}
.intro{
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:grid; place-items:center;
  transition:transform 1s var(--ease-out) .35s, visibility 1s;
}
.intro.is-done{transform:translateY(-101%); visibility:hidden}
.intro__inner{
  display:flex; flex-direction:column; align-items:center; gap:22px;
  padding:24px; text-align:center;
  opacity:0; transform:translateY(16px);
  animation:cg-intro-in .9s var(--ease-out) forwards;
}
.intro.is-done .intro__inner{opacity:0; transition:opacity .45s}
.intro__logo{
  width:clamp(120px, 20vw, 190px); height:auto;
  filter:drop-shadow(0 8px 26px rgba(201,162,39,.28));
  animation:cg-intro-float 3s ease-in-out infinite;
}
.intro__tag{
  font-family:var(--font-body); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
}
html[lang="ar"] .intro__tag{letter-spacing:.05em; font-family:var(--font-ar); font-weight:700}
.intro__word{
  font-family:var(--font-display); font-weight:600; color:var(--ivory);
  font-size:clamp(1.7rem, 4.5vw, 2.6rem); line-height:1;
}
html[lang="ar"] .intro__word{font-family:var(--font-ar); font-weight:800}
.intro__bar{
  position:relative; width:min(220px, 60vw); height:1px; margin-top:4px;
  background:var(--line-2); overflow:hidden;
}
.intro__bar i{
  position:absolute; inset:0; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-hi));
  animation:cg-intro-load 1.5s var(--ease-out) forwards;
}
html[lang="ar"] .intro__bar i{transform-origin:right}
@keyframes cg-intro-in{to{opacity:1; transform:none}}
@keyframes cg-intro-float{50%{transform:translateY(-7px)}}
@keyframes cg-intro-load{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .intro{transition:none}
  .intro__inner,.intro__logo,.intro__bar i{animation:none}
  .intro__inner{opacity:1; transform:none}
  .intro__bar i{transform:scaleX(1)}
}

/* ------------------------------- Reset --------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html[lang="ar"] body{font-family:var(--font-ar); line-height:1.85}
img,picture,video,svg{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:none}
input,textarea,select{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:600; line-height:var(--lh-tight); text-wrap:balance}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{font-family:var(--font-ar); font-weight:800}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--gold-hi); outline-offset:3px}
::selection{background:var(--gold); color:var(--ink)}

/* Skip-Link */
.skip-link{
  position:absolute; inset-inline-start:16px; top:-60px; z-index:200;
  background:var(--gold); color:var(--ink); padding:10px 18px; border-radius:var(--radius);
  font-weight:600; transition:top .2s;
}
.skip-link:focus{top:16px}

/* --------------------------- Layout-Helpers ---------------------------- */
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.container--wide{max-width:var(--wide)}
.section{padding-block:clamp(64px, 10vw, var(--s9))}
.section--tight{padding-block:clamp(48px, 7vw, var(--s7))}

/* Eyebrow / Label */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-body); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--gold); opacity:.8}
html[lang="ar"] .eyebrow{letter-spacing:.05em; font-family:var(--font-ar); font-weight:700}

/* Kapitel-Notation (Index) */
.chapter{
  font-family:var(--font-display); font-style:italic; font-size:var(--fs-small);
  color:var(--gold); letter-spacing:.1em;
}

.lead{font-size:var(--fs-lead); color:var(--ivory); max-width:var(--measure); line-height:1.6}
.sec-head{margin-bottom:var(--s6); display:flex; flex-direction:column; gap:14px}
.sec-head h2{font-size:var(--fs-h2)}
.muted{color:var(--muted)}
.text-measure{max-width:var(--measure)}
.gold{color:var(--gold)}

/* ============================ SIGNATURE 1 ==============================
   Wing-Rule-Divider — aus den Flügel-Lagen des Logos abgeleitet.
   Drei zulaufende Goldlinien + zentraler Bezel-Ring, zeichnen sich beim
   Reveal von der Mitte nach außen.
   ====================================================================== */
.wing-divider{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-block:var(--s6); opacity:.9;
}
.wing-divider .wing{position:relative; height:22px; flex:1; max-width:340px}
.wing span{
  position:absolute; inset-inline-end:0; height:1px; inset-block-start:50%;
  background:linear-gradient(var(--_dir,to left), var(--gold), transparent);
  transform:scaleX(0); transform-origin:inline-end; transition:transform .9s var(--ease-out);
}
.wing--left span{inset-inline-end:0; --_dir:to left; transform-origin:right}
.wing--right span{inset-inline-start:0; inset-inline-end:auto; --_dir:to right; transform-origin:left}
.wing span:nth-child(1){width:100%; inset-block-start:calc(50% - 6px)}
.wing span:nth-child(2){width:80%; inset-block-start:50%}
.wing span:nth-child(3){width:56%; inset-block-start:calc(50% + 6px)}
.wing span:nth-child(1){transition-delay:.05s}
.wing span:nth-child(2){transition-delay:.14s}
.wing span:nth-child(3){transition-delay:.23s}
.is-visible .wing span{transform:scaleX(1)}
.wing-divider .knot{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--gold); position:relative;
}
.wing-divider .knot::before{
  content:""; position:absolute; inset:5px; border-radius:50%; border:1px solid var(--gold-deep);
}
.wing-divider .knot::after{
  content:""; position:absolute; inset:11px; border-radius:50%; background:var(--gold);
}

/* ------------------------------ Buttons -------------------------------- */
.btn{
  --bg:var(--gold); --fg:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 30px; border-radius:var(--radius);
  font-family:var(--font-body); font-weight:600; font-size:.9rem;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bg); position:relative; overflow:hidden;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
html[lang="ar"] .btn{letter-spacing:0; font-family:var(--font-ar); font-weight:700}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--ghost{--bg:transparent; --fg:var(--ivory); border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--gold); color:var(--gold-hi)}
.btn__arrow{transition:transform .35s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
html[dir="rtl"] .btn__arrow{transform:scaleX(-1)}
html[dir="rtl"] .btn:hover .btn__arrow{transform:scaleX(-1) translateX(4px)}

/* Text-Link mit Unterstrich-Animation */
.link-more{
  display:inline-flex; align-items:center; gap:10px; color:var(--gold);
  font-size:var(--fs-small); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
html[lang="ar"] .link-more{letter-spacing:0; font-family:var(--font-ar)}
.link-more span:not(.btn__arrow){text-decoration:underline; text-decoration-color:var(--gold);
  text-underline-offset:4px; text-decoration-thickness:1px; transition:text-decoration-color .3s var(--ease)}
.link-more:hover span:not(.btn__arrow){text-decoration-color:var(--gold-hi)}

/* =============================== HEADER ================================= */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(10,10,10,.82); backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; width:100%;
  max-width:var(--wide); margin-inline:auto; padding-inline:var(--gutter)}
.nav__brand{display:flex; align-items:center; gap:14px}
.nav__brand img{height:34px; width:auto}
.nav__brand .wordmark{display:flex; flex-direction:column; line-height:1}
.nav__brand .wordmark b{font-family:var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:.02em}
.nav__brand .wordmark small{font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-top:3px}
html[lang="ar"] .nav__brand .wordmark small{letter-spacing:.05em}

.nav__links{display:flex; align-items:center; gap:clamp(18px,2.4vw,38px)}
.nav__links a{
  font-size:.82rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ivory); position:relative; padding-block:6px; opacity:.85; transition:opacity .3s, color .3s;
}
html[lang="ar"] .nav__links a{letter-spacing:0; font-family:var(--font-ar); font-size:.95rem}
.nav__links a::after{content:""; position:absolute; inset-inline-start:0; bottom:0; height:1px;
  width:100%; background:var(--gold); transform:scaleX(0); transform-origin:inline-start;
  transition:transform .35s var(--ease)}
.nav__links a:hover{opacity:1; color:var(--gold-hi)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__links a[aria-current="page"]{color:var(--gold); opacity:1}

.nav__actions{display:flex; align-items:center; gap:16px}

/* Sprach-Umschalter */
.lang-switch{display:inline-flex; border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden}
.lang-switch button,.lang-switch a{
  display:flex; align-items:center; justify-content:center;
  padding:7px 12px; font-size:.72rem; font-weight:600; letter-spacing:.1em;
  color:var(--muted); transition:background .3s, color .3s; min-height:36px;
}
.lang-switch button[aria-pressed="true"],.lang-switch a[aria-current="true"]{background:var(--gold); color:var(--ink)}
.lang-switch button:not([aria-pressed="true"]):hover,.lang-switch a:not([aria-current="true"]):hover{color:var(--ivory)}

/* Burger */
.nav__burger{display:none; width:44px; height:44px; align-items:center; justify-content:center; position:relative}
.nav__burger span,.nav__burger span::before,.nav__burger span::after{
  content:""; position:absolute; width:24px; height:2px; background:var(--ivory); transition:.3s var(--ease)}
.nav__burger span::before{transform:translateY(-7px)}
.nav__burger span::after{transform:translateY(7px)}
.nav__burger[aria-expanded="true"] span{background:transparent}
.nav__burger[aria-expanded="true"] span::before{transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] span::after{transform:rotate(-45deg)}

/* Mobile-Menü */
.nav__mobile{
  position:fixed; inset:0; z-index:99; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:var(--s2);
  padding:var(--gutter); transform:translateX(100%); transition:transform .5s var(--ease-out);
  visibility:hidden;
}
html[dir="rtl"] .nav__mobile{transform:translateX(-100%)}
.nav__mobile.open{transform:translateX(0); visibility:visible}
.nav__mobile a{font-family:var(--font-display); font-size:clamp(1.9rem,8vw,2.6rem); color:var(--ivory)}
html[lang="ar"] .nav__mobile a{font-family:var(--font-ar); font-weight:700}
.nav__mobile a:hover{color:var(--gold)}

/* ================================ HERO ================================= */
.hero{position:relative; min-height:100svh; display:flex; align-items:stretch; overflow:hidden}
.hero__grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); width:100%}
.hero__panel{
  position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + var(--s5)) var(--gutter) var(--s6);
  background:var(--ink);
}
.hero__panel::after{ /* diagonale Kante zum Bild */
  content:""; position:absolute; inset-block:0; inset-inline-end:-1px; width:120px;
  background:var(--ink); clip-path:polygon(0 0, 100% 0, 0 100%, 0 100%);
  transform:translateX(99%); z-index:2;
}
html[dir="rtl"] .hero__panel::after{transform:translateX(-99%) scaleX(-1)}
.hero__media{position:relative; overflow:hidden; background:var(--carbon)}
.hero__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%;
  animation:kenburns 18s var(--ease) infinite alternate;
}
.hero__media::after{ /* cineastisches Overlay + Gold-Hauch */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, var(--ink) 0%, rgba(10,10,10,.35) 30%, transparent 55%),
    linear-gradient(to top, rgba(10,10,10,.7), transparent 45%),
    radial-gradient(120% 80% at 80% 10%, rgba(201,162,39,.16), transparent 60%);
}
html[dir="rtl"] .hero__media::after{transform:scaleX(-1)}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12)}}

.hero__eyebrow{margin-bottom:var(--s3)}
.hero__lead-line{font-family:var(--font-display); font-style:italic; color:var(--gold-hi);
  font-size:clamp(1.15rem,2.2vw,1.6rem); margin-bottom:var(--s3); opacity:0;
  animation:fadeIn .8s var(--ease) .55s forwards}
html[lang="ar"] .hero__lead-line{font-family:var(--font-ar); font-style:normal; font-weight:700}
.hero h1{font-size:var(--fs-hero); letter-spacing:-.01em; margin-bottom:var(--s3)}
/* padding+neg. margin: schafft der Overflow-Maske Platz für Unterlängen (g, y),
   ohne den optischen Zeilenabstand zu verändern. */
/* KEINE Overflow-Maske am Titel: sonst wird die Gold-Unterlaenge von „Garage"
   (background-clip:text) je nach Bildschirm-Skalierung/Transform abgeschnitten.
   Reveal daher als sanftes Aufsteigen+Einblenden, fill-mode:backwards ->
   Ruhezustand ohne transform (umgeht zusaetzlich Chromiums clip-Bug). */
.hero h1 .row{display:block}
.hero h1 .word{display:inline-block; animation:wordUp .9s var(--ease-out) backwards;
  animation-delay:calc(var(--d,0)*.09s + .12s)}
.hero h1 .accent{font-style:italic; color:var(--gold)}
@keyframes wordUp{from{transform:translateY(30px); opacity:0} to{transform:none; opacity:1}}
/* Gold-Verlauf (background-clip:text) deckt die Textbox ab. Bei enger Zeilenhoehe
   ragt die Unterlaenge (g / arab. ج) unter die Box -> dort kein Verlauf -> wirkt
   abgeschnitten. padding-bottom vergroessert die Verlaufsflaeche, neg. margin
   haelt das Layout stabil. */
.hero h1 .accent{padding-bottom:.3em; margin-bottom:-.3em}
.hero__sub{color:var(--muted); font-size:var(--fs-lead); max-width:44ch; margin-bottom:var(--s5);
  opacity:0; animation:fadeIn .8s var(--ease) .7s forwards}
.hero__cta{display:flex; flex-wrap:wrap; gap:var(--s2); opacity:0; animation:fadeIn .8s var(--ease) .9s forwards}
@keyframes fadeIn{to{opacity:1}}

/* Scroll-Indikator (Bezel) */
.hero__scroll{position:absolute; inset-block-end:26px; inset-inline-start:var(--gutter); z-index:3;
  display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; opacity:0; animation:fadeIn 1s var(--ease) 1.2s forwards}
html[lang="ar"] .hero__scroll{letter-spacing:.05em}
.hero__scroll .dot{width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2);
  position:relative; display:grid; place-items:center}
.hero__scroll .dot::after{content:""; width:2px; height:8px; background:var(--gold); border-radius:2px;
  animation:scrolldot 1.8s var(--ease) infinite}
@keyframes scrolldot{0%{transform:translateY(-4px); opacity:0}40%{opacity:1}100%{transform:translateY(6px); opacity:0}}

/* Hero-Stat-Leiste */
.hero__stats{position:absolute; inset-block-end:0; inset-inline-end:0; z-index:3;
  display:flex; background:rgba(10,10,10,.55); backdrop-filter:blur(8px);
  border-top:1px solid var(--line); border-inline-start:1px solid var(--line)}
.hero__stats div{padding:18px 26px; border-inline-start:1px solid var(--line)}
.hero__stats div:first-child{border-inline-start:none}
.hero__stats b{display:block; font-family:var(--font-display); color:var(--gold); font-size:1.5rem; line-height:1}
.hero__stats small{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
html[lang="ar"] .hero__stats small{letter-spacing:0}

/* ============================ Reveal (IO) ============================== */
[data-reveal]{opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
[data-reveal].is-visible{opacity:1; transform:none}
[data-reveal][data-delay="1"]{transition-delay:.1s}
[data-reveal][data-delay="2"]{transition-delay:.2s}
[data-reveal][data-delay="3"]{transition-delay:.3s}
[data-reveal][data-delay="4"]{transition-delay:.4s}

/* ========================= Positionierung ============================== */
.statement{display:grid; grid-template-columns:1fr; gap:var(--s5)}
.statement__head{display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap}
.statement__big{
  font-family:var(--font-display); font-size:var(--fs-h1); line-height:1.1; max-width:20ch;
}
.statement__big em{font-style:italic; color:var(--gold); padding-bottom:.12em}
.statement__cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--s5) var(--s6)}
.statement__cols p{color:var(--muted); max-width:42ch}
.statement__cols h3{font-size:var(--fs-h3); margin-bottom:12px; color:var(--ivory)}

/* ===================== Leistungen (Editorial-Rows) ===================== */
.svc-row{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(28px,5vw,var(--s7));
  align-items:center; padding-block:clamp(40px,6vw,var(--s6));
  border-top:1px solid var(--line);
}
.svc-row:last-child{border-bottom:1px solid var(--line)}
.svc-row--reverse{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.svc-row__media{position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:4/3;
  border:1px solid var(--line)}
/* <picture>-Wrapper muss die Cover-Box mitfüllen, sonst greift img{height:100%}
   ins Leere und Querformat-Bilder lassen unten einen schwarzen Rand. */
.svc-row__media picture,.about-band picture{display:block; width:100%; height:100%}
.svc-row__media img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.svc-row:hover .svc-row__media img{transform:scale(1.05)}
/* Einheitlicher, warmer Gold-Ton-Scrim + leichte Vignette über allen Service-
   Bildern — bindet kühle Ausreißer (Chrom-Felge) in die Gold-auf-Schwarz-Palette
   und rahmt das Bild, während es beim Hover darunter zoomt. */
.svc-row__media::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,10,10,.04) 0%, rgba(10,10,10,.34) 100%),
    radial-gradient(120% 100% at 50% 0%, rgba(201,162,39,.12), transparent 65%);
}
.svc-row__media .tag{position:absolute; z-index:2; inset-block-start:16px; inset-inline-start:16px;
  background:rgba(10,10,10,.7); backdrop-filter:blur(6px); color:var(--gold);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; padding:7px 13px; border:1px solid var(--line)}
html[lang="ar"] .svc-row__media .tag{letter-spacing:0}
.svc-row--reverse .svc-row__media{order:2}
.svc-row__body h3{font-size:clamp(1.6rem,3vw,2.3rem); margin:10px 0 16px}
.svc-row__body p{color:var(--muted); max-width:46ch; margin-bottom:var(--s3)}
.svc-list{display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; margin-bottom:var(--s3)}
.svc-list li{position:relative; padding-inline-start:20px; font-size:var(--fs-small); color:var(--ivory)}
.svc-list li::before{content:""; position:absolute; inset-inline-start:0; top:.6em; width:7px; height:7px;
  border:1px solid var(--gold); transform:rotate(45deg)}

/* ===================== Capability-Index (Services) ===================
   Editoriales „Werkstatt-Spec-Sheet" statt Kachel-Grid: zweispaltige
   Index-Liste, Name (Serif) + einzeiliger Descriptor, feine Gold-Hairlines,
   dezenter Diamant-Marker beim Hover. Bewusst boxenlos. */
.svc-index{display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(32px,5vw,72px); margin-top:var(--s5)}
.svc-index__item{
  padding:clamp(18px,2.4vw,26px) 0 clamp(18px,2.4vw,26px) 0;
  border-top:1px solid var(--line); position:relative;
  transition:padding-inline-start .4s var(--ease);
}
.svc-index__item::before{ /* Diamant-Marker, nur beim Hover */
  content:""; position:absolute; inset-block-start:calc(clamp(18px,2.4vw,26px) + .55em);
  inset-inline-start:0; width:7px; height:7px; border:1px solid var(--gold);
  transform:rotate(45deg) scale(0); transform-origin:center;
  transition:transform .4s var(--ease); opacity:.9;
}
.svc-index__item:hover{padding-inline-start:22px}
.svc-index__item:hover::before{transform:rotate(45deg) scale(1)}
.svc-index__item h3{font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.15rem,1.8vw,1.45rem); color:var(--ivory); margin:0; transition:color .3s var(--ease)}
.svc-index__item:hover h3{color:var(--gold-hi)}
.svc-index__item p{color:var(--muted); font-size:var(--fs-small); margin-top:7px; max-width:42ch}
html[lang="ar"] .svc-index__item h3{font-family:var(--font-ar); font-weight:800}

/* Abschluss-Zeile „Something else?" — volle Breite, CTA rechts */
.svc-index__ask{
  grid-column:1 / -1; margin-top:var(--s2); padding-top:var(--s4);
  border-top:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4) var(--s5); flex-wrap:wrap;
}
.svc-index__ask-copy{max-width:52ch}
.svc-index__ask-copy h3{font-family:var(--font-display); font-size:var(--fs-h3); color:var(--ivory); margin:0}
html[lang="ar"] .svc-index__ask-copy h3{font-family:var(--font-ar); font-weight:800}
.svc-index__ask-copy p{color:var(--muted); font-size:var(--fs-small); margin-top:8px}
@media (max-width:680px){
  .svc-index{grid-template-columns:1fr; column-gap:0}
  .svc-index__ask{flex-direction:column; align-items:flex-start}
  .svc-index__ask .btn{width:100%}
}

/* ========================= Showcase / Before-After ==================== */
.showcase{background:var(--carbon); position:relative}
/* minmax(0,…) verhindert Grid-Blowout: die hochzählenden Zahlen dürfen die
   rechte Spalte nicht verbreitern und so den Before/After-Slider stauchen. */
.showcase__grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,5vw,var(--s7)); align-items:center}

.ba-slider{position:relative; aspect-ratio:16/11; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--line); user-select:none; touch-action:pan-y}
.ba-slider img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none}
.ba-slider .ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
html[dir="rtl"] .ba-slider .ba-after{clip-path:inset(0 var(--pos,50%) 0 0)}
.ba-slider .ba-label{position:absolute; inset-block-end:14px; z-index:3; font-size:.66rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ivory); background:rgba(10,10,10,.65);
  padding:6px 12px; border:1px solid var(--line)}
html[lang="ar"] .ba-slider .ba-label{letter-spacing:0}
.ba-slider .ba-label--before{inset-inline-start:14px}
.ba-slider .ba-label--after{inset-inline-end:14px; color:var(--gold)}
.ba-handle{position:absolute; inset-block:0; inset-inline-start:var(--pos,50%); width:2px;
  background:var(--gold); z-index:4; transform:translateX(-50%)}
html[dir="rtl"] .ba-handle{inset-inline-start:auto; inset-inline-end:var(--pos,50%); transform:translateX(50%)}
.ba-handle .grip{position:absolute; inset-block-start:50%; inset-inline-start:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:var(--ink); border:1px solid var(--gold);
  display:grid; place-items:center; color:var(--gold); box-shadow:var(--shadow)}
.ba-handle .grip::before{content:"‹ ›"; letter-spacing:2px; font-size:.9rem}
.ba-slider input[type=range]{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:5}

.showcase__body h2{font-size:var(--fs-h2); margin:14px 0 18px}
.showcase__body p{color:var(--muted); max-width:44ch; margin-bottom:var(--s4)}

/* Zahlen-Counter */
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); margin-top:var(--s5)}
/* zentriert: kurze und lange Zahlen halten so gleichen Abstand zur Trennlinie */
.stats .stat{background:var(--carbon); padding:var(--s4) var(--s3); text-align:center}
.showcase .stats .stat{background:var(--carbon)}
.stat b{display:block; font-family:var(--font-display); color:var(--ivory); font-size:clamp(2rem,4vw,2.9rem); line-height:1;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; white-space:nowrap}
.stat b .plus{color:var(--gold); margin-inline-start:.04em}
.stat small{display:block; margin-top:14px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
html[lang="ar"] .stat small{letter-spacing:0}

/* ============================ Marken-Marquee ========================== */
.brands{border-block:1px solid var(--line); padding-block:var(--s5); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.brands__head{display:flex; justify-content:center; margin-bottom:var(--s4)}
.marquee{display:flex; gap:var(--s6); width:max-content; animation:marquee 34s linear infinite}
.marquee:hover{animation-play-state:paused}
html[dir="rtl"] .marquee{animation-direction:reverse}
.marquee span{font-family:var(--font-display); font-size:clamp(1.4rem,3vw,2.2rem); color:var(--muted);
  white-space:nowrap; opacity:.6; transition:opacity .3s, color .3s}
.marquee span:hover{opacity:1; color:var(--gold)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ================================ CTA ================================= */
.cta{position:relative; overflow:hidden; background:var(--carbon-2); border-radius:var(--radius);
  padding:clamp(40px,6vw,var(--s8)) var(--gutter); text-align:center}
.cta::before{content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(80% 120% at 50% -10%, rgba(201,162,39,.18), transparent 60%)}
.cta > *{position:relative; z-index:1}
.cta h2{font-size:var(--fs-h2); max-width:20ch; margin:16px auto 18px}
.cta p{color:var(--muted); max-width:46ch; margin:0 auto var(--s5)}
.cta__actions{display:flex; gap:var(--s2); justify-content:center; flex-wrap:wrap}

/* ================================ Footer ============================== */
.site-footer{background:var(--ink); border-top:1px solid var(--line); padding-block:var(--s7) var(--s4)}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--s5)}
.footer__brand img{height:40px; margin-bottom:var(--s3)}
.footer__brand p{color:var(--muted); font-size:var(--fs-small); max-width:34ch}
.footer h3{font-family:var(--font-body); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:var(--s3); font-weight:600}
html[lang="ar"] .footer h3{letter-spacing:0; font-family:var(--font-ar)}
.footer ul{display:flex; flex-direction:column; gap:12px}
.footer a{color:var(--muted); font-size:var(--fs-small); transition:color .3s}
.footer a:hover{color:var(--gold)}
.footer__contact li{color:var(--muted); font-size:var(--fs-small); display:flex; gap:10px}
.footer__contact .gold{color:var(--gold)}
.footer__social{display:flex; gap:12px; margin-top:var(--s3)}
.footer__social a{width:40px; height:40px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; color:var(--ivory)}
.footer__social a:hover{border-color:var(--gold); color:var(--gold)}
.footer__bar{display:flex; justify-content:space-between; align-items:center; gap:var(--s3);
  flex-wrap:wrap; margin-top:var(--s6); padding-top:var(--s3); border-top:1px solid var(--line);
  color:var(--muted); font-size:.78rem}
.footer__bar a{color:var(--muted)}
.footer__bar a:hover{color:var(--gold)}
.to-top{display:inline-flex; align-items:center; gap:8px; color:var(--muted)}
.to-top:hover{color:var(--gold)}

/* ========================= WhatsApp-Float ============================= */
.wa-float{
  position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:90;
  display:flex; align-items:center; gap:12px;
  background:#0A7C3A; color:#fff; padding:0 20px 0 16px; height:56px; border-radius:40px;
  box-shadow:0 12px 30px -8px rgba(31,168,85,.6); font-weight:600; font-size:.9rem;
  transform:translateY(0); transition:transform .3s var(--ease), box-shadow .3s}
.wa-float:hover{transform:translateY(-3px); box-shadow:0 16px 36px -8px rgba(31,168,85,.7)}
.wa-float svg{width:26px; height:26px; flex:0 0 auto}
.wa-float .wa-txt{white-space:nowrap}
html[lang="ar"] .wa-float{padding:0 16px 0 20px}
@media (max-width:560px){
  /* Text visuell ausblenden, aber für Screenreader/Accessible-Name erhalten */
  .wa-float .wa-txt{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
  .wa-float{padding:0; width:56px; justify-content:center}
}

/* ========================== Consent-Banner ============================ */
.consent{position:fixed; inset-block-end:0; inset-inline:0; z-index:120; background:var(--carbon-2);
  border-top:1px solid var(--line); padding:var(--s3) var(--gutter);
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; justify-content:center;
  transform:translateY(100%); transition:transform .5s var(--ease-out)}
.consent.show{transform:translateY(0)}
.consent p{color:var(--muted); font-size:var(--fs-small); max-width:60ch}
.consent p a{color:var(--gold); text-decoration:underline}
.consent__actions{display:flex; gap:12px}
.consent .btn{min-height:44px; padding:0 20px; font-size:.78rem}

/* Maps-Platzhalter (vor Consent) */
.map-embed{position:relative; aspect-ratio:16/9; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--carbon)}
.map-embed iframe{width:100%; height:100%; border:0; display:block}
.map-placeholder{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; text-align:center; padding:var(--s4); background:var(--carbon)}
.map-placeholder p{color:var(--muted); font-size:var(--fs-small); max-width:34ch}

/* ============================== Contact =============================== */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,var(--s7))}
.form-field{margin-bottom:var(--s3)}
.form-field label{display:block; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px}
html[lang="ar"] .form-field label{letter-spacing:0; font-family:var(--font-ar)}
.form-field input,.form-field textarea,.form-field select{
  width:100%; background:var(--carbon); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; color:var(--ivory); min-height:52px; transition:border-color .3s}
.form-field textarea{min-height:130px; resize:vertical}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none; border-color:var(--gold)}
.form-field input:user-invalid,.form-field textarea:user-invalid{border-color:#c0492f}
.form-error{color:#e08a76; font-size:.78rem; margin-top:6px; min-height:1em}
.form-note{color:var(--muted); font-size:.78rem; margin-top:var(--s2)}
.form-status{margin-top:var(--s2); font-size:var(--fs-small)}
.contact-card{background:var(--carbon); border:1px solid var(--line); padding:var(--s4); border-radius:var(--radius); margin-bottom:var(--s2)}
.contact-card h3{font-size:var(--fs-h3); margin-bottom:14px}
.contact-card .row{display:flex; gap:14px; align-items:flex-start; margin-bottom:12px; color:var(--muted); font-size:var(--fs-small)}
.contact-card .row .gold{color:var(--gold); flex:0 0 auto}
.contact-card a{color:var(--ivory)} .contact-card a:hover{color:var(--gold)}

/* Page-Hero (Unterseiten) */
.page-hero{position:relative; padding:calc(var(--nav-h) + var(--s7)) 0 var(--s6); border-bottom:1px solid var(--line)}
.page-hero h1{font-size:var(--fs-h1); margin:var(--s2) 0 var(--s3); max-width:16ch}
.page-hero p{color:var(--muted); max-width:52ch; font-size:var(--fs-lead)}
.page-hero .chapter{font-size:.85rem}

/* Legal */
.legal{max-width:78ch; margin-inline:auto}
.legal h2{font-size:var(--fs-h3); margin:var(--s5) 0 var(--s2); color:var(--gold)}
.legal h3{font-size:1.1rem; margin:var(--s3) 0 var(--s1)}
.legal p,.legal li{color:var(--muted); margin-bottom:var(--s2); font-size:.95rem}
.legal ul{list-style:disc; padding-inline-start:22px}
.legal a{color:var(--gold); text-decoration:underline}

/* Team / About */
.about-band{position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:21/9; border:1px solid var(--line)}
.about-band img{width:100%; height:100%; object-fit:cover}
/* Scrim: entsättigt kräftige Bildfarben (z. B. Mint-Leder) und bindet das
   Vollbild in die Schwarz-Gold-Welt; dazu cineastische Tiefe oben/unten. */
.about-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  backdrop-filter:saturate(.6) brightness(.9);
  -webkit-backdrop-filter:saturate(.6) brightness(.9);
  background:linear-gradient(180deg, rgba(10,10,10,.30) 0%, rgba(10,10,10,.06) 45%, rgba(10,10,10,.55) 100%);
}

/* ================= Gold-Shimmer auf Display-Akzenten ==================
   Tonaler Verlauf (gold-deep → gold-hi) statt Flächengold — gibt den
   Headline-Akzenten „gebürstetes Gold"-Materialität. Nur große Displayschrift. */
.hero h1 .accent,
.statement__big em{
  background:linear-gradient(100deg,var(--gold-deep) 0%,var(--gold) 34%,var(--gold-hi) 60%,var(--gold) 86%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--gold);
}

/* ===================== Cinematic Full-Bleed-Band =====================
   Großes, randloses Detailbild mit Editorial-Overlay — bricht das
   durchgehende Schwarz und gibt der Bildsprache Kino-Format. */
.cinema{
  position:relative; min-height:clamp(340px,58vh,540px);
  display:flex; align-items:flex-end; overflow:hidden; border-block:1px solid var(--line);
}
.cinema__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%;
  transform:scale(1.06); transition:transform 1.3s var(--ease);
}
.cinema.is-visible .cinema__img{transform:scale(1)}
.cinema::after{ /* Scrim links für Textlesbarkeit + Grundtiefe unten */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.55) 42%, rgba(10,10,10,.12) 100%),
    linear-gradient(to top, rgba(10,10,10,.8), transparent 55%);
}
html[dir="rtl"] .cinema::after{transform:scaleX(-1)}
.cinema__inner{position:relative; z-index:2; padding-block:clamp(32px,6vw,var(--s7))}
.cinema__inner h2{font-size:var(--fs-h2); max-width:16ch; margin:14px 0 0}
.cinema__inner p{color:var(--muted); max-width:46ch; margin-top:16px}

/* ================= Skyline-Locale-Band (Signature-Motiv) =============
   Feine Gold-Hairline-Skyline Dubais (Burj Khalifa mittig, Burj Al Arab).
   Zeichnet sich beim Reveal von der Mitte nach außen — greift die
   Formensprache des Wing-Dividers auf. Verortet die Werkstatt in Al Quoz. */
.locale{position:relative; overflow:hidden}
.locale__grid{display:grid; grid-template-columns:1fr; gap:var(--s5); text-align:center; align-items:center}
.locale__head{max-width:56ch; margin-inline:auto}
.locale__head h2{font-size:var(--fs-h2); margin:14px auto 16px; max-width:22ch}
.locale__head p{color:var(--muted); max-width:54ch; margin-inline:auto}
.skyline{position:relative; width:100%; max-width:var(--wide); margin-inline:auto}
/* Sonnen-Dunst / Abenddämmerung hinter dem Burj Khalifa */
.skyline .sky-glow{position:absolute; left:50%; bottom:8%; width:44%; height:72%;
  transform:translateX(-50%); z-index:0; pointer-events:none; filter:blur(6px);
  background:radial-gradient(ellipse at 50% 100%, rgba(201,162,39,.18), rgba(201,162,39,.05) 45%, transparent 70%);
  opacity:0; transition:opacity 1.6s var(--ease-out) .3s}
.locale.is-visible .skyline .sky-glow{opacity:1}
/* Aufbau: links -> rechts (die Stadt „geht an") */
.skyline .draw{position:relative; z-index:1; clip-path:inset(0 100% 0 0); transition:clip-path 2.4s var(--ease-out)}
.locale.is-visible .skyline .draw{clip-path:inset(0 0 0 0)}
.skyline svg{width:100%; height:auto; display:block}
.skyline path,.skyline rect,.skyline line{
  fill:none; stroke:var(--gold); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.82;
}
.skyline .horizon{opacity:.32}
/* Wasser-Spiegelung (gespiegelt & gestaucht, weich ausgeblendet) */
.skyline .reflect{opacity:.22; filter:blur(.9px); stroke:var(--gold); fill:none}
/* Ausblend-Verlauf der Spiegelung — darf NICHT vom .skyline rect-Stil erfasst werden */
.skyline .sky-fade{fill:url(#cgFadeDown); stroke:none; opacity:1; vector-effect:none}
/* Radar-Ping an der Turmspitze */
.skyline .ping{fill:none; stroke:var(--gold-hi); stroke-width:1;
  transform-box:fill-box; transform-origin:center; opacity:0}
.locale.is-visible .skyline .ping{animation:skyPing 3.4s ease-out 1.6s infinite}
@keyframes skyPing{0%{opacity:.6; transform:scale(.4)} 70%{opacity:0; transform:scale(4)} 100%{opacity:0}}

/* Belebung: „Stadt bei Abenddämmerung" — langsam aufglimmende Gebäudelichter,
   ein ruhiges Signal an der Burj-Khalifa-Spitze und ein sehr dezenter
   Licht-Drift über die Silhouette. Bewusst langsam & goldtonig gehalten
   (edel/seriös, nicht verspielt). */

/* Signal an der Turmspitze */
.skyline .beacon{
  fill:var(--gold-hi); stroke:none; opacity:0;
  transform-box:fill-box; transform-origin:center;
  filter:drop-shadow(0 0 4px rgba(232,206,122,.9));
}
.locale.is-visible .skyline .beacon{animation:skyBeacon 3.6s ease-in-out 1.4s infinite}
@keyframes skyBeacon{0%,100%{opacity:.2; transform:scale(.85)} 50%{opacity:1; transform:scale(1)}}

/* Gebäudelichter — kleine, warm glimmende Punkte, langsam & versetzt */
.skyline .wlight{
  fill:var(--gold-hi); stroke:none; opacity:0;
  transform-box:fill-box; transform-origin:center;
  filter:drop-shadow(0 0 2px rgba(232,206,122,.7));
}
.locale.is-visible .skyline .wlight{animation:skyGlow 5.5s ease-in-out infinite}
@keyframes skyGlow{0%,100%{opacity:.1; transform:scale(.7)} 50%{opacity:.9; transform:scale(1)}}

/* sehr dezenter Lichtschleier, der einmalig langsam über die Skyline zieht */
.skyline .sweep{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  mix-blend-mode:screen; transform:translateX(-40%);
  background:linear-gradient(100deg, transparent 40%, rgba(232,206,122,.16) 50%, transparent 60%);
}
.locale.is-visible .skyline .sweep{animation:skySweep 11s var(--ease) 2s infinite}
@keyframes skySweep{
  0%{opacity:0; transform:translateX(-40%)}
  18%{opacity:1} 82%{opacity:1}
  100%{opacity:0; transform:translateX(40%)}
}
html[dir="rtl"] .skyline .sweep{background:linear-gradient(-100deg, transparent 40%, rgba(232,206,122,.16) 50%, transparent 60%)}
.locale__coords{margin-top:var(--s2); font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--muted)}
html[lang="ar"] .locale__coords{letter-spacing:.05em; font-family:var(--font-ar)}

/* ============================ Responsive ============================== */
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr; grid-template-rows:1fr}
  .hero__panel{grid-row:1; background:transparent}
  .hero__panel::after{display:none}
  .hero__media{position:absolute; inset:0; z-index:0}
  .hero__media img{object-position:center}
  .hero__media::after{background:
    linear-gradient(to top, var(--ink) 6%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.5) 100%),
    radial-gradient(120% 60% at 80% 0%, rgba(201,162,39,.14), transparent 60%)}
  .hero__panel{justify-content:flex-end; padding-block-end:var(--s8)}
  .hero__stats{position:static; margin-top:var(--s4); background:transparent; border:none;
    border-top:1px solid var(--line)}
  .hero__stats div{padding-inline:0; padding-inline-end:26px}
  .showcase__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--nav-h:66px}
  .nav__links{display:none}
  .nav__book{display:none}
  .nav__burger{display:inline-flex}
  .svc-row{grid-template-columns:1fr; gap:var(--s3)}
  .svc-row--reverse .svc-row__media{order:0}
  .statement__big{max-width:none}
  .footer__grid{grid-template-columns:1fr}
  .footer__bar{justify-content:flex-start}
  .svc-list{grid-template-columns:1fr}
  .hero__scroll{display:none}
}
@media (max-width:440px){
  .hero__cta .btn{width:100%}
  .hero__stats{flex-wrap:wrap}
  .hero__stats div{flex:1 0 40%; border-inline-start:none}
}

/* ===================== prefers-reduced-motion ========================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  .hero__media img{animation:none}
  [data-reveal]{opacity:1 !important; transform:none !important}
  .hero h1 .word{opacity:1; transform:none; animation:none}
  .hero__sub,.hero__cta,.hero__scroll{opacity:1; animation:none}
  .wing span{transform:scaleX(1)}
  .marquee{animation:none; width:auto; flex-wrap:wrap; justify-content:center}
  .cinema__img{transform:none}
  .skyline .draw{clip-path:none}
  .skyline .sweep{animation:none; opacity:0}
  .skyline .sky-glow{opacity:1; transition:none}
  .skyline .ping{animation:none; opacity:0}
  .skyline .beacon{animation:none; opacity:.85; transform:none}
  .skyline .wlight{animation:none; opacity:.55; transform:none}
}