/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 200 500;
  font-display: optional;
  src: url(../assets/fonts/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjdPeQ_5Y.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 200 500;
  font-display: optional;
  src: url(../assets/fonts/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjeveQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 200 600;
  font-display: optional;
  src: url(../assets/fonts/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 200 600;
  font-display: optional;
  src: url(../assets/fonts/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url(../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url(../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: optional;
  src: url(../assets/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: optional;
  src: url(../assets/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================
   Vetricare — Editorial Apple redesign
   Brand: #00497c deep medical blue · Accent: #e0a04a warm amber
   Surface: #f5f0e6 cream · Dark: #0a1b2c
   ============================================================= */

:root {
  --brand: #00497c;
  --brand-deep: #003056;
  --brand-soft: #2d6a9c;
  --brand-mist: #e9eef4;
  --accent: #e0a04a;
  --accent-deep: #b87a2a;
  --accent-soft: #f2d7a8;
  --surface: #f5f0e6;
  --surface-warm: #efe7d8;
  --surface-card: #ffffff;
  --surface-off: #faf6ef;
  --ink: #101820;
  --ink-soft: #3a4957;
  --ink-mute: #5b6a7c;
  --line: rgba(16, 24, 32, 0.08);
  --line-strong: rgba(16, 24, 32, 0.14);
  --line-light: rgba(255, 255, 255, 0.12);
  --dark: #0a1b2c;
  --dark-soft: #0f2538;
  --dark-card: #132d44;
  --danger: #d94e4e;
  --success: #5cb57b;

  --maxw: 1220px;
  --gutter: clamp(18px, 1.6vw, 28px);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --radius-xl: 34px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 32, 0.04), 0 4px 12px -4px rgba(16, 24, 32, 0.08);
  --shadow-md: 0 4px 14px -4px rgba(16, 24, 32, 0.1), 0 18px 50px -24px rgba(0, 73, 124, 0.22);
  --shadow-lg: 0 30px 80px -24px rgba(0, 73, 124, 0.35), 0 8px 20px -6px rgba(16, 24, 32, 0.12);
  --shadow-glow: 0 20px 60px -10px rgba(224, 160, 74, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--brand); color: #fff; }

html {
  /* Slightly smaller on wide screens so a 16" laptop at 100% feels like 90% used to */
  font-size: clamp(15px, 0.18vw + 14.4px, 16px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html, body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  /* IMPORTANT: do NOT set overflow-x:hidden on html OR body here.
     On iOS Safari, having overflow-x:hidden on both the html and body
     creates two competing scroll containers; when the URL bar collapses
     mid-scroll the positions desync and momentum scroll FREEZES for
     several seconds until a re-layout (e.g. opening the drawer) frees it.
     Horizontal overflow is contained by the .page-wrap div below. */
}
/* Horizontal-overflow guard moved off of html/body and onto a wrapper
   div that contains <main> and <footer>. `overflow-x: clip` is preferred
   because (unlike `hidden`) it does NOT create a scroll container, so
   iOS Safari treats it as a regular block and the URL-bar-collapse
   freeze does not occur. Hidden remains as fallback for old engines. */
.page-wrap {
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  .page-wrap { overflow-x: hidden; }
}
body.drawer-open {
  overflow: hidden;
  /* iOS Safari ignores overflow:hidden on body for touch scroll — touch-action
     none blocks the body from receiving the scroll gesture so the drawer
     becomes the only scrollable surface. Child .drawer-inner declares its
     own touch-action: pan-y to keep itself scrollable. */
  touch-action: none;
  overscroll-behavior: contain;
}

/* Themed page scrollbar — brand-blue thumb on cream track. */
html {
  scrollbar-color: var(--brand-soft) var(--surface);
  scrollbar-width: thin;
}
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: var(--surface); }
html::-webkit-scrollbar-thumb {
  background: var(--brand-soft);
  border-radius: 999px;
  border: 3px solid var(--surface);
  transition: background 0.2s ease;
}
html::-webkit-scrollbar-thumb:hover { background: var(--brand); }

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }

em {
  font-style: italic;
  font-family: var(--font-display);
  color: var(--brand);
  font-weight: 400;
}

/* ============================================================= LAYOUT PRIMITIVES */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-offset-1 { grid-column-start: 7; grid-column-end: span 6; }
.col-padded { padding: clamp(20px, 3vw, 48px) 0; }

@media (max-width: 900px) {
  .grid-12 { grid-template-columns: 1fr; gap: 40px; }
  .col-span-5, .col-span-6, .col-span-7 { grid-column: span 1; }
  .col-offset-1 { grid-column: 1 / -1; }
  .col-padded { padding: 0; }
}

/* ============================================================= TYPOGRAPHY UTILITIES */
.mono-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 400;
}
.mono-label-small { font-size: 0.6rem; opacity: 0.7; }
.mono-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brand);
  padding-bottom: 0.5rem;
  position: relative;
}
.eyebrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 2.5rem; height: 1px;
  background: var(--brand);
  opacity: 0.6;
}
.eyebrow-light { color: rgba(255,255,255,0.8); }
.eyebrow-light::after { background: rgba(255,255,255,0.6); }

.section-label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-bottom: 0.8rem;
  margin-bottom: clamp(18px, 2vw, 26px);
  border-bottom: 1px solid var(--line-strong);
  width: fit-content;
}
.section-label .mono-num {
  /* Section index numbers (01, 02, …, 10) hidden by client request —
     the labels themselves carry the context. */
  display: none;
}
.section-label-light {
  color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.2);
}
.section-label-light .mono-num { color: var(--accent); }

.section-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-weight: 300;
  font-size: clamp(2.2rem, 5.2vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 18ch;
  margin-bottom: clamp(18px, 2vw, 26px);
  font-variation-settings: "opsz" 72;
}
.section-heading-xl {
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  max-width: 22ch;
}
.section-heading-light { color: #fff; }
.section-heading-light em { color: var(--accent); }

.section-body {
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 54ch;
  font-weight: 400;
}
.section-body-lead {
  font-size: clamp(1.08rem, 1.3vw, 1.3rem);
  color: var(--ink-soft);
}
.section-body-light { color: rgba(255,255,255,0.86); }
.section-body + .section-body { margin-top: 1rem; }
.section-body strong { color: var(--ink); font-weight: 600; }
.section-body-light strong { color: #fff; }

.section-head { max-width: 56ch; }
.section-head-wide { max-width: 860px; margin-bottom: clamp(48px, 6vw, 80px); }

.prose > * + * { margin-top: 1rem; }

/* Drop cap on first paragraph */
.drop-cap::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brand);
  float: left;
  font-size: 5.4em;
  line-height: 0.88;
  padding: 0.1em 0.1em 0 0;
  font-weight: 400;
  font-variation-settings: "opsz" 144;
}

/* Pull quote */
.pull-quote {
  margin: clamp(36px, 5vw, 56px) 0;
  padding: clamp(22px, 2.5vw, 34px) 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  position: relative;
  max-width: 48ch;
}
.pull-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  line-height: 1.35;
  color: var(--ink);
  font-weight: 300;
}
.pull-quote-mark {
  position: absolute;
  left: -0.05em;
  top: -0.1em;
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--brand);
  opacity: 0.18;
  line-height: 1;
  pointer-events: none;
  font-style: italic;
}
.pull-quote-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
}
.pull-quote-caption > span:first-child {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
}

/* Pill list */
.pill-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(22px, 2.5vw, 32px);
}
.pill-list li {
  padding: 0.55rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: var(--surface-card);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: border-color 0.3s, color 0.3s, transform 0.3s var(--ease-out);
}
.pill-list li:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px);
}

/* Numeral (oversized) */
.numeral {
  display: block;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(4.4rem, 8.8vw, 9.4rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 144;
}

/* Flourish */
.flourish {
  width: 52px; height: 52px;
  color: var(--brand);
  opacity: 0.6;
}
.flourish-paw {
  position: absolute;
  right: -8px;
  top: -26px;
  color: var(--accent);
  opacity: 0.4;
  width: 64px; height: 64px;
  transform: rotate(-12deg);
  pointer-events: none;
}

/* ============================================================= READING PROGRESS */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--accent);
  z-index: 150;
  transition: opacity 0.35s;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(224, 160, 74, 0.6);
}

/* ============================================================= HEADER */
.site-header {
  position: fixed;
  top: clamp(12px, 1.4vw, 18px);
  left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 clamp(14px, 2.4vw, 24px);
  pointer-events: none;
  transition: top 0.3s var(--ease-out);
}

.nav {
  pointer-events: auto;
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  padding: 0.55rem 0.7rem 0.55rem 1.1rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.61);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 18px 50px -18px rgba(0, 73, 124, 0.35),
    0 4px 14px -4px rgba(16, 24, 32, 0.15);
  transition: background 0.4s var(--ease-out), border-color 0.4s, box-shadow 0.4s;
}
.nav-logo { justify-self: start; }
.nav-end  { justify-self: end; }
.nav-links { justify-self: center; }
.site-header.on-dark .nav {
  background: rgba(10, 27, 44, 0.55);
  border-color: rgba(255,255,255,0.14);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 18px 50px -18px rgba(0, 0, 0, 0.5);
}

.nav-logo { display: flex; align-items: center; }
.nav-logo img {
  height: 30px; width: auto;
  transition: filter 0.3s;
}
.site-header.on-dark .nav-logo img { filter: brightness(0) invert(1); }

.nav-links {
  list-style: none;
  display: flex;
  gap: clamp(14px, 2vw, 26px);
  align-items: center;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.nav-links a {
  position: relative;
  padding: 0.35rem 0;
  transition: opacity 0.2s, color 0.2s;
}
.nav-links a:hover { opacity: 0.65; }

.nav-end {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  transition: opacity 0.3s, border-color 0.3s, color 0.3s;
}
.site-header.on-dark .nav-status {
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.2);
}
.nav-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(92, 181, 123, 0.22);
  animation: pulseDot 2.4s ease-in-out infinite;
}
.nav-status.is-closed .nav-status-dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(217, 78, 78, 0.22);
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(92, 181, 123, 0.22); }
  50% { box-shadow: 0 0 0 7px rgba(92, 181, 123, 0.02); }
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.46rem 0.95rem 0.46rem 0.8rem;
  background: var(--brand);
  color: #fff !important;
  border-radius: 999px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 36;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
  box-shadow: 0 4px 14px rgba(0, 73, 124, 0.3);
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 73, 124, 0.42);
}
.nav-cta-icon { width: 15px; height: 15px; flex-shrink: 0; }
.nav-cta-icon path { stroke: currentColor; }

/* Primary header CTA = phone call. The single rotating label keeps the pill
   compact while still cycling between intent ("Sună acum") and the actual
   phone number, so the navbar doesn't feel crowded. The container's width
   is animated in sync with the labels so the pill hugs whichever label is
   currently showing — no trailing whitespace. */
.nav-cta-call { white-space: nowrap; }
.nav-cta-rotator {
  position: relative;
  display: inline-block;
  height: 1.2em;
  /* Starting width matches label 1 ("Sună acum") so first paint hugs it. */
  width: 5em;
  overflow: hidden;
  vertical-align: middle;
  line-height: 1.2;
  animation: navCtaRotatorWidth 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.nav-cta-rotator-item {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(120%);
  animation: navCtaRotator 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  will-change: transform, opacity;
}
.nav-cta-rotator-item:nth-child(2) {
  animation-delay: 3s;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.82em;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
@keyframes navCtaRotator {
  /* Each item is visible for ~half the cycle, with a tight cross-fade at the
     handoff. The next item (animation-delay: 3s = half cycle) enters during
     the same 50–58% window the current one exits, so the pill is always
     showing SOMETHING — no blank-button gap. */
  0%   { opacity: 0; transform: translateY(110%); }
  6%   { opacity: 1; transform: translateY(0); }
  50%  { opacity: 1; transform: translateY(0); }
  56%  { opacity: 0; transform: translateY(-110%); }
  100% { opacity: 0; transform: translateY(-110%); }
}
/* Width tracks the visible label so neither phase has trailing whitespace.
   Both transition windows align EXACTLY with the label crossfades — the
   pill shrinks during the same 0–6% window when "Sună acum" slides in,
   and grows during the same 50–56% window when the phone number slides
   in. Previously the shrink ran 95–100%, BEFORE the next-cycle entry,
   which made the pill go small a moment before "Sună acum" appeared. */
@keyframes navCtaRotatorWidth {
  0%   { width: 6.3em; }
  6%   { width: 5em; }
  50%  { width: 5em; }
  56%  { width: 6.3em; }
  100% { width: 6.3em; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-cta-rotator { animation: none; width: 6.3em; }
  .nav-cta-rotator-item { animation: none; opacity: 1; transform: none; }
  /* Static fallback: show only the phone number — it's the more useful label
     when the rotation is disabled. */
  .nav-cta-rotator-item:nth-child(1) { display: none; }
}

/* Secondary header chip — Programează online. Slim text-only style so the
   navbar reads as one CTA, not two. */
.nav-book {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  background: transparent;
  white-space: nowrap;
  transition: color 0.25s var(--ease-out), border-color 0.25s, transform 0.25s;
}
.nav-book:hover {
  color: var(--ink);
  border-color: var(--ink);
  transform: translateY(-1px);
}
.nav-book-icon { flex-shrink: 0; opacity: 0.7; }
.site-header.on-dark .nav-book {
  color: rgba(255,255,255,0.78);
  border-color: rgba(255,255,255,0.28);
}
.site-header.on-dark .nav-book:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.65);
}

.nav-burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(0, 73, 124, 0.08);
  position: relative;
  flex-shrink: 0;
  transition: background 0.3s var(--ease-out);
}
.nav-burger:hover { background: rgba(0, 73, 124, 0.14); }
.nav-burger span {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transform: translate(-50%, -5px);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), width 0.3s, opacity 0.3s;
}
.nav-burger span:last-child {
  transform: translate(-50%, 5px);
  width: 12px;
  margin-left: 3px;
}
.nav-burger:hover span:last-child { width: 18px; margin-left: 0; }
.site-header.on-dark .nav-burger { background: rgba(255,255,255,0.1); }
.site-header.on-dark .nav-burger:hover { background: rgba(255,255,255,0.18); }
.site-header.on-dark .nav-burger span { background: #fff; }

@media (max-width: 960px) {
  /* On mobile: logo (left), Programează pill + burger (right). The
     rotating Sună acum widget is desktop-only — on mobile its phone
     CTA equivalent lives at the top of the burger drawer instead, so
     the visible navbar stays uncluttered. */
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .nav-cta-call { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .nav-end { gap: 8px; }
}
@media (max-width: 420px) {
  /* Tight phones — drop the icon on the Programează pill so the label
     alone fits comfortably next to the burger. */
  .nav-book { padding: 0.32rem 0.62rem; font-size: 0.6rem; gap: 0.22rem; }
  .nav-book-icon { display: none; }
}

/* Drawer-open state: only kill pointer events on the nav so the X close
   button is the only control. We intentionally keep the nav VISIBLE
   underneath — fading it out caused a flicker on close because the nav had
   to fade BACK in at the same time the drawer was sliding out (two
   competing transitions). The drawer's own backdrop-blur already obscures
   the nav, so it's not visible anyway. */
body.drawer-open .site-header .nav {
  pointer-events: none;
}

/* Mobile drawer */
.nav-drawer {
  position: fixed; inset: 0;
  z-index: 130;
  background: rgba(10, 27, 44, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  /* Aligned with .drawer-inner's 0.4s slide so both finish at the same time. */
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.nav-drawer.open {
  opacity: 1;
  visibility: visible;
}
.drawer-inner {
  position: absolute;
  top: 0; right: 0;
  width: min(440px, 92vw);
  height: 100%;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(0, 73, 124, 0.08), transparent 50%),
    var(--surface);
  padding: clamp(20px, 3vw, 32px) clamp(28px, 5vw, 44px) clamp(28px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
  transform: translateX(100%);
  /* 0.4s matches the .nav-drawer opacity transition so backdrop + panel exit
     finish on the same frame. Shorter than before for a snappier close. */
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow-y: auto;
  /* iOS: enable momentum scrolling and keep the swipe contained so iOS Safari
     doesn't pass the gesture to the locked document underneath (which would
     leave Lenis in a stuck state once the drawer closes). */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  box-shadow: -30px 0 80px -20px rgba(10, 27, 44, 0.45);
}
.nav-drawer.open .drawer-inner { transform: translateX(0); }

/* Drawer header — brand + X close */
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--line);
}
.drawer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.drawer-brand img { height: 32px; width: auto; }
.drawer-brand span { display: none; } /* the wide logo already includes the wordmark */
.drawer-close {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0, 73, 124, 0.08);
  flex-shrink: 0;
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.drawer-close:hover { background: rgba(0, 73, 124, 0.16); transform: rotate(90deg); }
.drawer-close-bar {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
}
.drawer-close-bar:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.drawer-close-bar:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Links — staggered slide-in, modern editorial feel */
.drawer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.drawer-links li {
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.drawer-links li:nth-child(1) { transition-delay: 0.10s; }
.drawer-links li:nth-child(2) { transition-delay: 0.16s; }
.drawer-links li:nth-child(3) { transition-delay: 0.22s; }
.drawer-links li:nth-child(4) { transition-delay: 0.28s; }
.drawer-links li:nth-child(5) { transition-delay: 0.34s; }
.drawer-links li:nth-child(6) { transition-delay: 0.40s; }
.drawer-links li:nth-child(7) { transition-delay: 0.46s; }
.drawer-links li:nth-child(8) { transition-delay: 0.52s; }
.nav-drawer.open .drawer-links li { opacity: 1; transform: translateX(0); }

.drawer-links a {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: clamp(14px, 1.6vw, 18px) 4px;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 4.6vw, 2rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.25s, transform 0.35s var(--ease-out), padding 0.35s var(--ease-out);
}
.drawer-links a:hover,
.drawer-links a:focus-visible {
  color: var(--brand);
  padding-left: 8px;
  outline: none;
}
.drawer-links a:hover .drawer-arrow { transform: translateX(4px); opacity: 1; }
.drawer-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--brand);
  letter-spacing: 0.14em;
  align-self: center;
}
.drawer-text { line-height: 1; }
.drawer-arrow {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--brand);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
  align-self: center;
}

.drawer-foot {
  padding-top: 1.5rem;
  /* No top border: the last drawer-links <li> already paints its own
     border-bottom, so an additional border-top here read as a phantom
     row between item 08 and the Sună acum button. */
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out) 0.55s, transform 0.6s var(--ease-out) 0.55s;
}
.nav-drawer.open .drawer-foot { opacity: 1; transform: translateY(0); }

/* Drawer's "Sună acum" CTA — two-line stack so the action label sits
   above the dialable number, both inside the same big primary pill.
   Width fills the drawer so it reads as the dominant action. */
.drawer-foot .btn.drawer-call,
.drawer-foot .btn.btn-large {
  align-self: stretch;
  justify-content: space-between;
}
.drawer-call {
  gap: 0.8rem;
}
.drawer-call-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  gap: 2px;
}
.drawer-call-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.78;
}
.drawer-call-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.32rem;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.drawer-mail { color: var(--brand); font-weight: 500; }
.drawer-addr {
  font-size: 0.8rem;
  color: var(--ink-mute);
  letter-spacing: 0.03em;
}

/* ============================================================= BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: transform 0.25s var(--ease-out), box-shadow 0.3s, background 0.25s, border-color 0.25s, color 0.25s;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  will-change: transform;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(0, 73, 124, 0.5);
}
.btn-primary:hover {
  background: var(--brand-deep);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -10px rgba(0, 73, 124, 0.55);
}
.btn-ghost {
  background: transparent;
  color: inherit;
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-1px);
}
.btn-light.btn-ghost {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}
.btn-light.btn-ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.btn-large {
  padding: 1.1rem 1.8rem;
  font-size: 1rem;
}
.btn-urgente {
  background: var(--accent);
  color: var(--dark);
  box-shadow: 0 14px 40px -10px rgba(224, 160, 74, 0.6);
}
.btn-urgente:hover {
  background: var(--accent-deep);
  color: #fff;
  box-shadow: 0 18px 50px -10px rgba(224, 160, 74, 0.7);
}
.btn-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
  font-family: var(--font-display);
}
.btn:hover .btn-arrow { transform: translateX(4px); }

.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  position: relative;
}
.pulse-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(217, 78, 78, 0.6);
  animation: pulseBig 1.8s ease-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes pulseBig {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(4);   opacity: 0; }
  100% { transform: scale(4);   opacity: 0; }
}

/* ============================================================= IMAGE FRAMES */
.image-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-warm);
  box-shadow: var(--shadow-md);
  isolation: isolate;
}
.image-frame-tall { aspect-ratio: 4 / 5; }
.image-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.image-frame:hover img { transform: scale(1.03); }

/* Deep frame variant — used on the About image for richer depth */
.image-frame-deep {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 32px 64px -22px rgba(10, 27, 44, 0.32),
    0 12px 28px -14px rgba(10, 27, 44, 0.24);
}
.image-frame-deep::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.12), transparent 50%),
    linear-gradient(180deg, transparent 60%, rgba(10, 27, 44, 0.18));
  z-index: 1;
}
.image-frame-deep .image-caption { z-index: 2; }
.image-frame-deep img {
  /* slightly oversized so parallax translation never reveals card bg */
  height: 118%;
  width: 100%;
  margin-top: -9%;
  will-change: transform;
}

/* About-section image: source photo has the VETRICARE wall logo on its
   left half. With object-fit:cover + default center cropping, the logo
   gets clipped at the card's left edge. Shifting object-position toward
   the left of the source keeps the whole logo inside the visible frame. */
.section-about .image-frame img {
  object-position: 10% center;
}

/* Reveal entrance — JS toggles .is-revealed once the frame enters view */
[data-reveal="up"] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-reveal="up"].is-revealed { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { clip-path: none !important; transition: none !important; }
}
.image-caption {
  position: absolute;
  left: 14px; bottom: 14px;
  color: #fff;
  background: rgba(10, 27, 44, 0.7);
  backdrop-filter: blur(6px);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  opacity: 0.95;
}

.image-badge {
  position: absolute;
  left: clamp(-12px, -1vw, -20px); bottom: clamp(-16px, -2vw, -24px);
  background: var(--surface-card);
  padding: 16px 22px 14px;
  border-radius: 4px;
  box-shadow: 0 18px 44px -14px rgba(16, 24, 32, 0.28);
  display: flex; flex-direction: column;
  line-height: 1.15;
  gap: 2px;
  z-index: 3;
}
/* Pinned variant — sits inside the image frame, bottom-left, slightly inset
   so it overlaps the photo and feels integrated. */
.image-badge.image-badge-pinned {
  left: clamp(14px, 1.6vw, 22px);
  bottom: clamp(14px, 1.6vw, 22px);
  padding: 12px 16px 10px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 12px 28px -12px rgba(16, 24, 32, 0.45);
}
.image-badge.image-badge-pinned .image-badge-num { font-size: 1.25rem; }
.image-badge.image-badge-pinned .image-badge-label { margin-top: 2px; font-size: 0.58rem; }
.image-badge-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
  color: var(--brand);
}
.image-badge-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}
@media (max-width: 640px) {
  .image-badge {
    left: auto; right: 10px;
    bottom: 10px;
    padding: 6px 10px 5px;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    border-radius: 3px;
  }
  .image-badge-num { font-size: 0.85rem; line-height: 1; }
  .image-badge-num br { display: none; }
  .image-badge-label { display: none; }
  .image-caption { font-size: 0.5rem; padding: 4px 8px; letter-spacing: 0.14em; max-width: 58%; }
  .flourish-paw { display: none; }
}

/* ============================================================= SECTION BASE */
.section {
  position: relative;
  padding: clamp(80px, 10vh, 140px) 0;
  overflow: hidden;
}

/* ============================================================= HERO */
.hero {
  position: relative;
  /* Single `height: 100svh` (with 100vh fallback). Previously also pinned
     min-height and max-height to 100svh, which forced a 3-constraint layout
     recalculation every time iOS Safari's URL bar showed/hid — that re-layout
     pass was a major contributor to mid-scroll freezes on iPhone. */
  height: 100vh;
  height: 100svh;
  width: 100%;
  color: #fff;
  overflow: hidden;
  padding: 0;
}
.hero-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  will-change: transform;
  /* Critical for iOS: a fullscreen <video> with autoplay+playsinline can
     capture the user's first touchmove as a media gesture and eat the scroll.
     pointer-events:none on the bg layers lets touches reach the page scroller. */
  pointer-events: none;
}
.hero-bg-image,
.hero-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: saturate(0.92) contrast(1.04);
  will-change: transform;
  pointer-events: none;
}
/* Ken Burns only applies to the static-image fallback. Video already has motion. */
.hero-bg-image { animation: heroKenBurns 22s linear infinite alternate; }
@keyframes heroKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

.hero-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 27, 44, 0.7) 0%, rgba(10, 27, 44, 0.28) 35%, rgba(10, 27, 44, 0.86) 100%),
    radial-gradient(ellipse at 30% 80%, rgba(0, 73, 124, 0.5) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(224, 160, 74, 0.12) 0%, transparent 50%);
}
.hero-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  /* Single smooth padding formula that works at every viewport size — no
     width-based media-query override, no clamp() knee. The slope grows
     gradually with viewport height: 100px floor on tiny screens, 200px
     ceiling on tall ones, linear in between. */
  padding: clamp(100px, 14vh + 28px, 200px) clamp(20px, 4vw, 48px) clamp(28px, 3.4vh, 44px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  min-height: 0;
  gap: clamp(18px, 2.4vh, 32px);
}

/* Hero top — badge row.  Refined editorial feel: thin chip on the left with a
   subtle live-status dot, divider-rail rating chip on the right with the
   numerical score lifted as the focal element. */
.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: clamp(4px, 1vh, 12px);
}
.eyebrow-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
}
.eyebrow-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(224, 160, 74, 0.6);
  animation: heroEyebrowPulse 2.4s ease-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes heroEyebrowPulse {
  0%   { transform: scale(1);    opacity: 0.6; }
  70%  { transform: scale(3.85); opacity: 0; }
  100% { transform: scale(3.85); opacity: 0; }
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 24px 14px 18px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 60%),
    rgba(10, 27, 44, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 12px 30px -10px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1;
}
.hero-eyebrow .eyebrow-dot {
  width: 8px; height: 8px;
  margin-right: 0;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(224, 160, 74, 0.35), 0 0 12px rgba(224, 160, 74, 0.55);
}
.hero-eyebrow .eyebrow-part { white-space: nowrap; }
.hero-eyebrow .eyebrow-sep {
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.05) 100%);
  display: inline-block;
  font-size: 0;
  overflow: hidden;
  vertical-align: middle;
}
@media (max-width: 540px) {
  .hero-eyebrow { font-size: 0.62rem; gap: 10px; padding: 11px 18px 11px 14px; letter-spacing: 0.18em; }
  .hero-eyebrow .eyebrow-loc,
  .hero-eyebrow .eyebrow-loc + .eyebrow-sep { display: none; }
  .hero-eyebrow .eyebrow-dot { width: 7px; height: 7px; }
}

/* Right-side Google rating — same vertical rhythm so left + right pills feel
   like siblings. Stars + score split by a thin gradient rail. */
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 60%),
    rgba(10, 27, 44, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 12px 30px -10px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.94);
  line-height: 1;
}
.hero-rating::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.05) 100%);
  order: 1;
}
.hero-stars {
  color: var(--accent);
  letter-spacing: 0.14em;
  font-size: 0.9rem;
  order: 0;
  text-shadow: 0 0 12px rgba(224, 160, 74, 0.35);
}
.hero-rating > :last-child { order: 2; }
@media (max-width: 540px) {
  .hero-rating { font-size: 0.66rem; padding: 11px 18px; gap: 11px; }
  .hero-stars { font-size: 0.78rem; }
}

/* Hero content — center stack */
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  width: 100%;
  max-width: 1100px;
}

/* Heartbeat pulse line under heading */
.hero-pulse {
  display: block;
  width: min(560px, 100%);
  height: 36px;
  margin: 6px 0 clamp(14px, 1.8vw, 22px);
  color: var(--accent);
  opacity: 0.92;
}
.hero-pulse path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: heroPulseDraw 3.6s cubic-bezier(0.65, 0, 0.35, 1) 0.4s infinite;
}
@keyframes heroPulseDraw {
  0%   { stroke-dashoffset: 100; }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -100; }
}

/* Trust row — punchy stats inline */
.hero-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(20px, 2.8vw, 32px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0;
}
.hero-trust li {
  display: flex; flex-direction: column; gap: 4px;
}
.hero-trust-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  line-height: 1;
  color: var(--accent);
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.01em;
}
.hero-trust-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* Hero foot — location | scroll cue | tel */
.hero-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  padding-top: clamp(14px, 1.6vw, 20px);
  font-size: 0.78rem;
}
.hero-foot-loc, .hero-foot-tel {
  display: flex; flex-direction: column; gap: 3px;
  color: rgba(255, 255, 255, 0.78);
}
.hero-foot-loc .mono-label,
.hero-foot-tel .mono-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.6rem;
}
.hero-foot-tel { text-align: right; align-items: flex-end; }
.hero-foot-tel a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  transition: color 0.25s;
}
.hero-foot-tel a:hover { color: var(--accent); }
@media (max-width: 720px) {
  .hero-foot { grid-template-columns: 1fr; gap: 12px; text-align: center; }
  .hero-foot-tel { text-align: center; align-items: center; }
}

.hero-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: rgba(255,255,255,0.7);
  z-index: 3;
}
.hero-corner .mono-label { color: inherit; }
.hero-corner-tl { top: clamp(80px, 10vh, 110px); left: clamp(20px, 4vw, 48px); }
.hero-corner-tr { top: clamp(80px, 10vh, 110px); right: clamp(20px, 4vw, 48px); text-align: right; align-items: flex-end; }

@media (max-width: 720px) {
  .hero-corner-tl { top: 90px; }
  .hero-corner-tr { display: none; }
}

/* Mobile hero — center everything */
@media (max-width: 720px) {
  .hero-top { justify-content: center; flex-direction: column; gap: 10px; }
  .hero-content { align-items: center; text-align: center; }
  .hero-pulse { margin-left: auto; margin-right: auto; }
  .hero-tagline { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; width: 100%; }
  .hero-actions .btn { flex: 1; min-width: 200px; justify-content: center; }
  .hero-trust { justify-content: center; gap: 18px 26px; }
  .hero-trust li { align-items: center; text-align: center; }
  .hero-foot { justify-items: center; }
  .hero-rating { font-size: 0.66rem; }
  /* padding-top intentionally NOT overridden here — the single smooth formula
     on .hero-inner above handles every viewport without a snap point. */
  .hero-inner { padding-bottom: 28px; gap: 18px; }
}

/* ===================================================================
   Mobile-first hero refit — ≤640px viewports.

   The composition has to fit inside one mobile screen (~750px usable
   on iPhone with URL bar). Before this rebalance, the .hero-trust row
   and .hero-foot bar pushed the actions off-screen, leaving "Animale
   îngrijite" as the last visible element. Now: tighter top padding,
   bigger headline, smaller buttons, and the secondary trust/foot rails
   are hidden — the small badge row, headline, tagline, and CTAs
   compose as a clean, scannable above-the-fold.
   =================================================================== */
@media (max-width: 640px) {
  .hero-inner {
    padding: 92px clamp(18px, 5vw, 28px) 24px;
    gap: 16px;
    grid-template-rows: auto 1fr;
  }
  .hero-top {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding-top: 0;
  }
  .hero-content {
    justify-content: center;
    gap: 14px;
  }
  /* Heading — make this the focal element. Bigger floor, tighter
     line-height so 3-4 lines still fit. */
  .hero-heading {
    font-size: clamp(3.5rem, 15vw, 5.2rem);
    line-height: 0.96;
    letter-spacing: -0.035em;
    margin-bottom: 4px;
  }
  /* Tagline tightened — secondary info, not the focus. */
  .hero-tagline {
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: 34ch;
    margin: 0 auto;
  }
  /* CTAs — smaller pills, equal width, side-by-side. */
  .hero-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 4px;
  }
  .hero-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    font-size: 0.82rem;
    gap: 0.4rem;
  }
  .hero-actions .btn.btn-large {
    /* Override the large modifier; we want a balanced compact pair. */
    padding: 0.7rem 0.9rem;
    font-size: 0.82rem;
  }
  .hero-actions .btn-arrow { display: none; }
  /* Tighter pills — fewer chars, shorter padding. */
  .hero-eyebrow {
    padding: 8px 14px 8px 12px;
    gap: 8px;
    font-size: 0.58rem;
    letter-spacing: 0.16em;
  }
  .hero-eyebrow .eyebrow-part:nth-of-type(2) ~ .eyebrow-sep,
  .hero-eyebrow .eyebrow-loc + .eyebrow-sep,
  .hero-eyebrow .eyebrow-loc { display: none; }
  .hero-rating {
    padding: 8px 14px;
    gap: 10px;
    font-size: 0.62rem;
  }
  .hero-rating-text { font-size: 0.62rem; }
  /* Hide everything that costs vertical space and isn't critical to
     the landing message — the trust row duplicates the rating pill,
     and the foot bar duplicates info present in the fixed header
     and footer. The decorative pulse line is pure ornament. */
  .hero-pulse,
  .hero-trust,
  .hero-foot { display: none; }
}

/* Tiny phones (e.g., iPhone SE-class) — shrink heading floor a touch
   further so the 3-line composition doesn't overflow. */
@media (max-width: 380px) {
  .hero-heading { font-size: clamp(3.1rem, 15vw, 4rem); }
  .hero-tagline { font-size: 0.86rem; max-width: 30ch; }
  .hero-inner { padding-top: 84px; gap: 14px; }
  .hero-actions .btn { font-size: 0.78rem; padding: 0.62rem 0.8rem; }
}

.hero-content {
  display: flex;
  flex-direction: column;
  max-width: 960px;
}
.hero-content .eyebrow {
  color: rgba(255,255,255,0.86);
  margin-bottom: clamp(10px, 1.2vw, 16px);
}
/* Hero eyebrow shouldn't have the brand-orange underline accent — it's clutter
   above the heading. (Other section eyebrows still have it.) Keep the pill's
   own padding from .hero-eyebrow; only hide the underline tail. */
.hero-top .eyebrow::after { display: none; }
.hero-content .eyebrow::after { background: rgba(255,255,255,0.6); }

.hero-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  /* Single smooth formula across every viewport — scales with whichever axis
     is the limiting factor (width vs height) so short laptops and wide
     monitors both feel balanced. No media-query overrides; smoothly clamped
     to a 2.4rem floor and 5.4rem ceiling. */
  font-size: clamp(2.4rem, min(6.4vw, 10vh), 5.4rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: 0;
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}
.hero-heading .hero-word { color: #fff; }
.hero-heading .hero-word.italic {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
}
.hero-line { display: block; overflow: hidden; }
.hero-word {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}
.hero-word.italic {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.hero-tagline {
  max-width: 56ch;
  font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  color: rgba(255,255,255,0.86);
  line-height: 1.55;
  margin-bottom: clamp(20px, 2.2vw, 28px);
  /* opacity stays at 1 so this element is the LCP candidate at first paint */
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 0;
  opacity: 0;
}

/* Primary CTA gets a soft pulsing glow ring */
.hero-cta-primary {
  position: relative;
  isolation: isolate;
}
.hero-cta-pulse {
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  animation: heroCtaPulse 2.6s ease-out infinite;
}
@keyframes heroCtaPulse {
  0%   { transform: scale(0.9); opacity: 0.55; }
  100% { transform: scale(1.18); opacity: 0; }
}

.hero-meta {
  /* legacy class kept in case anything still references it */
  display: none;
}

/* Short laptop viewports — compress non-padding parts so hero always fits.
   padding-top + heading font-size are intentionally NOT overridden — those
   use single smooth formulas (min() of vw and vh) to scale without snaps. */
@media (max-height: 820px) and (min-width: 720px) {
  .hero-inner { padding-bottom: clamp(20px, 2.4vh, 32px); gap: clamp(14px, 1.8vh, 22px); }
  .hero-tagline { margin-bottom: clamp(14px, 1.6vw, 20px); }
  .hero-trust { margin-top: clamp(14px, 1.8vw, 22px); padding-top: clamp(12px, 1.4vw, 16px); gap: clamp(16px, 2.4vw, 32px); }
  .hero-pulse { height: 28px; margin: 4px 0 12px; }
}
@media (max-height: 700px) and (min-width: 720px) {
  .hero-pulse, .hero-trust { display: none; }
}
.hero-meta-item { display: flex; flex-direction: column; gap: 2px; }
.hero-meta-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.hero-meta-value { color: #fff; font-weight: 500; }
.hero-meta-sep { width: 1px; height: 26px; background: rgba(255,255,255,0.18); }

@media (max-width: 640px) {
  .hero-meta-sep { display: none; }
  .hero-meta { gap: 16px; }
}

.hero-scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.62);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s var(--ease-out);
  justify-self: center;
  align-self: end;
}
.hero-scroll:hover { color: #fff; }
.hero-scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0));
  animation: scrollPulse 2.4s var(--ease-in-out) infinite;
  transform-origin: top;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.6; }
  50%      { transform: scaleY(0.4); opacity: 1; }
}
@media (max-width: 720px) { .hero-scroll { display: none; } }

/* ============================================================= ABOUT */
.section-about {
  background: var(--surface);
}
.section-about .col-image { position: relative; padding-bottom: 32px; }

/* ============================================================= MARQUEE */
.marquee {
  padding: clamp(30px, 4vw, 50px) 0;
  overflow: hidden;
  position: relative;
  display: block;
}
.marquee-brand {
  background: var(--brand);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.marquee-track {
  display: flex;
  width: max-content;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.8rem);
  font-weight: 300;
  letter-spacing: -0.015em;
  white-space: nowrap;
  will-change: transform;
  font-variation-settings: "opsz" 144;
}
.marquee-track > span {
  padding-right: 0;
  display: inline-block;
}
.marquee-sep {
  color: var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.65em;
  padding: 0 0.4em;
  vertical-align: middle;
  opacity: 0.85;
}

/* ============================================================= TEAM */
.section-team { background: var(--surface-off); }
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .team-grid { grid-template-columns: 1fr; } }

/* Mobile sticky-stack — each team card sticks at the same offset, so the
   next card slides up over the previous one as the user scrolls. */
@media (max-width: 720px) {
  .team-grid {
    display: block;
    /* No trailing padding — it created a big empty zone between the last
       card and the "asistenți medicali și recepție" footnote. */
    padding-bottom: 0;
  }
  .team-card {
    position: sticky;
    top: clamp(78px, 11vh, 110px);
    margin: 0 0 clamp(40px, 8vh, 80px);
    padding: clamp(20px, 5vw, 28px);
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow:
      0 -10px 40px -18px rgba(16, 24, 32, 0.18),
      0 14px 28px -14px rgba(16, 24, 32, 0.16);
    /* layered visually — later cards paint above earlier ones (default DOM order),
       so each new card slides over the previous one in viewport */
  }
  /* Last card doesn't need scroll-runway below it — the next section
     (footnote + heading) takes that role. */
  .team-card:last-child { margin-bottom: clamp(20px, 4vh, 32px); }
  .team-card:hover { transform: none; }
  .team-card .team-image { aspect-ratio: 4 / 3; }
  .team-card-feature .team-image { aspect-ratio: 4 / 3; }
}

.team-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.4s var(--ease-out);
}
.team-card:hover { transform: translateY(-4px); }
.team-card-feature .team-image { aspect-ratio: 3 / 4; }
.team-image {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-warm);
  box-shadow: 0 1px 2px rgba(16,24,32,0.06), 0 20px 50px -24px rgba(0, 73, 124, 0.28);
}
.team-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out), filter 0.5s;
  filter: saturate(0.95);
}
.team-card:hover .team-image img {
  transform: scale(1.04);
  filter: saturate(1.05);
}
.team-role {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(10, 27, 44, 0.75);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
}

.team-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.team-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.team-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 2px;
}
.team-card-feature .team-name { font-size: clamp(1.8rem, 2.3vw, 2.4rem); }
.team-spec {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-top: 6px;
}
.team-bio {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 8px;
  max-width: 34ch;
}

.team-footnote {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* ============================================================= SERVICES */
.section-services { background: var(--surface-warm); padding-bottom: clamp(100px, 12vh, 160px); }

.featured-services {
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 8vw, 120px);
  margin-bottom: clamp(80px, 10vh, 140px);
}
.fservice {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: center;
  position: relative;
}
.fservice-flip { grid-template-columns: 1fr 1fr auto; }
.fservice-flip .fservice-num { order: 3; justify-self: end; }
.fservice-flip .fservice-text { order: 1; }
.fservice-flip .fservice-image { order: 2; }
@media (max-width: 900px) {
  .fservice, .fservice-flip {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .fservice-flip .fservice-num, .fservice-flip .fservice-text, .fservice-flip .fservice-image { order: unset; }
}

.fservice-num {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.fservice-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  background: var(--surface-card);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--danger);
  border: 1px solid rgba(217, 78, 78, 0.2);
}

.fservice-text { max-width: 46ch; }
.fservice-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.6vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 14px;
}
.fservice-title em { font-weight: 300; }
.fservice-desc {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 22px;
}
.fservice-desc strong { color: var(--brand); font-weight: 600; }
.fservice-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  transition: gap 0.3s var(--ease-out);
}
.fservice-link:hover { gap: 0.9rem; }
.fservice-image { aspect-ratio: 4 / 3; }

/* All services compact grid */
.services-all {
  padding-top: clamp(60px, 8vw, 100px);
  border-top: 1px solid var(--line-strong);
}
.services-all-head {
  margin-bottom: clamp(32px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.services-all-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--ink-soft);
  max-width: 40ch;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 1100px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
/* Below 480px we keep two columns (previously collapsed to one big card).
   Tight gap + compact card variant below — feels editorial rather than
   apologetic-mobile. */
@media (max-width: 480px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.sgrid-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 16px 22px;
  background: var(--surface-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
  cursor: pointer;
}
.sgrid-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px -26px rgba(0, 73, 124, 0.35);
}
.sgrid-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.sgrid-image {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface-warm);
}
.sgrid-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
  filter: saturate(0.9);
}
.sgrid-card:hover .sgrid-image img { transform: scale(1.06); }
.sgrid-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--ink);
}
.sgrid-desc {
  font-size: 0.85rem;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* ============================================================
   Small-mobile compact "alte servicii" cards (≤480px).
   Image fills the card; the number sits as a corner chip on
   the image, and the title rides over a soft gradient at the
   bottom so it stays legible without a separate text block.
   Description hides — at this size the title+image+number is
   plenty. Hover is replaced with a subtle press feedback
   since touch users don't get :hover.
   ============================================================ */
@media (max-width: 480px) {
  .sgrid-card {
    padding: 0;
    gap: 0;
    border-radius: 12px;
    background: var(--dark);
    /* aspect ratio of the whole tile — keeps both columns even */
    aspect-ratio: 4 / 5;
    isolation: isolate;
  }
  .sgrid-card .sgrid-image {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 12px;
    z-index: 0;
  }
  .sgrid-card .sgrid-image img {
    filter: saturate(0.95) brightness(0.75);
  }
  /* Soft top-to-bottom darkening so the title is legible over
     any image. Pseudo-element keeps DOM clean. */
  .sgrid-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 30%,
      rgba(10, 27, 44, 0.62) 70%,
      rgba(10, 27, 44, 0.88) 100%);
    border-radius: 12px;
    z-index: 1;
    pointer-events: none;
  }
  .sgrid-card .sgrid-num {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    color: var(--accent);
    background: rgba(10, 27, 44, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .sgrid-card .sgrid-title {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    color: #fff;
    font-size: 1.02rem;
    line-height: 1.15;
    letter-spacing: -0.005em;
    text-wrap: balance;
  }
  .sgrid-card .sgrid-desc { display: none; }
  .sgrid-card:active {
    transform: scale(0.985);
    transition: transform 0.12s var(--ease-out);
  }
  .sgrid-card:active .sgrid-image img {
    transform: scale(1.04);
    transition: transform 0.4s var(--ease-out);
  }
}

/* ============================================================= TESTIMONIALS */
.section-testimonials { background: var(--surface); }

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin-bottom: clamp(60px, 7vw, 90px);
}
@media (max-width: 1000px) { .testimonials-grid { grid-template-columns: 1fr; } }

.testimonial {
  padding: clamp(28px, 3vw, 44px);
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.testimonial:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.testimonial-feature {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 30px 80px -30px rgba(0, 73, 124, 0.55);
}
.testimonial-feature .testimonial-quote { color: #fff; }
.testimonial-feature .testimonial-quote em { color: var(--accent); }
.testimonial-feature .testimonial-name { color: #fff; }
.testimonial-feature .testimonial-pet { color: rgba(255,255,255,0.7); }
.testimonial-feature .testimonial-stars span { color: var(--accent); }

.testimonial-stars {
  display: flex;
  gap: 2px;
  font-size: 1.1rem;
}
.testimonial-stars span { color: var(--accent); }

.testimonial-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.4;
  color: var(--ink);
  font-variation-settings: "opsz" 72;
}
.testimonial-feature .testimonial-quote {
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
}
.testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-style: normal;
}
.testimonial-feature .testimonial-meta { border-color: rgba(255,255,255,0.15); }
.testimonial-name {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
  font-size: 0.95rem;
}
.testimonial-pet {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

.testimonials-marquee {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.testimonials-marquee .marquee-track {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  color: var(--ink-soft);
}
.testimonials-marquee .marquee-sep { color: var(--brand); opacity: 0.6; font-size: 0.8em; }

/* ============================================================= URGENTE */
.section-urgente {
  padding: 0;
  background: var(--dark);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.urgente-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.urgente-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(120, 8, 18, 0.92) 0%, rgba(184, 15, 30, 0.62) 38%, rgba(80, 4, 12, 0.95) 100%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 70, 90, 0.32) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(225, 29, 46, 0.28) 0%, transparent 55%);
}
/* .urgente-scan removed — vertical light-ray was distracting */
.urgente-pulse-frame {
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(255, 80, 95, 0.55);
  border-radius: 4px;
  /* static box-shadow — animate opacity only (GPU-composited) */
  box-shadow: 0 0 75px 9px rgba(255, 60, 80, 0.25) inset;
  animation: urgenteFrame 2.4s ease-in-out infinite;
  will-change: opacity;
}
@keyframes urgenteFrame {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
.urgente-corner-flag {
  position: absolute;
  top: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 60, 80, 0.92);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 3px;
  z-index: 3;
  box-shadow: 0 6px 16px -4px rgba(120, 8, 18, 0.7);
  animation: urgenteFlag 1.4s ease-in-out infinite;
}
.urgente-corner-flag::before {
  content: "";
  width: 7px; height: 7px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
  animation: emergencyDot 1.6s ease-out infinite;
}
@keyframes urgenteFlag {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.urgente-strobe-edges::before,
.urgente-strobe-edges::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 14px;
  pointer-events: none;
  z-index: 2;
}
.urgente-strobe-edges::before {
  left: 0;
  background: linear-gradient(90deg, rgba(255, 30, 50, 0.55), transparent);
  animation: urgenteStrobe 1.6s ease-in-out infinite;
}
.urgente-strobe-edges::after {
  right: 0;
  background: linear-gradient(270deg, rgba(255, 30, 50, 0.55), transparent);
  animation: urgenteStrobe 1.6s ease-in-out infinite 0.8s;
}
@keyframes urgenteStrobe {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.95; }
}
.urgente-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.3 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.1;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.urgente-inner {
  position: relative; z-index: 2;
  padding-block: clamp(100px, 14vh, 160px) clamp(80px, 10vh, 120px);
  padding-inline: clamp(20px, 5vw, 48px);
  max-width: 900px;
}
@media (max-width: 600px) {
  .urgente-inner {
    padding-inline: clamp(20px, 6vw, 32px);
  }
  .urgente-corner-flag {
    top: 12px; left: 12px;
    font-size: 0.56rem;
    padding: 5px 9px;
    letter-spacing: 0.18em;
  }
  .urgente-meta {
    flex-direction: column;
    gap: 16px;
    padding-top: 22px;
  }
  .urgente-pulse-frame { inset: 8px; }
  .urgente-strobe-edges::before,
  .urgente-strobe-edges::after { width: 8px; }
}
.urgente-phone {
  position: relative;
  margin: clamp(26px, 3vw, 36px) 0 clamp(30px, 4vw, 48px);
  display: inline-block;
}
.urgente-phone-ring {
  position: absolute;
  inset: -20px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  animation: urgenteRing 2.4s var(--ease-out) infinite;
}
@keyframes urgenteRing {
  0% { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.3); opacity: 0; }
}

.urgente-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 44px);
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.urgente-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.urgente-meta-item .mono-label { color: rgba(255,255,255,0.55); }
.urgente-meta-value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  color: #fff;
  letter-spacing: -0.01em;
}

/* ============================================================= STATS */
.section-stats {
  background: var(--dark);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.section-stats::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(0, 73, 124, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(224, 160, 74, 0.12) 0%, transparent 50%);
  pointer-events: none;
}
.section-stats .container { position: relative; z-index: 1; }

/* Editorial stats rail — full-width rows, huge numerals, hairline progress */
.stats-rail {
  list-style: none;
  padding: 0;
  margin: clamp(50px, 6vw, 80px) 0 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.stats-rail .stat {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(220px, 320px);
  column-gap: clamp(24px, 3vw, 56px);
  align-items: end;
  padding: clamp(28px, 4vw, 56px) 0 clamp(22px, 3vw, 40px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  transition: background 0.5s var(--ease-out);
}
.stats-rail .stat::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out);
}
.stats-rail .stat.is-active::before { transform: scaleX(1); }
.stats-rail .stat:hover { background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent 60%); }

.stat-index {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45);
  align-self: start;
  padding-top: 0.6em;
}

.stat-main { min-width: 0; }

.stat-value {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(5rem, 12vw, 11rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: #fff;
  font-variation-settings: "opsz" 144;
}
.stat-number { font-variant-numeric: tabular-nums; }
.stat-suffix {
  font-size: 0.38em;
  color: var(--accent);
  margin-left: 0.1em;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.01em;
}

.stat-track {
  position: relative;
  display: block;
  height: 1px;
  width: 100%;
  margin-top: clamp(18px, 2vw, 28px);
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.stat-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 1.8s var(--ease-out);
}
.stat.is-active .stat-fill { transform: scaleX(var(--arc, 0.7)); }

.stat-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 0.4em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s var(--ease-out) 0.2s, transform 0.7s var(--ease-out) 0.2s;
}
.stat.is-active .stat-meta { opacity: 1; transform: none; }
.stat-label {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.25;
}
.stat-caption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .stats-rail .stat {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    row-gap: 14px;
    column-gap: 20px;
    align-items: start;
  }
  .stat-index { padding-top: 0.4em; }
  .stat-main { grid-column: 2; }
  .stat-meta { grid-column: 2; padding-bottom: 0; }
  .stat-value { font-size: clamp(4rem, 16vw, 7rem); }
}

/* ============================================================= GALLERY */
.section-gallery {
  background: var(--surface);
  padding: clamp(80px, 10vh, 140px) 0 clamp(100px, 12vh, 160px);
}
.gallery-head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: clamp(40px, 5vw, 60px);
}
.gallery-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink-mute);
  padding-bottom: 8px;
}
.gallery-hint .btn-arrow { font-size: 1.2rem; color: var(--brand); }

.gallery-scroller {
  position: relative;
  /* edge padding aligns with the container's left/right edges so the first
     and last gallery cards line up with the section heading above them */
  --gallery-pad: max(clamp(28px, 5vw, 56px), calc((100vw - var(--maxw)) / 2 + clamp(28px, 4vw, 48px)));
  padding-inline: var(--gallery-pad);
  /* Right-edge breathing room is added via .gallery-card:last-child below,
     not padding here — Chromium/WebKit don't include padding-inline-end in
     scrollable width inside flex scrollers. */
  scroll-padding-inline: var(--gallery-pad);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Allow BOTH axes so vertical-dominant swipes scroll the page and
     horizontal-dominant swipes scroll the gallery. Previously this was
     `pan-x`, which blocked vertical swipes entirely — touching the
     gallery image trapped the page scroll. With both axes declared the
     browser routes the gesture by dominant axis. */
  touch-action: pan-x pan-y;
}

/* Gallery scroller wrapper — positions the prev/next arrows on the LEFT
   and RIGHT edges of the gallery rail. */
.gallery-scroller-wrap {
  position: relative;
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-card);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.25s var(--ease-out), color 0.25s, transform 0.25s, box-shadow 0.25s, opacity 0.25s;
  box-shadow: 0 10px 26px -10px rgba(16, 24, 32, 0.28);
}
.gallery-arrow-prev { left: clamp(12px, 2vw, 28px); }
.gallery-arrow-next { right: clamp(12px, 2vw, 28px); }
.gallery-arrow:hover:not(:disabled) {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 16px 30px -12px rgba(0, 73, 124, 0.55);
}
.gallery-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
@media (max-width: 720px) {
  .gallery-arrow { width: 42px; height: 42px; }
  .gallery-arrow-prev { left: 8px; }
  .gallery-arrow-next { right: 8px; }
}
/* Right-edge fade hint removed — the prev/next arrow buttons + "Derulează
   orizontal" label already communicate scrollability without overlaying
   the rightmost image. */
.gallery-scroller::-webkit-scrollbar { display: none; }
.gallery-scroller:active { cursor: grabbing; }
.gallery-scroller:focus { outline: none; }
.gallery-scroller:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

.gallery-track {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 2vw, 28px);
  padding: 10px 0 40px;
}
.gallery-card {
  flex: 0 0 min(72vw, 520px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* End-of-strip breathing room — must live on the last card (not the scroller's
   padding-right) because flex scrollers ignore container padding-end. */
.gallery-card:last-child { margin-inline-end: clamp(64px, 12vw, 200px); }

.gallery-image {
  /* Lock every card to the same aspect (4:5 — a sweet spot for mixed
     landscape + portrait sources, small crop in both directions). */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-warm);
  box-shadow: var(--shadow-md);
}
.gallery-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.95);
  transition: transform 1s var(--ease-out), filter 0.5s;
}
.gallery-card:hover .gallery-image img {
  transform: scale(1.04);
  filter: saturate(1.05);
}
.gallery-caption {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: baseline;
}
.gallery-caption .mono-num { grid-row: 1 / 3; align-self: start; padding-top: 6px; }
.gallery-title {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--ink);
}
.gallery-desc {
  grid-column: 2;
  font-size: 0.85rem;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* ============================================================= FAQ */
.section-faq { background: var(--surface-off); }
.faq-grid { align-items: start; }
.faq-intro { position: sticky; top: 120px; }
@media (max-width: 900px) { .faq-intro { position: static; } }

.faq-intro .btn {
  margin-top: clamp(18px, 2vw, 26px);
}

.faq-list {
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-top: 1px solid var(--line-strong);
  transition: background 0.3s;
}
.faq-item:last-child { border-bottom: 1px solid var(--line-strong); }
/* FAQ uses a div+button pattern (not <details>) so we have full control
   over the height transition — UA stylesheets put display:none !important
   on closed <details> non-summary children, which can't be overridden. */
.faq-item .faq-summary {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  /* Symmetric vertical padding so the question text sits centered between the
     dividing lines whether the item is open or closed. Kept tight so the FAQ
     list reads as a compact stack, not a sparse one. */
  padding: clamp(14px, 1.4vw, 18px) 0;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: padding 0.3s var(--ease-out);
}
.faq-item .faq-summary:hover .faq-q { color: var(--brand); }
.faq-item .faq-summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 4px;
}
.faq-num {
  color: var(--brand);
  min-width: 2.5rem;
}
.faq-q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  line-height: 1.3;
  color: var(--ink);
  transition: color 0.3s;
}
.faq-glyph {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.faq-glyph::before,
.faq-glyph::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--ink-soft);
  transition: transform 0.35s var(--ease-spring), background 0.3s, opacity 0.3s;
}
.faq-glyph::before {
  width: 14px; height: 1.5px;
  transform: translate(-50%, -50%);
}
.faq-glyph::after {
  width: 1.5px; height: 14px;
  transform: translate(-50%, -50%);
}
.faq-item[data-open="true"] .faq-glyph::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.faq-item[data-open="true"] .faq-glyph::before {
  background: var(--brand);
}
/* Smooth open/close — grid-template-rows trick. Now that we own the markup,
   .faq-a is always display: grid and CSS controls everything. */
.faq-item .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.faq-item[data-open="true"] .faq-a {
  grid-template-rows: 1fr;
}
.faq-a-inner {
  min-height: 0;
  /* CRITICAL: padding-bottom is 0 when CLOSED so the grid-template-rows: 0fr
     track actually collapses to 0. Otherwise the inner's min-content includes
     this padding and the closed .faq-a sits at padding-bottom px tall, which
     visually adds bottom space below every closed question and makes the
     bottom gap look bigger than the top gap. Restored to a real value when
     the item is open (below), animated in sync with the grid expansion. */
  padding-top: 0;
  padding-bottom: 0;
  padding-left: calc(2.5rem + 20px);
  padding-right: 42px;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: 60ch;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.35s ease 0.08s,
    transform 0.45s var(--ease-out) 0.08s,
    padding-bottom 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.faq-item[data-open="true"] .faq-a-inner {
  opacity: 1;
  transform: none;
  padding-bottom: clamp(14px, 1.4vw, 18px);
}
.faq-a strong { color: var(--brand); font-weight: 600; }
@media (max-width: 640px) {
  .faq-a-inner { padding-left: 0; padding-right: 0; }
}

/* ============================================================= HOURS */
.section-hours { background: var(--surface); }
.hours-grid-layout { align-items: start; }
.hours-text > * + * { margin-top: 0; }

.hours-list {
  margin-top: clamp(30px, 3vw, 40px);
  border-top: 1px solid var(--line-strong);
}
.hours-row {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.hours-row span:last-child {
  color: var(--ink);
  font-weight: 500;
}
.hours-closed { color: var(--ink-mute) !important; font-weight: 400 !important; }
.hours-row-accent {
  background: linear-gradient(90deg, rgba(224, 160, 74, 0.08) 0%, transparent 100%);
  padding-left: 12px;
  margin-left: -12px;
}
.hours-row-accent span:last-child {
  color: var(--accent-deep);
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  font-size: 0.92rem;
}

.info-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: clamp(32px, 4vw, 48px);
}
.info-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.info-value {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  color: var(--ink);
  font-weight: 400;
}
.info-link { color: var(--brand); transition: opacity 0.2s; }
.info-link:hover { opacity: 0.7; }

.driving-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(30px, 4vw, 40px);
}
.driving-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1rem;
  background: var(--surface-card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.driving-chip .mono-label {
  color: var(--brand);
  font-weight: 600;
}

.hours-map { display: flex; flex-direction: column; }
.map-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-warm);
  box-shadow: var(--shadow-md);
}
/* On desktop, drop the aspect-ratio and let the map stretch to match the
   left column's height — much more balanced visually. */
@media (min-width: 720px) {
  .hours-grid-layout { align-items: stretch; }
  .hours-map { height: 100%; }
  .map-frame { aspect-ratio: auto; height: 100%; min-height: 540px; }
}
.post-map {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(16px, 1.8vw, 24px);
}
@media (max-width: 720px) {
  .post-map { grid-template-columns: 1fr; }
}

/* Arrival info card — typography-driven, no icons */
.arrival-card {
  position: relative;
  padding: clamp(22px, 2.2vw, 30px) clamp(22px, 2.4vw, 32px);
  background: var(--surface-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px -16px rgba(16, 24, 32, 0.18);
}
.arrival-label { margin-bottom: clamp(14px, 1.6vw, 22px); }
.arrival-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.arrival-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.arrival-list li:first-child { border-top: 0; padding-top: 4px; }
.arrival-list li:last-child { padding-bottom: 4px; }
.arrival-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--brand);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding-top: 0.15em;
}
.arrival-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arrival-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.arrival-desc {
  font-size: 0.78rem;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
  line-height: 1.45;
}

/* Cabinet preview strip — links into gallery */
.cabinet-strip {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  padding: clamp(22px, 2.2vw, 30px) clamp(22px, 2.4vw, 32px);
  background: linear-gradient(140deg, var(--brand) 0%, #003b66 100%);
  color: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  box-shadow: 0 18px 36px -18px rgba(0, 73, 124, 0.55);
}
.cabinet-strip::before {
  content: "";
  position: absolute;
  top: -40%; right: -20%;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
.cabinet-strip:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 48px -18px rgba(0, 73, 124, 0.7);
}
.cabinet-strip-head {
  display: flex; flex-direction: column; gap: 4px;
}
.cabinet-strip-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.cabinet-strip-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.3rem, 1.6vw, 1.6rem);
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.cabinet-strip-imgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  align-self: end;
}
.cabinet-strip-imgs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  transition: transform 0.5s var(--ease-out), filter 0.4s;
  filter: saturate(0.92);
}
.cabinet-strip:hover .cabinet-strip-imgs img:nth-child(1) { transform: translateY(-3px); }
.cabinet-strip:hover .cabinet-strip-imgs img:nth-child(2) { transform: translateY(2px); }
.cabinet-strip:hover .cabinet-strip-imgs img:nth-child(3) { transform: translateY(-2px); }
.cabinet-strip:hover .cabinet-strip-imgs img:nth-child(4) { transform: translateY(3px); }
.cabinet-strip:hover .cabinet-strip-imgs img { filter: saturate(1); }
.cabinet-strip-arrow {
  position: absolute;
  top: clamp(20px, 2.2vw, 28px); right: clamp(22px, 2.4vw, 32px);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1rem;
  transition: transform 0.4s var(--ease-out), background 0.3s;
}
.cabinet-strip:hover .cabinet-strip-arrow {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.22);
}
@media (max-width: 540px) {
  .cabinet-strip-imgs { grid-template-columns: repeat(2, 1fr); }
}
.map-frame iframe {
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(0.2) contrast(1.02);
  transition: filter 0.5s;
}
.map-frame:hover iframe { filter: grayscale(0) contrast(1.04); }
.map-badge {
  position: absolute;
  bottom: 14px; right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--ink);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--ease-out);
}
.map-badge:hover { transform: translateY(-2px); color: var(--brand); }
.map-pin { color: var(--brand); font-size: 0.85rem; }

/* ============================================================= CTA + FOOTER */
.section-cta {
  background: var(--dark);
  color: #fff;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.cta-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.section-cta::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 73, 124, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 100%, rgba(224, 160, 74, 0.14) 0%, transparent 50%);
  pointer-events: none;
}
.cta-inner {
  position: relative; z-index: 1;
  padding: clamp(100px, 14vh, 160px) 0 clamp(60px, 8vh, 90px);
  text-align: center;
  max-width: 880px;
}
.cta-inner .section-label { margin: 0 auto clamp(18px, 2vw, 26px); }
.cta-heading {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(3rem, 6.6vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: clamp(22px, 3vw, 36px);
  font-variation-settings: "opsz" 144;
}
.cta-heading em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}
.cta-body {
  font-size: clamp(1.08rem, 1.3vw, 1.3rem);
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  max-width: 48ch;
  margin: 0 auto clamp(32px, 4vw, 48px);
}
.cta-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Footer */
.footer {
  position: relative; z-index: 1;
  padding-block: clamp(40px, 6vw, 80px) clamp(30px, 4vw, 50px);
  background: var(--dark);
  color: #fff;
}

/* Desktop sticky reveal — footer pinned to viewport bottom, main covers it
   with its opaque background, footer is exposed as you scroll past the CTA. */
@media (min-width: 720px) {
  body { background: var(--dark); }
  main {
    position: relative;
    z-index: 2;
    background: var(--surface);
  }
  .site-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
  }
}
.footer-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 52px);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
  padding-bottom: clamp(30px, 4vw, 46px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-top { grid-template-columns: 1fr; } }

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.footer-logo {
  width: auto;
  height: 32px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.footer-tagline {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.66);
  line-height: 1.55;
  max-width: 34ch;
}
.footer-seal {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  margin-top: 6px;
}
.footer-seal .mono-label { color: rgba(255,255,255,0.5); }
.footer-seal-year {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--accent);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-label {
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}
.footer-col a, .footer-col span {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.84);
  transition: color 0.25s;
}
.footer-col a:hover { color: var(--accent); }
.footer-accent { color: var(--accent) !important; font-weight: 500; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  padding-top: clamp(22px, 3vw, 32px);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.footer-site {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255,255,255,0.7);
  transition: color 0.25s;
}
.footer-site:hover { color: var(--accent); }
.footer-site-name { color: var(--accent); }
.footer-heart {
  font-size: 0.95rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255, 80, 110, 0.35));
  animation: footerHeartBeat 1.8s ease-in-out infinite;
}
@keyframes footerHeartBeat {
  0%, 100% { transform: scale(1); }
  20%      { transform: scale(1.18); }
  40%      { transform: scale(1); }
  60%      { transform: scale(1.12); }
  80%      { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-heart { animation: none; }
}

/* Footer legal-link row — small, low-contrast, sits between footer-top and
   the copyright/credit bottom row. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 2vw, 24px) 0 clamp(10px, 1.4vw, 16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.footer-legal a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s;
}
.footer-legal a:hover { color: var(--accent); }
.footer-legal-sep {
  color: rgba(255, 255, 255, 0.3);
}

/* ============================================================= LEGAL PAGES
   Static informational pages (Privacy, Terms, GDPR). Reuses the service
   page chrome (hero band on top, prose body below). Cream background so
   the long-form text reads comfortably. */
.legal-page main { background: var(--surface); }
.legal-hero {
  background: var(--surface-warm);
  padding: clamp(110px, 14vh, 160px) 0 clamp(50px, 7vw, 78px);
  border-bottom: 1px solid var(--line);
}
.legal-hero .container { max-width: 880px; }
.legal-hero .service-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-block: clamp(14px, 2vw, 22px) clamp(14px, 1.8vw, 22px);
}
.legal-hero .service-tagline {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 60ch;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}
.legal-updated {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--ink-mute);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-card);
}
.legal-body {
  padding: clamp(50px, 7vw, 80px) 0 clamp(80px, 10vw, 140px);
}
.legal-body .container { max-width: 760px; }
.legal-prose {
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  line-height: 1.72;
  color: var(--ink);
}
.legal-prose h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.2;
  color: var(--ink);
  margin-block: clamp(40px, 5vw, 56px) clamp(12px, 1.4vw, 18px);
  letter-spacing: -0.01em;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  color: var(--brand);
  margin-block: clamp(22px, 2.6vw, 30px) clamp(8px, 1vw, 12px);
}
.legal-prose p {
  margin-bottom: clamp(14px, 1.6vw, 18px);
  color: var(--ink-soft);
}
.legal-prose ul {
  list-style: none;
  margin: clamp(8px, 1vw, 14px) 0 clamp(18px, 2vw, 24px);
  padding: 0;
}
.legal-prose ul li {
  position: relative;
  padding: 4px 0 4px 22px;
  color: var(--ink-soft);
}
.legal-prose ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.legal-prose a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 73, 124, 0.35);
  transition: text-decoration-color 0.2s, color 0.2s;
}
.legal-prose a:hover {
  color: var(--brand-deep);
  text-decoration-color: var(--brand);
}
.legal-prose strong { color: var(--ink); font-weight: 500; }

/* ============================================================= COOKIE BANNER
   Bottom-left card, shown once until user accepts/rejects. Floats above the
   emergency CTA on mobile so neither blocks the other. */
.cookie-banner {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 200;
  width: min(420px, calc(100vw - 36px));
  background: var(--surface-card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow:
    0 24px 48px -18px rgba(10, 27, 44, 0.32),
    0 6px 16px -6px rgba(10, 27, 44, 0.18);
  display: grid;
  gap: 14px;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.cookie-banner-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 4px;
}
.cookie-banner-text p {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.cookie-banner-text a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.cookie-btn {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
  white-space: nowrap;
}
.cookie-btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line-strong);
}
.cookie-btn-ghost:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.cookie-btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(0, 73, 124, 0.5);
}
.cookie-btn-primary:hover {
  background: var(--brand-deep);
  transform: translateY(-1px);
}
@media (max-width: 540px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    padding: 14px;
  }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions .cookie-btn { flex: 1; min-width: 0; }
}
/* On mobile, the emergency CTA is a wide bar at the bottom — lift the
   cookie banner above it so both are tappable. */
@media (max-width: 720px) {
  .cookie-banner { bottom: 96px; }
}

/* ============================================================= SERVICE MODAL */
.svc-modal {
  position: fixed; inset: 0;
  z-index: 220;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.svc-modal.open {
  opacity: 1;
  visibility: visible;
}
.svc-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 27, 44, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.svc-modal-panel {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -48%);
  width: min(680px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 48px);
  box-shadow: 0 40px 100px -20px rgba(0, 73, 124, 0.5);
  transition: transform 0.5s var(--ease-spring);
}
.svc-modal.open .svc-modal-panel { transform: translate(-50%, -50%); }
.svc-modal-close {
  position: absolute;
  top: 18px; right: 22px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface-warm);
  font-size: 1.4rem;
  color: var(--ink-soft);
  transition: background 0.25s, color 0.25s;
}
.svc-modal-close:hover { background: var(--brand); color: #fff; }

.svc-modal-content h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 14px;
}
.svc-modal-content h3 em { font-weight: 300; }
.svc-modal-content p {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 14px;
}
.svc-modal-content ul {
  list-style: none;
  margin-top: 14px;
}
.svc-modal-content ul li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.svc-modal-content ul li .mono-label { color: var(--brand); white-space: nowrap; }

/* ============================================================= ANIMATION INITIAL STATES */
[data-anim-target] {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}

/* ============================================================= VIEW TRANSITIONS
   Chrome 126+ / Safari 18+ / Edge — browser-native cross-document fade+slide.
   Firefox falls back to instant navigation gracefully (no JS required). */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(root) {
  animation-name: vt-fade-out;
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-new(root) { animation-name: vt-slide-in; }

@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Persist the floating navbar across the transition so it doesn't flash. */
.site-header { view-transition-name: site-header; }
.emergency-cta { view-transition-name: emergency-cta; }

/* ============================================================= EMERGENCY CTA (sticky 24/7 banner) */
.emergency-cta {
  position: fixed;
  right: 18px;
  bottom: 18px;
  left: auto;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: min(320px, calc(100vw - 28px));
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #e11d2e 0%, #b80f1e 100%);
  color: #fff;
  box-shadow: 0 18px 46px -14px rgba(184, 15, 30, 0.55), 0 4px 14px -5px rgba(184, 15, 30, 0.45);
  /* Hidden by default so it doesn't flash on initial paint before JS decides.
     The .visible class is added by bindUrgenteBannerSuppress once the hero
     has been scrolled past (or immediately on inner pages with no hero). */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), visibility 0.5s;
  animation: emergencyGlow 2.6s ease-in-out infinite;
}
.emergency-cta.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
/* Hide the floating banner while the user is reading the urgente section —
   no need to show the same CTA twice. Same treatment when the user reaches
   the footer (the page CTA is right there; floating banner is in the way). */
body.in-urgente .emergency-cta,
body.in-footer .emergency-cta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(28px) scale(0.96);
}
@keyframes emergencyGlow {
  0%, 100% { box-shadow: 0 24px 60px -18px rgba(184, 15, 30, 0.55), 0 6px 18px -6px rgba(184, 15, 30, 0.45), 0 0 0 0 rgba(225, 29, 46, 0.5); }
  50% { box-shadow: 0 24px 60px -18px rgba(184, 15, 30, 0.7), 0 6px 18px -6px rgba(184, 15, 30, 0.55), 0 0 0 14px rgba(225, 29, 46, 0); }
}
.emergency-cta-text { display: flex; flex-direction: column; gap: 3px; }
.emergency-cta-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display, var(--font-sans));
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: #fff;
}
.emergency-cta-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  position: relative;
}
.emergency-cta-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: emergencyDot 1.6s ease-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes emergencyDot {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(3.22); opacity: 0; }
  100% { transform: scale(3.22); opacity: 0; }
}
.emergency-cta-sub {
  font-size: 0.76rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
}
.emergency-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  background: #fff;
  color: #b80f1e;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.25s;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.25);
}
.emergency-cta-btn:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.35);
}
.emergency-cta-btn-icon { font-size: 1rem; }

@media (max-width: 768px) {
  .emergency-cta {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
    border-radius: 12px 12px 0 0;
    animation: none;
  }
  .emergency-cta-text { flex: 1 1 auto; min-width: 0; }
  .emergency-cta-title { font-size: 0.82rem; }
  .emergency-cta-sub { font-size: 0.7rem; }
  .emergency-cta-btn {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 0.78rem;
  }
}

/* ============================================================= REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-anim-target] { opacity: 1 !important; transform: none !important; }
  .hero-word { transform: none !important; }
  .hero-bg-image { animation: none !important; }
  .stat .stat-fill { transition: none !important; transform: scaleX(var(--arc, 0.7)) !important; }
  .stat::before { transition: none !important; transform: scaleX(1) !important; }
  .stat-meta { opacity: 1 !important; transform: none !important; }
  .hero-tagline, .hero-actions, .hero-meta { opacity: 1 !important; }
  .emergency-cta { animation: none !important; }
  .emergency-cta-dot { animation: none !important; }
}

/* ============================================================= NAV SERVICES DROPDOWN
   Desktop hover dropdown for the Servicii nav link. Mobile uses an expandable
   group inside the drawer (see .drawer-group). */
.nav-services { position: relative; }
.nav-services > a { display: inline-flex; align-items: center; gap: 4px; }
.nav-services > a::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms var(--ease-out);
}
.nav-services:hover > a::after,
.nav-services:focus-within > a::after { transform: translateY(0) rotate(225deg); }

/* Hover bridge — covers the 12px gap between trigger and menu so the mouse
   never leaves a hovered ancestor while moving from link to dropdown. */
.nav-services::before {
  content: "";
  position: absolute;
  top: 100%;
  left: -12px;
  right: -12px;
  height: 18px;
  pointer-events: none;
}
.nav-services:hover::before,
.nav-services:focus-within::before { pointer-events: auto; }

.nav-services-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 280px;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  display: grid;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  z-index: 200;
}
.nav-services:hover .nav-services-menu,
.nav-services:focus-within .nav-services-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-services-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 160ms ease, color 160ms ease;
}
.nav-services-menu a::after {
  content: "→";
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 160ms ease, transform 160ms ease;
  color: var(--brand);
}
.nav-services-menu a:hover {
  background: var(--brand-mist);
  color: var(--brand);
}
.nav-services-menu a:hover::after { opacity: 1; transform: translateX(0); }
.nav-services-menu .nav-services-all {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.nav-services-menu .nav-services-all:hover { color: var(--brand); }

@media (max-width: 900px) {
  .nav-services-menu { display: none; }
}

/* Mobile drawer expandable group */
.drawer-group { display: contents; }
.drawer-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease-out);
  overflow: hidden;
}
.drawer-sub-inner {
  min-height: 0;
  padding-left: 56px;
  padding-right: 24px;
  display: grid;
  gap: 0;
}
.drawer-group[data-open="true"] .drawer-sub { grid-template-rows: 1fr; }
.drawer-group[data-open="true"] > li > a .drawer-arrow { transform: rotate(90deg); }
.drawer-sub-inner a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: 1rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.drawer-sub-inner a:last-child { border-bottom: 0; }

/* ============================================================= SERVICE PAGES */
.service-page main { padding-top: 0; }

.service-hero {
  position: relative;
  min-height: clamp(560px, 78vh, 760px);
  display: flex;
  align-items: flex-end;
  padding: clamp(120px, 18vh, 200px) 0 clamp(48px, 8vh, 96px);
  overflow: hidden;
  isolation: isolate;
  background: var(--dark);
  color: #fff;
}
.service-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.service-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transform: scale(1.04);
  animation: heroKenBurns 22s linear infinite alternate;
}
.service-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 27, 44, 0.45) 0%,
    rgba(10, 27, 44, 0.62) 60%,
    rgba(10, 27, 44, 0.86) 100%);
  z-index: -1;
}
.service-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}
.service-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.service-breadcrumb a {
  color: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.service-breadcrumb a:hover { color: #fff; border-bottom-color: var(--accent); }
.service-breadcrumb-sep { opacity: 0.5; }
.service-breadcrumb-current { color: var(--accent); }

.service-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 7.4vw, 6.4rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.service-h1 em { color: var(--accent); }
.service-tagline {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: rgba(255, 255, 255, 0.84);
  max-width: 56ch;
  line-height: 1.55;
}
.service-hero-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: clamp(8px, 1.5vh, 16px);
}
.service-hero-actions .btn-primary {
  background: var(--accent);
  color: var(--dark);
}
.service-hero-actions .btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
}
.service-hero-actions .btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Body content */
.service-body {
  padding: clamp(64px, 10vh, 140px) 0 clamp(48px, 8vh, 96px);
  background: var(--surface);
}
.service-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.service-prose {
  max-width: 64ch;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.service-prose > :first-child { margin-top: 0; }
.service-prose h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 48px 0 18px;
  letter-spacing: -0.015em;
}
.service-prose h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--brand);
  margin: 28px 0 8px;
}
.service-prose p { margin: 0 0 18px; }
.service-prose strong { color: var(--ink); font-weight: 600; }
.service-prose ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.service-prose li {
  position: relative;
  padding-left: 26px;
}
.service-prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 14px;
  height: 1.4px;
  background: var(--accent);
}

.service-prose-lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}
.service-prose-lead em { color: var(--brand); }

.service-side {
  position: sticky;
  top: 110px;
  display: grid;
  gap: 16px;
}
.service-side-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
}
.service-side-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-side-card {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: grid;
  gap: 14px;
}
.service-side-card-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.service-side-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.service-side-card .btn { justify-self: stretch; }
.service-side-meta {
  display: grid;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.service-side-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.service-side-meta-row:last-child { border-bottom: 0; }
.service-side-meta-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.service-side-meta-val { color: var(--ink); font-weight: 500; }
.service-side-meta-val--accent { color: var(--brand); }

/* Why-Vetricare trust band */
.service-why {
  background: var(--brand-mist);
  padding: clamp(56px, 9vh, 100px) 0;
}
.service-why-head {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(32px, 5vh, 56px);
  max-width: 720px;
}
.service-why-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.service-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.service-why-item {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
}
.service-why-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--accent-deep);
}
.service-why-item h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.service-why-item p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* Related services strip */
.service-related {
  background: var(--surface);
  padding: clamp(56px, 9vh, 100px) 0;
}
.service-related-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(28px, 4vh, 48px);
}
.service-related-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.service-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.service-related-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--dark);
  color: #fff;
  aspect-ratio: 4 / 5;
  transition: transform 380ms var(--ease-out);
}
.service-related-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.service-related-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 27, 44, 0.05) 0%, rgba(10, 27, 44, 0.25) 45%, rgba(10, 27, 44, 0.88) 100%);
  z-index: 1;
}
.service-related-card-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 22px;
  display: grid;
  gap: 6px;
}
.service-related-card-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.service-related-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0;
  letter-spacing: -0.01em;
}
.service-related-card-arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 1rem;
  color: #fff;
  transition: background 280ms ease, transform 380ms var(--ease-out);
}
.service-related-card:hover { transform: translateY(-4px); }
.service-related-card:hover img { transform: scale(1.05); opacity: 0.92; }
.service-related-card:hover .service-related-card-arrow {
  background: var(--accent);
  color: var(--dark);
  transform: translate(2px, -2px);
}

/* Bottom contact band — same NAP shown on every page for SEO consistency */
.service-contact-band {
  background: var(--dark);
  color: #fff;
  padding: clamp(56px, 9vh, 100px) 0;
}
.service-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.service-contact-grid h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.service-contact-grid h2 em { color: var(--accent); }
.service-contact-info {
  display: grid;
  gap: 18px;
}
.service-contact-row {
  display: grid;
  gap: 4px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.service-contact-row:last-child { border-bottom: 0; padding-bottom: 0; }
.service-contact-row .mono-label { color: rgba(255, 255, 255, 0.62); }
.service-contact-row a, .service-contact-row span:not(.mono-label) {
  font-size: 1.1rem;
  color: #fff;
}
.service-contact-row a:hover { color: var(--accent); }

/* Services hub /servicii */
.hub-hero {
  background: var(--dark);
  color: #fff;
  padding: clamp(140px, 22vh, 240px) 0 clamp(60px, 10vh, 120px);
  position: relative;
  overflow: hidden;
}
.hub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 30%, rgba(224, 160, 74, 0.18), transparent 55%),
    radial-gradient(circle at 15% 80%, rgba(45, 106, 156, 0.22), transparent 60%);
}
.hub-hero-inner { position: relative; z-index: 1; display: grid; gap: 28px; max-width: 920px; }
.hub-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.hub-hero h1 em { color: var(--accent); }
.hub-hero p {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: rgba(255, 255, 255, 0.78);
  max-width: 60ch;
  line-height: 1.6;
}

.hub-grid {
  background: var(--surface);
  padding: clamp(56px, 9vh, 100px) 0 clamp(80px, 12vh, 140px);
}
.hub-grid-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

/* 404 */
.notfound {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--surface);
  padding: 40px 20px;
  text-align: center;
}
.notfound-inner { display: grid; gap: 24px; max-width: 540px; }
.notfound-code {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(7rem, 18vw, 12rem);
  line-height: 0.85;
  color: var(--brand);
  letter-spacing: -0.04em;
}
.notfound h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  color: var(--ink);
}
.notfound p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}
.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 6px;
}

@media (max-width: 900px) {
  .service-body-grid { grid-template-columns: 1fr; }
  .service-side { position: static; order: -1; max-width: 480px; margin: 0 auto 40px; width: 100%; }
  .service-side-image { aspect-ratio: 16 / 11; }
  .service-contact-grid { grid-template-columns: 1fr; }
  .service-hero { min-height: 520px; }
}
@media (max-width: 540px) {
  .service-hero-actions { width: 100%; }
  .service-hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .service-related-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .service-related-card { aspect-ratio: 3 / 4; }
  .service-related-card-body { padding: 14px; }
  .service-related-card h3 { font-size: 1.05rem; }
  .service-related-card-arrow { width: 30px; height: 30px; top: 10px; right: 10px; font-size: 0.78rem; }
}