/* ==========================================================================
   MAXPHARMA BALTIJA — premium one-pager
   Sand editorial light theme + near-black dark act. Inter variable, full
   weight range. Motion: long expo eases, staggered reveals, no bounce.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --sand: #F4EFE6;
  --sand-deep: #ECE5D6;
  --ink: #231F20;
  --ink-soft: rgba(35, 31, 32, 0.64);
  --ink-faint: rgba(35, 31, 32, 0.38);
  --dark: #0E0908;
  --cream: #EDE0CE;
  --cream-soft: rgba(237, 224, 206, 0.62);
  --cream-faint: rgba(237, 224, 206, 0.34);
  --red: #C02E1E;
  --red-bright: #FF0000; /* Inteli Generics Nord — accent only, sparingly */
  --line: rgba(35, 31, 32, 0.14);
  --line-strong: rgba(35, 31, 32, 0.32);
  --line-cream: rgba(237, 224, 206, 0.16);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  --gutter: clamp(20px, 5vw, 72px);
  --section-pad: clamp(96px, 15vh, 190px);
  --radius-frame: 26px;

  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Night mode ----------
   The light-section tokens invert; already-dark sections stay near-black,
   so the whole page reads as one continuous dark surface. */
[data-theme="dark"] {
  --sand: #0E0908;
  --sand-deep: #171110;
  --ink: #EDE0CE;
  --ink-soft: rgba(237, 224, 206, 0.62);
  --ink-faint: rgba(237, 224, 206, 0.36);
  --line: rgba(237, 224, 206, 0.14);
  --line-strong: rgba(237, 224, 206, 0.34);
}

[data-theme="dark"] .kicker,
[data-theme="dark"] .display em { filter: brightness(1.35); }

[data-theme="dark"] .value-card:hover { background: rgba(237, 224, 206, 0.032); }

[data-theme="dark"] .form-panel { background: #181110; }

[data-theme="dark"] .grain { opacity: 0.055; }

/* Soft crossfade when the theme flips — the class is added only for the
   moment of the switch, so it never taxes scrolling. */
.theme-anim,
.theme-anim *,
.theme-anim *::before,
.theme-anim *::after {
  transition: background-color 0.55s var(--ease-out),
              color 0.55s var(--ease-out),
              border-color 0.55s var(--ease-out),
              filter 0.55s var(--ease-out) !important;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* Programmatic smooth scrolling handled by Lenis */
  -webkit-text-size-adjust: 100%;
}

/* ---------- Scrollbar ----------
   Fallback (no JS / no Lenis): slim native bar with a transparent track. */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(35, 31, 32, 0.34) transparent;
}
::-webkit-scrollbar { width: 11px; background: transparent; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(35, 31, 32, 0.3);
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: padding-box;
  min-height: 48px;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(35, 31, 32, 0.52); }
::-webkit-scrollbar-button { display: none; height: 0; }

/* Custom overlay scrollbar (desktop + Lenis): the native bar disappears
   completely — only a floating draggable pill remains. */
html.custom-scroll { scrollbar-width: none; }
html.custom-scroll::-webkit-scrollbar { display: none; width: 0; }

.scroll-pill {
  position: fixed;
  top: 0;
  right: 5px;
  width: 6px;
  height: 48px;
  border-radius: 100px;
  background: rgba(35, 31, 32, 0.34);
  z-index: 400;
  opacity: 0.55;
  cursor: grab;
  touch-action: none;
  transition: opacity 0.35s var(--ease-out),
              width 0.35s var(--ease-out),
              background-color 0.35s var(--ease-out);
}
.scroll-pill::before {
  /* generous invisible hit area */
  content: "";
  position: absolute;
  inset: -6px -8px;
}
.scroll-pill:hover,
.scroll-pill.is-dragging {
  opacity: 1;
  width: 9px;
}
.scroll-pill.is-dragging { cursor: grabbing; }

[data-theme="dark"] { scrollbar-color: rgba(237, 224, 206, 0.3) transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: rgba(237, 224, 206, 0.26); }
[data-theme="dark"] .scroll-pill { background: rgba(237, 224, 206, 0.34); }

body {
  font-family: var(--font);
  font-optical-sizing: auto;
  background: var(--sand);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 410;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--red); color: var(--sand); }

img, video, canvas, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

.nowrap { white-space: nowrap; }

section { scroll-margin-top: 84px; }

/* Skip link */
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 300;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--sand);
  font-size: 13px;
  font-weight: 560;
  border-radius: 100px;
  transform: translateY(-64px);
  transition: transform 0.4s var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* Grain overlay — static, near-subliminal */
.grain {
  position: fixed;
  inset: 0;
  z-index: 220;
  pointer-events: none;
  opacity: 0.042;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* ==========================================================================
   INTRO LOADER
   Covers the page while the hero frame sequence downloads + decodes, so the
   scroll-scrub only ever appears once it can run at full smoothness. Minimal
   on purpose (wordmark + thin progress line) so it paints and lifts fast.
   ========================================================================== */
html.is-loading, html.is-loading body { overflow: hidden; }

.intro-loader {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  background: var(--sand);
  opacity: 1;
  overflow: hidden;
  transform-origin: center center;
  /* On lift, the loader scales up, softens and fades — a "camera pushing
     through" zoom that hands off to the hero zooming in behind it. */
  transition: opacity 1.15s var(--ease-out),
              transform 1.4s var(--ease-out),
              filter 1.4s var(--ease-out),
              visibility 1.4s var(--ease-out);
}
.intro-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.32);
  filter: blur(8px);
}
/* The inner cluster drifts closer and fades a touch faster, reinforcing the
   push-through rather than a flat fade. */
.intro-loader.is-done .intro-loader-inner { transform: scale(1.1); opacity: 0; }
.intro-loader-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 0 24px;
  transform-origin: center center;
  transition: transform 1.25s var(--ease-out), opacity 0.7s var(--ease-out);
}

/* Aurora — three huge, saturated brand-colour blobs, each on its own
   distinct kind of motion (not three variations of the same drift), so they
   read as genuinely different rather than a single wash:
     1 · ORBIT  — loops a closed circular path, seamless (no alternate).
     2 · SWEEP  — one big diagonal corner-to-corner traverse, back and forth.
     3 · WOBBLE — an irregular 5-stop wander with its own scale pulse.
   Sized at ~3.5–4x viewport so the visible gradient falloff is always large
   relative to the screen; blur stays moderate so motion (not just colour)
   is legible. On lift the whole field brightens/sharpens as part of the
   hand-off into the hero. */
.intro-loader-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: blur(40px);
  opacity: 0.9;
  transition: opacity 1s var(--ease-out), filter 1.1s var(--ease-out);
}
.intro-loader.is-done .intro-loader-aurora {
  opacity: 1;
  filter: blur(24px) saturate(1.35);
}
.intro-loader-aurora span {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  mix-blend-mode: multiply;
  will-change: transform, opacity;
}
[data-theme="dark"] .intro-loader-aurora span { mix-blend-mode: screen; }

.intro-loader-aurora span:nth-child(1) {
  width: 150vw;
  height: 150vw;
  margin: -75vw 0 0 -75vw;
  background: radial-gradient(circle, rgba(192, 46, 30, 0.8) 0%, rgba(192, 46, 30, 0) 62%);
  animation: auroraOrbit 9s linear infinite;
}
.intro-loader-aurora span:nth-child(2) {
  width: 130vw;
  height: 130vw;
  margin: -65vw 0 0 -65vw;
  background: radial-gradient(circle, rgba(224, 168, 90, 0.8) 0%, rgba(224, 168, 90, 0) 64%);
  animation: auroraSweep 6.5s ease-in-out infinite alternate;
}
.intro-loader-aurora span:nth-child(3) {
  width: 118vw;
  height: 118vw;
  margin: -59vw 0 0 -59vw;
  background: radial-gradient(circle, rgba(139, 45, 27, 0.75) 0%, rgba(139, 45, 27, 0) 64%);
  animation: auroraWobble 11s ease-in-out infinite;
}

/* 1 · Orbit — closed loop, same start/end so it repeats with no snap. */
@keyframes auroraOrbit {
  0%   { transform: translate(-30%, -18%) scale(0.95); }
  25%  { transform: translate(16%, -30%) scale(1.08); }
  50%  { transform: translate(30%, 14%) scale(1); }
  75%  { transform: translate(-14%, 26%) scale(0.92); }
  100% { transform: translate(-30%, -18%) scale(0.95); }
}
/* 2 · Sweep — one long corner-to-corner traverse, back and forth. */
@keyframes auroraSweep {
  from { transform: translate(-38%, 30%) scale(0.9); }
  to   { transform: translate(38%, -32%) scale(1.2); }
}
/* 3 · Wobble — irregular wander + its own scale pulse, distinct rhythm
   from both the orbit and the sweep. */
@keyframes auroraWobble {
  0%   { transform: translate(0%, 0%) scale(0.85); }
  20%  { transform: translate(22%, -14%) scale(1.15); }
  45%  { transform: translate(-18%, -22%) scale(0.95); }
  70%  { transform: translate(-26%, 16%) scale(1.2); }
  90%  { transform: translate(12%, 22%) scale(0.9); }
  100% { transform: translate(0%, 0%) scale(0.85); }
}
[data-theme="dark"] .intro-loader-aurora span:nth-child(2) {
  background: radial-gradient(circle, rgba(237, 224, 206, 0.55) 0%, rgba(237, 224, 206, 0) 66%);
}

/* Cycling brand logos — Maxpharma and Inteli cross-fade while loading, a
   quiet nod to the partnership. Both are centred in one grid cell so they
   stack; opacity + subtle scale keyframes alternate them. */
.intro-loader-logos {
  display: grid;
  place-items: center;
  width: min(240px, 62vw);
  height: 64px;
}
.il-logo {
  grid-area: 1 / 1;
  opacity: 0;
  will-change: opacity, transform;
}
.il-max {
  height: clamp(46px, 6vw, 58px);
  width: auto;
  animation: ilCycleA 4.6s var(--ease-inout) infinite;
}
.il-inteli {
  width: min(210px, 56vw);
  height: clamp(38px, 5vw, 46px);
  /* Client asked for this mark white regardless of theme (was var(--ink),
     dark, for contrast against the light --sand loader background in light
     mode). A soft dark drop-shadow keeps it legible there instead. */
  color: #fff;
  filter: drop-shadow(0 1px 6px rgba(14, 9, 8, 0.22));
  animation: ilCycleB 4.6s var(--ease-inout) infinite;
}
@keyframes ilCycleA {
  0%, 38%   { opacity: 1; transform: scale(1); }
  50%, 88%  { opacity: 0; transform: scale(0.965); }
  100%      { opacity: 1; transform: scale(1); }
}
@keyframes ilCycleB {
  0%, 40%   { opacity: 0; transform: scale(0.965); }
  52%, 88%  { opacity: 1; transform: scale(1); }
  100%      { opacity: 0; transform: scale(0.965); }
}

.intro-loader-bar {
  position: relative;
  width: clamp(180px, 26vw, 240px);
  height: 2px;
  border-radius: 100px;
  background: var(--line);
  overflow: hidden;
}
.intro-loader-bar span {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--red);
  transition: transform 0.25s var(--ease-out);
}
.intro-loader-pct {
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); position: relative; }

.dark {
  background: var(--dark);
  color: var(--cream);
}

/* Kickers — small red index labels */
.kicker {
  font-size: 11.5px;
  font-weight: 640;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: clamp(22px, 3.5vh, 40px);
}
.kicker-dark { color: var(--red); filter: brightness(1.35); }

/* Type scale */
.display {
  font-size: clamp(1.85rem, 3.6vw + 0.6rem, 3.9rem);
  line-height: 1.14;
  font-weight: 340;
  letter-spacing: -0.026em;
  text-wrap: balance;
}
.display em {
  font-style: italic;
  font-weight: 260;
  color: var(--red);
}

.heading {
  font-size: clamp(1.7rem, 2.6vw + 0.5rem, 3.1rem);
  line-height: 1.12;
  font-weight: 330;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.3rem);
  line-height: 1.72;
  font-weight: 400;
  color: var(--ink-soft);
  max-width: 62ch;
}

.rule {
  height: 1px;
  background: var(--line);
  margin-block: clamp(28px, 4.5vh, 52px);
}
.rule-red {
  width: 72px;
  height: 2px;
  background: var(--red);
}

.section-head { margin-bottom: clamp(48px, 8vh, 96px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 560;
  letter-spacing: 0.01em;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.45s var(--ease-out),
              border-color 0.45s var(--ease-out),
              color 0.45s var(--ease-out),
              transform 0.45s var(--ease-out);
}
.btn:active { transform: scale(0.985); }

.btn-solid {
  background: var(--red);
  color: #FBF7EF;
  box-shadow: 0 0 0 rgba(192, 46, 30, 0);
  transition: background-color 0.45s var(--ease-out),
              transform 0.45s var(--ease-out),
              box-shadow 0.45s var(--ease-out);
}
.btn-solid:hover {
  background: #A5271A;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -12px rgba(192, 46, 30, 0.55);
}

.btn-ghost {
  border-color: rgba(237, 224, 206, 0.5);
  color: var(--cream);
  background: rgba(14, 9, 8, 0.12);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover {
  border-color: var(--cream);
  background: rgba(237, 224, 206, 0.12);
}

/* ==========================================================================
   NAV — floating glass island
   .site-nav is a fixed, full-width, transparent wrapper that only centers
   the island. .nav-inner is the actual bar: a rounded, blurred glass
   container that floats with a gap from the screen edges.
   ========================================================================== */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: clamp(12px, 1.6vw, 20px) clamp(14px, 3vw, 40px);
  color: var(--cream);
  pointer-events: none; /* only the island itself is interactive */
}

.nav-inner {
  pointer-events: auto;
  width: 100%;
  max-width: 1300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 11px 12px 11px clamp(20px, 2.4vw, 30px);
  border-radius: 100px;
  border: 1px solid rgba(237, 224, 206, 0.16);
  /* Subtle glass over the hero; the border + faint fill keep the island
     legible without a hard bar. Deepens once scrolled (body.nav-solid). */
  background: rgba(20, 14, 12, 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 44px -22px rgba(0, 0, 0, 0.5);
  transition: background-color 0.6s var(--ease-out),
              border-color 0.6s var(--ease-out),
              color 0.6s var(--ease-out),
              max-width 0.7s var(--ease-out),
              box-shadow 0.6s var(--ease-out);
}

body.nav-solid .site-nav { color: var(--ink); }
body.nav-solid .nav-inner {
  max-width: 1160px;
  background: rgba(244, 239, 230, 0.82);
  border-color: rgba(35, 31, 32, 0.1);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 20px 46px -24px rgba(35, 31, 32, 0.4);
}
[data-theme="dark"] body.nav-solid .site-nav { color: var(--cream); }
[data-theme="dark"] body.nav-solid .nav-inner {
  background: rgba(14, 9, 8, 0.72);
  border-color: rgba(237, 224, 206, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 46px -24px rgba(0, 0, 0, 0.6);
}

.nav-brand {
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -0.02em;
}
.nav-brand span {
  font-weight: 300;
  margin-left: 5px;
  opacity: 0.85;
}

.nav-links {
  display: flex;
  gap: clamp(18px, 3vw, 42px);
}
.nav-links a {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0.82;
  position: relative;
  padding-block: 4px;
  transition: opacity 0.35s var(--ease-out);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-cta {
  font-size: 13px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 100px;
  border: 1px solid var(--red);
  background: var(--red);
  color: #FBF7EF;
  white-space: nowrap;
  transition: background-color 0.45s var(--ease-out),
              border-color 0.45s var(--ease-out),
              transform 0.45s var(--ease-out),
              box-shadow 0.45s var(--ease-out);
}
.nav-cta:hover {
  background: #A5271A;
  border-color: #A5271A;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(192, 46, 30, 0.6);
}

/* Nav control cluster — language switch + theme toggle sharing one glass
   pill with a hairline divider between them. The whole pill flows inline:
   as the language switch unfolds, the glass container itself grows to wrap
   the extra buttons (it does NOT overlay/overflow), and because the cluster
   is the right-anchored group in the nav it unfurls *leftward* into the
   empty space — the CTA on its right never moves. */
.nav-controls {
  display: flex;
  align-items: center;
  height: 38px;
  /* Even inset on all sides — border(1) + padding(3) = 4px, and the 30px
     content box exactly fits the 30px pill, so the active pill sits 4px from
     the outline on top, bottom AND left. Balanced outline. */
  padding: 3px;
  gap: 3px;
  border: 1px solid currentColor;
  border-radius: 100px;
  background: rgba(128, 128, 128, 0.12);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 30px -18px rgba(0, 0, 0, 0.4);
}
.nav-controls-divider {
  width: 1px;
  height: 16px;
  flex: none;
  margin-inline: 2px;
  background: currentColor;
  opacity: 0.2;
}

/* LT / EN / RU switch — only the active language shows at rest; the other
   two collapse to zero width (max-width) and unfold on hover / focus / tap,
   growing the glass pill with them. */
.lang-switch {
  display: flex;
  align-items: center;
  height: 30px;
  /* No gap — the collapsed (zero-width) alternates would otherwise still
     contribute their flex gap, leaving phantom space beside the active pill
     and pushing it off-centre. Expanded buttons are separated by their own
     padding instead. */
  gap: 0;
}
.lang-btn {
  box-sizing: border-box;
  height: 30px;
  flex: none;
  font: inherit;
  font-size: 11px;
  font-weight: 640;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  max-width: 44px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  transition: background-color 0.4s var(--ease-out),
              color 0.4s var(--ease-out),
              opacity 0.3s var(--ease-out),
              max-width 0.45s var(--ease-out),
              padding 0.45s var(--ease-out);
}
.lang-btn:hover { opacity: 1; }
.lang-btn.is-active {
  opacity: 1;
  background: var(--red);
  color: #FBF7EF;
}
.lang-switch:not(:hover):not(:focus-within):not(.is-open) .lang-btn:not(.is-active),
.lang-switch.suppress-hover .lang-btn:not(.is-active) {
  /* suppress-hover forces the collapse the instant a language is picked,
     even while the pointer is still resting on the pill (plain :hover would
     otherwise keep it unfolded); cleared on the next pointerleave. */
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  pointer-events: none;
}

/* Mobile language picking now lives inside the unified hamburger menu
   (.nav-collapse-group, see the NAV — MOBILE MENU section) as a plain
   stacked list — no separate collapsed-pill dropdown of its own anymore. */

/* Theme toggle — moon / sun crossfade; sits inside .nav-controls now, so
   it has no ring of its own */
.theme-toggle {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.45s var(--ease-out),
              color 0.45s var(--ease-out),
              transform 0.45s var(--ease-out);
}
.theme-toggle:hover { transform: rotate(12deg); }
.theme-toggle svg {
  position: absolute;
  width: 15px;
  height: 15px;
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }

/* ==========================================================================
   HERO — video loop → canvas scrub → framed settle
   ========================================================================== */
.hero { position: relative; background: var(--sand); }

.hero-pin {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

/* Media stack: video below, canvas above (crossfaded by JS) */
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 68% 30%, #2A211D 0%, var(--dark) 62%);
  border-radius: 0px;
  transform-origin: center center;
  will-change: transform, border-radius;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  will-change: transform;
  /* Resting state before the first frame is drawn: soft-focus and dimmed,
     so whatever appears first — placeholder or real footage — arrives as
     a deliberate focus-pull reveal instead of an abrupt pop. Only filter/
     opacity animate here; GSAP owns the canvas's scale (breathing tween),
     so transform is left alone to avoid fighting it. */
  opacity: 0;
  filter: blur(18px);
  transition: opacity 1.1s var(--ease-out), filter 1.3s var(--ease-out);
}
.hero-media.is-ready .hero-canvas {
  opacity: 1;
  filter: blur(0);
}

/* Contrast veil for hero copy; JS fades it out during the scrub */
.hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(14, 9, 8, 0.38) 0%, rgba(14, 9, 8, 0) 24%),
    linear-gradient(to top, rgba(14, 9, 8, 0.68) 0%, rgba(14, 9, 8, 0.18) 42%, rgba(14, 9, 8, 0.12) 100%);
}

/* Caption revealed inside the settled frame — frosted glass pill */
.hero-caption {
  position: absolute;
  left: clamp(22px, 3.5vw, 48px);
  bottom: clamp(20px, 3.2vw, 42px);
  z-index: 3;
  color: var(--cream);
  font-size: 12px;
  font-weight: 540;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 11px 22px;
  background: linear-gradient(160deg, rgba(237, 224, 206, 0.12), rgba(14, 9, 8, 0.46));
  border: 1px solid rgba(237, 224, 206, 0.18);
  border-radius: 100px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 30px -16px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  opacity: 0;
}

.hero-copy {
  position: relative;
  z-index: 4;
  padding: 0 var(--gutter) clamp(56px, 10vh, 120px);
  max-width: 980px;
  color: var(--cream);
}

/* Glass badge — the hero's one deliberate glassmorphism moment: a frosted
   chip floating over the footage, catching the light behind it. */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: clamp(22px, 3.4vh, 38px);
  padding: 10px 20px 10px 15px;
  border-radius: 100px;
  background: linear-gradient(155deg, rgba(237, 224, 206, 0.16), rgba(237, 224, 206, 0.045));
  border: 1px solid rgba(237, 224, 206, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 34px -16px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
.hero-kicker .tick {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(192, 46, 30, 0.2);
  flex: none;
}

.hero-title {
  font-size: clamp(2.6rem, 6.4vw + 0.6rem, 6.6rem);
  line-height: 1.02;
  font-weight: 240;
  letter-spacing: -0.032em;
  color: #F6EEDF;
  text-wrap: balance;
}

.hero-sub {
  margin-top: clamp(18px, 3vh, 30px);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.22rem);
  line-height: 1.66;
  font-weight: 380;
  color: var(--cream-soft);
  max-width: 54ch;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(26px, 4.5vh, 44px);
}

/* Changing information keyed to the scrub — large unframed editorial type
   set in ink directly over the light footage, filling the left half. */
.scrub-info {
  position: absolute;
  z-index: 3;
  inset: 0 auto 0 0;
  width: min(54vw, 760px);
  pointer-events: none;
}
.scrub-info-item {
  position: absolute;
  left: var(--gutter);
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #FFFFFF;
  text-shadow: 0 1px 28px rgba(14, 9, 8, 0.22);
  opacity: 0;
  visibility: hidden;
}
.scrub-num {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 30px);
  margin-bottom: clamp(18px, 3.2vh, 36px);
}
.scrub-num b {
  font-size: clamp(4.2rem, 8.5vw, 8rem);
  font-weight: 120;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: rgba(255, 255, 255, 0.55);
}
.scrub-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
  transform-origin: left;
}
.scrub-text {
  font-size: clamp(1.9rem, 2.8vw + 0.8rem, 3.7rem);
  line-height: 1.12;
  font-weight: 290;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.scrub-text em {
  font-style: italic;
  font-weight: 400;
  color: var(--red);
}

/* Scroll hint */
.hero-hint {
  position: absolute;
  right: clamp(22px, 4vw, 56px);
  bottom: clamp(28px, 5vh, 52px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--cream-soft);
  font-size: 10.5px;
  font-weight: 580;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hint-line {
  width: 1px;
  height: 56px;
  background: var(--cream-faint);
  position: relative;
  overflow: hidden;
}
.hint-line::after {
  content: "";
  position: absolute;
  left: 0; top: -40%;
  width: 100%;
  height: 40%;
  background: var(--cream);
  animation: hintDrop 2.4s var(--ease-inout) infinite;
}
@keyframes hintDrop {
  0%   { top: -40%; }
  60%, 100% { top: 110%; }
}

/* ==========================================================================
   01 · APIE MUS
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 64px);
}
.about .section-meta { padding-top: 10px; }
/* All About body copy shares one size — the lede no longer reads larger
   than the mission paragraphs that follow it. */
.about-body .lede {
  margin-top: 0;
  font-size: clamp(1rem, 0.3vw + 0.9rem, 1.12rem);
  line-height: 1.75;
  max-width: 66ch;
}

.about-mission {
  margin-top: clamp(32px, 5vh, 56px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 66ch;
}
.about-mission p {
  font-size: clamp(1rem, 0.3vw + 0.9rem, 1.12rem);
  line-height: 1.75;
  color: var(--ink-soft);
}

.about-segments { margin-top: clamp(36px, 5vh, 60px); }
.segments-label {
  font-size: 12px;
  font-weight: 640;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 18px;
}
.segment-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.segment-pill {
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 11px 22px;
  font-size: 13.5px;
  font-weight: 540;
  letter-spacing: 0.005em;
  color: var(--ink);
  transition: border-color 0.45s var(--ease-out), background-color 0.45s var(--ease-out);
}
.segment-pill:hover {
  border-color: var(--red);
  background: rgba(192, 46, 30, 0.06);
}

/* ==========================================================================
   02 · VERTYBĖS
   ========================================================================== */
.values { padding-top: 0; }

.values-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.value-card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(28px, 3vw, 44px) clamp(22px, 2.4vw, 36px) clamp(34px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  background: transparent;
  transition: background-color 0.55s var(--ease-out);
}
.value-card::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.65s var(--ease-out);
}
.value-card:hover { background: rgba(35, 31, 32, 0.028); }
.value-card:hover::before { transform: scaleX(1); }

.value-index {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

.value-card h3 {
  font-size: clamp(1.25rem, 1vw + 0.9rem, 1.6rem);
  font-weight: 480;
  letter-spacing: -0.018em;
  /* Fixed offset from the index (not auto) — titles land on one line across
     cards regardless of how long each card's description runs below. */
}

.value-card p {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--ink-soft);
}

/* ==========================================================================
   03 · SKAIČIAI (dark)
   ========================================================================== */
.stats {
  /* Tighter than the shared section rhythm so the whole row lands in one
     viewport when the nav jumps straight to this section. */
  padding-block: clamp(56px, 8vh, 112px);
}
.stats .container { max-width: 1560px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-cream);
  border-block: 1px solid var(--line-cream);
}

.stat {
  background: var(--dark);
  padding: clamp(20px, 2vw, 32px) clamp(16px, 1.6vw, 26px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(18px, 3vh, 36px);
  min-height: clamp(150px, 18vh, 200px);
  min-width: 0;
}

.stat-label {
  font-size: clamp(10.5px, 0.35vw + 9.5px, 12px);
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-soft);
  max-width: 22ch;
}
.stat-sub {
  display: block;
  margin-top: 6px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--cream-faint);
  font-style: italic;
}

.stat-value {
  font-size: clamp(1.9rem, 1.9vw + 1rem, 3.4rem);
  font-weight: 180;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==========================================================================
   04 · SERTIFIKATAI (dark)
   ========================================================================== */
.certs { padding-top: clamp(48px, 7vh, 96px); }
/* Same container width as the numbers above, so the cert text's left edge
   lines up exactly under the first stat. */
.certs .container { max-width: 1560px; }

.cert-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}

.cert-text { text-align: left; }
.cert-text .kicker { margin-bottom: 16px; }
.cert-title {
  font-size: clamp(1.5rem, 1.8vw + 0.6rem, 2.4rem);
  font-weight: 330;
  letter-spacing: -0.02em;
}
.cert-sub {
  margin-top: 14px;
  font-size: clamp(1rem, 0.3vw + 0.9rem, 1.12rem);
  line-height: 1.72;
  color: var(--cream-soft);
  max-width: 56ch;
}

/* Designed certification stamp — a bordered glass plaque on the right,
   in place of a client logo we don't have. */
.cert-stamp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(24px, 2.4vw, 34px) clamp(28px, 3vw, 42px);
  min-width: clamp(230px, 24vw, 320px);
  border: 1px solid var(--line-cream);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(237, 224, 206, 0.07), rgba(237, 224, 206, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 50px -30px rgba(0, 0, 0, 0.6);
}
.cert-stamp-gdp {
  font-size: clamp(2.8rem, 3.6vw, 3.8rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 0.9;
  color: var(--red);
  filter: brightness(1.22);
}
.cert-stamp-full {
  font-size: clamp(0.92rem, 0.9vw, 1.08rem);
  font-weight: 640;
  letter-spacing: 0.03em;
  line-height: 1.24;
  text-transform: uppercase;
  color: var(--red);
  filter: brightness(1.22);
}
.cert-stamp-line {
  width: 100%;
  height: 1px;
  margin-block: 3px;
  background: var(--line-cream);
}
.cert-stamp-certified {
  font-size: 11.5px;
  font-weight: 560;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* ==========================================================================
   05 · VEIKLOS SRITYS — swipeable horizontal band (dark)
   Native overflow-x scroll: touch/trackpad swipe and click-drag move the
   cards, but the mouse wheel and normal page scroll are left completely
   untouched — no scroll hijacking, the page just scrolls past the section.
   ========================================================================== */
.capabilities { position: relative; overflow: hidden; }

.cap-pin {
  display: flex;
  flex-direction: column;
  padding-block: clamp(72px, 10vh, 120px) clamp(48px, 7vh, 84px);
  gap: clamp(36px, 6vh, 72px);
}

.cap-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cap-head .kicker { margin-bottom: 18px; }
/* Animated swipe indicator — a small track with a dot that glides left to
   right on a loop, so it reads as "drag horizontally" at a glance. Echoes
   the hero's animated scroll hint, but on the horizontal axis. */
.cap-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
}
.cap-hint-label {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-soft);
}
.cap-hint-track {
  position: relative;
  width: 54px;
  height: 12px;
  border-radius: 100px;
  overflow: hidden;
}
.cap-hint-track::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  transform: translateY(-50%);
  background: var(--cream-faint);
}
.cap-hint-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  filter: brightness(1.25);
  box-shadow: 0 0 0 4px rgba(192, 46, 30, 0.18);
  transform: translate(0, -50%);
  animation: capSwipe 2.4s var(--ease-inout) infinite;
}
@keyframes capSwipe {
  0%, 8%    { transform: translate(0, -50%); opacity: 0; }
  20%       { opacity: 1; }
  80%       { opacity: 1; }
  92%, 100% { transform: translate(42px, -50%); opacity: 0; }
}

.cap-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cap-viewport::-webkit-scrollbar { display: none; }
.cap-viewport.is-dragging { cursor: grabbing; user-select: none; }

.cap-track {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 2vw, 28px);
  width: max-content;
  padding-inline: var(--gutter);
}

.cap-panel {
  width: clamp(300px, 42vw, 560px);
  min-height: clamp(300px, 42vh, 420px);
  border: 1px solid var(--line-cream);
  border-radius: 22px;
  padding: clamp(26px, 2.6vw, 44px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(150deg, rgba(237, 224, 206, 0.045) 0%, rgba(237, 224, 206, 0) 55%);
  transition: border-color 0.55s var(--ease-out);
}
.cap-panel:hover { border-color: rgba(237, 224, 206, 0.36); }

.cap-index {
  font-size: clamp(2.6rem, 4vw, 4.2rem);
  font-weight: 140;
  letter-spacing: -0.03em;
  color: var(--cream-faint);
  line-height: 1;
}

.cap-panel h3 {
  /* Content flows from the top of the card, not pinned to the bottom. */
  margin-top: clamp(20px, 2vw, 30px);
  font-size: clamp(1.5rem, 1.6vw + 0.7rem, 2.3rem);
  font-weight: 380;
  letter-spacing: -0.022em;
  line-height: 1.15;
  text-wrap: balance;
}

.cap-panel p {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.66;
  color: var(--cream-soft);
  max-width: 42ch;
}

.cap-progress {
  height: 1px;
  background: var(--line-cream);
  position: relative;
}
.cap-progress span {
  position: absolute;
  inset: 0;
  background: var(--red);
  filter: brightness(1.3);
  transform: scaleX(0);
  transform-origin: left;
}

/* ==========================================================================
   06 · KONTAKTAI
   ========================================================================== */
.contacts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 64px);
  border-top: 1px solid var(--line);
  padding-top: clamp(36px, 6vh, 64px);
}

.contact-block h3 {
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}

.contact-block p {
  font-size: clamp(1.02rem, 0.4vw + 0.9rem, 1.18rem);
  line-height: 1.6;
  font-weight: 420;
}
.contact-block p + p { margin-top: 12px; }

.contact-note {
  font-size: 13.5px !important;
  color: var(--ink-faint);
  font-weight: 400 !important;
  max-width: 30ch;
}

.contact-link {
  position: relative;
  transition: color 0.35s var(--ease-out);
}
.contact-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--line-strong);
  transition: background-color 0.35s var(--ease-out);
}
.contact-link:hover { color: var(--red); }
.contact-link:hover::after { background: var(--red); }

/* ==========================================================================
   07 · SUSISIEKITE — form on dark panel
   ========================================================================== */
.contact-form { padding-top: 0; }

.form-panel {
  background: var(--dark);
  color: var(--cream);
  border-radius: var(--radius-frame);
  padding: clamp(36px, 5vw, 84px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 5vw, 88px);
}

.form-intro .heading { margin-bottom: 20px; }
.form-note {
  font-size: 15px;
  line-height: 1.7;
  color: var(--cream-soft);
  max-width: 40ch;
}
.form-note a {
  color: var(--cream);
  border-bottom: 1px solid var(--cream-faint);
  transition: border-color 0.35s var(--ease-out);
}
.form-note a:hover { border-color: var(--cream); }

.form { display: flex; flex-direction: column; gap: 28px; }

.field { display: flex; flex-direction: column; gap: 9px; }

.field label {
  font-size: 11.5px;
  font-weight: 580;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-soft);
}

.field input[type="text"],
.field input[type="email"],
.field textarea {
  font: inherit;
  font-size: 16px;
  font-weight: 420;
  color: var(--cream);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(237, 224, 206, 0.28);
  padding: 10px 2px 12px;
  border-radius: 0;
  transition: border-color 0.4s var(--ease-out);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(237, 224, 206, 0.3); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--red-bright);
}
.field textarea { resize: vertical; min-height: 96px; }

/* GDPR consent */
.field-consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  margin-top: 4px;
}
.field-consent input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  border: 1px solid rgba(237, 224, 206, 0.4);
  border-radius: 5px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.field-consent input[type="checkbox"]::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--dark);
  border-bottom: 2px solid var(--dark);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.3s var(--ease-out);
  margin-top: -2px;
}
.field-consent input[type="checkbox"]:checked {
  background: var(--cream);
  border-color: var(--cream);
}
.field-consent input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }

.field-consent label {
  font-size: 14px;
  font-weight: 420;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cream-soft);
  cursor: pointer;
}
.field-consent .privacy-link,
.footer-base .privacy-link {
  color: var(--cream);
  border-bottom: 1px solid var(--cream-faint);
  transition: border-color 0.35s var(--ease-out);
}
.field-consent .privacy-link:hover { border-color: var(--cream); }
.field-consent .req { color: var(--red-bright); margin-left: 3px; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.btn-submit { padding: 16px 38px; }
.form-status {
  font-size: 13.5px;
  color: var(--cream-soft);
  font-style: italic;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--dark);
  color: var(--cream);
  padding-top: clamp(56px, 8vh, 96px);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  padding-bottom: clamp(44px, 7vh, 80px);
}

/* Maxpharma logo — full-colour, shown as-is (no backing plaque) per the
   client's note to keep it coloured. */
.mp-logo {
  height: 52px;
  width: auto;
}

.footer-tag {
  margin-top: 22px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--cream-soft);
  max-width: 34ch;
}
.footer-tag strong { color: var(--cream); font-weight: 540; }

/* Inteli logo — single-colour source, recoloured to cream via a mask so it
   sits naturally on the dark footer (and would flip with the theme). */
.footer-partner {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-partner-label {
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.inteli-logo {
  display: block;
  width: 148px;
  /* Footer is a dark section, so the mark reads in cream. */
  color: var(--cream);
  opacity: 0.9;
  transition: opacity 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.inteli-logo svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 100;
}
.inteli-logo:hover { opacity: 1; color: #fff; }

.footer-col h4 {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-bottom: 16px;
}
.footer-col p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--cream-soft);
}
.footer-col a { transition: color 0.35s var(--ease-out); }
.footer-col a:hover { color: var(--cream); }

.footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 26px;
  border-top: 1px solid var(--line-cream);
  font-size: 13px;
  color: var(--cream-faint);
}
.footer-base .privacy-link {
  color: var(--cream-soft);
  border-bottom-color: transparent;
}
.footer-base .privacy-link:hover {
  color: var(--cream);
  border-bottom-color: var(--cream-faint);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stat:last-child { grid-column: span 2; }
  .form-panel { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:last-child { grid-column: span 2; }
}

@media (max-width: 820px) {
  .scrub-info { width: 86vw; }
  .about-grid { grid-template-columns: 1fr; gap: 8px; }
  .contacts-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .cap-panel { width: min(78vw, 480px); }
  .hero-hint { display: none; }
  .cert-row { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); }
  .cert-stamp { justify-self: start; }
}

/* ==========================================================================
   NAV — MOBILE MENU
   .nav-collapse-group wraps .nav-links + .nav-actions. At desktop/tablet
   widths it's `display:contents` — invisible for layout, so .nav-inner's
   flex row treats .nav-links/.nav-actions as direct children exactly as
   before (zero effect above 940px). Below 940px it becomes the actual
   collapsible panel, toggled by .nav-menu-toggle (a hamburger that morphs
   to a close ×) — one shared set of elements, nothing duplicated. The
   language picker's own is-open dropdown-from-a-pill (see .lang-switch
   above) only matters above 940px; inside this panel every language just
   shows plainly, stacked, since the whole panel is already the "expanded"
   surface.
   ========================================================================== */
.nav-collapse-group { display: contents; }

.nav-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  flex: none;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nav-menu-toggle-line {
  display: block;
  width: 19px;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.45s var(--ease-inout),
              opacity 0.3s var(--ease-out);
}
.site-nav.menu-open .nav-menu-toggle-line:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.site-nav.menu-open .nav-menu-toggle-line:nth-child(2) { opacity: 0; }
.site-nav.menu-open .nav-menu-toggle-line:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-menu-toggle { display: flex; }

  /* The pill morphs into a tall glass card that grows straight down from
     itself — same "expands from the pill" motion the language switch used,
     now driving the whole nav. Glass tint flips from the dark brand tone
     to a soft white/frosted one (client-requested) once open, since the
     panel now needs to read as neutral chrome, not part of the hero.
     Collapsed padding is tightened here too — with only the brand and the
     hamburger in the row, the default desktop padding (sized for the
     taller nav-controls pill) read too thick/tall. */
  .nav-inner {
    flex-wrap: wrap;
    align-items: center;
    /* Desktop's 24px row-gap still applied between the top row and the
       (0-height-when-collapsed) panel row once it wraps onto its own
       line — dead space that made the collapsed pill measurably taller
       than its actual content. The panel's own margin-top (below) handles
       spacing once open instead. */
    gap: 0;
    padding-block: 8px;
    transition: background-color 0.6s var(--ease-out),
                border-color 0.6s var(--ease-out),
                border-radius 0.6s var(--ease-inout),
                color 0.6s var(--ease-out),
                box-shadow 0.6s var(--ease-out),
                max-width 0.7s var(--ease-out),
                padding-block 0.6s var(--ease-inout);
  }
  .site-nav.menu-open .nav-inner {
    align-items: flex-start;
    padding-block: 11px;
    border-radius: 28px;
    color: var(--ink);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.66));
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 30px 60px -22px rgba(20, 14, 12, 0.4);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
  }
  /* Dark theme: the panel gets a dark glass instead of inverting to white
     (client-reported bug — it previously stayed white even in dark mode).
     Same structure as the light variant, cream-on-dark instead of
     ink-on-white; var(--line)/currentColor-based dividers below already
     adapt automatically once `color` flips here. */
  [data-theme="dark"] .site-nav.menu-open .nav-inner {
    color: var(--cream);
    background: linear-gradient(165deg, rgba(32, 23, 21, 0.94), rgba(14, 9, 8, 0.88));
    border-color: rgba(237, 224, 206, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -22px rgba(0, 0, 0, 0.65);
  }

  .nav-menu-toggle { width: 34px; height: 34px; }

  .nav-collapse-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    order: 3;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    gap: 4px;
    transition: max-height 0.55s var(--ease-inout),
                opacity 0.4s var(--ease-out),
                margin-top 0.55s var(--ease-inout);
  }
  .site-nav.menu-open .nav-collapse-group {
    max-height: 72vh;
    opacity: 1;
    overflow-y: auto;
    margin-top: 18px;
    padding-bottom: 4px;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 10px;
    /* currentColor via border + a token, not a fixed ink rgba — so this
       reads correctly whether the open panel is the light or dark glass
       variant above, instead of a barely-visible hairline in dark mode. */
    border-bottom: 1px solid var(--line);
    margin-bottom: 10px;
  }
  .nav-links a {
    padding: 11px 4px;
    font-size: 15px;
  }
  .nav-links a::after { display: none; } /* the underline-on-hover cue reads oddly full-width; rely on opacity only */

  .nav-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .nav-controls {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0;
    border: none;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .nav-controls-divider {
    width: 100%;
    height: 1px;
    margin-inline: 0;
  }

  .lang-switch {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
  }
  /* Inside the open panel every language is always visible and full-width
     — the collapse-to-active-pill behavior (hover/hidden others) is a
     desktop-only affordance and doesn't apply once we're already inside
     the expanded menu. !important because the desktop collapse rule
     (.lang-switch:not(:hover):not(:focus-within):not(.is-open)
     .lang-btn:not(.is-active)) is more specific than a 3-class selector
     can beat on its own — it stacks four :not() pseudo-classes on top of
     two real classes. */
  .site-nav.menu-open .lang-btn {
    max-width: none !important;
    width: 100%;
    height: 40px;
    padding: 0 14px !important;
    justify-content: flex-start;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .theme-toggle { align-self: flex-start; }

  .nav-cta {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 4px;
  }
}

@media (max-width: 560px) {
  .values-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat:last-child { grid-column: auto; }
  .cert-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .btn { width: 100%; justify-content: center; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .form-actions { align-items: stretch; flex-direction: column; }
}

/* ---------- Phone polish ---------- */
@media (max-width: 600px) {
  /* Tighter vertical rhythm so a one-pager isn't an endless mobile scroll. */
  :root { --section-pad: clamp(68px, 11vh, 104px); }

  /* Editorial scrub captions scaled for the phone so they don't overrun. */
  .scrub-info { width: 90vw; }
  .scrub-num b { font-size: clamp(3rem, 15vw, 4.2rem); }
  .scrub-text { font-size: clamp(1.45rem, 6.4vw, 2rem); }
  .scrub-num { margin-bottom: 16px; gap: 16px; }

  .hero-copy { padding-bottom: clamp(40px, 12vh, 88px); }
  .hero-title { font-size: clamp(2.3rem, 10vw, 3rem); }

  /* Hierarchy pass: at this width the partner badge was wrapping to two
     lines and reading with almost as much weight as the headline itself
     (both roughly the same visual "block" size), and the subtitle plus
     two equal-weight buttons piled up right under it — four competing
     blocks before the eye had settled on anything. Quiet the badge down
     to a small tag, tighten the subtitle, and drop the secondary CTA's
     button-shaped chrome so only ONE solid red button remains the clear
     next action — "Get in touch" becomes a plain link underneath it. */
  .hero-kicker {
    font-size: 9.5px;
    letter-spacing: 0.13em;
    gap: 8px;
    padding: 7px 14px 7px 11px;
    margin-bottom: clamp(14px, 2.6vh, 22px);
  }
  .hero-kicker .tick { width: 5px; height: 5px; box-shadow: 0 0 0 3px rgba(192, 46, 30, 0.2); }

  .hero-sub {
    margin-top: 12px;
    font-size: 0.94rem;
    line-height: 1.56;
    max-width: 40ch;
  }

  .hero-ctas { gap: 4px; margin-top: 20px; }
  .hero-ctas .btn-ghost {
    background: transparent;
    border-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    font-weight: 520;
    text-decoration: underline;
    text-decoration-color: rgba(237, 224, 206, 0.4);
    text-underline-offset: 3px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .hero-ctas .btn-ghost:hover { background: transparent; }

  /* Give the cap cards a little more of the next one peeking as a swipe cue. */
  .cap-panel { width: min(82vw, 420px); min-height: clamp(280px, 56vh, 360px); }
  .cap-head { align-items: flex-start; }

  .footer-base { justify-content: flex-start; }
}

@media (max-width: 380px) {
  .nav-brand { font-size: 15.5px; }
  .hero-title { font-size: clamp(2.1rem, 9.4vw, 2.6rem); }
}

/* ==========================================================================
   REDUCED MOTION — static fallback (scrub disabled by JS as well)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

/* JS adds .no-motion when prefers-reduced-motion: the hero settles as a
   static framed visual and the capabilities band stacks vertically. */
body.no-motion .hero-pin { height: auto; min-height: 92svh; padding-top: 76px; }
body.no-motion .hero-media {
  border-radius: var(--radius-frame);
  inset: 76px var(--gutter) auto;
  height: min(58vh, 520px);
  position: relative;
  inset: auto;
  margin-inline: var(--gutter);
}
body.no-motion .hero-pin {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 40px;
}
body.no-motion .hero-copy { position: static; padding-top: 24px; }
body.no-motion .hero-copy,
body.no-motion .hero-sub,
body.no-motion .hero-title { color: var(--ink); }
/* The glass kicker is tuned for the dark video backdrop; in the reduced-
   motion fallback it sits on the light page background instead, so it
   needs an ink-tinted glass treatment rather than the cream-tinted one.
   (Dark theme's sand token is itself near-black, so no-motion + dark
   theme is still a dark backdrop — it keeps the original cream-tinted glass.) */
body.no-motion .hero-kicker {
  color: var(--ink);
  background: linear-gradient(155deg, rgba(35, 31, 32, 0.07), rgba(35, 31, 32, 0.02));
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 24px -16px rgba(35, 31, 32, 0.3);
}
[data-theme="dark"] body.no-motion .hero-kicker {
  background: linear-gradient(155deg, rgba(237, 224, 206, 0.16), rgba(237, 224, 206, 0.045));
  border-color: rgba(237, 224, 206, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 34px -16px rgba(0, 0, 0, 0.55);
}
body.no-motion .hero-veil { display: none; }
body.no-motion .hero-hint { display: none; }
body.no-motion .btn-ghost {
  border-color: var(--line-strong);
  color: var(--ink);
  background: none;
}
body.no-motion .cap-pin { min-height: 0; }
body.no-motion .cap-viewport { overflow: visible; cursor: auto; }
body.no-motion .cap-track {
  flex-direction: column;
  width: auto;
  padding-inline: var(--gutter);
}
body.no-motion .cap-panel { width: 100%; min-height: 0; gap: 20px; }
body.no-motion .cap-panel h3 { margin-top: 0; }
body.no-motion .cap-progress { display: none; }
body.no-motion .cap-hint { display: none; }
body.no-motion .hero-caption { opacity: 1; }
body.no-motion .scrub-info { display: none; }

/* ---------- Contact form: real validation/status states (added for the
   live contact form — the prototype's fake "demo" submit needed none) ---------- */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-bottom-color: var(--red-bright);
}
.form-status.is-error {
  color: var(--red-bright);
  font-style: normal;
}
.form-status.is-success {
  color: var(--cream);
  font-style: normal;
}

/* Browser autofill (Chrome/Edge/Safari) paints its own yellow/white background
   and dark text over our inputs, which reads terribly on the dark contact-form
   panel. The autofill BG can't be turned off, but a long inset shadow of our
   own colour paints over it, and -webkit-text-fill-color forces the text back
   to cream. NOTE: the dropdown suggestion popup itself (the "sign in with
   Google" chip that appears next to filled fields) is native browser UI and
   cannot be styled by the page — this only fixes the input's own appearance. */
.form input:-webkit-autofill,
.form input:-webkit-autofill:hover,
.form input:-webkit-autofill:focus,
.form textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--cream);
  -webkit-box-shadow: 0 0 0 1000px var(--dark) inset;
  caret-color: var(--cream);
  transition: background-color 5000s ease-in-out 0s;
}

/* ---------- Cookie consent banner ----------
   Fixed bottom bar, slides up on reveal. Stays out of the DOM's paint path
   via [hidden] until JS decides to show it (see initCookieBanner() and the
   pre-paint MP_COOKIE_CONSENTED check in index.php's <head>), then the
   .is-visible class drives the actual slide-in transition. */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 210;
  padding: clamp(14px, 2.4vw, 22px) var(--gutter);
  background: var(--dark);
  color: var(--cream);
  border-top: 1px solid var(--line-cream);
  box-shadow: 0 -18px 44px -22px rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 0.5s var(--ease-out);
}
.cookie-banner.is-visible { transform: translateY(0); }

.cookie-banner-inner {
  max-width: 1360px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 32px);
  flex-wrap: wrap;
}
.cookie-banner-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--cream-soft);
  max-width: 72ch;
  flex: 1 1 320px;
}
.cookie-banner-text .privacy-link {
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(237, 224, 206, 0.4);
}
.cookie-banner-text .privacy-link:hover { text-decoration-color: var(--cream); }

.cookie-banner-accept {
  flex-shrink: 0;
  padding: 11px 26px;
  font-size: 13px;
}

@media (max-width: 640px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-banner-accept { width: 100%; justify-content: center; }
}