/* ==========================================================================
   Veluxe Media — shared stylesheet
   One file for every page. It replaced ~1,000 lines of CSS that used to be
   inlined, and slightly different, on each of the 36 pages.

   Direction: a small web studio, not a luxury brand. Neutral paper, ink,
   one brass accent used only for small marks (never body text on paper —
   it fails contrast there). Type does the work; decoration does not.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --paper:      #F4F4F1;
  --paper-2:    #EBEAE5;   /* quiet band */
  --white:      #FFFFFF;
  --ink:        #131312;
  --ink-2:      #2A2A28;
  --text:       #131312;
  --muted:      #5C5B56;   /* 6.3:1 on --paper */
  --faint:      #6D6C66;   /* quietest text; still 4.6:1 on --paper-2 */
  --rule:       #D6D5CF;
  --rule-dark:  #33332F;
  --on-ink:     #EDECE7;
  --on-ink-muted: #A3A29B; /* 7.4:1 on --ink */
  --accent:     #B08A2E;   /* brass — marks, rules, dots */
  --accent-on-ink: #D6B563;

  --font-sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --max: 1360px;
  --gutter: clamp(20px, 4.2vw, 56px);
  --nav-h: 68px;
  --section: clamp(88px, 11vw, 168px);
  --radius: 3px;

  --z-nav: 100;
  --z-menu: 99;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; }
::selection { background: var(--ink); color: var(--paper); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 1000;
  padding: 10px 16px; background: var(--ink); color: var(--paper);
  font-size: 14px; text-decoration: none; transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap, .container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.band { background: var(--paper-2); }
.band + .section, .section + .band { padding-top: var(--section); }
.dark { background: var(--ink); color: var(--on-ink); }
.dark + .section, .section + .dark { padding-top: var(--section); }
.rule-top { border-top: 1px solid var(--rule); }

/* ── Type ───────────────────────────────────────────────────────────────── */
.label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.dark .label { color: var(--on-ink-muted); }
.label-dot::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px;
  background: var(--accent); border-radius: 50%; vertical-align: 1px;
}

.display {
  font-size: clamp(2.7rem, 7.2vw, 6.6rem);
  font-weight: 600;
  line-height: 0.97;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.034em;
  text-wrap: balance;
}
.h3 {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.lead {
  font-size: clamp(1.1rem, 1.45vw, 1.3rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 44ch;
  text-wrap: pretty;
}
.dark .lead { color: var(--on-ink-muted); }
.body { color: var(--muted); max-width: 60ch; text-wrap: pretty; }
.dark .body { color: var(--on-ink-muted); }
.body + .body { margin-top: 1em; }
.muted { color: var(--muted); }

/* ── Links & buttons ────────────────────────────────────────────────────── */
/* One primary shape: a flat ink rectangle. No pills, no glow. The arrow is
   the only motion — it nudges on hover so the button reads as a direction. */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 0 22px 0 24px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .16s var(--ease);
}
.btn svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.btn:hover { background: var(--ink-2); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(0.98); }
.btn-light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-light:hover { background: var(--white); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-line:hover { background: transparent; border-color: var(--ink); }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: 3px;
  transition: background-size .45s var(--ease);
}
.link:hover { background-size: 0% 1px; background-position: 100% 100%; }
.link svg { width: 14px; height: 14px; }

.text-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--faint); transition: text-decoration-color .2s; }
.text-link:hover { text-decoration-color: currentColor; }

/* ── Nav ────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  height: var(--nav-h);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--rule); }
/* Three zones: brand | pages (truly centred on the page) | actions.
   1fr auto 1fr keeps the middle column centred whatever the side widths. */
.nav .wrap { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.nav .wrap > nav { justify-self: center; }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 20px; }
.wordmark {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.03em;
  text-decoration: none; color: var(--ink); white-space: nowrap;
  justify-self: start;
}
.wordmark i {
  font-style: normal; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); display: inline-block; transform: translateY(-1px);
}
.nav-links { display: flex; gap: 4px; list-style: none; }
.nav-links a {
  display: block; padding: 8px 12px; font-size: 15px; color: var(--muted);
  text-decoration: none; border-radius: var(--radius);
  transition: color .2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a { position: relative; }
/* Underline is positioned, not stacked, so it can't push the text up out of
   line with the language switch and button. */
.nav-links a[aria-current="page"]::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1px; background: var(--ink);
}
.lang { display: flex; align-items: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }
.lang a { padding: 10px 6px; color: var(--faint); text-decoration: none; }
.lang a:hover { color: var(--ink); }
.lang a[aria-current="true"] { color: var(--ink); }
.nav .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }

.burger {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 11px; width: 22px; height: 1.5px; background: var(--ink);
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

/* The menu is a sibling of the nav, not a child: a fixed element inside a
   sticky/filtered header gets trapped in its containing block (Faas lesson). */
.menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: var(--z-menu);
  background: var(--paper);
  padding: 24px var(--gutter) 40px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility 0s linear .25s;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .25s var(--ease); }
.menu ul { list-style: none; border-top: 1px solid var(--rule); }
.menu li { border-bottom: 1px solid var(--rule); }
.menu li a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 0; font-size: 28px; font-weight: 600; letter-spacing: -0.03em;
  text-decoration: none; color: var(--ink);
  transform: translateY(8px); opacity: 0;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.menu.is-open li a { transform: none; opacity: 1; }
.menu.is-open li:nth-child(2) a { transition-delay: .03s; }
.menu.is-open li:nth-child(3) a { transition-delay: .06s; }
.menu.is-open li:nth-child(4) a { transition-delay: .09s; }
.menu.is-open li:nth-child(5) a { transition-delay: .12s; }
.menu.is-open li:nth-child(6) a { transition-delay: .15s; }
.menu li a[aria-current="page"]::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.menu-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.menu-foot .btn { flex: 1; justify-content: space-between; }

@media (max-width: 1024px) {
  .nav-links, .nav .lang, .nav .btn { display: none; }
  .nav .wrap { grid-template-columns: 1fr auto; }
  .nav .wrap > nav { display: none; }
  .burger { display: block; }
}
@media (min-width: 1025px) { .menu { display: none; } }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding-top: clamp(48px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 104px); }
.hero .label { margin-bottom: clamp(28px, 3.5vw, 44px); }
.hero-title { grid-column: 1 / -1; max-width: 16ch; font-size: clamp(2.8rem, 7.6vw, 7.4rem); }
.hero-foot {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: inherit;
  margin-top: clamp(36px, 4.5vw, 64px);
  align-items: start;
}
.hero-foot .lead { grid-column: 1 / span 6; grid-row: 1; }
.hero-actions { grid-column: 1 / span 6; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.hero-facts { grid-column: 8 / -1; grid-row: 1 / span 2; align-self: start; border-top: 1px solid var(--ink); }
.hero-facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.hero-facts dt { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding-top: 3px; }
.hero-facts dd { font-size: 15px; line-height: 1.45; }
@media (max-width: 900px) {
  .hero-foot .lead, .hero-actions, .hero-facts { grid-column: 1 / -1; grid-row: auto; }
  .hero-facts { margin-top: 48px; }
}

/* Page hero for inner pages */
.page-hero { padding-top: clamp(48px, 8vw, 112px); padding-bottom: clamp(48px, 6vw, 88px); }
.page-hero .label { margin-bottom: 28px; }
.page-hero .display { max-width: 16ch; font-size: clamp(2.5rem, 6.2vw, 5.6rem); }
.page-hero .lead { margin-top: 32px; }

/* ── Section heads ──────────────────────────────────────────────────────── */
.head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 20px; margin-bottom: clamp(44px, 5.5vw, 80px); align-items: end; }
.head .label { grid-column: 1 / span 3; align-self: start; padding-top: 10px; }
.head .h2 { grid-column: 4 / span 7; }
.head .head-aside { grid-column: 4 / span 6; color: var(--muted); max-width: 52ch; }
.dark .head .head-aside { color: var(--on-ink-muted); }
@media (max-width: 900px) {
  .head .label, .head .h2, .head .head-aside { grid-column: 1 / -1; }
  .head .label { padding-top: 0; }
}

/* ── Work: the frame ────────────────────────────────────────────────────── */
/* A plain browser frame: hairline border, a one-line address bar, no fake
   traffic-light dots. The screenshot is the point, the frame just says
   "this is a real website". */
.frame {
  position: relative; overflow: hidden;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.dark .frame { border-color: var(--rule-dark); }
.frame-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 34px; padding: 0 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); letter-spacing: 0.02em;
  background: var(--white);
}
.frame-bar b { font-weight: 400; color: var(--muted); }
.frame-view { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper-2); }
.frame-view img { width: 100%; }
.frame-view.is-tall { aspect-ratio: 16 / 11; }

/* Hover/focus scrolls the full-page capture: you "visit" the site without
   leaving. Long duration, gentle curve, disabled for reduced motion. */
.scrolls img { transition: transform 9s cubic-bezier(0.45, 0, 0.3, 1); will-change: transform; }
.case:hover .scrolls img,
.case:focus-within .scrolls img { transform: translateY(calc(-100% + var(--view-h, 560px))); transition-duration: 14s; }

.phone {
  position: absolute; right: clamp(16px, 3vw, 44px); bottom: clamp(-60px, -3vw, -24px);
  width: clamp(120px, 17%, 210px);
  border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; background: var(--white);
  box-shadow: 0 30px 60px -30px rgba(19, 19, 18, 0.35);
}
.phone img { width: 100%; }

/* ── Work: featured case ────────────────────────────────────────────────── */
.case { display: block; text-decoration: none; color: inherit; }
.case-feature .frame-view { aspect-ratio: auto; height: clamp(320px, 52vw, 720px); }
.case-feature { --view-h: clamp(320px, 52vw, 720px); }
.case-meta {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 16px;
  margin-top: 28px; align-items: start;
}
.case-meta .case-title { grid-column: 1 / span 5; }
.case-meta .case-desc { grid-column: 6 / span 5; color: var(--muted); }
.case-meta .case-tags { grid-column: 11 / span 2; justify-self: end; text-align: right; }
.case-title .h3 { display: flex; align-items: baseline; gap: 12px; }
.case-title .label { margin-top: 8px; display: block; }
.case-tags { font-family: var(--font-mono); font-size: 12px; line-height: 1.8; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; list-style: none; }
@media (max-width: 900px) {
  .case-meta .case-title, .case-meta .case-desc, .case-meta .case-tags { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .case-tags { display: flex; flex-wrap: wrap; gap: 4px 16px; }
}

.cases-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(16px, 2vw, 32px); margin-top: clamp(64px, 8vw, 120px); }
.cases-2 .case-meta { display: block; }
.cases-2 .case-desc { margin-top: 10px; color: var(--muted); max-width: 48ch; font-size: 16px; }
.cases-2 .case-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.cases-2 .frame-view { --view-h: 100%; }
.cases-2 .frame-view img { transition: transform .9s var(--ease); }
.cases-2 .case:hover .frame-view img { transform: scale(1.018); }
@media (max-width: 760px) { .cases-2 { grid-template-columns: 1fr; } }

.tag-concept {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--rule); border-radius: 2px; padding: 2px 7px; vertical-align: 3px;
}
.case .arrow { width: 18px; height: 18px; transition: transform .35s var(--ease); flex: none; }
.case:hover .arrow { transform: translate(3px, -3px); }

/* ── Services list ──────────────────────────────────────────────────────── */
.svc { border-top: 1px solid var(--ink); }
.dark .svc { border-top-color: var(--on-ink); }
.svc-row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 16px;
  padding-block: clamp(28px, 3.4vw, 48px);
  border-bottom: 1px solid var(--rule);
}
.dark .svc-row { border-bottom-color: var(--rule-dark); }
.svc-row .num { grid-column: 1 / span 1; font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding-top: 9px; }
.svc-row .h3 { grid-column: 2 / span 4; }
.svc-row .svc-text { grid-column: 7 / span 6; }
.svc-row .svc-text p { color: var(--muted); }
.dark .svc-row .svc-text p { color: var(--on-ink-muted); }
.svc-row .svc-list { margin-top: 18px; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.svc-row .svc-list li::before { content: '/ '; color: var(--accent); }
.svc-row .link { margin-top: 20px; font-size: 15px; }
@media (max-width: 760px) {
  .svc-row .num { grid-column: 1 / -1; padding-top: 0; }
  .svc-row .h3, .svc-row .svc-text { grid-column: 1 / -1; }
}

/* ── Standards (what every site ships with) ─────────────────────────────── */
.std { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-dark); }
.std > div { padding: 28px 28px 36px 0; border-bottom: 1px solid var(--rule-dark); }
.std > div + div { padding-left: 28px; border-left: 1px solid var(--rule-dark); }
.std > div:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.std h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; }
.std p { color: var(--on-ink-muted); font-size: 15.5px; line-height: 1.6; }
.std .label { display: block; margin-bottom: 18px; color: var(--accent-on-ink); }
@media (max-width: 900px) {
  .std { grid-template-columns: 1fr 1fr; }
  .std > div, .std > div + div { padding: 24px 20px 28px 0; border-left: 0; }
  .std > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--rule-dark); }
}
@media (max-width: 600px) {
  .std { grid-template-columns: 1fr; }
  .std > div:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* ── Steps ──────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; list-style: none; counter-reset: s; }
.steps li { padding: 22px 24px 8px 0; border-top: 1px solid var(--ink); position: relative; }
.steps li + li { padding-left: 20px; }
.steps li::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  display: block; font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-bottom: 26px;
}
.steps li::after { content: ''; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.steps li + li::after { left: 20px; }
.steps h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
.steps p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.steps .dur { display: block; margin-top: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 1000px) {
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: 20px 0 28px 0; display: grid; grid-template-columns: 4rem 1fr; border-top-color: var(--rule); }
  .steps li::before { margin: 2px 0 0; }
  .steps li::after, .steps li + li::after { display: none; }
  .steps li > * { grid-column: 2; }
  .steps li:first-child { border-top-color: var(--ink); }
}

/* ── Split text blocks ──────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 24px; }
.split > .split-l { grid-column: 1 / span 4; }
.split > .split-r { grid-column: 6 / span 7; }
@media (max-width: 900px) { .split > .split-l, .split > .split-r { grid-column: 1 / -1; } }

.statement { font-size: clamp(1.6rem, 3.1vw, 2.7rem); font-weight: 500; line-height: 1.16; letter-spacing: -0.028em; text-wrap: balance; max-width: 26ch; }
.statement .muted { color: var(--faint); }

.facts { list-style: none; border-top: 1px solid var(--rule); }
.facts li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.facts li > :first-child { font-weight: 600; }
.facts li > :last-child { color: var(--muted); }
@media (max-width: 600px) { .facts li { grid-template-columns: 1fr; gap: 6px; } }

.checks { list-style: none; border-top: 1px solid var(--rule); }
.checks li { position: relative; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--rule); color: var(--ink); }
.checks li::before { content: ''; position: absolute; left: 2px; top: 1.45em; width: 10px; height: 1px; background: var(--accent); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
  padding: 22px 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 600; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-mono); font-weight: 400; color: var(--muted); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 0 26px; color: var(--muted); max-width: 64ch; }
.faq .faq-a p + p { margin-top: .8em; }

/* ── Writing list (blog teaser + index) ─────────────────────────────────── */
.posts { list-style: none; border-top: 1px solid var(--ink); }
.posts a {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 6px;
  padding: 24px 0; border-bottom: 1px solid var(--rule); text-decoration: none; align-items: baseline;
}
.posts .post-date { grid-column: 1 / span 3; font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.posts .post-t { grid-column: 4 / span 5; font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; transition: color .2s; }
.posts .post-d { grid-column: 9 / span 4; color: var(--muted); font-size: 15px; }
.posts a:hover .post-t { color: var(--muted); }
@media (max-width: 900px) {
  .posts .post-date, .posts .post-t, .posts .post-d { grid-column: 1 / -1; }
}

/* ── CTA block ──────────────────────────────────────────────────────────── */
.cta { padding-block: clamp(96px, 12vw, 176px); }
.cta .display { font-size: clamp(2.5rem, 6.4vw, 5.8rem); max-width: 14ch; }
.cta-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 32px; margin-top: clamp(40px, 5vw, 64px); align-items: end; }
.cta-row .lead { grid-column: 1 / span 5; }
.cta-row .cta-actions { grid-column: 7 / -1; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: flex-end; }
.cta-mail { color: var(--on-ink); font-size: 17px; }
@media (max-width: 900px) {
  .cta-row .lead, .cta-row .cta-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer { background: var(--ink); color: var(--on-ink); border-top: 1px solid var(--rule-dark); padding-top: clamp(56px, 6vw, 88px); padding-bottom: 32px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; }
.footer-brand { grid-column: 1 / span 5; }
.footer-brand .wordmark { color: var(--on-ink); }
.footer-brand p { margin-top: 14px; color: var(--on-ink-muted); max-width: 34ch; }
.footer-col { grid-column: span 2; }
.footer-col.wide { grid-column: span 3; }
.footer-col h2 { font-family: var(--font-mono); font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; color: var(--on-ink-muted); margin-bottom: 14px; }
.footer-col ul { list-style: none; }
.footer-col a { display: inline-block; padding: 4px 0; color: var(--on-ink); text-decoration: none; transition: color .2s; }
.footer-col a:hover { color: var(--on-ink-muted); }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  margin-top: clamp(56px, 7vw, 96px); padding-top: 20px; border-top: 1px solid var(--rule-dark);
  font-family: var(--font-mono); font-size: 12px; color: var(--on-ink-muted); letter-spacing: 0.02em;
}
.footer-base [data-page-weight] { min-height: 1em; }
@media (max-width: 900px) {
  .footer-brand { grid-column: 1 / -1; }
  .footer-col, .footer-col.wide { grid-column: span 6; }
}

/* ── Contact ────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 56px; }
.contact-side { grid-column: 1 / span 4; grid-row: 1; }
.contact-main { grid-column: 6 / span 7; grid-row: 1; }
@media (max-width: 900px) { .contact-side, .contact-main { grid-column: 1 / -1; grid-row: auto; } }
.contact-side .facts li { grid-template-columns: 1fr; gap: 4px; }
.contact-side .facts li > :first-child { font-family: var(--font-mono); font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.contact-side .facts li > :last-child { color: var(--ink); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.form .full { grid-column: 1 / -1; }
.field label, .field legend { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.field .opt { color: var(--muted); font-weight: 400; }
.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: 12px 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  font-size: 17px; color: var(--ink);
  transition: border-color .2s;
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235C5B56' stroke-width='1.4'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; padding-right: 24px; }
.input::placeholder, .textarea::placeholder { color: #7A7973; }
.input:hover, .select:hover, .textarea:hover { border-bottom-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
[aria-invalid="true"] { border-bottom-color: #B3261E !important; }
.form-error { margin-top: 8px; font-size: 14px; color: #B3261E; }
.form-alert { grid-column: 1 / -1; padding: 14px 16px; border-left: 2px solid #B3261E; background: #F7E9E7; color: #7A1A14; font-size: 15px; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form-foot p { font-size: 14px; color: var(--muted); max-width: 44ch; }
.btn[disabled] { opacity: .6; cursor: wait; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label {
  margin: 0; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  font-size: 15px; font-weight: 400; border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer; transition: border-color .2s, background-color .2s, color .2s;
}
.chips label:hover { border-color: var(--muted); }
.chips input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chips input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.form-success { padding: 40px 0; border-top: 1px solid var(--ink); }
.form-success .h3 { margin-bottom: 12px; }
@media (max-width: 600px) { .form { grid-template-columns: 1fr; } }

/* ── Case study page ────────────────────────────────────────────────────── */
.cs { padding-block: var(--section); border-top: 1px solid var(--rule); }
.cs:first-of-type { border-top: 0; }
.cs-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 20px; margin-bottom: clamp(40px, 5vw, 64px); align-items: end; }
.cs-head .cs-idx { grid-column: 1 / span 3; }
.cs-head .h2 { grid-column: 4 / span 7; }
.cs-head .cs-link { grid-column: 11 / span 2; justify-self: end; }
.cs-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; margin-top: clamp(48px, 6vw, 88px); }
.cs-spec { grid-column: 1 / span 3; }
.cs-spec dl div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.cs-spec dl div:first-child { border-top: 1px solid var(--ink); }
.cs-spec dt { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.cs-spec dd { font-size: 15px; margin-top: 2px; }
.cs-text { grid-column: 5 / span 7; }
.cs-text h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin: 36px 0 10px; }
.cs-text h3:first-child { margin-top: 0; }
.cs-text p { color: var(--muted); max-width: 62ch; }
.cs-text p + p { margin-top: .9em; }
.cs-note { margin-top: 28px; padding: 16px 18px; border-left: 2px solid var(--accent); background: var(--paper-2); font-size: 15px; color: var(--ink-2); max-width: 62ch; }
.cs-shots { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 24px; align-items: start; }
.cs-shots .frame { grid-column: 1 / span 9; }
.cs-shots .mob { grid-column: 10 / span 3; border: 1px solid var(--rule); border-radius: 20px; overflow: hidden; background: var(--white); }
.cs-shots .frame-view { aspect-ratio: auto; height: clamp(320px, 42vw, 620px); }
.cs-shots { --view-h: clamp(320px, 42vw, 620px); }
@media (max-width: 900px) {
  .cs-head .cs-idx, .cs-head .h2, .cs-head .cs-link { grid-column: 1 / -1; justify-self: start; }
  .cs-spec, .cs-text { grid-column: 1 / -1; }
  .cs-shots .frame { grid-column: 1 / -1; }
  .cs-shots .mob { grid-column: 3 / span 8; }
}

/* ── Article / legal pages ──────────────────────────────────────────────── */
#legal-hero { padding-top: clamp(48px, 8vw, 112px); padding-bottom: clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--rule); }
.legal-hero-glow { display: none; }
.legal-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
.legal-eyebrow-rule { display: none; }
.legal-eyebrow a { text-decoration: none; }
.legal-eyebrow a:hover { color: var(--ink); }
.legal-title { font-size: clamp(2.2rem, 5.2vw, 4.4rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.038em; max-width: 20ch; text-wrap: balance; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 28px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.legal-meta .dot { display: none; }
.legal-meta a { color: inherit; }
#legal-body { padding-block: clamp(48px, 6vw, 96px) var(--section); }
.legal-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; }
.legal-toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
.legal-toc-title { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 12px; }
.legal-toc ol { list-style: none; border-top: 1px solid var(--rule); }
.legal-toc li a { display: flex; gap: 12px; padding: 9px 0; font-size: 14px; line-height: 1.4; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); transition: color .2s; }
.legal-toc li a:hover, .legal-toc li a.active { color: var(--ink); }
.legal-toc .n { font-family: var(--font-mono); font-size: 11px; color: var(--faint); padding-top: 2px; }
.legal-content { grid-column: 5 / span 7; }
.legal-layout.is-wide .legal-content { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .legal-toc { position: static; grid-column: 1 / -1; }
  .legal-content { grid-column: 1 / -1; }
}
.legal-content { font-size: 17.5px; line-height: 1.7; color: var(--ink-2); }
.legal-content > p, .legal-content section > p, .legal-content ul, .legal-content ol { max-width: 66ch; }
.legal-content p + p, .legal-content section > * + * { margin-top: 1.05em; }
.legal-content section { margin-top: 3.2em; }
.legal-content section:first-child { margin-top: 0; }
.legal-content h2 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); margin-bottom: .7em; }
.legal-content h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 1.8em 0 .5em; }
.legal-content ul, .legal-content ol { padding-left: 1.2em; }
.legal-content li { margin-top: .5em; padding-left: .3em; }
.legal-content li::marker { color: var(--accent); }
.legal-content strong { color: var(--ink); font-weight: 600; }
.legal-content a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.legal-content a:hover { text-decoration-color: var(--ink); }
.legal-content table { width: 100%; border-collapse: collapse; margin-top: 1.2em; font-size: 15px; }
.legal-content th, .legal-content td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.legal-content th { font-weight: 600; color: var(--ink); }
.legal-content blockquote, .legal-content .callout, .legal-content .highlight-box { margin-top: 1.4em; padding: 16px 18px; border-left: 2px solid var(--accent); background: var(--paper-2); }
.legal-content code { font-family: var(--font-mono); font-size: .88em; background: var(--paper-2); padding: 1px 5px; border-radius: 2px; }
.post-cta { margin-top: 4em; padding: 32px; background: var(--ink); color: var(--on-ink); border-radius: var(--radius); }
.post-cta p { color: var(--on-ink-muted); max-width: 56ch; }
.post-cta .post-cta-title { color: var(--on-ink); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: .5em; }
.post-cta .btn-primary, .post-cta a.btn-primary {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; margin-top: .5em;
  background: var(--paper); color: var(--ink); text-decoration: none; border-radius: var(--radius); font-weight: 500;
}
.legal-content .btn-primary { text-decoration: none; }

/* Blog index cards (legacy markup) rendered as a ruled list */
.blog-grid { display: block; border-top: 1px solid var(--ink); max-width: none; }
.blog-card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 6px; padding: 26px 0; border-bottom: 1px solid var(--rule); text-decoration: none !important; align-items: baseline; }
.blog-card-date { grid-column: 1 / span 3; font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.blog-card-title { grid-column: 4 / span 5; font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); transition: color .2s; }
.blog-card-desc { grid-column: 9 / span 4; color: var(--muted); font-size: 15px; line-height: 1.55; }
.blog-card-more { display: none; }
.blog-card:hover .blog-card-title { color: var(--muted); }
@media (max-width: 900px) {
  .blog-card-date, .blog-card-title, .blog-card-desc { grid-column: 1 / -1; }
}

/* ── 404 ────────────────────────────────────────────────────────────────── */
.nf { min-height: calc(100dvh - var(--nav-h) - 240px); display: flex; align-items: center; }

/* ── Reveal ─────────────────────────────────────────────────────────────── */
/* Content is visible by default; JS opts elements in. Short travel, one
   curve, never on anything above the fold (it delays LCP). */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv.d1 { transition-delay: .06s; }
.js .rv.d2 { transition-delay: .12s; }
.js .rv.d3 { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .scrolls img, .cases-2 .frame-view img { transition: none !important; transform: none !important; }
  .menu, .menu li a { transition: none; }
  *, *::before, *::after { animation: none !important; }
}
@media (prefers-contrast: more) {
  :root { --muted: #3F3E3A; --rule: #9C9B95; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .nav, .menu, .footer, .cta, .vlx-chat { display: none !important; }
  body { background: #fff; }
}

.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(20px, 3vw, 40px); margin-top: 48px; }
@media (max-width: 640px) { .two { grid-template-columns: 1fr; } }
.steps.stack { grid-template-columns: 1fr; }
.steps.stack li, .steps.stack li + li { padding: 16px 0 20px; display: grid; grid-template-columns: 3rem 1fr; border-top-color: var(--rule); }
.steps.stack li:first-child { border-top-color: var(--ink); }
.steps.stack li::before { margin: 3px 0 0; }
.steps.stack li::after { display: none; }
.steps.stack li > * { grid-column: 2; }
.steps.stack h3 { font-size: 16px; margin-bottom: 4px; }

.section.rule-top { padding-top: clamp(64px, 8vw, 128px); }

@media (max-width: 600px) { .footer-col.wide { grid-column: 1 / -1; order: -1; } }
.footer-col a, .cta-mail { overflow-wrap: anywhere; }

.menu-open .vlx-chat { display: none; }
@media (hover: none) { .hint { display: none; } }

/* Service blocks: a wider heading column and a size that keeps the longest
   Estonian compound ("automatiseerimine") on one line inside its column. */
.svc-block .split-l { grid-column: 1 / span 5; }
.svc-block .split-l .h2 { font-size: clamp(1.75rem, 3.4vw, 3rem); overflow-wrap: break-word; }
@media (max-width: 900px) { .svc-block .split-l { grid-column: 1 / -1; } }
/* Safety net: a word longer than its line wraps instead of spilling over. */
.display, .h2, .h3 { overflow-wrap: break-word; }