/* ==========================================================================
   AcuTwin site styles
   Palette and variable names are prescribed by the AcuTwin brand system.
   Brass is the signature accent only. Never body text.
   Photographs are motionless; motion belongs to link affordances and reveals.
   ========================================================================== */

/* Both families ship as variable fonts (Inter wght 100-900, Cormorant 300-700),
   so one file serves every weight. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/CormorantGaramond-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/CormorantGaramond-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/Inter-400.woff2') format('woff2');
}

:root {
  --acutwin-midnight: #253143;
  --acutwin-brass: #9B7846;
  --acutwin-warm-ivory: #F4F0E9;
  --acutwin-white: #FFFFFF;

  --midnight-deep: #1A2331;
  --ivory-soft: #FAF8F4;

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;

  /* 1.25 modular scale, fluid 360 -> 1440, rem + vw so browser zoom is honored */
  --s-1: 0.875rem;
  --s0: 1.0625rem;
  --s1: clamp(1.1875rem, 1.14rem + 0.21vw, 1.3125rem);
  --s2: clamp(1.5rem, 1.395rem + 0.46vw, 1.8125rem);
  --s3: clamp(1.625rem, 1.475rem + 0.67vw, 2.075rem);
  --s4: clamp(1.875rem, 1.635rem + 1.06vw, 2.594rem);
  --s5: clamp(2.125rem, 1.75rem + 1.66vw, 3.25rem);
  --s6: clamp(2.5rem, 1.98rem + 2.3vw, 4.0625rem);
  --s7: clamp(2.75rem, 2.25rem + 2.22vw, 4.25rem);

  --measure: 58ch;
  --container: 1620px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4rem, 9vw, 7.5rem);
  --section-pad-tight: clamp(2.75rem, 6vw, 5rem);
  --section-pad-loose: clamp(5rem, 11vw, 9.5rem);

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --lift: 0 14px 34px rgba(37, 49, 67, 0.1);

  /* Derived tints: Midnight and Ivory only, mixed with each other or white. */
  --ink-soft: rgba(37, 49, 67, 0.78);
  --ink-faint: rgba(37, 49, 67, 0.14);
  --hairline: rgba(37, 49, 67, 0.16);
  --rule-faint: rgba(37, 49, 67, 0.042);
  --grid: 34px;

  --photo-grade: saturate(0.82) contrast(1.03);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }

body {
  font-family: var(--font-body);
  font-size: var(--s0);
  line-height: 1.6;
  font-kerning: normal;
  font-feature-settings: 'kern' 1, 'liga' 1;
  color: var(--acutwin-midnight);
  background: var(--acutwin-warm-ivory);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; }

::selection { background: rgba(155, 120, 70, 0.25); }
.proof-panel ::selection,
.site-footer ::selection,
.quote-band ::selection,
.closing-band ::selection { background: rgba(155, 120, 70, 0.55); color: var(--acutwin-white); }

:focus-visible {
  outline: 2px solid var(--acutwin-brass);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3.5rem;
  z-index: 100;
  background: var(--acutwin-midnight);
  color: var(--acutwin-white);
  padding: 0.7rem 1.2rem;
  border-radius: 2px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus-visible { top: 1rem; }

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

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  text-wrap: balance;
}

h1 { font-size: var(--s6); line-height: 1.05; letter-spacing: -0.014em; }
h2 { font-size: var(--s5); line-height: 1.08; letter-spacing: -0.008em; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: '';
  width: 2rem;
  height: 2px;
  background: var(--acutwin-brass);
}

.lede {
  font-size: var(--s1);
  line-height: 1.55;
  letter-spacing: -0.003em;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
  background: rgba(244, 240, 233, 0.8);
  -webkit-backdrop-filter: saturate(1.12) blur(12px);
          backdrop-filter: saturate(1.12) blur(12px);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--acutwin-warm-ivory); }
}
.site-header.is-scrolled {
  background: rgba(244, 240, 233, 0.92);
  box-shadow: 0 1px 0 var(--hairline), 0 10px 30px rgba(37, 49, 67, 0.07);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 5.25rem;
  transition: min-height 0.3s var(--ease);
}
.site-header.is-scrolled .container { min-height: 4.25rem; }

.logo-link { flex-shrink: 0; }
.logo-link img { width: clamp(160px, 18vw, 208px); height: auto; transition: width 0.3s var(--ease); }
.site-header.is-scrolled .logo-link img { width: clamp(160px, 15vw, 176px); }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2rem);
}

.site-nav a {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.35rem 0 0.5rem;
  white-space: nowrap;
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--acutwin-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current='page']::after { transform: scaleX(1); }

.site-nav .nav-cta {
  background: var(--acutwin-midnight);
  color: var(--acutwin-white);
  padding: 0.7rem 1.35rem;
  border-radius: 2px;
  transition: background 0.18s var(--ease), box-shadow 0.22s var(--ease);
}
.site-nav .nav-cta::after { display: none; }
.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
  background: var(--midnight-deep);
  box-shadow: 0 8px 22px rgba(37, 49, 67, 0.18);
}

.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle {
    display: block;
    background: none;
    border: 1px solid var(--hairline);
    border-radius: 2px;
    min-height: 44px;
    padding: 0.5rem 1rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--acutwin-midnight);
    cursor: pointer;
  }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--acutwin-warm-ivory);
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--ink-faint); }
  .site-nav a::after { display: none; }
  .site-nav a[aria-current='page'] { border-bottom-color: var(--acutwin-brass); }
  .site-nav .nav-cta { margin-top: 1rem; text-align: center; border-bottom: none; }
}

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.95rem 1.9rem;
  border-radius: 2px;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
    border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), transform 0.12s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--acutwin-midnight);
  color: var(--acutwin-white);
  border: 1px solid var(--acutwin-midnight);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--midnight-deep);
  border-color: var(--midnight-deep);
  box-shadow: 0 8px 22px rgba(37, 49, 67, 0.18);
}

.btn-secondary {
  background: transparent;
  color: var(--acutwin-midnight);
  border: 1px solid rgba(37, 49, 67, 0.35);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--acutwin-brass);
  background: rgba(155, 120, 70, 0.07);
}

.btn-light {
  background: var(--acutwin-white);
  color: var(--acutwin-midnight);
  border: 1px solid var(--acutwin-white);
}
.btn-light:hover,
.btn-light:focus-visible { background: var(--acutwin-warm-ivory); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.75rem;
  margin-top: 2.25rem;
}
.btn-row .text-link { font-size: 1rem; }

/* Brass underline that draws in from the left; a faint baseline is always present */
.text-link {
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 3px;
  background-image:
    linear-gradient(var(--acutwin-brass), var(--acutwin-brass)),
    linear-gradient(rgba(155, 120, 70, 0.4), rgba(155, 120, 70, 0.4));
  background-size: 0 2px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.38s var(--ease);
}
.text-link:hover,
.text-link:focus-visible { background-size: 100% 2px, 100% 1px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Full-bleed hero: the photograph is the ground, text sits in an ivory haze
   over its pale left third. The header overlays the image (see .has-bleed-hero). */

.has-bleed-hero .site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.has-bleed-hero .site-header:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

.hero-bleed {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background-image: url('../assets/img/hero-atrium.jpg');
  background-size: cover;
  background-position: 21% 50%;
}

/* Ivory light-haze scrim over the pale wall, plus a soft footing */
.hero-bleed::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 72%, rgba(244, 240, 233, 0.45) 100%),
    linear-gradient(100deg,
      rgba(244, 240, 233, 0.92) 0%,
      rgba(244, 240, 233, 0.7) 32%,
      rgba(244, 240, 233, 0.14) 60%,
      transparent 78%);
}

/* Faint drafting grid inside the haze, fading out over the photograph */
.hero-bleed::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(37, 49, 67, 0.045) 0 1px, transparent 1px var(--grid)),
    repeating-linear-gradient(90deg, rgba(37, 49, 67, 0.045) 0 1px, transparent 1px var(--grid));
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 38%, transparent 55%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 38%, transparent 55%);
}

.hero-bleed .container {
  position: relative;
  z-index: 3;
  width: 100%;
}

.hero-bleed-copy { max-width: 760px; }
.hero-bleed-copy .eyebrow { margin-bottom: 1.5rem; }
.hero-bleed-copy h1 {
  font-size: clamp(3.25rem, 6vw, 5.75rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.hero-bleed-copy .lede { margin-top: 1.75rem; max-width: 40rem; }
.hero-bleed-copy .btn-row { margin-top: 2.25rem; }
.hero-bleed .btn-primary { padding: 1.05rem 2.15rem; }

.btn-ghost {
  border: 1px solid rgba(37, 49, 67, 0.45);
  color: var(--acutwin-midnight);
  background: transparent;
  padding: 1.05rem 2.15rem;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--acutwin-midnight);
  background: rgba(244, 240, 233, 0.55);
}

/* Annotation pins: information attached to specific points in the photographed
   space. They reveal once after load and then rest; the photograph never moves. */
.hero-pins {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.hero-pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  translate: 0 -50%;
  display: flex;
  align-items: center;
  gap: 1.35rem;
  white-space: nowrap;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}
.hero-pin--flip {
  flex-direction: row-reverse;
  translate: -100% -50%;
}

/* Hero rings run larger than the demonstration's: they carry the first
   interaction on the page and have to read from across a room. */
.hero-pin .pin-dot::before { width: 1.75rem; height: 1.75rem; }
.hero-pin:hover .pin-dot::before,
.hero-pin:focus-visible .pin-dot::before,
.hero-pin.is-active .pin-dot::before { width: 2.5rem; height: 2.5rem; }

.pin-dot {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--acutwin-brass);
  box-shadow:
    0 0 0 1px rgba(244, 240, 233, 0.9),
    0 2px 6px rgba(37, 49, 67, 0.35);
}
/* Hairline leader spanning the gap between dot and label */
.pin-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 1.35rem;
  height: 1px;
  background: rgba(155, 120, 70, 0.85);
}
.hero-pin--flip .pin-dot::after,
.demo-spot--flip .pin-dot::after {
  left: auto;
  right: 100%;
}

.pin-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--acutwin-midnight);
  background: rgba(244, 240, 233, 0.9);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
          backdrop-filter: blur(6px) saturate(1.05);
  border: 1px solid rgba(37, 49, 67, 0.1);
  border-left: 2px solid var(--acutwin-brass);
  border-radius: 2px;
  padding: 0.4rem 0.7rem;
  box-shadow:
    0 1px 2px rgba(37, 49, 67, 0.14),
    0 10px 22px -14px rgba(37, 49, 67, 0.5);
}
@supports not (backdrop-filter: blur(1px)) {
  .pin-label { background: rgba(244, 240, 233, 0.96); }
}
.hero-pin--flip .pin-label,
.demo-spot--flip .pin-label {
  border-left: 1px solid rgba(37, 49, 67, 0.1);
  border-right: 2px solid var(--acutwin-brass);
}

/* Anchors, tuned against the atrium crop. The photograph is cropped by
   background-size: cover, so the crop slides horizontally as the viewport
   narrows; the anchors follow it at the narrower laptop widths. */
.hero-pin--ceiling { --pin-x: 66%; --pin-y: 13%; }
.hero-pin--glass   { --pin-x: 88%; --pin-y: 28%; }
.hero-pin--panel   { --pin-x: 64%; --pin-y: 40%; }
.hero-pin--stair   { --pin-x: 70%; --pin-y: 54%; }
.hero-pin--water   { --pin-x: 62%; --pin-y: 84%; }

@media (max-width: 1500px) {
  .hero-pin--ceiling { --pin-x: 68%; }
  .hero-pin--glass   { --pin-x: 88%; }
  .hero-pin--panel   { --pin-x: 68%; }
  .hero-pin--stair   { --pin-x: 72%; }
  .hero-pin--water   { --pin-x: 66%; }
}

/* Below this the headline reaches into the pins' half of the frame */
@media (max-width: 1099px) {
  .hero-pins { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-pin {
    opacity: 0;
    animation: pin-in 0.75s var(--ease) forwards;
  }
  .hero-pin--flip { animation-name: pin-in-flip; }
  .hero-pin--ceiling { animation-delay: 0.6s; }
  .hero-pin--glass { animation-delay: 0.9s; }
  .hero-pin--panel { animation-delay: 1.2s; }
  .hero-pin--stair { animation-delay: 1.5s; }
  .hero-pin--water { animation-delay: 1.8s; }
  @keyframes pin-in {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes pin-in-flip {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: none; }
  }
}

/* The record stack floats over the photograph, lower right. Selecting a
   marker swaps which card inside it is shown. Generic first, hero override
   second, so any marked photograph on the site can carry one. */
.record-stack {
  position: absolute;
  z-index: 3;
  right: clamp(0.9rem, 2.5vw, 2.25rem);
  bottom: clamp(0.9rem, 2.5vw, 2.25rem);
  width: min(19rem, 44%);
}
.hero-bleed .record-stack {
  right: clamp(1.5rem, 7vw, 8rem);
  bottom: clamp(2rem, 9vh, 6rem);
  width: min(20rem, 32vw);
}
/* Sits on the photograph, so it carries its own ivory backing rather than
   relying on whatever happens to be behind it (curtains, dark flooring). */
.record-note {
  margin-top: 0.5rem;
  text-align: right;
}
.record-note > span {
  display: inline-block;
  background: rgba(244, 240, 233, 0.86);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border-radius: 2px;
  padding: 0.22rem 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (max-width: 900px) {
  .hero-bleed .record-stack { display: none; }
  /* Elsewhere the stack drops below the photograph rather than disappearing */
  .page-anchor .record-stack {
    position: static;
    width: auto;
    margin-top: 0;
    padding: 0 0.9rem 1rem;
  }
  .page-anchor .demo-marks { padding-bottom: 0.75rem; }
}

/* Quiet scroll cue */
.hero-bleed .scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 1.75rem;
  width: 1px;
  height: 40px;
  background: rgba(37, 49, 67, 0.45);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-bleed .scroll-cue {
    animation: cue-pulse 2.5s var(--ease) infinite;
  }
  @keyframes cue-pulse {
    0%, 100% { transform: scaleY(0.55); transform-origin: top; opacity: 0.4; }
    50% { transform: scaleY(1); transform-origin: top; opacity: 0.9; }
  }
}

/* Phones: the old 16% crop framed blank wall, so the hero showed no evidence of
   a real space at all. Crop to the stair and glazing so the room reads behind
   the copy, and keep the wash heavy enough that midnight text stays legible.
   Pins need photograph they can point at, which a phone hero does not have; the
   annotated demonstration carries that job further down the page. */
@media (max-width: 900px) {
  .hero-bleed { background-position: 54% 50%; }
  .hero-bleed::before {
    background:
      linear-gradient(180deg,
        rgba(244, 240, 233, 0.93) 0%,
        rgba(244, 240, 233, 0.9) 62%,
        rgba(244, 240, 233, 0.72) 82%,
        rgba(244, 240, 233, 0.5) 100%);
  }
  .hero-bleed::after {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 75%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 75%);
  }
  .hero-pins { display: none; }
}

/* The eyebrow's job on a phone is the category; the town is in the footer */
@media (max-width: 620px) {
  .eyebrow-place { display: none; }
}

/* Record card: warm paper laid on the photograph, breaking its lower edge */
.record-card {
  display: none;
  flex-direction: column;
  gap: 0.28rem;
  background: rgba(244, 240, 233, 0.94);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
          backdrop-filter: blur(6px) saturate(1.05);
  border: 1px solid rgba(37, 49, 67, 0.1);
  border-top: 2px solid var(--acutwin-brass);
  border-radius: 2px;
  padding: 0.9rem 1.15rem 1rem;
  box-shadow:
    0 1px 2px rgba(37, 49, 67, 0.2),
    0 14px 30px -12px rgba(37, 49, 67, 0.4);
}
@supports not (backdrop-filter: blur(1px)) {
  .record-card { background: rgba(244, 240, 233, 0.97); }
}
.record-card.is-active { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .record-card.is-active { animation: card-in 0.3s var(--ease); }
}

.record-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 0.45rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid rgba(37, 49, 67, 0.12);
}
.record-line {
  position: relative;
  padding-left: 0.8rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.record-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 1px;
  background: rgba(155, 120, 70, 0.9);
}



/* --------------------------------------------------------------------------
   Photograph treatment: one grade, one wash, one caption voice
   -------------------------------------------------------------------------- */

.frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
}
.frame > img { width: 100%; }
.frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(155, 120, 70, 0.06), rgba(37, 49, 67, 0.07));
  mix-blend-mode: soft-light;
}

.hero-photo img,
.vignette-media img,
.page-anchor img,
.about-portrait img,
.quote-band > img,
.closing-band > img { filter: var(--photo-grade); }

.vignette-media img[src$='vignette-industrial.jpg'] { filter: saturate(0.62) contrast(1.06) brightness(1.02); }
.about-portrait img { filter: saturate(0.52) contrast(1.04) brightness(1.02); }
.closing-band > img { filter: saturate(0.5) contrast(1.05); }

.hero-art figcaption,
.page-anchor figcaption,
.about-portrait figcaption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-top: 1.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ink-faint);
}
.hero-art figcaption { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding-block: var(--section-pad); }
.section--tight-top { padding-top: var(--section-pad-tight); }
.section--flush-top { padding-top: 0; }
.section--loose-bottom { padding-bottom: var(--section-pad-loose); }

.section:not(.section-white) { position: relative; isolation: isolate; }
.section:not(.section-white)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, var(--rule-faint) 0 1px, transparent 1px var(--grid)),
    repeating-linear-gradient(90deg, var(--rule-faint) 0 1px, transparent 1px var(--grid));
  -webkit-mask-image: radial-gradient(130% 95% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 78%);
          mask-image: radial-gradient(130% 95% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 78%);
}

.section-white {
  background-color: var(--acutwin-white);
  background-image: linear-gradient(180deg,
    var(--acutwin-white) 0%,
    var(--acutwin-white) 74%,
    var(--ivory-soft) 100%);
}

.section-head { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.section-head .lede { margin-top: 1.25rem; max-width: 62rem; }

/* Solution paths: a hairline editorial index ------------------------------- */

.paths-grid {
  display: block;
  border-top: 1px solid var(--hairline);
}

.path-card {
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 26ch) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(1.5rem, 4vw, 4.5rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: background 0.24s var(--ease), box-shadow 0.24s var(--ease);
}

.path-card .path-marker {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--acutwin-brass);
  margin-top: 0.7rem;
  transition: width 0.34s var(--ease), border-radius 0.34s var(--ease);
}

.path-card h3 {
  font-weight: 600;
  font-size: var(--s2);
  line-height: 1.18;
  letter-spacing: 0.004em;
}

.path-card p { font-size: 0.9375rem; color: var(--ink-soft); margin-top: 0.35rem; }

@media (hover: hover) {
  .path-card:hover {
    background: var(--acutwin-warm-ivory);
    box-shadow: inset 3px 0 0 var(--acutwin-brass);
  }
  .path-card:hover .path-marker { width: 36px; border-radius: 2px; }
}
.path-card:focus-visible {
  background: var(--acutwin-warm-ivory);
  box-shadow: inset 3px 0 0 var(--acutwin-brass);
}
.path-card:focus-visible .path-marker { width: 36px; border-radius: 2px; }

@media (max-width: 760px) {
  .path-card { grid-template-columns: 0.75rem minmax(0, 1fr); row-gap: 0.5rem; }
  .path-card p { grid-column: 2; }
}

.paths-footer { margin-top: 2.5rem; }

/* Scenario vignettes ------------------------------------------------------- */

.vignettes {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.5rem;
}

.vignette {
  background: var(--acutwin-white);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.vignette-media { margin: 0; }
.vignette-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.vignette-body {
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  flex: 1;
}

.vignette-lead {
  grid-row: span 2;
  border-top: 3px solid var(--acutwin-brass);
}
.vignette-lead .vignette-media img {
  aspect-ratio: 3 / 2;
  object-position: 0% 50%; /* keep the technician's face; trim the rack's outer post */
}
.vignette-lead .vignette-body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* On the two-column grid the lead card matches the stacked pair's height;
   the photograph absorbs the difference, not empty card space. */
@media (min-width: 901px) {
  .vignette-lead .vignette-media {
    flex: 1;
    min-height: 0;
    display: flex;
  }
  .vignette-lead .vignette-media .frame { display: block; width: 100%; }
  .vignette-lead .vignette-media img {
    aspect-ratio: auto;
    height: 100%;
    min-height: 380px;
  }
  .vignette-lead .vignette-body { flex: 0 0 auto; }
}

.vignette .tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--acutwin-midnight);
  text-decoration: none;
  border: 1px solid rgba(155, 120, 70, 0.55);
  border-radius: 2px;
  padding: 0.3rem 0.65rem;
  margin-bottom: 1.4rem;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}
a.tag:hover,
a.tag:focus-visible {
  border-color: var(--acutwin-brass);
  background: rgba(155, 120, 70, 0.08);
}

.vignette h3 {
  font-weight: 600;
  font-size: var(--s4);
  line-height: 1.14;
  letter-spacing: -0.004em;
  margin-bottom: 1rem;
}

.vignette p { color: var(--ink-soft); max-width: 58ch; }
.vignette p + p { margin-top: 0.85rem; }

.vignette .qualifier {
  font-size: 0.875rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-faint);
}

@media (max-width: 900px) {
  .vignettes { grid-template-columns: 1fr; }
  .vignette-lead { grid-row: auto; }
}

/* Full-width statement band ------------------------------------------------ */

.quote-band {
  position: relative;
  overflow: hidden;
  min-height: clamp(380px, 52vh, 580px);
  display: flex;
  align-items: center;
}

.quote-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}
@media (max-width: 700px) {
  .quote-band > img { object-position: 0% 32%; }
}

.quote-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(97deg,
      rgba(37, 49, 67, 0.9) 0%,
      rgba(37, 49, 67, 0.8) 34%,
      rgba(37, 49, 67, 0.68) 58%,
      rgba(37, 49, 67, 0.2) 82%,
      rgba(37, 49, 67, 0.06) 100%),
    linear-gradient(180deg, rgba(37, 49, 67, 0.28) 0%, rgba(37, 49, 67, 0) 24%, rgba(37, 49, 67, 0) 76%, rgba(37, 49, 67, 0.28) 100%);
}

.quote-band .container {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(3rem, 7vw, 5rem);
}

.quote-band p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--s7);
  line-height: 1.06;
  letter-spacing: -0.016em;
  color: var(--acutwin-white);
  max-width: 11em;
  text-wrap: balance;
}

.quote-band p::before {
  content: '';
  display: block;
  width: 5rem;
  height: 2px;
  background: var(--acutwin-brass);
  margin-bottom: 1.75rem;
}

/* Closing band -------------------------------------------------------------- */

.closing-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}

.closing-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

.closing-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 95% at 50% 46%,
      rgba(37, 49, 67, 0.9) 0%,
      rgba(37, 49, 67, 0.84) 34%,
      rgba(37, 49, 67, 0.7) 66%,
      rgba(37, 49, 67, 0.54) 100%),
    linear-gradient(180deg, rgba(37, 49, 67, 0.3) 0%, rgba(37, 49, 67, 0) 30%);
}

.closing-band .container {
  position: relative;
  z-index: 1;
  padding-block: clamp(5rem, 11vw, 8.5rem);
}

.closing-band h2 {
  color: var(--acutwin-white);
  margin-inline: auto;
}

.closing-band .lede {
  color: rgba(255, 255, 255, 0.87);
  margin: 1.5rem auto 0;
  max-width: 62rem;
}

.closing-band .btn-row { justify-content: center; }

/* Role section, demonstrated ---------------------------------------------- */

.role-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.role-statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--s5);
  line-height: 1.22;
  letter-spacing: -0.008em;
  text-wrap: balance;
  margin-top: 1.5rem;
}

.role-detail p { color: var(--ink-soft); max-width: var(--measure); }

.role-detail .qualifier {
  margin-top: 1.75rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .role-intro { grid-template-columns: 1fr; }
}

/* The demonstration: markers on a documented space swap the record card.
   Same brass-dot and warm-paper language as the hero pins and record card. */
.demo {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.demo-stage {
  position: relative;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}
.demo-stage img { display: block; width: 100%; height: auto; }

/* Markers carry the same labelled tag as the hero pins: a bare dot tells a
   first-time visitor nothing, the tag names what was documented. */
.demo-spot {
  position: absolute;
  z-index: 4;
  left: var(--x);
  top: var(--y);
  translate: 0 -50%;
  display: flex;
  align-items: center;
  gap: 1.35rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}
.demo-spot--flip {
  flex-direction: row-reverse;
  translate: -100% -50%;
}

/* Halo ring marks the dot as pressable; grows on hover and when active */
.demo-spot .pin-dot::before,
.hero-pin .pin-dot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid rgba(244, 240, 233, 0.95);
  box-shadow: 0 0 0 1px rgba(37, 49, 67, 0.22);
  transition: width 0.22s var(--ease), height 0.22s var(--ease);
}
.demo-spot:hover .pin-dot::before,
.demo-spot:focus-visible .pin-dot::before,
.demo-spot.is-active .pin-dot::before {
  width: 2.1rem;
  height: 2.1rem;
}
/* Selected marker rings in brass, with an ivory halo so it holds on the
   dark navy cabinets as well as the pale wall */
.demo-spot.is-active .pin-dot::before,
.hero-pin.is-active .pin-dot::before {
  border-width: 2px;
  border-color: var(--acutwin-brass);
  box-shadow:
    0 0 0 1px rgba(244, 240, 233, 0.9),
    inset 0 0 0 1px rgba(244, 240, 233, 0.9);
}

/* Unselected tags sit back; the selected one comes forward */
.demo-spot .pin-label,
.hero-pin .pin-label {
  opacity: 0.88;
  transition: opacity 0.2s var(--ease), background 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.demo-spot:hover .pin-label,
.demo-spot:focus-visible .pin-label,
.hero-pin:hover .pin-label,
.hero-pin:focus-visible .pin-label { opacity: 1; }
.demo-spot.is-active .pin-label,
.hero-pin.is-active .pin-label {
  opacity: 1;
  background: rgba(244, 240, 233, 0.98);
  box-shadow:
    0 1px 2px rgba(37, 49, 67, 0.18),
    0 12px 26px -12px rgba(37, 49, 67, 0.55);
}

.demo-rail { display: flex; flex-direction: column; }

/* Fixed footing so the rail does not jump between cards */
.demo-cards { min-height: 13.5rem; }

.demo-card {
  display: none;
  flex-direction: column;
  gap: 0.34rem;
  background: rgba(244, 240, 233, 0.6);
  border: 1px solid rgba(37, 49, 67, 0.1);
  border-top: 2px solid var(--acutwin-brass);
  border-radius: 2px;
  padding: 1.15rem 1.35rem 1.25rem;
  box-shadow:
    0 1px 2px rgba(37, 49, 67, 0.08),
    0 14px 30px -18px rgba(37, 49, 67, 0.35);
}
.demo-card.is-active { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .demo-card.is-active { animation: card-in 0.3s var(--ease); }
  @keyframes card-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
  }
}
.demo-card .record-title { font-size: 0.875rem; }
.demo-card .record-line { font-size: 0.875rem; padding-left: 0.9rem; }

.demo-index {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

.demo-rail .qualifier {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .demo { grid-template-columns: 1fr; }
  .demo-cards { min-height: 0; }

  /* Four tags cannot sit on a phone-width photograph without colliding, so the
     same buttons flow into a legend under it, each keeping its brass dot. */
  .demo-marks {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.9rem 0.9rem 1rem;
  }
  .demo-spot {
    position: static;
    translate: none;
    gap: 0.55rem;
  }
  .demo-spot--flip { flex-direction: row; translate: none; }
  .demo-spot .pin-dot::after { display: none; }
  .demo-spot .pin-dot::before { width: 1.25rem; height: 1.25rem; }
  .demo-spot:hover .pin-dot::before,
  .demo-spot:focus-visible .pin-dot::before,
  .demo-spot.is-active .pin-dot::before { width: 1.6rem; height: 1.6rem; }
  .demo-spot--flip .pin-label {
    border-left: 2px solid var(--acutwin-brass);
    border-right: 1px solid rgba(37, 49, 67, 0.1);
  }
}

/* Proof panel ------------------------------------------------------------- */

.proof-panel {
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(155, 120, 70, 0.16) 0%, rgba(155, 120, 70, 0) 58%),
    linear-gradient(158deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, var(--acutwin-midnight) 0%, var(--midnight-deep) 100%);
  color: var(--acutwin-white);
  border-radius: 3px;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 3fr) auto;
  gap: 2.5rem;
  align-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 26px 60px -30px rgba(37, 49, 67, 0.45);
}

.proof-panel .eyebrow { color: var(--acutwin-white); }
.proof-panel h2 { color: var(--acutwin-white); }
.proof-panel p {
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, 0.84);
  max-width: 56ch;
}

@media (max-width: 900px) {
  .proof-panel { grid-template-columns: 1fr; }
}

/* Engagement steps: one continuous ledger rule ----------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--hairline);
}

.step {
  border-left: 1px solid var(--hairline);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 3rem) 0;
}
.step:first-child { border-left: 0; padding-left: 0; }
.step:last-child { padding-right: 0; }

.step .step-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 4.4vw, 3.6rem);
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
  line-height: 1;
  color: var(--acutwin-brass);
  display: block;
  margin-bottom: 1.25rem;
}

.step h3 {
  font-weight: 600;
  font-size: var(--s2);
  line-height: 1.18;
  margin-bottom: 0.7rem;
}

.step p { color: var(--ink-soft); font-size: 0.9375rem; }

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-left: 0; border-top: 1px solid var(--hairline); padding: clamp(1.5rem, 4vw, 2rem) 0 0; }
  .step:first-child { border-top: 0; padding-top: clamp(1.5rem, 4vw, 2rem); }
}

/* --------------------------------------------------------------------------
   Interior pages
   -------------------------------------------------------------------------- */

.page-intro {
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.75rem, 5vw, 4.5rem);
  position: relative;
  isolation: isolate;
}
.page-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, var(--rule-faint) 0 1px, transparent 1px var(--grid)),
    repeating-linear-gradient(90deg, var(--rule-faint) 0 1px, transparent 1px var(--grid));
  -webkit-mask-image: radial-gradient(130% 95% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 78%);
          mask-image: radial-gradient(130% 95% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 78%);
}
.page-intro .lede { margin-top: 1.5rem; max-width: 62rem; }

.stub-note {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  max-width: 62ch;
  background: var(--acutwin-white);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--acutwin-brass);
  border-radius: 3px;
  padding: 1.25rem 1.5rem;
  margin-top: 2.5rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.stub-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.stub-item {
  background: var(--acutwin-white);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 2rem 1.75rem;
  scroll-margin-top: 7rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.stub-item:target {
  border-color: var(--acutwin-brass);
  box-shadow: inset 0 0 0 1px var(--acutwin-brass);
}

.stub-item .path-marker {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--acutwin-brass);
  margin-bottom: 1.4rem;
}

.stub-item h3 {
  font-weight: 600;
  font-size: var(--s2);
  line-height: 1.18;
  margin-bottom: 0.75rem;
}

.stub-item p { font-size: 0.9375rem; color: var(--ink-soft); }

.stub-item--feature {
  grid-column: 1 / -1;
  border-top: 3px solid var(--acutwin-brass);
}
@media (min-width: 900px) {
  .stub-item--feature {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 2.5rem;
    align-items: start;
    padding: 2.5rem 2.25rem;
  }
  .stub-item--feature h3 { font-size: var(--s3); margin-bottom: 0; }
  .stub-item--feature p { max-width: 58ch; }
}

.stub-item .priority {
  display: inline-block;
  font-size: 0.7188rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(155, 120, 70, 0.55);
  border-radius: 2px;
  padding: 0.22rem 0.55rem;
  margin-bottom: 1rem;
}

.page-anchor { margin: 0 0 clamp(2.25rem, 4vw, 3.5rem); border-radius: 4px; }
.page-anchor .frame { border-radius: 4px; }
.page-anchor img { width: 100%; }

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.about-portrait { margin: 0; border-radius: 4px; }
.about-portrait .frame { border-radius: 4px; }
.about-portrait img { width: 100%; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { max-width: 460px; }
}

.prose { max-width: var(--measure); }
.prose p { margin-bottom: 1.15rem; color: var(--ink-soft); }
.prose p.opening {
  font-family: var(--font-display);
  font-size: var(--s3);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.002em;
  color: var(--acutwin-midnight);
  margin-bottom: 1.6rem;
}

/* Contact: form primary, direct line beside it ---------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.contact-form-panel {
  background: var(--acutwin-white);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--acutwin-brass);
  border-radius: 3px;
  padding: clamp(1.75rem, 3.2vw, 3rem);
}

.contact-panel-title {
  font-weight: 600;
  font-size: var(--s3);
  line-height: 1.2;
}
.contact-panel-lede {
  margin-top: 0.6rem;
  margin-bottom: 2rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.contact-form .field { margin-bottom: 1.4rem; }
.contact-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 640px) {
  .contact-form .field-row { grid-template-columns: 1fr; gap: 0; }
}

.contact-form label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.45rem;
  color: var(--acutwin-midnight);
}
.contact-form .optional {
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0;
}

.contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form input[type='tel'],
.contact-form select,
.contact-form textarea {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--acutwin-midnight);
  background: var(--acutwin-white);
  border: 1px solid rgba(37, 49, 67, 0.28);
  border-radius: 2px;
  padding: 0.75rem 0.9rem;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.contact-form textarea { resize: vertical; min-height: 8.5rem; }
.contact-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--acutwin-midnight) 50%), linear-gradient(135deg, var(--acutwin-midnight) 50%, transparent 50%); background-position: calc(100% - 1.3rem) 50%, calc(100% - 0.95rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.6rem; }
.contact-form select:invalid { color: var(--ink-soft); }

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: none;
  border-color: var(--acutwin-brass);
  box-shadow: 0 0 0 3px rgba(155, 120, 70, 0.22);
}

.contact-form .btn { margin-top: 0.4rem; }

/* Honeypot: visually removed without display:none */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact-rail {
  background: var(--midnight-deep);
  background-image: radial-gradient(120% 100% at 15% 0%, rgba(155, 120, 70, 0.14) 0%, rgba(155, 120, 70, 0) 60%);
  border-radius: 3px;
  color: rgba(244, 240, 233, 0.88);
  padding: clamp(1.75rem, 3vw, 2.75rem);
}

.contact-rail .rail-block {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(244, 240, 233, 0.14);
}

.rail-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 240, 233, 0.6);
  margin-bottom: 0.65rem;
}

.rail-phone {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 2.4vw, 2.3rem);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}
.rail-phone a { color: var(--acutwin-white); text-decoration: none; }
.rail-phone a:hover, .rail-phone a:focus-visible { color: #C9A468; }

.rail-line { font-size: 0.9063rem; line-height: 1.6; }
.rail-sub { margin-top: 0.45rem; color: rgba(255, 255, 255, 0.62); }

/* Announced to screen readers, never painted */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.rail-mail,
.rail-schedule {
  color: var(--acutwin-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(155, 120, 70, 0.7);
  padding-bottom: 0.1rem;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.rail-mail:hover, .rail-mail:focus-visible,
.rail-schedule:hover, .rail-schedule:focus-visible {
  color: #C9A468;
  border-bottom-color: #C9A468;
}

.rail-promise {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--acutwin-white);
}

.rail-pending {
  margin-top: 1.1rem;
  font-size: 0.75rem;
  color: rgba(244, 240, 233, 0.45);
}

.contact-prep { margin-top: clamp(3rem, 6vw, 5rem); }
.contact-prep h2 {
  font-weight: 600;
  font-size: var(--s2);
  margin-bottom: 0.75rem;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-rail { order: -1; }
}

.contact-questions { list-style: none; }
.contact-questions li {
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--ink-faint);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--s3);
  line-height: 1.24;
  display: flex;
  gap: 1.1rem;
  align-items: baseline;
}
.contact-questions li::before {
  content: '';
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--acutwin-brass);
  position: relative;
  top: -2px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--midnight-deep);
  background-image:
    radial-gradient(90% 120% at 12% 0%, rgba(155, 120, 70, 0.1) 0%, rgba(155, 120, 70, 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 260px);
  border-top: 1px solid rgba(155, 120, 70, 0.8);
  color: rgba(255, 255, 255, 0.75);
  padding-block: clamp(4rem, 7vw, 6rem) 2.25rem;
  font-size: 0.9063rem;
}

.site-footer .container {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(2.5rem, 8vw, 7rem);
  row-gap: 2.5rem;
  align-items: start;
}

.footer-brand p { max-width: 34ch; margin-top: 1.1rem; }
/* Ben's geography line: states reach without implying a fixed office */
.footer-brand .footer-reach {
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}
.footer-brand .footer-logo { width: 176px; height: auto; }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 2.5rem;
  justify-self: end;
  width: 100%;
  max-width: 30rem;
}
.footer-nav a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--acutwin-brass), var(--acutwin-brass));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color 0.2s var(--ease), background-size 0.3s var(--ease);
  justify-self: start;
}
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--acutwin-white);
  background-size: 100% 1px;
}

.footer-meta {
  grid-column: 1 / -1;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8438rem;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 760px) {
  .site-footer .container { grid-template-columns: 1fr; }
  .footer-nav { justify-self: start; max-width: none; }
}

/* --------------------------------------------------------------------------
   Scroll reveal (gated on .js; hero excluded so LCP paints instantly)
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

.js .reveal .vignette-media img,
.js .page-anchor.reveal img {
  transform: scale(1.035);
  transition: transform 1.1s var(--ease);
}
.js .reveal.is-in .vignette-media img,
.js .page-anchor.reveal.is-in img { transform: scale(1); }

/* --------------------------------------------------------------------------
   Motion restraint
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal .vignette-media img,
  .js .page-anchor.reveal img { transform: none; }
}