/* TapesWay — design tokens and site styles
   The same tokens drive style-tile.html, so the board always matches the site. */

/* Fraunces: the tapesway wordmark, the lettering on the table and the numerals (Latin only). */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-full-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-full-italic.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
/* Headings, body and labels: each family is split into Greek and Latin files;
   the browser downloads only the part a page actually uses. */
@font-face {
  font-family: "Noto Serif Display";
  src: url("fonts/noto-serif-display-greek-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("fonts/noto-serif-display-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight-greek-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans Mono";
  src: url("fonts/noto-sans-mono-greek-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Noto Sans Mono";
  src: url("fonts/noto-sans-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette: black, cool greys and a premium navy, with the brass of the lens ring as the one warm note */
  --ink: #111318;          /* near-black, header, footer, film */
  --navy: #1C2B4A;         /* accent: numerals, highlights, focus, links */
  --navy-deep: #0F1A2E;    /* dark sections */
  --cream: #ECEEF2;        /* light grey: alternate sections, light text on dark */
  --paper: #F7F8FA;        /* page */
  --brass: #C79A5B;        /* lens ring, film-edge light */
  --muted: #454B58;        /* secondary text on light (8:1 on the page) */
  --muted-dark: #BEC5D0;   /* secondary text on dark */
  --line: rgba(17, 19, 24, 0.14);
  --line-dark: rgba(236, 238, 242, 0.16);

  --font-display: "Noto Serif Display", "Noto Serif", Georgia, "Times New Roman", serif;
  --font-brand: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "Noto Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Weight of the serif. Its thin strokes get hairline-thin at the regular 400,
     so large titles use a heavier cut and smaller serif lines heavier still. */
  --display-weight: 565;
  --display-weight-sm: 605;

  --header-h: 64px;
  --gutter: clamp(16px, 5vw, 80px);
  --maxw: 1240px;
  --radius: 3px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Height the mobile browser bar can take away from the bottom of a 100lvh stage */
  --bar-gap: 0px;
}
@supports (height: 100lvh) {
  :root { --bar-gap: calc(100lvh - 100svh); }
}
@media (max-width: 899px) {
  :root { --header-h: 56px; }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-padding-top: calc(var(--header-h) + var(--safe-top));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.on-dark :focus-visible, .site-header :focus-visible, .menu :focus-visible { outline-color: var(--brass); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
em.accent { font-style: italic; color: var(--navy); }

/* Sentence case on purpose: uppercasing Greek drops or misplaces accents in some browsers. */
.eyebrow {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  opacity: .7;
}
.on-dark .eyebrow { color: var(--brass); }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--cream); color: var(--ink);
  padding: 10px 14px; border-radius: var(--radius);
}
.skip-link:focus { top: calc(12px + var(--safe-top)); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  font: 600 15px/1 var(--font-body);
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-deep); color: #fff; }
.btn--light { background: var(--cream); color: var(--ink); }
.btn--light:hover { background: #fff; color: var(--ink); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { color: var(--navy); }
.on-dark .btn--ghost:hover { color: var(--brass); }
.text-link {
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--navy);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: calc(var(--header-h) + var(--safe-top));
  padding: var(--safe-top) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: rgba(17, 19, 24, 0.9);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  color: var(--cream);
  border-bottom: 1px solid var(--line-dark);
  transition: transform .5s var(--ease), opacity .4s var(--ease), visibility 0s;
}
/* During the film the top bar steps away; it slides back in as the story ends. */
html.in-story .site-header {
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .5s var(--ease), opacity .3s var(--ease), visibility 0s .5s;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--cream);
  min-height: 44px;
}
.brand:hover { color: var(--cream); }
/* The mark is taller than wide (0.884); size by height so it never distorts. */
.brand img { height: 36px; width: auto; display: block; }
.brand span {
  font-family: var(--font-brand);
  font-size: 22px; font-weight: 420;
  font-variation-settings: "opsz" 72, "SOFT" 60;
  letter-spacing: -0.01em;
}
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a {
  font-size: 14px; letter-spacing: .02em; text-decoration: none; color: var(--cream);
  opacity: .85;
}
.site-nav a:hover, .site-nav a[aria-current] { opacity: 1; color: var(--brass); }
.site-nav .btn { min-height: 40px; padding: 0 16px; font-size: 14px; opacity: 1; }
.site-nav .btn, .site-nav .btn:hover { color: var(--ink); }
.menu-button {
  display: none;
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; color: var(--cream); cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-button svg { width: 24px; height: 24px; }
.site-nav { gap: clamp(18px, 2vw, 28px); }
.site-nav a { white-space: nowrap; }
@media (max-width: 1079px) {
  .site-nav { display: none; }
  .menu-button { display: inline-flex; }
}
@media (max-width: 899px) {
  .brand span { font-size: 20px; }
  .brand img { height: 32px; }
  .brand { gap: 10px; }
}

/* ---------- Menu (mobile) ---------- */
.menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--ink); color: var(--cream);
  padding: calc(var(--safe-top) + 8px) var(--gutter) calc(var(--safe-bottom) + 24px);
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu-top { display: flex; justify-content: space-between; align-items: center; height: var(--header-h); }
.menu-close {
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; color: var(--cream); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.menu-close svg { width: 24px; height: 24px; }
.menu ul { list-style: none; margin: 32px 0 0; padding: 0; }
.menu li { border-top: 1px solid var(--line-dark); }
.menu li:last-child { border-bottom: 1px solid var(--line-dark); }
.menu ul a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px;
  font-family: var(--font-display); font-size: 30px; font-weight: var(--display-weight-sm);
  text-decoration: none; color: var(--cream);
}
.menu ul a:hover, .menu ul a[aria-current] { color: var(--brass); }
.menu ul a { font-size: clamp(24px, 7vw, 32px); gap: 16px; }
.menu ul a .num { font-family: var(--font-mono); font-style: normal; font-weight: 400; font-size: 12px; line-height: 1; color: var(--brass); letter-spacing: .12em; }
.menu .btn { margin-top: auto; width: 100%; }
.menu-foot { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-family: var(--font-mono); font-size: 13px; color: var(--muted-dark); letter-spacing: .04em; }
.menu-foot a { color: var(--cream); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.menu-foot span { min-height: 44px; display: inline-flex; align-items: center; }
body.menu-open { overflow: hidden; }

.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;
}

/* ---------- Preloader ---------- */
.preloader { display: none; }
html.motion .preloader {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: var(--ink);
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
  animation: preloader-failsafe 0s linear 8s forwards; /* never strands the page if the script fails */
}
html.motion .preloader.is-done { opacity: 0; visibility: hidden; }
.preloader img { height: 60px; width: auto; animation: breathe 2.4s ease-in-out infinite; }
.preloader-bar { width: min(180px, 40vw); height: 2px; background: rgba(236, 238, 242, .14); border-radius: 1px; overflow: hidden; }
.preloader-bar b { display: block; height: 100%; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .3s linear; }
@keyframes breathe { 50% { opacity: .55; } }
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; } }
html.is-preloading, html.is-preloading body { overflow: hidden; }

/* ---------- Scroll story ---------- */
.story { position: relative; background: var(--ink); }
.story-track {
  position: relative;
  /* stage height + active travel; --travel is the pacing plan total in viewport heights */
  height: calc(100vh + var(--travel, 8) * 100vh);
}
@supports (height: 100svh) {
  .story-track { height: calc(100lvh + var(--travel, 8) * 100svh); }
}
/* Lenis smooth scrolling (from its lenis.css). */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* End of the opening hold. On touch screens, while the visitor is on the first
   screen, a swipe or flick can only end at the top or here; setupStory lifts
   this once the page has come to rest at the stop. The two markers are the
   snap points (the track itself is too tall to be one). */
.story-top, .story-catch { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
@media (hover: none) and (pointer: coarse) {
  html.motion.catch-armed { scroll-snap-type: y mandatory; scroll-padding-top: 0; }
  html.motion.catch-armed .story-top, html.motion.catch-armed .story-catch { scroll-snap-align: start; scroll-snap-stop: always; }
}
.story-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100lvh;
  overflow: hidden;
  background: var(--ink);
}
.story-poster, .story-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.story-poster img { width: 100%; height: 100%; object-fit: cover; }
.story-canvas { opacity: 0; transition: opacity .4s ease; }
.story.is-live .story-canvas { opacity: 1; }

/* Lettering on the table in the final frame (positioned and projected by app.js) */
.table-title {
  position: absolute; left: 0; top: 0; z-index: 1;
  transform-origin: 0 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply; /* inked into the tabletop, so the camera's shadow still falls across it */
}
.table-title-plane { position: absolute; left: 0; top: 0; width: 1000px; height: 90px; transform-origin: 0 0; }
.table-title svg { display: block; width: 100%; height: 100%; overflow: visible; }
.table-title text {
  font-family: var(--font-brand); font-size: 110px; font-weight: 520;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-kerning: none; font-feature-settings: "kern" 0;
  fill: #1d1716; fill-opacity: .9;
}

/* Scroll cue: a thin arrow at the top centre of the first screen, no words.
   The top bar is hidden during the story, so this space is free. Fades as soon as the story starts. */
.scroll-cue {
  position: absolute; z-index: 3; left: 50%; top: calc(var(--safe-top, 0px) + 22px);
  width: 22px; height: 52px; margin-left: -11px;
  color: rgba(247, 248, 250, .92);
  filter: drop-shadow(0 1px 2px rgba(17, 19, 24, .45));
  pointer-events: none;
}
.scroll-cue svg { display: block; width: 100%; height: 100%; overflow: visible; animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } 75% { transform: translateY(8px); opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }

/* Film-edge HUD */
.story-hud {
  position: absolute; z-index: 2; left: 0; right: 0;
  bottom: calc(var(--bar-gap));
  pointer-events: none;
}
.story-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(17, 19, 24, 0.35);
}
.story-progress b {
  position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: var(--brass);
}
/* Keyboard-only: appears when focused, so the film itself carries no text. */
.story-skip {
  position: absolute; z-index: 4;
  right: var(--gutter); top: calc(var(--header-h) + var(--safe-top) + 18px);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  font: 500 13px/1 var(--font-body); letter-spacing: .02em;
  color: var(--cream); text-decoration: none;
  background: rgba(17, 19, 24, 0.8);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  opacity: 0; pointer-events: none;
}
.story-skip:focus-visible { opacity: 1; pointer-events: auto; }
.story-skip.is-hidden { display: none; }

/* Static story (reduced motion, constrained devices, or loading failure) */
.story-static { display: none; }
html.no-motion .story-track { display: none; }
html.no-motion .story-static { display: block; }
.story-static { color: var(--cream); padding-top: calc(var(--header-h) + var(--safe-top)); }
.static-chapter { position: relative; }
.static-chapter picture img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.story-noscript { color: var(--cream); padding: calc(var(--header-h) + 40px) var(--gutter) 60px; }
.story-noscript-brand { font-family: var(--font-brand); font-size: clamp(40px, 8vw, 96px); line-height: 1; margin: 24px 0 0; }

/* ---------- Mobile story composition ---------- */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .static-chapter picture img { aspect-ratio: 4 / 5; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 11vw, 150px) var(--gutter); }
.section:focus { outline: none; }
.section--intro, .section--languages, .section--process, .section--value { background: var(--paper); }
.section--offer, .section--time, .section--contact { background: var(--cream); }
.section--approach { background: var(--navy-deep); color: var(--cream); }
.section--work { background: var(--ink); color: var(--cream); }
.wrap { max-width: var(--maxw); margin: 0 auto; }

/* Section heading: eyebrow, then a title whose later lines sit in a quieter tone */
.head { display: grid; justify-items: start; gap: 18px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.head h2 { font-size: clamp(32px, 4.4vw, 62px); max-width: 21em; }
.line { display: block; }
.line + .line { color: var(--muted); }
.on-dark .line + .line { color: var(--brass); }

.prose { display: grid; gap: .9em; max-width: 60ch; font-size: clamp(17px, 1.25vw, 19px); color: var(--muted); }
.on-dark .prose { color: var(--muted-dark); }
.prose strong, .benefit strong { color: var(--ink); font-weight: 650; }
.pillar strong { color: #fff; font-weight: 650; }
.on-dark .prose strong { color: var(--cream); }
@media (min-width: 1000px) { .prose--offset { margin-left: calc(100% * 5 / 12); } }

.highlight {
  font-family: var(--font-display); font-weight: var(--display-weight-sm);
  font-size: clamp(22px, 2.1vw, 30px); line-height: 1.25; color: var(--ink);
  padding-left: 20px; border-left: 2px solid var(--navy);
  text-wrap: balance;
}
.closing {
  font-family: var(--font-display); font-weight: var(--display-weight-sm);
  font-size: clamp(24px, 2.8vw, 40px); line-height: 1.15;
  margin-top: clamp(32px, 4vw, 56px);
  text-wrap: balance;
}
.closing--center { text-align: center; max-width: 26em; margin-inline: auto; margin-top: clamp(56px, 7vw, 104px); }

/* Number + label above a card or step */
.kicker { display: flex; align-items: baseline; gap: 14px; }
.num {
  font-family: var(--font-brand); font-style: italic; font-weight: 300;
  font-size: 44px; line-height: 1; color: var(--navy);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.on-dark .num { color: var(--brass); }
.tag { font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }

/* Hero */
.section--intro { padding-top: clamp(96px, 12vw, 168px); }
.head--hero h1 { font-size: clamp(38px, 6vw, 88px); line-height: 1.03; max-width: 16em; }
.intro-body {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px clamp(40px, 6vw, 96px); align-items: end;
  margin-top: clamp(16px, 2vw, 32px);
}
.intro-aside { display: grid; gap: 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 899px) {
  .intro-body { grid-template-columns: 1fr; }
  .actions .btn { flex: 1 1 220px; }
}

/* Calls to action: the same button, repeated after the sections that make the case */
.cta-note { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.on-dark .cta-note { color: var(--muted-dark); }
.cta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  margin-top: clamp(48px, 6vw, 80px);
}
.cta-row .cta-note { margin: 0; }
@media (max-width: 599px) { .cta-row .btn { width: 100%; } }

/* Phones: a slim bar with the main button once the story has played; hidden while the form is on screen */
.mobile-cta { display: none; }
@media (max-width: 767px) {
  .mobile-cta {
    display: block; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left));
    background: rgba(17, 19, 24, .92);
    -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
    border-top: 1px solid var(--line-dark);
    transform: translateY(110%); visibility: hidden;
    transition: transform .4s var(--ease), visibility 0s .4s;
  }
  .mobile-cta.is-shown { transform: none; visibility: visible; transition: transform .4s var(--ease), visibility 0s; }
  .mobile-cta .btn { width: 100%; background: var(--navy); color: #fff; }
  html.js .site-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* Split: on wide screens the aside holds still while the main column scrolls past it */
.split { display: grid; gap: clamp(40px, 5vw, 64px); }
@media (min-width: 1000px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(56px, 7vw, 112px); align-items: start; }
  .split-aside { position: sticky; top: calc(var(--header-h) + var(--safe-top) + 40px); }
  .split-aside.no-stick { position: static; }
  .split .head h2 { font-size: clamp(32px, 3.2vw, 48px); }
  .split-aside .prose { font-size: 17px; }
}

/* 01 What we offer: cards that stack as you scroll */
.pillars { list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; display: grid; gap: 20px; }
.pillar-card {
  background: var(--navy); color: #fff; border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px;
  padding: clamp(24px, 3.4vw, 52px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px clamp(32px, 5vw, 80px);
  box-shadow: 0 30px 60px -36px rgba(15, 26, 46, .7);
  transform-origin: 50% 0;
}
.pillar-head { display: grid; gap: 14px; align-content: start; }
.pillar-card h3 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; }
.pillar-text { display: grid; gap: 10px; color: rgba(255, 255, 255, .86); align-content: start; }
.pillar-card .num { color: var(--brass); }
.pillar-card .tag { color: rgba(255, 255, 255, .72); }
.pillars.is-stacked { gap: 16vh; }
.pillars.is-stacked .pillar { position: sticky; top: calc(var(--header-h) + var(--safe-top) + 24px + var(--i, 0) * 14px); }
@media (max-width: 767px) { .pillar-card { grid-template-columns: 1fr; } }

/* 02 Approach */
.statements { list-style: none; margin: 0 0 40px; padding: 0; border-top: 1px solid var(--line-dark); }
.statements li {
  font-family: var(--font-display); font-weight: var(--display-weight-sm); font-size: clamp(22px, 2.4vw, 34px); line-height: 1.2;
  padding: 18px 0; border-bottom: 1px solid var(--line-dark);
}
.questions { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 12px; }
.questions li { font-family: var(--font-display); font-weight: var(--display-weight-sm); font-size: clamp(21px, 2vw, 28px); line-height: 1.25; color: var(--brass); }
/* The questions and their answer hold on screen: the block pins at the centre
   of the screen while its taller wrapper (--hold-h, set by app.js only if the block fits) scrolls past. */
html.fx .hold.is-held { height: var(--hold-h, auto); }
html.fx .hold.is-held .hold-in { position: sticky; top: var(--hold-top, 0px); }
html.fx .hold .closing { opacity: calc(.16 + .84 * var(--lit, 1)); transition: opacity .2s linear; }

/* 03 Languages */
.lang-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.codes {
  margin: 0; display: grid; grid-template-columns: repeat(2, auto); justify-content: end; gap: .08em .22em;
  font-family: var(--font-brand); font-weight: 300; font-size: clamp(72px, 9.5vw, 150px); line-height: .92;
  letter-spacing: -.02em; font-variation-settings: "opsz" 144, "SOFT" 50;
  color: transparent; -webkit-text-stroke: 1.2px var(--ink);
}
.codes span { display: block; }
.codes span:nth-child(2), .codes span:nth-child(3) { color: var(--navy); -webkit-text-stroke: 0; }
@media (max-width: 899px) {
  .lang-grid { grid-template-columns: 1fr; }
  .codes { order: -1; display: flex; flex-wrap: wrap; gap: .1em .28em; justify-content: flex-start; font-size: clamp(44px, 14vw, 100px); }
}
/* Wide screens: the language codes stay centred beside the text, and beside
   the closing line while it holds on screen. */
@media (min-width: 900px) {
  html.fx .lang-grid { align-items: start; }
  html.fx .codes { position: sticky; top: calc(50% + (var(--header-h) + var(--safe-top)) / 2); transform: translateY(-50%); }
}

/* 04 Work: one frame (the camera from the film) until real project photos are added */
.film {
  background-color: #0b0c10;
  padding: 22px 10px;
  border-radius: 2px;
  background-image:
    radial-gradient(circle at 50% 50%, #343944 0 2.6px, transparent 3.1px),
    radial-gradient(circle at 50% 50%, #343944 0 2.6px, transparent 3.1px);
  background-size: 17px 22px, 17px 22px;
  background-position: 4px 0, 4px 100%;
  background-repeat: repeat-x;
}
.work-frame { margin: clamp(40px, 5vw, 72px) 0 0; }
.work-zoom { overflow: hidden; }
.work-zoom img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; transform-origin: 50% 55%; }
@media (max-width: 767px) {
  .film { padding: 14px 6px; background-size: 13px 14px, 13px 14px; }
  .work-zoom img { aspect-ratio: 4 / 3; }
}

/* 05 Process */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); list-style: none; margin: 0; padding: 0; }
.step { padding: 28px 32px 8px 0; display: grid; gap: 12px; align-content: start; }
.step + .step { padding-left: 32px; border-left: 1px solid var(--line); }
.step h3 { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.15; margin-bottom: 4px; }
.step p { color: var(--muted); }
@media (max-width: 899px), (min-width: 1000px) {
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding: 32px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* 06 Time */
.tasks {
  list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .1em .45em;
  font-family: var(--font-display); font-size: clamp(28px, 4.2vw, 58px); line-height: 1.1; font-weight: var(--display-weight);
}
.tasks-after { margin-top: 18px; font-size: 16px; font-weight: 500; color: var(--muted); }
.split--time { margin-top: clamp(64px, 8vw, 120px); }
.time-highlight { display: grid; gap: 24px; }
.time-highlight .highlight { font-size: clamp(24px, 2.6vw, 38px); }
.time-highlight p:last-child { color: var(--muted); max-width: 52ch; }
.benefits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.benefit {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px 24px;
  padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.benefit > div { grid-column: 2; display: grid; gap: 10px; color: var(--muted); }
.benefit .num { font-size: 32px; }
.benefit h3 { font-size: clamp(21px, 1.9vw, 27px); line-height: 1.2; }
.result {
  margin-top: clamp(64px, 8vw, 112px);
  background: var(--navy-deep); color: var(--cream); border-radius: 6px;
  padding: clamp(32px, 5vw, 72px);
}
.result-kicker { font-size: 15px; font-weight: 500; letter-spacing: .02em; color: var(--brass); }
.result ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.result li { font-family: var(--font-display); font-weight: var(--display-weight-sm); font-size: clamp(23px, 3vw, 42px); line-height: 1.15; text-wrap: balance; }
@media (max-width: 599px) {
  .benefit { grid-template-columns: 48px minmax(0, 1fr); }
  .benefit .num { font-size: 26px; }
}

/* 07 Value */
.values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.values li { background: var(--navy); color: #fff; border-radius: 6px; padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 10px; align-content: start; }
.values h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; overflow-wrap: break-word; }
.values p { color: rgba(255, 255, 255, .86); }
@media (max-width: 599px) { .values { grid-template-columns: 1fr; } }

/* 08 Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px clamp(40px, 7vw, 120px); }
.contact-grid .head h2 { font-size: clamp(28px, 3vw, 44px); }
.contact-details { margin: 36px 0 0; display: grid; gap: 18px; }
.contact-details dt { font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.contact-details dd { margin: 4px 0 0; font-size: 18px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; align-content: start; }
.field { display: grid; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.field .optional { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  font: inherit; font-size: 17px; color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(17,19,24,.35);
  border-radius: 0;
  padding: 10px 0; min-height: 44px;
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field ::placeholder { color: #8a909b; opacity: 1; }
.field input:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--navy); margin-bottom: -1px; }
.field [aria-invalid="true"] { border-bottom: 2px solid #a1123f; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 8px; }
.form-note { font-size: 14px; color: var(--muted); max-width: 46ch; }
.form-status { grid-column: 1 / -1; font-size: 15px; min-height: 1.5em; }
.form-status.is-error { color: #a1123f; }
@media (max-width: 899px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form .btn { width: 100%; }
}
@media (max-width: 599px) { .form { grid-template-columns: 1fr; } }

/* Footer */
.site-footer {
  background: var(--ink); color: var(--muted-dark);
  padding: 56px var(--gutter) calc(40px + var(--safe-bottom));
  font-size: 14px;
}
.footer-row { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: center; }
.footer-row + .footer-row { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-dark); }
.footer-brand { display: grid; gap: 6px; }
.footer-tagline { font-family: var(--font-brand); font-style: italic; font-size: 17px; color: var(--cream); }
.footer-row nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer-row a:not(.brand) { text-decoration: none; color: var(--cream); min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.footer-row a:not(.brand):hover, .footer-row nav a[aria-current] { color: var(--brass); }
.site-footer .brand img { height: 40px; }

/* ---------- Motion (only when the visitor allows it; see html.motion) ----------
   Things arrive once, in reading order, and then stay still. */
html.motion .rv {
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1) var(--d, 0ms), transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms);
}
html.motion .rv-3d { transform: perspective(1200px) translate3d(0, 60px, 0) rotateX(14deg); transform-origin: 50% 100%; }
html.motion .rv-flip { transform: perspective(700px) rotateX(-80deg); transform-origin: 50% 85%; }
html.motion .rv.is-in { opacity: 1; transform: none; }
/* Scroll-linked (values set by setupScrollFx in app.js) */
html.fx .focus-list > li { opacity: calc(.16 + .84 * var(--lit, 1)); }
/* Reading spotlight (--spot, set by setupScrollFx): the block being read in solid
   black (white on dark sections and cards), the text around it waiting in grey. */
html.fx .spot { --spot-on: var(--ink); --spot-off: #8C929D; color: color-mix(in srgb, var(--spot-on) calc(var(--spot, 1) * 100%), var(--spot-off)); }
html.fx .on-dark .spot { --spot-on: #fff; --spot-off: #6E778A; }
html.fx .values > li.spot { --spot-on: #fff; --spot-off: rgba(255, 255, 255, .42); }
html.fx .spot .line, html.fx .spot strong, html.fx .spot p, html.fx .spot .highlight, html.fx .benefit.spot > div { color: inherit; }
html.fx .on-dark .spot .line + .line { color: color-mix(in srgb, var(--brass) calc(var(--spot, 1) * 100%), var(--spot-off)); }
html.fx .pillars.is-stacked .pillar-card { transform: perspective(1400px) rotateX(calc(var(--cover, 0) * 5deg)) scale(calc(1 - var(--cover, 0) * .05)); }
html.fx .pillars.is-stacked .pillar-card > * { opacity: max(.12, 1 - var(--cover, 0) * 1.6); }
html.fx .result { transform: perspective(1600px) rotateX(calc(var(--rise, 0) * 12deg)) scale(calc(1 - var(--rise, 0) * .06)); transform-origin: 50% 100%; }
html.fx .work-zoom img { transform: scale(var(--zoom, 1)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Phone-specific copy (see "mobileText" in content.js) */
.m-only { display: none; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .d-only { display: none; }
  .m-only { display: revert; }
}


/* Smaller serif titles (cards, steps, lists) take the heavier cut too. */
h3 { font-weight: var(--display-weight-sm); }