/* ============================================================================
   PLID ATELIER
   ----------------------------------------------------------------------------
   Photography led, quiet, and plain about what the business sells.

   House rules:
     border-radius is 0 everywhere.
     No drop shadows. Depth comes from paper tone and photography.
     No decorative gradients.
     Hairline rules are used sparingly and only where they do a job.
     Only transform and opacity are animated, so nothing forces layout.
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */

:root {
  --paper:      #f2eee7;
  --paper-sunk: #e9e3d9;
  --sand:       #ded4c4;
  --ink:        #1b1916;
  --ink-2:      #55504a;
  --ink-3:      #8b8378;
  --accent:     #37596f;
  --signal:     #31556b;
  --signal-ink: #f7f2e9;
  --grain-blend: multiply;
  --scroll: 0;
  --scroll-y: 0px;

  --rule:      color-mix(in oklab, var(--ink) 14%, transparent);
  --rule-soft: color-mix(in oklab, var(--ink) 7%, transparent);

  --sans:  "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono:  "Azeret Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;

  --t-mono:  clamp(0.6875rem, 0.65rem + 0.16vw, 0.8125rem);
  --t-small: clamp(0.875rem, 0.84rem + 0.16vw, 0.9375rem);
  --t-body:  clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  --t-lead:  clamp(1.1875rem, 1.05rem + 0.7vw, 1.625rem);
  --t-h3:    clamp(1.25rem, 1.05rem + 0.9vw, 1.875rem);
  --t-h2:    clamp(1.875rem, 1.2rem + 2.8vw, 3.75rem);
  --t-h1:    clamp(2.375rem, 1.2rem + 4.6vw, 5.5rem);

  --gut:     clamp(1.25rem, 0.5rem + 3vw, 4.5rem);
  --col-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  --band:    clamp(4.5rem, 2.5rem + 8vw, 9rem);

  --e-out:   cubic-bezier(0.16, 1, 0.30, 1);
  --e-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --tap:     260ms;

  --hair: 1px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #1d1b18;
    --paper-sunk: #28241f;
    --sand:       #393229;
    --ink:        #ece7dd;
    --ink-2:      #b8afa3;
    --ink-3:      #9f968a;
    --accent:     #8fb4cc;
    --signal:     #8fb4cc;
    --signal-ink: #17191a;
    --grain-blend: screen;
    --rule:      color-mix(in oklab, var(--ink) 18%, transparent);
    --rule-soft: color-mix(in oklab, var(--ink) 9%, transparent);
  }
}

:root[data-theme="dark"] {
  --paper:      #1d1b18;
  --paper-sunk: #28241f;
  --sand:       #393229;
  --ink:        #ece7dd;
  --ink-2:      #b8afa3;
  --ink-3:      #9f968a;
  --accent:     #8fb4cc;
  --signal:     #8fb4cc;
  --signal-ink: #17191a;
  --grain-blend: screen;
  --rule:      color-mix(in oklab, var(--ink) 18%, transparent);
  --rule-soft: color-mix(in oklab, var(--ink) 9%, transparent);
}

/* --------------------------------------------------------------- GROUNDING */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* A faint paper tooth keeps the broad fields from reading as perfectly flat
   digital fills. It never receives input and is deliberately near invisible. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--paper); }

.u-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; top: 0; left: 0; z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  transform: translateY(-120%);
  transition: transform var(--tap) var(--e-out);
  min-height: 2.75rem;
}
.skip:focus-visible { transform: translateY(0); }

/* ------------------------------------------------------------------ LAYOUT */

.layout {
  display: grid;
  grid-template-columns:
    [full-start] var(--gut)
    [content-start] repeat(12, minmax(0, 1fr))
    [content-end] var(--gut)
    [full-end];
  column-gap: var(--col-gap);
}
.layout > * { grid-column: content; }
.bleed { grid-column: full; }

.band { padding-block: var(--band); }
.band--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.band--sunk { background: var(--paper-sunk); }
.band--sand { background: var(--sand); }

.shell { position: relative; z-index: 1; }

/* --------------------------------------------------------------- TYPOGRAPHY */

.display {
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.lead {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  max-width: 40ch;
}

.prose { color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.prose + .prose { margin-top: 1em; }
.small { font-size: var(--t-small); color: var(--ink-2); }

.eyebrow {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.35rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  margin-bottom: clamp(0.5rem, 0.35rem + 0.5vw, 0.9rem);
}
.eyebrow--accent { color: var(--accent); }

.link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: var(--hair) solid currentColor;
}
.link:hover { color: var(--ink); }

/* ------------------------------------------------------------------ HEADER */

.head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--col-gap);
  padding: clamp(0.75rem, 0.4rem + 0.9vw, 1.25rem) var(--gut);
  transition: transform 480ms var(--e-out), background-color 300ms linear;
}
.head[data-lifted="true"] {
  background: color-mix(in oklab, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.head[data-stowed="true"] { transform: translate3d(0, -102%, 0); }

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  text-decoration: none;
  color: var(--ink);
}
.mark svg { width: auto; height: clamp(1.75rem, 1.4rem + 1.1vw, 2.4rem); }
.mark__name {
  font-weight: 700;
  font-size: clamp(0.9rem, 0.82rem + 0.28vw, 1.05rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.mark__name span { font-weight: 300; color: var(--ink-3); }

.nav {
  justify-self: center;
  display: flex;
  gap: clamp(1.25rem, 0.6rem + 1.8vw, 2.75rem);
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transition: color var(--tap) var(--e-out);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

.head__end { display: flex; align-items: center; gap: 0.75rem; }

.menu-btn { display: none; }
@media (max-width: 56rem) {
  .head { grid-template-columns: auto auto; }
  .nav { display: none; }
  .head__end { justify-self: end; }
  .menu-btn { display: inline-flex; }
  .u-hidden-sm { display: none !important; }
}

/* ------------------------------------------------------------- MOBILE SHEET */

.sheet {
  position: fixed; inset: 0; z-index: 95;
  display: grid; align-content: center; gap: 0.25rem;
  padding: 6rem var(--gut) var(--gut);
  background: var(--paper);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 560ms var(--e-inout), visibility 0s linear 560ms;
}
.sheet[data-open="true"] {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 560ms var(--e-inout), visibility 0s;
}
.sheet > a {
  padding: 0.6rem 0;
  border-bottom: var(--hair) solid var(--rule);
  font-size: clamp(1.85rem, 1.1rem + 4.4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  transition: transform 560ms var(--e-out) calc(var(--i, 0) * 55ms + 120ms),
              opacity 380ms linear calc(var(--i, 0) * 55ms + 120ms);
}
.sheet[data-open="true"] > a { opacity: 1; transform: none; }
.sheet > a[aria-current="page"] { color: var(--accent); }
.sheet__foot { margin-top: 2rem; display: grid; gap: 0.4rem; }
.sheet__foot .link,
.foot .link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
body.is-locked { overflow: hidden; }
@media (min-width: 56.0625rem) { .sheet { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sheet { transition: none; }
  .sheet > a { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------- MEDIA */

figure { margin: 0; }

.media { position: relative; overflow: hidden; background: var(--paper-sunk); }

/* The photograph sits slightly oversized and settles back as it arrives.
   Subtle enough that you feel it rather than watch it happen. */
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1500ms var(--e-out);
}
.media.is-in img, .is-in .media img { transform: scale(1); }

.caption {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------- HERO */

.hero {
  padding-top: clamp(7rem, 5rem + 7vw, 10rem);
  padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.hero__title { grid-column: content-start / 11; }
.hero__say {
  grid-column: content-start / 8;
  margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}
.hero__cta {
  grid-column: content;
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  display: flex; flex-wrap: wrap; gap: 0.85rem;
}
@media (max-width: 56rem) {
  .hero__title, .hero__say { grid-column: content; }
}

.hero__shot { grid-column: full; margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.hero__shot .media { aspect-ratio: 20 / 9; }
@media (max-width: 48rem) { .hero__shot .media { aspect-ratio: 4 / 3; } }

/* -------------------------------------------------------------------- OFFER
   The four things the business sells. Plain rows, generous spacing, no
   decoration. Being understood is the whole job here. */

.offer { display: grid; gap: clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem); }

.offer__row { max-width: 50ch; }
.offer__row p { color: var(--ink-2); margin-top: 0.55rem; }

/* A staircase rather than a stack. Each service steps further in than the
   last, then the fourth pulls back, so the block has a rhythm instead of a
   ruled grid. Collapses flat on narrow screens. */
.offer__row:nth-child(2) { margin-left: clamp(0rem, 5vw, 8rem); }
.offer__row:nth-child(3) { margin-left: clamp(0rem, 10vw, 16rem); }
.offer__row:nth-child(4) { margin-left: clamp(0rem, 3vw, 5rem); }

@media (max-width: 56rem) {
  .offer__row:nth-child(n) { margin-left: 0; }
}

/* -------------------------------------------------------------------- STEPS */

.steps { display: grid; gap: clamp(1.5rem, 1rem + 1.8vw, 2.5rem); }

.step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: clamp(1rem, 0.6rem + 1.2vw, 2rem);
  align-items: baseline;
  max-width: 58ch;
}
.step__no {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 0.9;
  color: var(--ink-3);
}
.step p { color: var(--ink-2); margin-top: 0.35rem; }

/* The sequence drifts to the right as it runs, the way a list of stages
   reads on a worksheet. */
.step:nth-child(2) { margin-left: clamp(0rem, 3vw, 4rem); }
.step:nth-child(3) { margin-left: clamp(0rem, 6vw, 8rem); }
.step:nth-child(4) { margin-left: clamp(0rem, 9vw, 12rem); }
.step:nth-child(5) { margin-left: clamp(0rem, 12vw, 16rem); }
@media (max-width: 62rem) { .step:nth-child(n) { margin-left: 0; } }

/* --------------------------------------------------------------------- MAKE */

.make {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem);
}
.make li {
  padding: 0.85rem 0;
  border-bottom: var(--hair) solid var(--rule-soft);
}

/* --------------------------------------------------------------------- DUO
   Four arrangements of heading plus list. Services alternates between them so
   no two consecutive sections land in the same place on the grid. */

.duo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.duo__head { grid-column: 1 / 6; }
.duo__list { grid-column: 7 / 13; }

.duo--b .duo__head { grid-column: 8 / 13; grid-row: 1; }
.duo--b .duo__list { grid-column: 1 / 7;  grid-row: 1; }

.duo--c .duo__head { grid-column: 1 / 8; }
.duo--c .duo__list { grid-column: 4 / 13; }

.duo--d .duo__head { grid-column: 3 / 8; }
.duo--d .duo__list { grid-column: 8 / 13; }

@media (max-width: 62rem) {
  .duo__head, .duo__list,
  .duo--b .duo__head, .duo--b .duo__list,
  .duo--c .duo__head, .duo--c .duo__list,
  .duo--d .duo__head, .duo--d .duo__list {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* -------------------------------------------------------------- SPLIT / PAIR */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--col-gap);
}
.split .media { aspect-ratio: 4 / 5; }
@media (max-width: 48rem) { .split { grid-template-columns: minmax(0, 1fr); } }

.pair {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
/* Long spec lists read better with the heading pinned to the top of them. */
.pair--top { align-items: start; }
@media (max-width: 56rem) { .pair { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------ EDITORIAL RHYTHM
   The wide layout intentionally changes pace from section to section. The
   page still follows one grid, but it no longer returns every idea to the
   same left edge or packages every idea in an identical box. */

.hero--home {
  min-height: 100svh;
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  align-content: center;
  align-items: center;
  row-gap: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem);
}
.hero--home .hero__title {
  grid-column: content-start / span 7;
  grid-row: 1;
  position: relative;
  z-index: 2;
}
.hero--home .hero__say {
  grid-column: content-start / span 5;
  grid-row: 2;
  margin-top: 0;
}
.hero--home .hero__cta {
  grid-column: content-start / span 6;
  grid-row: 3;
  margin-top: 0;
}
.hero--home .hero__shot {
  grid-column: 9 / full-end;
  grid-row: 1 / 4;
  align-self: stretch;
  margin-top: 0;
}
.hero--home .hero__shot .media {
  height: 100%;
  min-height: min(70svh, 48rem);
  aspect-ratio: auto;
}
.media[data-tilt] {
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(70rem) rotateX(var(--rx)) rotateY(var(--ry));
  transform-origin: center;
  transition: transform 500ms var(--e-out);
  will-change: transform;
}

.hero--inside {
  position: relative;
  min-height: 78svh;
  align-content: center;
  row-gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.hero--inside .hero__title { grid-column: content-start / span 8; }
.hero--inside .hero__say {
  grid-column: 8 / content-end;
  margin-top: 0;
}
.hero--inside::after {
  position: absolute;
  right: var(--gut);
  top: 50%;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  writing-mode: vertical-rl;
  transform: translateY(-50%);
}
.services-page .hero--inside::after { content: "01 / Services"; }
.contact-page .hero--inside::after { content: "02 / Contact"; }
.error-page .hero--inside::after { content: "404 / Lost"; }

.ticker {
  overflow: hidden;
  border-block: var(--hair) solid var(--rule);
  padding-block: 0.85rem;
  background: var(--paper-sunk);
}
.ticker__track {
  display: flex;
  align-items: baseline;
  gap: clamp(1.25rem, 0.75rem + 2vw, 3rem);
  width: max-content;
  animation: ticker-run 34s linear infinite;
  animation-play-state: paused;
}
@media (hover: hover) and (pointer: fine) {
  .ticker:hover .ticker__track { animation-play-state: running; }
}
.ticker span {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker i {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--accent);
}
@keyframes ticker-run { to { transform: translate3d(-50%, 0, 0); } }

.band--services { row-gap: clamp(3rem, 1.5rem + 5vw, 7rem); }
.band--services .band__intro {
  grid-column: content-start / span 4;
  align-self: start;
  position: sticky;
  top: clamp(6.5rem, 5rem + 3vw, 9rem);
}
.band--services .offer {
  grid-column: 7 / content-end;
  gap: 0;
}
.band--services .offer__row {
  position: relative;
  max-width: none;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0
           clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(3.25rem, 2.5rem + 2vw, 5rem);
  border-top: var(--hair) solid var(--rule);
  transition: translate 420ms var(--e-out), color 260ms linear;
}
.band--services .offer__row:last-child { border-bottom: var(--hair) solid var(--rule); }
.band--services .offer__row::before {
  content: attr(data-no);
  position: absolute;
  left: 0;
  top: clamp(1.25rem, 0.9rem + 1.5vw, 2.15rem);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  color: var(--ink-3);
}
.band--services .offer__row:nth-child(2) { translate: clamp(0rem, 2vw, 2rem) 0; }
.band--services .offer__row:nth-child(3) { translate: clamp(-1rem, -1vw, 0rem) 0; }
.band--services .offer__row:nth-child(4) { translate: clamp(0rem, 1vw, 1rem) 0; }
.band--services .offer__row:hover { color: var(--accent); translate: 0.5rem 0; }

.split--atelier {
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(1rem, 0.5rem + 3vw, 4.5rem);
  align-items: start;
}
.split--atelier figure:first-child .media { aspect-ratio: 6 / 7; }
.split--atelier figure:nth-child(2) { margin-top: clamp(3rem, 7vw, 9rem); }
.split--atelier figure:nth-child(2) .media { aspect-ratio: 3 / 4; }

.band--statement {
  background: var(--signal);
  color: var(--signal-ink);
}
.band--statement > div { grid-column: 4 / content-end !important; }
.band--statement em { color: inherit !important; opacity: 0.72; }

.band--process { row-gap: clamp(3rem, 1.5rem + 5vw, 7rem); }
.band--process .process__intro {
  grid-column: content-start / span 4;
  align-self: start;
  position: sticky;
  top: clamp(6.5rem, 5rem + 3vw, 9rem);
}
.band--process .steps {
  grid-column: 7 / content-end;
  gap: 0;
}
.band--process .step {
  max-width: none;
  margin-left: 0;
  padding-block: clamp(1.35rem, 1rem + 1.2vw, 2rem);
  border-top: var(--hair) solid var(--rule);
}
.band--process .step:last-child { border-bottom: var(--hair) solid var(--rule); }
.band--process .step:nth-child(2) { margin-right: clamp(0rem, 4vw, 4rem); }
.band--process .step:nth-child(3) { margin-left: clamp(0rem, 3vw, 3rem); }
.band--process .step:nth-child(4) { margin-right: clamp(0rem, 2vw, 2rem); }
.band--process .step:nth-child(5) { margin-left: clamp(0rem, 5vw, 5rem); }

.band--cta > div { grid-column: 7 / content-end; }

.services-page main { counter-reset: service-section; }
.services-page .duo {
  counter-increment: service-section;
  position: relative;
}
.services-page .duo::before {
  content: "0" counter(service-section);
  position: absolute;
  right: 0;
  top: -0.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 1.2rem + 3vw, 4.5rem);
  line-height: 1;
  color: var(--ink-3);
  opacity: 0.45;
}

.quote-section { row-gap: clamp(3rem, 1.5rem + 5vw, 7rem); }
.quote-section .quote-intro {
  grid-column: content-start / span 4;
  align-self: start;
  position: sticky;
  top: clamp(6.5rem, 5rem + 3vw, 9rem);
}
.quote-section .form { grid-column: 7 / content-end; }

.thread-progress {
  position: fixed;
  z-index: 90;
  right: clamp(0.5rem, 0.15rem + 1vw, 1.25rem);
  top: 20vh;
  width: 0.8rem;
  height: 60vh;
  pointer-events: none;
}
.thread-progress::before,
.thread-progress > i {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
.thread-progress > i {
  background: var(--accent);
  transform-origin: top;
  transform: scaleY(var(--scroll));
}
.thread-progress > b {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
  transform: translate(-50%, -50%) translateY(var(--scroll-y)) rotate(45deg);
}

@media (max-width: 62rem) {
  .hero--home { min-height: auto; align-content: normal; }
  .hero--home .hero__title,
  .hero--home .hero__say,
  .hero--home .hero__cta { grid-column: content; grid-row: auto; }
  .hero--home .hero__shot {
    grid-column: full;
    grid-row: auto;
    margin-top: clamp(2rem, 1rem + 4vw, 4rem);
  }
  .hero--home .hero__shot .media { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  .hero--inside { min-height: auto; align-content: normal; }
  .hero--inside .hero__title,
  .hero--inside .hero__say { grid-column: content; }
  .hero--inside::after { display: none; }
  .band--services .band__intro,
  .band--services .offer,
  .band--process .process__intro,
  .band--process .steps,
  .quote-section .quote-intro,
  .quote-section .form,
  .band--cta > div {
    grid-column: content;
    position: static;
  }
  .band--services .offer__row:nth-child(n) { translate: 0 0; }
  .band--process .step:nth-child(n) { margin-inline: 0; }
  .thread-progress { display: none; }
}
@media (max-width: 48rem) {
  .split--atelier { grid-template-columns: minmax(0, 1fr); }
  .split--atelier figure:nth-child(2) { margin-top: 1.5rem; margin-left: 18%; }
  .band--statement > div { grid-column: content !important; }
}

/* --------------------------------------------------------------------- SPEC
   Capability lists, set the way a programme or a set of credits is set: the
   value follows its label instead of being flushed to a far right column.
   The ragged right edge is the point. Rules between every row and a dead
   straight value column are what make a page look machine assembled. */

.spec { display: grid; gap: clamp(0.55rem, 0.4rem + 0.4vw, 0.85rem); }
.spec li {
  max-width: 42ch;
  line-height: 1.4;
  text-wrap: pretty;
}
.spec li > span { font-weight: 500; }
.spec li > em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12em;
  color: var(--ink-3);
  white-space: nowrap;
}
/* A hairline only under the last item, to close the block off. */
.spec--closed { padding-bottom: 1.1rem; border-bottom: var(--hair) solid var(--rule-soft); }

/* ----------------------------------------------------------------- CONTROLS */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  border: var(--hair) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--tap) var(--e-out),
              color var(--tap) var(--e-out);
}
.btn:hover { background: transparent; color: var(--ink); }
.btn__arrow { transition: translate 320ms var(--e-out); }
.btn:hover .btn__arrow { translate: 0.28rem 0; }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.switch {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: var(--hair) solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  padding: 0.45rem 0.7rem;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--tap) var(--e-out), border-color var(--tap) var(--e-out);
}
.switch:hover { color: var(--ink); border-color: var(--ink); }

/* --------------------------------------------------------------------- FORM */

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 0.7rem + 1.4vw, 2rem);
}
@media (max-width: 48rem) { .form { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 0.45rem; }
.field--full { grid-column: 1 / -1; }
.field > label {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field :is(input, textarea, select) {
  width: 100%;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: var(--hair) solid var(--rule);
  background: transparent;
  transition: border-color var(--tap) var(--e-out);
}
.field :is(input, textarea, select):hover { border-color: var(--ink-3); }
.field :is(input, textarea, select):focus { outline: 0; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 7rem; }
.field select { appearance: none; cursor: pointer; }

/* ------------------------------------------------------------------- FOOTER */

.foot {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem;
  border-top: var(--hair) solid var(--rule);
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 3fr));
  gap: clamp(1.75rem, 1rem + 2.5vw, 4rem);
  align-items: start;
}
@media (max-width: 56rem) {
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.foot__list { display: grid; gap: 0.5rem; }
.foot__list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink-2);
  text-decoration: none;
}
.foot__list a:hover { color: var(--ink); }
.foot__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-top: 1rem;
  border-top: var(--hair) solid var(--rule);
}

/* ------------------------------------------------------------------ REVEALS
   One gesture, one curve.

   Anything watched by an IntersectionObserver must keep a non zero painted
   box while hidden. The observer measures the clipped and transformed box,
   so hiding a watched element with clip-path or scaleX(0) reports zero
   intersection area forever and it can never be revealed. Watched elements
   therefore hide with opacity and translate only. */

[data-fold] {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition: opacity 640ms linear calc(var(--i, 0) * 50ms),
              transform 820ms var(--e-out) calc(var(--i, 0) * 50ms);
}
[data-fold].is-in { opacity: 1; transform: none; }

.rise { display: inline-block; overflow: hidden; vertical-align: bottom; }
.rise > i {
  display: inline-block;
  font-style: normal;
  transform: translate3d(0, 105%, 0);
  transition: transform 820ms var(--e-out) calc(var(--i, 0) * 55ms);
}
.is-in .rise > i, .rise.is-in > i { transform: translate3d(0, 0, 0); }

/* If scripting never runs, nothing may stay hidden. */
html:not(.is-ready) [data-fold] { opacity: 1; transform: none; }
html:not(.is-ready) .rise > i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  [data-fold] { opacity: 1; transform: none; }
  .rise > i { transform: none; }
  .media img { transform: none; }
  .ticker__track { animation: none; }
  .media[data-tilt] { transform: none; }
}

/* --------------------------------------------------------- PAGE TRANSITIONS */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 260ms var(--e-inout) both; }
::view-transition-new(root) { animation: vt-in 380ms var(--e-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translate3d(0, 1rem, 0); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
.mark { view-transition-name: mark; }