/* =========================================================
   AM Technologies Inc.
   Warm paper, ink hairlines, cardinal / Prussian / ochre.
   Classical structure, restrained motion.
   ========================================================= */

:root {
  /* ---- Ground: warm paper ---- */
  --paper:      #F4F0E6;
  --paper-2:    #FAF7EF;
  --paper-3:    #FFFDF8;

  /* ---- Ink ---- */
  --ink:        #16130F;
  --ink-2:      #4B443A;
  --ink-3:      #6B6355;
  --ink-4:      #A9A093;

  /* ---- Rules / hairlines ---- */
  --rule:       #D8D0BE;
  --rule-soft:  #E7E1D2;
  /* A control's own edge is not decorative: WCAG 1.4.11 wants 3:1 for the
     boundary that tells you an input is an input. --rule is 1.5:1 on paper-3,
     so fields get their own line. 3.72:1 on paper-3, 3.33:1 on paper. */
  --field-line: #8C8271;

  /* ---- Accents ---- */
  --cardinal:   #8C1515;
  --cardinal-2: #A82B21;
  --prussian:   #16324F;
  --prussian-2: #245080;
  --ochre:      #B98B1E;
  --gold:       #D9A520;   /* rating star only — yellower than ochre */
  --verdigris:  #2C6660;

  /* ---- Geometry ---- */
  --r-sm: 2px;
  --r:    3px;
  --maxw: 1240px;
  --gut:  clamp(20px, 5vw, 56px);

  /* ---- Shadow: paper lift, never glow ---- */
  --lift-1: 0 1px 2px rgba(22, 19, 15, 0.04);
  --lift-2: 0 12px 28px -18px rgba(22, 19, 15, 0.28);
  --lift-3: 0 34px 70px -34px rgba(22, 19, 15, 0.34);

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ink:  cubic-bezier(0.65, 0, 0.35, 1);

  --serif: 'Instrument Serif', 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 6.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
::selection { background: var(--ochre); color: var(--ink); }
:focus-visible { outline: 2px solid var(--cardinal); outline-offset: 3px; }

/* Anchored sections clear the fixed header */
section[id] { scroll-margin-top: 88px; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.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;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -0.012em; }

/* The one flourish: a cardinal italic accent */
.accent { color: var(--cardinal); font-style: italic; }

/* Mono label — the quiet technical register */
.label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
}
.label__num { color: var(--cardinal); font-weight: 600; font-variant-numeric: tabular-nums; }
.label__num::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 26px; height: 1px; background: var(--rule); margin-left: 10px;
}

.lede { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ink-2); }
.lede strong { font-weight: 600; color: var(--ink); }
.dia { color: var(--cardinal); font-size: 0.62em; vertical-align: 0.15em; }

/* =========================================================
   TEXTURE — paper grain, structural grid, drawn line field
   ========================================================= */
.grain {
  position: fixed; inset: 0; z-index: 400; pointer-events: none;
  opacity: 0.3; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
/* The page's structural columns, drawn faintly */
.flutes { position: fixed; inset: 0; z-index: -3; pointer-events: none; display: grid; justify-items: center; }
.flutes__inner {
  width: 100%; max-width: var(--maxw); height: 100%; padding: 0 var(--gut);
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.flutes__inner span { border-left: 1px solid var(--rule-soft); }
.flutes__inner span:last-child { border-right: 1px solid var(--rule-soft); }
@media (max-width: 900px) { .flutes__inner { grid-template-columns: repeat(2, 1fr); } }

/* Full opacity: the field folds its own fade into its stroke alpha (FIELD_FADE
   in main.js) so a trace running along a line can be brighter than it. */
.wave-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }

/* =========================================================
   BUTTONS — ink fill wipes up from the baseline
   ========================================================= */
.btn {
  --mx: 0px; --my: 0px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 15px 26px; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.btn > * { position: relative; z-index: 2; }
.btn svg { transition: transform .45s var(--ease); }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .45s var(--ease-ink);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleY(1); }

.btn--solid { color: var(--paper-3); background: var(--ink); }
.btn--solid::after { background: var(--cardinal); }
.btn--solid:hover { box-shadow: var(--lift-2); }
.btn--solid:hover svg, .btn--solid:focus-visible svg { transform: translateX(5px); }

.btn--line { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--line::after { background: var(--ink); }
.btn--line:hover, .btn--line:focus-visible { color: var(--paper-3); }
.btn--line:hover svg { transform: translateX(5px); }

.btn--lg { padding: 18px 30px; font-size: 0.8rem; }
.btn--block { width: 100%; }

/* A quiet text link with a rule that draws under it */
.tlink {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cardinal);
  padding-bottom: 4px;
}
.tlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(1); transform-origin: right;
  transition: transform .45s var(--ease-ink);
}
.tlink:hover::after { transform: scaleX(0); }
.tlink svg { transition: transform .4s var(--ease); }
.tlink:hover svg { transform: translateX(4px); }

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader {
  position: fixed; inset: 0; z-index: 1000; display: none; place-items: center;
  background: var(--paper);
  transition: opacity .7s var(--ease), visibility .7s;
}
html.has-js .preloader { display: grid; }
.preloader.is-done, html.preloader-timed-out .preloader { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__inner { display: grid; justify-items: center; gap: 22px; }
.preloader__mark { width: 62px; height: 62px; }
.preloader__word { font-family: var(--serif); font-size: 1.4rem; }
.preloader__rule { width: 190px; height: 1px; background: var(--rule); position: relative; overflow: hidden; }
.preloader__rule span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--cardinal); transition: width .25s var(--ease); }
.preloader__pct {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.24em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}

.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--cardinal); z-index: 800; transition: width .1s linear; }

/* =========================================================
   NAV
   ========================================================= */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 700; padding: 20px 0; transition: padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); }
.nav.is-scrolled {
  padding: 11px 0;
  background: rgba(244, 240, 230, 0.88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--rule);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 40px; height: 40px; flex-shrink: 0; transition: transform .6s var(--ease); }
.brand:hover .brand__mark { transform: rotate(-8deg); }
.brand__text { display: grid; line-height: 1.08; }
.brand__name { font-family: var(--serif); font-size: 1.26rem; letter-spacing: -0.01em; white-space: nowrap; }
.brand__sub { font-family: var(--mono); font-size: 0.53rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__link {
  position: relative; padding: 9px 12px;
  font-family: var(--mono); font-size: 0.71rem; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-2);
  transition: color .3s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1px;
  background: var(--cardinal); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after, .nav__link.is-active::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link.is-active, .nav__link[aria-current="page"] { color: var(--cardinal); }
.nav__cta { padding: 12px 18px; font-size: 0.68rem; }

.nav__toggle { display: none; width: 44px; height: 44px; flex-direction: column; gap: 6px; align-items: center; justify-content: center; }
.nav__toggle span { width: 24px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease), opacity .35s var(--ease); }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 690; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 34px;
  padding: 96px 20px 40px; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__links { margin-top: auto; }
.mobile-menu > .btn { margin-bottom: auto; }
.mobile-menu__links { display: grid; gap: 0; width: min(380px, 78vw); }
.mobile-menu__link {
  font-family: var(--serif); font-size: 1.9rem; padding: 13px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.mobile-menu__link:hover { color: var(--cardinal); }
/* Colour alone cannot carry "you are here" (1.4.1): every link already has the
   same rule under it, so the current one grows a bar the others do not have. */
.mobile-menu__link[aria-current="page"] {
  color: var(--cardinal); border-bottom-color: var(--cardinal);
  box-shadow: inset 3px 0 0 0 var(--cardinal); padding-left: 14px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 148px 0 90px; }
.hero__grid { position: relative; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(36px, 6vw, 84px); align-items: center; }

.hero__status {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 30px;
  font-family: var(--mono); font-size: 0.67rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2);
  padding-bottom: 9px; border-bottom: 1px solid var(--rule);
}
.hero__status-dot { width: 6px; height: 6px; background: var(--verdigris); border-radius: 50%; animation: statusPulse 2.4s ease-in-out infinite; }
@keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }

.hero__title { font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1.03; margin-bottom: 28px; }
.hero__lead { max-width: 560px; margin-bottom: 38px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 52px; }

.hero__meta { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.hero__meta-item { padding: 18px 16px 0 0; border-right: 1px solid var(--rule-soft); }
.hero__meta-item:last-child { border-right: none; }
.hero__meta-item:not(:first-child) { padding-left: 16px; }
.hero__meta-val {
  display: block; font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1; margin-bottom: 7px; font-variant-numeric: tabular-nums;
}
.hero__meta-val.is-cardinal { color: var(--cardinal); }
.hero__meta-val.is-prussian { color: var(--prussian); }
/* The rating reads as a rating: number, then one star. Fixed px, not em — at
   em the star scaled with the numeral and outgrew the 18px star the reviews
   summary puts beside a far bigger score. */
.hero__meta-val--rated { display: flex; align-items: center; gap: 9px; }
.hero__star { width: 16px; height: 16px; color: var(--gold); flex: none; }
/* Gold on paper is 1.97:1. Rather than dull the one bright accent on the page,
   draw the star: 1.4.11 measures the boundary of a graphical object, and an ink
   outline puts that at 8.4:1 while the fill stays gold. */
.hero__star path { stroke: var(--ink-2); stroke-width: 1.8; paint-order: stroke; }
.hero__meta-label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); line-height: 1.5; display: block; }

.hero__scroll { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero__scroll-text { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-3); }
.hero__scroll-line { width: 1px; height: 52px; background: var(--rule); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 38%; background: var(--cardinal); animation: scrollDown 2.1s var(--ease) infinite; }
@keyframes scrollDown { 0% { transform: translateY(-100%); } 100% { transform: translateY(270%); } }

/* ---------- The practice plan: an original composition ---------- */
.figure { position: relative; }
.plan {
  position: relative;
  aspect-ratio: 1 / 1.16;
  background: var(--ink);
  border: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.45fr;
  grid-template-rows: 1.3fr 0.5fr 0.62fr 0.5fr;
  gap: 1px;
  box-shadow: var(--lift-3);
  translate: 0 var(--py, 0px);
}
.pl-cell {
  position: relative; overflow: hidden;
  background: var(--paper-3);
  display: flex; align-items: flex-end;
  transition: filter .45s var(--ease);
}
.pl-cell--paper { background: var(--paper-2); }
.pl-cell--web  { background: var(--cardinal); }
.pl-cell--seo  { background: var(--ochre); }
.pl-cell--soft { background: var(--prussian); }

.pl-a { grid-area: 1 / 1 / 2 / 3; }
.pl-b { grid-area: 1 / 3 / 3 / 4; }
.pl-c { grid-area: 2 / 1 / 4 / 2; }
.pl-d { grid-area: 2 / 2 / 3 / 3; }
.pl-e { grid-area: 3 / 2 / 5 / 4; }
.pl-f { grid-area: 4 / 1 / 5 / 2; }

a.pl-cell:hover { filter: brightness(1.14); }
/* Inset cardinal on a cardinal cell is a 1:1 ring - i.e. no ring. Two tones so
   it reads on cardinal, ochre, Prussian and paper alike. */
a.pl-cell:focus-visible { outline: 2px solid var(--paper-3); outline-offset: -4px; box-shadow: inset 0 0 0 6px var(--ink); }
.pl-cell__label {
  position: relative; z-index: 2; padding: 12px 14px;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-3);
  line-height: 1.4;
}
.pl-cell--seo .pl-cell__label { color: var(--ink); }
.pl-cell__rank {
  position: absolute; top: 12px; left: 14px; z-index: 2;
  font-family: var(--mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em;
  color: rgba(255, 253, 248, 0.8);   /* 6.37:1 on cardinal, 8.4:1 on Prussian */
}
.pl-cell--seo .pl-cell__rank { color: rgba(22, 19, 15, 0.88); }  /* 5.1:1 on ochre */

/* A ruled measure along the composition's edge */
.pl-cell--paper::after {
  content: ""; position: absolute; inset: auto 14px 14px 14px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 7px);
}

.figure__caption { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.figure__caption span { font-family: var(--serif); font-size: 0.96rem; font-style: italic; color: var(--ink-2); }

/* =========================================================
   TICKER
   ========================================================= */
.ticker { padding: 15px 0; border-block: 1px solid var(--rule); background: var(--paper-2); overflow: hidden; }
.ticker__track { display: flex; width: max-content; animation: ticker 52s linear infinite; }
.ticker__group { display: flex; align-items: center; gap: 22px; padding-right: 22px; }
.ticker__group span { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.ticker__group span.dia { color: var(--cardinal); font-size: 0.55rem; letter-spacing: 0; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* =========================================================
   SECTION SCAFFOLD
   ========================================================= */
.section { padding: clamp(76px, 10vw, 138px) 0; position: relative; }
.section--ruled { border-top: 1px solid var(--rule); }
.section--tight { padding: clamp(56px, 7vw, 96px) 0; }
.section__head { max-width: 760px; margin-bottom: clamp(44px, 6vw, 68px); }
.section__label { margin-bottom: 20px; }
.section__title { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-bottom: 18px; }
.section__sub { max-width: 620px; }

/* Compact hero for interior pages */
.page-hero { padding: clamp(140px, 16vw, 190px) 0 clamp(46px, 6vw, 74px); border-bottom: 1px solid var(--rule); }
.page-hero__title { font-size: clamp(2.4rem, 5.4vw, 4.2rem); margin: 20px 0 20px; }
/* Deliberately quieter than a .lede: the sections below it carry the claim,
   so this line sits back rather than announcing itself. */
.page-hero__lead { max-width: 640px; font-size: 0.95rem; color: var(--ink-2); }

/* =========================================================
   SERVICES
   ========================================================= */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.pillar {
  position: relative; padding: clamp(28px, 2.8vw, 40px);
  background: var(--paper-2);
  display: flex; flex-direction: column;
  transition: background .5s var(--ease);
  overflow: hidden;
}
.pillar:hover { background: var(--paper-3); }
.pillar--lead { background: var(--paper-3); }
.pillar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--cardinal); transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-ink);
}
.pillar:hover::before { transform: scaleX(1); }

.pillar__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.pillar__num { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; color: var(--cardinal); }
.pillar__tag { font-family: var(--mono); font-size: 0.55rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 5px 9px; box-shadow: inset 0 0 0 1px var(--rule); background: var(--paper); white-space: nowrap; }
.pillar__icon { color: var(--ink); margin-bottom: 20px; transition: color .5s var(--ease), transform .5s var(--ease); }
.pillar:hover .pillar__icon { color: var(--cardinal); transform: translateY(-2px); }
.pillar__title { font-size: clamp(1.4rem, 2vw, 1.8rem); margin-bottom: 12px; }
.pillar__text { color: var(--ink-2); font-size: 0.94rem; margin-bottom: 24px; }
.pillar__list { display: grid; gap: 0; margin-top: auto; border-top: 1px solid var(--rule-soft); }
/* Subgrid ties each card's five rows to its neighbours', so the icons, titles,
   paragraphs and lists all start on the same line however many items a card
   carries. Only while the cards sit side by side: row-gap has to drop to 0 so
   the 1px rule between columns does not also draw between rows, and once the
   cards stack that same gap is the divider between them. Without subgrid the
   lists simply stay bottom-aligned. */
@media (min-width: 1081px) {
  @supports (grid-template-rows: subgrid) {
    .pillars { grid-template-rows: repeat(5, auto); row-gap: 0; }
    .pillar { display: grid; grid-template-rows: subgrid; grid-row: span 5; }
    /* start, not stretch: a shorter list keeps its rows at natural height
       and leaves the slack at the foot of the card, so every item lines
       up with its neighbours instead of being spread to fill. */
    .pillar__list { margin-top: 0; align-content: start; }
  }
}
.pillar__list li {
  display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 0.88rem; color: var(--ink-2);
}
.pillar__list li:last-child { border-bottom: none; }
.pillar__list li::before {
  content: attr(data-i);
  content: attr(data-i) / "";
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--ink-3);
}

/* =========================================================
   NARRATIVE — what people find when they look you up
   ========================================================= */
.narrative { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 76px); align-items: start; }
.narrative__aside p { color: var(--ink-2); max-width: 420px; }
.narrative__list { border-top: 1px solid var(--ink); }
.narrative__list li {
  display: grid; grid-template-columns: 120px 1fr; gap: clamp(14px, 2vw, 28px);
  padding: 22px 0; border-bottom: 1px solid var(--rule);
  transition: padding-left .5s var(--ease);
}
.narrative__list li:hover { padding-left: 12px; }
.narrative__list b { font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cardinal); padding-top: 4px; }
.narrative__list p { color: var(--ink-2); font-size: 0.94rem; }

/* =========================================================
   WORK — arch-topped plates
   ========================================================= */
.work__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(26px, 3vw, 40px); }
.plate { position: relative; }
.plate__media {
  position: relative; aspect-ratio: 4 / 2.8; overflow: hidden;
  border-radius: 50% 50% var(--r) var(--r) / 30% 30% var(--r) var(--r);
  background: var(--ink);
  box-shadow: var(--lift-2);
  transition: box-shadow .5s var(--ease);
}
.plate:hover .plate__media { box-shadow: var(--lift-3); }
.plate__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(22,19,15,0.14), transparent 46%, rgba(22,19,15,0.34)); }
.plate__key { position: absolute; top: 13px; left: 50%; z-index: 3; width: 20px; height: 20px; border: 1px solid rgba(255,253,248,0.45); transform: translateX(-50%) rotate(45deg); }

.ground-web  { background: linear-gradient(150deg, #A82B21, #7C1210 60%, #4A0C0B); }
.ground-seo  { background: linear-gradient(330deg, #D8A52A, #9E7415 55%, #5E440D); }
.ground-soft { background: linear-gradient(150deg, #245080, #16324F 60%, #0C1E31); }
.ground-app  { background: linear-gradient(150deg, #3E8079, #2C6660 58%, #17403C); }

/* Each plate carries a line drawing of the work it stands for */
.plate__art { position: absolute; inset: 0; z-index: 1; opacity: 0.82; }
.plate__art svg { width: 100%; height: 100%; display: block; }

.plate__body { padding: 20px 2px 0; display: grid; gap: 8px; }
.plate__cat { font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cardinal); }
.plate__title { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.plate__text { color: var(--ink-2); font-size: 0.92rem; }

.work__note { margin-top: clamp(34px, 4vw, 52px); padding-top: 22px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; }
.work__note p { color: var(--ink-2); font-size: 0.94rem; max-width: 720px; }
.work__note a { color: var(--cardinal); font-weight: 500; border-bottom: 1px solid currentColor; }

/* =========================================================
   METHOD
   ========================================================= */
.method { border-top: 1px solid var(--ink); }
.step {
  display: grid; grid-template-columns: 92px 1fr 1fr; gap: clamp(16px, 3vw, 44px);
  padding: clamp(26px, 3vw, 40px) 0; border-bottom: 1px solid var(--rule);
  align-items: baseline; position: relative;
  transition: padding-left .5s var(--ease);
}
.step:hover { padding-left: 14px; }
.step__num { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 0.9; color: var(--cardinal); }
.step__title { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.step__text { color: var(--ink-2); font-size: 0.96rem; }
.step__aside { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 10px; }

/* =========================================================
   CREDENTIALS / EXPERTISE
   ========================================================= */
.bench { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(36px, 5vw, 76px); align-items: start; }
.bench__aside { position: sticky; top: 108px; }
.bench__statement { font-family: var(--serif); font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.26; margin-bottom: 20px; }
.bench__note { font-size: 0.93rem; color: var(--ink-2); max-width: 350px; }

.bench__list { border-top: 1px solid var(--ink); }
.cred {
  display: grid; grid-template-columns: 58px 1fr; gap: clamp(14px, 2vw, 30px);
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left .5s var(--ease), background .5s var(--ease);
}
.cred:hover { padding-left: 14px; background: linear-gradient(90deg, rgba(140,21,21,0.045), transparent 60%); }
.cred__num { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; color: var(--cardinal); font-variant-numeric: tabular-nums; padding-top: 5px; }
.cred__title { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-bottom: 2px; }
.cred__meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

.tagchip {
  font-family: var(--mono); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--prussian);
  padding: 5px 9px; background: var(--paper-3); box-shadow: inset 0 0 0 1px var(--rule);
}

/* Expertise directory */
.domains { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.domain { background: var(--paper-2); padding: clamp(26px, 3vw, 40px); transition: background .5s var(--ease); }
.domain:hover { background: var(--paper-3); }
.domain__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--rule); }
.domain__title { font-size: clamp(1.25rem, 1.9vw, 1.55rem); }
.domain__count { font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.14em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.domain__list { display: grid; gap: 0; }
.domain__list li {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 0.9rem; color: var(--ink-2);
}
.domain__list li:last-child { border-bottom: none; }
.domain--wide { grid-column: 1 / -1; }
.domain--wide .domain__list { grid-template-columns: repeat(2, 1fr); column-gap: clamp(20px, 3vw, 48px); }
@media (max-width: 760px) { .domain--wide .domain__list { grid-template-columns: 1fr; } }
.domain__list li::before { content: "\25C6"; content: "\25C6" / ""; font-family: var(--mono); font-size: 0.5rem; color: var(--cardinal); }

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.review {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  background: var(--paper-3); border: 1px solid var(--rule);
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.review:hover { border-color: var(--ink); box-shadow: var(--lift-2); transform: translateY(-3px); }
.review__stars { display: flex; gap: 4px; margin-bottom: 18px; color: var(--cardinal); }
.review__stars svg { width: 15px; height: 15px; }
.review__stars .is-empty { color: var(--field-line); }
.review__quote { font-family: var(--serif); font-size: clamp(1.06rem, 1.35vw, 1.22rem); line-height: 1.46; margin-bottom: 24px; }
/* Name on the left, service chip on the right. No role line under the name. */
.review__by { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.review__who b { font-family: var(--sans); font-size: 0.92rem; font-weight: 600; display: block; }
.review__svc { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 5px 9px; box-shadow: inset 0 0 0 1px var(--rule); }

/* Ratings summary */
.rsum {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 38px); flex-wrap: wrap;
  padding-bottom: clamp(26px, 3vw, 40px); margin-bottom: clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--rule);
}
.rsum__score { display: flex; align-items: center; gap: 14px; }
.rsum__val { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; color: var(--cardinal); font-variant-numeric: tabular-nums; }
.rsum__score .review__stars { margin-bottom: 0; }
.rsum__score .review__stars svg { width: 18px; height: 18px; }
.rsum__note { color: var(--ink-2); font-size: 0.94rem; max-width: 540px; }

.leave { margin-top: clamp(40px, 5vw, 68px); border: 1px solid var(--ink); background: var(--paper-2); padding: clamp(28px, 3.6vw, 46px); display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.leave h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 10px; }
.leave p { color: var(--ink-2); font-size: 0.94rem; max-width: 520px; }

/* Home-page reviews band */
.rband { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.rband__quote { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.28; max-width: 760px; }
.rband__meta { margin-top: 18px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact__inner { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(36px, 5vw, 76px); align-items: start; }
.contact__title { font-size: clamp(2rem, 4.2vw, 3.2rem); margin: 18px 0 18px; }
.contact__sub { color: var(--ink-2); margin-bottom: 30px; max-width: 440px; }
.contact__points { border-top: 1px solid var(--rule); }
.contact__points li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: 0.94rem; }
.contact__points li::before { content: "\25C6"; content: "\25C6" / ""; color: var(--cardinal); font-family: var(--mono); font-size: 0.5rem; }

.contact__form-wrap { background: var(--paper-3); border: 1px solid var(--ink); padding: clamp(24px, 3.4vw, 40px); }
.form__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--rule); }
.form__head b { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; }
.form__head span { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form__field { position: relative; }
.form__field input, .form__field textarea {
  width: 100%; padding: 20px 2px 9px; font: inherit; font-size: 0.95rem; color: var(--ink);
  background: transparent; border: none; border-bottom: 1px solid var(--field-line); border-radius: 0;
  transition: border-color .3s var(--ease);
}
.form__field textarea { resize: vertical; min-height: 92px; padding-top: 22px; }
.form__field input:focus-visible, .form__field textarea:focus-visible { outline: 2px solid var(--cardinal); outline-offset: 2px; }
.form__field input:focus, .form__field textarea:focus { border-bottom-color: var(--cardinal); border-bottom-width: 2px; padding-bottom: 8px; }
.form__field > label {
  position: absolute; left: 2px; top: 18px; pointer-events: none;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  transition: transform .25s var(--ease), color .25s var(--ease), font-size .25s var(--ease);
}
.form__field input:focus + label, .form__field input:not(:placeholder-shown) + label,
.form__field textarea:focus + label, .form__field textarea:not(:placeholder-shown) + label,
.form__field.is-filled > label { transform: translateY(-16px); font-size: 0.6rem; color: var(--cardinal); }
.form__status { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; text-align: center; min-height: 1.3em; }
.form__status.is-success { color: var(--verdigris); }
.form__status.is-error { color: var(--cardinal); }
.form__optional { color: var(--ink-3); }
.form__hint { display: block; margin-top: 7px; font-size: 0.78rem; color: var(--ink-3); }
.form__hp { position: absolute; left: -5000px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.form__error { display: block; margin-top: 7px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--cardinal); }
.form__field.is-invalid input, .form__field.is-invalid textarea { border-bottom-color: var(--cardinal); border-bottom-width: 2px; }
.form__field.is-invalid > label { color: var(--cardinal); }

/* ---------- Custom select: set in the site's own type ---------- */
.sel { position: relative; }
/* Native fallback when JS has not enhanced it */
.sel > select {
  width: 100%; padding: 12px 2px 9px; font: inherit; font-size: 0.95rem; color: var(--ink);
  background: transparent; border: none; border-bottom: 1px solid var(--field-line); border-radius: 0;
}
.sel > select:focus { border-bottom-color: var(--cardinal); }
.sel > select.sel__native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; padding: 0; border: none; }
.sel__label {
  display: block; margin-bottom: 2px;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cardinal);
}
.sel__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 2px 9px; text-align: left;
  font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
  background: transparent; border-bottom: 1px solid var(--field-line);
  transition: border-color .3s var(--ease);
}
.sel__btn.is-placeholder { color: var(--ink-3); }
.sel__btn:hover { border-bottom-color: var(--ink); }
.sel.is-open .sel__btn, .sel__btn:focus-visible { border-bottom-color: var(--cardinal); }
.sel__caret { flex-shrink: 0; color: var(--cardinal); transition: transform .35s var(--ease); }
.sel.is-open .sel__caret { transform: rotate(180deg); }
.sel__list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 7px);
  background: var(--paper-3); border: 1px solid var(--ink); box-shadow: var(--lift-2);
  max-height: 288px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.sel.is-open .sel__list { opacity: 1; visibility: visible; transform: none; }
.sel__opt {
  padding: 13px 16px; font-size: 0.92rem; color: var(--ink-2); cursor: pointer;
  border-bottom: 1px solid var(--rule-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: background .2s var(--ease), color .2s var(--ease), padding-left .25s var(--ease);
}
.sel__opt:last-child { border-bottom: none; }
/* The background shift alone is 1.12:1; the bar is the part you can actually see. */
.sel__opt.is-active { background: var(--paper); color: var(--ink); padding-left: 22px; box-shadow: inset 3px 0 0 0 var(--cardinal); }
.sel__opt[aria-selected="true"] { color: var(--cardinal); font-weight: 500; }
.sel__opt[aria-selected="true"]::after { content: "\2713"; font-family: var(--mono); font-size: 0.72rem; }
.sel.is-invalid .sel__btn { border-bottom-color: var(--cardinal); border-bottom-width: 2px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { border-top: 1px solid var(--ink); background: var(--paper-2); padding: clamp(46px, 6vw, 76px) 0 28px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--rule); }
.footer__tag { color: var(--ink-2); margin-top: 18px; max-width: 330px; font-size: 0.94rem; }
.footer__col-title { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.footer__col ul { display: grid; gap: 9px; }
.footer__col a, .footer__col li { font-size: 0.91rem; color: var(--ink-2); transition: color .25s var(--ease); }
.footer__col a:hover { color: var(--cardinal); }

.footer__mark { padding: 40px 0 28px; text-align: center; overflow: hidden; }
.footer__mark span {
  display: block; font-family: var(--serif);
  font-size: clamp(2.6rem, 12vw, 9rem); line-height: 0.9; letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-4);
  transition: color .8s var(--ease), -webkit-text-stroke-color .8s var(--ease);
}
.footer__mark:hover span { color: var(--ink); -webkit-text-stroke-color: transparent; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 22px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
.footer__bottom a { transition: color .25s var(--ease); }
.footer__bottom a:hover { color: var(--cardinal); }

/* =========================================================
   REVEAL MOTION
   ========================================================= */
.reveal { --ry: 0px; opacity: 1; transform: translate3d(0, var(--ry), 0); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.has-js .reveal { --ry: 26px; opacity: 0; }
.has-js .reveal.is-in { --ry: 0px; opacity: 1; }

/* Word-mask headline reveal */
.w-line { display: block; overflow: hidden; }
.w-word { display: inline-block; will-change: transform; }
.has-js .w-word { transform: translateY(105%); }
.has-js .is-in .w-word { transform: none; transition: transform 1s var(--ease); }

/* The composition's fields open in sequence */
.has-js .plan .pl-cell { opacity: 0; transform: scale(0.94); }
.has-js .plan.is-in .pl-cell { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .8s var(--ease); }
.has-js .plan.is-in .pl-a { transition-delay: .04s; }
.has-js .plan.is-in .pl-b { transition-delay: .12s; }
.has-js .plan.is-in .pl-c { transition-delay: .2s; }
.has-js .plan.is-in .pl-d { transition-delay: .26s; }
.has-js .plan.is-in .pl-e { transition-delay: .32s; }
.has-js .plan.is-in .pl-f { transition-delay: .38s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 54px; }
  .figure { max-width: 520px; }
  .bench, .narrative { grid-template-columns: 1fr; }
  .bench__aside { position: static; }
  .contact__inner { grid-template-columns: 1fr; }
  /* Two columns now, but .step has three children: keep the paragraph
     out of the numeral column by placing it explicitly on row 2. */
  .step { grid-template-columns: 66px 1fr; column-gap: 20px; row-gap: 10px; }
  .step__text { grid-column: 2 / -1; }
  .step__aside { display: none; }
  .pillars { grid-template-columns: 1fr; }
  .work__grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  /* No JS means the toggle has no handler and the menu can never open, so fall
     back to the links themselves rather than showing a button that does nothing. */
  html:not(.has-js) .nav__toggle { display: none; }
  html:not(.has-js) .nav__links { display: flex; flex-wrap: wrap; justify-content: flex-end; }
  .domains, .reviews__grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand-col { grid-column: 1 / -1; }
  .leave, .rband { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .hero { padding-top: 124px; }
  .hero__actions .btn { width: 100%; }
  .hero__meta { grid-template-columns: 1fr; }
  .hero__meta-item { border-right: none; border-bottom: 1px solid var(--rule-soft); padding: 14px 0; }
  .hero__meta-item:not(:first-child) { padding-left: 0; }
  .form__row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .work__note { grid-template-columns: 1fr; }
  .cred { grid-template-columns: 1fr; gap: 10px; }
  .narrative__list li { grid-template-columns: 1fr; gap: 6px; }
  .brand__name { font-size: 1.1rem; }
  .brand__sub { font-size: 0.48rem; letter-spacing: 0.2em; }
  .figure__caption { flex-direction: column; gap: 6px; }
  .review__by { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (hover: none), (pointer: coarse) {
  .footer__mark span { color: var(--ink-4); -webkit-text-stroke-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .wave-canvas { display: none; }
  .ticker__track, .hero__scroll-line::after, .hero__status-dot { animation: none; }
  .has-js .plan .pl-cell { opacity: 1; transform: none; }
  .has-js .w-word { transform: none; }
}

/* =========================================================
   ACCESSIBILITY
   Skip link, the motion control, and the two display modes
   the rest of the sheet cannot reach: motion off, and the
   forced palette Windows high-contrast users browse in.
   ========================================================= */

/* ---------- Skip link (2.4.1) ---------- */
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 1200;
  padding: 13px 20px;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--paper-3); background: var(--ink);
  box-shadow: var(--lift-2);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* main takes focus programmatically when the skip link is used; it must not
   then draw a ring around the whole page. */
main:focus { outline: none; }
main:focus-visible { outline: none; }

/* ---------- Motion control (2.2.2) ---------- */
/* The ticker, the status dot, the scroll cue and the canvas line field all run
   on their own clocks and never stop. prefers-reduced-motion is honoured, but
   2.2.2 asks for a mechanism on the page, so here it is. */
/* It sits in the footer bottom bar, in the same mono register as the line it
   shares. Nothing above the fold moves when it is pressed. */
.motion-toggle {
  display: none;
  align-items: center; gap: 8px;
  padding: 6px 10px;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--ink-3);
  border: 1px solid var(--field-line); border-radius: var(--r-sm);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
/* The control does nothing without JS, so it does not appear without JS. */
html.has-js .motion-toggle { display: inline-flex; }
.motion-toggle:hover { color: var(--ink); border-color: var(--ink); }
.motion-toggle__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--verdigris); box-shadow: inset 0 0 0 1px rgba(22, 19, 15, 0.25);
}
html[data-motion="off"] .motion-toggle__dot { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink-3); }
/* "on" and "off" are different widths, and a button that resizes as you press
   it shoves its neighbours along the row. Hold the wider of the two words:
   4ch rather than 3, because the 0.13em letter-spacing is charged per glyph
   on top of the advance width and 3ch lands just short of "off". */
.motion-toggle__label { display: inline-block; min-width: 4ch; text-align: left; }

/* ---------- Motion off ---------- */
/* Mirrors the prefers-reduced-motion block. Everything that loops stops; the
   reveal states are forced open so nothing is left mid-transition and hidden. */
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
html[data-motion="off"] .wave-canvas { display: none; }
html[data-motion="off"] .ticker__track,
html[data-motion="off"] .hero__scroll-line::after,
html[data-motion="off"] .hero__status-dot { animation: none; }
html[data-motion="off"] .hero__status-dot { opacity: 1; }
/* Belt and braces: if the toggle is flipped before a reveal has fired, the
   element must still be readable rather than stranded at opacity 0. */
html[data-motion="off"].has-js .reveal,
html[data-motion="off"].has-js .plan .pl-cell { opacity: 1 !important; transform: none !important; }
html[data-motion="off"].has-js .w-word { transform: none !important; }
html[data-motion="off"] .plan { translate: none !important; }

/* ---------- Forced colours (Windows high contrast) ---------- */
/* Not a success criterion, but it is the mode low-vision Windows users browse
   in, and the design leans on backgrounds and box-shadows - both of which the
   OS throws away. Give the controls real borders back. */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .btn::after { display: none; }
  .btn--solid, .btn--line { color: ButtonText; }
  .btn:hover, .btn:focus-visible { color: Highlight; border-color: Highlight; }
  .skip-link { border: 1px solid ButtonText; }

  .form__field input, .form__field textarea, .sel__btn, .sel > select { border-bottom: 1px solid ButtonText; }
  .form__field input:focus, .form__field textarea:focus { border-bottom-color: Highlight; }
  .sel__list { border: 1px solid ButtonText; }
  .sel__opt.is-active { background: Highlight; color: HighlightText; forced-color-adjust: none; }

  .pillar__tag, .tagchip, .review__svc, .motion-toggle { border: 1px solid ButtonText; }
  .review, .contact__form-wrap, .leave { border: 1px solid CanvasText; }

  /* The plan cells lose their colour blocks entirely, so draw their edges. */
  .plan { border: 1px solid CanvasText; }
  .pl-cell { border: 1px solid CanvasText; }
  a.pl-cell:focus-visible { outline: 3px solid Highlight; outline-offset: -3px; box-shadow: none; }

  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }

  /* Texture that carries no information and only muddies a forced palette. */
  .grain, .flutes, .wave-canvas, .footer__mark, .plate__scrim { display: none; }
}