/* ==========================================================================
   New Premise, shared stylesheet.
   Palette from the brand palette slide (sampled 2026-09-14): ice #EDF6FE,
   navy #061624, blue #2E5DA7, sky #6EC0E4. Type from the brand typography
   slide: Degular Regular for display, Degular Semibold tracked for labels,
   Degular Regular tracked for body. Instrument Sans stands in for Degular
   until the Adobe Fonts kit exists (see the head of each page).
   Page-specific styles live in each page; this file holds what every page
   shares: tokens, reset, header, footer, buttons, type, the rail, devices,
   figures, bands, forms, hatch art and the scroll reveal.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  color-scheme: only light; /* the site paints one light palette; this refuses the browser's forced dark inversion */
  --ground: #EDF6FE;
  --ink: #061624;
  --blue: #2E5DA7;
  --royal: #2E5DA7; /* older markup calls the display blue "royal"; it is the brand blue */
  --sky: #6EC0E4;
  --green: #1F9D63; /* only for a finished check */
  --white: #FFFFFF;

  --ink-soft: rgba(6, 22, 36, 0.78);
  --ink-mute: rgba(6, 22, 36, 0.6);
  --ink-rule: rgba(6, 22, 36, 0.22);
  --ink-rule-strong: rgba(6, 22, 36, 0.4);
  --ink-faint: rgba(6, 22, 36, 0.12);
  --ink-hair: rgba(6, 22, 36, 0.1);

  --font: "degular", "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(22px, 5vw, 72px);
  --max: 1440px;
  --header-h: 112px;
  --stuck-h: 62px; /* the compact header: the 62px band of the header box that stays in view */

  --shadow-card: 0 34px 60px -36px rgba(6, 22, 36, 0.42), 0 2px 6px -2px rgba(6, 22, 36, 0.08);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bar: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  position: relative;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { position: relative; z-index: 1; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--sky); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

[id] { scroll-margin-top: calc(var(--stuck-h) + 16px); } /* clears the compact sticky header at every width */

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.narrow { max-width: 1120px; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--blue);
  color: var(--white);
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* ---------- type ---------- */
.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
}
.label-sky { color: var(--sky); }
.label-mute { color: var(--ink-mute); }
.label-num { /* "01 | Name", the deck's numbered label */
  display: flex;
  gap: 0.8em;
  align-items: baseline;
}
.label-num b { font-weight: 600; }
.label-num i { font-style: normal; opacity: 0.5; }

.display { /* the display voice: Regular weight, tight, in the brand blue */
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--blue);
  text-wrap: balance;
}
.display strong { font-weight: 600; }
.display-1 { font-size: clamp(44px, 5.4vw, 80px); line-height: 1; }
.display-2 { font-size: clamp(34px, 4vw, 56px); }
.display-3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; }
.display-4 { font-size: clamp(22px, 1.8vw, 26px); line-height: 1.15; }

.lede {
  font-size: 1.3125rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 44ch;
  text-wrap: pretty;
}
.lede-s { font-size: 1.125rem; max-width: 52ch; }
.body { max-width: 60ch; color: var(--ink-soft); text-wrap: pretty; }
.body p + p { margin-top: 14px; }
.body strong { font-weight: 600; color: var(--ink); }
.key { font-weight: 600; color: var(--blue); }
.nowrap { white-space: nowrap; }
.small { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

.link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}
.link .icon-arrow { width: 13px; height: 13px; transition: transform 0.3s var(--ease-out); }
.link:hover .icon-arrow { transform: translate(2px, -2px); }
.link-under { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-rule); }
.link-under:hover { text-decoration-color: currentColor; }

/* square-marker list, the deck's bullet */
.list-sq { list-style: none; display: grid; gap: 10px; }
.list-sq li { position: relative; padding-left: 20px; line-height: 1.45; }
.list-sq li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--blue);
}
.list-sq.on-blue li::before { background: var(--sky); }
.list-sq li strong { font-weight: 600; }

/* rows separated by hairlines */
.rows { list-style: none; }
.rows li { padding: 14px 0; border-top: 1px solid var(--ink-faint); }
.rows li:last-child { border-bottom: 1px solid var(--ink-faint); }

/* ---------- header (tall at rest, compacts on scroll) ---------- */
.site-header {
  position: sticky;
  top: -54px; /* the box keeps its rest height (116px); the top 54px scroll away and a 62px band stays pinned */
  z-index: 50;
  padding: 46px 0 24px;
  background: transparent;
  transition: background-color 0.35s var(--ease-bar), box-shadow 0.35s var(--ease-bar);
}
.site-header.is-stuck {
  background: rgba(237, 246, 254, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -18px rgba(6, 22, 36, 0.28);
}
/* where the blur is not painted the header goes near-opaque, so the page does not read through it */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header.is-stuck { background: rgba(237, 246, 254, 0.98); } }
/* Three columns: brand, nav centered on the page, the call button at the right edge. The outer columns are equal while
   there is room, so the nav sits on the page's center line; when tight they shrink to their content and the nav stays between. */
.header-row { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 24px; transition: transform 0.35s var(--ease-bar); }
.header-row > .brand { justify-self: start; }
.header-row > .button { justify-self: end; }
.site-header.is-stuck .header-row { transform: translateY(16px); } /* the row's center moves to the center of the pinned band */

.brand { display: inline-flex; align-items: center; gap: 16px; color: var(--blue); transform-origin: left center; transition: transform 0.35s var(--ease-bar); }
.site-header.is-stuck .brand { transform: scale(0.8); }
.brand-mark { height: 46px; width: auto; flex: none; }
.brand-name { font-size: 19px; line-height: 1.1; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); }

.site-nav { display: flex; gap: 44px; justify-self: center; }
.site-nav a {
  position: relative;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  white-space: nowrap;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1.5px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 26px 17px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.button .icon-arrow { width: 13px; height: 13px; flex: none; margin-top: -1px; transition: transform 0.3s var(--ease-out); }
.button:hover .icon-arrow { transform: translate(2px, -2px); }
.button-primary { background: var(--blue); border-color: var(--blue); color: var(--white); }
.button-primary:hover { background: var(--ink); border-color: var(--ink); }
.button-secondary { background: transparent; border-color: var(--ink-rule-strong); color: var(--ink); }
.button-secondary:hover { border-color: var(--ink); background: var(--white); }
.button-inverse { background: var(--white); border-color: var(--white); color: var(--blue); }
.button-inverse:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.button-small { padding: 14px 20px 13px; font-size: 11.5px; }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.button[disabled]:hover { background: var(--blue); border-color: var(--blue); }

/* ---------- sections ---------- */
.sec { padding: clamp(64px, 8vw, 112px) 0; }
.sec-tight { padding: clamp(40px, 5vw, 72px) 0; }
.sec-head { max-width: 760px; }
.sec-head .lede { margin-top: 20px; }
.sec-split { /* title on the left, lede beside it */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px clamp(40px, 6vw, 96px);
  align-items: start;
}
.sec-split .lede { padding-top: 4px; }

/* page head, interior pages */
.page-head { padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); }
.page-head .lede { margin-top: 24px; }
.page-head .display-1 { max-width: 16ch; }

/* ---------- the rail: numbered steps on one line ---------- */
.rail {
  --rail-dot: 30px;
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--rail-n, 4), minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.rail::before { /* the line, through the middle of the dots */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--rail-dot) / 2);
  height: 1.5px;
  background: var(--ink-rule);
}
.rail-line { /* the line drawing itself in as the rail comes into view */
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--rail-dot) / 2);
  height: 1.5px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s var(--ease-out);
}
.rail.is-in .rail-line { transform: scaleX(1); }
.rail-step { position: relative; }
.rail-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--rail-dot);
  height: var(--rail-dot);
  border-radius: 50%;
  background: var(--ground);
  border: 1.5px solid var(--ink-rule-strong);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.32s);
}
.rail.is-in .rail-dot { background: var(--blue); border-color: var(--blue); color: var(--white); }
.rail-title { margin-top: 18px; font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: 0.01em; color: var(--ink); text-wrap: balance; }
.rail-text { margin-top: 10px; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.rail-more { margin-top: 14px; }

/* vertical rail: the same parts, stacked */
.rail-v { --rail-dot: 26px; grid-template-columns: 1fr; gap: 0; }
.rail-v::before, .rail-v .rail-line {
  left: calc(var(--rail-dot) / 2);
  right: auto;
  top: 0;
  bottom: 0;
  width: 1.5px;
  height: auto;
  transform-origin: top;
}
.rail-v .rail-line { transform: scaleY(0); }
.rail-v.is-in .rail-line { transform: scaleY(1); }
.rail-v .rail-step { display: grid; grid-template-columns: var(--rail-dot) minmax(0, 1fr); gap: 18px; padding-bottom: 28px; }
.rail-v .rail-step:last-child { padding-bottom: 0; }
.rail-v .rail-title { margin-top: 3px; }

/* ---------- devices: white cards that show work ---------- */
.device {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--ink-hair);
  box-shadow: var(--shadow-card);
}
.device-pad { padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2.4vw, 30px); }
.device-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-hair);
}
.device-key {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.device-title { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.device-list { list-style: none; display: grid; gap: 12px; }
.device-row { display: flex; align-items: center; gap: 12px; font-size: 14.5px; line-height: 1.3; letter-spacing: 0.01em; }
.device-row[data-state="pending"] { color: rgba(6, 22, 36, 0.42); }
.device-text { flex: 1; }
.device-box {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  border: 1.5px solid rgba(6, 22, 36, 0.25);
}
.device-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 9px;
  border: solid var(--white);
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -62%) rotate(45deg) scale(0);
  transition: transform 0.28s var(--ease-out);
}
.device-row[data-state="active"] .device-box { border-color: var(--blue); }
.device-row[data-state="done"] .device-box { background: var(--green); border-color: var(--green); }
.device-row[data-state="done"] .device-box::after { transform: translate(-50%, -62%) rotate(45deg) scale(1); }
.device-note { margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); }
.device-verdict { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: var(--green); }

/* ---------- figures: a number, what it counts, where it comes from ---------- */
.figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 32px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-faint);
}
.figs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figs-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fig + .fig { padding-left: 32px; border-left: 1px solid var(--ink-faint); }
.fig-value {
  font-family: var(--display);
  font-size: clamp(36px, 3.2vw, 46px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.fig-value small { font-size: 0.5em; letter-spacing: 0; margin-left: 0.06em; }
.fig-value .pre { font-size: 0.34em; font-weight: 500; letter-spacing: 0; margin: 0 0.35em 0 0; }
.fig-label { margin-top: 8px; max-width: 30ch; font-size: 15px; line-height: 1.4; color: var(--ink); }
.fig-source { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.fig-source a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-rule); transition: color 0.2s var(--ease-out), text-decoration-color 0.2s var(--ease-out); }
.fig-source a:hover { color: var(--ink); text-decoration-color: currentColor; }
/* figures on the band: white values, the rules in the on-blue rule */
.band .figs { border-top-color: var(--on-blue-rule); }
.band .fig + .fig { border-left-color: var(--on-blue-rule); }
.band .fig-value { color: var(--white); }
.band .fig-label { color: var(--on-blue); }
.band .fig-source { color: var(--on-blue-mute); }
.tag { /* projected, measured, sample: the honesty tag on a figure or a card */
  display: inline-block;
  padding: 4px 8px 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid var(--ink-rule);
}
.tag-measured { color: var(--green); border-color: rgba(31, 157, 99, 0.45); }
.tag-on-blue { color: var(--white); border-color: rgba(255, 255, 255, 0.4); }

/* ---------- the silk: a WebGL canvas drawing slow folds in the brand blues (the script in site.js), under the
   mark in the ice. It fills whatever box holds it: the home page's closing panel, the contact page's side panel,
   the closing band on the other pages. Without WebGL the canvas stays clear and the box keeps its flat blue. ---------- */
.close-panel { position: relative; overflow: hidden; background: var(--blue); --on-blue-label: #BEE3F3; }
.close-silk { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.close-mark { position: absolute; z-index: 1; top: clamp(24px, 2.6vw, 36px); right: clamp(24px, 2.6vw, 36px); width: clamp(56px, 5vw, 72px); height: auto; color: var(--ground); }
/* the silk panel that carries copy (the home close, contact): the block sits at the foot and sticks to the foot
   of the screen while the panel, as tall as the form beside it, scrolls past (no clip on the panel, or it could
   not stick). The block carries its own scrim: clear at the top of its 120px lead, ink at 52% where the label
   starts, 72% at the foot. The label in sky, the icons as frosted squares, titles white, copy in ice. */
.close-panel.has-copy { display: flex; flex-direction: column; justify-content: flex-end; min-height: 560px; overflow: visible; }
.panel-copy { position: sticky; bottom: 0; z-index: 1; padding: 120px clamp(24px, 2.8vw, 36px) clamp(26px, 2.8vw, 36px); color: var(--ground); background: linear-gradient(180deg, rgba(6, 22, 36, 0) 0, rgba(6, 22, 36, 0.52) 120px, rgba(6, 22, 36, 0.72) 100%); }
.panel-copy .label { color: var(--on-blue-label); }
.panel-copy .expect { margin-top: 18px; gap: 16px; }
.panel-copy .expect .ico { color: var(--white); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.panel-copy .expect b { color: var(--white); }
.panel-copy .expect p { color: var(--ground); opacity: 0.78; }
.panel-write { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.24); }
.panel-write .display-4 { margin-top: 8px; color: var(--white); }
.panel-write p:not(.label) { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ground); opacity: 0.84; text-wrap: pretty; }
.panel-write a { font-weight: 600; color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.5); transition: text-decoration-color 0.2s var(--ease-out); }
.panel-write a:hover { text-decoration-color: var(--white); }
.panel-write a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
@media (max-width: 960px) {
  .close-panel.has-copy { min-height: 0; }
  .panel-copy { position: static; padding-top: 150px; background: linear-gradient(180deg, rgba(6, 22, 36, 0) 0, rgba(6, 22, 36, 0.52) 150px, rgba(6, 22, 36, 0.72) 100%); } /* room for the mark and some silk above the copy */
}
/* the band variant: the canvas behind the closing call to action, a scrim heavier on the copy's side so the
   white reads over the sheen */
.band-silk { position: relative; overflow: hidden; }
.band-silk > .container { position: relative; z-index: 1; }
.band-silk::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(6, 22, 36, 0.52) 0%, rgba(6, 22, 36, 0.34) 50%, rgba(6, 22, 36, 0.22) 100%); }

/* ---------- the blue band ---------- */
.band {
  --on-blue: var(--white);
  --on-blue-soft: rgba(255, 255, 255, 0.82);
  --on-blue-mute: rgba(255, 255, 255, 0.8);
  --on-blue-label: #BEE3F3; /* sky lifted toward the ice, so a 12px label clears AA on the flat blue */
  --on-blue-rule: rgba(255, 255, 255, 0.24);
  background: var(--blue);
  color: var(--on-blue);
}
.band .display { color: var(--white); }
.band .display em { font-style: normal; color: var(--sky); }
.band .lede, .band .body, .band .body strong { color: var(--on-blue-soft); }
.band .label { color: var(--on-blue-label); }
.band :focus-visible, .departments :focus-visible, .close-panel :focus-visible { outline-color: var(--white); }

/* the closing call to action on every page */
.cta { padding: clamp(64px, 7vw, 96px) 0; }
.cta-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 32px clamp(40px, 6vw, 96px);
  align-items: end;
}
.cta-row .lede { margin-top: 18px; max-width: 40ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.cta-note { margin-top: 14px; font-size: 14px; color: var(--on-blue-mute); }
/* on the silk the ribbon under the note changes from frame to frame, so the note carries its own ink scrim */
.band-silk .cta-note { display: table; margin-left: auto; padding: 5px 10px 4px; color: var(--white); background: rgba(6, 22, 36, 0.55); }
@media (max-width: 960px) { .band-silk .cta-note { margin-left: 0; } }
.band .link-under, .band-silk .cta-note a { text-decoration-color: rgba(255, 255, 255, 0.6); }

/* ---------- the quote block ---------- */
.quote { padding: clamp(56px, 6vw, 88px) 0; }
.quote-text {
  font-family: var(--display);
  font-size: clamp(24px, 3.05vw, 44px);
  line-height: 1.2;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--blue);
  text-wrap: balance;
}
.quote-mark { color: var(--sky); }
.quote-key { font-weight: 600; color: var(--ink); }
.quote-who { display: grid; gap: 2px; margin-top: 28px; padding-top: 18px; position: relative; text-align: center; }
.quote-who::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 28px;
  height: 2px;
  background: var(--sky);
  transform: translateX(-50%);
}
.quote-name { font-weight: 600; letter-spacing: 0.01em; }
.quote-role { font-size: 15px; color: var(--ink-soft); }
/* a pull quote inside a page, left aligned, smaller */
.pull { padding: 8px 0 8px 28px; border-left: 2px solid var(--sky); }
.pull .quote-text { font-size: clamp(22px, 2.2vw, 30px); text-align: left; }
.pull .quote-who { text-align: left; padding-top: 12px; margin-top: 16px; }
.pull .quote-who::before { left: 0; transform: none; }

/* ---------- hatch art: the deck's line drawings ---------- */
.hatch { color: var(--blue); }
.hatch path, .hatch line { stroke: currentColor; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.hatch-sky { color: var(--sky); }
.hatch-white { color: rgba(255, 255, 255, 0.55); }
.hatch.draw path, .hatch.draw line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-out); }
.hatch.draw.is-in path, .hatch.draw.is-in line { stroke-dashoffset: 0; }
/* a hatched field: parallel lines as a fill, for frames and tiles */
.hatch-fill {
  background-image: repeating-linear-gradient(-45deg, var(--blue) 0 1px, transparent 1px 7px);
  opacity: 0.55;
}
.hatch-frame { /* where a photo will go: the mark on a hatched field */
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--ink-hair);
}
.hatch-frame .hatch-fill { position: absolute; inset: 0; }
.hatch-frame .np { position: absolute; left: 50%; top: 50%; width: 30%; height: auto; transform: translate(-50%, -50%); color: var(--blue); }
.hatch-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- forms ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); }
.field label .opt { font-weight: 500; letter-spacing: 0.08em; text-transform: none; color: var(--ink-mute); }
.field label .req { color: #A8322D; margin-left: -4px; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(6, 22, 36, 0.46);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.field textarea { min-height: 120px; resize: vertical; }
.field select {
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%232E5DA7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 12px;
}
.field select:invalid { color: var(--ink-mute); } /* the empty first option reads as a placeholder */
.field select option { color: var(--ink); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink-soft); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46, 93, 167, 0.18); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(6, 22, 36, 0.6); }
/* a browser's autofill paints its own tint over the field; the white and the ink stay */
.field input:-webkit-autofill, .field select:-webkit-autofill, .field textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--white) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); }
.field .err { display: none; font-size: 13px; color: #A8322D; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #A8322D; }
.field.is-invalid .err { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-done { display: none; padding: 24px 0 8px; }
.form-done .t1 { font-size: 22px; font-weight: 600; color: var(--ink); }
.form-done .t2 { margin-top: 6px; color: var(--ink-soft); }
.form-done .check { width: 28px; height: 28px; color: var(--green); margin-bottom: 14px; }
.form.is-done form { display: none; }
.form.is-done .form-done { display: block; }
.form-consent { font-size: 13px; line-height: 1.5; color: var(--ink-mute); text-wrap: pretty; }
.form-consent a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-rule); }
.form-consent a:hover { color: var(--blue); }
.form-error { display: none; margin-top: 4px; font-size: 14px; color: #A8322D; }
.form.has-error .form-error { display: block; }

/* ---------- what to expect: four short promises beside the booking form (contact) ---------- */
.expect { display: grid; gap: 18px; }
.expect li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; }
.expect .ico { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; background: var(--blue); color: var(--white); }
.expect .ico svg { width: 16px; height: 16px; }
.expect b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.expect p { margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }

/* ---------- the footer ---------- */
.site-footer { position: relative; z-index: 1; padding: clamp(48px, 6vw, 80px) 0 40px; border-top: 1px solid var(--ink-faint); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px clamp(32px, 4vw, 64px);
}
.footer-brand .brand-name { margin-top: 14px; }
.footer-brand p { margin-top: 14px; max-width: 30ch; font-size: 15px; color: var(--ink-soft); }
.footer-col .label { margin-bottom: 16px; }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { font-size: 15px; color: var(--ink); transition: color 0.2s var(--ease-out); }
.footer-col a:hover { color: var(--blue); }
.footer-col address { font-style: normal; font-size: 15px; line-height: 1.6; color: var(--ink); }
.footer-social { display: inline-flex; margin-top: 14px; width: 22px; height: 22px; color: var(--ink); transition: color 0.2s var(--ease-out); }
.footer-social svg { width: 22px; height: 22px; }
.footer-social:hover { color: var(--blue); }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--ink-faint);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.footer-legal a:hover { color: var(--blue); }

/* ---------- motion: the reveal on scroll ---------- */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: calc(var(--i, 0) * 0.08s); }
.js .rv.is-in { opacity: 1; transform: none; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .rail-line, .rail-dot { transition: none; }
  .rail .rail-line { transform: none; }
  .rail .rail-dot { background: var(--blue); border-color: var(--blue); color: var(--white); }
  .hatch.draw path, .hatch.draw line { stroke-dashoffset: 0; transition: none; }
  .brand-mark { animation: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .brand-mark { animation: rise 0.7s var(--ease-out) both; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .sec-split { grid-template-columns: 1fr; }
  .header-row { gap: 16px; }
  .header-row .button-small { padding: 13px 14px 12px; letter-spacing: 0.1em; }
  .site-nav { gap: 14px; }
  .site-nav a { letter-spacing: 0.12em; }
  .cta-row { grid-template-columns: 1fr; }
  .cta-actions { justify-content: flex-start; }
  .figs, .figs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figs-4 .fig:nth-child(3) { padding-left: 0; border-left: 0; }
  .figs .fig:nth-child(3) { padding-left: 0; border-left: 0; }
  .figs .fig:nth-child(n + 3) { padding-top: 20px; border-top: 1px solid var(--ink-faint); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .rail:not(.rail-v) { grid-template-columns: 1fr; gap: 0; }
  .rail:not(.rail-v)::before, .rail:not(.rail-v) .rail-line { left: calc(var(--rail-dot) / 2); right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; transform-origin: top; }
  .rail:not(.rail-v) .rail-line { transform: scaleY(0); }
  .rail:not(.rail-v).is-in .rail-line { transform: scaleY(1); }
  .rail:not(.rail-v) .rail-step { display: grid; grid-template-columns: var(--rail-dot) minmax(0, 1fr); gap: 18px; padding-bottom: 32px; }
  .rail:not(.rail-v) .rail-step:last-child { padding-bottom: 0; }
  .rail:not(.rail-v) .rail-title { margin-top: 3px; }
  .rail:not(.rail-v) .rail-step > :nth-child(n + 3) { grid-column: 2; }
}
@media (max-width: 720px) {
  :root { --header-h: auto; --stuck-h: 96px; }
  body { font-size: 16px; }
  .site-header { top: -18px; padding: 22px 0 14px; } /* rest box 114px; a 96px band stays pinned */
  .site-header.is-stuck .header-row { transform: translateY(5px); }
  .header-row { display: flex; flex-wrap: wrap; gap: 10px 14px; }
  .brand-mark { height: 38px; }
  .site-nav { order: 3; width: 100%; gap: 6px 14px; flex-wrap: wrap; }
  .site-nav a { padding: 4px 0; font-size: 12px; letter-spacing: 0.08em; }
  .header-row .button-small { margin-left: auto; padding: 12px 12px 11px; letter-spacing: 0.08em; }
  .display-1 { font-size: clamp(32px, 10.8vw, 54px); }
  .display-2 { font-size: clamp(32px, 9vw, 40px); }
  .lede { font-size: 1.125rem; }
  .lede-s { font-size: 1.0625rem; }
  .sec { padding: 56px 0; }
  .page-head { padding: 16px 0 40px; }
  .figs, .figs-2, .figs-4 { grid-template-columns: 1fr; gap: 20px; }
  .fig + .fig { padding-left: 0; padding-top: 20px; border-left: 0; border-top: 1px solid var(--ink-faint); }
  .figs .fig:nth-child(3) { padding-top: 20px; }
  .fig-value { font-size: 38px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .cta-actions .button { width: 100%; justify-content: center; }
  .quote-text { font-size: 26px; }
  .quote-text br { display: none; }
  .pull { padding-left: 18px; }
  .pull .quote-text { font-size: 21px; }
}
/* the narrowest phones: below 360px the four nav labels can no longer hold one line at 12px, so the row wraps
   and the header box tightens to keep the pinned band short (the stepper and every anchor read --stuck-h) */
@media (max-width: 359px) {
  :root { --stuck-h: 111px; }
  .site-header { padding: 16px 0 12px; }
  .brand-mark { height: 32px; }
  .brand-name { font-size: 17px; }
  .site-nav { gap: 2px 14px; }
}

/* ---------- key facts: four things that hold for every engagement, read in a glance (home, before the close). An
   icon, the label, the names as chips, one line. On the ground, under a rule; not a card. ---------- */
.facts { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--ink-rule); }
.fact { display: grid; gap: 12px; align-content: start; }
.fact-ico { width: 28px; height: 28px; color: var(--blue); }
.fact .label { font-size: 11.5px; letter-spacing: 0.18em; }
.fact-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.fact-chips li { padding: 5px 9px 4px; font-size: 13px; line-height: 1.2; color: var(--ink); border: 1px solid var(--ink-rule-strong); white-space: nowrap; }
.fact-line { font-size: 14px; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }
@media (max-width: 960px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; gap: 26px; } }