/* ============================================================
   STRĀVA — style.css (dark mode, brand colors)
   ============================================================
   DESIGN TOKENS — the control panel for the whole site.
   Every color below is extracted from the actual Strāva logo
   files, so the page and the brand always match.
   ============================================================ */
:root {
  /* Backgrounds — built from the brand's ember-black (#230000) */
  --bg:      #160300;   /* page background (darker than the brand square) */
  --surface: #230000;   /* the exact dark from the logo icon — cards, panels */
  --raised:  #2e0800;   /* slightly lighter — hover states, borders */

  /* Text */
  --ink:   #F5EDE8;     /* main text — warm off-white, not pure white */
  --muted: #B8A69C;     /* secondary text — warm gray */

  /* Brand accents — straight from the logo gradients */
  --accent:      #ff5c00;                                   /* primary orange */
  --accent-hot:  #ed2700;                                   /* deep red-orange */
  --grad-btn:    linear-gradient(135deg, #ff5c00, #ed2700); /* buttons */
  --grad-bolt:   linear-gradient(90deg, #ffb800, #ff5c00);  /* the bolt highlight: yellow → orange */

  --line: rgba(255, 92, 0, 0.14);  /* thin divider lines — orange at 14% */

  --maxw: 1080px;
}

/* Universal reset — start from a clean slate */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* The hidden attribute must always win, even over our own display rules.
   (Without this, `.field { display: block }` would override it.) */
[hidden] { display: none !important; }

/* ============================================================
   PAGE TRANSITIONS — the "current sweep"
   ============================================================
   Uses the native View Transitions API: the browser animates the
   navigation itself, so there is NO delay added before the new page
   loads. Works in Chrome/Edge 126+ and Safari 18.2+; Firefox simply
   navigates normally (nothing breaks).

   Because every page links this same stylesheet, opting in once here
   enables it across the whole site.
   ============================================================ */
/* NOTE: we deliberately do NOT use the View Transitions API here.
   During a cross-document transition the browser paints a frozen snapshot
   of the new page taken at its first render — the instant the bolt is
   still invisible — so the charge was being swallowed and the bolt never
   appeared when moving between pages. The black curtain below already
   provides the transition, so the browser one is redundant. */

/* ---------- INTRO CURTAIN: black → bolt charge → reveal ----------
   An OPAQUE near-black sheet covers the page on load. The bolt strikes on
   that black, then the sheet lifts to reveal the site. Sequence:

     0–155ms    solid black, bolt strikes in and the blur clears
     155–950ms  bolt HOLDS sharp at full strength — the beat that has to be
                long enough to actually read the mark. Do not shorten this;
                it was 270ms and registered as a smear rather than a logo.
     950–1090ms bolt blurs back out and clears
     1090–1700ms sheet fades out — the site fades in behind it

   Total 1700ms. If you change it, change all three animations below AND the
   backstop timeout in script.js, which must outlast the whole sequence.

   Runs in every browser, so Firefox gets the same intro even without
   cross-document view transitions. */
.page-charge {
  position: fixed; inset: 0;
  z-index: 9998;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: #0B0200;              /* opaque — hides the page underneath */
  animation: curtain-lift 1700ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.page-charge::before {              /* orange bloom behind the bolt */
  content: "";
  position: absolute;
  width: 70vmax; height: 70vmax;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255, 92, 0, 0.45) 0%,
              rgba(255, 92, 0, 0.16) 32%,
              transparent 66%);
  animation: charge-bloom 1700ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.page-charge img {                  /* the bolt itself */
  position: relative;
  width: clamp(76px, 10vw, 150px);
  animation: charge-bolt 1700ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
/* Sheet stays fully opaque until the bolt has completely cleared (64%),
   then lifts. Lifting any earlier lets the fading bolt bleed onto the site. */
@keyframes curtain-lift {
  0%, 64%  { opacity: 1; }
  100%     { opacity: 0; visibility: hidden; }
}
@keyframes charge-bloom {
  0%   { opacity: 0; transform: scale(0.45); }
  11%  { opacity: 1; transform: scale(1); }
  56%  { opacity: 0.55; transform: scale(1.22); }
  75%  { opacity: 0; transform: scale(1.45); }
  100% { opacity: 0; transform: scale(1.5); }
}
/* Blur is 0 from 9% all the way to 56% — that flat stretch IS the readable
   moment. The blur only returns on the way out. */
@keyframes charge-bolt {
  0%   { opacity: 0; transform: scale(0.42) translateY(18px); filter: blur(12px); }
  9%   { opacity: 1; transform: scale(1.10) translateY(0);    filter: blur(0); }
  15%  { opacity: 1; transform: scale(1);                     filter: blur(0); }
  56%  { opacity: 1; transform: scale(1);                     filter: blur(0); }
  64%  { opacity: 0; transform: scale(1.14);                  filter: blur(3px); }
  100% { opacity: 0; transform: scale(1.14);                  filter: blur(3px); }
}
/* Arriving from outside the site: no curtain, straight into the page. The
   class is set by the inline <head> script on each page, before first paint. */
html.no-intro .page-charge { display: none; }
/* Motion-sensitive users: no curtain at all, so nothing is ever hidden. */
@media (prefers-reduced-motion: reduce) {
  .page-charge { display: none; }
}
/* ---------- SCROLL REVEAL (sections fade + rise into view) ----------
   The hidden state applies ONLY when JS is active (html.js-reveal is set by
   an inline script), so content is never stuck invisible if scripts fail.
   script.js adds .is-visible when a .reveal element scrolls into view. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

html { scroll-behavior: smooth; } /* anchor links glide instead of jumping */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 { font-family: "Space Grotesk", sans-serif; line-height: 1.1; }

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

/* ---------- HEADER / NAV ---------- */
header {
  position: sticky; top: 0;
  background: rgba(22, 3, 0, 0.8);   /* the page bg at 80% — frosted dark glass */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  z-index: 10;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;                                /* grown to fit the larger logo */
}
.logo img { height: 58px; display: block; }   /* bigger header logo */

.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { color: var(--muted); font-size: 15px; transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }

/* Hamburger button — hidden on desktop, revealed at the mobile breakpoint.
   Three <span> bars that animate into an X when the menu is open. */
.nav-toggle {
  display: none;                 /* desktop: hidden (see mobile @media) */
  flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 9px;
  background: none; border: none; cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- BUTTONS ---------- */
/* Works on both <a> and <button> — the border/cursor/font lines
   neutralize the browser's default <button> look. */
.btn {
  display: inline-block;
  background: var(--grad-btn);
  color: #fff;
  padding: 12px 22px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 92, 0, 0.35); /* orange glow on hover */
}
.btn-lg { padding: 15px 28px; font-size: 16px; }

/* ---------- HERO ---------- */
.hero {
  padding: 130px 0 100px;
  position: relative;
  overflow: hidden;
}
/* A soft ember glow behind the headline — pure CSS, no image.
   ::before draws an invisible layer inside .hero and paints a
   radial (circular) gradient on it. */
.hero::before {
  content: "";
  position: absolute;
  top: -240px; left: 50%;
  transform: translateX(-50%);
  width: 1100px; height: 620px;
  background: radial-gradient(ellipse at center,
              rgba(255, 92, 0, 0.16) 0%,
              rgba(237, 39, 0, 0.06) 45%,
              transparent 70%);
  pointer-events: none; /* the glow never blocks clicks */
}
.hero .container { position: relative; z-index: 1; } /* keeps content above the glow + current lines */

/* ============================================================
   HERO v2 — client-focused headline + proof + client footage
   ============================================================ */

/* ---------- "LAVA LAMP" BOLT FIELD ----------
   Bolts of assorted sizes drift slowly around the hero. Each <img> passes
   its own --size/--x/--y/--dur/--delay/--blur/--op inline, so no two move
   alike. Replaces the old static watermark + ember gradient. */
.hero-home::before { display: none; }      /* retire the radial ember glow here */

.hero-lava {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.hero-lava img {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--size); height: auto;
  opacity: var(--op);
  filter: blur(var(--blur));
  animation: bolt-drift var(--dur) ease-in-out infinite alternate;
  animation-delay: var(--delay);
  will-change: transform;
}
/* A slow, wandering float — different duration per bolt keeps it organic. */
@keyframes bolt-drift {
  0%   { transform: translate(0, 0) rotate(-8deg)  scale(1); }
  33%  { transform: translate(40px, -55px) rotate(6deg) scale(1.08); }
  66%  { transform: translate(-30px, -20px) rotate(-4deg) scale(0.96); }
  100% { transform: translate(25px, 45px) rotate(10deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-lava img { animation: none; }
}

/* Homepage hero is tuned so the proof stats sit ABOVE the fold on a
   typical laptop (~800–900px tall) — that's the whole point of them. */
.hero-home { padding: 24px 0 72px; }
/* Let the hero breathe across the screen instead of sitting in a narrow
   column with big empty margins either side. */
.hero-home .container { max-width: 1460px; padding: 0 48px; }
.hero-home h1 { font-size: clamp(38px, 4.4vw, 62px); }
.hero-home p { margin: 20px 0 28px; }

/* Two columns: copy left, TESTIMONIAL tiles top-right. The client-work
   marquee then runs full-bleed underneath both. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 80px;
  /* start, not center — centring pushed the copy down to match the taller
     video column, leaving dead space under the header */
  align-items: start;
}
.hero-copy { min-width: 0; }
.hero-home p { max-width: 620px; }
.hero-copy .hero-actions { margin-bottom: 28px; }

/* --- Written client quotes, sitting under the stats --- */
.hero-quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 26px;
}
.hero-quote {
  position: relative;
  padding: 14px 16px 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  /* Column layout so the attribution can be pinned to the bottom — the two
     quotes are different lengths, so otherwise their names sit at different
     heights. */
  display: flex;
  flex-direction: column;
}
.hero-quote::before {              /* thin brand rule down the left edge */
  content: "";
  position: absolute; left: 0; top: 16px; bottom: 16px;
  width: 2px; border-radius: 2px;
  background: var(--grad-btn);
}
/* Scoped under .hero-home so it outranks the generic `.hero p` rule
   further down the file, which otherwise forces 19px body size here. */
.hero-home .hero-quote p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13.5px; line-height: 1.55;
  max-width: none;
}
/* The site-wide `footer` rule (border-top + 40px padding) was leaking in
   here and adding ~80px of dead space around the name — reset it, and put
   name and company on one line. */
.hero-quote footer {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 6px;
  padding: 0; border: none;
  margin: auto 0 0;        /* auto top margin pins it to the card's bottom */
}
.q-name { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 13px; color: var(--ink); line-height: 1.3; }
.q-role { color: var(--muted); font-size: 12px; line-height: 1.3; }
.q-role::before { content: "· "; color: var(--accent); }

/* --- Testimonial tiles: 2×2, staggered --- */
.hero-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 430px;
  margin-left: auto;
  width: 100%;
}
.hero-tile {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, border-color 0.25s ease;
  padding: 0; background: none; cursor: pointer; font: inherit;
}
/* Offset 2nd and 4th so the group feels dynamic, not a plain grid */
.hero-tile:nth-child(2), .hero-tile:nth-child(4) { transform: translateY(30px); }
.hero-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-tile:hover { border-color: rgba(255, 92, 0, 0.55); transform: translateY(-6px); }
.hero-tile:nth-child(2):hover, .hero-tile:nth-child(4):hover { transform: translateY(24px); }

/* --- Proof strip inside the hero --- */
.hero-stats {
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  margin: 0;
}
.hero-stat dt {
  font-family: "Space Grotesk", sans-serif;
  font-size: 30px; font-weight: 700; line-height: 1;
  background: var(--grad-bolt);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stat dd {
  margin: 6px 0 0;
  color: var(--muted); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* --- Client clip marquee: full-bleed strip scrolling across the bottom --- */
.hero-marquee {
  margin-top: 52px;
  width: 100%;
  overflow: hidden;
  /* Fade the strip out at both edges so tiles don't hard-cut at the screen */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee-scroll 46s linear infinite;
}
/* The tile set is duplicated in the DOM, so shifting by exactly half the
   track loops seamlessly with no visible jump. */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.hero-marquee:hover .marquee-track { animation-play-state: paused; }

.hero-clip {
  position: relative;
  flex: 0 0 auto;
  width: clamp(132px, 12vw, 184px);
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, border-color 0.25s ease;
  padding: 0;                 /* neutralize default <button> styling */
  background: none;
  cursor: pointer;
  font: inherit;
}
.hero-clip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-clip:hover { border-color: rgba(255, 92, 0, 0.55); transform: translateY(-6px); }
.clip-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 3, 0, 0.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff; font-size: 13px; padding-left: 3px;
}

@media (max-width: 900px) {
  /* Narrow screens don't need the wide-screen side padding */
  .hero-home .container { padding: 0 24px; }
  .hero-home h1 { max-width: none; }
  /* Collapse to one column — the fixed 430px video column would otherwise
     sit on top of the copy on a phone. */
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-quotes { grid-template-columns: 1fr; gap: 14px; }
  .hero-visual { max-width: none; margin-left: 0; }
  .hero-tile:nth-child(2), .hero-tile:nth-child(4) { transform: none; }
  .hero-tile:nth-child(2):hover, .hero-tile:nth-child(4):hover { transform: translateY(-6px); }
  .hero-marquee { margin-top: 40px; }
  .clip-play { width: 32px; height: 32px; font-size: 11px; }
}
@media (max-width: 560px) {
  /* 2×2 grid instead of an uneven 3+1 wrap */
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
  .hero-stat dt { font-size: 25px; }
  .marquee-track { gap: 12px; }
}
/* Motion-sensitive users get a static, scrollable strip instead of autoplay */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .hero-marquee { overflow-x: auto; }
}

/* ---------- VIDEO PLAYER POPUP ---------- */
.video-modal {
  margin: auto;
  padding: 0;
  border: none;
  background: none;
  overflow: visible;
  max-width: none; max-height: none;
}
.video-modal::backdrop {
  background: rgba(10, 2, 0, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.video-modal video {
  display: block;
  width: min(420px, 88vw);
  max-height: 84vh;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.video-close {
  position: absolute; top: -46px; right: 0;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: var(--ink); font-size: 30px; line-height: 1;
  cursor: pointer; border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}
.video-close:hover { color: var(--accent); background: rgba(255,255,255,0.06); }

/* Slow "breathing" of the ember glow behind the headline
   (still used by the sub-page heroes; the homepage uses the bolt field). */
.hero::before { animation: ember-breathe 9s ease-in-out infinite; }
@keyframes ember-breathe {
  0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.06); }
}

/* Gentle energy pulse on the "strāvu" underline */
.current::after { animation: current-pulse 2.4s ease-in-out infinite; }
@keyframes current-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.72; } }

/* Accessibility: users who prefer reduced motion get a calm, static hero */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .current::after { animation: none; }
}

.eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 22px;
}
.hero h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 700; max-width: 780px; }

/* THE SIGNATURE WORD: "strāvu" carries the bolt gradient (yellow → orange),
   the same one that lights up the logo. background-clip: text is the CSS
   trick that pours a gradient into letters. */
.current {
  background: var(--grad-bolt);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}
.current::after {           /* the "current" line under the word */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 10px;
  background: repeating-linear-gradient(
    -45deg, var(--accent) 0 4px, transparent 4px 8px
  );
  opacity: 0.55;
  border-radius: 2px;
}

.hero p {
  font-size: 19px; color: var(--muted);
  max-width: 560px; margin: 26px 0 36px;
}
.hero-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.link-plain {
  color: var(--ink); font-weight: 600; font-size: 15px;
  border-bottom: 2px solid var(--accent); padding-bottom: 2px;
  transition: color 0.2s;
}
.link-plain:hover { color: var(--accent); }

/* ---------- TRUST STRIP ---------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px 0; }
/* When the strip closes out <main>, its bottom border would stack on the
   footer's top border and read as a 2px double rule. Drop one of them. */
main > .trust:last-child { border-bottom: none; }
.trust .label {
  display: block;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 20px;
}
/* Client logos as clickable "chips": each is a full-tile link, so the
   entire card is the click target (no dead zones). */
/* Flexbox + justify-content:center means the last row (5 logos, since
   11 = 6 + 5) is centered automatically instead of dangling to the left.
   --cols controls how many fit per row; we drop it at smaller widths. */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  --cols: 6;
}
.logo-chip {
  /* exactly --cols per row: full width minus the gaps, divided evenly */
  flex: 0 0 calc((100% - (var(--cols) - 1) * 14px) / var(--cols));
  height: 76px;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 18px;
  background: #F5EFE8;              /* soft off-white tile — warm, not stark */
  border-radius: 12px;
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.logo-chip img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;             /* logo scales to fit, never stretches or crops */
  display: block;
}
.logo-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 92, 0, 0.4);
}

/* ---------- SERVICES ---------- */
section { padding: 100px 0; }
.section-head { max-width: 640px; margin-bottom: 50px; }
.section-head h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 600; }
.section-head p { color: var(--muted); font-size: 18px; margin-top: 14px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* 2-column variant (used for the 4 "Par mums" values). Kept at the same
   specificity as .cards so the mobile 1-column rule still wins on phones. */
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--surface);           /* the brand ember-black */
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  border-color: rgba(255, 92, 0, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(237, 39, 0, 0.15); /* ember glow under the card */
}
.card .num { font-family: "Space Grotesk"; color: var(--accent); font-weight: 600; font-size: 14px; }
.card h3 { font-size: 21px; margin: 14px 0 10px; }
.card p { color: var(--muted); font-size: 15px; }

/* "See all →" link under a section's teaser cards */
.section-more { margin-top: 34px; text-align: center; }

/* ---------- PROOF / RESULTS ---------- */
/* On the dark page this section becomes a lifted panel with a faint
   orange wash, so it still reads as "the important one". */
.proof {
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat { border-left: 2px solid var(--accent); padding-left: 20px; }
.stat .big {
  font-family: "Space Grotesk"; font-size: 46px; font-weight: 700;
  background: var(--grad-bolt);          /* numbers glow like the bolt */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat .desc { color: var(--muted); font-size: 15px; margin-top: 4px; }

/* ---------- FINAL CTA ---------- */
.cta-final { text-align: center; }
.cta-bolt { height: 44px; margin-bottom: 26px; opacity: 0.9; }
.cta-final h2 { font-size: clamp(30px, 5vw, 50px); font-weight: 700; max-width: 700px; margin: 0 auto 18px; }
.cta-final p { color: var(--muted); font-size: 18px; margin-bottom: 30px; }

/* --- Test-shoot offer card (homepage closer) --- */
.offer-final .eyebrow { display: block; margin-bottom: 14px; }
.offer-final p { max-width: 560px; margin-left: auto; margin-right: auto; }
.offer-card {
  max-width: 620px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid rgba(255, 92, 0, 0.35);
  border-radius: 20px;
  padding: 32px 30px 28px;
  text-align: left;
}
.offer-price {
  display: flex; align-items: baseline; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  padding-bottom: 26px; margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.offer-amount {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(48px, 8vw, 66px); font-weight: 700; line-height: 1;
  background: var(--grad-bolt);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.offer-unit { color: var(--muted); font-size: 16px; font-weight: 500; line-height: 1.5; }
.offer-vat { font-size: 13px; opacity: 0.75; }
.offer-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.offer-list li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.5; }
/* Round tick badge instead of a plain bullet — reads as "included". */
.offer-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px; border-radius: 50%;
  background: rgba(255, 92, 0, 0.14);
  color: var(--accent); font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
}
.offer-card .btn { width: 100%; margin-top: 28px; }
/* Scoped past `.cta-final p`, which would otherwise force 18px + 30px margin. */
.offer-card .offer-fine {
  color: var(--muted); font-size: 13.5px; line-height: 1.55;
  margin: 16px 0 0; text-align: center;
}

/* ---------- FOOTER ---------- */
footer { border-top: 1px solid var(--line); padding: 56px 0 0; }
footer small { color: var(--muted); font-size: 13.5px; }

/* Three columns: brand · pages · contact. */
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 50px;
  padding-bottom: 40px;
}
footer .logo img { height: 46px; }        /* was 22px — matches the bigger header mark */

/* Icons carry their own brand colours, so the hover moves the tile, not the
   glyph — no `color` transition here, currentColor isn't in play. */
.footer-socials { display: flex; gap: 10px; margin-top: 22px; }
.footer-socials a {
  width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 10px;
  display: grid; place-items: center;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.footer-socials a:hover {
  border-color: rgba(255, 92, 0, 0.45);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .footer-socials a { transition: none; } }

.footer-col h4 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-col a {
  display: block; color: var(--muted); font-size: 14.5px;
  padding: 5px 0; transition: color 0.2s;
}
.footer-col a:hover { color: var(--accent); }
/* Legal bar, divided from the columns above. Carries the office address. */
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 22px; padding-bottom: 26px;
}
.footer-bottom small a { color: var(--muted); transition: color 0.2s; }
.footer-bottom small a:hover { color: var(--accent); }

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  footer { padding-top: 44px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { justify-content: flex-start; }
}

/* ---------- POPUP FORM ---------- */
/* <dialog> is hidden by default; .showModal() reveals it centered. */
.modal {
  margin: auto;                  /* centers the dialog (our reset zeroed this out) */
  background: var(--surface);
  color: var(--ink);
  border: 1px solid rgba(255, 92, 0, 0.25);
  border-radius: 16px;
  padding: 32px;
  width: min(480px, 92vw);       /* 480px, but never wider than the screen */
  max-height: 90vh;              /* scroll inside if the phone screen is short */
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
/* ::backdrop = the layer the browser puts behind an open dialog */
.modal::backdrop {
  background: rgba(10, 2, 0, 0.7);
  backdrop-filter: blur(4px);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.modal-head h3 { font-size: 22px; }

.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}
.modal-close:hover { color: var(--ink); background: var(--raised); }

/* ---------- FORM FIELDS ---------- */
.field { display: block; margin-bottom: 18px; border: none; } /* border:none clears fieldset's default box */
.field-label {
  display: block;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.field input[type="text"],
.field input[type="tel"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 92, 0, 0.15); /* soft orange focus ring */
}

/* ---------- RADIO PILLS ---------- */
/* The real radio inputs are invisible; the <span> is styled as a pill.
   :checked + span = "the span right after a checked radio" — that's
   how CSS knows which pill to light up. */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;          /* fully round ends */
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.pill span:hover { border-color: rgba(255, 92, 0, 0.5); color: var(--ink); }
.pill input:checked + span {
  background: var(--grad-btn);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
/* Keyboard users see a focus ring when tabbing through pills */
.pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255, 92, 0, 0.3); }

.btn-submit { width: 100%; margin-top: 6px; }
.form-error { color: #ff6b6b; font-size: 14px; margin: 0 0 12px; text-align: center; }
.form-consent { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 2px 0 14px; text-align: center; }
.form-consent a { color: var(--accent); text-decoration: underline; }

/* Footer: privacy link grouped with the copyright on the right */
.footer-privacy { color: var(--muted); font-size: 13.5px; transition: color 0.2s; }
.footer-privacy:hover { color: var(--accent); }

/* ---------- SUCCESS MESSAGE ---------- */
.form-success { text-align: center; padding: 20px 0 10px; }
.success-bolt { height: 40px; margin-bottom: 16px; }
.form-success h3 { font-size: 20px; margin-bottom: 8px; }
.form-success p { color: var(--muted); font-size: 15px; }

/* ============================================================
   CONTACT PAGE (kontakti.html)
   ============================================================ */

/* Active nav link (current page) */
.nav-links a.active { color: var(--ink); }

/* Slimmer hero for the contact page */
.contact-hero { padding: 110px 0 60px; }
.contact-hero p { margin-bottom: 0; }

/* Two-column layout: info on the left, map on the right */
.contact-section { padding-top: 40px; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.block-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}

/* --- Person cards (Gustavs / Pauls) --- */
.person-cards { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.person {
  display: flex; gap: 16px; align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  transition: border-color 0.2s;
}
.person:hover { border-color: rgba(255, 92, 0, 0.4); }
.person-avatar {
  flex: 0 0 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-btn);
  border-radius: 50%;
  overflow: hidden;             /* clips a photo to the circle */
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700; font-size: 20px; color: #fff;
}
.person-avatar img { width: 100%; height: 100%; object-fit: cover; } /* fill the circle */
.person-name { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 18px; }
.person-role { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.person-line { display: block; font-size: 15px; font-weight: 500; }
.person-line:hover { color: var(--accent); }
.muted-link { color: var(--muted); font-weight: 400; }
.muted-link:hover { color: var(--accent); }

/* --- Quick facts: hours + email --- */
.fact-row { display: flex; flex-wrap: wrap; gap: 16px; }
.fact {
  flex: 1 1 160px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
}
.fact-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.fact-value { font-family: "Space Grotesk", sans-serif; font-size: 20px; font-weight: 600; }
.fact-note { color: var(--muted); font-size: 13px; margin-top: 6px; }
.badge-live {
  display: inline-block; vertical-align: middle;
  margin-left: 8px; padding: 3px 10px;
  font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #7CF29B;
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.3);
  border-radius: 999px;
}

/* --- Google map --- */
.map-title { margin-bottom: 20px; }
.map-frame {
  border-radius: 14px;
  overflow: hidden;                 /* clips the iframe corners to the radius */
  border: 1px solid var(--line);
  line-height: 0;
}
.map-frame iframe {
  width: 100%;
  height: 340px;
  border: 0;
  filter: grayscale(0.3) contrast(1.05) brightness(0.9); /* tones the map toward the dark theme */
}
.map-address { display: inline-block; margin-top: 14px; font-weight: 500; font-size: 15px; }

/* --- Social buttons --- */
.socials-section { padding-top: 40px; }
.social-row { display: flex; flex-wrap: wrap; gap: 14px; }
.social-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-weight: 600; font-size: 15px;
  color: var(--ink);
  transition: transform 0.18s ease, border-color 0.2s, color 0.2s;
}
/* Glyphs carry their own brand colours now, so no currentColor tinting here. */
.social-btn:hover { transform: translateY(-3px); border-color: rgba(255, 92, 0, 0.5); }
/* The .is-soon / .soon-tag "coming soon" chip was removed when the YouTube
   channel went live — nothing uses those classes any more. */

/* --- Legal / rekvizīti --- */
.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;                          /* the gap shows the surface color as hairlines */
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.legal-item {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface);
  padding: 18px 22px;
}
.legal-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.legal-value { font-family: "Space Grotesk", sans-serif; font-size: 16px; font-weight: 500; }

/* --- Contact page responsive --- */
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .legal-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ABOUT PAGE (par-mums.html)
   ============================================================ */

/* --- Story --- */
.story-section { padding-top: 40px; }
.story { max-width: 760px; }
.story-lead {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500; line-height: 1.35;
  color: var(--ink);
  margin-bottom: 26px;
}
.story-text { color: var(--muted); font-size: 18px; margin-bottom: 18px; }

/* --- Timeline --- */
.timeline { list-style: none; position: relative; padding-left: 28px; }
.timeline::before {                 /* the vertical spine */
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line);
}
.timeline-item { position: relative; padding-bottom: 34px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {            /* the dot on the spine */
  content: ""; position: absolute; left: -28px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--grad-btn);
  box-shadow: 0 0 0 4px var(--bg);  /* punches a gap in the spine behind it */
}
.timeline-year {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700; font-size: 15px; color: var(--accent);
  letter-spacing: 0.04em; margin-bottom: 6px;
}
.timeline-body h3 { font-size: 20px; margin-bottom: 6px; }
.timeline-body p { color: var(--muted); font-size: 16px; }

/* ============================================================
   SERVICES PAGE (pakalpojumi.html)
   ============================================================ */

/* A subtly lifted band to alternate section backgrounds */
.alt-bg {
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Center a section head (used on the "individual approach" block) */
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* --- Service breakdown rows --- */
.service-list { display: flex; flex-direction: column; gap: 18px; }
.service-item {
  display: flex; gap: 24px; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px;
  transition: border-color 0.2s, transform 0.2s;
}
.service-item:hover { border-color: rgba(255, 92, 0, 0.4); transform: translateY(-3px); }
.service-num {
  flex: 0 0 auto;
  font-family: "Space Grotesk", sans-serif;
  font-size: 34px; font-weight: 700;
  background: var(--grad-bolt);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.service-main h3 { font-size: 23px; margin-bottom: 10px; }
.service-main > p { color: var(--muted); font-size: 16px; margin-bottom: 16px; }
.service-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.service-tags span {
  font-size: 13px; color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
}

/* --- Process steps --- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}
.process-step {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
}
.process-step .num {
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  color: var(--accent); font-size: 14px;
}
.process-step h3 { font-size: 18px; margin: 12px 0 8px; }
.process-step p { color: var(--muted); font-size: 14px; }

/* --- Deliverables checklist --- */
.deliverables {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px 32px;
}
.deliverables li {
  position: relative;
  padding-left: 34px;
  font-size: 16px;
  color: var(--ink);
}
.deliverables li::before {           /* orange check disc */
  content: "✓";
  position: absolute; left: 0; top: -1px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  background: var(--grad-btn);
  border-radius: 50%;
}

/* --- Individual approach --- */
.approach-points {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 10px;
}
.approach-point {
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px;
}
.approach-icon {
  font-size: 26px; color: var(--accent);
  margin-bottom: 12px;
}
.approach-point h3 { font-size: 19px; margin-bottom: 8px; }
.approach-point p { color: var(--muted); font-size: 15px; }
.approach-note {
  text-align: center; color: var(--muted);
  font-size: 16px; margin-top: 28px;
}

/* --- FAQ (native <details>) --- */
.faq { max-width: 760px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 20px;
  margin-bottom: 12px;
  background: var(--surface);
  transition: border-color 0.2s;
}
.faq details[open] { border-color: rgba(255, 92, 0, 0.4); }
.faq summary {
  cursor: pointer;
  list-style: none;                  /* hide the default triangle */
  padding: 18px 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600; font-size: 17px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; } /* Safari */
.faq summary::after {                /* our own +/- indicator */
  content: "+";
  color: var(--accent);
  font-size: 24px; font-weight: 400;
  transition: transform 0.2s;
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  color: var(--muted); font-size: 16px;
  padding: 0 0 20px;
}

/* --- Services page responsive --- */
@media (max-width: 640px) {
  .service-item { flex-direction: column; gap: 12px; padding: 24px; }
  .deliverables { grid-template-columns: 1fr; }
  .approach-points { grid-template-columns: 1fr; }
}

/* ============================================================
   RESULTS PAGE (rezultati.html)
   ============================================================ */

/* --- Metric tiles --- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  transition: border-color 0.2s, transform 0.2s;
}
.stat-tile:hover { border-color: rgba(255, 92, 0, 0.4); transform: translateY(-3px); }
.stat-big {
  font-family: "Space Grotesk", sans-serif;
  font-size: 44px; font-weight: 700; line-height: 1;
  background: var(--grad-bolt);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-desc { color: var(--muted); font-size: 15px; margin-top: 10px; }

/* --- Featured per-client case studies ---
   Each <article class="case"> carries its client's colour inline as
   --brand (sampled from their real logo). Everything accented below reads
   from that variable, so four cards in a row don't look identical. */
.cases { display: flex; flex-direction: column; gap: 22px; }
.case {
  --brand: var(--accent);           /* fallback if a card has no colour set */
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px;
  overflow: hidden;                 /* keeps the top bar inside the corners */
}
/* Brand bar across the top of the card */
.case::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand);
}
/* Faint wash of the brand colour behind the card head. Its own rule so an
   older browser without color-mix simply keeps the plain surface above. */
.case {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, transparent), transparent 200px),
    var(--surface);
}

.case-head {
  display: flex; align-items: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 22px;
}
.case-head h3 { font-size: 24px; }
/* White plate so dark logos stay legible on the dark card. Sized a little
   squarer than a pure wordmark would need, because some client logos are
   round emblems rather than wide lockups. */
.case-logo {
  flex: none; width: 72px; height: 56px;
  background: #fff; border-radius: 10px;
  display: block; padding: 7px;
}
/* Block, not grid: on a centred grid item a percentage height has nothing
   definite to resolve against, so square logos ignored it and overflowed the
   plate. Against a block parent of fixed height it resolves cleanly, and
   object-fit does the centring the grid used to do. */
.case-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Fallback chip for a client with no logo file yet */
.case-logo.is-text {
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  color: var(--brand);
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 16px;
  letter-spacing: 0.04em;
}
.case-kind {
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  margin-left: auto;
}
.case-kind.ref {                    /* FIL: proof-only reference project */
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  border-radius: 999px; padding: 4px 12px;
}

/* The headline numbers carry the client's colour — the strongest signal
   that these four cards belong to four different companies. */
.case .stat-big {
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--brand); -webkit-text-fill-color: var(--brand);
}
.case .case-notes li::before { color: var(--brand); }
/* Before/after pair — the "so what" that makes the raw numbers land. */
.case-ba {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 18px;
}
.case-ba > div {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
}
.ba-after {
  border-color: color-mix(in srgb, var(--brand, var(--accent)) 35%, transparent);
  background: color-mix(in srgb, var(--brand, var(--accent)) 6%, transparent);
}
.ba-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 9px;
}
.ba-after .ba-label { color: var(--brand, var(--accent)); }
.case-ba p { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0; }
.ba-after p { color: var(--ink); }

.case-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.case-stat {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
}
.case-stat .stat-big { font-size: 30px; }
.case-notes {
  list-style: none; display: flex; flex-direction: column; gap: 9px;
  margin-top: 20px;
}
.case-notes li {
  position: relative; padding-left: 22px;
  color: var(--muted); font-size: 15px; line-height: 1.5;
}
.case-notes li::before {
  content: "•"; position: absolute; left: 4px; top: 0;
  color: var(--accent); font-weight: 700;
}

/* ============================================================
   PAR MUMS — team page
   ============================================================ */

/* --- "Kas mēs esam": copy left, photo cluster right --- */
.who-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 460px;
  gap: 60px; align-items: center;
}
.who-copy p { color: var(--muted); font-size: 17px; line-height: 1.65; margin-bottom: 18px; max-width: 52ch; }
.who-copy p:last-of-type { margin-bottom: 0; }

/* Team facts strip — same visual language as the homepage hero stats */
.team-facts {
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  margin-top: 30px; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.team-fact dt {
  font-family: "Space Grotesk", sans-serif;
  font-size: 30px; font-weight: 700; line-height: 1;
  background: var(--grad-bolt);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.team-fact dd {
  margin: 6px 0 0; color: var(--muted);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}

/* One tall + two short, so it reads as a cluster rather than a grid.
   Each tile is a <button> so it's keyboard-reachable, hence the reset. */
.who-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.who-photos button {
  padding: 0; border: none; background: none; cursor: zoom-in;
  border-radius: 14px; overflow: hidden; display: block;
}
.who-photos img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--line); display: block;
  transition: transform 0.3s ease;
}
.who-photos button:hover img { transform: scale(1.04); }
.who-photos button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.who-photos .tall { grid-row: span 2; aspect-ratio: 3/5; }
.who-photos .short { aspect-ratio: 4/3; }
/* With no tall tile the two remaining photos land in one short row, which
   leaves the column stranded next to the copy. Portrait tiles give the pair
   height. Reverts on its own if a tall tile is added back. */
.who-photos:not(:has(.tall)) .short { aspect-ratio: 3/4; }
/* Down to a single photo: collapse to one column and hold it to a width that
   stands level with the copy, rather than one tile marooned in half a grid. */
.who-photos:has(button:only-child) {
  grid-template-columns: 1fr;
  max-width: 360px;
  margin-left: auto;            /* stays flush with the right edge */
}
.who-photos:has(button:only-child) .short { aspect-ratio: 4/5; }
@media (prefers-reduced-motion: reduce) { .who-photos img { transition: none; } }

/* --- Team grid: one identical frame per person, nobody singled out ---
   Single row on desktop, however many people there are: nowrap + flex:1
   splits the width evenly, so adding or removing a card just resizes the
   rest instead of starting a ragged second row. */
.team-grid {
  display: flex; flex-wrap: nowrap; justify-content: center; gap: 20px;
  /* The page container caps at 1080px, which leaves each card ~150px of text
     width — 8px short of "Gustavs Namnieks" on one line. Break out past the
     container so every name fits unwrapped. margin-left + translateX keeps it
     centred on the parent; the min() cap stops it overflowing the viewport. */
  width: min(1180px, 100vw - 48px);
  margin-left: 50%;
  transform: translateX(-50%);
}
.member {
  flex: 1 1 0; min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.member:hover { transform: translateY(-3px); border-color: rgba(255, 92, 0, 0.4); }
@media (prefers-reduced-motion: reduce) { .member { transition: none; } }
/* 4:5 keeps every face the same size whatever the source photo is */
.member-photo {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  display: block; background: var(--bg);
  border-bottom: 1px solid var(--line);
}
/* Placeholder frame: same box, bolt watermark, until a portrait exists */
.member-photo.is-empty {
  display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(255, 92, 0, 0.07), transparent 65%), var(--bg);
}
.member-photo.is-empty img { width: 34px; opacity: 0.32; }
.member-body { padding: 18px 20px 20px; }
/* Every name now fits on one line, so no second line is reserved — the role
   labels line up on their own. */
.member-name {
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: 18px; line-height: 1.25;
}
.member-role {
  color: var(--accent); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; margin: 7px 0 0;
}
.member-body p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 10px 0 0; }

/* --- "Mēs darbā" photo grid --- */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.work-shot { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
/* The image sits inside a <button> so it's clickable and keyboard-reachable */
.work-shot button {
  display: block; width: 100%;
  padding: 0; border: none; background: none; cursor: zoom-in;
}
.work-shot img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
  transition: transform 0.3s ease;
}
.work-shot:hover img { transform: scale(1.04); }
.work-shot button:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
/* Caption sits on a gradient so it stays readable over any photo.
   pointer-events:none so it never swallows a click meant for the button. */
.work-shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 16px 14px;
  background: linear-gradient(to top, rgba(11, 2, 0, 0.9), transparent);
  font-size: 13.5px; font-weight: 500;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .work-shot img { transition: none; } }

/* --- Photo lightbox: the full uncropped frame --- */
.photo-modal {
  margin: auto; padding: 0; border: none; background: none;
  overflow: visible; max-width: none; max-height: none;
}
.photo-modal::backdrop {
  background: rgba(10, 2, 0, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.photo-modal figure { margin: 0; }
/* contain, not cover — the whole photo has to be visible, that's the point */
.photo-modal img {
  display: block;
  max-width: 92vw; max-height: 82vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.photo-modal figcaption {
  color: var(--muted); font-size: 14px; text-align: center;
  margin-top: 14px;
}
.photo-close {
  position: absolute; top: -46px; right: 0;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: var(--ink); font-size: 30px; line-height: 1;
  cursor: pointer; border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}
.photo-close:hover { color: var(--accent); background: rgba(255, 255, 255, 0.06); }

/* Below this width five cards can no longer hold a full name on one line,
   so wrap to two per row rather than let the names break. No flex-grow, or a
   lone last card would stretch to full width. */
@media (max-width: 1140px) {
  .team-grid {
    flex-wrap: wrap;
    width: auto; margin-left: 0; transform: none;   /* undo the break-out */
  }
  .member { flex: 0 1 calc((100% - 20px) / 2); }
}
@media (max-width: 900px) {
  .who-grid { grid-template-columns: 1fr; gap: 34px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .work-grid { grid-template-columns: 1fr; }
  .team-grid { gap: 14px; }
  .member-body { padding: 14px 15px 16px; }
  /* Phone cards are too narrow for the longest names, so a couple of them do
     wrap here. Reserving two lines keeps the role labels level across a row. */
  .member-name { font-size: 16px; min-height: 2.5em; }
  .team-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* --- Tier 2: compact supporting proof --- */
.miniproof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mini {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
}
.mini .stat-big { font-size: 34px; }
.mini-client { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 17px; margin: 10px 0 8px; }
.mini-note { color: var(--muted); font-weight: 400; font-size: 13px; }
.mini p { color: var(--muted); font-size: 14px; }

/* --- Video showcase (9:16 vertical, like TikTok) --- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.video-card {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.video-card:hover { border-color: rgba(255, 92, 0, 0.5); }
/* Video fills the 9:16 slot with no black bars (cover crops to fit). */
.video-card video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}

/* --- Results page responsive --- */
@media (max-width: 820px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .miniproof { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .case { padding: 24px; }
}

/* ============================================================
   PRIVACY POLICY PAGE (privatuma-politika.html)
   ============================================================ */
.policy-section { padding-top: 30px; }
.policy { max-width: 760px; }
.policy-updated { color: var(--muted); font-size: 14px; margin-bottom: 34px; }
.policy h2 {
  font-size: 22px; font-weight: 600;
  margin: 34px 0 12px;
}
.policy p { color: var(--muted); font-size: 16px; margin-bottom: 12px; }
.policy ul { color: var(--muted); font-size: 16px; margin: 0 0 12px; padding-left: 22px; }
.policy li { margin-bottom: 6px; }
.policy a { color: var(--accent); text-decoration: underline; }
.policy strong { color: var(--ink); font-weight: 600; }

/* ---------- LOGO WALL: fewer columns as the screen narrows ---------- */
@media (max-width: 900px) { .logo-row { --cols: 4; } }
@media (max-width: 560px) { .logo-row { --cols: 3; } }
@media (max-width: 380px) { .logo-row { --cols: 2; } }

/* ---------- MOBILE (screens narrower than 720px) ---------- */
@media (max-width: 720px) {
  .nav-toggle { display: flex; }        /* show the hamburger */

  /* The menu becomes a full-width dropdown below the header, hidden
     until the hamburger toggles the .open class (see script.js). */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: rgba(22, 3, 0, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    padding: 10px 24px 22px;
  }
  .nav-links.open { display: flex; }     /* opened by the hamburger */
  .nav-links a {
    color: var(--ink); font-size: 17px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a:last-of-type { border-bottom: none; }
  .nav-links .btn { text-align: center; margin-top: 12px; padding: 14px; }

  .cards, .stats { grid-template-columns: 1fr; }
  .hero { padding: 80px 0 70px; }
  section { padding: 70px 0; }

  .offer-card { padding: 26px 20px 22px; }
  .offer-price { gap: 8px; }
  .case-ba { grid-template-columns: 1fr; }
}