/* ==========================================================================
   Treevoxa — design system
   Concept: "One entry, every record." Thin ledger lines that branch at 45°
   (the angle of the Treevoxa mark) connect an event to everything it touches.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var.woff2") format("woff2-variations"), url("/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}
@font-face { font-family: "Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 101%; ascent-override: 88%; descent-override: 21%; }

:root {
  /* Colour */
  --paper: #f2f1ec;
  --paper-2: #e9e8e1;
  --paper-3: #dfded5;
  --ink: #0c1c21;
  --ink-2: #384a4f;
  --ink-3: #5a686c;
  --line: #d3d2c9;
  --line-2: #b9b8ad;
  --deep: #08181d;
  --deep-2: #0e2329;
  --deep-line: #1f363c;
  --on-deep: #e8ede9;
  --on-deep-2: #95aaa9;
  --teal: #076c79;
  --teal-2: #3cc3d1;
  --signal: #ff5a1f;

  /* Type */
  --font: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-display: clamp(3.1rem, 1.2rem + 5.6vw, 6.4rem);
  --fs-h1: clamp(2.5rem, 1.2rem + 3.9vw, 5rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.4vw, 3.6rem);
  --fs-h3: clamp(1.3rem, 1.12rem + .55vw, 1.7rem);
  --fs-lead: clamp(1.1rem, 1rem + .4vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-label: .72rem;

  /* Space (4px base) */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem;
  --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;
  --section: clamp(5.5rem, 3rem + 8vw, 11rem);

  /* Layout */
  --max: 1440px;
  --margin: clamp(1rem, .2rem + 3.6vw, 4rem);
  --gutter: clamp(1rem, .6rem + 1.2vw, 1.75rem);

  /* Shape & depth */
  --r1: 2px; --r2: 6px; --r3: 10px;
  --shadow-frame: 0 1px 0 rgb(255 255 255 / .6) inset, 0 30px 60px -30px rgb(8 24 29 / .45), 0 12px 24px -12px rgb(8 24 29 / .25);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 160ms; --t-std: 280ms; --t-expr: 600ms;

  /* Layers */
  --z-header: 50; --z-nav: 60; --z-skip: 100;
}

/* ——— Base ——— */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.55; font-weight: 400;
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
main:focus { outline: none; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: var(--r1); }
.dark :focus-visible { outline-color: var(--teal-2); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: var(--s4); top: var(--s4); z-index: var(--z-skip); background: var(--ink); color: var(--paper); padding: var(--s3) var(--s4); border-radius: var(--r2); transform: translateY(-200%); transition: transform var(--t-std) var(--ease-out); }
.skip:focus { transform: none; }
.nowrap { white-space: nowrap; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }
.section { padding-block: var(--section); }
.dark { background: var(--deep); color: var(--on-deep); }

/* ——— Type ——— */
.display, .h1, .h2, .h3 { font-weight: 500; font-stretch: 108%; letter-spacing: -.035em; line-height: .98; text-wrap: balance; }
.display { font-size: var(--fs-display); letter-spacing: -.045em; line-height: .94; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); line-height: 1.02; }
.h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.02em; font-stretch: 104%; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 36ch; letter-spacing: -.005em; }
.dark .lead { color: var(--on-deep-2); }
.quiet { color: var(--ink-3); }
.dark .quiet { color: var(--on-deep-2); }
.accent { color: var(--teal-2); }
.label {
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.4; color: var(--ink-3);
}
.dark .label { color: var(--on-deep-2); }
p { text-wrap: pretty; }

/* ——— Links & buttons ——— */
.link {
  display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-small); font-weight: 500;
  padding: .35em 0; background: none; border: 0; position: relative; letter-spacing: -.005em;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform-origin: right; transition: transform var(--t-std) var(--ease-out);
}
.link:hover::after { transform: scaleX(0); }
.link .arrow { transition: transform var(--t-std) var(--ease-out); }
.link:hover .arrow--ne { transform: translate(2px, -2px); }
.link:hover .arrow--e { transform: translateX(3px); }
.link--quiet::after { opacity: .35; }

.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-icon: var(--teal-2);
  display: inline-flex; align-items: stretch; gap: 0; background: var(--btn-bg); color: var(--btn-fg);
  border: 0; border-radius: var(--r2); font-size: var(--fs-small); font-weight: 500; letter-spacing: -.005em;
  min-height: 3.25rem; overflow: hidden; isolation: isolate; position: relative;
  transition: background-color var(--t-std) var(--ease-out);
}
.btn__label { display: flex; align-items: center; padding: 0 1.25rem 0 1.35rem; }
.btn__icon {
  display: grid; place-items: center; width: 3.25rem; position: relative; overflow: hidden; color: var(--btn-icon);
  border-left: 1px solid rgb(255 255 255 / .12);
}
.btn__icon .arrow { grid-area: 1 / 1; transition: transform var(--t-std) var(--ease-out); }
.btn__icon .arrow + .arrow { transform: translate(-36px, 36px); }
.btn:hover .btn__icon .arrow:first-child { transform: translate(36px, -36px); }
.btn:hover .btn__icon .arrow + .arrow { transform: none; }
.btn__icon .arrow--s + .arrow--s { transform: translateY(-36px); }
.btn:hover .btn__icon .arrow--s:first-child { transform: translateY(36px); }
.btn:hover .btn__icon .arrow--e + .arrow--e, .btn:hover .btn__icon .arrow--s + .arrow--s { transform: none; }
.btn:hover { --btn-bg: #15323a; }
.btn:active { transform: translateY(1px); }
.btn--light { --btn-bg: var(--on-deep); --btn-fg: var(--deep); --btn-icon: var(--teal); }
.btn--light .btn__icon { border-left-color: rgb(8 24 29 / .12); }
.btn--light:hover { --btn-bg: #fff; }
.btn--small { min-height: 2.5rem; font-size: .875rem; }
.btn--small .btn__label { padding: 0 .9rem 0 1rem; }
.btn--small .btn__icon { width: 2.5rem; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5) var(--s6); }

/* ——— Header ——— */
.site-header {
  /* Solid and static: no blur to repaint and no hide/show movement while scrolling. */
  position: sticky; top: 0; z-index: var(--z-header); background: var(--paper);
  border-bottom: 1px solid transparent; transition: border-color var(--t-std);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: var(--s5); }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; font-size: 1.35rem; letter-spacing: -.055em; font-stretch: 110%; }
.brand img { width: 30px; height: auto; }
.site-nav { display: flex; align-items: center; gap: var(--s6); }
.site-nav__list { display: flex; gap: var(--s1); }
.site-nav__list a {
  display: inline-flex; align-items: baseline; gap: .45rem; padding: .55rem .8rem; border-radius: var(--r2);
  font-size: .9rem; font-weight: 500; color: var(--ink-2); transition: color var(--t-fast), background-color var(--t-fast);
}
.site-nav__list a:hover { color: var(--ink); background: var(--paper-2); }
.site-nav__list a[aria-current="page"] { color: var(--ink); }
.site-nav__list a[aria-current="page"] .site-nav__num { color: var(--teal); }
.site-nav__num { font-family: var(--mono); font-size: .65rem; color: var(--ink-3); }
.site-nav__foot { display: none; }
.menu-toggle { display: none; }

@media (max-width: 899px) {
  .site-header__inner { height: 64px; }
  .site-header .brand { position: relative; z-index: calc(var(--z-nav) + 1); }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: .6rem; position: relative; z-index: calc(var(--z-nav) + 1);
    background: none; border: 1px solid var(--line-2); border-radius: var(--r2); padding: .5rem .75rem; min-height: 44px;
    font-size: .875rem; font-weight: 500;
  }
  .menu-toggle__icon { display: grid; gap: 4px; width: 16px; }
  .menu-toggle__icon i { display: block; height: 1.5px; background: currentColor; transition: transform var(--t-std) var(--ease-out); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child { transform: translateY(2.75px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { transform: translateY(-2.75px) rotate(-45deg); }
  .site-nav {
    position: fixed; inset: 0; height: 100vh; height: 100dvh; overflow-y: auto; z-index: var(--z-nav); background: var(--paper); display: flex; flex-direction: column;
    align-items: stretch; justify-content: flex-start; gap: var(--s7); padding: 96px var(--margin) var(--s6);
    visibility: hidden; opacity: 0; transition: opacity var(--t-std) var(--ease-out), visibility 0s linear var(--t-std);
  }
  .site-nav.is-open { visibility: visible; opacity: 1; transition: opacity var(--t-std) var(--ease-out); }
  .site-nav__list { flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
  .site-nav__list a {
    display: flex; padding: 1.1rem 0; font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 500; letter-spacing: -.04em;
    font-stretch: 108%; color: var(--ink); border-radius: 0; border-bottom: 1px solid var(--line); gap: 1rem;
  }
  .site-nav__list a:hover { background: none; }
  .site-nav__num { font-size: .75rem; min-width: 1.5rem; }
  .site-nav__cta { align-self: flex-start; }
  .site-nav__foot { display: grid; gap: .35rem; margin-top: auto; font-size: .95rem; color: var(--ink-2); }
  .site-nav__foot a { padding: .35rem 0; }
  body.nav-open { overflow: hidden; }

}

/* ——— Signature grid lines (the ledger paper) ——— */
.grid-lines {
  position: absolute; inset: 0; pointer-events: none; max-width: var(--max); margin-inline: auto;
  padding-inline: var(--margin); display: grid; grid-template-columns: repeat(6, 1fr); z-index: 0;
}
.grid-lines i { border-left: 1px solid rgb(12 28 33 / .055); transform-origin: top; }
.grid-lines i:last-child { border-right: 1px solid rgb(12 28 33 / .055); }

/* ——— Hero ——— */
.hero { position: relative; padding-top: clamp(2.5rem, 1rem + 5vw, 6rem); overflow: hidden; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--s8); align-items: end; }
.hero__copy { grid-column: 1 / span 6; display: grid; gap: var(--s5); align-content: end; }
.hero__copy .display { margin-block: var(--s2) var(--s2); }
.hero__lead { max-width: 34ch; }
.hero__copy .actions { margin-top: var(--s3); }
.hero__figure { grid-column: 7 / -1; }
.index-strip {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gutter);
  margin-top: clamp(3.5rem, 2rem + 5vw, 7rem); border-top: 1px solid var(--ink); padding-block: var(--s4) var(--s6);
  font-size: .875rem; font-weight: 500; color: var(--ink-2);
}
.index-strip span { display: block; font-family: var(--mono); font-size: var(--fs-label); color: var(--teal); margin-bottom: .35rem; }

@media (max-width: 1099px) {
  .hero__copy, .hero__figure { grid-column: 1 / -1; }
  .hero__copy { max-width: 720px; }
  .index-strip { grid-template-columns: repeat(3, 1fr); row-gap: var(--s5); }
}
@media (max-width: 599px) {
  .index-strip { grid-template-columns: 1fr 1fr; }
  .index-strip li:last-child { grid-column: 1 / -1; }
}

/* ——— Branch diagram (hero figure) ——— */
.branch {
  position: relative; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r3);
  box-shadow: 0 1px 0 #fff inset, 0 40px 80px -50px rgb(8 24 29 / .35);
}
.branch__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.branch__tabs { display: flex; gap: 2px; padding: 2px; background: var(--paper-2); border-radius: var(--r2); }
.branch__tabs [role="tab"] {
  border: 0; background: none; border-radius: 4px; padding: .45rem .7rem; font-size: .8125rem; font-weight: 500; color: var(--ink-3);
  min-height: 36px; transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.branch__tabs [role="tab"]:hover { color: var(--ink); }
.branch__tabs [role="tab"][aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgb(8 24 29 / .12), 0 0 0 1px rgb(8 24 29 / .06); }

.branch__stage {
  position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 6.5rem);
  align-items: center; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1rem, .5rem + 2vw, 2rem); min-height: 420px;
  background-image: radial-gradient(circle at 1px 1px, rgb(12 28 33 / .09) 1px, transparent 0); background-size: 16px 16px;
}
.branch__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.branch-line { fill: none; stroke: var(--teal); stroke-width: 1.25; stroke-linejoin: round; }
.branch-dot { fill: var(--signal); }
.branch-port { fill: var(--paper); stroke: var(--teal); stroke-width: 1.25; }

.branch__event {
  position: relative; z-index: 1; background: var(--ink); color: var(--on-deep); border-radius: var(--r2); padding: var(--s4) var(--s4) var(--s3);
  box-shadow: 0 20px 40px -20px rgb(8 24 29 / .6); display: grid; gap: .35rem;
}
.branch__event .label { color: var(--teal-2); }
.branch__title { font-size: 1.15rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; font-stretch: 104%; }
.branch__meta { font-size: .8125rem; color: var(--on-deep-2); }
.branch__product { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--deep-line); font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--on-deep-2); }
.branch__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgb(255 90 31 / .5); }
.motion .branch__pulse { animation: pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(255 90 31 / .5); } 70%, 100% { box-shadow: 0 0 0 8px rgb(255 90 31 / 0); } }

.branch__nodes { position: relative; z-index: 1; display: grid; gap: var(--s3); }
.branch__node {
  position: relative; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r2); padding: .7rem .85rem;
  transition: border-color var(--t-std), box-shadow var(--t-std);
}
.branch__node.is-lit { border-color: var(--teal); box-shadow: 0 0 0 3px rgb(7 108 121 / .12); }
.branch__node .label { font-size: .66rem; color: var(--teal); }
.branch__value { font-size: .95rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; margin-top: .15rem; }
.branch__note { font-size: .78rem; color: var(--ink-3); line-height: 1.35; }
.branch__cap {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s2) var(--s3) var(--s2) var(--s4);
  border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-3);
}
.branch__play {
  border: 1px solid var(--line-2); background: none; border-radius: var(--r1); font-family: var(--mono); font-size: .66rem;
  letter-spacing: .06em; text-transform: uppercase; padding: .35rem .6rem; min-height: 32px; color: var(--ink-2);
}
.branch__play:hover { border-color: var(--ink); color: var(--ink); }
.js:not(.motion) .branch__play { display: none; }

@media (max-width: 599px) {
  .branch__head { flex-direction: column; align-items: stretch; }
  .branch__tabs [role="tab"] { flex: 1; padding-inline: .3rem; }
  .branch__stage { grid-template-columns: 1fr; row-gap: 1.25rem; min-height: 0; }
  .branch__nodes { padding-left: 2.75rem; gap: var(--s2); }
  .branch__node { padding: .6rem .65rem; }
  .branch__value { font-size: .875rem; }
}

/* ——— Statement ——— */
.statement__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--s6); }
.statement__label { grid-column: 1 / span 3; padding-top: .6rem; }
.statement__text {
  grid-column: 4 / -1; font-size: clamp(1.65rem, 1rem + 2.3vw, 3.2rem); font-weight: 450; font-stretch: 104%;
  letter-spacing: -.03em; line-height: 1.12; text-wrap: pretty;
}
.statement__aside { grid-column: 8 / -1; display: grid; gap: var(--s4); justify-items: start; margin-top: var(--s5); color: var(--ink-2); }
@media (max-width: 899px) {
  .statement__label, .statement__text, .statement__aside { grid-column: 1 / -1; }
}

/* ——— Product frame ——— */
.frame {
  background: #fbfbf8; border-radius: var(--r3); overflow: hidden; box-shadow: var(--shadow-frame);
  border: 1px solid rgb(8 24 29 / .12);
}
.frame__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 34px; padding: 0 12px; border-bottom: 1px solid rgb(8 24 29 / .08); background: #f4f4f0; }
.frame__dots { display: flex; gap: 6px; }
.frame__dots i { width: 8px; height: 8px; border-radius: 50%; background: #d5d5cd; }
.frame__url { font-family: var(--mono); font-size: .66rem; color: var(--ink-3); background: #fff; border: 1px solid rgb(8 24 29 / .07); border-radius: 4px; padding: .15rem .8rem; }
.frame__view { overflow: hidden; }
.frame__view img { width: 100%; transform-origin: 50% 0; }

/* ——— Home: product showcase ——— */
.products-show { padding-block: var(--section); position: relative; }
.products-show__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: end; row-gap: var(--s4); margin-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.products-show__head .label { grid-column: 1 / -1; }
.products-show__head .h2 { grid-column: 1 / span 8; }
.products-show__head .link { grid-column: 11 / -1; justify-self: end; }
.products-show__body { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); }
.products-show__index { grid-column: 1 / span 3; position: sticky; top: 110px; align-self: start; }
.products-show__index ol { border-top: 1px solid var(--deep-line); }
.products-show__index ol a {
  display: grid; grid-template-columns: 2rem 1fr; padding: .9rem 0; border-bottom: 1px solid var(--deep-line); position: relative;
  color: var(--on-deep-2); transition: color var(--t-std);
}
.products-show__index ol a::before {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--teal-2);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-expr) var(--ease-out);
}
.products-show__index ol a:hover, .products-show__index ol a.is-active { color: var(--on-deep); }
.products-show__index ol a.is-active::before { transform: scaleX(1); }
.products-show__num { font-family: var(--mono); font-size: var(--fs-label); padding-top: .3rem; }
.products-show__name { font-size: 1.15rem; font-weight: 500; letter-spacing: -.02em; }
.products-show__ind { grid-column: 2; font-size: .8125rem; color: var(--on-deep-2); }
.products-show__also { margin-top: var(--s5); font-size: .875rem; color: var(--on-deep-2); display: grid; gap: .25rem; justify-items: start; }
.products-show__plates { grid-column: 5 / -1; display: grid; gap: clamp(5rem, 3rem + 6vw, 10rem); }
.plate { display: grid; gap: var(--s6); }
.plate__media {
  display: block; background: var(--tint); border-radius: var(--r3); padding: clamp(1.25rem, .5rem + 4vw, 4rem) clamp(1rem, .5rem + 4vw, 4rem) 0;
  overflow: hidden; position: relative;
}
.plate__media .frame { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; max-height: 36vw; }
.plate__copy { display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gutter); row-gap: var(--s3); align-items: start; }
.plate__copy > .label { grid-column: 1 / -1; }
.plate__name { grid-column: 1 / span 4; font-size: clamp(2rem, 1.2rem + 2.2vw, 3.25rem); font-weight: 500; letter-spacing: -.045em; font-stretch: 110%; line-height: 1; }
.plate__tag { grid-column: 5 / -1; font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; color: var(--on-deep); padding-top: .35rem; }
.plate__sum { grid-column: 5 / -1; color: var(--on-deep-2); max-width: 46ch; }
.plate__inside { grid-column: 5 / -1; font-size: .875rem; color: var(--on-deep); border-top: 1px solid var(--deep-line); padding-top: var(--s3); }
.plate__inside .label { margin-right: .5rem; }
.plate__copy .link { grid-column: 5 / -1; justify-self: start; margin-top: var(--s2); }

@media (max-width: 1099px) {
  .products-show__index { display: none; }
  .products-show__plates { grid-column: 1 / -1; }
  .products-show__head .h2 { grid-column: 1 / span 10; }
  .products-show__head .link { grid-column: 1 / -1; justify-self: start; }
  .plate__media .frame { max-height: 60vw; }
}
@media (max-width: 699px) {
  .plate__copy { grid-template-columns: 1fr; }
  .plate__copy > * { grid-column: 1 / -1 !important; }
  .plate__tag { font-size: 1.1rem; }
}

/* ——— Rows (services index) ——— */
.services-index__head { display: grid; gap: var(--s4); margin-bottom: var(--s8); }
.rows { border-top: 1px solid var(--ink); }
.row {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: baseline;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem) 0; border-bottom: 1px solid var(--line-2); position: relative;
}
.row::before {
  content: ""; position: absolute; inset: -1px 0 -1px 0; background: var(--paper-2); z-index: -1;
  transform: scaleY(0); transform-origin: bottom; transition: transform var(--t-std) var(--ease-out);
}
.rows li { position: relative; isolation: isolate; }
.row:hover::before { transform: scaleY(1); }
.row__num { grid-column: 1 / span 1; }
.row__title { grid-column: 2 / span 5; font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.03em; font-stretch: 106%; line-height: 1.15; transition: transform var(--t-std) var(--ease-out); }
.row:hover .row__title { transform: translateX(.5rem); }
.row__text { grid-column: 7 / span 5; color: var(--ink-2); font-size: var(--fs-small); max-width: 48ch; }
.row__icon { grid-column: 12; justify-self: end; align-self: center; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; transition: background-color var(--t-std), color var(--t-std), border-color var(--t-std), transform var(--t-std) var(--ease-out); }
.row:hover .row__icon { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: rotate(45deg); }
@media (max-width: 899px) {
  .row { grid-template-columns: 2.5rem 1fr 2.5rem; row-gap: .5rem; }
  .row__num { grid-column: 1; }
  .row__title { grid-column: 2; }
  .row__text { grid-column: 2; }
  .row__icon { grid-column: 3; grid-row: 1; }
}

/* ——— Process track ——— */
.process { border-top: 1px solid var(--line); }
.process__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--s3); margin-bottom: var(--s8); }
.process__head .label { grid-column: 1 / span 3; }
.process__title { grid-column: 4 / span 4; }
.process__lead { grid-column: 9 / -1; color: var(--ink-2); font-size: var(--fs-small); max-width: 36ch; }
.process__track { position: relative; display: grid; grid-template-columns: repeat(var(--steps, 4), 1fr); gap: var(--gutter); }
.process__track:has(> .process__step:nth-of-type(3):last-child) { --steps: 3; }
.process__rail { position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--line-2); }
.process__rail-fill { position: absolute; inset: 0; background: var(--teal); transform-origin: left; transform: scaleX(var(--fill, 1)); }
.process__step { position: relative; padding-top: var(--s6); display: grid; gap: var(--s3); align-content: start; }
.process__node { position: absolute; top: 0; left: 0; width: 11px; height: 11px; background: var(--paper); border: 1.5px solid var(--teal); transform: rotate(45deg); transition: background-color var(--t-std); }
.process__step.is-on .process__node { background: var(--teal); }
.process__step .label { color: var(--teal); }
.process__step h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.process__step p:last-child { color: var(--ink-2); font-size: var(--fs-small); max-width: 32ch; }
@media (max-width: 899px) {
  .process__head .label, .process__title, .process__lead { grid-column: 1 / -1; }
  .process__track { grid-template-columns: 1fr; gap: var(--s7); padding-left: var(--s6); }
  .process__rail { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .process__rail-fill { transform-origin: top; transform: scaleY(var(--fill, 1)); }
  .process__step { padding-top: 0; }
  .process__node { left: calc(-1 * var(--s6)); top: .1rem; }
}

/* ——— Agency split ——— */
.agency { position: relative; overflow: hidden; }
.agency__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--s4); align-items: end; margin-bottom: var(--s9); }
.agency__head .label { grid-column: 1 / -1; }
.agency__head .h2 { grid-column: 1 / span 7; }
.agency__copy { grid-column: 9 / -1; display: grid; gap: var(--s5); justify-items: start; color: var(--on-deep-2); }
.split { position: relative; }
.split__root { display: flex; justify-content: center; align-items: center; gap: .6rem; color: var(--on-deep); }
.split__dot { width: 9px; height: 9px; background: var(--signal); transform: rotate(45deg); }
.split__svg { display: block; width: 100%; height: 120px; margin-top: var(--s3); overflow: visible; }
.split__line { fill: none; stroke: var(--teal-2); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.split__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.split__col { border: 1px solid var(--deep-line); border-radius: var(--r3); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: grid; gap: var(--s4); align-content: start; background: rgb(255 255 255 / .015); }
.split__col--us { background: var(--deep-2); border-color: #2a4a51; }
.split__col h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; }
.split__col ul { display: grid; border-top: 1px solid var(--deep-line); }
.split__col li { padding: .75rem 0; border-bottom: 1px solid var(--deep-line); color: var(--on-deep-2); font-size: var(--fs-small); display: flex; gap: .75rem; }
.split__col li::before { content: ""; width: 6px; height: 6px; margin-top: .55em; flex: none; border: 1px solid var(--teal-2); transform: rotate(45deg); }
.agency__tags { margin-top: var(--s7); text-align: center; }
.agency__tags span { margin-inline: .6rem; color: var(--deep-line); }
@media (max-width: 899px) {
  .agency__head .h2, .agency__copy { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .split__svg { display: none; }
  .split__root { justify-content: flex-start; margin-bottom: var(--s4); }
  .split__cols { grid-template-columns: 1fr; gap: var(--s4); }
  .agency__tags { text-align: left; }
}

/* ——— FAQ ——— */
.faq { border-top: 1px solid var(--line); }
.faq__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--s7); }
.faq__head { grid-column: 1 / span 4; display: grid; gap: var(--s4); align-content: start; }
.faq__list { grid-column: 6 / -1; border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s5); cursor: pointer;
  padding: 1.35rem 0; font-size: 1.15rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; transition: color var(--t-fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal); }
.faq__icon { position: relative; width: 14px; height: 14px; flex: none; }
.faq__icon i { position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px; background: currentColor; transition: transform var(--t-std) var(--ease-out); }
.faq__icon i:last-child { transform: rotate(90deg); }
.faq details[open] .faq__icon i:last-child { transform: rotate(0); }
.faq__answer { overflow: hidden; }
.faq__answer p { padding-bottom: 1.5rem; color: var(--ink-2); max-width: 60ch; }
@media (max-width: 899px) { .faq__head, .faq__list { grid-column: 1 / -1; } }

/* ——— Footer ——— */
.site-footer { background: var(--deep); color: var(--on-deep); padding-top: var(--section); overflow: hidden; }
.footer-cta { display: grid; gap: var(--s3); padding-bottom: var(--s9); border-bottom: 1px solid var(--deep-line); }
.footer-cta .label { color: var(--on-deep-2); margin-bottom: var(--s3); }
.footer-cta__line { display: block; font-size: clamp(2.4rem, .8rem + 6.4vw, 7.4rem); font-weight: 500; font-stretch: 112%; letter-spacing: -.055em; line-height: .95; }
.footer-cta__line--end { color: var(--on-deep-2); transition: color var(--t-expr) var(--ease-out); }
.footer-cta:hover .footer-cta__line--end { color: var(--on-deep); }
.footer-cta__arrow { display: inline-grid; place-items: center; width: .8em; height: .8em; border-radius: 50%; background: var(--teal-2); color: var(--deep); vertical-align: -.05em; transition: transform var(--t-expr) var(--ease-out); }
.footer-cta__arrow .arrow { width: .4em; height: .4em; }
.footer-cta:hover .footer-cta__arrow { transform: rotate(45deg); }
.site-footer__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--s7); padding-block: var(--s8); }
.site-footer__brand { grid-column: 1 / span 3; display: grid; gap: var(--s4); align-content: start; justify-items: start; color: var(--on-deep-2); }
.brand--light { color: var(--on-deep); }
.site-footer__col { grid-column: span 3; display: grid; gap: var(--s4); align-content: start; }
.site-footer__col a { color: var(--on-deep-2); display: inline-block; padding: .3rem 0; transition: color var(--t-fast); }
.site-footer__col a:hover, .site-footer__col a[aria-current="page"] { color: var(--on-deep); }
.site-footer__base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s4); padding-block: var(--s5); border-top: 1px solid var(--deep-line); font-size: .8125rem; color: var(--on-deep-2); }
@media (max-width: 899px) {
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__col { grid-column: span 6; }
}

/* ——— Page hero (inner pages) ——— */
.page-hero { padding-top: clamp(3rem, 1.5rem + 6vw, 8rem); padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); border-bottom: 1px solid var(--line); }
.page-hero__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--s5); align-items: end; }
.page-hero__grid > .label { grid-column: 1 / -1; }
.page-hero__grid > .h1 { grid-column: 1 / span 8; }
.page-hero__grid > :last-child:not(.h1) { grid-column: 9 / -1; display: grid; gap: var(--s5); justify-items: start; }
.page-hero__grid > .lead:last-child { display: block; }
@media (max-width: 899px) {
  .page-hero__grid > * { grid-column: 1 / -1 !important; }
}
.jump { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin-top: var(--s8); }
.jump a { display: block; border-top: 1px solid var(--ink); padding-top: var(--s3); font-weight: 500; font-size: .95rem; letter-spacing: -.01em; transition: color var(--t-fast); }
.jump a:hover { color: var(--teal); }
.jump span { display: block; font-family: var(--mono); font-size: var(--fs-label); color: var(--teal); margin-bottom: .25rem; }
@media (max-width: 899px) { .jump { grid-template-columns: 1fr 1fr; row-gap: var(--s4); } }

/* ——— Catalog ——— */
.catalog { padding-top: var(--s7); }
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s8); }
.filters button {
  border: 1px solid var(--line-2); background: none; border-radius: var(--r2); padding: .55rem .9rem; min-height: 44px;
  font-size: .875rem; font-weight: 500; color: var(--ink-2); transition: all var(--t-fast);
}
.filters button span { font-family: var(--mono); font-size: .66rem; color: var(--ink-3); margin-left: .3rem; }
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filters button[aria-pressed="true"] span { color: var(--teal-2); }
.catalog__list { display: grid; }
.entry { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--s5); padding-block: var(--s7); border-top: 1px solid var(--line-2); }
.entry:first-child { border-top-color: var(--ink); }
.entry[hidden] { display: none; }
.entry__copy { grid-column: 1 / span 4; display: grid; gap: var(--s3); align-content: start; color: var(--ink-2); }
.entry__name { font-size: var(--fs-h2); font-weight: 500; letter-spacing: -.04em; font-stretch: 108%; line-height: 1; color: var(--ink); margin-top: var(--s2); }
.entry__name a:hover { color: var(--teal); }
.entry__tag { font-size: 1.15rem; color: var(--ink); letter-spacing: -.015em; line-height: 1.3; }
.entry__link { justify-self: start; margin-top: var(--s3); color: var(--ink); }
.entry__media { grid-column: 6 / -1; background: var(--tint); border-radius: var(--r3); padding: clamp(1rem, .5rem + 3vw, 3rem) clamp(1rem, .5rem + 3vw, 3rem) 0; overflow: hidden; }
.entry__media .frame { border-bottom-left-radius: 0; border-bottom-right-radius: 0; max-height: 30vw; }
@media (max-width: 899px) {
  .entry__copy, .entry__media { grid-column: 1 / -1; }
  .entry__media .frame { max-height: 56vw; }
}
.callout {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: end; overflow: hidden;
  margin-top: var(--s8); background: #efe9dd; color: var(--ink); border-radius: var(--r3); padding: clamp(1.5rem, 1rem + 3vw, 3.5rem) clamp(1.25rem, .5rem + 3vw, 3.5rem) 0;
}
.callout__copy { grid-column: 1 / span 5; display: grid; gap: var(--s3); align-content: start; align-self: start; padding-bottom: var(--s6); }
.callout__name { font-size: var(--fs-h2); font-weight: 500; letter-spacing: -.04em; font-stretch: 108%; line-height: 1; margin-top: var(--s2); }
.callout__tag { font-size: 1.15rem; letter-spacing: -.015em; line-height: 1.3; }
.callout__text { color: var(--ink-2); font-size: var(--fs-small); max-width: 42ch; }
.callout__cta { display: inline-flex; align-items: center; gap: .75rem; margin-top: var(--s3); font-weight: 500; font-size: var(--fs-small); }
.callout__icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); transition: transform var(--t-std) var(--ease-out); }
.callout:hover .callout__icon { transform: rotate(45deg); }
.callout__media { grid-column: 7 / -1; display: block; }
.callout__media .frame { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; max-height: 26vw; transition: transform var(--t-expr) var(--ease-out); }
.callout:hover .callout__media .frame { transform: translateY(-6px); }
@media (max-width: 899px) {
  .callout__copy, .callout__media { grid-column: 1 / -1; }
  .callout__media .frame { max-height: 56vw; }
}
.reach { display: grid; margin-top: var(--s4); border-top: 1px solid var(--ink); }
.reach div { padding: .9rem 0; border-bottom: 1px solid var(--line-2); display: grid; gap: .2rem; }
.reach dd a { font-size: 1.1rem; font-weight: 500; letter-spacing: -.015em; color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t-std) var(--ease-out); }
.reach dd a:hover { background-size: 100% 1px; }
.cta-band__support { grid-column: 1 / -1; margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--deep-line); font-size: var(--fs-small); color: var(--on-deep-2); }
.cta-band__support a { color: var(--on-deep); border-bottom: 1px solid var(--deep-line); transition: border-color var(--t-fast); }
.cta-band__support a:hover { border-bottom-color: var(--teal-2); }
.closing { border-top: 1px solid var(--line); }
.closing__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--s5); align-items: end; }
.closing__grid > .label { grid-column: 1 / -1; }
.closing__grid > .h2 { grid-column: 1 / span 7; }
.closing__grid > div { grid-column: 9 / -1; display: grid; gap: var(--s5); justify-items: start; }
@media (max-width: 899px) { .closing__grid > * { grid-column: 1 / -1 !important; } }

/* ——— Product page ——— */
.product-hero { padding-top: clamp(2.5rem, 1.5rem + 4vw, 6rem); }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--teal); }
.crumbs span { margin-inline: .4rem; }
.product-hero__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--s6); align-items: end; margin-top: var(--s6); }
.product-hero__name { grid-column: 1 / -1; white-space: nowrap; font-size: min(10.5vw, 9.5rem); font-weight: 500; font-stretch: 112%; letter-spacing: -.06em; line-height: .88; }
.product-hero__copy { grid-column: 7 / -1; display: grid; gap: var(--s4); color: var(--ink-2); }
.product-hero__tag { grid-column: 1 / span 5; align-self: start; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.025em; color: var(--ink); font-weight: 500; max-width: 22ch; }
.product-hero__copy p { max-width: 46ch; }
.product-hero__copy .actions { margin-top: var(--s3); }
.spec-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin-top: var(--s8); border-top: 1px solid var(--ink); padding-top: var(--s3); }
.spec-line dt { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.spec-line dd { font-weight: 500; font-size: .95rem; margin-top: .2rem; }
@media (max-width: 1099px) {
  .product-hero__name, .product-hero__copy, .product-hero__tag { grid-column: 1 / -1; }
  .product-hero__copy { max-width: 620px; }
}
@media (max-width: 599px) { .spec-line { grid-template-columns: 1fr 1fr; row-gap: var(--s4); } }

.gallery { padding-block: var(--s7) var(--s9); position: relative; }
.gallery::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--s7) + 18%); bottom: 0; background: var(--tint); z-index: -1; }
.gallery { isolation: isolate; }
.gallery__stage { position: relative; }
.gallery__frame { max-width: 1180px; margin-inline: auto; }
.gallery__frame .frame__view { aspect-ratio: 1440 / 900; background: #f7f7f4; }
.gallery__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gallery__controls { max-width: 1180px; margin: var(--s5) auto 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s4); }
.gallery__controls .label { color: var(--ink-2); }
.gallery__tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: rgb(255 255 255 / .55); border-radius: var(--r2); border: 1px solid rgb(8 24 29 / .08); }
.gallery-tab { border: 0; background: none; border-radius: 4px; padding: .55rem .85rem; min-height: 40px; font-size: .875rem; font-weight: 500; color: var(--ink-2); transition: background-color var(--t-fast), color var(--t-fast); }
.gallery-tab span { font-family: var(--mono); font-size: .66rem; color: var(--ink-3); margin-right: .45rem; }
.gallery-tab:hover { color: var(--ink); }
.gallery-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.gallery-tab[aria-selected="true"] span { color: var(--teal-2); }

.specs__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--s7); }
.specs__head { grid-column: 1 / span 5; display: grid; gap: var(--s4); align-content: start; position: sticky; top: 110px; align-self: start; }
.specs__list { grid-column: 7 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
.spec { position: relative; padding: var(--s5) 0 var(--s6); display: grid; gap: var(--s2); align-content: start; }
.spec::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ink); transform-origin: left; transform: scaleX(var(--rule, 1)); }
.spec .label { color: var(--teal); }
.spec h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.spec p { color: var(--ink-2); font-size: var(--fs-small); }
@media (max-width: 899px) {
  .specs__head { grid-column: 1 / -1; position: static; }
  .specs__list { grid-column: 1 / -1; }
}
@media (max-width: 599px) { .specs__list { grid-template-columns: 1fr; } }

.cta-band__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--s5); align-items: end; }
.cta-band__grid > .label { grid-column: 1 / -1; }
.cta-band__grid > .h2 { grid-column: 1 / span 7; }
.cta-band__grid > .actions { grid-column: 9 / -1; }
@media (max-width: 899px) { .cta-band__grid > * { grid-column: 1 / -1 !important; } }

.next { background: var(--tint); }
.next__link { display: grid; gap: var(--s3); padding-block: clamp(3rem, 2rem + 5vw, 7rem); }
.next__name { font-size: clamp(2.6rem, 1rem + 6vw, 6.5rem); font-weight: 500; font-stretch: 112%; letter-spacing: -.055em; line-height: .95; display: inline-flex; align-items: center; gap: .25em; }
.next__name .arrow { width: .5em; height: .5em; transition: transform var(--t-expr) var(--ease-out); }
.next__link:hover .next__name .arrow { transform: translateX(.15em); }
.next__tag { color: var(--ink-2); font-size: var(--fs-lead); }
.next .label, .plate .label { color: var(--ink-2); }
.dark .plate .label { color: var(--on-deep-2); }

/* ——— Services page ——— */
.service { padding-block: clamp(4rem, 2.5rem + 5vw, 8rem); border-bottom: 1px solid var(--line); }
.service__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--s6); align-items: start; }
.service__num { grid-column: 1 / span 2; font-family: var(--mono); font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); line-height: 1; color: var(--teal); letter-spacing: -.04em; position: sticky; top: 110px; }
.service__head { grid-column: 3 / span 5; display: grid; gap: var(--s4); position: sticky; top: 110px; }
.service__body { grid-column: 8 / -1; display: grid; gap: var(--s6); justify-items: start; }
.service__body .lead { max-width: 40ch; }
.ticks { width: 100%; display: grid; }
.ticks li { position: relative; padding: .85rem 0 .85rem 1.5rem; font-weight: 500; }
.ticks li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-2); transform-origin: left; transform: scaleX(var(--rule, 1)); }
.ticks li::after { content: ""; position: absolute; left: 2px; top: 1.3rem; width: 6px; height: 6px; border: 1px solid var(--teal); transform: rotate(45deg); }
@media (max-width: 899px) {
  .service__num { grid-column: 1 / -1; position: static; }
  .service__head, .service__body { grid-column: 1 / -1; position: static; }
}

/* ——— Contact ——— */
.page-hero--compact { border-bottom: 0; padding-bottom: 0; }
.contact__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: var(--s7); }
.contact__aside { grid-column: 1 / span 4; display: grid; gap: var(--s5); align-content: start; color: var(--ink-2); }
.contact__aside .h3 { color: var(--ink); }
.contact__steps { border-top: 1px solid var(--ink); margin-top: var(--s3); }
.contact__steps li { display: grid; grid-template-columns: 2.5rem 1fr; padding: .9rem 0; border-bottom: 1px solid var(--line-2); font-size: var(--fs-small); color: var(--ink); }
.contact__steps .label { color: var(--teal); padding-top: .15rem; }
.form { grid-column: 6 / -1; display: grid; gap: var(--s5); background: #fbfbf8; border: 1px solid var(--line-2); border-radius: var(--r3); padding: clamp(1.25rem, .75rem + 2.5vw, 3rem); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.field { display: grid; gap: .5rem; }
.field__label { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; padding: .7rem 0; font-size: 1.05rem;
  border-radius: 0; transition: border-color var(--t-std); appearance: none; -webkit-appearance: none;
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #6b7774; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--teal); box-shadow: 0 1px 0 var(--teal); }
.field input:user-invalid, .field textarea:user-invalid { border-bottom-color: #b3261e; }
.field__select { position: relative; display: block; }
.field__select::after { content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); margin-top: var(--s3); }
.form__status { font-size: var(--fs-small); color: var(--teal); min-height: 1.5em; }
@media (max-width: 899px) { .contact__aside, .form { grid-column: 1 / -1; } }
@media (max-width: 599px) { .form__row { grid-template-columns: 1fr; } }

/* ——— Motion hooks (only when motion.js is active) ——— */
html.motion { scroll-behavior: smooth; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
}
.motion [data-intro], .motion [data-intro-lines] { opacity: 0; }
.split-line { display: block; }
.split-mask { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }

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

/* ——— Social links ——— */
.socials { display: flex; flex-wrap: wrap; gap: var(--s2); }
.socials a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .45rem .8rem .45rem .6rem;
  border: 1px solid var(--line-2); border-radius: var(--r2); font-size: .8125rem; font-weight: 500; color: var(--ink-2);
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.socials a:hover { color: var(--ink); border-color: var(--ink); }
.socials--footer { margin-top: var(--s2); }
.socials--footer a { border-color: var(--deep-line); color: var(--on-deep-2); padding: .45rem; min-width: 40px; justify-content: center; }
.socials--footer a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.socials--footer a:hover { color: var(--on-deep); border-color: var(--teal-2); background: var(--deep-2); }
.reach__social { display: grid; gap: var(--s3); margin-top: var(--s5); }