/* self-hosted so first paint never waits on a third-party round trip.
   Latin subset only: the content is English. Both files are variable —
   Archivo carries the wdth axis the headings depend on. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/sourceserif4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Johnson Tree Company — see DESIGN.md for the direction contract. */

:root {
  --ink: #11312B;
  --ink-deep: #0A211C;
  --ink-lift: #17413A;
  --signal: #FBDC34;
  --signal-dim: #7A6700;
  --paper: #F4F1E8;
  --bark: #32332F;
  --bark-soft: #5C5E57;
  --fog: #C7D4CF;
  --fog-dim: #9CB3AC;
  --frost: #E4EDE9;
  --signal-rgb: 251 220 52;
  --rule: rgb(var(--signal-rgb) / 0.22);
  --rule-strong: rgb(var(--signal-rgb) / 0.28);
  --rule-dark: rgba(17, 49, 43, 0.16);
  --edge: #7E8F89;
  --ink-deep-rgb: 10 33 28;      /* the scrims and shadows are all this colour */
  --headline: #fff;              /* the tier above --frost, on forest only */
  --signal-hot: #fff0a0;         /* the hover step above --signal */
  --ink-on-signal: #23401d;      /* body ink on the yellow closing band */
  --veil: rgb(var(--ink-deep-rgb) / 0.94);
  --error-face: #FFC9B0;
  --error-ink: #B3402A;
  --error-edge: #E07A5F;

  --shell: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dock-lift: clamp(80px, 15vw, 132px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (max-width: 900px) { html { scroll-padding-top: 160px; } }
@media (max-width: 640px) { html { scroll-padding-top: 96px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fog);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 800;
  font-variation-settings: "wdth" 116;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--signal); color: var(--ink-deep);
  padding: 0.7rem 1.1rem; font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgb(var(--ink-deep-rgb) / 0.92);
  border-bottom: 1px solid var(--rule);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .masthead { -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); }
}
.masthead__row {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 74px;
}
.mark {
  display: flex; align-items: center; gap: 0.9rem;
  text-decoration: none; flex: none;
  padding-right: 0.9rem; border-right: 1px solid var(--rule);
}
.mark img { width: 104px; height: auto; }
.mark__est {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--signal);
  line-height: 1.5; white-space: nowrap;
}
.mark__est span { display: block; color: var(--fog); font-weight: 500; }
.mark--foot { border-right: 0; padding-right: 0; }
.mark--foot img { width: 148px; }

.nav { display: flex; gap: clamp(0.9rem, 2.2vw, 1.9rem); margin-left: auto; align-items: center; }
.nav a {
  text-decoration: none; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog);
  padding: 0.4rem 0; border-bottom: 2px solid transparent;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.nav a:hover { color: var(--signal); }
.nav a[aria-current="page"] { color: var(--signal); border-bottom-color: var(--signal); }

.callbtn {
  flex: none; display: inline-flex; align-items: baseline; gap: 0.5rem;
  min-height: 44px;
  background: var(--signal); color: var(--ink-deep);
  text-decoration: none; padding: 0.72rem 1.05rem; border-radius: 2px;
  font-weight: 800; font-size: 0.98rem; letter-spacing: -0.01em;
  font-variation-settings: "wdth" 110;
  transition: transform 160ms var(--ease), background 160ms var(--ease);
}
.callbtn small { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; opacity: 0.68; }
.callbtn:hover { background: var(--signal-hot); transform: translateY(-1px); }
.callbtn:active { transform: translateY(0); }

@media (max-width: 1100px) and (min-width: 901px) {
  /* the row is tight here: the button keeps the number, drops the label */
  .masthead__row { gap: 1rem; }
  .masthead__row .callbtn small { display: none; }
  .nav { gap: 1rem; }
}

@media (max-width: 900px) {
  /* nav drops to its own row under the mark rather than disappearing */
  .masthead__row { flex-wrap: wrap; row-gap: 0; padding-block: 0.5rem; min-height: 0; }
  .mark { margin-right: auto; }
  .nav {
    order: 3; width: 100%; margin-left: 0;
    justify-content: space-between; gap: 0.5rem;
    border-top: 1px solid var(--rule); padding-top: 0.35rem; margin-top: 0.4rem;
  }
  .nav a { font-size: 0.74rem; letter-spacing: 0.08em; display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  .masthead__row .callbtn small { display: none; }
  .masthead__row .callbtn { padding: 0.55rem 0.8rem; font-size: 0.9rem; }
}

/* mobile call bar */
.callbar {
  display: none;
  position: fixed; inset: auto 0 0 0; z-index: 45;
  background: var(--signal); color: var(--ink-deep);
  text-align: center; text-decoration: none;
  padding: 0.95rem 1rem; font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 -6px 24px rgb(var(--ink-deep-rgb) / 0.35);
}
@media (max-width: 640px) {
  .callbar { display: block; }
  body { padding-bottom: 3.6rem; }
  .masthead__row .callbtn { display: none; }
}

/* ------------------------------------------------------------------- hero */

.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-deep); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(190deg, rgb(var(--ink-deep-rgb) / 0.82) 0%, rgb(var(--ink-deep-rgb) / 0.66) 44%, rgb(var(--ink-deep-rgb) / 0.92) 84%),
    linear-gradient(90deg, rgb(var(--ink-deep-rgb) / 0.62) 0%, rgb(var(--ink-deep-rgb) / 0.28) 58%, rgb(var(--ink-deep-rgb) / 0) 88%);
}
.hero__inner { padding-block: clamp(2.2rem, 6vh, 3.6rem) calc(var(--dock-lift) + clamp(2.4rem, 4vh, 3.4rem)); }

.hero__eyebrow {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--signal); margin: 0 0 1.4rem;
}
.hero h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  color: var(--headline); max-width: none; margin-bottom: 1.1rem;
}
.hero h1 span { display: block; }
.hero__lede {
  font-family: var(--serif); font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.58; max-width: 46ch; color: var(--frost); margin: 0 0 1.9rem;
}
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: center;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: var(--fog);
  border-top: 1px solid var(--rule); padding-top: 0.85rem; margin-top: 1.5rem;
}
.hero__trust li { list-style: none; }
.hero__trust ul { display: contents; }

/* the authored moment: canopy wipe, once, content visible by default */
@media (prefers-reduced-motion: no-preference) {
  .hero__media { animation: canopy 1100ms var(--ease) both; }
  @keyframes canopy {
    from { clip-path: ellipse(120% 0% at 50% 0%); transform: scale(1.06); }
    to   { clip-path: ellipse(160% 140% at 50% 0%); transform: scale(1); }
  }
}

/* ---------------------------------------------------------------- router */

.router { background: var(--ink-lift); border-top: 1px solid var(--rule); }
.router__inner { padding-block: clamp(2rem, 4vw, 3rem) clamp(2.8rem, 6vw, 4.4rem); }
.router h2 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); color: var(--headline); margin-bottom: 0.5rem; }
.router__hint { font-size: 0.95rem; color: var(--fog); margin: 0 0 1.3rem; max-width: 60ch; }

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 0 0 2rem; list-style: none; }
.chip {
  font: inherit; font-size: 0.92rem; font-weight: 600;
  background: transparent; color: var(--fog);
  border: 1px solid var(--edge); border-radius: 999px;
  padding: 0.68rem 1.15rem; min-height: 44px; cursor: pointer;
  display: inline-flex; align-items: center; text-align: left; text-decoration: none;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.chip:hover { border-color: var(--signal); color: var(--headline); }
.dx + .dx { border-top: 1px solid var(--rule); }
.chip[aria-selected="true"] { background: var(--signal); color: var(--ink-deep); border-color: var(--signal); font-weight: 700; }

[hidden] { display: none !important; }

.dx {
  border-top: 1px solid var(--rule); padding-top: 1.9rem;
  display: grid; gap: clamp(1.4rem, 4vw, 3rem); grid-template-columns: 1.15fr 0.85fr;
  align-items: start;
}
@media (max-width: 760px) { .dx { grid-template-columns: 1fr; } }
.dx h3 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); color: var(--signal); margin-bottom: 0.7rem; }
.dx p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.65; color: var(--frost); margin: 0 0 1.2rem; max-width: 60ch; }
.dx__checks { margin: 0; padding: 0; list-style: none; }
.dx__checks li {
  font-size: 0.95rem; color: var(--fog); padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem;
}
.dx__checks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.7rem; height: 1px; background: var(--signal);
}
.dx__aside {
  border-left: 1px solid var(--rule); padding-left: clamp(1rem, 3vw, 2rem);
}
@media (max-width: 760px) { .dx__aside { border-left: 0; border-top: 1px solid var(--rule); padding: 1.4rem 0 0; } }
.dx__aside p { font-family: var(--sans); font-size: 0.95rem; color: var(--fog); }
.dx[data-swap] { animation: swap 200ms var(--ease) both; }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dx[data-swap] { animation: none; } }

/* ---------------------------------------------------------------- sections */

.band { padding-block: clamp(3.4rem, 8vw, 6.4rem); }
.band--paper { background: var(--paper); color: var(--bark); }
.band--paper h2, .band--paper h3 { color: var(--ink); }
.band--deep { background: var(--ink-deep); }

.band__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.svchead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 2.5rem; flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.svchead .band__head { margin-bottom: 0; }
.svchead .creds--inline { border-top: 0; padding-top: 0; margin: 0; flex: none; }
@media (max-width: 720px) {
  .svchead { align-items: flex-start; }
  .svchead .creds--inline img { height: 84px; }
}

.band__head h2 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); color: var(--headline); margin-bottom: 0.9rem; }
.band--paper .band__head h2 { color: var(--ink); }
.band__head p { font-family: var(--serif); font-size: 1.1rem; line-height: 1.68; margin: 0; }
.band--paper .band__head p { color: var(--bark-soft); }

.kicker {
  display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--signal); margin-bottom: 1rem;
}
.band--paper .kicker { color: var(--signal-dim); }

/* service list — a ruled index, not cards */
.router__areas { margin: -1.2rem 0 2rem; font-weight: 600; }
.router__areas a { color: var(--signal); text-underline-offset: 4px; }
.services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-dark); }
.band--deep .services, .band:not(.band--paper) .services { border-top-color: var(--rule); }
.services > li { border-bottom: 1px solid var(--rule-dark); }
.band:not(.band--paper) .services > li { border-bottom-color: var(--rule); }
.services a {
  display: grid; grid-template-columns: 3.2rem 1fr minmax(0, 1.5fr) auto;
  gap: clamp(0.8rem, 2.5vw, 2rem); align-items: baseline;
  padding: 1.5rem 0; text-decoration: none; color: inherit;
  transition: transform 200ms var(--ease), color 160ms var(--ease);
}
.services a:hover { transform: translateX(0.6rem); color: var(--ink); }
.band:not(.band--paper) .services a:hover { color: var(--headline); }
.services .num {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--signal-dim); font-variant-numeric: tabular-nums;
}
.band:not(.band--paper) .services .num { color: var(--signal); }
.services h3 { font-size: clamp(1.15rem, 2.2vw, 1.55rem); }
.services p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--bark-soft); }
.band:not(.band--paper) .services p { color: var(--fog); }
.services .arrow { color: var(--signal-dim); font-weight: 700; }
.band:not(.band--paper) .services .arrow { color: var(--signal); }
@media (max-width: 760px) {
  .services a { grid-template-columns: 2.4rem 1fr; }
  .services p { grid-column: 2; }
  .services .arrow { display: none; }
}

/* photo strip */
.strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.strip figure { margin: 0; position: relative; overflow: hidden; background: var(--ink-deep); }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.strip a:hover img, .strip figure:hover img { transform: scale(1.04); }
.strip .w6 { grid-column: span 6; aspect-ratio: 3 / 2; }
.strip .w4 { grid-column: span 4; aspect-ratio: 3 / 2; }
.strip .w12 { grid-column: span 12; aspect-ratio: 21 / 9; }
@media (max-width: 760px) {
  .strip .w6, .strip .w4 { grid-column: span 6; aspect-ratio: 1; }
  .strip .w12 { aspect-ratio: 4 / 3; }
}

/* split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split__media { min-height: 380px; position: relative; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__body { padding: clamp(2.2rem, 6vw, 4.6rem); display: flex; flex-direction: column; justify-content: center; }
.split__body h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin-bottom: 1.1rem; }
.split__body p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.7; max-width: 58ch; }

/* quotes */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }
.quote { margin: 0; border-top: 1px solid var(--rule); padding-top: 1.6rem; }
.band--paper .quote { border-top-color: var(--rule-dark); }
.quote blockquote { margin: 0 0 1.2rem; font-family: var(--serif); font-size: 1.12rem; line-height: 1.68; color: var(--frost); }
.band--paper .quote blockquote { color: var(--bark); }
.quote figcaption { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); }
.band--paper .quote figcaption { color: var(--signal-dim); }

/* faq */
.faq { border-top: 1px solid var(--rule-dark); }
.band:not(.band--paper) .faq { border-top-color: var(--rule); }
.faq details { border-bottom: 1px solid var(--rule-dark); }
.band:not(.band--paper) .faq details { border-bottom-color: var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.35rem 2.5rem 1.35rem 0; position: relative;
  font-weight: 700; font-size: clamp(1.02rem, 2vw, 1.22rem); font-variation-settings: "wdth" 112;
  letter-spacing: -0.015em; color: var(--ink);
}
.band:not(.band--paper) .faq summary { color: var(--headline); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 1.1rem;
  font-size: 1.5rem; font-weight: 400; color: var(--signal-dim); line-height: 1;
  transition: transform 220ms var(--ease);
}
.band:not(.band--paper) .faq summary::after { color: var(--signal); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 2.5rem 1.6rem 0; }
.faq .answer p { font-family: var(--serif); font-size: 1.05rem; line-height: 1.7; margin: 0 0 0.9rem; max-width: 66ch; color: var(--bark-soft); }
.band:not(.band--paper) .faq .answer p { color: var(--frost); }

/* long-form prose */
.prose { font-family: var(--serif); font-size: 1.14rem; line-height: 1.74; max-width: 66ch; }
.prose p { margin: 0 0 1.35rem; }
.prose p:first-of-type::first-letter {
  float: left; font-family: var(--sans); font-weight: 800; font-size: 3.6rem;
  line-height: 0.82; padding: 0.06em 0.14em 0 0; color: var(--signal-dim);
}
.band:not(.band--paper) .prose p:first-of-type::first-letter { color: var(--signal); }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 2.8rem 0 1rem; }

/* closing call */
.close { background: var(--signal); color: var(--ink-deep); }
.close__inner {
  padding-block: clamp(3rem, 7vw, 5.4rem);
  display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between;
}
.close h2 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); color: var(--ink-deep); max-width: 18ch; }
.close p { margin: 0.8rem 0 0; font-family: var(--serif); font-size: 1.1rem; color: var(--ink-on-signal); max-width: 44ch; }
.close__num {
  font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -0.035em;
  font-variation-settings: "wdth" 118; color: var(--ink-deep); text-decoration: none;
  display: inline-block; border-bottom: 4px solid var(--ink-deep); line-height: 1.15;
  min-height: 44px;
}
.close__num:hover { opacity: 0.78; }
.close small { display: block; font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; margin-top: 0.7rem; color: var(--ink-on-signal); }

/* footer */
.foot { background: var(--ink-deep); border-top: 1px solid var(--rule); }
.foot__inner { padding-block: clamp(2.6rem, 6vw, 4rem); display: grid; gap: 2.4rem; grid-template-columns: 1.2fr 1fr 1fr 1.3fr; }
@media (max-width: 860px) { .foot__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__inner { grid-template-columns: 1fr; } }
.foot h3 { font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal); margin-bottom: 1rem; font-weight: 700; font-variation-settings: "wdth" 106; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.55rem; font-size: 0.95rem; }
.foot a { color: var(--fog); text-decoration: none; }
.foot a:hover { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.foot address { font-style: normal; font-size: 0.95rem; line-height: 1.65; color: var(--fog); }
.foot__legal {
  border-top: 1px solid var(--rule); padding-block: 1.4rem 2rem;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; justify-content: space-between;
  font-size: 0.8rem; color: var(--fog-dim);
}

/* page header (interior pages) */
.pagehead { background: var(--ink-deep); border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.pagehead__inner { padding-block: clamp(3rem, 8vw, 5.2rem); position: relative; z-index: 1; }
.pagehead h1 { font-size: clamp(2.2rem, 6vw, 4.4rem); color: var(--headline); max-width: 18ch; margin-bottom: 1.1rem; }
.pagehead p { font-family: var(--serif); font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.62; max-width: 56ch; margin: 0; color: var(--frost); }
.pagehead__bg { position: absolute; inset: 0; z-index: 0; }
.pagehead__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.pagehead__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgb(var(--ink-deep-rgb) / 0.94) 0%, rgb(var(--ink-deep-rgb) / 0.84) 44%, rgb(var(--ink-deep-rgb) / 0.42) 100%);
}

.crumbs { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog-dim); margin: 0 0 1.4rem; }
.crumbs a { color: var(--signal); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* contact form */
.form { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; max-width: 640px; }
@media (max-width: 620px) { .form { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); }
.field input, .field textarea, .field select, .field option {
  font: inherit; font-size: 1rem; color: var(--headline);
  background: var(--ink-lift); border: 1px solid var(--edge); border-radius: 2px;
  padding: 0.8rem 0.9rem; min-height: 46px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--fog-dim); }
.field textarea { min-height: 150px; resize: vertical; }
.form button {
  grid-column: 1 / -1; justify-self: start;
  font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer;
  background: var(--signal); color: var(--ink-deep);
  border: 0; border-radius: 2px; padding: 0.85rem 1.8rem;
  transition: background 160ms var(--ease);
}
.form button:hover { background: var(--signal-hot); }
.form .formnote { grid-column: 1 / -1; font-family: var(--sans); font-size: 0.86rem; color: var(--fog-dim); margin: 0; }
.form .formstatus { grid-column: 1 / -1; margin: 0; font-family: var(--sans); font-size: 0.95rem; color: var(--signal); font-weight: 600; max-width: none; }
.form .formstatus:empty { margin: 0; }   /* stays rendered so role="status" announces */

/* gallery grid + lightbox */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 3px; }

.grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease), opacity 300ms var(--ease); }
.grid .tile:hover img { transform: scale(1.05); }

dialog.lightbox {
  border: 0; padding: 0; margin: 0; background: transparent;
  max-width: 100vw; max-height: 100vh; width: 100vw; height: 100dvh;
}
dialog.lightbox::backdrop { background: var(--veil); }
dialog.lightbox:focus { outline: none; }
dialog.lightbox:focus-visible { outline: 3px solid var(--signal); outline-offset: -4px; }
.lightbox__frame { display: flex; flex-direction: column; height: 100%; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); gap: 1rem; }
.lightbox img { max-height: 78vh; width: auto; max-width: 100%; object-fit: contain; }
.lightbox figcaption { color: var(--fog); font-size: 0.92rem; text-align: center; max-width: 60ch; }
.lightbox__close {
  position: absolute; top: 1rem; right: 1rem; font: inherit; font-weight: 800;
  background: var(--signal); color: var(--ink-deep); border: 0; border-radius: 2px;
  padding: 0.55rem 0.95rem; cursor: pointer;
}

/* video */
.videoblock { position: relative; aspect-ratio: 16 / 9; background: var(--ink-deep); overflow: hidden; }
.videoblock img, .videoblock iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.videoblock button {
  position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer;
  background: rgb(var(--ink-deep-rgb) / 0.42); border: 0; display: grid; place-items: center;
  transition: background 220ms var(--ease);
}
.videoblock button:hover { background: rgb(var(--ink-deep-rgb) / 0.24); }
.videoblock .play {
  display: inline-flex; align-items: center; gap: 0.8rem;
  background: var(--signal); color: var(--ink-deep); padding: 0.85rem 1.5rem; border-radius: 2px;
  font-weight: 800; font-size: 1rem; letter-spacing: 0.02em;
}

/* the ISA credentials, carried over from the client's own home page */
.creds {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem;
  list-style: none; padding: 0; margin: 0 0 2.4rem;
  border-top: 1px solid var(--rule-dark); padding-top: 1.4rem;
  max-width: 34rem;   /* a rule only as long as the content under it */
}
.creds img { display: block; height: 128px; width: auto; }
.creds__text {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bark-soft); max-width: 26ch; line-height: 1.5;
}
.band:not(.band--paper) .creds { border-top-color: var(--rule); }
.band:not(.band--paper) .creds__text { color: var(--fog); }
@media (max-width: 560px) {
  .creds { gap: 0.8rem 1rem; }
  .creds img { height: 104px; }
  .creds__text { max-width: none; flex-basis: 100%; }
}

/* areas */
.areas { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.areas li {
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.5rem 1rem;
  font-size: 0.88rem; color: var(--fog);
}
.band--paper .areas li { border-color: var(--rule-dark); color: var(--bark-soft); }

/* service entries — a ruled two-column index, not cards */
.svc {
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  border-top: 1px solid var(--rule-dark);
  padding-top: 1.9rem; margin-top: 2.4rem;
}
.band:not(.band--paper) .svc { border-top-color: var(--rule); }
.svc:first-of-type { margin-top: 0; }
@media (max-width: 820px) { .svc { grid-template-columns: 1fr; gap: 0.9rem; } }
.svc h2, .svc h3 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0; }
.band:not(.band--paper) .svc h2, .band:not(.band--paper) .svc h3 { color: var(--headline); }
.svc__body { font-family: var(--serif); font-size: 1.08rem; line-height: 1.72; max-width: 64ch; }
.svc__body p { margin: 0 0 1.1rem; }
.svc__body p:last-child { margin-bottom: 0; }
.band--paper .svc__body { color: var(--bark-soft); }
.band:not(.band--paper) .svc__body { color: var(--frost); }

/* the mark at scale, once per page, as a watermark in the closing band */
.close { position: relative; overflow: hidden; }
.close__watermark {
  position: absolute; right: 2%; top: 50%; transform: translateY(-50%);
  width: min(26vw, 300px); height: auto;
  opacity: 0.12; pointer-events: none; z-index: 0;
  filter: brightness(0) saturate(100%);
}
.close__inner { position: relative; z-index: 1; }
@media (max-width: 760px) { .close__watermark { width: 62vw; right: -14%; opacity: 0.09; } }

/* the third generation, with a face attached */
.portrait { float: right; width: min(38%, 22rem); margin: 0.4rem 0 1.6rem 2.4rem; }
.portrait__fig { margin: 0; }
.portrait__fig img { width: 100%; height: auto; }
.portrait__fig figcaption {
  font-family: var(--sans); font-size: 0.78rem; line-height: 1.5;
  letter-spacing: 0.02em; color: var(--fog);
  border-top: 1px solid var(--rule); padding-top: 0.6rem; margin-top: 0.7rem;
}
.band--paper .portrait__fig figcaption { color: var(--bark-soft); border-top-color: var(--rule-dark); }
@media (max-width: 720px) {
  .portrait { float: none; width: 100%; margin: 0 0 2rem; }
}

/* form validation: visible, persistent, announced */
.field .req { color: var(--signal); font-weight: 700; }
.field .hint { font-family: var(--sans); font-size: 0.8rem; color: var(--fog-dim); }
.field .err {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--error-face);
  display: none; align-items: center; gap: 0.4rem;
}
.field .err::before { content: "!"; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 999px; background: var(--error-ink); color: var(--headline); font-size: 0.72rem; flex: none; }
.field [aria-invalid="true"] { border-color: var(--error-edge); }
.field [aria-invalid="true"] ~ .err { display: flex; }

/* the contact page borrows the router's two-column grid, without its rules */
.dx--plain { border-top: 0; padding-top: 0; }

/* the router closes on the phone, not on a link */
.dx__points { font-size: 0.88rem !important; color: var(--fog-dim) !important; margin-bottom: 1.1rem !important; }
.dx__ask { font-family: var(--sans) !important; font-size: 1rem !important; line-height: 1.5 !important; color: var(--headline) !important; margin-bottom: 1rem !important; }
.callbtn--dx {
  flex-direction: column; align-items: flex-start; gap: 0.15rem;
  font-size: 1.28rem; padding: 0.8rem 1.15rem; letter-spacing: -0.02em;
}
.callbtn--dx small { font-size: 0.68rem; opacity: 0.72; }
.dx__read { font-family: var(--sans) !important; font-size: 0.9rem !important; margin: 1.1rem 0 0 !important; }
.dx__read a { color: var(--signal) !important; text-underline-offset: 3px; }

/* mobile: one header row, one yellow call surface, less chrome */
@media (max-width: 640px) {
  .masthead__row { flex-wrap: nowrap; row-gap: 0; padding-block: 0.35rem; }
  .nav { gap: 0.55rem; }
  .mark { border-right: 0; padding-right: 0; }
  .mark img { width: 86px; }
  .mark__est { display: none; }
  .nav {
    order: 0; width: auto; margin-left: auto; border-top: 0; padding-top: 0; margin-top: 0;
    gap: 0.62rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { font-size: 0.66rem; letter-spacing: 0.02em; min-height: 44px; white-space: nowrap; }
  .hero .callbtn { display: none; }          /* the fixed call bar already owns this */
  /* the router is the thesis; it has to be reachable in the first screen */
  .hero__inner { padding-block: 1.2rem calc(var(--dock-lift) + 1.9rem); }
  .hero h1 { font-size: 2.15rem; margin-bottom: 0.7rem; }
  .hero__lede { font-size: 0.98rem; margin-bottom: 0.85rem; }
  .hero__eyebrow { font-size: 0.7rem; margin-bottom: 0.55rem; }
  .hero__trust { margin-top: 0.65rem; padding-top: 0.55rem; gap: 0.35rem 1rem; font-size: 0.7rem; }
  .filmdock { padding-bottom: 0.9rem; }
  .router__inner { padding-block: 0.9rem 2.4rem; }
  .router h2 { margin-bottom: 0.35rem; }
  .router__hint { margin-bottom: 0.8rem; }
  .chip { min-height: 44px; padding: 0.6rem 1rem; font-size: 0.88rem; }
}

/* lightbox: move between photographs without closing */
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  font: inherit; font-size: 1.4rem; font-weight: 700; line-height: 1;
  background: var(--signal); color: var(--ink-deep); border: 0; border-radius: 2px;
  width: 48px; height: 56px; cursor: pointer;
}
.lightbox__nav[data-dir="prev"] { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__nav[data-dir="next"] { right: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__nav:hover { background: var(--signal-hot); }
.lightbox__count {
  position: absolute; left: 1rem; top: 1rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--fog); font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .lightbox__nav { top: auto; bottom: 1rem; transform: none; }
}

/* gallery tiles are links first, dialog triggers second */
.grid .tile {
  display: block; overflow: hidden; background: var(--ink-deep);
  aspect-ratio: 3 / 2; cursor: zoom-in; text-decoration: none;
}
.formlegend { grid-column: 1 / -1; font-family: var(--sans); font-size: 0.86rem; color: var(--fog-dim); margin: 0 0 0.2rem; }

/* the portrait is the film, as it is on the company's own history page */
.videoblock--portrait { aspect-ratio: 3 / 2; }
.videoblock--portrait button { background: rgb(var(--ink-deep-rgb) / 0.18); }
.videoblock--portrait button:hover { background: rgb(var(--ink-deep-rgb) / 0.06); }
.videoblock .play--disc {
  display: grid; place-items: center; gap: 0;
  width: 68px; height: 68px; border-radius: 999px;
  background: var(--signal); color: var(--ink-deep);
  font-size: 1.5rem; padding: 0 0 0 5px; line-height: 1;
  box-shadow: 0 6px 22px rgb(var(--ink-deep-rgb) / 0.45);
  transition: transform 220ms var(--ease);
}
.videoblock--portrait button:hover .play--disc { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) {
  .videoblock--portrait button:hover .play--disc { transform: none; }
}
.portrait__cue { display: block; color: var(--signal); font-weight: 600; margin-top: 0.25rem; }
.band--paper .portrait__cue { color: var(--signal-dim); }
.videofallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--ink-deep); color: var(--signal);
  font-weight: 700; font-size: 1rem; text-decoration: none; text-align: center; padding: 1rem;
}
.videofallback:hover { text-decoration: underline; text-underline-offset: 4px; }

/* first screen: the headline and the film, and nothing else, on a desktop screen.
   --mast-h and --hero-h are measured by site.js, because the masthead wraps at
   some widths and the headline wraps at others. The fallbacks are sane if JS
   never runs: the page simply scrolls as it always did. */
/* on every screen the film band runs to the fold, so the next section starts
   below it. The card itself only grows to fill on desktop, below. */
.stage .filmdock {
  min-height: calc(100vh - var(--mast-h, 5.5rem) - var(--hero-h, 26rem));
  min-height: calc(100svh - var(--mast-h, 5.5rem) - var(--hero-h, 26rem));
}

/* phones: the card sits in the middle of that band rather than at its top */
@media (max-width: 759px) {
  .stage .filmdock {
    display: flex; flex-direction: column; justify-content: center;
    /* the fixed call bar sits over the bottom of the screen */
    min-height: calc(100vh - var(--mast-h, 5.5rem) - var(--hero-h, 26rem) - 3.6rem);
    min-height: calc(100svh - var(--mast-h, 5.5rem) - var(--hero-h, 26rem) - 3.6rem);
  }
  .stage .herofilm { margin-top: 0; }
}

@media (min-width: 760px) and (min-height: 620px) {
  .stage .hero__inner { padding-block: clamp(1.6rem, 4vh, 3rem) calc(var(--dock-lift) + clamp(1.6rem, 3vh, 2.6rem)); }
  .stage .herofilm {
    width: auto; max-width: min(1100px, 100%);
    aspect-ratio: 16 / 9;
    height: clamp(
      200px,
      calc(100svh - var(--mast-h, 5.5rem) - var(--hero-h, 26rem) + var(--dock-lift) - clamp(1.6rem, 4vw, 2.8rem)),
      760px
    );
  }
  .stage .herofilm .videoblock { height: 100%; }
  .stage .herofilm .videoblock img { width: 100%; height: 100%; object-fit: cover; }
  .stage .herofilm .videoblock iframe { width: 100%; height: 100%; aspect-ratio: auto; }
}

/* the film sits under the headline and straddles the seam, as it did on the old home page */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.1rem; }

.filmdock {
  position: relative; z-index: 2;      /* the hero is a positioned element; outrank it */
  display: flow-root;                  /* keep the card's negative margin off the dock itself */
  background: var(--ink-lift);
  padding-bottom: clamp(1.6rem, 4vw, 2.8rem);
}
.filmdock + .router { border-top: 0; }
.herofilm {
  width: min(760px, 100%); margin: calc(-1 * var(--dock-lift)) auto 0;
  padding: 12px; background: var(--ink-deep);   /* the mat is what lifts it off the band */
  box-shadow: 0 30px 70px rgb(var(--ink-deep-rgb) / 0.55);
}
.videoblock--card { border: 1px solid var(--rule-strong); }
.videoblock--card button {
  background: rgb(var(--ink-deep-rgb) / 0.34);
  place-items: end start;   /* the poster's own mark is centred; keep off it */
  padding: 0 0 clamp(16px, 3vw, 26px) clamp(16px, 3vw, 26px);
}
.videoblock--card button:hover { background: rgb(var(--ink-deep-rgb) / 0.16); }
.videoblock--card button:hover .play--disc { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) {
  .videoblock--card button:hover .play--disc { transform: none; }
  .strip img, .grid img, .services a, .callbtn { transition: none; }
  .strip figure:hover img, .grid .tile:hover img { transform: none; }
  .faq summary::after { transition: none; }
}

/* the narrowest phones: the nav has to fit Contact, so the mark gives up the room */
@media (max-width: 374px) {
  .mark img { width: 64px; }
  .nav { gap: 0.45rem; }
  .nav a { font-size: 0.6rem; letter-spacing: 0; }
}