/* ==========================================================================
   RĂZVAN DETAILING v3 — COMPONENT STYLES
   Built on top of styles/tokens.css. Consumes --rd-*, --fs-*, --sp-*, --r-*,
   --dur-*, --ease*, --ph-* custom properties. NO token redefinition.
   NO `transition: all`. Mobile-first; QA at 320 / 390 / 1440.
   Implements every component from docs/design-notes.md.
   ========================================================================== */

/* ----------------------------------------------------------------------
   0. RESET / BASE
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; letter-spacing: var(--ls-tight); }
html { scroll-behavior: smooth; background: var(--rd-black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--rd-paper);
  color: var(--rd-ink);
  font-family: var(--rd-font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  overflow-x: hidden;            /* hard guard against 320px horizontal scroll */
}
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
ul { list-style: none; }

/* ----------------------------------------------------------------------
   1. PRIMITIVES — containers, sections, type, reveal
   ---------------------------------------------------------------------- */
.wrap   { width: var(--container);        margin-inline: auto; }
.narrow { width: var(--container-narrow); margin-inline: auto; }
.hero-copy { width: var(--container-hero); margin-inline: auto; }

.section { position: relative; padding-block: var(--section-pad); background: var(--rd-paper); }
.section.dark { background: var(--rd-black); color: var(--rd-on-dark); }
.section.soft { background: var(--rd-soft); }
.section.surface { background: var(--rd-surface-000); color: var(--rd-on-dark); }

/* Gold is rationed: eyebrows read as a quiet neutral label, prefixed by ONE
   small gold tick — the signature detail motif, threaded across every section.
   Gold itself is now reserved for price/proof, the Signature card, and this tick. */
.eyebrow {
  font-size: var(--fs-eyebrow); line-height: 1.3; font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--rd-eyebrow, var(--rd-gold-ink));
}
.eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--rd-gold); vertical-align: middle; margin-right: 11px; transform: translateY(-2px);
}
.eyebrow--gold { color: var(--rd-gold); }
/* eyebrow label colour adapts to dark vs light context (custom-property cascade) */
.hero, .section.dark, .section.surface, .packages, .config, .b2b { --rd-eyebrow: var(--rd-gold); }
.display  { font-family: var(--rd-font-display); font-size: var(--fs-hero); line-height: var(--lh-display); font-weight: 560; font-variation-settings: "opsz" 130, "wght" 560; color: var(--rd-on-dark); text-wrap: balance; }
.headline { font-family: var(--rd-font-display); font-size: var(--fs-h1); line-height: var(--lh-heading); font-weight: 560; font-variation-settings: "opsz" 78, "wght" 560; text-wrap: balance; overflow-wrap: break-word; }
.lead     { font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--rd-muted); text-wrap: pretty; }
.section.dark .lead, .section.surface .lead { color: var(--rd-on-dark-62); }

.section-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .58fr);
  gap: 36px; align-items: end; margin-bottom: var(--section-head-gap);
}
.section-head.center { display: block; text-align: center; max-width: 850px; margin-inline: auto; margin-bottom: var(--section-head-gap); }
.section-head .lead { margin-top: var(--sp-3); }

/* reveal / stagger (toggled by app.js .is-visible)
   MOTION IS KEYED OFF THE fx-tier CLASSES, NOT a media query (Phase 3 contract).
   Default (no class yet / tier-0 / reduced-motion / no-JS): elements are STATIC
   and fully visible — there is NO hidden start state, so nothing can get stuck
   invisible. The hidden start state + entrance transition are introduced ONLY
   under html.fx-tier-1 and html.fx-tier-2 (LIGHT and FULL). This is the
   replacement for the old "@media (max-width:640px)" kill that — backwards —
   made mobile the LEAST animated layer. */
html.fx-tier-1 .reveal,
html.fx-tier-2 .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
html.fx-tier-1 .reveal.is-visible,
html.fx-tier-2 .reveal.is-visible { opacity: 1; transform: none; }
html.fx-tier-1 .stagger > *,
html.fx-tier-2 .stagger > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur-stagger) var(--ease-out), transform var(--dur-stagger) var(--ease-out);
}
html.fx-tier-1 .stagger.is-visible > *,
html.fx-tier-2 .stagger.is-visible > * { opacity: 1; transform: none; }
html.fx-tier-1 .stagger.is-visible > *:nth-child(2),
html.fx-tier-2 .stagger.is-visible > *:nth-child(2) { transition-delay: .06s; }
html.fx-tier-1 .stagger.is-visible > *:nth-child(3),
html.fx-tier-2 .stagger.is-visible > *:nth-child(3) { transition-delay: .12s; }
html.fx-tier-1 .stagger.is-visible > *:nth-child(4),
html.fx-tier-2 .stagger.is-visible > *:nth-child(4) { transition-delay: .18s; }
html.fx-tier-1 .stagger.is-visible > *:nth-child(5),
html.fx-tier-2 .stagger.is-visible > *:nth-child(5) { transition-delay: .24s; }
html.fx-tier-1 .stagger.is-visible > *:nth-child(6),
html.fx-tier-2 .stagger.is-visible > *:nth-child(6) { transition-delay: .30s; }

/* skip link (§18) */
.skip {
  position: fixed; left: 14px; top: 14px; z-index: var(--z-skip);
  transform: translateY(-160%); background: #fff; color: #000;
  padding: 10px 14px; border-radius: var(--r-pill);
  transition: transform var(--dur-base) var(--ease);
}
.skip:focus { transform: none; }

/* shared focus ring (§18) — on-brand, >=3:1 vs adjacent surface.
   Default ring is the WHITE-ish --rd-focus (these controls live on dark
   sections / dark buttons). Light-context overrides below use --rd-focus-ink
   (ink ring on paper). NO 'transition: all'; outline is not animated. */
:focus-visible { outline: 3px solid var(--rd-focus); outline-offset: 3px; }
.btn:focus-visible, .chip:focus-visible, .lang-btn:focus-visible,
.nav-links a:focus-visible, .faq summary:focus-visible,
.package-more summary:focus-visible, .nav-toggle:focus-visible {
  outline: 3px solid var(--rd-focus); outline-offset: 3px;
}
/* light/paper contexts: ink ring (white ring would vanish on light bg).
   .skip has a white background; .on-light is the nav shell over light;
   .btn.light/.btn.gold and recommendation/extra/process controls sit on
   light surfaces. */
.skip:focus-visible,
.on-light .nav-links a:focus-visible, .on-light .nav-toggle:focus-visible,
.on-light .lang-btn:focus-visible,
.btn.light:focus-visible, .btn.gold:focus-visible,
.section:not(.dark):not(.surface) .btn:focus-visible,
.section:not(.dark):not(.surface) a:focus-visible,
.section:not(.dark):not(.surface) summary:focus-visible {
  outline-color: var(--rd-focus-ink);
}

/* tabular numerals on all price/score surfaces (§18) */
.price, .price-amount, .total-price, .score, .total-breakdown strong, .fleet-row strong { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------
   2. PILL BUTTONS (§14)
   ---------------------------------------------------------------------- */
.btn {
  --pointer-x: 50%; --pointer-y: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 42px; padding: 11px 18px; border-radius: var(--r-pill);
  background: var(--rd-graphite-2); color: var(--rd-on-dark);
  font-size: var(--fs-body-sm); font-weight: var(--fw-heavy); white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.48), rgba(255,255,255,0) 38%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease);
}
.btn:hover::after { opacity: .36; }
.btn:hover { transform: translateY(-1px); background: var(--rd-graphite-3); }
.btn:active { transform: scale(.98); }
.btn.gold  { background: var(--rd-gold); color: var(--rd-ink); }
.btn.gold:hover { background: var(--rd-gold-2); }
.btn.ghost { background: var(--rd-fill-dark); box-shadow: inset 0 0 0 1px var(--rd-fill-dark-line); color: var(--rd-on-dark); }
.btn.ghost:hover { background: rgba(255,255,255,.16); }
.btn.light { background: #fff; color: var(--rd-ink); box-shadow: var(--sh-panel-light); }
.btn.light:hover { background: var(--rd-soft); }

/* ----------------------------------------------------------------------
   3. CHIPS (§13)
   ---------------------------------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  --pointer-x: 50%; --pointer-y: 50%;
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 39px; border-radius: var(--r-pill); padding: 9px 14px;
  border: 1px solid var(--rd-fill-dark-line); background: var(--rd-fill-dark-weak);
  color: var(--rd-on-dark-80); font-size: var(--fs-body-sm); font-weight: var(--fw-heavy);
  transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.chip::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.42), rgba(255,255,255,0) 42%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease);
}
.chip:hover::after { opacity: .3; }
.chip:hover { transform: translateY(-1px); border-color: var(--rd-line-dark-strong); }
.chip.active { background: #fff; color: var(--rd-ink); border-color: #fff; }
.chip.is-disabled, .chip:disabled { opacity: .4; cursor: not-allowed; }
.chip.is-disabled:hover, .chip:disabled:hover { transform: none; border-color: var(--rd-fill-dark-line); }

/* segmented control (§13) */
.segmented { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r-pill); background: var(--rd-fill-dark); border: 1px solid var(--rd-line-dark); }
.segmented button { min-height: 40px; border-radius: var(--r-pill); padding: 8px 18px; font-size: var(--fs-body-sm); font-weight: var(--fw-heavy); color: var(--rd-on-dark-62); transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.segmented button.active { background: #fff; color: var(--rd-ink); box-shadow: var(--sh-segment); }

/* ----------------------------------------------------------------------
   4. HEADER / NAV (§1)
   ---------------------------------------------------------------------- */
.nav-shell {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav); height: var(--nav-h);
  background: rgba(3,3,4,.68); color: var(--rd-on-dark);
  border-bottom: 1px solid var(--rd-line-dark-2);
  backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
  transition: background-color var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
  view-transition-name: rd-nav; /* persistent shell across cross-document VT (§Phase 1) */
}
.nav-shell.on-light { background: rgba(251,251,253,.82); color: var(--rd-ink); border-color: var(--rd-line); }
.nav { position: relative; height: var(--nav-h); display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; }
.brand { display: flex; align-items: center; gap: 10px; min-width: max-content; font-size: 15px; font-weight: var(--fw-heavy); }
.brand-logo { height: 40px; width: auto; display: block; }
.brand span { white-space: nowrap; }
.nav-links { display: flex; justify-content: center; align-items: center; gap: 18px; font-size: 13px; color: var(--rd-on-dark-72); }
.on-light .nav-links { color: rgba(0,0,0,.62); }
.nav-links a { transition: color var(--dur-fast) var(--ease); }
.nav-links a:hover, .nav-links a.active { color: currentColor; }
.on-light .nav-links a.active { color: var(--rd-ink); }
.nav-actions { display: flex; align-items: center; gap: 10px; }

/* hamburger (NEW vs v2 — audit finding) */
.nav-toggle { display: none; position: relative; width: 38px; height: 32px; border: 1px solid var(--rd-fill-dark-line); border-radius: var(--r-sm); }
.on-light .nav-toggle { border-color: rgba(0,0,0,.2); }
.nav-toggle-bar { position: absolute; left: 9px; right: 9px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); }
.nav-toggle-bar:nth-child(1) { top: 10px; }
.nav-toggle-bar:nth-child(2) { top: 15px; }
.nav-toggle-bar:nth-child(3) { top: 20px; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* lang switch (§1) */
.lang { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--r-pill); border: 1px solid var(--rd-fill-dark-line); background: var(--rd-fill-dark); }
.on-light .lang { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); }
.lang-btn { min-width: 34px; height: 27px; border-radius: var(--r-pill); color: var(--rd-on-dark-62); font-size: 12px; font-weight: var(--fw-heavy); transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.on-light .lang-btn { color: rgba(0,0,0,.58); }
.lang-btn.active { background: #fff; color: var(--rd-ink); }
.on-light .lang-btn.active { background: var(--rd-surface-250); color: #fff; }
.nav-cta { min-height: 33px; padding: 8px 14px; font-size: 13px; }

/* ----------------------------------------------------------------------
   5. HERO (§2)
   ---------------------------------------------------------------------- */
.hero {
  --hero-shift-x: 0px; --hero-shift-y: 0px; --hero-scroll-y: 0px; --shine-x: 50%;
  position: relative; min-height: 78svh; background: #000; color: var(--rd-on-dark);
  overflow: hidden; isolation: isolate; display: flex; align-items: flex-end;
  padding: 96px 0 34px;
}
.hero-media { position: absolute; inset: -1.5vw; z-index: -2; transform: translate3d(var(--hero-shift-x), calc(var(--hero-scroll-y) + var(--hero-shift-y)), 0) scale(1.018); transform-origin: center; will-change: transform; }
.hero-media .rd-media, .hero-media img, .hero-media .rd-ph-tile { width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: center 48%; filter: saturate(1.04) contrast(1.06); }
.hero-media .rd-ph-tile { aspect-ratio: auto !important; border: 0; border-radius: 0; }
.hero-media::before { content: ""; position: absolute; inset: -12%; z-index: 1; pointer-events: none; background: radial-gradient(circle at var(--shine-x) 42%, rgba(255,255,255,.2), rgba(255,255,255,0) 26%), linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.18) 45%, rgba(255,255,255,0) 59%); mix-blend-mode: screen; opacity: .42; transition: background-position var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.9) 100%); }

/* STATIC HERO LCP IMAGE (§Phase 2 — "take the LCP hero out of JS").
   A plain eager <picture> (.hero-picture) whose <img> is .hero-media-static,
   markup'd straight in the HTML with fetchpriority=high + preload. It sits in
   the same plane as the JS .hero-media (behind copy, behind the .hero::after
   scrim) so it renders the LCP frame on first byte with NO layout shift and NO
   JS dependency. We do NOT add the parallax transform here — it stays static so
   it can paint before app.js runs. aspect-ratio locks the box to reserve space
   (CLS guard); object-fit:cover fills it like the current hero media. */
.hero-picture {
  position: absolute; inset: 0; z-index: -2; display: block;
  overflow: hidden; background: #000; pointer-events: none;
}
.hero-media-static {
  /* Fill the absolutely-positioned .hero-picture, which is itself sized by the
     hero's min-height — that fill is what guarantees zero layout shift here.
     aspect-ratio is a defensive fallback so the box still reserves a 780×1100
     portrait frame if .hero-picture is ever placed in normal flow. The skeleton
     agent should also set width/height attributes on the <img> for the same
     reason. cover + object-position match the existing .hero-media crop. */
  width: 100%; height: 100%; aspect-ratio: 780 / 1100;
  object-fit: cover; object-position: center 48%;
  filter: saturate(1.04) contrast(1.06);
}
@media (max-width: 640px) { .hero-media-static { object-position: center 42%; } }
.hero-copy { text-align: center; }
.hero-brand-line { font-size: clamp(28px, 5vw, 76px); line-height: .94; font-weight: var(--fw-black); letter-spacing: var(--ls-brand); text-transform: uppercase; color: var(--rd-gold); text-shadow: 0 18px 70px rgba(0,0,0,.64); margin: 0 auto 14px; animation: rd-rise .85s var(--ease-out) .08s both; view-transition-name: rd-hero-brand; /* shared element across pages with a hero (§Phase 1) */ }
.hero-kicker { font-size: 16px; font-weight: 750; color: var(--rd-on-dark); text-shadow: 0 2px 16px rgba(0,0,0,.72); margin-bottom: 14px; animation: rd-rise .8s var(--ease-out) .18s both; }
.hero h1.display { max-width: 880px; margin: 0 auto; text-shadow: 0 20px 70px rgba(0,0,0,.66); animation: rd-rise .9s var(--ease-out) .3s both; }
.hero-sub { max-width: 690px; margin: 18px auto 0; color: var(--rd-on-dark-78, rgba(255,255,255,.78)); text-shadow: 0 2px 14px rgba(0,0,0,.58); animation: rd-rise .9s var(--ease-out) .46s both; }
.hero-actions { display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: 24px; animation: rd-rise .9s var(--ease-out) .58s both; }
.proof-strip { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; animation: rd-rise .9s var(--ease-out) .72s both; }
.proof-pill { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 30px; border-radius: var(--r-pill); padding: 6px 11px; background: var(--rd-fill-dark); border: 1px solid var(--rd-fill-dark-line); color: var(--rd-on-dark-72); font-size: 13px; font-weight: 750; }
.proof-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rd-gold); }
@keyframes rd-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------------
   5b. FX TIERS — hero entrance, CSS-3D depth, WebGL sheen canvas
   ALL motion keys off the html.fx-tier-* class the engine sets (Phase 3).
   ---------------------------------------------------------------------- */

/* tier-0 = NO motion: cancel the hero entrance run (the .reveal/.stagger
   layers are already static at tier-0 because their hidden state only exists
   under tier-1/tier-2 above). Belt-and-braces alongside the reduced-motion
   block at the foot of this file. */
html.fx-tier-0 .hero-brand-line,
html.fx-tier-0 .hero-kicker,
html.fx-tier-0 .hero h1.display,
html.fx-tier-0 .hero-sub,
html.fx-tier-0 .hero-actions,
html.fx-tier-0 .proof-strip { animation: none; }
/* tier-0 also flattens the parallax media transforms to a plain static crop
   (the engine never feeds the vars here, but make it explicit + drop the
   compositor hint so weak devices don't pay for a layer they don't use). */
html.fx-tier-0 .hero-media { transform: scale(1.018); will-change: auto; }
html.fx-tier-0 .story-media img { transform: scale(1.02); }

/* CSS-3D DEPTH — tier-2 ONLY (FULL, capable desktop). The engine sets
   --tilt-x / --tilt-y (degrees) on the .hero from pointer position; we add a
   perspective on the hero and rotate the parallax media plane + the shine
   layer subtly so the hero gains real depth on pointer move. Restrained:
   small rotation, the copy plane is NOT tilted (legibility), and price/CTA
   cards are NEVER tilted (conversion clarity is protected — no tilt rules
   target .package-card / .price-row / .total-panel / .contact-card / .btn). */
html.fx-tier-2 .hero {
  --tilt-x: 0deg; --tilt-y: 0deg;
  perspective: 1400px; perspective-origin: 50% 42%;
}
html.fx-tier-2 .hero-media {
  transform:
    translate3d(var(--hero-shift-x), calc(var(--hero-scroll-y) + var(--hero-shift-y)), 0)
    rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.04);
  transition: transform var(--dur-slow) var(--ease-out);
}
html.fx-tier-2 .hero-fx {
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}

/* WEBGL SHEEN CANVAS — the engine injects <canvas class="hero-fx"
   aria-hidden="true"> into the existing .hero-picture on tier-2 only and then
   imports js/hero-fx.js. Stacking: .hero-picture is z-index:-2 with its own
   stacking context, so the canvas at z-index:0 paints over the static hero
   image but the WHOLE .hero-picture group still sits at -2 — below the
   .hero::after scrim (z-index:-1, a direct hero child painted later) and below
   .hero-copy. Net: the sheen is BEHIND the scrim and BEHIND the copy, exactly
   as the contract requires. Pure decor: pointer-events:none, aria-hidden.
   Fades in once the engine adds .is-ready, using --dur-shot. */
.hero-fx {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: block; width: 100%; height: 100%;
  opacity: 0; mix-blend-mode: screen;
  transition: opacity var(--dur-shot) var(--ease-out);
}
.hero-fx.is-ready { opacity: .9; }
/* never render the canvas outside tier-2 even if a stale node lingers */
html:not(.fx-tier-2) .hero-fx { display: none; }

/* ----------------------------------------------------------------------
   6. PLACEHOLDER MEDIA TILE (§16) + RIBBON / OUTLINE (§17)
   ---------------------------------------------------------------------- */
.rd-media { position: relative; width: 100%; overflow: hidden; border-radius: var(--r-card); background: var(--rd-surface-250); }
.rd-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.04) contrast(1.06); transition: transform var(--dur-image) var(--ease-out), filter var(--dur-image) var(--ease-out); }
/* signature brand grade — one cohesive look across all real photography:
   a faint top-left warm sheen + a soft vignette, blended gently so the stills
   read as one premium shoot. Static (no motion), so reduced-motion-safe. */
.rd-media--graded { isolation: isolate; }
.rd-media--graded::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; mix-blend-mode: soft-light;
  background:
    linear-gradient(152deg, rgba(212, 166, 74,.4) 0%, rgba(212, 166, 74,0) 44%),
    radial-gradient(140% 104% at 50% -14%, rgba(3,3,4,0) 56%, rgba(3,3,4,.36) 100%);
}
/* crafted gold hairline frame on the showcase surfaces */
.shot .rd-media, .article-hero-media, .story-media .rd-media { box-shadow: inset 0 0 0 1px var(--rd-gold-line); }

/* tier-2 only: subtle 3D pointer-tilt on photo surfaces (vars set by app.js).
   The conversion card / price / CTA are NEVER tilted (decision clarity). Under
   tier-0/1 + prefers-reduced-motion these rules never match, so it stays flat. */
html.fx-tier-2 .package-media, html.fx-tier-2 .service-card { transition: transform var(--dur-base) var(--ease-out); }
html.fx-tier-2 .package-media.is-tilting, html.fx-tier-2 .service-card.is-tilting { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); will-change: transform; }
.rd-ph-tile {
  position: relative; display: grid; place-items: center; width: 100%;
  background: var(--ph-tile-bg); border: var(--ph-tile-border); border-radius: var(--r-card);
}
.rd-ph-tile.is-light { background: var(--ph-tile-bg-light); }
.rd-ph-tile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: linear-gradient(var(--ph-tile-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ph-tile-grid) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .8;
}
.rd-ph-tile-chip {
  position: relative; z-index: 1; display: inline-flex; align-items: center;
  max-width: calc(100% - 24px); padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--ph-label-bg); border: 1px solid var(--ph-label-line); color: var(--ph-label);
  font-size: 12px; font-weight: var(--fw-heavy); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; text-align: center; line-height: 1.2;
}
.rd-ph-tile.is-light .rd-ph-tile-chip { color: var(--rd-gold-ink); }

/* "TEMPLATE" ribbon — fixed, subtle, below nav (§17) */
.rd-ribbon {
  position: fixed; left: 50%; top: calc(var(--nav-h) + 10px); transform: translateX(-50%);
  z-index: var(--z-overlay); pointer-events: none;
  padding: 5px 14px; border-radius: var(--r-pill);
  background: var(--ph-ribbon-bg); border: 1px solid var(--ph-ribbon-line); color: var(--ph-ribbon-text);
  font-size: 12px; font-weight: var(--fw-heavy); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  backdrop-filter: var(--ph-ribbon-blur); -webkit-backdrop-filter: var(--ph-ribbon-blur);
}
/* unfilled bracket fields outline — only in placeholder mode */
[data-rd-placeholder] [data-placeholder] {
  outline: var(--ph-outline); outline-offset: 2px; background: var(--ph-outline-bg); border-radius: 3px;
}
/* staging only: the fixed ribbon (top: nav-h + 10) sits below the nav, so any
   sticky element offset only by the nav (--sticky-top) gets covered by it — the
   total/contact/category rails overlapped the ribbon when scrolled. Push the
   sticky offset below the ribbon while it exists; launch (no ribbon) is untouched. */
html[data-rd-placeholder] { --sticky-top: calc(var(--nav-h) + 64px); }

/* ----------------------------------------------------------------------
   7. DIRECTION CARDS (§3)
   ---------------------------------------------------------------------- */
.home-decision { background: var(--rd-surface-000); color: var(--rd-on-dark); padding: 58px 0 86px; }
.decision-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap-sm); margin-top: 26px; }
.decision-card { position: relative; min-height: 230px; border-radius: var(--r-card); overflow: hidden; background: var(--rd-surface-200); border: 1px solid var(--rd-line-dark); padding: var(--pad-panel); display: flex; flex-direction: column; justify-content: flex-end; }
.decision-media { position: absolute; inset: 0; z-index: 0; }
.decision-media .rd-media, .decision-media .rd-ph-tile { width: 100%; height: 100%; border-radius: 0; border: 0; aspect-ratio: auto !important; }
.decision-media img { width: 100%; height: 100%; object-fit: cover; opacity: .48; transform: scale(1.02); transition: transform var(--dur-image) var(--ease-out), opacity var(--dur-base) var(--ease); }
.decision-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.78)); }
.decision-body { position: relative; z-index: 2; }
.decision-card:hover .decision-media img { transform: scale(1.06); opacity: .62; }
.decision-card h2 { font-size: 26px; line-height: var(--lh-tight); margin-bottom: 9px; color: var(--rd-on-dark); text-wrap: balance; }
.decision-card p { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--rd-on-dark-72); margin-bottom: var(--sp-4); }
.decision-card .btn { width: max-content; }

/* ----------------------------------------------------------------------
   8. RECOMMENDATION (home)
   ---------------------------------------------------------------------- */
.home-recommend { background: var(--rd-soft-2); }
.recommend-panel { max-width: 820px; }
.recommend-panel .headline { margin: 12px 0 14px; }
.recommend-list { display: grid; gap: 10px; margin: 22px 0; }
.recommend-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 16px; line-height: 1.4; color: var(--rd-ink); }
.recommend-list svg { width: 18px; height: 18px; color: var(--rd-gold-ink); margin-top: 2px; }

/* ----------------------------------------------------------------------
   9. CALCULATOR / CONFIGURATOR (§6)
   ---------------------------------------------------------------------- */
.config { background: var(--rd-surface-050); color: var(--rd-on-dark); padding-top: 104px; }
.config-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .44fr); gap: var(--sp-6); align-items: start; }
.config-panel, .total-panel { border-radius: var(--r-card); background: var(--rd-graphite); border: 1px solid var(--rd-line-dark); }
.config-panel { padding: var(--pad-panel-lg); }
.calc-step { padding-block: var(--sp-6); border-top: 1px solid var(--rd-line-dark-2); }
.calc-step:first-child { padding-top: 0; border-top: 0; }
.calc-step h3 { font-size: 17px; margin-bottom: var(--sp-4); }
.extras-group { margin-top: 0; }
.calc-note { margin-top: var(--sp-4); font-size: var(--fs-small); line-height: var(--lh-relaxed); color: var(--rd-on-dark-56); }
/* calculator services: scannable grid of full-width rows (name left, price right)
   instead of a cramped wrap of pills. Each group gets clear separation. */
.calc-group { margin-bottom: var(--sp-5); }
.calc-group:last-child { margin-bottom: 0; }
.calc-group-title { font-size: 13px; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--rd-on-dark-56); margin-bottom: var(--sp-3); font-weight: var(--fw-heavy); }
.calc-group [data-calc-services] { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.calc-group [data-calc-services] .chip { width: 100%; justify-content: space-between; text-align: left; gap: var(--sp-3); padding: 11px 14px; font-weight: var(--fw-body); }
.calc-group [data-calc-services] .chip[aria-pressed="true"] { font-weight: var(--fw-heavy); }
.total-panel { position: sticky; top: var(--sticky-top); padding: var(--pad-panel-lg); box-shadow: var(--sh-sticky); }
.total-label { font-size: 13px; font-weight: var(--fw-heavy); color: var(--rd-on-dark-56); }
.total-price { font-size: var(--fs-total); line-height: 1; font-weight: var(--fw-heavy); margin: 8px 0; }
.fine { font-size: var(--fs-micro); line-height: var(--lh-relaxed); color: var(--rd-on-dark-56); }
.total-breakdown { display: grid; gap: 10px; margin: var(--sp-6) 0; color: var(--rd-on-dark-72); font-size: var(--fs-body-sm); }
.break-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding-bottom: 10px; border-bottom: 1px solid var(--rd-line-dark-2); }
.total-panel .btn { width: 100%; }

/* on-request (quote-only) services: calculator chip + breakdown row + la-adresă
   price. Selectable, but visually marked as a quote (no number in the total). */
.chip.is-onrequest { border-style: dashed; }
.chip.is-onrequest.active { background: var(--rd-gold-soft); color: var(--rd-gold-text); border-color: var(--rd-gold-line); }
.break-row.is-onrequest strong, .price-onrequest { color: var(--rd-gold-text); font-weight: var(--fw-heavy); }
.price-onrequest { font-size: var(--fs-small); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

/* ----------------------------------------------------------------------
   10. PACKAGE CARDS + GRID (§4)
   ---------------------------------------------------------------------- */
.packages { background: var(--rd-surface-000); color: var(--rd-on-dark); }
.packages::before { content: ""; position: absolute; inset: 0 0 auto; height: 420px; pointer-events: none; background: radial-gradient(circle at 78% 0, rgba(212, 166, 74,.07), rgba(212, 166, 74,0) 34%), radial-gradient(circle at 15% 8%, rgba(255,255,255,.05), rgba(255,255,255,0) 24%); }
.packages .section-head, .packages .package-grid, .packages .segmented, .packages .matrix-wrap { position: relative; z-index: 1; }
.package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.package-card {
  position: relative; display: flex; flex-direction: column; min-height: 520px;
  border-radius: var(--r-card); background: var(--rd-surface-150); border: 1px solid var(--rd-line-dark);
  overflow: hidden; box-shadow: var(--sh-card);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.package-card:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); border-color: var(--rd-line-dark-strong); }
.package-card.featured { border-color: var(--rd-gold-line); box-shadow: var(--sh-gold); }
.package-media { position: relative; height: 168px; overflow: hidden; background: var(--rd-surface-250); }
.package-media .rd-media, .package-media .rd-ph-tile { width: 100%; height: 168px; min-height: 0; border-radius: 0; border: 0; aspect-ratio: auto !important; }
.package-media img { width: 100%; height: 168px; min-height: 0; object-fit: cover; }
.package-card:hover .package-media img { transform: scale(1.055); filter: saturate(1.12) contrast(1.08); }
.package-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 24%, rgba(0,0,0,.64) 100%); }
.package-content { display: flex; flex-direction: column; flex: 1; padding: var(--pad-card); }
.badge { display: inline-flex; align-items: center; width: max-content; height: 24px; border-radius: var(--r-pill); padding: 0 9px; background: var(--rd-gold-soft); color: var(--rd-gold-text); border: 1px solid var(--rd-gold-line); font-size: 11px; font-weight: var(--fw-heavy); margin-bottom: var(--sp-3); }
.badge.popular-badge { background: linear-gradient(135deg, rgba(212, 166, 74,.28), rgba(255,255,255,.1)); box-shadow: 0 10px 28px rgba(212, 166, 74,.12); }
.package-cap { font-size: 11px; font-weight: var(--fw-heavy); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(255,255,255,.48); margin-bottom: var(--sp-2); }
.package-card h3 { font-size: var(--fs-card-h); line-height: var(--lh-tight); margin-bottom: 9px; color: var(--rd-on-dark); text-wrap: balance; }
.package-body { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--rd-on-dark-62); margin-bottom: 15px; text-wrap: pretty; }
.package-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--sp-4); }
.package-tag { display: inline-flex; align-items: center; min-height: 25px; border-radius: var(--r-pill); padding: 4px 9px; background: var(--rd-fill-dark); border: 1px solid var(--rd-line-dark-2); color: var(--rd-on-dark-68); font-size: 12px; font-weight: var(--fw-semibold); }
.benefits { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.benefits li { display: grid; grid-template-columns: 17px 1fr; gap: var(--sp-2); font-size: 13px; line-height: 1.34; color: var(--rd-on-dark-68); }
.benefits svg { width: 17px; height: 17px; color: var(--rd-gold); margin-top: 1px; }
.package-more { margin: -3px 0 14px; }
.package-more summary { list-style: none; cursor: pointer; color: var(--rd-gold-text); font-size: 13px; font-weight: var(--fw-heavy); }
.package-more summary::-webkit-details-marker { display: none; }
.duration { font-size: 13px; font-weight: var(--fw-bold); color: var(--rd-on-dark-56); margin-top: auto; margin-bottom: var(--sp-3); }
.price { font-size: var(--fs-price); line-height: 1; font-weight: var(--fw-heavy); margin-bottom: 18px; color: var(--rd-on-dark); }
.price small { display: block; margin-top: 7px; font-size: 12px; line-height: 1.4; font-weight: 700; color: var(--rd-on-dark-52); }
/* per-package note (special band): sits between price and CTA, muted fine print */
.package-note { margin: -10px 0 16px; }
.package-card .btn { width: 100%; margin-top: auto; }

/* ----------------------------------------------------------------------
   11. PRICE MATRIX (§5)
   ---------------------------------------------------------------------- */
.matrix-wrap { margin-top: 34px; border-radius: var(--r-lg); overflow: hidden; background: var(--rd-surface-100); border: 1px solid var(--rd-line-dark); box-shadow: var(--sh-card); }
.price-selector { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 22px 24px; border-bottom: 1px solid var(--rd-line-dark-2); }
.price-selector .chip { min-width: 140px; justify-content: center; }
.price-list { display: grid; gap: 10px; padding: 18px; }
.price-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; border-radius: var(--r-card); padding: 15px; background: var(--rd-fill-dark-weak); border: 1px solid var(--rd-line-dark-2); transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.price-row:hover { background: rgba(255,255,255,.07); border-color: var(--rd-line-dark-strong); transform: translateY(-1px); }
.price-row.featured { background: linear-gradient(135deg, rgba(212, 166, 74,.16), rgba(255,255,255,.045)); border-color: var(--rd-gold-line); }
.matrix-pill { display: inline-flex; align-items: center; height: 23px; border-radius: var(--r-pill); padding: 0 9px; background: var(--rd-gold-soft); color: var(--rd-gold-text); border: 1px solid var(--rd-gold-line); font-size: 11px; font-weight: var(--fw-heavy); text-transform: uppercase; }
.price-main strong { display: block; color: var(--rd-on-dark); font-size: 16px; line-height: 1.18; }
.price-main p { margin-top: 5px; color: var(--rd-on-dark-56); font-size: 13px; line-height: 1.35; }
.price-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.price-meta span { display: inline-flex; align-items: center; min-height: 23px; border-radius: var(--r-pill); padding: 3px 8px; background: var(--rd-fill-dark-weak); border: 1px solid rgba(255,255,255,.09); color: var(--rd-on-dark-62); font-size: 11px; font-weight: var(--fw-bold); }
.price-amount { color: var(--rd-on-dark); font-size: 26px; font-weight: var(--fw-black); white-space: nowrap; text-align: right; }

/* ----------------------------------------------------------------------
   12. SERVICES (§7)
   ---------------------------------------------------------------------- */
.service-library { background: var(--rd-surface-000); color: var(--rd-on-dark); }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.service-card { position: relative; min-height: 360px; border-radius: var(--r-card); overflow: hidden; background: var(--rd-surface-150); border: 1px solid var(--rd-line-dark); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--pad-card); box-shadow: var(--sh-card); transition: transform var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease); }
.service-card:hover { transform: translateY(-4px); border-color: var(--rd-line-dark-strong); box-shadow: var(--sh-card-hover); }
.service-media { position: absolute; inset: 0; z-index: 0; }
.service-media .rd-media, .service-media .rd-ph-tile { width: 100%; height: 100%; border-radius: 0; border: 0; aspect-ratio: auto !important; }
.service-media img { width: 100%; height: 100%; object-fit: cover; opacity: .62; transform: scale(1.02); transition: transform var(--dur-image) var(--ease-out), opacity var(--dur-slow) var(--ease); }
.service-card:hover .service-media img { transform: scale(1.06); opacity: .76; }
.service-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.58) 46%, rgba(0,0,0,.92) 100%); }
.service-body { position: relative; z-index: 2; }
.service-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.service-meta span { display: inline-flex; align-items: center; min-height: 25px; border-radius: var(--r-pill); padding: 4px 9px; background: var(--rd-fill-dark); border: 1px solid var(--rd-fill-dark-line); color: var(--rd-on-dark-72); font-size: 12px; font-weight: var(--fw-heavy); }
.service-card h3 { font-size: 29px; line-height: var(--lh-tight); margin-bottom: 9px; color: var(--rd-on-dark); text-wrap: balance; }
.service-card p { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--rd-on-dark-72, rgba(255,255,255,.7)); max-width: 360px; }

/* ----------------------------------------------------------------------
   13. STORY (§8)
   ---------------------------------------------------------------------- */
.story { background: #000; color: var(--rd-on-dark); padding: 0; }
.story-panel { min-height: 82svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; border-top: 1px solid var(--rd-line-dark-2); }
.story-panel:first-child { border-top: 0; }
.story-copy { display: flex; flex-direction: column; justify-content: center; padding: 84px max(44px, calc((100vw - 1180px) / 2)) 84px 64px; }
.story-copy h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); margin: 12px 0 20px; text-wrap: balance; }
.story-copy p { max-width: 540px; color: var(--rd-on-dark-72, rgba(255,255,255,.7)); font-size: 21px; line-height: 1.35; text-wrap: pretty; }
.story-media { position: relative; overflow: hidden; min-height: 520px; background: var(--rd-surface-250); }
.story-media .rd-media, .story-media .rd-ph-tile { width: 100%; height: 112%; border-radius: 0; border: 0; aspect-ratio: auto !important; }
.story-media img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--parallax-y, 0px)) scale(1.02); }
.story-panel.alt .story-copy { order: 2; padding-left: 64px; padding-right: max(44px, calc((100vw - 1180px) / 2)); }
.story-panel.alt .story-media { order: 1; }
.media-badge { position: absolute; left: 20px; bottom: 20px; z-index: var(--z-badge); display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 30px; border-radius: var(--r-pill); padding: 6px 11px; background: rgba(0,0,0,.48); border: 1px solid var(--rd-fill-dark-line); color: var(--rd-on-dark-80); font-size: 12px; font-weight: var(--fw-heavy); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.media-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rd-gold); }

/* ----------------------------------------------------------------------
   14. EXTRAS (marketing cards)
   ---------------------------------------------------------------------- */
.extras { background: #fff; }
.extras-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.extra-card { display: grid; gap: 6px; border-radius: var(--r-card); border: 1px solid var(--rd-line-soft); background: var(--rd-soft-2); padding: var(--pad-panel); }
.extra-card strong { font-size: 16px; line-height: 1.2; }
.extra-card span { font-size: 13px; line-height: 1.4; color: var(--rd-muted); }

/* ----------------------------------------------------------------------
   15. GALLERY (§ home + carousel)
   ---------------------------------------------------------------------- */
.gallery { background: var(--rd-surface-000); color: var(--rd-on-dark); }
.gallery .section-head { margin-bottom: 30px; }
.gallery-carousel { position: relative; }
.gallery-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(72%, 860px); gap: var(--sp-4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding: 10px 52px 16px; border-radius: var(--r-2xl);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border: 1px solid var(--rd-line-dark); box-shadow: var(--sh-gallery); scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.shot { position: relative; min-height: clamp(430px, 66svh, 690px); overflow: hidden; border-radius: var(--r-xl); background: var(--rd-graphite); scroll-snap-align: center; scroll-snap-stop: always; box-shadow: inset 0 0 0 1px rgba(255,255,255,.11); }
.shot .rd-media, .shot .rd-ph-tile { width: 100%; height: 100%; border-radius: var(--r-xl); border: 0; aspect-ratio: auto !important; }
.shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.012); transition: transform var(--dur-shot) var(--ease-out), filter var(--dur-shot) var(--ease-out); }
.shot:hover img { transform: scale(1.045); filter: saturate(1.08) contrast(1.02); }
.gallery-arrow { position: absolute; top: 50%; z-index: var(--z-arrow); display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--rd-fill-dark); border: 1px solid rgba(255,255,255,.22); color: var(--rd-on-dark); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: translateY(-50%); transition: background-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.gallery-arrow:hover { background: rgba(255,255,255,.2); border-color: var(--rd-line-dark-strong); transform: translateY(-50%) scale(1.04); }
.gallery-arrow svg { width: 22px; height: 22px; }
.gallery-arrow.prev { left: 16px; }
.gallery-arrow.next { right: 16px; }

/* ----------------------------------------------------------------------
   16. PROCESS (§9)
   ---------------------------------------------------------------------- */
.process { background: var(--rd-soft-2); }
.process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.process-card { border-top: 2px solid var(--rd-ink); padding-top: 18px; }
.process-card span { display: block; font-size: 13px; font-weight: var(--fw-heavy); color: var(--rd-gold-ink); margin-bottom: var(--sp-4); }
.process-card h3 { font-size: 29px; line-height: var(--lh-tight); margin-bottom: 10px; }
.process-card p { font-size: 16px; line-height: 1.46; color: var(--rd-muted); }
.process-detail { background: #fff; }
.process-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.process-detail-card { min-width: 0; border-radius: var(--r-card); border: 1px solid var(--rd-line-soft); background: var(--rd-soft-2); padding: var(--pad-panel); }
.process-detail-card > span { display: block; color: var(--rd-gold-ink); font-size: 13px; font-weight: var(--fw-heavy); margin-bottom: var(--sp-4); }
.process-detail-card h3 { font-size: 30px; line-height: var(--lh-tight); margin-bottom: 18px; text-wrap: balance; }
.process-detail-card dl { display: grid; gap: var(--sp-3); }
.process-detail-card dt { font-size: 12px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--rd-ink); font-weight: var(--fw-black); }
.process-detail-card dd { color: var(--rd-muted); font-size: 15px; line-height: 1.45; }

/* ----------------------------------------------------------------------
   17. B2B / FLEET
   ---------------------------------------------------------------------- */
.b2b { background: var(--rd-surface-000); color: var(--rd-on-dark); }
.b2b::before { content: ""; position: absolute; inset: 0 0 auto; height: 420px; pointer-events: none; background: radial-gradient(circle at 18% 0, rgba(212, 166, 74,.07), rgba(212, 166, 74,0) 32%), radial-gradient(circle at 82% 10%, rgba(255,255,255,.05), rgba(255,255,255,0) 28%); }
.b2b .section-head, .b2b-grid, .fleet-panel { position: relative; z-index: 1; }
.b2b-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.b2b-card { min-width: 0; min-height: 280px; border-radius: var(--r-card); border: 1px solid var(--rd-line-dark); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)); padding: var(--pad-panel); display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--sh-card); }
.b2b-card span { display: inline-flex; width: max-content; min-height: 26px; align-items: center; border-radius: var(--r-pill); padding: 5px 9px; background: var(--rd-gold-soft); border: 1px solid var(--rd-gold-line); color: var(--rd-gold-text); font-size: 12px; font-weight: var(--fw-heavy); }
.b2b-card h3 { font-size: 30px; line-height: var(--lh-tight); margin: 24px 0 10px; text-wrap: balance; }
.b2b-card p { color: var(--rd-on-dark-68); font-size: 15px; line-height: 1.45; }
.b2b-list { display: grid; gap: var(--sp-2); margin-top: 18px; }
.b2b-list li { display: grid; grid-template-columns: 16px 1fr; gap: 9px; color: var(--rd-on-dark-72); font-size: 13px; line-height: 1.35; }
.b2b-list svg { width: 16px; height: 16px; color: var(--rd-gold); margin-top: 1px; }
.fleet-panel { margin-top: var(--sp-4); border-radius: var(--r-card); border: 1px solid var(--rd-line-dark); background: var(--rd-surface-150); padding: var(--pad-panel-lg); color: var(--rd-on-dark); }
.fleet-panel h3 { font-size: 30px; line-height: var(--lh-tight); margin-bottom: 8px; }
.fleet-panel p { color: var(--rd-on-dark-62); line-height: 1.45; margin-bottom: 18px; }
.fleet-tiers { display: grid; gap: 10px; }
.fleet-row { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center; padding: 13px 15px; border-radius: var(--r-card); background: var(--rd-fill-dark-weak); border: 1px solid var(--rd-line-dark-2); }
.fleet-row span { color: var(--rd-on-dark-72); font-size: 14px; }
.fleet-row strong { color: var(--rd-on-dark); font-size: 18px; font-weight: var(--fw-heavy); }

/* ----------------------------------------------------------------------
   18. TRUST / REVIEWS (§11)
   ---------------------------------------------------------------------- */
.trust { background: #fff; }
.trust-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--sp-7); align-items: center; border-radius: var(--r-card); border: 1px solid var(--rd-line-soft); background: var(--rd-soft-2); padding: var(--pad-panel-xl); }
.score { font-size: 76px; line-height: 1; font-weight: var(--fw-heavy); }
.stars { font-size: 23px; color: var(--rd-gold); margin: 6px 0 10px; }
.trust-panel p { color: var(--rd-muted); line-height: var(--lh-relaxed); }
.trust-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: 20px; }

/* ----------------------------------------------------------------------
   19. CONTACT + FOOTER (§12)
   ---------------------------------------------------------------------- */
.contact { background: #000; color: var(--rd-on-dark); padding-bottom: 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .52fr); gap: var(--sp-7); align-items: start; }
.contact-media { min-height: 640px; border-radius: var(--r-card); overflow: hidden; background: var(--rd-surface-250); }
.contact-media .rd-media, .contact-media .rd-ph-tile { width: 100%; height: 100%; min-height: 640px; border-radius: var(--r-card); border: 0; aspect-ratio: auto !important; }
.contact-media img { width: 100%; height: 100%; object-fit: cover; }
.contact-card { position: sticky; top: var(--sticky-top); border-radius: var(--r-card); border: 1px solid var(--rd-line-dark); background: var(--rd-graphite); padding: var(--pad-panel-xl); }
.contact-card h2 { font-size: 46px; line-height: .98; margin-bottom: 13px; }
.contact-card p { color: var(--rd-on-dark-68); line-height: 1.48; }
.contact-list { display: grid; gap: 15px; margin: var(--sp-6) 0; }
.contact-line { padding-top: 15px; border-top: 1px solid var(--rd-line-dark-2); }
.contact-line:first-child { border-top: 0; padding-top: 0; }
.contact-line strong { display: block; font-size: 13px; color: var(--rd-on-dark-56); margin-bottom: 5px; }
.contact-line span, .contact-line a { font-size: 17px; color: var(--rd-on-dark); line-height: 1.38; }
.contact-line a { text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.contact-line a:hover, .contact-line a:focus-visible { color: var(--rd-gold); }
.contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contact-actions .btn { justify-content: center; }
.social-panel { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-card); border: 1px solid var(--rd-line-dark); background: var(--rd-fill-dark-weak); }
.social-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: 10px; }
.social-panel-head strong { font-size: 13px; color: var(--rd-on-dark); }
.social-panel-head span { font-size: 12px; color: var(--rd-on-dark-56); text-align: right; }
.social-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.social-link { min-width: 0; display: block; border-radius: var(--r-card); border: 1px solid var(--rd-line-dark); padding: 12px 10px; color: var(--rd-on-dark); background: var(--rd-fill-dark); transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.social-link strong { display: block; font-size: 13px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-link span { display: block; margin-top: 5px; font-size: 11px; line-height: 1.15; color: var(--rd-on-dark-62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-link:hover { transform: translateY(-2px); border-color: var(--rd-line-dark-strong); background: rgba(255,255,255,.1); box-shadow: var(--sh-social); }
.social-link.instagram { background: linear-gradient(135deg, rgba(214,41,118,.28), rgba(250,126,30,.16)); }
.social-link.facebook  { background: linear-gradient(135deg, rgba(24,119,242,.3), rgba(255,255,255,.04)); }
.social-link.tiktok    { background: linear-gradient(135deg, rgba(37,244,238,.18), rgba(254,44,85,.2)); }
.social-note { margin-top: var(--sp-3); font-size: 12px; color: var(--rd-on-dark-52); line-height: 1.35; }

.footer { background: #000; color: var(--rd-on-dark-56); border-top: 1px solid var(--rd-line-dark-2); padding: var(--sp-10) 0 var(--sp-8); font-size: 13px; view-transition-name: rd-footer; /* persistent footer across cross-document VT (§Phase 1) */ }
/* brand signature line — one of the reserved gold moments */
.footer-tagline { margin: 8px 0 0; font-size: 12px; font-weight: var(--fw-heavy); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--rd-gold); }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr 1.1fr; gap: var(--sp-8); align-items: start; }
.footer-brand { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 340px; }
.footer-id { display: flex; align-items: center; gap: var(--sp-2); }
.footer-logo { display: block; height: 60px; width: auto; }
.footer-id strong { color: var(--rd-on-dark); font-size: 15px; font-weight: var(--fw-heavy); }
.footer-note { color: var(--rd-on-dark-56); line-height: 1.5; }
.footer-social { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-1); }
.footer-links { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-contact { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-contact span { color: var(--rd-on-dark-56); }
.footer a { color: var(--rd-on-dark-78, rgba(255,255,255,.78)); transition: color var(--dur-fast) var(--ease); text-decoration: none; }
.footer a:hover, .footer a:focus-visible { color: var(--rd-gold); }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--rd-line-dark-2); }
.footer-legal { display: flex; gap: var(--sp-4); flex-wrap: wrap; opacity: .72; }
.footer-confirm { flex-basis: 100%; margin: 0; color: var(--rd-on-dark-56); }
@media (min-width: 641px) and (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ----------------------------------------------------------------------
   20. FAQ (§10)
   ---------------------------------------------------------------------- */
.faq { background: #000; color: var(--rd-on-dark); padding-top: 88px; }
.faq-list { max-width: 980px; margin-inline: auto; border-top: 1px solid rgba(255,255,255,.15); }
.faq details { border-bottom: 1px solid rgba(255,255,255,.15); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 23px 0; font-size: 22px; font-weight: var(--fw-heavy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 28px; line-height: 1; color: var(--rd-gold); transition: transform var(--dur-base) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { max-width: 780px; padding: 0 0 24px; color: var(--rd-on-dark-72, rgba(255,255,255,.7)); font-size: 17px; line-height: var(--lh-relaxed); }

/* ----------------------------------------------------------------------
   21. MOBILE QUICK-BAR (§15)
   ---------------------------------------------------------------------- */
.mobile-quickbar { display: none; }
.fab { display: none; }

/* ==========================================================================
   22. NATIVE CROSS-DOCUMENT VIEW TRANSITIONS (§Phase 1)
   Zero JS, zero deps, CSP-clean. Opts the whole MPA into an animated
   navigation between same-origin pages. A tasteful root crossfade uses the
   existing --dur-* / --ease tokens; the persistent shell elements (rd-nav,
   rd-footer, rd-hero-brand) are tagged with view-transition-name on their
   component rules above so the browser morphs them rather than crossfading.
   @supports-guarded so non-supporting browsers simply hard-navigate.
   ========================================================================== */
@supports (view-transition-name: none) {
  @view-transition { navigation: auto; }

  /* Root crossfade — old fades out, new fades in (no slide; restrained). */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--dur-slow);
    animation-timing-function: var(--ease);
  }
  ::view-transition-old(root) { animation-name: rd-vt-fade-out; }
  /* incoming page rises + fades — one motion language with the hero entrance */
  ::view-transition-new(root) { animation-name: rd-vt-rise-in; }
  /* shared-element morphs (persistent shell + blog cover → article hero via
     vt-cover-<slug>) share the site easing/duration so the morph feels crafted. */
  ::view-transition-group(*) { animation-duration: var(--dur-slow); animation-timing-function: var(--ease-out); }
}
@keyframes rd-vt-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes rd-vt-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes rd-vt-rise-in  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   RESPONSIVE — mirrors v2 breakpoints (tokens.css comments §BREAKPOINT REF)
   ========================================================================== */
@media (max-width: 1100px) {
  .package-grid, .service-grid, .b2b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decision-grid { grid-template-columns: 1fr; }
}
/* HAMBURGER + SLIDE-IN SHEET MENU — applies across the whole <=900 range
   (the full horizontal nav-links can't fit a tablet). The panel becomes an
   app-like sheet: it slides in from the right, sits below the nav, and a
   full-viewport backdrop dims the page (pure CSS, driven by the existing
   .nav-links.open state the engine toggles — no JS change needed). */
@media (max-width: 900px) {
  .nav-links {
    /* NB: .nav-shell has backdrop-filter, which makes it the containing block
       for this fixed sheet — so `bottom:0` would resolve to the 50px nav bar and
       collapse the menu. Use an explicit viewport height instead. The sheet bg is
       ~opaque (.98) so it needs no blur of its own (blur here would re-trap the
       backdrop pseudo's positioning). */
    position: fixed; top: var(--nav-h); right: 0; left: auto; height: calc(100dvh - var(--nav-h));
    width: min(82vw, 360px); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px;
    grid-template-columns: none;
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
    background: rgba(3,3,4,.98); border-left: 1px solid var(--rd-line-dark); border-radius: 0;
    box-shadow: var(--sh-menu);
    overflow-y: auto; overscroll-behavior: contain;
    /* hidden by default: off-canvas to the right, not display:none, so it can
       slide. pointer-events guarded so the hidden sheet never traps taps. */
    transform: translateX(100%); opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
  }
  /* dimming backdrop — a fixed pseudo on the open sheet covers the viewport
     behind the panel; it's behind the sheet (sheet z is the nav layer). */
  .nav-links.open::before {
    content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; z-index: -1;
    background: rgba(3,3,4,.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  .nav-links.open {
    transform: none; opacity: 1; pointer-events: auto; visibility: visible;
    transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
  }
  .nav-links a {
    display: flex; align-items: center; min-height: 48px; padding: 0 14px;
    border-radius: var(--r-sm); background: rgba(255,255,255,.055);
    font-size: 15px; font-weight: var(--fw-semibold);
  }
  .on-light .nav-links { background: rgba(251,251,253,.99); }
  .on-light .nav-links.open::before { background: rgba(251,251,253,.5); }
  .nav-toggle { display: block; }
}
/* MOBILE LAYOUT COLLAPSE — single-column / stacked layout is for PHONES ONLY
   (<=640). Tablets (641-900) deliberately stay on the multi-column desktop
   layer (see the tablet tier block below). */
@media (max-width: 640px) {
  .config-grid, .section-head, .story-panel, .contact-grid, .trust-panel { grid-template-columns: 1fr; }
  .total-panel { order: -1; position: relative; top: auto; }
  .contact-card { position: relative; top: auto; }
  .story-copy, .story-panel.alt .story-copy { order: 1; padding: 76px 22px 34px; }
  .story-media, .story-panel.alt .story-media { order: 2; min-height: 430px; }
  .gallery-track { grid-auto-columns: minmax(82%, 720px); }
  .extras-grid, .process-grid, .process-detail-grid, .b2b-grid { grid-template-columns: 1fr; }
  .home-decision { padding: 42px 0 74px; }
}

/* ==========================================================================
   TABLET TIER (641-900px) — route to the DESKTOP layer, not the mobile one.
   Fills the previously-empty 641-900 zone: multi-column grids, desktop
   section spacing (--section-pad-md), desktop container gutters. The
   <=1100 block already steps package/service/b2b grids to 2 columns and the
   decision grid to 1 — that 2-col layout is the right tablet density, so we
   keep it; here we only re-assert desktop layout for the items the (now
   phone-only) collapse used to flatten, and pick the tablet section rhythm.
   Verified no horizontal overflow at 768 and 900 (container = 100% - 44px;
   all grids use minmax(0,1fr) tracks so columns can shrink, never overflow).
   ========================================================================== */
@media (min-width: 641px) and (max-width: 900px) {
  :root { --section-pad: var(--section-pad-md); } /* 86px tablet rhythm */
  /* desktop multi-column grids (NOT collapsed to 1) */
  .extras-grid, .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process-detail-grid, .b2b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* keep the two-column section head + config + contact + trust on desktop
     layout (they are NOT stacked on tablet). */
  .section-head { grid-template-columns: minmax(0, 1fr) minmax(240px, .58fr); }
  .config-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .44fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, .52fr); }
  .trust-panel { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  /* sticky rails behave like desktop on tablet (kept in their column) */
  .total-panel { position: sticky; top: var(--sticky-top); order: 0; }
  .contact-card { position: sticky; top: var(--sticky-top); }
  /* story stays a true two-column split on tablet */
  .story-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* gallery shows a slightly tighter desktop-style track */
  .gallery-track { grid-auto-columns: minmax(78%, 760px); }
}
@media (max-width: 640px) {
  /* (Removed the old ".reveal, .stagger > * { ... transition:none }" kill that
     made mobile the LEAST animated layer — motion is now gated by the
     html.fx-tier-* classes, so tier-1 phones get light scroll-reveal.) */
  .headline { font-size: clamp(38px, 12vw, 58px); }
  .display { font-size: clamp(34px, 10.4vw, 48px); line-height: .98; }
  .lead { font-size: 16px; line-height: 1.32; }
  .nav { gap: 8px; }
  .brand span { display: none; }
  .nav-actions { gap: 8px; }
  .nav-cta { padding: 7px 11px; font-size: 12px; }
  .hero { min-height: 64svh; padding: 74px 0 22px; }
  /* staging only: the fixed ribbon overlaps the bottom-anchored hero copy on
     mobile (content fills the short hero) — clear it. No ribbon at launch. */
  html[data-rd-placeholder] .hero { padding-top: calc(var(--nav-h) + 64px); }
  .hero-media { inset: 0; transform: translate3d(0, var(--hero-scroll-y), 0) scale(1.01); }
  .hero-media img { object-position: center 42%; }
  .hero-media::before { opacity: .25; }
  .hero-copy { transform: none; }
  .hero-brand-line { font-size: clamp(24px, 8.4vw, 38px); line-height: 1.0; letter-spacing: .05em; margin-bottom: 12px; }
  .hero-kicker { font-size: 13px; margin-bottom: 14px; }
  .hero-sub { max-width: 350px; margin-top: 12px; }
  .hero-actions { margin-top: 15px; gap: 9px; }
  .hero-actions .btn { width: 100%; max-width: 310px; }
  .proof-strip { display: block; margin-top: 10px; }
  .proof-pill { display: flex; justify-content: center; width: max-content; max-width: 100%; margin: 6px auto 0; font-size: 12.5px; min-height: 28px; padding: 5px 10px; }
  .proof-pill:nth-child(2) { display: none; }
  /* long-form article reading: lift mobile body toward the reference scale (17px)
     for comfortable reading; desktop inherits the global --fs-body (unchanged). */
  .article-prose p, .article-prose li { font-size: 16px; line-height: 1.6; }
  .decision-grid { gap: 10px; margin-top: 20px; }
  .decision-card { min-height: 198px; padding: 18px; }
  .decision-card h2 { font-size: 24px; }
  .config-panel, .total-panel { padding: 20px; }
  .total-panel { position: sticky; top: var(--sticky-top); z-index: var(--z-sticky); }
  .chip { font-size: 13px; padding: 8px 12px; }
  .segmented { display: flex; width: 100%; margin-bottom: var(--sp-4); }
  .segmented button { flex: 1; }
  .package-grid, .service-grid { grid-template-columns: 1fr; }
  .package-card { min-height: auto; }
  .package-media, .package-media img, .package-media .rd-media { height: 150px; min-height: 0; }
  .service-card { min-height: 300px; }
  .price-selector { padding: 0 20px 18px; }
  .price-selector .chip { flex: 1 1 100%; }
  .price-list { padding: 14px; }
  .price-row { display: block; padding: 14px; }
  .price-amount { margin-top: 12px; text-align: left; font-size: 24px; }
  .price-meta { margin-top: 9px; }
  .gallery .section-head { margin-bottom: 24px; }
  .gallery-track { grid-auto-columns: 86%; gap: 10px; padding: 8px 34px 12px; border-radius: var(--r-xl); }
  .shot { min-height: 54svh; border-radius: 14px; }
  .gallery-arrow { width: 36px; height: 36px; }
  .gallery-arrow.prev { left: 4px; }
  .gallery-arrow.next { right: 4px; }
  .contact-media, .contact-media .rd-media, .contact-media .rd-ph-tile { min-height: 430px; }
  .contact-card h2 { font-size: 38px; }
  .social-panel-head { display: block; }
  .social-panel-head span { display: block; text-align: left; margin-top: 4px; }
  .faq summary { font-size: 19px; padding: 20px 0; }
  /* quick-bar: only shown on non-gated pages (home, calc-as-page handled in JS) */
  .mobile-quickbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); gap: 8px; padding: 8px max(12px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)); background: rgba(3,3,4,.92); border-top: 1px solid var(--rd-line-dark-2); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); }
  .mobile-quickbar.is-gated { display: none; }
  .qb-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: var(--r-card); text-decoration: none; font-size: 11px; font-weight: var(--fw-heavy); letter-spacing: .02em; color: var(--rd-on-dark); background: var(--rd-fill-dark); border: 1px solid var(--rd-line-dark-2); }
  .qb-btn svg { width: 21px; height: 21px; }
  .qb-btn.qb-wa { color: var(--rd-ink); background: var(--rd-gold); border-color: transparent; }
  .qb-btn:active { transform: scale(.97); }
}
@media (max-width: 360px) {
  .lang { display: none; }
  .social-grid { grid-template-columns: 1fr; }
  .display { font-size: clamp(32px, 10vw, 40px); }
  .hero-sub { font-size: 15px; }
  .hero-actions .btn { max-width: 100%; }
  .price-selector .chip { min-width: 0; }
}

/* ==========================================================================
   COARSE-POINTER TAP TARGETS (Phase 3, app-like affordances)
   On touch / coarse-pointer devices, every primary interactive control gets a
   >=44px hit area (Apple HIG / WCAG 2.5.5). Keyed off (pointer:coarse) so a
   fine-pointer tablet/desktop keeps the tighter visual sizing. Visual padding
   is preserved; we only raise min-height (and the lang switch hit area).
   ========================================================================== */
@media (pointer: coarse) {
  /* nav + CTA + buttons + chips */
  .btn { min-height: 44px; }
  .nav-cta { min-height: 44px; }
  .chip { min-height: 44px; }
  .segmented button { min-height: 44px; }
  .nav-links a { min-height: 48px; }
  .nav-toggle { width: 44px; height: 44px; }
  /* calculator chips already use .chip (covered above); the price-matrix
     vehicle-class selector chips too. quickbar buttons are .mobile-quickbar
     .btn — covered by .btn, but reassert in case of override order. */
  .mobile-quickbar .btn { min-height: 44px; }
  .price-selector .chip { min-height: 44px; }
  /* lang toggle: keep the compact pills but enlarge the tap area to 44px */
  .lang-btn { min-height: 44px; }
  .lang { padding: 3px; }
  /* gallery arrows comfortable on touch */
  .gallery-arrow { width: 46px; height: 46px; }
  /* FAQ disclosure: comfortable summary hit area */
  .faq summary { min-height: 56px; align-items: center; }
}

/* ==========================================================================
   REDUCED MOTION — short-circuit reveal/stagger + pause keyframes (§18)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Belt-and-braces over the fx-tier classes: even if the engine mislabels a
     tier here, reduced-motion forces everything static (HARD RULE). */
  .reveal, .stagger > *,
  html.fx-tier-1 .reveal, html.fx-tier-2 .reveal,
  html.fx-tier-1 .stagger > *, html.fx-tier-2 .stagger > * {
    opacity: 1; transform: none; transition: none; filter: none;
  }
  .hero-brand-line, .hero-kicker, .hero h1.display, .hero-sub, .hero-actions, .proof-strip { animation: none; }
  /* neutralize the tier-2 3D / sheen transforms + the WebGL canvas */
  html.fx-tier-2 .hero-media { transform: scale(1.018); transition: none; }
  html.fx-tier-2 .hero-fx, .hero-fx { transition: none; opacity: 0; }
  .story-media img { transform: scale(1.02); }
  * , *::before, *::after { scroll-behavior: auto !important; }

  /* View Transitions OFF — turn off the cross-document animation and zero any
     in-flight root/named transition animations so navigation is instant. */
  @supports (view-transition-name: none) {
    @view-transition { navigation: none; }
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
  }
}

/* ===========================================================================
 * 23. BLOG — "Ghiduri" index (data-rd-component="blog-index") + article detail
 *     (data-rd-component="article"). Phase B. Built on existing tokens only.
 * ======================================================================== */
.chip-row.atelier-cats { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }

/* index card grid */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.article-card { display: flex; flex-direction: column; background: var(--rd-paper); border: 1px solid var(--rd-line); border-radius: var(--r-card); overflow: hidden; color: inherit; text-decoration: none; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.article-card:hover, .article-card:focus-visible { transform: translateY(-2px); box-shadow: var(--sh-card-hover); }
.article-card[hidden] { display: none; }
.article-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.article-media img, .article-media .rd-ph-tile { width: 100%; height: 100%; object-fit: cover; }
.article-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--rd-muted); }
.article-meta .article-cat { color: var(--rd-gold-ink); font-weight: var(--fw-heavy); }
.article-card h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); color: var(--rd-ink); }
.article-card .article-body p { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--rd-muted); }
.article-empty { padding: var(--sp-6) 0; color: var(--rd-muted); }

/* article detail */
.article-hero { max-width: var(--container-narrow); margin: 0 auto; }
.article-hero .display { color: var(--rd-ink); }
.article-hero-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--rd-muted); margin-bottom: var(--sp-3); }
.article-hero-media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-card); margin: var(--sp-5) 0; }
.article-hero-media img, .article-hero-media .rd-ph-tile { width: 100%; height: 100%; object-fit: cover; }
.article-prose { max-width: 68ch; margin: 0 auto; }
.article-prose h2 { font-family: var(--rd-font-display); font-variation-settings: "opsz" 34; font-size: var(--fs-h3); line-height: var(--lh-tight); margin: var(--sp-6) 0 var(--sp-2); }
.article-prose p { margin: var(--sp-3) 0; line-height: var(--lh-relaxed); color: var(--rd-ink); }
.article-prose ul { margin: var(--sp-3) 0; padding-left: var(--sp-5); }
.article-prose li { margin: var(--sp-1) 0; line-height: var(--lh-body); color: var(--rd-ink); }
.article-back { max-width: 68ch; margin: var(--sp-6) auto 0; }
.article-back-link { color: var(--rd-gold-ink); font-weight: var(--fw-heavy); text-decoration: none; }
.article-back-link:hover, .article-back-link:focus-visible { text-decoration: underline; }
.article-cta { max-width: var(--container-narrow); margin: var(--sp-8) auto 0; padding: var(--sp-6); border: 1px solid var(--rd-line); border-radius: var(--r-card); text-align: center; background: var(--rd-soft); }
.article-cta-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-4); }
.article-missing { max-width: var(--container-narrow); margin: 0 auto; padding: var(--sp-8) 0; color: var(--rd-muted); }

@media (min-width: 641px) and (max-width: 900px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .article-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------------
   16. UNSTYLED COMPONENT RECOVERY (QA 2026-06-18)
   These light-section components shipped without CSS. Styles below match
   the existing card / icon-list idiom and use only defined tokens.
   ---------------------------------------------------------------------- */

/* standards check-list (Despre · „Ce promitem. Și ce nu.") — mirrors .recommend-list */
.standards-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); max-width: 760px; }
.standards-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 16px; line-height: var(--lh-body); color: var(--rd-ink); }
.standards-list svg { width: 18px; height: 18px; color: var(--rd-gold-ink); margin-top: 2px; }

/* light content cards: home differentiators (.feature-*), Companii audience
   (.audience-*) and B2B service (.b2b-service-*) cards */
.feature-grid, .audience-grid, .b2b-service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--grid-gap); }
.feature-card, .audience-card, .b2b-service-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--pad-panel); background: #fff; border: 1px solid var(--rd-line); border-radius: var(--r-card); }
.feature-card h3, .audience-card h3, .b2b-service-card h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); color: var(--rd-ink); }
.feature-card p, .audience-card p, .b2b-service-card p { margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--rd-muted); }
.audience-label { display: inline-flex; align-items: center; width: max-content; margin-bottom: var(--sp-2); border-radius: var(--r-pill); padding: 5px 10px; background: var(--rd-gold-soft); border: 1px solid var(--rd-gold-line); color: var(--rd-gold-ink); font-size: 11px; font-weight: var(--fw-heavy); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.b2b-service-price { margin-top: var(--sp-2); color: var(--rd-ink); font-weight: var(--fw-heavy); }
.b2b-service-note { color: var(--rd-muted); font-size: 13px; line-height: 1.4; }
@media (max-width: 640px) { .feature-grid, .audience-grid, .b2b-service-grid { grid-template-columns: 1fr; } }

/* service catalog (Servicii și prețuri · „Catalog servicii") — collapsible name/price rows */
.catalog-grid { display: grid; gap: 0; max-width: 940px; margin-inline: auto; }
.catalog-cat { border-top: 1px solid var(--rd-line); }
.catalog-cat:last-child { border-bottom: 1px solid var(--rd-line); }
.catalog-cat > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) 0; font-size: 17px; font-weight: var(--fw-heavy); color: var(--rd-ink); }
.catalog-cat > summary::-webkit-details-marker { display: none; }
.catalog-cat > summary::after { content: "+"; color: var(--rd-gold-ink); margin-left: var(--sp-3); }
.catalog-cat[open] > summary::after { content: "–"; }
.catalog-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: 0; }
.catalog-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: 10px 0; border-top: 1px solid var(--rd-line); }
.catalog-name { color: var(--rd-ink); }
.catalog-price { flex: none; color: var(--rd-muted); font-weight: var(--fw-heavy); white-space: nowrap; }

/* package-card audience line + special-band 2-up grid + price-selector label (dark packages section) */
.package-who { font-size: 13px; line-height: 1.4; color: var(--rd-on-dark-52); margin-bottom: var(--sp-4); }
.package-grid-special { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
.price-selector-label { align-self: center; margin-right: var(--sp-2); font-size: 12px; font-weight: var(--fw-heavy); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--rd-on-dark-56); }
@media (max-width: 640px) { .package-grid-special { grid-template-columns: 1fr; } }

/* legal pages: keep the long single-word H1 („confidențialitate") from breaking at 390px */
@media (max-width: 640px) { body[data-rd-page="legal"] .headline { font-size: clamp(30px, 8.5vw, 48px); overflow-wrap: normal; } }

/* reserve space for the fixed mobile quick-bar (now shown on every page) */
@media (max-width: 640px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* keep a keyboard-focused / anchor-targeted element clear of the fixed quick-bar */
  html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ----------------------------------------------------------------------
   DESKTOP CONTACT DOCK — floating WhatsApp / phone / social rail. Hidden on
   mobile (the quick-bar serves there); injected into <body> by js/app.js.
   ---------------------------------------------------------------------- */
.contact-dock { display: none; }
@media (min-width: 901px) {
  .contact-dock { display: flex; flex-direction: column; gap: 10px; position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: var(--z-nav); }
  .dock-btn { display: flex; align-items: center; height: 46px; width: 46px; border-radius: var(--r-pill); overflow: hidden; text-decoration: none; color: var(--rd-gold); background: rgba(3,3,4,.66); border: 1px solid var(--rd-gold-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--sh-card); transition: width var(--dur-base) var(--ease), background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
  .dock-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; }
  .dock-ico svg { width: 21px; height: 21px; }
  .dock-label { white-space: nowrap; opacity: 0; padding-right: 16px; font-size: 12px; font-weight: var(--fw-heavy); letter-spacing: .01em; transition: opacity var(--dur-base) var(--ease); }
  .dock-btn:hover, .dock-btn:focus-visible { width: auto; background: var(--rd-gold); color: var(--rd-ink); border-color: var(--rd-gold); }
  .dock-btn:hover .dock-label, .dock-btn:focus-visible .dock-label { opacity: 1; }
  .dock-btn.dock-wa:hover, .dock-btn.dock-wa:focus-visible { background: var(--rd-green); border-color: var(--rd-green); color: #fff; }
}

/* ----------------------------------------------------------------------
   QA FIXES (2026-06-19)
   ---------------------------------------------------------------------- */
/* light-context (.soft / la-adresă) sections inherit dark-on-dark text from the
   .packages/.chip rules — restore readable ink + light chips on the light bg. */
.packages.soft .headline, .packages.soft .price-selector-label { color: var(--rd-ink); }
.la-adresa .price-selector-label { color: var(--rd-ink); }
.packages.soft .chip:not(.active), .la-adresa .chip:not(.active) { background: var(--rd-soft-2); border-color: var(--rd-line); color: var(--rd-ink); }
/* article pages have no tall hero to absorb the fixed staging ribbon → push the
   content down so the ribbon never covers the meta row / title. */
.atelier-article { padding-top: calc(var(--nav-h) + 80px); }
/* home services-preview grid shipped without CSS (collapsed to one column) */
.service-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--grid-gap); }
@media (max-width: 640px) { .service-preview-grid { grid-template-columns: 1fr; } }
/* home CTA band had no vertical rhythm (heading descenders crowded the lead) */
.cta-band > * + * { margin-top: var(--sp-3); }
.cta-band .lead { margin-top: var(--sp-4); }
.cta-band .btn { margin-top: var(--sp-5); }
/* inline FAQ on the services page is on a light bg — style the disclosure (the
   dark .faq rules don't apply to .faq-inline) */
.faq-inline .faq-list { border-top: 1px solid var(--rd-line); }
.faq-inline details { border-bottom: 1px solid var(--rd-line); }
.faq-inline summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; font-size: 18px; font-weight: var(--fw-heavy); color: var(--rd-ink); }
.faq-inline summary::-webkit-details-marker { display: none; }
.faq-inline summary::after { content: "+"; color: var(--rd-gold-ink); }
.faq-inline details[open] summary::after { content: "–"; }
.faq-inline p { max-width: 780px; color: var(--rd-muted); padding-bottom: 18px; }

/* ===========================================================================
   HOMEPAGE-FEEL ALIGNMENT (owner: "align feel, keep dense readable")
   Package sections go dark to match the homepage's cohesive dark look. The
   .package-card is already dark-surfaced, so a dark section makes the cards sit
   cohesively instead of dark cards floating on white. Dense content (services
   catalog, calculator) intentionally stays light for scannability.
   =========================================================================== */
.section.la-adresa,
.section.packages.packages-special {
  background: var(--rd-surface-000);
  color: var(--rd-on-dark);
  --rd-eyebrow: var(--rd-gold);
}
.section.la-adresa .lead,
.section.packages.packages-special .lead,
.section.la-adresa .section-note {
  color: var(--rd-on-dark-62);
}
.la-adresa .chip:not(.active),
.packages.soft .chip:not(.active),
.packages-special .chip:not(.active) {
  background: var(--rd-fill-dark);
  border-color: var(--rd-fill-dark-line);
  color: var(--rd-on-dark);
}

/* ---------------------------------------------------------------------------
   HOMEPAGE-FEEL ALIGNMENT · phase 2 — Companii (business.html) + Despre
   Extends the .la-adresa / .packages-special dark treatment to the feature
   sections: companii-audiences + b2b-offers (Companii) and process-detail +
   standards (Despre). Cards flip to the dark raised surface and EVERY child
   text token is restated for the dark bg so nothing renders dark-on-dark.
   Rules are section-scoped because .b2b-service-card is shared with the light
   "b2b-services soft" strip — that strip and Despre's "story" stay light on
   purpose, preserving the dense-readable rhythm the owner asked for.
   --------------------------------------------------------------------------- */
.section.companii-audiences,
.section.b2b-offers,
.section.process-detail,
.section.standards.soft {
  background: var(--rd-surface-000);
  color: var(--rd-on-dark);
  --rd-eyebrow: var(--rd-gold);
}
.section.companii-audiences .lead,
.section.b2b-offers .lead,
.section.process-detail .lead,
.section.standards.soft .lead { color: var(--rd-on-dark-62); }

/* cards → dark raised surface */
.companii-audiences .audience-card,
.b2b-offers .b2b-service-card,
.process-detail .process-detail-card {
  background: var(--rd-surface-150);
  border-color: var(--rd-line-dark);
}
.companii-audiences .audience-card h3,
.b2b-offers .b2b-service-card h3,
.process-detail .process-detail-card h3 { color: var(--rd-on-dark); }
.companii-audiences .audience-card p,
.b2b-offers .b2b-service-card p,
.process-detail .process-detail-card dd { color: var(--rd-on-dark-68); }

/* Companii · audience gold pill readable on dark (tokenized tint; border inherits base) */
.companii-audiences .audience-label {
  background: var(--rd-gold-soft-dim);
  color: var(--rd-gold);
}

/* Companii · b2b-offers price (gold accent) + note — scoped under .b2b-service-card
   so they out-specify the `.b2b-offers .b2b-service-card p` rule (both are <p>). */
.b2b-offers .b2b-service-card .b2b-service-price { color: var(--rd-gold); }
.b2b-offers .b2b-service-card .b2b-service-note  { color: var(--rd-on-dark-52); }

/* Despre · process step number + term */
.process-detail .process-detail-card > span { color: var(--rd-gold); }
.process-detail .process-detail-card dt { color: var(--rd-on-dark); }

/* Despre · standards checklist */
.standards.soft .standards-list li  { color: var(--rd-on-dark); }
.standards.soft .standards-list svg { color: var(--rd-gold); }