/* =========================================================
   RevenueGrain : award-grade redesign
   ========================================================= */

:root {
  /* palette */
  --bg: #0A0A0B;
  --bg-2: #0E0E10;
  --bg-3: #131316;
  --surface: rgba(255,255,255,0.025);
  --surface-2: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --text: #F5F5F4;
  --text-dim: #A8A29E;
  --text-mute: #6B6B70;
  --accent: #F5C518;
  --accent-2: #E0A93F;
  --accent-soft: rgba(245,197,24,0.12);
  --gold: linear-gradient(135deg, #FFE08A 0%, #F5C518 35%, #D9A441 70%, #B8870E 100%);

  /* type */
  --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --f-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* spacing */
  --pad-x: clamp(1.25rem, 3vw, 2rem);
  --section-y: clamp(5rem, 10vw, 9rem);

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- light theme : applied per-section via .theme-light ---------- */
/* doubled class for higher specificity than :root token defaults */
.theme-light.theme-light {
  --bg: #F4F1EA;
  --bg-2: #ECE8DE;
  --bg-3: #E2DCCE;
  --surface: rgba(10,10,11,0.025);
  --surface-2: rgba(10,10,11,0.04);
  --border: rgba(10,10,11,0.10);
  --border-strong: rgba(10,10,11,0.20);
  --text: #0F0F12;
  --text-dim: #57534E;
  --text-mute: #8A857A;
  --accent: #B8870E;
  --accent-2: #8C6606;
  --accent-soft: rgba(184,135,14,0.10);
  background: var(--bg);
  color: var(--text);
}
.theme-light .display .italic,
.theme-light .display .accent,
.theme-light .pillar-tag,
.theme-light .pillar-title .italic,
.theme-light .eyebrow .ey-num,
.theme-light .b-num,
.theme-light .step-num,
.theme-light .kpi-num,
.theme-light .ltv-num {
  color: var(--accent);
}
.theme-light .quote-card { background: #FAF7F0; }
.theme-light .quote-mark { color: var(--accent); }
.theme-light .quote-card .hl { color: var(--accent); }
.theme-light .quote-card::before {
  background:
    radial-gradient(circle at 0% 0%, rgba(184,135,14,0.08), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(140,102,6,0.05), transparent 55%);
}
/* cards sit clearly above the cream section rather than melting into it */
.theme-light .bento-card {
  background: #FFFFFF;
  border-color: rgba(10,10,11,0.07);
  box-shadow: 0 1px 2px rgba(10,10,11,0.04), 0 10px 28px -16px rgba(10,10,11,0.18);
}
.theme-light .bento-card:hover {
  background: #FFFFFF;
  border-color: rgba(10,10,11,0.14);
  box-shadow: 0 2px 4px rgba(10,10,11,0.05), 0 18px 40px -18px rgba(10,10,11,0.26);
}
.theme-light .contact-side { background: #FAF7F0; }
.theme-light .field input,
.theme-light .field select,
.theme-light .field textarea { caret-color: var(--accent); }
.theme-light .form-toast { color: var(--accent); }
.theme-light .btn-solid {
  background: #0F0F12;
  color: #FAF7F0;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.35);
}
.theme-light .btn-solid:hover { background: var(--accent); color: #0F0F12; }
.theme-light .btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.theme-light .btn-ghost:hover { background: var(--surface-2); border-color: #0F0F12; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #0A0A0B; }

/* ---------- layout ---------- */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ---------- full-page 3D layer (mid-page + footer nuggets) ---------- */
.scene-3d {
  position: fixed; inset: 0;
  z-index: 8;                 /* above section content, below grain/nav/cursor */
  pointer-events: none;
}
.scene-3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ---------- grain + cursor ---------- */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.8'/></svg>");
}
.cursor, .cursor-dot {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform;
  /* keep each one on its own layer so moving it never repaints the page */
  contain: layout style paint;
  backface-visibility: hidden;
}
.cursor {
  width: 34px; height: 34px;
  border: 1px solid rgba(245,245,244,0.45);
  border-radius: 50%;
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 5px; height: 5px;
  background: var(--text);
  border-radius: 50%;
}
.cursor.is-hover {
  width: 56px; height: 56px;
  background: var(--accent);
  border-color: transparent;
  mix-blend-mode: normal;
}
@media (hover: none) {
  .cursor, .cursor-dot { display: none; }
}

/* ---------- scroll progress ---------- */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, #FFE08A 100%);
  z-index: 100;
  transition: width 60ms linear;
}

/* ==========================================================
   Navigation
   ========================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 16px 0;
  transition: padding .35s var(--ease), backdrop-filter .35s var(--ease), background .35s var(--ease);
}
.nav.is-scrolled {
  padding: 10px 0;
  background: rgba(10,10,11,0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: -0.01em; font-size: 1rem;
  color: var(--text);
}
.nav-logo {
  height: clamp(20px, 2.2vw, 26px);
  width: auto;
}
.nav-links {
  justify-self: center;
  display: flex; gap: 6px;
  padding: 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.nav-links a {
  position: relative;
  padding: 8px 16px;
  font-size: 0.875rem; font-weight: 500;
  color: var(--text-dim);
  border-radius: 999px;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-actions { display: inline-flex; align-items: center; gap: 16px; }
.nav-clock {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--text-mute);
  letter-spacing: 0.04em;
}
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: 999px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.nav-toggle span {
  display: block; width: 18px; height: 1.5px;
  background: var(--text);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-sheet {
  position: fixed; inset: 0;
  z-index: 45;
  background: var(--bg);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 28px;
  padding: var(--pad-x);
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
}
.mobile-sheet.is-open { opacity: 1; pointer-events: auto; }
.mobile-sheet a {
  font-family: var(--f-serif);
  font-size: clamp(2.5rem, 9vw, 4rem);
  letter-spacing: -0.02em;
}
.mobile-sheet a.btn { font-family: var(--f-sans); font-size: 1rem; }

/* ==========================================================
   Buttons
   ========================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  font-size: 0.9rem; font-weight: 500;
  /* softened rather than a full pill, so the taller CTAs read less like tablets */
  border-radius: 18px;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  will-change: transform;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-pill {
  background: var(--text);
  color: var(--bg);
  padding: 10px 18px;
  font-size: 0.85rem;
}
.btn-pill:hover { background: var(--accent); }
.btn-solid {
  background: var(--accent);
  color: #0A0A0B;
  font-weight: 600;
  box-shadow: 0 12px 30px -10px rgba(245,197,24,0.5);
}
.btn-solid:hover { background: #FFD33D; box-shadow: 0 18px 40px -12px rgba(245,197,24,0.7); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--text); }
.btn-large { padding: 18px 28px; font-size: 1rem; }
.btn-block { width: 100%; justify-content: space-between; }

/* ==========================================================
   Hero
   ========================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 140px 0 80px;
  overflow: hidden;
}
.hero-mesh {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-3d {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.mesh {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: drift 22s var(--ease) infinite;
}
.mesh-1 {
  width: 60vw; height: 60vw;
  top: -10%; left: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(245,197,24,0.4) 0%, rgba(245,197,24,0) 70%);
}
.mesh-2 {
  width: 50vw; height: 50vw;
  bottom: -15%; right: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(217,164,65,0.32) 0%, rgba(217,164,65,0) 70%);
  animation-delay: -8s;
}
.mesh-3 {
  width: 40vw; height: 40vw;
  top: 30%; left: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,224,138,0.18) 0%, rgba(255,224,138,0) 70%);
  animation-delay: -14s;
}
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(8%, -6%) scale(1.08); }
  66%  { transform: translate(-6%, 4%) scale(0.94); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Same box as .container (max-width includes the padding), so the hero copy
   starts on the exact vertical line every section below it uses. Previously the
   padding sat on .hero, outside the 1280 cap, pulling the hero 32px left. */
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.hero-meta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: rgba(10,10,11,0.5);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-bottom: 48px;
}
.hero-meta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 12px rgba(74,222,128,0.7);
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

.hero-title {
  font-family: var(--f-serif);
  font-size: clamp(3.25rem, 10vw, 9.5rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--text);
}
.hero-title .line {
  display: block;
  overflow: hidden;
  /* line-height is tighter than the glyphs, so descenders (y, g, pp) on
     the last line get clipped by this reveal mask without the padding */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.hero-title .word {
  display: inline-block;
  transform: translateY(110%);
  animation: rise 1.1s var(--ease-out) forwards;
}
.hero-title .line:nth-child(1) .word { animation-delay: calc(.08s * var(--i, 0)); }
.hero-title .line:nth-child(2) .word { animation-delay: calc(.4s + .08s * var(--i, 0)); }
.hero-title .line:nth-child(3) .word { animation-delay: calc(.8s + .08s * var(--i, 0)); }

.hero-title .word:nth-of-type(1) { --i: 1; }
.hero-title .word:nth-of-type(2) { --i: 2; }
.hero-title .word:nth-of-type(3) { --i: 3; }
.hero-title .word:nth-of-type(4) { --i: 4; }

.hero-title .accent { color: var(--accent); }
.hero-title .italic { font-style: italic; color: var(--accent); }
.hero-title .word { margin-right: 0.1em; }

@keyframes rise {
  to { transform: translateY(0); }
}

.hero-bottom {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  opacity: 0;
  animation: fade-in 1.2s var(--ease-out) 1.6s forwards;
}
@keyframes fade-in { to { opacity: 1; } }

.hero-lede {
  color: var(--text-dim);
  font-size: clamp(1.1rem, 1.65vw, 1.35rem);
  line-height: 1.5;
  max-width: 40ch;
}
/* the pricing promise stands on its own, in the accent */
.hero-lede-note {
  margin-top: 16px;
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  line-height: 1.45;
  color: var(--text);
  max-width: 40ch;
}
.hero-lede-note strong { color: var(--accent); font-weight: 500; }
.hero-cta {
  display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: flex-end;
}
.hero-cta .btn {
  padding: 22px 44px;
  font-size: 1.12rem;
  font-weight: 600;
}
.hero-cta .btn svg { width: 18px; height: 18px; }
.hero-cta .btn-solid { box-shadow: 0 16px 40px -10px rgba(245,197,24,0.55); }
.hero-cta .btn-solid:hover { box-shadow: 0 22px 52px -12px rgba(245,197,24,0.75); }
.hero-cta .btn-ghost { border-width: 1.5px; }
/* on a phone the two calls sit side by side and split the row, so neither
   shrinks to a token width and the pair still fills the column */
@media (max-width: 700px) {
  .hero-cta {
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: flex-start;
  }
  .hero-cta .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 20px 14px;
    font-size: 1rem;
    text-align: center;
  }
  /* "Aloita myynnin kasvu" will not fit half a phone row on one line, so let it
     wrap; both buttons are flex:1 and stretch to the taller of the two */
  .hero-cta .btn span { white-space: normal; line-height: 1.25; }
  /* the arrow is the first thing to go when the row gets tight */
  .hero-cta .btn svg { display: none; }
}
@media (max-width: 400px) {
  .hero-cta .btn { font-size: 0.92rem; padding: 18px 10px; }
}

.hero-scroll {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--text-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  animation: fade-in 1s var(--ease-out) 2.2s forwards;
}
@media (max-width: 760px), (hover: none) {
  .hero-scroll { display: none; }
}
.line-down {
  width: 1px; height: 56px;
  background: linear-gradient(180deg, var(--text-mute) 0%, transparent 100%);
  position: relative; overflow: hidden;
}
.line-down::after {
  content: '';
  position: absolute; top: -20px; left: 0;
  width: 100%; height: 20px;
  background: var(--accent);
  animation: line-scroll 2.4s var(--ease) infinite;
}
@keyframes line-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(76px); }
}

/* ==========================================================
   Marquee
   ========================================================== */
.marquee {
  border-block: 1px solid var(--border);
  background: var(--bg-2);
  padding: 30px 0;
  overflow: hidden;
  white-space: nowrap;
  /* fade the edges so items enter/leave gracefully */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 55s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-row {
  display: inline-flex; align-items: center;
  gap: clamp(2.75rem, 5vw, 5rem);
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-style: italic;
  letter-spacing: -0.015em;
  color: var(--text);
  padding-right: clamp(2.75rem, 5vw, 5rem);
}
.marquee-row > span:not(.sep) {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.marquee-row .sep {
  color: var(--accent);
  font-family: var(--f-sans);
  font-style: normal;
  font-size: 0.55em;
  opacity: 0.9;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ==========================================================
   Eyebrow + display heading
   ========================================================== */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.eyebrow .ey-num {
  color: var(--accent);
  letter-spacing: 0;
}
.display {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--text);
}
.display .italic { font-style: italic; color: var(--accent); }
.display .accent { color: var(--accent); }

/* ==========================================================
   KPI counters
   ========================================================== */
.kpi {
  padding: var(--section-y) 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.kpi-head {
  max-width: 900px;
  margin-bottom: clamp(48px, 7vw, 80px);
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
}
.kpi-card {
  padding: 36px 28px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(245,197,24,0.012));
  transition: background .4s var(--ease);
}
.kpi-card:last-child { border-right: none; }
.kpi-card:hover { background: rgba(245,197,24,0.04); }
.kpi-num {
  font-family: var(--f-serif);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin-bottom: 14px;
  font-feature-settings: "tnum";
}
.kpi-label {
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 6px;
}
.kpi-foot {
  font-size: 0.8rem;
  color: var(--text-mute);
}

/* ==========================================================
   Pillars
   ========================================================== */
.pillars {
  padding: var(--section-y) 0;
  background: var(--bg);
}
.pillars-head {
  max-width: 900px;
  margin-bottom: clamp(56px, 8vw, 96px);
}
.pillars-sub {
  margin-top: 28px;
  max-width: 56ch;
  color: var(--text-dim);
  font-size: 1rem;
}
.pillar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  padding: clamp(48px, 8vw, 96px) 0;
  border-top: 1px solid var(--border);
}
.pillar.reverse .pillar-text { order: 2; }
.pillar.reverse .pillar-visual { order: 1; }
.pillar-tag {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 24px;
}
.pillar-title {
  font-family: var(--f-serif);
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 24px;
}
.pillar-body {
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 50ch;
  margin-bottom: 28px;
}
.pillar-list {
  list-style: none;
  border-top: 1px solid var(--border);
}
.pillar-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 0.95rem;
}
.pillar-list li span {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  padding-top: 4px;
}
.pillar-visual {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 40px);
  aspect-ratio: 4/3;
  display: flex; flex-direction: column;
}
.pillar-visual.pillar-photo {
  padding: 0;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.pillar-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
  transition: transform 1.4s var(--ease);
}
.pillar-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0) 55%, rgba(10,10,11,0.85) 100%);
  pointer-events: none;
}
.pillar-photo:hover img { transform: scale(1.04); }
.pillar-photo .pillar-figure {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0 clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px);
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.18);
  color: #FAF7F0;
  z-index: 1;
}
.pillar-visual .chart {
  width: 100%; flex: 1;
  margin-bottom: 12px;
}
.chart-line {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 1.8s var(--ease);
}
.is-in .chart-line { stroke-dashoffset: 0; }
.chart-area, .chart-points, .chart-tags {
  opacity: 0;
  transition: opacity 1s var(--ease) 0.6s;
}
.is-in .chart-area,
.is-in .chart-points,
.is-in .chart-tags { opacity: 1; }
.pillar-figure {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  color: var(--text-mute);
  letter-spacing: 0.08em;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* margin stack */
.margin-stack {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
}
.stack-row {
  display: grid;
  grid-template-columns: 130px 1fr 60px;
  gap: 18px;
  align-items: center;
  font-size: 0.85rem;
}
.stack-label { color: var(--text-dim); }
.stack-val {
  font-family: var(--f-mono);
  color: var(--text);
  text-align: right;
}
.stack-bar {
  height: 8px; background: var(--surface-2);
  border-radius: 999px; overflow: hidden;
}
.stack-bar i {
  display: block; height: 100%;
  width: 0;
  background: var(--c);
  border-radius: 999px;
  transition: width 1.6s var(--ease);
}
.is-in .stack-bar i { width: var(--w); }

/* LTV grid */
.ltv-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.ltv-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 110px;
}
.ltv-num {
  font-family: var(--f-serif);
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
.ltv-cap {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 12px;
}

/* ==========================================================
   Bento services
   ========================================================== */
.bento {
  padding: var(--section-y) 0;
  background: var(--bg-2);
  border-block: 1px solid var(--border);
}
.bento-head { max-width: 900px; margin-bottom: clamp(48px, 7vw, 80px); }
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.bento-grid-3 { grid-template-columns: repeat(4, 1fr); }
.bento-grid-3 .bento-card { min-height: 220px; }
.bento-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 240px;
  position: relative;
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.bento-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: var(--bg-3);
}
.bento-card.span-2 { grid-column: span 2; }
.bento-card.tall { grid-row: span 2; min-height: 480px; }
.bento-card header { display: flex; align-items: baseline; gap: 12px; }
.b-num {
  font-family: var(--f-mono);
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.bento-card h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  color: var(--text);
}
.bento-card p {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.55;
}
.b-tags {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto;
}
.b-tags li {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
}
.b-illu { margin-top: auto; }
/* The trend line draws itself in as the card arrives, then the area fills and
   the markers pop in sequence. Keyed off .is-in, which the reveal observer
   already puts on every bento card. */
.b-chart-line {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 1.9s var(--ease);
}
.is-in .b-chart-line { stroke-dashoffset: 0; }
.b-chart-area {
  opacity: 0;
  transition: opacity 1s var(--ease) 0.65s;
}
.is-in .b-chart-area { opacity: 1; }
.b-chart-dot, .b-chart-flag-num {
  opacity: 0;
  transform: scale(0.4);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.is-in .b-chart-dot,
.is-in .b-chart-flag-num { opacity: 1; transform: scale(1); }
.is-in .b-chart-dot { transition-delay: calc(var(--d, 1) * 380ms + 500ms); }
.is-in .b-chart-flag-num { transition-delay: 1.72s; }
@media (prefers-reduced-motion: reduce) {
  .b-chart-line { stroke-dashoffset: 0; transition: none; }
  .b-chart-area, .b-chart-dot, .b-chart-flag-num {
    opacity: 1; transform: none; transition: none;
  }
}
.b-illu svg { width: 100%; height: 120px; }
.bento-card.span-2 .b-illu svg { height: 132px; }

/* ==========================================================
   Local to global : globe
   ========================================================== */
.globe-section {
  padding: var(--section-y) 0;
  background:
    radial-gradient(ellipse 70% 60% at 70% 50%, rgba(245,197,24,0.06), transparent 60%),
    #06060a;
  border-block: 1px solid var(--border);
  overflow: hidden;
}
.globe-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.globe-copy { max-width: 30rem; }
.globe-body + .globe-body { margin-top: 14px; }
.globe-body {
  margin-top: 28px;
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 46ch;
}
.globe-stats {
  list-style: none;
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  margin-top: 44px;
  border-top: 1px solid var(--border);
  padding-top: 28px;
}
.globe-stats li { display: flex; flex-direction: column; gap: 6px; }
.gs-num {
  font-family: var(--f-serif);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
.gs-cap {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.globe-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 70vh;
  display: flex; align-items: center; justify-content: center;
}
/* Landmasses in orthographic projection, fitted to this wireframe so Finland
   falls exactly on the existing marker. Kept faint: they orient the viewer
   without competing with the arcs. */
.g-lands { pointer-events: none; }
.g-land {
  fill: rgba(255, 255, 255, 0.055);
  stroke: rgba(245, 197, 24, 0.18);
  stroke-width: 0.8;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 1.2s var(--ease) 0.2s;
}
.is-in .g-land, .globe-stage .g-land { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .g-land { transition: none; opacity: 1; } }

.globe-svg { width: 100%; height: 100%; max-width: 560px; }
.g-grid { stroke: rgba(255,255,255,0.10); stroke-width: 1; fill: none; }
.g-arc {
  stroke: rgba(245,197,24,0.45);
  stroke-width: 1.4; fill: none; stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: g-draw 6.4s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}
.g-arc:nth-child(2) { animation-delay: 0.9s; }
.g-arc:nth-child(3) { animation-delay: 1.8s; }
.g-arc:nth-child(4) { animation-delay: 2.7s; }
.g-arc:nth-child(5) { animation-delay: 3.6s; }
@keyframes g-draw {
  0%   { stroke-dashoffset: 1;  opacity: 0; }
  8%   { opacity: 1; }
  42%  { stroke-dashoffset: 0;  opacity: 1; }
  72%  { stroke-dashoffset: -1; opacity: 1; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}
.g-dest {
  fill: rgba(255,255,255,0.55);
  animation: g-dest 6.4s ease-in-out infinite;
}
.g-points .g-dest:nth-child(2) { animation-delay: 0.9s; }
.g-points .g-dest:nth-child(3) { animation-delay: 1.8s; }
.g-points .g-dest:nth-child(4) { animation-delay: 2.7s; }
.g-points .g-dest:nth-child(5) { animation-delay: 3.6s; }
@keyframes g-dest {
  0%, 30%  { fill: rgba(255,255,255,0.35); }
  44%, 58% { fill: rgba(245,197,24,0.95); }
  76%, 100% { fill: rgba(255,255,255,0.35); }
}
.g-origin { fill: var(--accent); }
.g-ping {
  fill: none; stroke: var(--accent); stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: g-ping 3.2s ease-out infinite;
}
@keyframes g-ping {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .g-arc { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .g-dest, .g-ping { animation: none; }
}

/* ==========================================================
   Process
   ========================================================== */
.process {
  padding: var(--section-y) 0;
  background: var(--bg);
}
.process-head { max-width: 900px; margin-bottom: clamp(48px, 7vw, 80px); }
.process-steps {
  list-style: none;
  border-top: 1px solid var(--border);
}
.step {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 5vw, 80px);
  padding: clamp(32px, 4vw, 56px) 0;
  border-bottom: 1px solid var(--border);
  transition: background .4s var(--ease), padding-left .4s var(--ease);
}
.step:hover {
  background: linear-gradient(90deg, rgba(245,197,24,0.04), transparent 60%);
  padding-left: clamp(8px, 1vw, 16px);
}
.step-head {
  display: flex; flex-direction: column; gap: 8px;
}
.step-num {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.step-head h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.025em;
}
.step-time {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}
.step p {
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 60ch;
  line-height: 1.6;
  align-self: center;
}

/* ==========================================================
   Testimonial
   ========================================================== */
.testimonial {
  padding: var(--section-y) 0;
  background: var(--bg-2);
  border-block: 1px solid var(--border);
}
.testimonial .eyebrow { margin-bottom: 32px; }
.quote-card {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
}
.quote-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(245,197,24,0.08), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(217,164,65,0.06), transparent 50%);
  pointer-events: none;
}
.quote-mark {
  width: 56px; height: 56px;
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: 28px;
}
.quote-card blockquote p {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 3.6vw, 3rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--text);
}
.quote-card .hl { color: var(--accent); font-style: italic; }
.quote-card figcaption {
  margin-top: 36px;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--f-mono);
  font-size: 0.85rem;
  position: relative;
}
.quote-card .author { color: var(--text); letter-spacing: 0.04em; }
.quote-card .author-role { color: var(--text-mute); font-size: 0.78rem; letter-spacing: 0.08em; }

/* ==========================================================
   Studio
   ========================================================== */
.studio {
  padding: var(--section-y) 0;
  background: var(--bg);
}
.studio-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.studio-single { max-width: 980px; }
.studio-grid-photo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.studio-photo {
  margin: 0;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-2);
  aspect-ratio: 5/6;
}
.studio-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
  transition: transform 1.4s var(--ease);
}
.studio-photo:hover img { transform: scale(1.03); }
.studio-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(10,10,11,0.85) 100%);
  pointer-events: none;
}
.studio-photo figcaption {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: #FAF7F0;
  z-index: 1;
}
@media (max-width: 1024px) {
  .studio-grid-photo { grid-template-columns: 1fr; }
  .studio-photo { aspect-ratio: 16/10; }
}
.studio-body {
  margin-top: 28px;
  color: var(--text-dim);
  font-size: 1.1rem;
  max-width: 56ch;
}
.studio-meta {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border-top: 1px solid var(--border);
}
.studio-meta > div {
  padding: 20px 0;
  display: flex; flex-direction: column; gap: 6px;
  border-bottom: 1px solid var(--border);
}
.meta-k {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.meta-v { color: var(--text); font-size: 1rem; }

.studio-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
  position: sticky; top: 100px;
}
.card-row {
  display: flex; justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.card-row:first-child { padding-top: 0; }
.card-row span:first-child { color: var(--text-mute); }
.status { color: var(--text); display: inline-flex; align-items: center; gap: 8px; }
.ping {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 12px rgba(74,222,128,0.7);
  animation: pulse 2s var(--ease) infinite;
}
.studio-card .btn { margin-top: 24px; }

/* ==========================================================
   Contact
   ========================================================== */
.contact {
  padding: var(--section-y) 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}
.contact-head { max-width: 900px; margin-bottom: clamp(48px, 7vw, 80px); }
.contact-sub {
  margin-top: 28px;
  color: var(--text-dim);
  font-size: 1.1rem;
  max-width: 56ch;
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.form { display: flex; flex-direction: column; gap: 0; }
.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}
.field {
  position: relative;
  min-width: 0;
  padding: 22px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.field-full { grid-column: 1 / -1; }
.field-label {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  padding: 13px 15px;
  font-size: 1.05rem;
  color: var(--text);
  outline: none;
  border-radius: 0;
  resize: vertical;
  font-family: var(--f-sans);
  transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.theme-light .field input,
.theme-light .field select,
.theme-light .field textarea {
  background: #FDFBF6;
  border-color: rgba(10,10,11,0.22);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-mute); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--accent-2); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23979088%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%209l6%206%206-6%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 14px;
  padding-right: 42px;
}.field select option { background: var(--bg-2); color: var(--text); }
.theme-light .field select option { background: #FDFBF6; }
.field textarea { min-height: 120px; }
/* the sliding underline belonged to the old borderless fields */
.field-line { display: none; }
.form-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.form-fine { color: var(--text-mute); font-size: 0.85rem; }

.contact-side {
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px 28px;
  position: sticky; top: 100px;
}
.side-block {
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.side-block:last-child { border-bottom: none; }
.side-k {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.side-v { color: var(--text); font-size: 1rem; line-height: 1.5; }
.side-v[href]:hover { color: var(--accent); }

/* ==========================================================
   Footer
   ========================================================== */
.footer {
  background: var(--bg);
  padding-top: clamp(100px, 13vw, 200px);
  position: relative;
  overflow: hidden;
}
/* the tall lead-in exists to make room for the closing CTA and wordmark; without
   them (the service pages) it just reads as dead space */
.footer:not(:has(.footer-cta)) { padding-top: clamp(40px, 5vw, 72px); }
/* lift footer text above the scene-3d canvas (z-index 8) so the finale nugget
   rises BEHIND the readable wordmark; the footer's own dark bg stays below it */
.footer .container { position: relative; z-index: 20; }
/* Same lift for the process list: the fixed 3D canvas sits at z-index 8, so
   without this the nugget would pass in front of the steps instead of behind. */
.process .container { position: relative; z-index: 20; }

/* award-grade footer : a big closing CTA, the wordmark, then the columns */
.footer-cta {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  padding-bottom: clamp(56px, 8vw, 110px);
  border-bottom: 1px solid var(--border);
}
.footer-cta .eyebrow { justify-content: center; }
.footer-cta-title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.footer-cta-title .italic { font-style: italic; color: var(--accent); }
.footer-banner {
  text-align: center;
  padding: clamp(48px, 8vw, 96px) 0 clamp(28px, 4vw, 56px);
}
.footer-mark {
  font-family: var(--f-sans);
  font-weight: 500;
  font-style: normal;
  text-align: center;
  font-size: clamp(2.4rem, 9vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--text);
}
.footer-mark span { color: var(--accent); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.footer-grid-3 { grid-template-columns: 1.4fr 1fr 1fr; }
.foot-col p { color: var(--text-dim); font-size: 0.95rem; line-height: 1.7; }
.foot-col a { transition: color .25s var(--ease); }
.foot-col a:hover { color: var(--accent); }
.foot-k {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: block;
  margin-bottom: 16px;
}
.footer-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(28px, 4vw, 44px) 0;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-top {
  color: var(--text-mute);
  transition: color .25s var(--ease);
}
.footer-top:hover { color: var(--accent); }

/* ==========================================================
   Reveal animation
   ========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-clock { display: none; }
  .nav-inner { grid-template-columns: 1fr auto auto; }

  .hero-bottom { grid-template-columns: 1fr; gap: 40px; }
  .hero-cta { justify-content: flex-start; }

  .pillar, .pillar.reverse { grid-template-columns: 1fr; gap: 40px; }
  .pillar.reverse .pillar-text { order: 1; }
  .pillar.reverse .pillar-visual { order: 2; }
  .pillar-visual { aspect-ratio: 16/10; }

  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-card:nth-child(2) { border-right: none; }

  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-card.tall { grid-row: auto; min-height: 280px; }

  .step { grid-template-columns: 1fr; gap: 14px; }
  .step-head { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 16px; }
  .step-head h3 { font-size: 2.2rem; }

  .studio-grid { grid-template-columns: 1fr; }
  .studio-card { position: static; }

  .globe-grid { grid-template-columns: 1fr; gap: 8px; }
  .globe-copy { max-width: none; }
  .globe-stage { max-height: none; max-width: 520px; margin: 0 auto; }

  .contact-grid { grid-template-columns: 1fr; }
  .contact-side { position: static; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .nav-toggle { display: inline-flex; }
  .nav-actions .btn-pill { display: none; }

  .hero { padding-top: 120px; }

  /* keep the paired fields (name + company, email + website) side by side */
  .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }

  .hero-title { font-size: clamp(2.5rem, 11.6vw, 3.6rem); letter-spacing: -0.025em; }
  .hero-title .word { margin-right: 0.06em; }
  .field { padding: 14px 0; }
  .field-label { font-size: 0.68rem; letter-spacing: 0.08em; }
  /* 16px keeps iOS from zooming the viewport on focus */
  .field input,
  .field select,
  .field textarea { font-size: 1rem; padding: 12px; }

  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-card { border-right: none; }

  .bento-grid { grid-template-columns: 1fr; gap: 12px; }
  .bento-card.span-2 { grid-column: span 1; }
  .bento-card.tall { min-height: 320px; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-line { flex-direction: column; align-items: flex-start; }

  .form-foot { flex-direction: column; align-items: flex-start; }
  .form-foot .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-title .word { transform: none; }
  .hero-bottom, .hero-scroll { opacity: 1; }
}

/* ==========================================================
   Client logo strip (FI page)
   ========================================================== */
.logos {
  padding: clamp(48px, 7vw, 88px) 0;
  border-bottom: 1px solid var(--border);
}
.results-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.result-cell {
  /* horizontal padding matches .kpi-card (28px): the two strips sit directly
     above and below each other on the same 4-column grid, so anything else
     leaves their text starting on different vertical lines */
  padding: clamp(28px, 3.5vw, 56px) 28px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 3.5vw, 56px);
  min-height: clamp(200px, 22vw, 280px);
  /* same gold wash the KPI cards below use, so the two strips behave alike */
  background: linear-gradient(180deg, transparent, rgba(245, 197, 24, 0.012));
  transition: background .4s var(--ease);
}
.result-cell:hover { background: rgba(245, 197, 24, 0.04); }
.result-cell:last-child { border-right: 1px solid var(--border); }
.result-stat {
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.35;
  color: var(--text-dim);
  letter-spacing: -0.01em;
  max-width: 12ch;
}
.result-stat strong {
  color: var(--text);
  font-weight: 700;
}
/* typed-in on scroll: characters land one after another, with a caret */
/* only hidden once JS has armed the effect, so the text is never lost */
.result-stat.is-armed .ch { opacity: 0; }
.result-stat.is-typing .ch {
  /* each character fades and settles rather than snapping on */
  animation: rs-ch 320ms var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 45ms + var(--cell) * 520ms);
}
.result-stat.is-typed .ch { opacity: 1; animation: none; }
@keyframes rs-ch {
  from { opacity: 0; transform: translateY(0.14em); }
  to   { opacity: 1; transform: none; }
}
.result-stat.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px; height: 0.95em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: var(--accent);
  animation: rs-caret 0.85s step-end infinite;
}
@keyframes rs-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .result-stat .ch { opacity: 1; animation: none; }
  .result-stat.is-typing::after { display: none; }
}
/* Every wordmark gets an identical box and is drawn to the full box width, so the
   four marks line up on a common left edge and read at the same scale. */
.result-logo-link {
  align-self: flex-start;
  display: flex;
  align-items: center;
  width: clamp(132px, 14vw, 176px);
  height: clamp(46px, 5vw, 62px);
}
.result-logo {
  width: 100%;
  height: auto;
  max-height: 100%;
}
img.result-logo {
  object-fit: contain;
  object-position: left center;
  opacity: 0.92;
  transition: opacity 0.35s ease, transform 0.35s var(--ease);
}
.result-cell:hover img.result-logo { opacity: 1; transform: translateY(-2px); }
/* Löfbergs (black artwork) and Nordqvist (white artwork) carry no usable colour of
   their own, so they are painted through their alpha mask to hit the exact brand hue. */
/* masked marks carry no colour of their own, so they are painted brand-correct */
.result-logo.is-mask {
  display: block;
  opacity: 0.92;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: opacity 0.35s ease, transform 0.35s var(--ease);
}
/* aspect-ratio matches each source file, so width drives height and every mark
   ends up exactly as wide as its neighbours */
.logo-lofbergs {
  background-color: #3C1053;
  aspect-ratio: 159.26 / 51.09;
  -webkit-mask-image: url("images/logos/lofbergs.svg");
  mask-image: url("images/logos/lofbergs.svg");
}
.logo-nordqvist {
  background-color: #09543E;
  aspect-ratio: 473 / 123;
  -webkit-mask-image: url("images/logos/nordqvist-light.png");
  mask-image: url("images/logos/nordqvist-light.png");
}
.result-cell:hover .result-logo.is-mask { opacity: 1; transform: translateY(-2px); }
@media (max-width: 960px) {
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .result-cell:nth-child(odd) { border-left: 1px solid var(--border); }
  .result-cell:nth-child(even) { border-right: 1px solid var(--border); }
  .result-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .result-cell { min-height: 0; }
}
@media (max-width: 520px) {
  .result-cell {
    padding: 22px 16px;
    gap: 20px;
    min-height: 0;
  }
  .result-stat { font-size: 1rem; max-width: none; }
  .result-logo, .result-logo.is-mask { max-height: 26px; }
}

/* ==========================================================
   Packages (FI page)
   ========================================================== */
.packages {
  padding: var(--section-y) 0;
  background: var(--bg);
  border-block: 1px solid var(--border);
}
.packages-head { margin-bottom: clamp(40px, 6vw, 72px); }
.packages-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.package-card {
  position: relative;
  border: 1px solid var(--border-strong, rgba(255,255,255,0.14));
  border-radius: 20px;
  padding: clamp(30px, 4vw, 48px) clamp(28px, 4vw, 48px) clamp(34px, 4.4vw, 52px);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.package-card:hover {
  transform: translateY(-5px);
  border-color: rgba(245,197,24,0.45);
  box-shadow: 0 30px 70px -34px rgba(245,197,24,0.45);
}
.package-card.featured:hover {
  border-color: var(--accent);
  box-shadow: 0 34px 80px -30px rgba(245,197,24,0.6);
}
@media (prefers-reduced-motion: reduce) {
  .package-card:hover { transform: none; }
}
.package-card.featured {
  border-color: rgba(245,197,24,0.45);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245,197,24,0.10), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
}
.package-tag {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.package-card.featured .package-tag { color: var(--accent); }
.package-title {
  font-family: var(--f-serif);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.package-price {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 2.5vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--accent);
}
/* both cards state their price at the same size, so neither shouts over the other */
.package-price strong { font-weight: 400; }
.package-body { color: var(--text-dim); font-size: 1rem; max-width: 46ch; }
.package-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.package-list li {
  display: flex; gap: 12px; align-items: baseline;
  color: var(--text-dim); font-size: 0.95rem;
}
.package-list li::before {
  content: "✦";
  color: var(--accent);
  font-size: 0.7rem;
  flex: none;
}
.package-cta { margin-top: auto; padding-top: 24px; }
.package-fine {
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-mute);
}
@media (max-width: 860px) {
  .packages-grid { grid-template-columns: 1fr; }
}

/* Language switch in nav */
.nav-lang {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.nav-lang:hover { color: var(--accent); border-color: rgba(245,197,24,0.4); }

/* globe origin label (FI page) */
.g-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--accent);
}

/* ==========================================================
   Contact form : success panel (replaces the form on send)
   ========================================================== */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: clamp(32px, 4.5vw, 60px);
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  animation: form-success-in 0.55s var(--ease) both;
}
.form-success-icon {
  display: block;
  width: clamp(64px, 7vw, 88px);
  color: var(--accent);
}
.form-success-icon svg { width: 100%; height: auto; }
/* the shell draws itself in, then the facets and sparks settle */
.nug-shell {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: nug-draw 1.1s var(--ease-out) 0.15s forwards;
}
.nug-lit { opacity: 0; animation: nug-lit-in 0.8s ease 0.75s forwards; }
.nug-facets { opacity: 0; animation: nug-fade 0.7s ease 0.9s forwards; }
.nug-facets path { stroke-opacity: 0.55; }
.nug-spark { opacity: 0; animation: nug-fade 0.6s ease 1.3s forwards; }
@keyframes nug-lit-in { to { opacity: 0.16; } }
@keyframes nug-draw { to { stroke-dashoffset: 0; } }
@keyframes nug-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .nug-shell { animation: none; stroke-dashoffset: 0; }
  .nug-facets, .nug-spark { animation: none; opacity: 1; }
}
.form-success-title {
  font-family: var(--f-serif);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--text);
}
.form-success-body {
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 42ch;
}
@keyframes form-success-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .form-success { animation: none; }
}

/* ==========================================================
   Chat widget : flat yellow + white, no gradients
   ========================================================== */
.rg-chat {
  position: fixed;
  z-index: 60;
  right: max(1.25rem, env(safe-area-inset-right, 0px));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
  --rg-yellow: #F5C518;
  --rg-ink: #0A0A0B;
  --rg-white: #FFFFFF;
}
.rg-chat.is-revealed { opacity: 1; pointer-events: auto; }
@media (min-width: 768px) {
  .rg-chat { right: max(2rem, env(safe-area-inset-right, 0px)); bottom: max(2rem, env(safe-area-inset-bottom, 0px)); }
}
@media print { .rg-chat { display: none; } }

/* ---------- pill ---------- */
.rg-chat-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 22px 12px 18px;
  border-radius: 999px;
  background: var(--rg-yellow);
  color: var(--rg-white);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition: transform 0.25s var(--ease);
}
.rg-chat-pill:hover {
  transform: translateY(-2px);
}
.rg-chat-pill-icon { width: 24px; height: 24px; color: var(--rg-white); flex: none; }
.rg-chat-pill-dot { fill: var(--rg-yellow); }
.rg-chat-pill-label { white-space: nowrap; }
.rg-chat-badge {
  position: absolute; top: 2px; right: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--rg-white);
}
/* while the panel is shut, the pill nudges every few seconds to catch the eye */
.rg-chat:not(.is-open) .rg-chat-pill {
  animation: rg-chat-nudge 4s ease-in-out infinite;
}
/* hover takes over cleanly instead of fighting the keyframes */
.rg-chat:not(.is-open) .rg-chat-pill:hover { animation: none; }
.rg-chat:not(.is-open) .rg-chat-pill-icon {
  animation: rg-chat-wiggle 4s ease-in-out infinite;
}
@keyframes rg-chat-nudge {
  0%, 74%, 100% { transform: translateY(0) rotate(0deg); }
  79% { transform: translateY(-6px) rotate(-2.5deg); }
  84% { transform: translateY(0) rotate(2deg); }
  89% { transform: translateY(-3px) rotate(-1.5deg); }
  94% { transform: translateY(0) rotate(0.5deg); }
}
@keyframes rg-chat-wiggle {
  0%, 74%, 100% { transform: rotate(0); }
  78% { transform: rotate(-18deg); }
  82% { transform: rotate(15deg); }
  86% { transform: rotate(-10deg); }
  90% { transform: rotate(6deg); }
  95% { transform: rotate(-2deg); }
}

/* ---------- panel ---------- */
.rg-chat-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: min(360px, calc(100vw - 2.5rem));
  max-height: min(72dvh, 34rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: var(--rg-white);
  transform-origin: bottom right;
  animation: rg-chat-pop 0.3s var(--ease);
}
.rg-chat-panel[hidden] { display: none; }
@keyframes rg-chat-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.rg-chat-head {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: var(--rg-yellow);
}
.rg-chat-avatar {
  position: relative;
  display: block;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
}
.rg-chat-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.rg-chat-online {
  position: absolute; right: 0; bottom: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--rg-white);
}
.rg-chat-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rg-chat-name {
  font-family: var(--f-serif);
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--rg-ink);
}
.rg-chat-reply {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(10,10,11,0.65);
}
.rg-chat-close {
  position: absolute; top: 10px; right: 10px;
  padding: 6px;
  color: rgba(10,10,11,0.55);
  transition: color 0.25s var(--ease);
}
.rg-chat-close:hover { color: var(--rg-ink); }
.rg-chat-close svg { width: 15px; height: 15px; }

.rg-chat-body {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 20px 22px;
  background: var(--rg-white);
}
.rg-chat-time {
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: rgba(10,10,11,0.4);
}
.rg-chat-msg { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; }
.rg-chat-msg-mark {
  display: block;
  width: 26px; height: 26px;
  flex: none;
  margin-top: 2px;
  border-radius: 50%;
  overflow: hidden;
}
.rg-chat-msg-mark img { width: 100%; height: 100%; object-fit: cover; }
.rg-chat-bubble {
  max-width: 85%;
  min-height: 44px;
  display: flex; align-items: center;
  padding: 12px 16px;
  border: 1px solid rgba(10,10,11,0.10);
  border-radius: 14px 14px 14px 4px;
  background: #FBF9F4;
  color: #1C1917;
  font-size: 0.95rem;
  line-height: 1.5;
}
.rg-chat-dots { display: inline-flex; gap: 5px; }
.rg-chat-dots[hidden] { display: none; }
.rg-chat-dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(10,10,11,0.35);
  animation: rg-chat-dot 1.05s ease-in-out infinite;
}
.rg-chat-dots i:nth-child(2) { animation-delay: 0.14s; }
.rg-chat-dots i:nth-child(3) { animation-delay: 0.28s; }
@keyframes rg-chat-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.rg-chat-channels { margin-top: 26px; }
.rg-chat-channels[hidden] { display: none; }
.rg-chat-choose {
  margin-bottom: 14px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(10,10,11,0.45);
  animation: rg-chat-rise 0.35s var(--ease) both;
}
.rg-chat-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rg-chat-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
  animation: rg-chat-rise 0.5s cubic-bezier(0.22, 1.25, 0.36, 1) both;
}
.rg-chat-btn:hover { transform: translateY(-2px); }
.rg-chat-buttons .rg-chat-btn:nth-child(1) { animation-delay: 0.08s; }
.rg-chat-buttons .rg-chat-btn:nth-child(2) { animation-delay: 0.18s; }
.rg-chat-btn svg { width: 19px; height: 19px; flex: none; }
.rg-chat-wa {
  background: var(--rg-yellow);
  color: var(--rg-white);
}
.rg-chat-wa:hover { background: #FFD338; }
.rg-chat-mail {
  background: var(--rg-white);
  border: 1px solid rgba(10,10,11,0.18);
  color: var(--rg-ink);
}
.rg-chat-mail:hover { background: #FBF9F4; }
@keyframes rg-chat-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rg-chat-panel, .rg-chat-pill, .rg-chat-pill-icon, .rg-chat-dots i,
  .rg-chat-choose, .rg-chat-btn { animation: none; }
}

/* =====================================================
   Footer legal : quiet by design, findable when needed
   ===================================================== */
.footer-legal {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 0 0 clamp(24px, 4vw, 40px);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(107, 107, 112, 0.5);
}
.footer-legal a,
.footer-legal button {
  color: inherit; text-decoration: none;
  background: none; border: 0; padding: 0;
  font: inherit; letter-spacing: inherit; cursor: pointer;
  transition: color 0.35s var(--ease);
}
.footer-legal a:hover,
.footer-legal button:hover { color: var(--text-dim); }

/* =====================================================
   Consent : required in the EEA, kept out of the way
   ===================================================== */
.consent {
  position: fixed; z-index: 90;
  left: var(--pad-x); right: auto;
  bottom: clamp(16px, 3vw, 28px);
  margin-inline: 0; max-width: 400px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 12px 14px;
  background: rgba(14, 14, 16, 0.42);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  animation: consent-in 0.6s var(--ease-out) both;
}
.consent[hidden] { display: none; }
@keyframes consent-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.consent-text {
  flex: 1 1 190px; margin: 0;
  font-size: 0.92rem; line-height: 1.5;
  color: var(--text-dim);
}
.consent-text a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
.consent-btn {
  font-family: var(--f-mono); font-size: 0.85rem; letter-spacing: 0.05em;
  padding: 11px 20px; border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-dim); cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.consent-btn:hover { color: var(--text); border-color: var(--text-mute); }
.consent-btn.consent-yes {
  background: var(--accent); border-color: var(--accent);
  color: #0A0A0B; font-weight: 500;
}
.consent-btn.consent-yes:hover { background: var(--accent-2); border-color: var(--accent-2); }
/* on a phone it spans the width, lifted clear of the chat pill */
@media (max-width: 560px) {
  .consent {
    right: var(--pad-x); max-width: none;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    padding: 10px 12px; gap: 8px;
  }
  .consent-text { flex: 1 1 100%; font-size: 0.85rem; line-height: 1.45; }
  .consent-actions { width: 100%; justify-content: flex-end; }
  .consent-btn { font-size: 0.8rem; padding: 11px 18px; flex: 1 1 auto; }
}

/* =====================================================
   Legal pages
   ===================================================== */
.legal {
  max-width: 760px; margin: 0 auto;
  padding: clamp(7rem, 14vw, 11rem) 0 var(--section-y);
}
.legal-back {
  display: inline-block; margin-bottom: 2.5rem;
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.06em;
  color: var(--text-mute); text-decoration: none;
  transition: color 0.3s var(--ease);
}
.legal-back:hover { color: var(--text); }
.legal h1 {
  font-family: var(--f-serif);
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 400; line-height: 1.05; letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}
.legal-lede {
  margin: 0 0 3rem; padding-left: 1.15rem;
  border-left: 2px solid var(--accent);
  font-size: clamp(1.02rem, 2vw, 1.15rem); line-height: 1.65;
  color: var(--text-dim);
}
.legal-lede strong { color: var(--text); font-weight: 600; }
.legal h2 {
  margin: 2.75rem 0 0.85rem;
  font-size: 1.06rem; font-weight: 600; letter-spacing: -0.005em;
  color: var(--text);
}
.legal p, .legal li { font-size: 0.95rem; line-height: 1.75; color: var(--text-dim); }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.legal li { margin-bottom: 0.5rem; }
.legal strong { color: var(--text); font-weight: 600; }
.legal a {
  color: var(--text); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--text-mute);
}
.legal a:hover { text-decoration-color: var(--accent); }
.legal table {
  width: 100%; border-collapse: collapse;
  margin: 0 0 1.5rem; font-size: 0.86rem;
}
.legal th, .legal td {
  text-align: left; padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim); vertical-align: top;
}
.legal th {
  font-family: var(--f-mono); font-size: 0.7rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 400;
}
.legal-updated {
  margin-top: 3.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--text-mute);
}

@media (max-width: 640px) {
  .consent { flex-direction: column; align-items: stretch; }
  .consent-actions { justify-content: stretch; }
  .consent-btn { flex: 1; }
  .legal table { display: block; overflow-x: auto; }
}

/* =====================================================
   Service pages : /fi/palvelut/
   ===================================================== */
.svc-nav .nav-links a.is-active { color: var(--text); }
.svc-nav .nav-links a.is-active::after {
  content: ''; display: block; height: 1px; margin-top: 4px;
  background: var(--accent);
}

.svc-hero {
  padding: clamp(8rem, 15vw, 12rem) 0 clamp(3rem, 6vw, 5rem);
  /* holds the absolutely positioned nugget canvas */
  position: relative;
  overflow: hidden;
}
.svc-hero > .container { position: relative; z-index: 2; }
.svc-h1 {
  max-width: 18ch;
  margin: 0.6rem 0 1.5rem;
}
.svc-lede {
  max-width: 62ch;
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  line-height: 1.65;
  color: var(--text-dim);
  margin: 0 0 2.25rem;
}
.svc-cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.svc-cta-ghost {
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--text-mute); text-decoration: none;
  transition: color 0.3s var(--ease);
}
.svc-cta-ghost:hover { color: var(--text); }

.svc-proof { padding: 0 0 clamp(3rem, 7vw, 5rem); }
.svc-proof-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.svc-proof-item {
  display: flex; flex-direction: column; gap: 7px;
  padding: 22px 20px;
  background: var(--bg);
}
.svc-proof-k {
  font-family: var(--f-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-mute);
}
.svc-proof-v {
  font-size: 1.05rem; font-weight: 600; color: var(--text);
  letter-spacing: -0.01em;
}

.svc-block { padding: var(--section-y) 0; }
/* The last block runs straight into the footer's own tall lead-in, and both are
   dark, so the two paddings read as one large void. Trim the section's half. */
main > .svc-block:last-child { padding-bottom: clamp(28px, 3.5vw, 48px); }
.svc-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.svc-head .display { margin: 0.6rem 0 1rem; }
.svc-sub { font-size: 1rem; line-height: 1.65; color: var(--text-dim); margin: 0; }

.svc-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
/* The hub cards link straight into their service pages, so the whole card is
   the target and it says so on hover. */
.svc-card-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.svc-card-link:hover { background: rgba(245, 197, 24, 0.04); }
.svc-card-link:hover h3 { color: var(--accent); }
.svc-card-more {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.75;
  transition: opacity 0.3s var(--ease);
}
.svc-card-link:hover .svc-card-more { opacity: 1; }
.svc-card-link:hover .svc-card-more span { display: inline-block; transform: translateX(3px); }
.svc-card-more span { transition: transform 0.3s var(--ease); }

.svc-card {
  background: var(--bg);
  padding: clamp(24px, 3vw, 32px);
  transition: background 0.4s var(--ease);
}
.svc-card:hover { background: var(--bg-2); }
.svc-card-num {
  display: block; margin-bottom: 14px;
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--accent);
}
.svc-card h3 {
  font-size: 1.02rem; font-weight: 600; letter-spacing: -0.005em;
  margin: 0 0 0.6rem; color: var(--text);
}
.svc-card p { font-size: 0.92rem; line-height: 1.7; color: var(--text-dim); margin: 0; }

.svc-logos-block { padding: clamp(3rem, 6vw, 4.5rem) 0; }
/* equal columns so the row spans the full container, as on the home page */
.svc-logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* start, not stretch: a stretched grid item ignores its aspect-ratio */
  align-items: start;
  margin-top: 1.75rem;
}
/* each mark carries its result, in a square ruled off like the home page strip */
.svc-logo-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 2.5vw, 32px);
  padding: clamp(22px, 2.6vw, 34px) clamp(20px, 2.4vw, 30px);
  border-left: 1px solid var(--border);
  border-block: 1px solid var(--border);
}
.svc-logo-cell:last-child { border-right: 1px solid var(--border); }
.svc-logo-stat {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-dim);
}
.svc-logo-stat strong { color: var(--text); font-weight: 700; }
/* One box for all four marks, sized to the tallest lockup (Löfbergs) at full
   width. Each mask is contained and centred inside it, so the marks share a
   common centre line instead of each sitting on the cell floor. */
.svc-logo-link {
  display: block;
  width: 100%;
  aspect-ratio: 159.26 / 51.09;
}
.svc-logo {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.88);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center center; mask-position: center center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: background-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.svc-logo.is-lofbergs  { -webkit-mask-image: url("images/logos/lofbergs.svg");        mask-image: url("images/logos/lofbergs.svg"); }
.svc-logo.is-nordqvist { -webkit-mask-image: url("images/logos/nordqvist-light.png"); mask-image: url("images/logos/nordqvist-light.png"); }
.svc-logo.is-shumi     { -webkit-mask-image: url("images/logos/shumi.png");           mask-image: url("images/logos/shumi.png"); }
.svc-logo.is-restaeq   { -webkit-mask-image: url("images/logos/restaeq.png");         mask-image: url("images/logos/restaeq.png"); }

/* On hover the cell turns to cream and each mark takes its brand colour. The
   brand hues are dark, so they need the light ground to read at all. */
.svc-logo-cell { transition: background-color 0.35s var(--ease); }
.svc-logo-cell:hover { background-color: #F2EFE9; }
.svc-logo-cell:hover .svc-logo-stat { color: #4A4843; }
.svc-logo-cell:hover .svc-logo-stat strong { color: #16151A; }
.svc-logo-cell:hover .svc-logo { transform: translateY(-2px); }
.svc-logo-cell:hover .is-lofbergs  { background-color: #3C1053; }
.svc-logo-cell:hover .is-nordqvist { background-color: #09543E; }
.svc-logo-cell:hover .is-shumi     { background-color: #16151A; }
.svc-logo-cell:hover .is-restaeq   { background-color: #1B3A8C; }
/* on phones the four squares hold together as one 2x2 block */
@media (max-width: 700px) {
  .svc-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-logo-stat { font-size: 0.9rem; }
  .svc-logo-cell { padding: 16px 14px; gap: 12px; }
  .svc-logo-cell:nth-child(even) { border-right: 1px solid var(--border); }
  /* the shared rule between the two rows would otherwise double up */
  .svc-logo-cell:nth-child(n+3) { border-top: 0; }
  .svc-logo-link { max-width: 82%; }
}
@media (max-width: 700px) {
  .svc-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}

/* the answers read better in a narrower column than the full container */
.faq {
  border-top: 1px solid var(--border);
  margin-left: auto;
  width: min(100%, 70%);
}
@media (max-width: 960px) { .faq { width: 100%; } }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 0;
  font-size: 1rem; font-weight: 500; color: var(--text);
  transition: color 0.3s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; flex-shrink: 0;
  font-family: var(--f-mono); font-size: 1.1rem; line-height: 1;
  color: var(--accent);
  transition: transform 0.35s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--accent); }
.faq-item p {
  margin: 0 0 22px; max-width: 68ch;
  font-size: 0.93rem; line-height: 1.75; color: var(--text-dim);
}

.svc-related {
  display: grid; gap: 12px; margin-top: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.svc-related-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px;
  border: 1px solid var(--border); border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.svc-related-card:hover { border-color: var(--border-strong); background: var(--surface); }
.svc-related-k { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.svc-related-v { font-size: 0.85rem; line-height: 1.55; color: var(--text-mute); }

.svc-price-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.svc-price-card {
  padding: clamp(26px, 3vw, 34px);
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface);
}
.svc-price-card.featured { border-color: var(--accent-soft); background: var(--surface-2); }
.svc-price-card .package-title { margin: 0.5rem 0 0.75rem; }
.svc-price-card .package-body { margin: 0; }

@media (max-width: 860px) {
  .svc-nav .nav-links { display: none; }
}

/* ==========================================================
   Case study : screenshot slider + brand block
   ========================================================== */
.case-slider {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
  /* A grid item's automatic minimum size is its min-content width, which the
     slides push past the column and off the right edge. min-width:0 fixes that
     without capping the width, so the deliberate desktop bleed still works. */
  min-width: 0;
  /* the slides carry their own frame, so drop the pillar shell entirely */
  aspect-ratio: auto;
  background: none;
  border: 0;
  padding: 0;
}
.case-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: 14px;
}
.case-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .case-track { scroll-behavior: auto; } }
.case-track figure {
  margin: 0;
  flex: 0 0 100%;
  scroll-snap-align: start;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-2);
}
/* every slide holds the same 4:3 frame, matching the shots' own proportions so
   nothing is cropped. height:auto is required: the width/height attributes are
   a presentational hint that otherwise makes the box definite and drops the
   aspect-ratio, stretching the shot to its full 1080px. */
.case-track img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.case-track figcaption {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 11px 14px;
  border-top: 1px solid var(--border);
}
.case-nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.case-arrow {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-dim);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.case-arrow:hover { color: var(--accent); border-color: var(--accent); }
.case-arrow svg { width: 15px; height: 15px; }
.case-dots { display: flex; gap: 8px; }
.case-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.case-dot.is-active { background: var(--accent); transform: scale(1.3); }

/* On a wide screen the case screenshots break out of the container and run
   off the left edge, which buys them a lot more room than the column allows. */
@media (min-width: 961px) {
  #case .pillar { grid-template-columns: 1.3fr 1fr; }
  #case .case-slider {
    /* distance from the container's content edge to the viewport edge */
    --bleed: calc(max((100vw - 1280px) / 2, 0px) + var(--pad-x));
    margin-left: calc(-1 * var(--bleed));
    width: calc(100% + var(--bleed));
  }
  /* the edge that leaves the screen loses its frame */
  #case .case-track,
  #case .case-track figure {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  #case .case-track figure { border-left: 0; }
  /* keep the controls under the part that is actually on screen */
  #case .case-nav { padding-left: var(--bleed); }
}

/* international case block under the globe */
.globe-case {
  grid-column: 1 / -1;
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--border);
}
/* the case reuses the pillar layout; the globe-case already draws the divider */
.globe-case .pillar { border-top: 0; padding: 0; }
.globe-case-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.globe-case p {
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 56ch;
}
.globe-case p + p { margin-top: 16px; }
.case-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
/* both marks are painted through their alpha, so they read white on dark */
.case-brand-mark {
  display: block;
  background-color: rgba(255,255,255,0.88);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.case-brand-mark.is-nordqvist {
  width: clamp(124px, 12vw, 160px);
  aspect-ratio: 473 / 123;
  -webkit-mask-image: url("images/logos/nordqvist-light.png");
  mask-image: url("images/logos/nordqvist-light.png");
}
.case-brand-mark.is-lofbergs {
  width: clamp(126px, 12.2vw, 164px);
  aspect-ratio: 159.26 / 51.09;
  -webkit-mask-image: url("images/logos/lofbergs.svg");
  mask-image: url("images/logos/lofbergs.svg");
}
.case-brand-tag {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 860px) {
  .globe-case-grid { grid-template-columns: 1fr; }
}

/* ===== Pillar list tooltips: jargon + benefit on hover ===== */
.pillar-list li[data-tip] { position: relative; cursor: help; }
.pillar-list li[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  width: min(560px, 90vw);
  background: #101014;
  color: #EDEDF0;
  border: 1px solid rgba(245, 197, 24, 0.35);
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 30;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.pillar-list li[data-tip]:hover::after,
.pillar-list li[data-tip]:focus-within::after,
.pillar-list li[data-tip].is-tip-open::after { opacity: 1; transform: translateY(0); }
/* Touch has no hover, so the same panel opens on tap (script.js toggles the
   class). It used to be hidden outright, which put the explanation out of
   reach on every phone. */
@media (hover: none) {
  .pillar-list li[data-tip] { cursor: pointer; }
  /* a tap target that reads as one, plus room for the marker */
  .pillar-list li[data-tip]::before {
    content: "";
    position: absolute;
    inset: -6px -8px;
    border-radius: 8px;
  }
  .pillar-list li[data-tip].is-tip-open { background: rgba(245, 197, 24, 0.06); }
  .pillar-list li[data-tip]::after {
    left: 0; right: auto;
    width: min(560px, calc(100vw - 40px));
    font-size: 0.9rem;
    padding: 14px 16px;
  }
}

/* contextual link from a pillar into its service page */
.pillar-more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  border-bottom: 1px solid rgba(245,197,24,0.35);
  padding-bottom: 4px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.pillar-more:hover { color: #FFD33D; border-color: #FFD33D; gap: 12px; }

/* ==========================================================
   Client marks
   ========================================================== */
.clients {
  padding: clamp(56px, 7vw, 92px) 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.clients-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-align: center;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.clients-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 5.5vw, 76px);
}
/* painted through the alpha so every mark reads the same weight on dark */
.client-mark {
  display: block;
  background-color: rgba(255,255,255,0.72);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: background-color 0.35s var(--ease);
}
.client-mark:hover { background-color: #FFFFFF; }
.is-accenture {
  width: clamp(112px, 11vw, 146px); aspect-ratio: 800 / 211;
  -webkit-mask-image: url("images/logos/accenture.png"); mask-image: url("images/logos/accenture.png");
}
.is-loreal {
  width: clamp(118px, 11.5vw, 152px); aspect-ratio: 800 / 145;
  -webkit-mask-image: url("images/logos/loreal.png"); mask-image: url("images/logos/loreal.png");
}
.is-honda {
  width: clamp(104px, 10vw, 132px); aspect-ratio: 800 / 97;
  -webkit-mask-image: url("images/logos/honda.png"); mask-image: url("images/logos/honda.png");
}
/* no public transparent asset exists for this one, so it is set as a wordmark */
.client-word {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
  transition: color 0.35s var(--ease);
}
.client-word:hover { color: #FFFFFF; }

/* compact card icons, set in a gold chip so they carry at small size */
.b-icon {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 15px;
  background: rgba(245,197,24,0.16);
  color: var(--accent);
  transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.b-icon svg { width: 28px; height: 28px; display: block; }
.bento-card:hover .b-icon { background: rgba(245,197,24,0.28); transform: translateY(-2px); }
/* the wide lead card gets a faint gold wash */
.bento-card.span-2 {
  background-image: radial-gradient(ellipse 70% 90% at 100% 0%, rgba(245,197,24,0.12), transparent 62%);
}

/* rendered artwork on the two wide feature cards. The renders carry their own
   cream ground, so they are fitted rather than cropped and the band is matched
   to that ground instead of the card white. */
.b-art {
  margin-top: auto;
  margin-inline: -28px;
  margin-bottom: -28px;
  border-radius: 0 0 17px 17px;
  overflow: hidden;
  background: #F6F2EA;
}
.b-art img {
  display: block;
  width: 100%;
  height: 156px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s var(--ease);
}
.bento-card:hover .b-art img { transform: scale(1.04); }
@media (max-width: 700px) {
  .b-art img { height: 128px; }
}

/* Mirrored bleed for the Nordqvist case: its slider sits on the right,
   so it breaks out of the container toward the right viewport edge. */
@media (min-width: 961px) {
  .globe-case .pillar { grid-template-columns: 1fr 1.3fr; }
  .globe-case .case-slider {
    --bleed: calc(max((100vw - 1280px) / 2, 0px) + var(--pad-x));
    margin-right: calc(-1 * var(--bleed));
    width: calc(100% + var(--bleed));
  }
}

/* the compact cards get the same treatment at a smaller height */
.b-art-sm img { height: 104px; }
@media (max-width: 700px) {
  .b-art-sm img { height: 96px; }
}

/* keeps the lede and its pricing note in the same hero column */
.hero-lede-group { display: block; }

/* the platform is shown as the Shopify mark rather than spelled out */
.proof-logo {
  display: block;
  width: auto;
  height: clamp(20px, 2.2vw, 26px);
  /* shopify-mono.png is already white with the "s" knocked out of the bag,
     so the page background shows through it. No filter: brightness(0) here,
     which would flatten the bag and the "s" to the same white and lose the
     letter entirely. */
  opacity: 0.92;
}