/* ══════════════════════════════════════════════════════════════
   Pilgrim Media Productions — Swiss typographic system
   12-column grid · hairline rules · one accent colour · no decoration
   Tokens → base → layout → components. Page-specific styles live
   in each page's <style> block.
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Colour — neutral paper + ink, electric blue is the only accent */
  --paper:      #F5F4F0;
  --white:      #FFFFFF;
  --ink:        #0B0B0C;
  --ink-2:      #2E2E31;
  --muted:      #5C5C61;   /* 6.0:1 on paper */
  --line:       #D5D3CC;
  --line-strong:#0B0B0C;
  --accent:     #0A46E6;   /* brand electric blue */
  --accent-ink: #0736B5;
  --on-ink:     #F5F4F0;
  --on-ink-muted: #A9A9AE; /* 7.6:1 on ink */

  --success-bg: #EAF6EE; --success-ink: #14532D;
  --error-ink:  #B42318; --error-bg: #FDECEA;

  /* Type */
  --font-display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-mega:  clamp(3.25rem, 11vw, 11rem);
  --fs-hero:  clamp(2.75rem, 7.4vw, 7.5rem);
  --fs-h2:    clamp(2rem, 4.6vw, 4.25rem);
  --fs-h3:    clamp(1.375rem, 2vw, 1.75rem);
  --fs-lead:  clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;
  --fs-meta:  0.8125rem;

  /* Grid & spacing (8px base) */
  --cols: 12;
  --gap: 24px;
  --gutter: 40px;
  --max: 1440px;
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px; --s-9: 176px;

  /* Motion — transform / opacity / colour only */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 150ms;
  --dur: 260ms;
  --dur-slow: 700ms;

  --nav-h: 72px;
  --z-raised: 10; --z-menu: 40; --z-nav: 50; --z-skip: 100;
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 0.95; letter-spacing: -0.045em; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--white); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.on-ink :focus-visible { outline-color: var(--white); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: var(--z-skip);
  padding: 12px 16px; background: var(--ink); color: var(--paper); font-weight: 600;
  transform: translateY(-200%); transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* ── Layout ─────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap); }
.section { padding-block: var(--s-8); }
.section + .section { border-top: 1px solid var(--line); }
.rule { border: 0; border-top: 1px solid var(--line); }
.rule-ink { border-top-color: var(--ink); }

/* Section head: (01) Label ─────────── title */
.section-head { row-gap: var(--s-3); margin-bottom: var(--s-6); }
.section-head .meta { grid-column: 1 / -1; }
.section-head h2 { grid-column: 1 / span 10; font-size: var(--fs-h2); }

/* ── Type helpers ───────────────────────────────────────────── */
.meta {
  font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted);
}
.meta .num { color: var(--ink); }
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-2); max-width: 38ch; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.prose p { max-width: 62ch; color: var(--ink-2); }
.prose p + p { margin-top: var(--s-2); }

/* ── Buttons & links ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 52px; padding: 0 20px;
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn .arrow { transition: transform var(--dur) var(--ease-spring); }
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn:hover .arrow { transform: translate(3px, -3px); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn-accent:hover { background: var(--ink); border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.on-ink .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.on-ink .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn-block { width: 100%; }

/* Animated underline link */
.u-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; font-weight: 600;
}
.u-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px;
  background: currentColor; transform-origin: right; transform: scaleX(0.999);
  transition: transform var(--dur) var(--ease);
}
.u-link:hover::after { transform-origin: left; animation: underline var(--dur-slow) var(--ease); }
.u-link .arrow { transition: transform var(--dur) var(--ease-spring); }
.u-link:hover .arrow { transform: translate(3px, -3px); }
@keyframes underline { 0% { transform: scaleX(1); transform-origin: right; } 45% { transform: scaleX(0); transform-origin: right; } 55% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

/* ── Header / nav ───────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
.nav-logo img { height: 40px; width: auto; }
@media (max-width: 640px) { .nav-logo img { height: 34px; } }
.nav-main { display: flex; align-items: center; gap: var(--s-4); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > li > a, .nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  font-size: var(--fs-small); font-weight: 500; color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease);
}
.nav-links > li > a:hover, .nav-dropdown-trigger:hover, .nav-dropdown-trigger[aria-expanded="true"] { color: var(--accent); }
.nav-links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.nav-dropdown-trigger svg { transition: transform var(--dur) var(--ease); }
.nav-dropdown-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-item-dropdown { position: relative; }
.nav-dropdown {
  position: absolute; top: calc(100% + 13px); left: 0; min-width: 240px;
  background: var(--paper); border: 1px solid var(--ink);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.nav-dropdown.open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease), visibility 0s; }
.nav-dropdown li + li { border-top: 1px solid var(--line); }
.nav-dropdown a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: 48px; padding: 0 16px; font-size: var(--fs-small); font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-dropdown a .meta { color: var(--muted); transition: color var(--dur-fast) var(--ease); }
.nav-dropdown a:hover, .nav-dropdown a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.nav-dropdown a:hover .meta, .nav-dropdown a[aria-current="page"] .meta { color: var(--on-ink-muted); }

.nav-hamburger {
  display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px;
  font-size: var(--fs-small); font-weight: 600;
}
.nav-hamburger .bars { position: relative; width: 22px; height: 12px; }
.nav-hamburger .bars span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform var(--dur) var(--ease); }
.nav-hamburger .bars span:first-child { top: 0; }
.nav-hamburger .bars span:last-child { bottom: 0; }
.nav-hamburger[aria-expanded="true"] .bars span:first-child { transform: translateY(5.25px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] .bars span:last-child { transform: translateY(-5.25px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: var(--z-menu);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); padding: var(--s-3) var(--gutter) var(--s-5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.mobile-menu.open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease), visibility 0s; }
.mobile-menu-links > li { border-bottom: 1px solid var(--line); }
.mobile-menu-links a {
  display: flex; align-items: baseline; justify-content: space-between; min-height: 64px; padding-block: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 2rem; letter-spacing: -0.04em; line-height: 1.1;
  transition: color var(--dur-fast) var(--ease);
}
.mobile-menu-links a .meta { font-family: var(--font-mono); letter-spacing: 0.02em; }
.mobile-menu-links a:hover, .mobile-menu-links a[aria-current="page"] { color: var(--accent); }
.mobile-menu-cta { margin-top: auto; padding-top: var(--s-4); }

/* ── Page header (inner pages) ──────────────────────────────── */
.page-head { padding-top: var(--s-7); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.page-head .breadcrumb { margin-bottom: var(--s-5); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumb li + li::before { content: '/'; margin-right: 8px; color: var(--line); }
.breadcrumb a { transition: color var(--dur-fast) var(--ease); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current="page"] { color: var(--ink); }
.page-title { grid-column: 1 / -1; font-size: var(--fs-hero); margin-bottom: var(--s-5); }
.page-head .meta-col { grid-column: 1 / -1; margin-bottom: var(--s-2); }
.page-head .lead { grid-column: 1 / span 7; }

/* ── Index list (work / services rows) ──────────────────────── */
.index { border-top: 1px solid var(--ink); }
.index-row {
  position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap);
  align-items: center; min-height: 88px; padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease);
}
.index-row::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur) var(--ease);
}
a.index-row:hover, a.index-row:focus-visible { color: var(--paper); }
a.index-row:hover::before, a.index-row:focus-visible::before { transform: scaleY(1); transform-origin: top; }
a.index-row:hover .meta, a.index-row:focus-visible .meta { color: var(--on-ink-muted); }
a.index-row:focus-visible { outline-offset: -2px; }
.index { isolation: isolate; }
.index-row .arrow { justify-self: end; transition: transform var(--dur) var(--ease-spring); }
a.index-row:hover .arrow { transform: translate(4px, -4px); color: var(--white); }

/* ── Image frame ────────────────────────────────────────────── */
.frame { position: relative; overflow: hidden; background: var(--line); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
a:hover .frame img, a:focus-visible .frame img { transform: scale(1.03); }

/* ── Big CTA ────────────────────────────────────────────────── */
.cta-block { background: var(--accent); color: var(--white); padding-block: var(--s-8); }
.cta-block .meta { color: rgba(255,255,255,0.8); }
.cta-title { font-size: var(--fs-mega); line-height: 0.88; letter-spacing: -0.055em; margin-block: var(--s-4) var(--s-6); }
.cta-title.sm { font-size: var(--fs-hero); line-height: 0.92; max-width: 14ch; }
.cta-row { align-items: end; row-gap: var(--s-4); }
.cta-row .cta-copy { grid-column: span 5; font-size: var(--fs-lead); line-height: 1.45; }
.cta-row .cta-actions { grid-column: 7 / -1; }
.cta-block .btn { background: var(--white); border-color: var(--white); color: var(--ink); }
.cta-block .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.cta-block :focus-visible { outline-color: var(--white); }

/* ── Forms ──────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-weight: 600; font-size: var(--fs-small); color: var(--ink); }
.field-label .req { color: var(--accent); margin-left: 2px; }
.field-help { font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.input {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: inherit; font-size: 1rem; line-height: 1.5; color: var(--ink);
  background: var(--white); border: 1px solid #BDBBB4; border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder { color: #807F84; }
.input:hover { border-color: var(--ink); }
.input:focus, .input:focus-visible { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.input[aria-invalid="true"] { border-color: var(--error-ink); box-shadow: inset 0 0 0 1px var(--error-ink); }
textarea.input { min-height: 160px; resize: vertical; }
.field-error { display: none; font-size: var(--fs-small); font-weight: 600; color: var(--error-ink); }
.field-error.show { display: block; }

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid #BDBBB4; border-left: 1px solid #BDBBB4; }
.choice {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 14px;
  background: var(--white); border-right: 1px solid #BDBBB4; border-bottom: 1px solid #BDBBB4;
  font-size: var(--fs-small); line-height: 1.35; cursor: pointer; user-select: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.choice:hover { background: #EEEDE8; }
.choice input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.choice:has(input:checked) { background: var(--ink); color: var(--paper); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }

.alert { display: none; align-items: flex-start; gap: 12px; padding: 16px 18px; font-size: var(--fs-small); font-weight: 600; border-left: 3px solid currentColor; }
.alert.show { display: flex; }
.alert svg { flex-shrink: 0; margin-top: 2px; }
.alert-success { background: var(--success-bg); color: var(--success-ink); }
.alert-error { background: var(--error-bg); color: var(--error-ink); }

/* ── Footer ─────────────────────────────────────────────────── */
.footer { background: var(--ink); color: var(--on-ink); padding-top: var(--s-7); }
.footer .meta { color: var(--on-ink-muted); }
.footer-top { row-gap: var(--s-5); padding-bottom: var(--s-7); }
.footer-intro { grid-column: span 4; }
.footer-intro p { font-size: var(--fs-lead); line-height: 1.4; letter-spacing: -0.01em; max-width: 26ch; margin-bottom: var(--s-4); }
.footer-col { grid-column: span 2; }
.footer-col:first-of-type { grid-column: 6 / span 2; }
.footer-col.wide { grid-column: span 3; }
.footer-col .meta { display: block; margin-bottom: var(--s-2); }
.footer-col li a, .footer-col li span { display: inline-flex; align-items: center; min-height: 36px; color: var(--on-ink); overflow-wrap: anywhere; transition: color var(--dur-fast) var(--ease); }
.footer-col li a:hover { color: #8EAEFF; }
.footer-mark {
  border-top: 1px solid #2A2A2D; padding-top: var(--s-3);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 14.6vw, 14.5rem);
  line-height: 0.8; letter-spacing: -0.06em; white-space: nowrap; color: var(--on-ink);
  padding-bottom: 0.3em; margin-left: -0.04em;
}
.footer-logo { height: 60px; width: auto; margin-bottom: var(--s-4); }
@media (max-width: 640px) { .footer-logo { height: 48px; } }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; padding-block: var(--s-3) var(--s-4); border-top: 1px solid #2A2A2D; }

/* ── Reveal on scroll (progressive enhancement) ─────────────── */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --gutter: 32px; }
  .section-head .meta { grid-column: 1 / -1; padding-top: 0; }
  .section-head h2 { grid-column: 1 / -1; }
  .page-head .meta-col { grid-column: 1 / -1; margin-bottom: var(--s-2); }
  .page-head .lead { grid-column: 1 / span 9; }
  .footer-intro { grid-column: 1 / -1; }
  .footer-col, .footer-col:first-of-type, .footer-col.wide { grid-column: span 4; }
  .cta-row .cta-copy { grid-column: 1 / span 8; }
  .cta-row .cta-actions { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nav-main { display: none; }
  .nav-hamburger { display: inline-flex; }
}
@media (min-width: 901px) {
  .mobile-menu { display: none; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; --gap: 16px; }
  .section { padding-block: var(--s-7); }
  .page-head { padding-top: var(--s-5); }
  .page-head .lead { grid-column: 1 / -1; }
  .footer-col, .footer-col:first-of-type, .footer-col.wide { grid-column: 1 / -1; }
  .cta-row .cta-copy { grid-column: 1 / -1; }
  .choice-grid { grid-template-columns: 1fr; }
  .index-row { min-height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}