/* CREAM website. Brand: "Full Stop" logo, Manrope 800/500, colours from the brand sheet. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-500.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-800.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

:root {
  --ink: #1C1A17;
  --cream: #F3ECDF;
  --cherry: #A8322B;     /* logo full stop */
  --bordeaux: #B22A3C;   /* hero glow: a bit more bordeaux and ~5 % brighter than cherry (2026-10-20) */
  --butter: #E8D7AE;
  --caramel: #C98B5B;
  --sage: #7A8C6E;
  --stone: #6F675A;

  --nav-h: 72px;
  --gutter: clamp(20px, 5vw, 48px);
  --glass: rgba(28, 26, 23, 0.72);   /* dark matte glass; keep GLASS in intro.js the same */
  --glass-blur: blur(22px) saturate(1.5);
  --glass-line: rgba(243, 236, 223, 0.1);
  /* fine light grain that makes the glass matte instead of glossy */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .93 0 0 0 0 .87 .9 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 640px) {
  :root { --nav-h: 64px; }
}

/* Very fine grey film grain over the whole page (overlay blend: no colour shift, only texture) */
:root {
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncA type='table' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  background-image: var(--noise);
  mix-blend-mode: overlay;
  opacity: 0.2;   /* raise for stronger grain, lower for less */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 800; margin: 0; }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

/* The logo's full stop: a cherry circle 0.2 em wide, sitting on the baseline */
.full-stop {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.067em;
  border-radius: 50%;
  background: var(--cherry);
  color: transparent;
  overflow: hidden;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.btn:hover { background: var(--cherry); }
.btn-small { padding: 10px 18px; font-size: 14px; }
.btn-light { background: var(--cream); color: var(--ink); }
.btn-light:hover { background: var(--ink); color: var(--cream); }
.link-arrow { font-weight: 800; font-size: 16px; text-decoration: none; }
.link-arrow::after { content: " ↓"; }
.link-arrow:hover { color: var(--cherry); }

/* ---------- Header: frosted matte glass ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--cream);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-line);
}
.nav::before, .intro-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.08;
  pointer-events: none;
}
.nav-logo { position: relative; display: block; }
.nav-logo img { height: 26px; width: auto; }
.nav-links { position: relative; display: flex; align-items: center; gap: 32px; transition: opacity 0.6s ease; }
.nav-links a:not(.btn) { font-weight: 800; font-size: 15px; text-decoration: none; }
.nav-links a:not(.btn):hover { color: var(--caramel); }
/* light buttons on the dark header and hero */
.nav .btn, .hero .btn { background: var(--cream); color: var(--ink); }
.nav .btn:hover, .hero .btn:hover { background: var(--bordeaux); color: var(--cream); }
/* the outlined button next to "Sazinies ar mums" leads to the other page: "Par mums" on the first page, "← Sākums" on
   par-mums.html */
.nav-btns { display: flex; align-items: center; gap: 10px; }
.nav .btn-ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(243, 236, 223, 0.45); }
.nav .btn-ghost:hover { background: rgba(243, 236, 223, 0.14); color: var(--cream); }
@media (max-width: 640px) {
  /* on phones the bar stays at the top of the page and scrolls away with it (more room for the content) */
  .nav { position: absolute; }
  html { scroll-padding-top: 0; }
  .nav-logo img { height: 20px; }
  .nav-links a:not(.btn) { display: none; }
  .nav-btns { gap: 6px; }
  .nav .btn-small { padding: 8px 11px; font-size: 12.5px; }
}
@media (max-width: 380px) {
  .nav-logo img { height: 18px; }
  .nav .btn-small { padding: 8px 10px; font-size: 12px; }
}
@media (max-width: 340px) {
  .nav { padding: 0 12px; }
  .nav-logo img { height: 15px; }
  .nav-btns { gap: 5px; }
  .nav .btn-small { padding: 7px 9px; font-size: 12px; }
}
.nav .btn { white-space: nowrap; }

/* ---------- Intro (only while <html> has the "intro" class) ---------- */
.intro-pane, .intro-canvas { display: none; }
html.intro:not(.intro-open) { overflow: hidden; }
html.intro-open .intro-pane { pointer-events: none; }
html.intro .intro-pane {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--cream);   /* first colour of the default (dark) intro, so the first frame doesn't flash */
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-line);
  will-change: transform;
}
html.intro .intro-canvas {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
  pointer-events: none;
}
html.intro .nav-logo { visibility: hidden; }
html.intro .nav-links { opacity: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 48px) 0 64px;
  overflow: hidden;
  color: var(--cream);
  /* dark, with a soft caramel light top-left; the bordeaux glow is .glow (follows the cursor, see glow.js) */
  background:
    radial-gradient(45% 55% at 5% -5%, rgba(201, 139, 91, 0.2), rgba(201, 139, 91, 0) 70%),
    var(--ink);
}
/* The moving light (glow.js). Each section with data-glow has one, coloured for its background. */
[data-glow] { position: relative; overflow: hidden; }
[data-glow] > .wrap { position: relative; }   /* text above the light */
.glow {
  --glow: 178, 42, 60;   /* bordeaux on dark */
  --core: 0.9;
  --mid: 0.32;
  position: absolute;
  left: 0; top: 0;
  width: max(115%, 120vh);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--glow), var(--core)) 0%, rgba(var(--glow), var(--mid)) 48%, rgba(var(--glow), 0) 100%);
  transform: translate(88vw, 112vh) translate(-50%, -50%);   /* bottom-right until glow.js takes over */
  pointer-events: none;
  will-change: transform;
}
.process .glow, .faq .glow { --glow: 210, 120, 112; --core: 0.42; --mid: 0.15; }   /* on cream: the same light, softer, rose-peach */
.contact .glow { --glow: 236, 170, 120; --core: 0.5; --mid: 0.16; }    /* on cherry: warm caramel light */
/* Title and phone grouped in the middle; on narrow screens the phone goes under the buttons */
.hero .wrap { max-width: 1400px; }
.hero-inner {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 5vw;
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; justify-content: stretch; }
}
.hero h1 {
  font-size: clamp(52px, 9.2vw, 140px);
  line-height: 0.9;   /* tight; still clears the Latvian long marks (ā, ī) */
  letter-spacing: -0.045em;
}
/* "Pacel" big on its own line (20 % smaller than the first try), the rest of the headline under it */
.hero h1 .pc { display: block; font-size: 1.92em; line-height: 0.82; letter-spacing: -0.055em; }
.hero h1 .rest { display: block; font-size: 0.62em; line-height: 0.92; letter-spacing: -0.04em; margin-top: 0.14em; }   /* <br> in the text keeps the box only as wide as the words */
/* "saturu" lit in the colours of the dot's light trail (reel.js #reel-tg): rose → peach → warm white */
.hero h1 .lit {
  background: linear-gradient(100deg, #E0465A 0%, #E8956E 55%, #FFF1DC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-right: 0.06em; margin-right: -0.06em;   /* keeps the last letter's edge inside the gradient */
}
/* Phones: the title centred, the rest of the headline on ONE line (11.24 em wide, sized to fit the screen) */
@media (max-width: 640px) {
  .hero-text { text-align: center; }
  .hero h1 .pc { font-size: 1.52em; }
  .hero h1 .rest { font-size: min(0.6em, calc((100vw - 2 * var(--gutter)) / 11.6)); white-space: nowrap; }
  .hero h1 .rest br { display: none; }
}

/* The arrow after "Pacel": the cherry full stop shoots up into an arrow once the intro is done */
.arrow { display: inline-block; width: 0.48em; height: 0.74em; margin-left: 0.1em; overflow: visible; }
.arrow .a-dot { fill: var(--cherry); transform-box: view-box; transform-origin: 21px 64px; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.arrow .a-line, .arrow .a-head { fill: none; stroke: url(#arrow-grad); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; stroke-dashoffset: 0; }
/* the dashes use the real lengths (line 35, heads 21.2), not pathLength: iPhone Safari draws pathLength dashes wrong.
   Hidden = the dash pushed just past the start, so not even the round cap shows. */
.arrow .a-line { stroke-dasharray: 36 40; }
.arrow .a-head { stroke-dasharray: 22 26; }
.arrow .a-line { transition: stroke-dashoffset 0.5s cubic-bezier(0.3, 0.6, 0.2, 1) 0.2s; }
.arrow .a-head { transition: stroke-dashoffset 0.35s ease-out 0.62s; }
html.intro .arrow .a-dot { transform: scale(0); }
html.intro .arrow .a-line { stroke-dashoffset: 38; }
html.intro .arrow .a-head { stroke-dashoffset: 24; }
@media (prefers-reduced-motion: reduce) { .arrow * { transition: none !important; } }
.lead {
  margin-top: 28px;
  max-width: 34ch;
  font-size: clamp(18px, 1.55vw, 22px);
  color: rgba(243, 236, 223, 0.75);
}
.hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.hero .link-arrow:hover { color: var(--caramel); }

/* ---------- The phone next to the title (reel.js); sizes inside are % of the phone's width ---------- */
.reel {
  position: relative;
  container-type: inline-size;
  /* almost as tall as the screen, never wider than 22.4vw or 380 px */
  width: min(22.4vw, calc((100svh - var(--nav-h) - 150px) * 0.4865), 380px);
  aspect-ratio: 9 / 18.5;
}
@media (max-width: 900px) {
  .reel { width: min(48vw, 300px); justify-self: center; margin-top: 48px; }
}
/* Desktop: the dark first screen is 20 % shorter than the window (user), so the next section already shows under it.
   Title and phone are 20 % smaller to fit; on very low screens the title stops shrinking at 64 px and the hero grows. */
@media (min-width: 901px) {
  .hero { min-height: 80vh; min-height: 80svh; padding: calc(var(--nav-h) + 36px) 0 44px; }
  .hero h1 { font-size: clamp(64px, min(7.4vw, 11svh), 112px); }
  .hero .lead { margin-top: 22px; max-width: 50ch; font-size: clamp(16px, 1.05vw, 19px); }   /* the longer text (27.10) stays ~5 lines */
  .hero-actions { margin-top: 30px; }
  .reel { width: min(17.9vw, calc((80svh - var(--nav-h) - 80px) * 0.4865), 304px); }
}
/* Phones: only the title and the animation on the first screen, plus a hint that the page goes on */
.scroll-cue { display: none; }
@media (max-width: 640px) {
  .hero { padding: calc(var(--nav-h) + 28px) 0 24px; }
  .hero .lead, .hero-actions { display: none; }
  /* The next section ("Kā mēs strādājam?") rises from the bottom like a sheet with a handle (~52 px of it shows, see
     .process), and the cherry dot keeps bouncing down onto it. The phone takes the rest: ~250 px above it, ~92 px under it. */
  .hero { min-height: calc(100svh - 28px); padding-bottom: 64px; }
  .reel { margin-top: 28px; width: min(66vw, calc((100svh - 318px) * 0.4865)); }
  .scroll-cue { display: block; position: absolute; left: 50%; bottom: 28px; z-index: 2; padding: 12px; transform: translateX(-50%); }   /* 12 px padding = bigger tap area */
  .cue-dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: #E0465A; box-shadow: 0 0 14px rgba(224, 70, 90, 0.8); animation: cue-bounce 1.5s infinite; }
}
/* falls a little faster, squashes softly on the sheet, rises slower, like the dot in the animation */
@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
  46% { transform: translateY(12px) scale(1.14, 0.84); animation-timing-function: ease-out; }
  56% { transform: translateY(11px) scale(1, 1); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
}
@media (prefers-reduced-motion: reduce) { .cue-dot { animation: none; } }
.reel-frame { position: relative; width: 100%; height: 100%; border: 2.6cqw solid rgba(243, 236, 223, 0.85); border-radius: 14.8cqw; overflow: hidden; background: #110f0d;
  /* a soft warm glow around it, so the phone lifts off the dark hero (user); static, so it costs nothing per frame */
  box-shadow: 0 0 9cqw rgba(243, 214, 180, 0.16), 0 0 28cqw rgba(201, 139, 91, 0.12), 0 14cqw 36cqw rgba(0, 0, 0, 0.45); }
.reel-feed { position: absolute; inset: 0; will-change: transform; }
.reel-post { position: relative; height: 100%; overflow: hidden; }
.reel-video { background: linear-gradient(160deg, #C98B5B, #5A3A2A); }
.reel-video::after { content: ""; position: absolute; left: 11.5cqw; right: 26cqw; bottom: 14.8cqw; height: 14.8cqw;
  background: linear-gradient(rgba(243,236,223,.85), rgba(243,236,223,.85)) 0 0 / 70% 3.6cqw no-repeat, linear-gradient(rgba(243,236,223,.5), rgba(243,236,223,.5)) 0 100% / 45% 3.6cqw no-repeat; }
.reel-play { position: absolute; left: 50%; top: 44%; transform: translate(-40%, -50%); border-left: 13cqw solid rgba(243, 236, 223, 0.9); border-top: 8.2cqw solid transparent; border-bottom: 8.2cqw solid transparent; }
.reel-climb { background: #1a1214; }
.reel-movie { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.2s; }   /* phones (reel.js) */
.reel-movie.on { opacity: 1; }
.reel-climb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.reel-side { position: absolute; right: 6.6cqw; bottom: 39cqw; z-index: 3; display: flex; flex-direction: column; gap: 6.6cqw; }
.reel-side i { width: 9.9cqw; height: 9.9cqw; border-radius: 50%; background: rgba(243, 236, 223, 0.75); }
.reel-side .reel-heart { background: #D8394A; }
/* the step's name, at the top of the screen: above the highest point the ball reaches (~20 %) */
.reel-names { position: absolute; left: 0; right: 0; top: 5.5%; z-index: 3; text-align: center; pointer-events: none; }
.reel-names div { position: absolute; left: 0; right: 0; opacity: 0; will-change: transform, opacity, filter; }
.reel-names b { display: block; font-weight: 800; font-size: 12.5cqw; letter-spacing: -0.03em; color: var(--cream); text-shadow: 0 1.6cqw 6.6cqw rgba(0, 0, 0, 0.5); }

/* ---------- Sections ---------- */
/* The sections take turns, dark and light (user): first screen dark → "Kā mēs strādājam?" cream → "Mums uzticas" dark →
   contact cherry → footer dark. "Ko mēs darām" is out of the page for now (27.10); its styles stay here for later. */
.services { padding: clamp(88px, 12vw, 160px) 0; background: var(--ink); color: var(--cream); }
.section-title {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: clamp(36px, 5vw, 64px);
}

/* "Ko mēs darām": five steps on one line. The cherry dot hops from step to step (the hops are drawn by hops.js,
   like the dot in the phone next to the title) and lands on the last one. Nothing moves. */
.services .section-title { margin-bottom: clamp(12px, 2vw, 24px); }   /* the hops fill the room above the steps */
.hops-wrap { position: relative; }
.hops-track { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.hops { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.hops li { position: relative; padding: 96px 22px 0 0; }
.hops .step { position: absolute; left: 0; top: 78px; width: 32px; height: 5px; border-radius: 3px; background: rgba(243, 236, 223, 0.24); }
.hops li:last-child .step { background: rgba(224, 70, 90, 0.5); }
.hops li:last-child .step::before {   /* the ball, landed */
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 15px; height: 15px; margin-left: -7.5px;
  border-radius: 50%; background: #E0465A; box-shadow: 0 0 16px rgba(224, 70, 90, 0.65);
}
.hops h3 { font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; }
.hops p { margin-top: 8px; font-size: 15px; line-height: 1.45; color: rgba(243, 236, 223, 0.72); }
/* tablets and phones: the steps go down the left side and the dot hops downwards */
@media (max-width: 900px) {
  .hops { grid-template-columns: 1fr; }
  .hops li { padding: 0 0 26px 46px; }
  .hops li:last-child { padding-bottom: 0; }
  .hops .step { left: 3px; top: 2px; width: 22px; height: 4px; }
  .hops p { margin-top: 4px; }
}

/* "Mums uzticas": dark after the cream chat. Nothing moves here on purpose (user). */
.clients { padding: clamp(88px, 12vw, 160px) 0; background: var(--ink); color: var(--cream); }
/* the clients in one row (user: "spread them horizontally", then "bigger and taller", then "in the middle of the
   screen"). From 1360 px all the cards (now two, AIZMUGURE is out) sit side by side in the middle. Below that the row is wider than the screen: it runs
   out to both edges so the next card shows at the right, with arrow buttons next to the title (clients.js) on desktop;
   up to 900 px you swipe, and each card snaps to the left edge. */
.clients > .wrap { max-width: 1400px; }
.clients-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px, 5vw, 64px); }
.clients-head .section-title { margin-bottom: 0; }
.client-arrows { display: flex; gap: 10px; }
.client-arrows[hidden] { display: none; }
.client-arrows button {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(243, 236, 223, 0.28);
  background: none;
  color: var(--cream);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.client-arrows button:hover:not(:disabled) { background: var(--cream); color: var(--ink); }
.client-arrows button:disabled { opacity: 0.3; cursor: default; }
.client-arrows svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.client-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(360px, 40vw, 600px);
  gap: 24px;
  margin: 0 calc(50% - 50vw);    /* out to the screen edges ... */
  padding: 0 calc(50vw - 50%) 8px;   /* ... while the first card still lines up with the title */
  overflow-x: auto;
  scrollbar-width: none;
}
.client-grid::-webkit-scrollbar { display: none; }
/* wide screens (user works on 1920×1080): all three cards in the middle of the screen, as big as fits (592 px each on
   FHD, never more than 600); the section is as wide as the three cards, so the title lines up with the first one */
@media (min-width: 1360px) {
  .clients > .wrap { max-width: 1320px; }   /* 2 × 600 + 24 gap + 2 × 48 gutter (three cards: 1944 and repeat(3, …)) */
  .client-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 600px)); justify-content: center; margin: 0; padding: 0; overflow: visible; }
}
@media (max-width: 900px) {
  .client-arrows { display: none; }
  .client-grid {
    grid-auto-columns: min(86%, 420px);
    gap: 16px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 8px;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
  }
  .client { scroll-snap-align: start; }
}
/* the picture: three pieces of the work side by side on the client's colour, the middle one in front */
.client-pic { position: relative; aspect-ratio: 5 / 4; margin-bottom: 18px; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(243, 236, 223, 0.1); }   /* a hairline keeps the dark tiles apart from the dark section */
.pic-aiz { background: radial-gradient(60% 70% at 50% 55%, rgba(225, 6, 0, 0.16), rgba(225, 6, 0, 0) 70%), #140B09; }
.pic-api { background: radial-gradient(60% 70% at 50% 55%, rgba(171, 211, 181, 0.16), rgba(171, 211, 181, 0) 70%), #0E3500; }
.pic-rup { background: radial-gradient(60% 70% at 50% 55%, rgba(127, 196, 160, 0.18), rgba(127, 196, 160, 0) 70%), #0E1813; }   /* the club's dark green */
.client-pic img { position: absolute; top: 50%; height: auto; transform: translate(-50%, -50%); border-radius: 8px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); }
.client-pic .mid { left: 50%; z-index: 2; width: 42%; }
.client-pic .l, .client-pic .r { width: 32%; }   /* they tuck under the middle one by ~1/5, so each piece shows almost whole */
.client-pic .l { left: 20%; }
.client-pic .r { left: 80%; }
/* dark pieces on a dark tile: a hairline and a soft warm glow behind each one keep them apart */
.pic-aiz img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 44px rgba(255, 122, 40, 0.3), 0 14px 30px rgba(0, 0, 0, 0.55); }
.client-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.client h3 { font-size: 24px; letter-spacing: -0.03em; }
.client .year { font-size: 14px; font-weight: 800; color: rgba(243, 236, 223, 0.5); }
.client p { margin-top: 4px; font-size: 16px; color: rgba(243, 236, 223, 0.72); }
.client .client-what { margin-top: 12px; font-size: 14px; font-weight: 800; color: var(--cream); }

/* "Kā mēs strādājam?", right after the first screen: a chat (idea 5 from _ideas/process.html). You ask on the left, we
   answer on the right; chat.js plays it once when it comes into view. The section is a cream sheet that rises over the
   dark first screen with rounded top corners; the chat is a light one, like a messenger in light mode.
   Desktop: big title on the left, a wide chat on the right; only as tall as the chat (user: lower than the screen).
   Phones: the sheet is the chat itself (no box inside a box), with a handle like the first screen's peek. */
.process {
  z-index: 1;
  margin-top: -40px;
  padding: 72px 0 64px;
  border-radius: 40px 40px 0 0;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.35);
}
.process-grid { display: grid; gap: clamp(24px, 5vw, 72px); }
.process .section-title { margin: 0; font-size: clamp(44px, 6.4vw, 104px); line-height: 0.98; letter-spacing: -0.045em; }
@media (min-width: 901px) {
  .process { padding: clamp(40px, 4vw, 64px) 0; }
  .process > .wrap { max-width: 1400px; }
  .process-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
}
.chat {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  justify-self: end;
  padding: 14px 14px 16px;
  border-radius: 28px;
  background: #FFFCF7;
  border: 1px solid rgba(28, 26, 23, 0.07);
  box-shadow: 0 30px 60px rgba(84, 52, 36, 0.14), 0 6px 16px rgba(84, 52, 36, 0.06);
}
@media (max-width: 900px) { .chat { justify-self: stretch; max-width: none; } }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; border-bottom: 1px solid rgba(28, 26, 23, 0.08); font-weight: 800; font-size: 15px; line-height: 1.2; }
.chat-head small { display: block; font-weight: 500; font-size: 12px; color: rgba(28, 26, 23, 0.5); }
.chat-av { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); }   /* the reversed logo: ink with the cherry dot */
.chat-av::after { content: ""; position: absolute; right: 8px; bottom: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--cherry); }   /* the logo's full stop */
.msgs { flex: 1; list-style: none; margin: 0; padding: 16px 4px 0; display: flex; flex-direction: column; gap: 6px; }
.msg { max-width: 84%; padding: 9px 14px 10px; border-radius: 20px; font-size: 15.5px; line-height: 1.42; }
/* the message bar at the bottom is a link to the contact section; its send button is the "Pacel" arrow */
.chat-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 7px 7px 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(28, 26, 23, 0.14);
  color: rgba(28, 26, 23, 0.5);
  font-size: 15px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.chat-input:hover { border-color: rgba(28, 26, 23, 0.35); color: var(--ink); }
.chat-send { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #E0465A; }
.chat-send svg { width: 13px; height: 16px; fill: none; stroke: var(--cream); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* desktop: a wider chat (answers wrap less, so the section stays low) */
@media (min-width: 901px) {
  .chat { max-width: 600px; padding: 16px 16px 16px; border-radius: 30px; }
  .msg { font-size: 16px; }
}
/* phones: the sheet with a handle; the chat has no box of its own, it is the sheet */
@media (max-width: 640px) {
  .process { padding: 64px 0 48px; }
  .process::before { content: ""; position: absolute; top: 10px; left: 50%; z-index: 2; width: 40px; height: 5px; margin-left: -20px; border-radius: 9px; background: rgba(28, 26, 23, 0.22); }
  .chat { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .chat-head { padding: 0 0 14px; }
  .msgs { padding: 16px 0 0; }
}
.msg.you { align-self: flex-start; background: linear-gradient(135deg, #C2384A, #8E2A25); color: var(--cream); border-bottom-left-radius: 6px; transform-origin: 0 100%; }   /* your questions */
.msg.us { align-self: flex-end; background: rgba(28, 26, 23, 0.06); border-bottom-right-radius: 6px; transform-origin: 100% 0; }   /* our answers */
.msg.you + .msg.us, .msg.us + .msg.you { margin-top: 10px; }
.msg.own { font-weight: 800; color: var(--cherry); }
.seen { align-self: flex-end; margin: 2px 6px 0 0; font-size: 12px; color: rgba(28, 26, 23, 0.45); }
/* the play (only with JS): every message keeps its place but waits hidden, then pops in once (no overshoot) */
.chat.play .msgs > li { opacity: 0; transform: translateY(8px) scale(0.92); }
.chat.play .msgs > li.in { opacity: 1; transform: none; transition: opacity 0.22s ease-out, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* we are typing: three small moving dots on our side, where the next answer will appear */
.typing {
  position: absolute;
  right: 18px;
  top: 0;
  display: flex;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 20px;
  border-bottom-right-radius: 6px;
  background: rgba(28, 26, 23, 0.06);
  opacity: 0;
  transform: scale(0.8);
  transform-origin: 100% 0;
  transition: opacity 0.15s ease-out, transform 0.2s ease-out;
  pointer-events: none;
}
.typing.on { opacity: 1; transform: none; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: typing 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: 0.35; } 30% { transform: translateY(-3px); opacity: 0.9; } }

/* "Pajautā mums" (the Q&A): cream, between the dark "Mums uzticas" and the cherry contact. The questions sit on the
   left under the title, grouped by topic (user picked idea 4 of _ideas/faq-left.html); a tapped question goes up in the
   chat on the right (on its left side), we type, the answer comes on its right side, and the window scrolls on like a
   real chat (ask.js). Asked questions stay in the list, faded. Phones: title, chat, then the questions. Without JS (no .on):
   no chat, the questions and answers show as plain lists. */
.faq { --k: 1; --kc: 1; padding: clamp(72px, 9vw, 128px) 0; background: var(--cream); color: var(--ink); }
.faq-grid { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-areas: "head" "chat" "qs"; }
.faq-head { grid-area: head; }
.faq .ask { grid-area: chat; }
.faq:not(.on) .ask { display: none; }
.faq .section-title { margin-bottom: 0; }
.ask-log { position: relative; height: 360px; overflow-y: auto; overscroll-behavior: contain; padding: 16px 4px 8px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: rgba(28, 26, 23, 0.2) transparent; }
.ask-dots { align-self: flex-end; display: flex; gap: 4px; padding: 13px 14px; border-radius: 20px; border-bottom-right-radius: 6px; background: rgba(28, 26, 23, 0.06); }
.ask-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: typing 1s ease-in-out infinite; }
.ask-dots i:nth-child(2) { animation-delay: 0.15s; }
.ask-dots i:nth-child(3) { animation-delay: 0.3s; }
.ask-log .pop { animation: ask-pop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes ask-pop { from { opacity: 0; transform: translateY(8px) scale(0.94); } }
/* the questions by topic */
.ask-topics { grid-area: qs; display: grid; gap: calc(20px * var(--kc)); }
.ask-topic h3 { margin-bottom: calc(10px * var(--kc)); font-size: calc(12.5px * var(--kc)); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cherry); }
.ask-list { list-style: none; margin: 0; padding: 0; }
.ask-list li + li { margin-top: 14px; }
.ask-q { padding: 0; border: 0; background: none; font: 800 17px/1.3 "Manrope", system-ui, sans-serif; color: var(--ink); text-align: left; }
.ask-a { margin-top: 4px; font-size: 16px; color: rgba(28, 26, 23, 0.7); }
/* with JS: light round buttons; an asked one stays, faded; while we type the others wait */
.faq.on .ask-list { display: flex; flex-direction: column; align-items: flex-start; gap: calc(8px * var(--kc)); }   /* one question under the other (user) */
.faq.on .ask-list li + li { margin-top: 0; }
.faq.on .ask-a { display: none; }
.faq.on .ask-q {
  padding: calc(10px * var(--kc)) calc(16px * var(--kc));
  border-radius: 999px;
  background: #FFFCF7;
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.06), inset 0 0 0 1px rgba(28, 26, 23, 0.1);
  font-size: calc(14.5px * var(--kc));
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.faq.on .ask-q:hover { background: var(--ink); color: var(--cream); }
.faq.on .done .ask-q { background: transparent; box-shadow: inset 0 0 0 1px rgba(28, 26, 23, 0.08); color: rgba(28, 26, 23, 0.38); cursor: default; }
.faq.on .ask-topics.busy { pointer-events: none; }
.ask-more { font-weight: 800; font-size: calc(15px * var(--kc)); color: var(--cherry); text-decoration: none; }
.ask-more:hover { text-decoration: underline; }
@media (max-width: 640px) { .faq.on .ask-q { font-size: 13.5px; } }
/* Desktop: title + questions on the left, the chat on the right across both rows; the section is a size up on big
   screens (user: "50 % bigger"): --k 1.5 from 1600 px, 1.25 from 1280, 1 below; the buttons grow less (--kc). The
   window is never taller than the screen allows. */
@media (min-width: 901px) {
  .faq { padding: clamp(56px, 5vw, 96px) 0; }
  .faq > .wrap { max-width: 1800px; }
  .faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; grid-template-areas: "head chat" "qs chat"; align-items: start; row-gap: calc(28px * var(--k)); }
  .faq .ask { align-self: center; }
  .faq .section-title { font-size: calc(60px * var(--k)); }
  .ask.chat { max-width: calc(600px * var(--k)); padding: calc(16px * var(--k)); border-radius: calc(30px * var(--k)); }
  .ask .chat-head { gap: calc(10px * var(--k)); padding: calc(4px * var(--k)) calc(6px * var(--k)) calc(14px * var(--k)); font-size: calc(15px * var(--k)); }
  .ask .chat-head small { font-size: calc(12px * var(--k)); }
  .ask .chat-av { width: calc(34px * var(--k)); height: calc(34px * var(--k)); }
  .ask .chat-av::after { right: calc(8px * var(--k)); bottom: calc(9px * var(--k)); width: calc(8px * var(--k)); height: calc(8px * var(--k)); }
  .ask-log { height: clamp(320px, calc(100svh - var(--nav-h) - 230px), calc(420px * var(--k))); padding: calc(16px * var(--k)) 4px calc(8px * var(--k)); gap: calc(6px * var(--k)); }
  .ask .msg { padding: calc(9px * var(--k)) calc(14px * var(--k)) calc(10px * var(--k)); border-radius: calc(20px * var(--k)); font-size: calc(15.5px * var(--k)); }
  .ask .msg.you { border-bottom-left-radius: calc(6px * var(--k)); }
  .ask .msg.us { border-bottom-right-radius: calc(6px * var(--k)); }
  .ask .msg.you + .msg.us, .ask .msg.us + .msg.you { margin-top: calc(10px * var(--k)); }
  .ask-dots { gap: calc(4px * var(--k)); padding: calc(13px * var(--k)) calc(14px * var(--k)); border-radius: calc(20px * var(--k)); border-bottom-right-radius: calc(6px * var(--k)); }
  .ask-dots i { width: calc(6px * var(--k)); height: calc(6px * var(--k)); }
}
@media (min-width: 1280px) { .faq { --k: 1.25; --kc: 1.08; } }
@media (min-width: 1600px) { .faq { --k: 1.5; --kc: 1.15; } }

.contact { background: var(--cherry); color: var(--cream); padding: clamp(96px, 13vw, 180px) 0; }
.contact h2 {
  font-size: clamp(42px, 7.4vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 11ch;
}
.contact .full-stop { background: var(--ink); }
.contact p { margin: 28px 0 36px; font-size: clamp(18px, 1.55vw, 22px); color: rgba(243, 236, 223, 0.85); }
/* the title on the left, the short sign-up form on a cream card on the right (user picked step 1 of idea 2 in
   _ideas/form.html: just who you are, the rest by e-mail); phones: one under the other */
.contact > .wrap { max-width: 1400px; }
.contact-grid { display: grid; gap: clamp(36px, 5vw, 80px); }
@media (min-width: 901px) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; } }
.signup { padding: clamp(22px, 2.6vw, 44px); border-radius: 30px; background: var(--cream); color: var(--ink); box-shadow: 0 40px 80px rgba(60, 10, 8, 0.35); }
.signup-form { display: grid; gap: 16px; }
.signup-field { display: grid; gap: 7px; }
.signup-field > span { font-size: 14px; font-weight: 800; }
.signup-field b { color: var(--cherry); }
.signup-field small { font-weight: 500; color: rgba(28, 26, 23, 0.55); }
.signup-field input { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(28, 26, 23, 0.16); background: #FFFCF7; font: 500 16px/1.3 "Manrope", system-ui, sans-serif; color: var(--ink); transition: border-color 0.2s, box-shadow 0.2s; }
.signup-field input:focus { outline: none; border-color: var(--cherry); box-shadow: 0 0 0 4px rgba(168, 50, 43, 0.14); }
.signup-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: rgba(28, 26, 23, 0.75); }
.signup-consent input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--cherry); }
.signup-consent a { color: var(--cherry); font-weight: 800; }
.signup-send { justify-self: end; display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; padding: 16px 26px; border: 0; border-radius: 999px; background: var(--ink); color: var(--cream); font: 800 16px/1 "Manrope", system-ui, sans-serif; cursor: pointer; transition: background 0.2s; }
.signup-send:hover { background: var(--cherry); }
.signup-send:disabled { opacity: 0.6; cursor: default; }
.signup-send svg { width: 13px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.signup-thanks { padding: 40px 10px; text-align: center; }
.signup-thanks b { display: block; font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -0.03em; }
.signup .full-stop { background: var(--cherry); }
.signup-trap { display: none !important; }   /* spam-bot trap (signup.js) */
.signup [hidden] { display: none !important; }   /* the form and the thank-you take turns */
.contact .signup-error { margin: 0; font-size: 14px; font-weight: 800; color: var(--cherry); }
.contact .signup-thanks p { margin: 10px 0 0; font-size: 17px; color: rgba(28, 26, 23, 0.7); }

/* ---------- "Par mums" (par-mums.html): one section. The title on dark, then one card per person (photo, name,
   roles, a line). The photos sit across the edge: a cream block from the photos' middle down covers the moving light,
   so the light shows on the dark part only and there is no seam. Photos are graded to match (warm, soft blacks); no
   extra grain on them (user: too much on the web). ---------- */
.about {
  padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 120px));
  color: var(--cream);
  background: radial-gradient(45% 55% at 5% -5%, rgba(201, 139, 91, 0.2), rgba(201, 139, 91, 0) 70%), var(--ink);
}
.about > .wrap { max-width: 1100px; }
.about-top { padding-bottom: clamp(40px, 5vw, 72px); }
.about h1 { font-size: clamp(56px, 9vw, 140px); line-height: 0.9; letter-spacing: -0.05em; }
.about-team { container-type: inline-size; }   /* the cards measure the cream line from this width */
.people {
  --gap: clamp(28px, 4vw, 48px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px var(--gap);
  padding-bottom: clamp(88px, 12vw, 160px);
  color: var(--ink);
}
.people::before {   /* cream from the middle of the photos (4:5, half a column wide) down, out to the screen edges */
  content: "";
  position: absolute;
  top: calc((100cqw - var(--gap)) * 0.3125);
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--cream);
}
@media (max-width: 640px) {
  .people { grid-template-columns: 1fr; }
  .people::before { top: 62.5cqw; }   /* one column: the middle of the first photo */
}
.person { position: relative; }
.person-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person h2 { margin-top: 24px; font-size: clamp(30px, 3vw, 42px); line-height: 1.02; letter-spacing: -0.035em; }
.person .role { margin-top: 10px; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cherry); }
.person-mail { display: inline-block; margin-top: 8px; font-size: 16px; font-weight: 800; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(168, 50, 43, 0.45); text-underline-offset: 4px; transition: color 0.2s; }   /* each person's own address (user) */
.person-mail:hover { color: var(--cherry); }
.person p:not(.role) { margin-top: 14px; max-width: 40ch; font-size: 18px; color: rgba(28, 26, 23, 0.78); }

/* ---------- Privātuma politika (privatuma-politika.html): the title on dark like "Par mums", then plain text on cream. ---------- */
.legal {
  padding: calc(var(--nav-h) + clamp(56px, 8vw, 120px)) 0 clamp(48px, 6vw, 88px);
  color: var(--cream);
  background: radial-gradient(45% 55% at 5% -5%, rgba(201, 139, 91, 0.2), rgba(201, 139, 91, 0) 70%), var(--ink);
}
.legal > .wrap, .legal-body > .wrap { max-width: 820px; }
.legal h1 { font-size: clamp(44px, 7vw, 104px); line-height: 0.95; letter-spacing: -0.05em; }
.legal-top p { margin-top: 20px; font-size: 15px; font-weight: 800; color: rgba(243, 236, 223, 0.6); }
.legal-body { padding: clamp(56px, 7vw, 100px) 0 clamp(88px, 12vw, 160px); background: var(--cream); color: var(--ink); }
.legal-body h2 { margin-top: 44px; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.03em; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin-top: 12px; font-size: 18px; color: rgba(28, 26, 23, 0.78); }
.legal-body ul { margin: 12px 0 0; padding-left: 1.3em; font-size: 18px; color: rgba(28, 26, 23, 0.78); }
.legal-body li { margin-top: 6px; }
.legal-body li::marker { color: var(--cherry); }
.legal-body a { color: var(--ink); font-weight: 800; text-decoration-color: rgba(168, 50, 43, 0.45); text-underline-offset: 4px; }
.legal-body a:hover { color: var(--cherry); }
.footer a { color: inherit; text-underline-offset: 3px; }
.footer a:hover { color: var(--cream); }

/* Phones: every section after the first screen rises over the one before it like a sheet with rounded top corners,
   so the dark/light turns read as layers (here, after the sections' own rules, so it wins over them) */
@media (max-width: 640px) {
  .process, .services, .clients, .faq, .contact { z-index: 1; margin-top: -24px; border-radius: 26px 26px 0 0; }
}

.footer { background: var(--ink); color: rgba(243, 236, 223, 0.6); padding: 36px 0; font-size: 14px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer img { height: 22px; width: auto; }