/* =====================================================================
   AXCIS TECHNOLOGY — public design system v2
   A light, clear, premium editorial system. Warm ivory ground, crisp
   ink type, restrained terracotta accent. Authored, not templated.
   ===================================================================== */

:root {
  /* Colour — warm ivory ground, near-black ink, one restrained accent */
  --paper: #f4f1e9;
  --paper-2: #ece7db;
  --paper-3: #e4ddcd;
  --field: #efeae0;
  --ink: #1b1712;
  --ink-2: #332c23;
  --muted: #6f6757;
  --line: rgba(27, 23, 18, 0.14);
  --line-soft: rgba(27, 23, 18, 0.08);
  --accent: #a63c27;
  --accent-ink: #7e2d1c;
  --accent-soft: #eddcd2;
  --white: #ffffff;
  --night: #201b14;
  --night-2: #2a241b;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;

  /* Spacing (8pt base) */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem;  --s6: 4rem;  --s7: 6rem;  --s8: 8rem; --s9: 11rem;

  /* Layout */
  --container: 1380px;
  --gutter: clamp(1.5rem, 5vw, 4.5rem);
  --gutter-narrow: clamp(1.25rem, 3.5vw, 2.75rem);
  --col-gap: clamp(1.25rem, 3vw, 2.5rem);

  /* Motion */
  --ease: cubic-bezier(.72, 0, .18, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 220ms;
  --t-med: 480ms;
  --t-slow: 1100ms;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.62;
  font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
::selection { background: var(--ink); color: var(--paper); }

* { scrollbar-width: thin; scrollbar-color: var(--paper-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--paper-3); }
::-webkit-scrollbar-track { background: transparent; }

h1,h2,h3,h4,h5 { font-family: var(--font-display); font-weight: 420; line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 var(--s2); color: var(--ink); }
h1 { font-weight: 380; }
p { margin: 0 0 var(--s2); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul,ol { padding-left: 1.2rem; }
figure { margin: 0; }
button { font-family: inherit; }
strong { font-weight: 600; }
::placeholder { color: rgba(27,23,18,.4); }

/* A11y — focus & skip */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 4000;
  background: var(--ink); color: var(--paper); padding: .9rem 1.4rem;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
}
.skip-link:focus { left: 0; top: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.js-only { display: none; }
html.js .js-only { display: block; }
html.js .nav-toggle { display: none; }

.font-mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); }

/* ---------- Layout primitives ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--col-gap); }
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}
.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}
.col-9{grid-column:span 9}.col-10{grid-column:span 10}.col-12{grid-column:span 12}

.eyebrow, .h-label {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: .7rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; }
.h-label .no { color: var(--accent); }
.e-label { display: inline-flex; align-items: baseline; gap: .9rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.e-label b { font-weight: 400; color: var(--accent); }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .7rem; justify-content: center;
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 1.05rem 1.8rem; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer; position: relative; overflow: hidden; text-decoration: none; z-index: 0;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn::before { content: ""; position: absolute; inset: 0; background: var(--ink); z-index: -1; transform: translateY(102%); transition: transform var(--t-med) var(--ease); }
.btn:hover, .btn:focus-visible { color: var(--paper); border-color: var(--ink); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn .arr { display: inline-block; transition: transform var(--t-fast) var(--ease-out); }
.btn:hover .arr { transform: translate(3px, -3px); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink::before { background: var(--paper); }
.btn--ink:hover, .btn--ink:focus-visible { color: var(--ink); border-color: var(--ink); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn--accent::before { background: var(--accent-ink); }
.btn--accent:hover, .btn--accent:focus-visible { color: var(--white); border-color: var(--accent-ink); }
.btn--lg { padding: 1.25rem 2.3rem; font-size: .8rem; }
.btn--sm { padding: .7rem 1.2rem; font-size: .7rem; }
.btn--light { border-color: rgba(244,241,233,.5); background: transparent; color: var(--paper); }
.btn--light::before { background: var(--paper); }
.btn--light:hover, .btn--light:focus-visible { color: var(--ink); border-color: var(--paper); }

.text-link {
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .6rem; position: relative; padding-bottom: 4px;
}
.text-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(.35); transform-origin: left; transition: transform var(--t-med) var(--ease); opacity: .6; }
.text-link:hover::after, .text-link:focus-visible::after { transform: scaleX(1); opacity: 1; }
.text-link .arr { transition: transform var(--t-fast) var(--ease-out); }
.text-link:hover .arr { transform: translate(3px, -3px); }

/* =====================================================================
   01. HEADER / NAVIGATION
   ===================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  display: flex; align-items: center; gap: 2rem; flex-wrap: nowrap;
  padding: 1.15rem var(--gutter); color: var(--ink); background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), padding var(--t-med) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(244,241,233,.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft); padding-top: .7rem; padding-bottom: .7rem;
}
.site-header a { color: inherit; }

.site-brand { display: inline-flex; align-items: baseline; gap: .55rem; flex: 0 0 auto; position: relative; z-index: 1001; }
.site-brand-logo { height: 30px; width: auto; display: block; }
.site-brand-text { font-family: var(--font-display); font-weight: 560; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1; }
.site-brand-text em { font-style: normal; color: var(--accent); }
.site-brand-tag { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

.site-nav { margin-left: auto; min-width: 0; }
.site-nav ul { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.site-nav a { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; position: relative; opacity: .7; padding: .35rem 0; transition: opacity var(--t-fast) var(--ease); }
.site-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--t-med) var(--ease-out); }
.site-nav a:hover, .site-nav a.is-active { opacity: 1; }
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.site-nav .nav-cta { opacity: 1; }
.site-nav .nav-cta .btn { padding: .6rem 1.1rem; font-size: .68rem; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px;
  position: relative; z-index: 1001; margin-left: auto; padding: 0; align-items: center; justify-content: center; flex-direction: column;
}
.nav-toggle span { display: block; height: 1.5px; width: 24px; background: currentColor; margin: 3.5px 0; transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 1000; background: var(--paper);
  display: flex; align-items: center; justify-content: flex-end; flex-direction: column;
  clip-path: inset(0 0 100% 0); transition: clip-path var(--t-slow) var(--ease);
  padding: calc(6rem + env(safe-area-inset-top)) var(--gutter) calc(3rem + env(safe-area-inset-bottom));
}
.mobile-menu.is-open { clip-path: inset(0 0 0 0); }
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { list-style: none; margin: 0 0 auto; padding: 0; width: 100%; }
.mobile-menu li { border-bottom: 1px solid var(--line-soft); }
.mobile-menu a { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 8vw, 3rem); display: flex; align-items: baseline; gap: 1rem; padding: .7rem 0; color: var(--ink); }
.mobile-menu a .idx { font-family: var(--font-mono); font-size: .7rem; color: var(--accent); }
.mobile-menu .menu-cta { padding: 1.5rem 0 0; }
body.menu-open .site-header { color: var(--ink); }

/* =====================================================================
   02. SCROLL-DRIVEN CORE STORY (homepage)
   ===================================================================== */
.story { position: relative; height: 460svh; }
@media (max-height: 600px) and (orientation: landscape) { .story { height: 600svh; } }
.story-viewport {
  position: sticky; top: 0; height: 100svh; height: 100vh; overflow: hidden;
  display: flex; align-items: center; isolation: isolate; background: var(--paper);
}
.story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.core-fallback { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: grid; place-items: center; }
.core-fallback-mark { width: 46vmin; height: 46vmin; border-radius: 50%; opacity: .26;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 44%, var(--ink) 46%, transparent 48%),
    radial-gradient(circle at 50% 50%, transparent 0 28%, var(--ink) 30%, transparent 32%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 3.1%, var(--ink) 3.2% 3.4%, transparent 3.6% 5%);
}
.core-fallback-mark::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; border: 1px solid var(--accent); opacity: .45; }

.story-type { position: absolute; inset: 0; z-index: 3; width: 100%; }
.core-chapter {
  position: absolute; inset: 0; padding: 0 var(--gutter); max-width: var(--container); margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s var(--t-med);
}
.core-chapter.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.core-chapter .k { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.4rem; display: flex; gap: .9rem; align-items: center; }
.core-chapter .k b { color: var(--accent); font-weight: 400; }
.core-chapter .k::after { content: ""; width: 46px; height: 1px; background: currentColor; opacity: .5; }
.core-title { font-size: clamp(2.7rem, 8.5vw, 7rem); font-weight: 380; letter-spacing: -0.02em; line-height: .98; max-width: 13ch; margin-bottom: 1.6rem; }
.core-title .accent { color: var(--accent); font-style: italic; font-weight: 340; }
.core-sub { font-size: clamp(1.05rem, 1.7vw, 1.35rem); color: var(--muted); max-width: 42ch; }
.core-chapter--center { align-items: center; text-align: center; }
.core-chapter--center .core-title { margin-inline: auto; }
.core-chapter--center .core-sub { margin-inline: auto; }
.core-chapter--right { align-items: flex-end; text-align: right; }
.core-chapter--right .core-title, .core-chapter--right .core-sub { max-width: 16ch; margin-left: auto; }

.story-cue { position: absolute; z-index: 4; left: 50%; bottom: 2.2rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .7rem; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.story-cue i { display: block; width: 1px; height: 40px; background: var(--line); position: relative; overflow: hidden; }
.story-cue i::after { content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%; background: var(--accent); animation: cue 1.9s var(--ease) infinite; }
@keyframes cue { 0%{top:-50%} 100%{top:100%} }

.story-progress { position: absolute; z-index: 4; right: var(--gutter); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.story-progress .rail { position: relative; width: 1px; height: 120px; background: var(--line); overflow: hidden; }
.story-progress .rail span { position: absolute; inset: auto 0 0 0; height: 0; width: 100%; background: var(--accent); }

/* Static fallback: no-WebGL / no-JS / reduced-motion */
/* Static fallback: no-WebGL / no-JS / reduced-motion */
html.no-webgl .story, html.no-js .story { height: auto; }
html.no-webgl .story-viewport, html.no-js .story-viewport { position: relative; height: auto; min-height: 0; overflow: visible; display: block; padding: 0; }
html.no-webgl .story-type, html.no-js .story-type { position: relative; }
html.no-webgl .core-chapter, html.no-js .core-chapter { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; padding: 0 var(--gutter); margin: 0 auto; max-width: var(--container); justify-content: flex-start; padding-top: calc(6rem + 10vh); padding-bottom: 3rem; }
html.no-webgl .core-chapter + .core-chapter, html.no-js .core-chapter + .core-chapter { padding-top: 2rem; padding-bottom: 2rem; }
html.no-webgl .story-cue, html.no-webgl .story-progress, html.no-webgl .story-canvas, html.no-js .story-cue, html.no-js .story-progress, html.no-js .story-canvas { display: none; }
@media (prefers-reduced-motion: reduce) {
  html .story { height: auto !important; }
  html .story-viewport { position: relative !important; height: auto !important; display: block; overflow: visible; padding: 0; }
  html .story-type { position: relative; }
  html .core-chapter { position: relative !important; inset: auto; opacity: 1 !important; visibility: visible !important; transform: none !important; padding: 0 var(--gutter); margin: 0 auto; max-width: var(--container); justify-content: flex-start; padding-top: calc(6rem + 10vh); padding-bottom: 3rem; }
  html .core-chapter + .core-chapter { padding-top: 2rem; padding-bottom: 2rem; }
  html .story-cue, html .story-progress, html .story-canvas { display: none; }
}

/* =====================================================================
   03. HOME CHAPTERS (post-story narrative)
   ===================================================================== */
.chapter { padding: clamp(5rem, 12vh, 10rem) var(--gutter); position: relative; }
.chapter .inner { max-width: var(--container); margin: 0 auto; }
.chapter-head { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: baseline; justify-content: space-between; margin-bottom: var(--s6); }
.chapter-title-big { font-size: clamp(2.3rem, 5.4vw, 4.6rem); max-width: 18ch; letter-spacing: -0.02em; }

/* Who — editorial lead */
.chapter--who { border-top: 1px solid var(--line); }
.chapter--who .lead { font-family: var(--font-display); font-weight: 360; font-size: clamp(1.9rem, 4.8vw, 4rem); line-height: 1.12; letter-spacing: -0.015em; max-width: 24ch; }
.chapter--who .lead em { font-style: italic; color: var(--accent); }
.chapter--who .who-side { grid-column: 8 / span 5; align-self: end; color: var(--muted); }

/* Build — service reel */
.chapter--build { background: var(--paper); padding-top: clamp(4rem,10vh,8rem); }
.service-reel { border-top: 1px solid var(--line); margin-top: var(--s2); }
.service-entry { display: grid; grid-template-columns: 84px 1.4fr 1.6fr auto; column-gap: clamp(1rem, 3vw, 2.5rem); align-items: center; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.service-entry .num { font-family: var(--font-mono); font-size: .76rem; color: var(--accent); }
.service-entry h3 { font-size: clamp(1.4rem, 3.2vw, 2.5rem); font-weight: 400; margin: 0; transition: transform var(--t-fast) var(--ease), color var(--t-fast); }
.service-entry .sum { color: var(--muted); max-width: 42ch; margin: 0; }
.service-entry .go { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateX(-10px); transition: opacity var(--t-med), transform var(--t-med) var(--ease); }
.service-entry:hover .go, .service-entry:focus-visible .go, .service-entry.is-on .go { opacity: 1; transform: translateX(0); }
.service-entry:hover h3, .service-entry.is-on h3 { transform: translateX(14px); color: var(--accent); }

/* Process — progressive editorial sequence */
.chapter--process { border-top: 1px solid var(--line); }
.process { list-style: none; margin: var(--s2) 0 var(--s5); padding: 0; }
.process li { display: grid; grid-template-columns: 90px 1fr; gap: var(--col-gap); padding: var(--s4) 0; border-bottom: 1px solid var(--line-soft); }
.p-num { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; color: var(--accent); }
.p-num sup { font-size: .6em; letter-spacing: 0; color: var(--muted); }
.process h3 { font-family: var(--font-body); font-weight: 500; font-size: clamp(1.2rem, 2.4vw, 1.8rem); margin: 0 0 .4rem; }
.process .desc { color: var(--muted); max-width: 52ch; font-size: .97rem; margin: 0; }

/* Work — editorial portfolio */
.chapter--work { background: var(--paper); border-top: 1px solid var(--line); }
.work-list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem) var(--col-gap); }
.work-card { display: block; position: relative; }
.work-card:nth-child(even) { margin-top: clamp(2rem, 8vw, 6rem); transform: translateY(clamp(1rem,4vw,3rem)); }
.work-card-media { position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: 4 / 3; }
.work-card:nth-child(4n+2) .work-card-media, .work-card:nth-child(4n+3) .work-card-media { aspect-ratio: 4 / 4.6; }
.work-card-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.02); transition: transform 1.2s var(--ease), filter var(--t-med) var(--ease); }
.work-card:hover .work-card-media img, .work-card:focus-visible .work-card-media img { transform: scale(1.05); filter: none; }
.work-card-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: clamp(4rem,10vw,9rem); color: var(--paper-3); }
.work-card-fallback::after { content: ""; position: absolute; inset: 12%; border: 1px solid var(--line); }
.work-card-meta { display: flex; align-items: baseline; gap: 1.2rem; justify-content: space-between; padding-top: 1rem; }
.work-card-meta h3 { font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.8rem); font-weight: 420; margin: 0; }
.work-card-meta .meta { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* Proof — editorial stats & testimonials */
.chapter--proof { border-top: 1px solid var(--line); background: var(--night); color: var(--paper); }
.chapter--proof .chapter-title-big { color: var(--paper); }
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); border-top: 1px solid rgba(244,241,233,.16); padding-top: var(--s5); }
.stat-cell .val { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.9rem, 7vw, 6rem); line-height: .9; letter-spacing: -0.03em; }
.stat-cell .val sup { font-size: .4em; color: var(--accent); }
.stat-cell .lbl { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,241,233,.6); margin-top: 1rem; display: block; }
.testimonials-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--col-gap); margin-top: var(--s8); border-top: 1px solid rgba(244,241,233,.16); padding-top: var(--s5); }
.t-quote { margin: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.t-quote p { font-family: var(--font-display); font-weight: 360; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.3; margin: 0; }
.t-quote p::before { content: "\201C"; color: var(--accent); }
.t-quote cite { font-style: normal; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(244,241,233,.55); }
.t-quote cite b { color: var(--paper); font-weight: 500; display: block; margin-bottom: .2rem; }

/* Team — human editorial */
.chapter--team { border-top: 1px solid var(--line); }
.team-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--col-gap) var(--col-gap); }
.team-person { position: relative; }
.team-person:nth-child(1){grid-column:1/span 4}.team-person:nth-child(2){grid-column:6/span 3;margin-top:clamp(1rem,4vw,3rem)}
.team-person:nth-child(3){grid-column:9/span 4;margin-top:clamp(1rem,4vw,3rem)}
.team-person:nth-child(4){grid-column:2/span 3;margin-top:clamp(1rem,4vw,3rem)}
.team-person:nth-child(5){grid-column:5/span 4;margin-top:clamp(1rem,4vw,3rem)}
.team-person:nth-child(6){grid-column:2/span 3;margin-top:clamp(1rem,4vw,3rem)}
.team-person:nth-child(7){grid-column:5/span 4;margin-top:clamp(1rem,4vw,3rem)}
.team-photo { aspect-ratio: 4 / 4.8; overflow: hidden; background: var(--paper-2); position: relative; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.04); transition: filter var(--t-med) var(--ease), transform 1s var(--ease); }
.team-person:hover .team-photo img { filter: none; transform: scale(1.03); }
.team-initial { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: clamp(4rem,9vw,8rem); color: var(--paper-3); }
.team-initial::after { content: ""; position: absolute; inset: 8%; border: 1px solid var(--line); }
.team-meta { display: flex; align-items: baseline; gap: 1rem; justify-content: space-between; padding-top: .9rem; }
.team-meta h3 { font-size: 1.2rem; font-weight: 520; margin: 0; }
.team-meta .pos { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.team-social { display: flex; gap: 1rem; list-style: none; padding: 0; margin: .5rem 0 0; }
.team-social a { font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 3px; opacity: .65; }
.team-social a:hover { opacity: 1; }

/* Contact CTA */
.chapter--contact-cta { border-top: 1px solid var(--line); background: var(--paper); text-align: center; }
.chapter--contact-cta .big-cta { font-family: var(--font-display); font-weight: 360; font-size: clamp(2.4rem, 7vw, 6rem); line-height: 1; letter-spacing: -0.02em; max-width: 22ch; margin: 0 auto var(--s5); }
.chapter--contact-cta .big-cta em { font-style: italic; color: var(--accent); }
.cta-foot { color: var(--muted); font-size: .95rem; }
.cta-foot a { text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   04. INNER PAGES
   ===================================================================== */
.page { }
.page-hero { padding: calc(9rem + 2vh) var(--gutter) clamp(3rem,7vh,5rem); max-width: var(--container); margin: 0 auto; }
.page-hero--compact { padding-top: calc(7rem + 2vh); }
.page-kicker { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.4rem; }
.page-title { font-size: clamp(2.6rem, 7vw, 6rem); letter-spacing: -0.02em; max-width: 20ch; }
.page-sub { font-size: clamp(1.05rem, 1.8vw, 1.35rem); color: var(--muted); max-width: 48ch; }
.page-rule { border: 0; border-top: 1px solid var(--line); margin: 0 var(--gutter) var(--s7); max-width: var(--container); }
.page-sec-head { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) var(--s3); display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; }
.page-sec-head h2 { font-size: clamp(1.8rem, 4vw, 3rem); max-width: 18ch; }

.prose { max-width: 72ch; }
.prose p { font-size: 1.08rem; }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 400; margin-top: var(--s5); }
.prose h3 { font-size: 1.3rem; font-weight: 520; margin-top: var(--s4); }
.prose ul, .prose ol { margin-bottom: var(--s2); }
.prose li { margin-bottom: .5rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Reveal (motion) */
.reveal { opacity: 0; transform: translateY(30px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-up { opacity: 0; transform: translateY(26px); }
.reveal-up.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }

/* Pick-up lists (capabilities / facts) */
.facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); border-top: 1px solid var(--line); padding-top: var(--s5); margin-top: var(--s6); }
.fact { }
.fact .ft { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .7rem; }
.fact p { margin: 0; }

/* ---------- Services page ---------- */
.service-index { border-top: 1px solid var(--line); max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) var(--s7); }
.service-idx-row { display: grid; grid-template-columns: 84px 1.2fr 1.6fr auto; column-gap: clamp(1rem,3vw,2.5rem); align-items: center; padding: 2.2rem 0; border-bottom: 1px solid var(--line); }
.service-idx-row:hover h3 { transform: translateX(14px); color: var(--accent); }
.service-idx-row h3 { font-size: clamp(1.6rem,3.6vw,2.8rem); font-weight: 380; margin: 0; transition: transform var(--t-fast) var(--ease), color var(--t-fast); }
.service-idx-row .num { font-family: var(--font-mono); font-size: .76rem; color: var(--accent); }
.service-idx-row .sum { color: var(--muted); max-width: 42ch; margin: 0; }
.service-idx-row .go { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateX(-10px); transition: opacity var(--t-med), transform var(--t-med) var(--ease); }
.service-idx-row:hover .go { opacity: 1; transform: translateX(0); }

/* Service detail */
.svc-hero { max-width: var(--container); margin: 0 auto; padding-top: calc(9rem + 2vh); }
.svc-hero .grid { align-items: end; }
.svc-title { font-size: clamp(2.6rem, 7vw, 6rem); letter-spacing: -0.02em; }
.svc-summary { font-size: clamp(1.05rem,1.8vw,1.3rem); color: var(--muted); max-width: 44ch; }
.svc-hero-img { margin-top: var(--s6); aspect-ratio: 16/7; overflow: hidden; }
.svc-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.caps-list { list-style: none; padding: 0; margin: 0; }
.caps-list li { display: flex; gap: 1rem; align-items: baseline; padding: 1.4rem 0; border-bottom: 1px solid var(--line-soft); font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.7rem); }
.caps-list li::before { content: ""; width: 9px; height: 9px; background: var(--accent); border-radius: 50%; align-self: center; flex: 0 0 auto; }
.svc-facts { border-left: 1px solid var(--line); padding-left: var(--s5); }
.svc-facts .fact { margin-bottom: var(--s5); }
.svc-facts p { margin: 0; }

/* Work index filter */
.filter-bar { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) var(--s4); display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-chip { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: .55rem 1.1rem; border: 1px solid var(--line); color: var(--muted); transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast); }
.filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.filter-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.work-index-all { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) var(--s7); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(2rem,4vw,3.5rem) var(--col-gap); }
.work-index-all .work-card:nth-child(even) { margin-top: clamp(1.5rem,6vw,4rem); }
.work-index-all .work-card-media { aspect-ratio: 4/3; }
.work-index-all .work-card:nth-child(3n+2) .work-card-media { aspect-ratio: 4/4.4; }
.work-index-all .work-card:nth-child(3n) .work-card-media { aspect-ratio: 3/3.6; }

/* Project detail */
.project-detail-hero { max-width: var(--container); margin: 0 auto; padding: calc(9rem + 2vh) var(--gutter) var(--s5); }
.project-hero-img { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); aspect-ratio: 16/8; overflow: hidden; }
.project-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.project-body { max-width: var(--container); margin: 0 auto; padding: var(--s7) var(--gutter) var(--s8); display: grid; grid-template-columns: 1fr 300px; gap: var(--s7); }
.project-facts { border-left: 1px solid var(--line); padding-left: var(--s5); position: sticky; top: 6rem; height: fit-content; }
.project-facts .fact { margin-bottom: var(--s4); }
.project-facts p { margin: 0; }
.project-facts .btn { margin-top: var(--s2); }
.project-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); margin-top: var(--s6); }
.project-gallery img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.project-gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 16/8; }

/* ---------- Forms ---------- */
.form-shell { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) var(--s8); display: grid; grid-template-columns: 360px 1fr; gap: var(--s7); }
.contact-aside { }
.contact-aside .fact { margin-bottom: var(--s5); }
.contact-aside p { margin: 0; }
.contact-aside .mail { font-family: var(--font-body); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.form-message { padding: 1.1rem 1.2rem; margin: 0 0 var(--s4); border-left: 3px solid; font-size: .98rem; }
.form-message--success { border-color: #2e7d32; background: #e6f1e6; color: #1d4a20; }
.form-message--error { border-color: var(--accent); background: #f5e3da; color: var(--accent-ink); }
.contact-form { display: grid; gap: var(--s3); }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field .req { color: var(--accent); }
.field-note { text-transform: none; letter-spacing: 0; opacity: .6; font-size: .72rem; }
.field input:not([type=checkbox]):not([type=file]), .field select, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-body); font-size: 1.05rem; padding: .7rem 0; color: var(--ink); outline: none; transition: border-color var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 130px; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 12px) 55%; background-size: 4px 4px; background-repeat: no-repeat; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.field input[type=file] { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); }
.field--check { flex-direction: row; align-items: flex-start; gap: .7rem; }
.field--check input { margin-top: .3rem; accent-color: var(--accent); width: 18px; height: 18px; }
.field--check label { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: .92rem; color: var(--ink-2); }
.field--submit { margin-top: var(--s2); }
.hp-field { position: absolute !important; left: -9999px !important; opacity: 0; }

/* =====================================================================
   05. PROOFS / SHARED UI
   ===================================================================== */
/* Cookie banner */
.cookie-banner { position: fixed; z-index: 950; left: var(--gutter); right: var(--gutter); bottom: 1.5rem; background: var(--ink); color: var(--paper); padding: 1.1rem 1.4rem; display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; font-size: .9rem; box-shadow: 0 20px 60px rgba(27,23,18,.28); }
.cookie-banner[hidden], html.js .cookie-banner[hidden] { display: none; }
.cookie-banner button { background: var(--paper); color: var(--ink); border: 0; padding: .6rem 1.2rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }

/* Scroll progress rail */
.scroll-rail { position: fixed; left: 0; top: 0; bottom: 0; width: 3px; z-index: 920; }
.scroll-rail-track { position: absolute; inset: 0; width: 100%; background: var(--line-soft); transform-origin: top; transform: scaleY(0); }
.scroll-rail-pct { position: absolute; left: 10px; bottom: 2rem; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); opacity: .7; }

/* Custom cursor */
.cursor { pointer-events: none; position: fixed; inset: 0; z-index: 3000; }
body.has-cursor, body.has-cursor * { cursor: none !important; }
.cursor-dot, .cursor-ring, .cursor-label { position: fixed; left: 0; top: 0; will-change: transform; }
.cursor-dot { width: 5px; height: 5px; margin: -2.5px; background: var(--accent); border-radius: 50%; }
.cursor-ring { width: 32px; height: 32px; margin: -16px; border: 1px solid var(--ink); border-radius: 50%; opacity: .5; transition: width .25s, height .25s, margin .25s, background .25s, opacity .25s; }
.cursor.is-hover .cursor-ring { width: 58px; height: 58px; margin: -29px; background: rgba(166,60,39,.08); }
.cursor.is-label .cursor-ring { background: var(--ink); opacity: 1; }
.cursor-label { color: var(--paper); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; margin: 22px 0 0 20px; white-space: nowrap; }

/* =====================================================================
   06. FOOTER
   ===================================================================== */
.site-footer { border-top: 1px solid var(--line); background: var(--paper-2); padding: var(--s8) var(--gutter) var(--s3); }
.footer-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s5); }
.footer-brand p { max-width: 30ch; color: var(--muted); margin-top: 1rem; }
.site-footer h4 { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: 1.2rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .6rem; }
.site-footer a { font-size: .98rem; position: relative; }
.site-footer a:hover { color: var(--accent); }
.footer-contact p { font-size: .95rem; color: var(--ink-2); margin-bottom: .6rem; }
.footer-legal { max-width: var(--container); margin: var(--s6) auto 0; border-top: 1px solid var(--line); padding-top: var(--s3); display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.footer-legal p { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; color: var(--muted); margin: 0; }
.footer-loc { display: flex; gap: 2rem; flex-wrap: wrap; }

/* Authentication (login) */
.auth-wrap { min-height: 100svh; display: grid; place-items: center; padding: 2rem var(--gutter); background: var(--paper); position: relative; }
.auth-card { width: 100%; max-width: 420px; border: 1px solid var(--line); padding: var(--s5) var(--s4); background: var(--white); }
.auth-card .auth-logo { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 1.6rem; }
.auth-card .auth-title { font-size: 1.5rem; font-weight: 400; margin-bottom: .3rem; }
.auth-card .auth-sub { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s4); }
.auth-card .field label { text-transform: none; font-family: var(--font-body); font-size: .9rem; letter-spacing: 0; color: var(--ink-2); }
.auth-card .check { display: flex; gap: .6rem; align-items: center; font-size: .9rem; margin-bottom: var(--s3); }
.auth-back { display: inline-block; margin-top: var(--s4); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.auth-back:hover { color: var(--accent); }

/* =====================================================================
   07. RESPONSIVE
   ===================================================================== */
@media (max-width: 1020px) {
  .service-entry { grid-template-columns: 64px 1fr; grid-template-areas: "num title" ". sum"; }
  .service-entry .go { display: none; }
  .service-idx-row { grid-template-columns: 64px 1fr; grid-template-areas: "num title" ". sum"; }
  .service-idx-row .go { display: none; }
  .stats-band { grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--col-gap); }
  .testimonials-row { grid-template-columns: 1fr; gap: var(--s5); }
  .work-index-all { grid-template-columns: 1fr 1fr; }
  .project-body { grid-template-columns: 1fr; gap: var(--s5); }
  .project-facts { border-left: 0; padding-left: 0; position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .form-shell { grid-template-columns: 1fr; gap: var(--s5); }
  .facts-grid { grid-template-columns: 1fr 1fr; }
  .chapter--who .lead { max-width: 100%; }
  .chapter--who .who-side { grid-column: span 12; margin-top: var(--s4); }
  .build-head { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 760px) {
  body { font-size: 1rem; }
  .site-nav { display: none; }
  html.js .site-nav { display: none; }
  .nav-toggle { display: flex; }
  html.js .nav-toggle { display: flex; }
  .skip-to-main { }
  .story-progress { display: none; }
  .core-title { font-size: clamp(2.3rem, 11vw, 3.4rem); }

  /* Centre the story + hero text on small screens so it doesn't cram the left edge */
  .core-chapter, .core-chapter--right { align-items: center; text-align: center; }
  .core-chapter .core-title, .core-chapter--right .core-title,
  .core-chapter .core-sub, .core-chapter--right .core-sub { margin-inline: auto; max-width: 100%; }

  .page-hero { text-align: center; }
  .page-hero .page-kicker, .page-hero .page-title, .page-hero .page-sub { margin-left: auto; margin-right: auto; }
  .page-title { max-width: 100%; }

  .grid { gap: var(--col-gap); }
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10 { grid-column: span 12; }

  .chapter { padding: var(--s7) var(--gutter); }
  .chapter-title-big { font-size: clamp(2rem, 9vw, 2.9rem); }
  .chapter--who { text-align: center; }
  .chapter--who .lead { font-size: clamp(1.6rem, 7.5vw, 2.3rem); margin-inline: auto; }
  .chapter--build .build-head, .chapter-head { text-align: center; }
  .chapter-head { justify-content: center; align-items: center; }
  .chapter-head .chapter-title-big, .chapter--build .chapter-title-big { margin-inline: auto; }

  .process li { grid-template-columns: 64px 1fr; }
  .process h3 { font-size: clamp(1.15rem, 4.5vw, 1.5rem); }

  .work-list { grid-template-columns: 1fr; }
  .work-card:nth-child(even), .work-card:nth-child(odd) { margin-top: 0; transform: none; }

  .work-index-all { grid-template-columns: 1fr; }
  .work-index-all .work-card:nth-child(even), .work-index-all .work-card:nth-child(3n) { margin-top: 0; }
  .work-index-all .work-card-media, .work-index-all .work-card:nth-child(3n+2) .work-card-media, .work-index-all .work-card:nth-child(3n) .work-card-media { aspect-ratio: 4/3; }

  .team-mosaic { display: flex; flex-direction: column; gap: var(--s5); }
  .team-person { width: 100%; }
  .team-person:nth-child(n) { margin-top: 0; }
  .team-photo { aspect-ratio: 4/4.4; }

  .field--row { grid-template-columns: 1fr; gap: var(--s3); }
  .facts-grid, .stats-band { grid-template-columns: 1fr 1fr; }
  .facts-grid { gap: var(--s4); }
  .svc-hero-img, .project-hero-img { aspect-ratio: 4/3; }
  .project-gallery { grid-template-columns: 1fr; }
  .project-gallery img:first-child { grid-column: auto; aspect-ratio: 4/3; }
  .page-hero { padding-top: calc(7rem + 2vh); }
  .svc-hero { padding-top: calc(7rem + 2vh); }
  .project-detail-hero { padding-top: calc(7rem + 2vh); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .chapter--contact-cta .big-cta { font-size: clamp(2.1rem, 10.5vw, 3.2rem); }
}

@media (max-width: 480px) {
  :root { --gutter: 1.25rem; }
  .site-brand-tag { display: none; }
  .stats-band, .facts-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; gap: 1rem; }
  .btn--lg { padding: 1.05rem 1.5rem; }
  .site-header { padding-left: 1.25rem; padding-right: 1.25rem; }
  .mobile-menu { padding-left: 1.25rem; padding-right: 1.25rem; }
  .chapter { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* =====================================================================
   08. REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal, .reveal-up { opacity: 1; transform: none; }
  .cursor, .scroll-rail, .story-cue, .story-progress { display: none !important; }
}