/* =========================================================================
   FilthyFilter by whispAir — HUD / data-sheet design system
   Dark sci-fi look, copper/gold accents, angular framed panels.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* palette */
  --bg:        #0a0706;
  --bg-2:      #0f0b08;
  --panel:     #140f0b;
  --panel-2:   #1b140d;
  --copper:    #c8842f;
  --gold:      #e8b057;
  --gold-hi:   #f6da9a;
  --bronze:    #7a4f23;
  --bronze-dim:#4a3017;
  --cream:     #efe6d6;
  --muted:     #c2b49c;
  --muted-dim: #998a74;
  --bruise:    #3b6ea5;   /* "blue bruising" accent */
  --spore:     #6f9a5a;   /* ecosystem green */
  --danger:    #c0533b;

  /* type */
  --f-display: "Oswald", "Arial Narrow", sans-serif;
  --f-mono:    "Share Tech Mono", "IBM Plex Mono", ui-monospace, monospace;
  --f-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --maxw: 1180px;
  --radius: 4px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--cream);
  background:
    radial-gradient(1200px 700px at 50% -10%, #20160d 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 100%, #160f0a 0%, transparent 55%),
    var(--bg);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* faint global grid texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(200,132,47,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,132,47,0.022) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, #000 30%, transparent 90%);
}

a { color: var(--gold); text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- animated background (WebGL canvas) ---------- */
#spore-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* hero layers get GPU-friendly transforms for pointer parallax */
.hero__title, .hero__rings { will-change: transform; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 26px; position: relative; z-index: 1; }

/* ---------- shared "technical label" ---------- */
.tag {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}
.tag--muted { color: var(--muted-dim); }

/* ---------- section heading ---------- */
.section { padding: 88px 0; position: relative; }
.section__head { margin-bottom: 40px; }
.section__head .tag { display: block; margin-bottom: 12px; }
.section__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
  color: var(--cream);
}
.section__title b { color: var(--gold); font-weight: 700; }

/* =========================================================================
   PANEL — the core HUD card with corner brackets
   ========================================================================= */
.panel {
  position: relative;
  background:
    linear-gradient(160deg, rgba(40,28,16,0.55), rgba(10,7,6,0.85));
  border: 1px solid var(--bronze-dim);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.5), 0 6px 26px rgba(0,0,0,0.4);
}
.panel::before, .panel::after,
.panel > .br { pointer-events: none; }

/* corner brackets via gradients on the panel + helper spans */
.brackets { position: absolute; inset: 8px; pointer-events: none; }
.brackets span {
  position: absolute; width: 16px; height: 16px;
  border: 2px solid var(--copper); opacity: 0.85;
}
.brackets span:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; }
.brackets span:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; }
.brackets span:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; }
.brackets span:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; }

.panel--glow { box-shadow: inset 0 0 50px rgba(200,132,47,0.10), 0 8px 30px rgba(0,0,0,0.5); }

/* =========================================================================
   NAV
   ========================================================================= */
.nav {
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(10,7,6,0.92), rgba(10,7,6,0.55));
  border-bottom: 1px solid var(--bronze-dim);
}
.nav__inner { display: flex; align-items: center; gap: 18px; padding: 12px 22px; max-width: var(--maxw); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { width: 38px; height: 38px; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand__txt b { font-family: var(--f-display); font-weight: 700; letter-spacing: 0.06em; color: var(--gold); font-size: 1.05rem; }
.brand__txt small { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--muted); }

.nav__links { display: flex; gap: 22px; margin-left: auto; }
.nav__links a {
  font-family: var(--f-mono); font-size: 0.84rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cream);
  padding: 6px 2px; border-bottom: 1px solid transparent; transition: .2s;
}
.nav__links a:hover { color: var(--gold); border-color: var(--copper); }

.langswitch { display: flex; flex-shrink: 0; border: 1px solid var(--bronze); border-radius: 3px; overflow: hidden; }
.langswitch button {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  background: transparent; color: var(--muted); border: 0; padding: 7px 11px; cursor: pointer; transition: .15s;
}
.langswitch button.active { background: var(--copper); color: #1a1006; font-weight: 700; }

.nav__toggle { display: none; background: transparent; border: 1px solid var(--bronze); color: var(--gold); border-radius: 3px; padding: 6px 10px; cursor: pointer; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; padding: 78px 0 64px; overflow: hidden; }
.hero__rings {
  position: absolute; top: -120px; right: -160px; width: 560px; height: 560px;
  border-radius: 50%; opacity: 0.5; pointer-events: none;
  background:
    repeating-radial-gradient(circle at center, transparent 0 16px, rgba(200,132,47,0.10) 16px 17px),
    conic-gradient(from 0deg, rgba(200,132,47,0.18), transparent 25%, rgba(200,132,47,0.18) 50%, transparent 75%, rgba(200,132,47,0.18));
  mask-image: radial-gradient(circle, #000 0 55%, transparent 72%);
}
.hero__coords {
  position: absolute; left: 0; top: 84px;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.22em;
  color: var(--muted-dim); writing-mode: vertical-rl; transform: rotate(180deg);
}
.hero__inner { position: relative; z-index: 2; max-width: 760px; }

/* The headline is solid gold first. The metallic gradient below is decoration
   layered on top, never the thing that makes the text visible. The previous
   version had it the other way round: the glyphs were transparent and the
   "fallback" colour could never apply, because -webkit-text-fill-color beats
   color in exactly the browsers that support the clip. When the clipped fill
   failed to paint, the headline came out as nothing but its own shadows. */
.hero__title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 5.2rem);
  line-height: 0.98; letter-spacing: 0.01em; margin: 14px 0 12px;
  text-transform: uppercase;
  color: var(--gold-hi);
  /* Separation from the moving background, plus the copper glow that used to
     come from a filter. A filter on this element forces its own compositing
     layer, which is where the clipped fill stops painting on Android. */
  text-shadow: 0 2px 12px rgba(0,0,0,0.62), 0 6px 20px rgba(200,132,47,0.24);
}

/* Enhancement only, and only from tablet up. The darkest stop is now copper
   rather than the old #8a5a26, so no line of a wrapped headline lands in a
   brown that disappears against the black background. */
@media (min-width: 721px) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero__title {
      background: linear-gradient(180deg, #fff6e2 0%, var(--gold-hi) 18%, var(--gold) 48%, #d99b45 78%, var(--copper) 100%);
      -webkit-background-clip: text;
              background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
.hero__sub {
  font-family: var(--f-mono); font-size: clamp(0.82rem, 2vw, 1.05rem);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 18px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
.hero__tagline {
  font-family: var(--f-body); font-weight: 400;
  font-size: clamp(1.05rem, 1.9vw, 1.28rem); line-height: 1.65;
  color: var(--cream); max-width: 60ch; margin: 0 0 30px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
.hero__tagline span { color: var(--gold); }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn {
  font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 3px; cursor: pointer; transition: .18s; border: 1px solid var(--copper);
}
.btn--primary { background: linear-gradient(180deg, var(--gold), var(--copper)); color: #1a1006; font-weight: 700; }
.btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--gold); }
.btn--ghost:hover { background: rgba(200,132,47,0.12); }
.btn--wa { background: #1f7a3d; border-color: #2aa356; color: #eafff0; }
.btn--wa:hover { filter: brightness(1.1); }

/* hero stat strip */
/* Honest fact strip under the hero: no invented counters, just what we commit to. */
.hero__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 40px 0 0; padding: 28px 0 0; border-top: 1px solid var(--bronze-dim); }
.hero__facts li { display: flex; flex-direction: column; gap: 5px; }
.hero__facts b { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.hero__facts span { font-size: 1rem; color: var(--muted); line-height: 1.55; }

/* =========================================================================
   OVERVIEW / AT A GLANCE
   ========================================================================= */
.grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; }
.spec-list { list-style: none; margin: 18px 0 0; padding: 0; }
.spec-list li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px dashed var(--bronze-dim); font-size: 1.04rem; }
.spec-list li b { color: var(--gold); font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.08em; min-width: 142px; text-transform: uppercase; padding-top: 2px; }
.lead { font-size: 1.16rem; line-height: 1.7; max-width: 68ch; color: var(--cream); }
.lead--muted { color: var(--muted); }

/* =========================================================================
   FFFF RATING
   ========================================================================= */
/* The two names of the same scale, shown as a pair of nameplates. */
.ratings { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 30px; }
.rating-name {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 24px;
  border: 1px solid var(--bronze-dim);
  border-left: 3px solid var(--copper);
  background: linear-gradient(160deg, rgba(40,28,16,0.45), rgba(10,7,6,0.6));
}
.rating-name__acr {
  font-family: var(--f-display); font-weight: 700; font-size: 2.1rem;
  letter-spacing: 0.08em; line-height: 1; color: var(--gold);
}
.rating-name__acr sup { font-size: 0.38em; letter-spacing: 0; vertical-align: super; }
.rating-name__exp { font-size: 1.02rem; line-height: 1.55; color: var(--muted); }

/* Invitation closing the scale: "let us take a look at it". */
.ffff-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin-top: 26px; padding-top: 26px;
  border-top: 1px dashed var(--bronze-dim);
}
.ffff-cta p { margin: 0; flex: 1 1 260px; font-size: 1.08rem; color: var(--cream); }

.ffff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 10px; }
.ffff {
  position: relative; padding: 20px 18px 18px; border-radius: var(--radius);
  border: 1px solid var(--bronze-dim);
  background: linear-gradient(165deg, rgba(30,21,12,0.7), rgba(10,7,6,0.9));
  overflow: hidden;
}
.ffff::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--lvl, var(--copper));
}
.ffff__code {
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.18em;
  color: var(--lvl, var(--copper)); margin-bottom: 6px;
}
.ffff__name { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.ffff__desc { font-size: 0.99rem; line-height: 1.6; color: var(--muted); }
.ffff__num {
  position: absolute; right: 12px; top: 6px; font-family: var(--f-display); font-weight: 700;
  font-size: 3.4rem; color: rgba(255,255,255,0.04); line-height: 1;
}
.ffff-note { margin-top: 22px; font-family: var(--f-mono); font-size: 0.78rem; line-height: 1.6; color: var(--muted-dim); letter-spacing: 0.08em; }

/* =========================================================================
   SERVICES
   ========================================================================= */
.card__icon { width: 46px; height: 46px; color: var(--copper); margin-bottom: 14px; }
.card__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* =========================================================================
   PROCESS
   ========================================================================= */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step { text-align: center; padding: 28px 18px; position: relative; }
.step__no { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--muted-dim); }
.step__icon { width: 56px; height: 56px; margin: 12px auto; color: var(--gold); }
.step__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; }
.step h4 { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 10px; font-size: 1.18rem; }
.step p { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--muted); }

/* =========================================================================
   WHY US
   ========================================================================= */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.bullets { list-style: none; margin: 0; padding: 0; }
.bullets li { position: relative; padding: 15px 0 15px 32px; border-bottom: 1px dashed var(--bronze-dim); font-size: 1.06rem; line-height: 1.62; }
.bullets li::before {
  content: "▸"; position: absolute; left: 6px; top: 10px; color: var(--copper);
}
.bullets li b { color: var(--gold); }

/* =========================================================================
   QUICK PROFILE STRIP
   ========================================================================= */
.profile { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; text-align: center; border-top: 1px solid var(--bronze-dim); padding-top: 30px; }
.profile div { padding: 6px 4px; }
.profile .pi { width: 34px; height: 34px; margin: 0 auto 10px; color: var(--copper); }
.profile .pi svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; }
.profile small { display: block; font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--muted-dim); text-transform: uppercase; }
.profile b { display: block; font-size: 0.92rem; line-height: 1.4; color: var(--cream); margin-top: 5px; }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; align-items: start; }
.contact__big { padding: 36px; }
.contact__big h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.8rem; text-transform: uppercase; margin: 0 0 6px; color: var(--gold); }
.contact__methods { list-style: none; margin: 22px 0 0; padding: 0; }
.contact__methods li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px dashed var(--bronze-dim); }
.contact__methods .ci { width: 26px; height: 26px; color: var(--copper); flex: none; }
.contact__methods .ci svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; }
.contact__methods a, .contact__methods span { color: var(--cream); font-size: 1.14rem; }
.contact__methods small { display: block; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--muted-dim); text-transform: uppercase; }
.contact__cta { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { border-top: 1px solid var(--bronze-dim); padding: 30px 0 50px; margin-top: 40px; }
.footer__inner { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.footer small, .footer p { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted-dim); margin: 0; }
.footer .joke { color: var(--muted); font-style: italic; }

/* =========================================================================
   CITY PAGES + WERKGEBIED HUB
   ========================================================================= */
.hero__title--city {
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  line-height: 1.0;
}
.breadcrumb { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 10px; text-transform: uppercase; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--gold); }

.areas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.areas span {
  font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--cream); background: rgba(200,132,47,0.10);
  border: 1px solid var(--bronze-dim); border-radius: 3px; padding: 7px 12px;
}
.areas span::before { content: "▸ "; color: var(--copper); }

.faq { list-style: none; margin: 14px 0 0; padding: 0; }
.faq li { padding: 14px 0; border-bottom: 1px dashed var(--bronze-dim); }
.faq__q { font-family: var(--f-display); font-weight: 600; color: var(--gold); font-size: 1.08rem; letter-spacing: 0.02em; margin: 0 0 6px; }
.faq__a { margin: 0; color: var(--muted); font-size: 0.95rem; }

.citygrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.citycard { display: block; padding: 22px 20px; transition: .18s; }
.citycard:hover { transform: translateY(-2px); box-shadow: inset 0 0 50px rgba(200,132,47,0.12), 0 10px 30px rgba(0,0,0,0.5); }
.citycard h3 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.3rem; margin: 0 0 6px; color: var(--gold); }
.citycard p { margin: 0; font-size: 0.9rem; color: var(--muted); }
.citycard .go { display: inline-block; margin-top: 12px; font-family: var(--f-mono); font-size: 0.76rem; letter-spacing: 0.12em; color: var(--copper); text-transform: uppercase; }

.citylinks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.citylinks a { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--muted-dim); text-transform: uppercase; }
.citylinks a:hover { color: var(--gold); }

@media (max-width: 980px) { .citygrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .citygrid { grid-template-columns: 1fr; } }

/* =========================================================================
   HALL OF FILTH
   ========================================================================= */
.specimen--cta .sicon { width: 40px; height: 40px; color: var(--copper); }
.specimen--cta .sicon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; }
.specimen--featured { grid-column: span 2; }
.specimen--featured .specimen__img { aspect-ratio: 16 / 9; }
.specimen--featured .specimen__ph { left: 12px; right: auto; padding: 4px 7px; background: rgba(10,7,6,.72); }
.specimen .go { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.specimen__full-link { position:absolute; inset:0; z-index:5; }
.specimen--featured { transition:transform .18s,border-color .18s,box-shadow .18s; }
.specimen--featured:hover { transform:translateY(-3px); border-color:var(--copper); box-shadow:inset 0 0 45px rgba(200,132,47,.1),0 12px 36px rgba(0,0,0,.55); }

@media (max-width: 980px) { .hall-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .hall-grid { grid-template-columns: 1fr; } .specimen--featured { grid-column: auto; } }

/* =========================================================================
   HALL OF FILTH — CASE FILE
   ========================================================================= */
.case-hero { position: relative; min-height: 650px; display: grid; align-items: end; overflow: hidden; padding: 90px 0 54px; }
.case-hero__city { position: absolute; inset: -24px; background: var(--case-bg) center/cover no-repeat; filter: blur(7px) saturate(.72); transform: scale(1.04); opacity: .48; }
.case-hero::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(10,7,6,.96) 0%, rgba(10,7,6,.76) 48%, rgba(10,7,6,.3) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 52%); }
.case-hero__grid { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(250px,.55fr); gap:42px; align-items:end; }
.case-kicker { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.case-id { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; color:var(--muted); border:1px solid var(--bronze); padding:5px 8px; }
.case-title { font-family:var(--f-display); font-size:clamp(3rem,8vw,6.8rem); line-height:.91; letter-spacing:.015em; text-transform:uppercase; margin:0 0 18px; max-width:830px; }
.case-title em { display:block; color:var(--gold); font-style:normal; }
.case-deck { max-width:720px; color:var(--muted); font-size:clamp(1rem,2vw,1.18rem); }
.rating-seal { width:min(100%,280px); aspect-ratio:1; border:1px solid var(--bronze); border-radius:50%; display:grid; place-content:center; text-align:center; background:radial-gradient(circle,rgba(95,143,176,.22),rgba(10,7,6,.86) 66%); box-shadow:0 0 0 9px rgba(10,7,6,.35), inset 0 0 44px rgba(95,143,176,.18); }
.rating-seal b { font:700 clamp(4.4rem,10vw,7rem)/.8 var(--f-display); color:#7fb2d3; }
.rating-seal span,.rating-seal small { font-family:var(--f-mono); letter-spacing:.14em; text-transform:uppercase; }
.rating-seal span { color:var(--cream); font-size:.8rem; margin-top:12px; }
.rating-seal small { color:var(--muted-dim); font-size:.58rem; }
.case-stats { display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--bronze-dim); background:rgba(10,7,6,.72); margin-top:-1px; }
.case-stat { padding:18px 20px; border-right:1px solid var(--bronze-dim); }
.case-stat:last-child { border:0; }
.case-stat small { display:block; color:var(--muted-dim); font: .65rem var(--f-mono); letter-spacing:.14em; text-transform:uppercase; }
.case-stat b { font:600 1rem var(--f-display); text-transform:uppercase; color:var(--cream); }
.maintenance-signal { margin-top:26px; padding:24px 28px; display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; border:1px solid var(--bronze); background:linear-gradient(105deg,rgba(192,83,59,.14),rgba(10,7,6,.82) 42%,rgba(200,132,47,.1)); }
.maintenance-signal__age { font:700 clamp(2.8rem,6vw,5rem)/.8 var(--f-display); color:var(--danger); text-align:center; }
.maintenance-signal__age small { display:block; margin-top:10px; color:var(--muted); font:.58rem var(--f-mono); letter-spacing:.13em; text-transform:uppercase; }
.maintenance-signal h2 { margin:0 0 5px; font:600 clamp(1.35rem,3vw,2.05rem) var(--f-display); text-transform:uppercase; }
.maintenance-signal p { margin:0; color:var(--muted); }
.evidence-layout { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:42px; align-items:center; }
.comparison { position:relative; margin-top:28px; border:1px solid var(--bronze); background:#080604; padding:9px; box-shadow:0 18px 55px rgba(0,0,0,.48); }
.comparison__image { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.comparison__labels { position:absolute; inset:20px 20px auto; display:grid; grid-template-columns:1fr 1fr; pointer-events:none; }
.comparison__labels span { justify-self:start; color:#fff; background:rgba(10,7,6,.82); border-left:3px solid var(--danger); padding:7px 11px; font:.7rem var(--f-mono); letter-spacing:.14em; text-transform:uppercase; }
.comparison__labels span:last-child { justify-self:end; border-left-color:var(--spore); }
.wax-seal { position:absolute; right:-18px; bottom:-30px; z-index:3; width:154px; aspect-ratio:1; display:grid; place-content:center; text-align:center; color:#f4d49b; border-radius:50%; transform:rotate(-9deg); background:radial-gradient(circle at 35% 28%,#9b2f24 0 8%,#7a201b 34%,#4c110f 74%); border:7px double #b74a37; box-shadow:0 6px 16px #000b,inset 0 0 0 4px #4e100e,inset 0 0 22px #260706; font-family:var(--f-display); text-transform:uppercase; }
.wax-seal::before { content:""; position:absolute; inset:-10px; z-index:-1; background:#641814; clip-path:polygon(50% 0,58% 7%,67% 3%,73% 12%,84% 11%,87% 22%,97% 27%,93% 38%,100% 49%,93% 58%,97% 69%,86% 75%,83% 87%,71% 87%,65% 97%,55% 92%,45% 100%,37% 92%,25% 96%,20% 85%,9% 82%,10% 70%,0 63%,6% 52%,0 42%,9% 34%,6% 23%,18% 18%,22% 7%,34% 9%,42% 1%); }
.wax-seal b { display:block; font-size:2.65rem; line-height:.8; text-shadow:0 2px #310b09; }
.wax-seal span { display:block; margin-top:7px; font:.58rem var(--f-mono); letter-spacing:.12em; }
.wax-seal small { display:block; font:.48rem var(--f-mono); letter-spacing:.09em; }
.evidence-device { position:relative; max-width:420px; margin:auto; padding:10px; border:1px solid var(--bronze); background:#050403; box-shadow:0 22px 65px rgba(0,0,0,.55); }
.evidence-device::before { content:"REC // EVIDENCE 01"; position:absolute; z-index:2; left:21px; top:21px; color:#fff; background:rgba(192,83,59,.88); padding:4px 7px; font:.62rem var(--f-mono); letter-spacing:.1em; }
.evidence-device video { display:block; width:100%; aspect-ratio:9/16; object-fit:cover; background:#080604; }
.verdict { border-left:4px solid #5f8fb0; padding:4px 0 4px 24px; margin:24px 0; }
.verdict strong { display:block; color:#7fb2d3; font:700 clamp(1.7rem,4vw,2.8rem) var(--f-display); text-transform:uppercase; }
.case-copy h2,.partner-copy h2 { font:600 clamp(1.8rem,4vw,2.8rem) var(--f-display); text-transform:uppercase; margin:.2em 0; }
.case-copy p,.partner-copy p { color:var(--muted); }
.protocol-list { list-style:none; padding:0; margin:24px 0; counter-reset:protocol; }
.protocol-list li { counter-increment:protocol; padding:12px 0 12px 52px; border-bottom:1px dashed var(--bronze-dim); position:relative; }
.protocol-list li::before { content:"0" counter(protocol); position:absolute; left:0; color:var(--gold); font-family:var(--f-mono); }
.field-photo { position:relative; overflow:hidden; min-height:520px; border:1px solid var(--bronze-dim); }
.field-photo img { width:100%; height:100%; min-height:520px; object-fit:cover; object-position:center; }
.field-photo figcaption { position:absolute; inset:auto 12px 12px; background:rgba(10,7,6,.82); padding:9px 12px; font:.65rem var(--f-mono); letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.partner-panel { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; }
.partner-copy { position:relative; min-height:430px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:38px; border:1px solid rgba(232,176,87,.22); background:linear-gradient(100deg,rgba(10,7,6,.96) 0%,rgba(10,7,6,.88) 58%,rgba(10,7,6,.28) 100%); }
.partner-copy > *:not(.partner-donut) { position:relative; z-index:2; }
.partner-logo { width:150px; height:150px; object-fit:contain; margin:0 0 20px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.42)); }
.partner-donut { position:absolute; z-index:1; width:min(55%,440px); right:-5%; bottom:-18%; opacity:.38; transform:rotate(13deg); filter:saturate(.78) contrast(1.08) drop-shadow(0 20px 34px rgba(0,0,0,.48)); pointer-events:none; }
.partner-card { padding:26px; background:linear-gradient(145deg,rgba(200,132,47,.12),rgba(10,7,6,.7)); border:1px solid var(--bronze); }
.partner-card a:not(.btn) { display:block; padding:8px 0; border-bottom:1px dashed var(--bronze-dim); font-family:var(--f-mono); }
.disclaimer { font:.7rem var(--f-mono); color:var(--muted-dim); }
.trust-section { position:relative; border-top:1px solid rgba(232,176,87,.12); background:linear-gradient(180deg,rgba(200,132,47,.045),transparent 38%); }
.trust-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.72fr); gap:38px; align-items:end; margin-bottom:28px; }
.trust-intro h2 { margin:.2em 0 0; font:600 clamp(2rem,5vw,3.8rem)/1 var(--f-display); text-transform:uppercase; }
.trust-intro p { margin:0; color:var(--muted); }
.trust-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.trust-card { position:relative; display:flex; flex-direction:column; min-height:460px; padding:30px; overflow:hidden; border:1px solid var(--bronze-dim); background:linear-gradient(145deg,rgba(21,15,11,.96),rgba(10,7,6,.82)); box-shadow:inset 0 0 55px rgba(200,132,47,.035); }
.trust-card--partner { border-color:rgba(232,176,87,.38); }
.trust-card--operator { border-color:rgba(95,143,176,.42); box-shadow:inset 0 0 65px rgba(95,143,176,.05); }
.trust-card__head { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:72px; margin-bottom:22px; }
.trust-card__head img { width:76px; height:76px; object-fit:contain; filter:drop-shadow(0 8px 15px rgba(0,0,0,.38)); }
.trust-card--operator .trust-card__head img { width:62px; height:62px; }
.trust-source { color:var(--muted); font:.63rem var(--f-mono); letter-spacing:.12em; text-align:right; text-transform:uppercase; }
.trust-score { display:flex; align-items:center; gap:18px; margin:18px 0; }
.trust-score strong { color:var(--gold); font:700 clamp(4rem,8vw,6rem)/.8 var(--f-display); }
.trust-score span { display:flex; flex-direction:column; }
.trust-score b { color:var(--gold); font-size:1.1rem; letter-spacing:.12em; }
.trust-score small { margin-top:5px; color:var(--muted); font:.62rem var(--f-mono); letter-spacing:.08em; text-transform:uppercase; }
.trust-card h3 { margin:25px 0 10px; color:#7fb2d3; font:700 clamp(2.2rem,5vw,3.4rem)/.95 var(--f-display); text-transform:uppercase; }
.trust-card p { color:var(--muted); }
.trust-card > .btn,.trust-actions { margin-top:auto; }
.trust-actions { display:flex; flex-wrap:wrap; gap:10px; }
.trust-verified { display:block; margin-top:18px; color:var(--muted-dim); font:.58rem/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; }
.trust-policy { margin:18px 0 0; padding:13px 16px; border-left:3px solid var(--copper); color:var(--muted-dim); background:rgba(10,7,6,.65); font:.62rem/1.6 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; }
@media(max-width:800px){.case-hero{min-height:590px}.case-hero__grid,.evidence-layout,.partner-panel,.trust-intro,.trust-grid{grid-template-columns:1fr}.rating-seal{width:180px}.case-stats{grid-template-columns:1fr 1fr}.case-stat:nth-child(even){border-right:0}.case-stat{border-bottom:1px solid var(--bronze-dim)}.maintenance-signal{grid-template-columns:1fr;text-align:left}.maintenance-signal__age{text-align:left}.comparison{margin-right:10px}.wax-seal{width:112px;right:-12px;bottom:-24px}.wax-seal b{font-size:2rem}.comparison__labels{inset:15px 15px auto}.comparison__labels span{font-size:.58rem;padding:5px 7px}.partner-copy{min-height:390px;padding:26px}.partner-logo{width:120px;height:120px}.partner-donut{width:72%;right:-22%;bottom:-8%;opacity:.3}.trust-intro{gap:16px}.trust-card{min-height:0;padding:24px}.trust-actions{flex-direction:column}.trust-actions .btn{width:100%}}

/* =========================================================================
   REVEAL ANIMATION
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .pick { transition: border-color .3s ease; }
  .pick:hover, .pick:focus-within { transform: none; }
  .proof__media img { transition: none; }
  .proof__media:hover img { transform: none; }
}

/* =========================================================================
   SOUND CONTROL (opt-in, never autoplays)
   ========================================================================= */
.sound-toggle { position:fixed; z-index:900; right:18px; bottom:18px; min-width:126px; padding:10px 13px; border:1px solid var(--bronze-dim); color:var(--muted); background:rgba(10,7,6,.88); backdrop-filter:blur(8px); font:.68rem var(--f-mono); letter-spacing:.09em; text-transform:uppercase; cursor:pointer; transition:border-color .2s,color .2s,box-shadow .2s; }
.sound-toggle:hover,.sound-toggle.is-playing { color:var(--gold); border-color:var(--bronze); }
.sound-toggle.is-playing { box-shadow:0 0 24px rgba(200,132,47,.13); }
.sound-toggle b { font:inherit; }

@media (max-width:620px) {
  .sound-toggle { right:12px; bottom:12px; min-width:0; }
}

/* =========================================================================
   QUICK PICK — three service panels side by side.
   No tilting. The block lifts slightly and lights up with a gradient in its
   own service colour, carried by the --acc variable set inline per card.
   ========================================================================= */
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }

.pick {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 30px 32px;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* the coloured wash, painted behind the content and faded in on hover/focus */
.pick__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background:
    radial-gradient(115% 80% at 50% 0%, var(--acc) 0%, transparent 60%),
    linear-gradient(180deg, transparent 45%, var(--acc) 190%);
  mix-blend-mode: screen;
}

/* accent hairline along the top edge, always faintly on, brighter on hover */
.pick::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  opacity: .35;
  transition: opacity .3s ease;
}

.pick:hover,
.pick:focus-within {
  transform: translateY(-6px);
  border-color: var(--acc);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.45), 0 16px 38px rgba(0,0,0,0.55);
}
.pick:hover .pick__wash,
.pick:focus-within .pick__wash { opacity: .17; }
.pick:hover::after,
.pick:focus-within::after { opacity: 1; }

/* content sits above the wash */
.pick > *:not(.pick__wash) { position: relative; z-index: 1; }

.pick .card__icon { color: var(--acc); transition: color .3s ease; }
.pick h3 {
  font-family: var(--f-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.03em; font-size: 1.32rem; line-height: 1.18;
  margin: 0 0 14px; color: var(--gold);
}
.pick:hover h3, .pick:focus-within h3 { color: var(--acc); }
.pick .svc__scope li::before { color: var(--acc); }
.pick .svc__price { color: var(--acc); }
.pick .svc__foot { flex-direction: column; align-items: stretch; margin-top: auto; }
.pick .svc__foot .btn { width: 100%; text-align: center; }

/* Heading that introduces the two secondary services below the quick pick. */
.svc-more {
  margin: 62px 0 24px;
  font-family: var(--f-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 1.35rem; color: var(--muted);
}

/* =========================================================================
   SERVICE CARDS
   ========================================================================= */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.svc { display: flex; flex-direction: column; padding: 30px 26px 28px; }
.svc h3 { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.24rem; line-height: 1.2; margin: 0 0 14px; color: var(--gold); }
.svc__lead { margin: 0; font-size: 1.02rem; line-height: 1.62; color: var(--muted); }
.svc__scope { list-style: none; margin: 22px 0 0; padding: 0; }
.svc__scope li { position: relative; padding: 10px 0 10px 24px; font-size: 0.98rem; color: var(--cream); border-bottom: 1px dashed var(--bronze-dim); }
.svc__scope li::before { content: "+"; position: absolute; left: 0; top: 10px; font-family: var(--f-mono); color: var(--copper); }
.svc__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; padding-top: 26px; }
.svc__price { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.svc__foot .svc__price { width: 100%; }

/* =========================================================================
   PROOF / BEFORE-AFTER
   ========================================================================= */
.proof { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: stretch; }
.proof__media { position: relative; display: block; overflow: hidden; border: 1px solid var(--bronze); background: var(--panel); }
.proof__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.proof__media:hover img { transform: scale(1.03); }
.proof__badge { position: absolute; top: 14px; left: 14px; padding: 5px 10px; background: rgba(10,7,6,.86); border: 1px solid var(--bronze); color: var(--gold); font: .7rem var(--f-mono); letter-spacing: .12em; }
.proof__id { position: absolute; bottom: 14px; right: 14px; padding: 4px 9px; background: rgba(10,7,6,.86); color: var(--muted-dim); font: .62rem var(--f-mono); letter-spacing: .14em; }
.proof__body { padding: 36px 32px; display: flex; flex-direction: column; }
.proof__title { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 1.7rem; margin: 14px 0 16px; color: var(--gold); }
.proof__body .btn { margin-top: auto; align-self: flex-start; }
.proof__submit { display: flex; align-items: center; gap: 26px; margin-top: 26px; padding: 30px 32px; }
.proof__submit .sicon { flex: none; width: 46px; height: 46px; color: var(--copper); }
.proof__submit .sicon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; }
.proof__submit-txt { flex: 1; }
.proof__submit h3 { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 1.24rem; margin: 0 0 8px; color: var(--gold); }
.proof__submit p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--muted); }
.proof__submit .btn { flex: none; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item { padding: 0; }
.faq__item summary { list-style: none; cursor: pointer; padding: 24px 56px 24px 28px; position: relative; font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 1.18rem; color: var(--cream); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 28px; top: 50%; transform: translateY(-50%); font-family: var(--f-mono); font-size: 1.5rem; line-height: 1; color: var(--copper); }
.faq__item summary:hover { color: var(--gold); }
.faq__item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.faq__item[open] summary { color: var(--gold); }
.faq__item[open] summary::after { content: "\2212"; }
.faq__item p { margin: 0; padding: 20px 28px 28px; font-size: 1.06rem; line-height: 1.72; max-width: 78ch; color: var(--muted); border-top: 1px dashed var(--bronze-dim); }

/* =========================================================================
   MOBILE CTA BAR — hidden on desktop, shown on phones (see media query below)
   ========================================================================= */
.mobile-cta { display: none; }

/* =========================================================================
   ENQUIRY BUILDER
   Controls are 16px or larger on purpose: anything smaller makes iOS Safari
   zoom the page when a field is focused.
   ========================================================================= */
.inquiry { display: flex; flex-direction: column; }
.inquiry__noscript {
  margin: 0 0 20px; padding: 14px 16px;
  border: 1px solid var(--copper); color: var(--cream); font-size: 1rem;
}
.inquiry__form { display: flex; flex-direction: column; gap: 20px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field > label {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
}
.field input[type="text"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--f-body); font-size: 1rem; line-height: 1.5;
  color: var(--cream);
  background: rgba(8,6,5,0.72);
  border: 1px solid var(--bronze-dim);
  border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 92px; }
.field select {
  /* the native arrow disappears with appearance:none, so draw one */
  background-image: linear-gradient(45deg, transparent 50%, var(--copper) 50%),
                    linear-gradient(135deg, var(--copper) 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field select option { background: var(--panel); color: var(--cream); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(232,176,87,0.16);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--danger); }
.field input:disabled { opacity: .45; cursor: not-allowed; }

.field__row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.field__row input[type="number"] { flex: 0 1 140px; }
.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 1rem; color: var(--muted); }
.check input { width: 20px; height: 20px; accent-color: var(--copper); cursor: pointer; }

.field__err { margin: 0; font-size: 0.95rem; color: var(--danger); }

.inquiry__preview {
  font-family: var(--f-mono) !important;
  font-size: 1rem !important;   /* 16px: below that iOS zooms on focus */
  color: var(--muted) !important;
  background: rgba(0,0,0,0.5) !important;
}
.inquiry__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.inquiry__actions .btn { flex: 1 1 190px; text-align: center; }
.inquiry__status { margin: 0; min-height: 1.4em; font-size: 0.98rem; color: var(--gold); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 980px) {
  .pick-grid { grid-template-columns: 1fr; }
  .proof { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .ffff-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .why, .contact { grid-template-columns: 1fr; }
  .profile { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
/* Use the existing compact menu before translated links crowd out languages. */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__links.open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-2); border-bottom: 1px solid var(--bronze); padding: 8px 22px;
  }
  .nav__toggle { display: inline-block; }
  .nav__inner { position: relative; }
  .langswitch { margin-left: auto; }
}
@media (max-width: 620px) {
  .pick-grid, .svc-grid, .steps, .ffff-grid, .ratings { grid-template-columns: 1fr; }
  .ffff-cta .btn { width: 100%; text-align: center; }
  .inquiry__actions .btn { flex: 1 1 100%; }
  /* Side by side, the mono label reserves 142px and squeezes the value into a
     column too narrow to read. Stack them on phones instead. */
  .spec-list li { flex-direction: column; gap: 4px; padding: 12px 0; }
  .spec-list li b { min-width: 0; padding-top: 0; }
  .pick { padding: 26px 22px 24px; }
  .hero__facts { grid-template-columns: 1fr 1fr; gap: 14px; }
  .proof__submit { flex-direction: column; align-items: flex-start; gap: 16px; }
  .proof__submit .btn { width: 100%; text-align: center; }
  .profile { grid-template-columns: repeat(2, 1fr); }
  .hero__coords { display: none; }
  .section { padding: 60px 0; }
  .panel { padding: 26px 22px; }
  .contact__big { padding: 28px 24px; }
  .proof__body { padding: 28px 24px; }
  .brand { gap: 7px; }
  .brand__mark { width: 32px; height: 32px; }
  .brand__txt small { display: none; }
  .brand__txt b { font-size: .88rem; }
  .langswitch button { padding: 6px 7px; font-size: .65rem; }
  .nav__inner { gap: 8px; padding-left: 14px; padding-right: 14px; }
}

/* Compact call/quote bar on phones. Body gets bottom padding so it never
   covers content, and the sound toggle moves up to clear it. */
@media (max-width: 720px) {
  .mobile-cta {
    display: flex; gap: 8px; position: fixed; z-index: 950;
    left: 0; right: 0; bottom: 0;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: rgba(10,7,6,.94); backdrop-filter: blur(8px);
    border-top: 1px solid var(--bronze-dim);
  }
  .mobile-cta .btn { flex: 1; text-align: center; padding: 12px 10px; }
  body { padding-bottom: 68px; }
  .sound-toggle { bottom: 74px; }
}