/* =========================================================================
   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; }

/* The hidden attribute must win over any display rule that follows it,
   otherwise a flex or grid container stays on screen while claiming to
   be hidden. */
[hidden] { display: none !important; }

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; object-fit: contain; }
.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%);
}
/* Local landmark behind the hero, the same treatment as the case page.

   It hangs off .hero, not off .wrap. Inside the wrap it was capped at --maxw
   and centred, so on a wide screen the blurred rectangle ended mid-page and
   its sides read as seams. Anchored to the section it is clipped by the
   section's own overflow instead, which leaves no edge to see.

   It is a right-hand panel rather than a backdrop: the subject sits right of
   the image's centre, so anchoring right lands it in the open part of the hero
   rather than under the dark side of the overlay where the headline sits. */
.hero__place {
  position: absolute;
  top: -30px; right: -30px; bottom: -30px;
  left: 28%;
  /* Not 'right': the panel is far taller than the image, so cover crops a lot
     of width. 82% is where the unit clears the fade on the left and still sits
     inside the frame on the widest screens. */
  background-position: 82% center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(5px) saturate(.86);
  opacity: .6;
  pointer-events: none;
  z-index: 0;
  /* The only way to end a blurred element without a seam: fade the pixels
     themselves, not a colour painted over them. */
  -webkit-mask-image: linear-gradient(95deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 11%, #000 26%);
          mask-image: linear-gradient(95deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 11%, #000 26%);
}
/* Top and bottom are cut by the section's overflow, so both are faded into the
   page. The horizontal pass keeps the headline side calm without flattening
   the picture on the right. */
.hero__place::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(10,7,6,0) 24%),
    linear-gradient(0deg, var(--bg) 0%, rgba(10,7,6,0) 46%),
    linear-gradient(90deg, rgba(10,7,6,.82) 0%, rgba(10,7,6,.34) 44%, rgba(10,7,6,.06) 100%);
}
/* No mask support: a plain full-bleed cover. Less composed, never broken. */
@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .hero__place { left: -30px; background-position: 68% center; opacity: .5; }
}

.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; }

/* Two-sided tile. The card turns over on hover, on focus and on tap.

   Deliberately 2D: a rotateY flip depends on preserve-3d and
   backface-visibility, and a device that flattens 3D would show both faces
   stacked and mirrored. Squeezing the front to zero width while the back opens
   from zero reads as the same turn and cannot fail that way. Opacity runs with
   it, so a browser that ignores transforms still gets a clean cross-fade. */
.ffff {
  position: relative;
  border-radius: var(--radius);
  cursor: pointer;
}
.ffff__inner { position: relative; min-height: 188px; }

.ffff__face {
  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;
  transition: transform .26s ease, opacity .26s ease;
}
/* The front sits in flow and sets the tile's height; the back is stacked on it. */
.ffff__face--front { position: relative; transform-origin: center; }
.ffff__face--back {
  position: absolute; inset: 0;
  transform: scaleX(0);
  opacity: 0;
  transform-origin: center;
  border-color: var(--lvl, var(--copper));
  background: linear-gradient(165deg, rgba(30,21,12,0.9), rgba(10,7,6,0.96));
}

.ffff:hover .ffff__face--front,
.ffff:focus-visible .ffff__face--front,
.ffff.is-flipped .ffff__face--front { transform: scaleX(0); opacity: 0; }

.ffff:hover .ffff__face--back,
.ffff:focus-visible .ffff__face--back,
.ffff.is-flipped .ffff__face--back {
  transform: scaleX(1);
  opacity: 1;
  transition-delay: .24s;
}

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

.ffff__face::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); margin: 0; }
.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__face--back .ffff__num { color: rgba(255,255,255,0.05); }


.ffff-note__link { color: var(--gold); border-bottom: 1px solid var(--bronze); }
.ffff-note__link:hover { color: var(--gold-hi); border-bottom-color: var(--gold); }
.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; }
/* The mark closes the page the same way it opens it. Slightly under full
   strength, because a footer should settle rather than announce. */
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__mark { width: 34px; height: 34px; opacity: .8; flex: none; }
.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; }

.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 — CASE FILE
   ========================================================================= */
.case-hero { position: relative; min-height: 650px; display: grid; align-items: end; overflow: hidden; padding: 90px 0 54px; }
/* The landmark reads as a place rather than a texture: less blur, more of
   its own colour. The gradient over it still carries the text contrast. */
/* The image is set on the element, not through a custom property: a relative
   url() inside a custom property resolves against this stylesheet rather than
   the page, which put it two directories too high. */
.case-hero__city { position: absolute; inset: -24px; background-position: center; background-size: cover; background-repeat: no-repeat; filter: blur(5px) saturate(.86); transform: scale(1.04); opacity: .62; }
.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; }
/* With the partner reputation card gone, our card stands alone. */
.trust-grid--single { grid-template-columns:1fr; }
.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; }
  .ffff__face { transition: none; }
  .ffff:hover .ffff__face--back,
  .ffff:focus-visible .ffff__face--back,
  .ffff.is-flipped .ffff__face--back { transition-delay: 0s; }
}

/* =========================================================================
   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%; }

/* =========================================================================
   GOOGLE REVIEWS — a link out, not a copy of the profile
   ========================================================================= */
.reviews { display: flex; align-items: center; gap: 24px; margin-top: 22px; padding: 26px 30px; }
.reviews__mark { flex: none; width: 42px; height: 42px; color: var(--gold); }
.reviews__mark svg { width: 100%; height: 100%; fill: currentColor; }
.reviews__txt { flex: 1; }
.reviews h3 {
  margin: 0 0 6px; color: var(--gold);
  font-family: var(--f-display); font-weight: 600; font-size: 1.24rem;
  text-transform: uppercase; letter-spacing: .03em;
}
.reviews p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--muted); }
.reviews .btn { flex: none; }

/* =========================================================================
   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; }

/* One visible focus ring across the site, for keyboard users only. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =========================================================================
   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); }
/* A real outline rather than a box-shadow ring: shadows are dropped in forced
   colours mode, and the focus would disappear with them. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--gold);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); }
.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) {
  /* Two up on tablets. One 700px-wide card per row leaves the content
     stretched across a line nobody wants to read. */
  .pick-grid { grid-template-columns: repeat(2, 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; }
  .reviews { flex-direction: column; align-items: flex-start; gap: 16px; }
  .reviews .btn { width: 100%; text-align: center; }
  .profile { grid-template-columns: repeat(2, 1fr); }
  .hero__coords { display: none; }
  .hero__place {
    left: -30px;
    background-position: 66% center;
    opacity: .34;
    -webkit-mask-image: none;
            mask-image: 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; }
}