/* ===================================================================
   Centurion Media Group — site stylesheet
   Brand system v1.0 (2026). Single stylesheet for every page.

   Rules of the system:
     · Square corners. No border-radius, no shadows, no gradients, no glows.
     · Hairline borders instead of elevated cards.
     · The logo's underline rule is the only decorative device. It recurs as
       the section divider, the heading marker, and the link underline.
     · Sky is accent only — never a fill behind body copy (1.9:1 on Paper).
   =================================================================== */

:root {
  --midnight: #0D1B2E;
  --navy:     #1E4173;
  --sky:      #7FA8D9;
  --paper:    #F2F5F8;
  --slate:    #7E93AD;
  --body:     #4A5563;
  --hairline: #E2E6EB;
  --hairline-dark: rgba(255,255,255,0.12);

  --font-display: 'Archivo', 'Arial Black', Helvetica, sans-serif;
  --font-accent:  'Instrument Serif', Georgia, serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --pad-x: 72px;
  --pad-y: 110px;
  --maxw: 1200px;
}

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

html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: #fff;
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

img { max-width: 100%; }

/* ── SKIP LINK ── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--navy); color: var(--paper); padding: 12px 22px;
  font-size: 14px; font-weight: 500; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ===================================================================
   WORDMARK
   Built in markup, not as an image, so the rule is derived from the
   wordmark's own width and stays exact at any size. --wm drives it all.
   =================================================================== */
.wm { display: inline-flex; flex-direction: column; align-items: flex-start; --wm: 22px; }
.wm-name {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--wm);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--paper);
  padding-bottom: calc(var(--wm) * 0.125);
  border-bottom: max(2px, calc(var(--wm) * 0.115)) solid var(--sky);
}
.wm-desc {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: calc(var(--wm) * 0.5);
  line-height: 1.2;
  color: var(--slate);
  margin-top: calc(var(--wm) * 0.125);
}
/* Light-ground variant */
.wm--light .wm-name { color: var(--midnight); border-bottom-color: var(--navy); }
.wm--light .wm-desc { color: var(--body); }

/* ===================================================================
   RULE DEVICE — the logo underline, reused
   =================================================================== */
.rule { display: block; width: 56px; height: 3px; background: var(--sky); border: 0; }
.rule--navy { background: var(--navy); }
.rule--wide { width: 100%; height: 1px; background: var(--hairline); }

/* Eyebrow: mono label sitting under a short rule */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  line-height: 1.4;
  color: var(--navy);
  display: block;
}
.eyebrow::before {
  content: ''; display: block; width: 56px; height: 3px;
  background: var(--sky); margin-bottom: 16px;
}
.eyebrow--dark { color: var(--slate); }

/* ── NAV ── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0 var(--pad-x); height: 92px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--midnight);
  border-bottom: 1px solid var(--hairline-dark);
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo .wm { --wm: 30px; }
.nav-right { display: flex; align-items: center; gap: 30px; }
.nav-link {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 400; letter-spacing: 0;
  color: var(--paper); text-decoration: none;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
  transition: border-color 0.18s;
}
.nav-link:hover, .nav-link[aria-current="page"] { border-bottom-color: var(--sky); }
.nav-cta {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500; letter-spacing: 0;
  color: var(--midnight); background: var(--sky);
  padding: 13px 28px; text-decoration: none;
  transition: background 0.18s;
}
.nav-cta:hover { background: var(--paper); }

.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none; cursor: pointer;
  padding: 0; z-index: 210;
}
.nav-hamburger span {
  display: block; width: 24px; height: 2px; background: var(--paper);
  transition: transform 0.25s, opacity 0.25s; margin: 0 auto;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none; position: fixed; top: 92px; left: 0; right: 0;
  background: var(--midnight); border-bottom: 1px solid var(--hairline-dark);
  flex-direction: column; padding: 18px 24px 26px; z-index: 105;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-body);
  color: var(--paper); text-decoration: none; font-size: 16px; font-weight: 400;
  padding: 15px 0; border-bottom: 1px solid var(--hairline-dark);
}
.mobile-menu a:last-child { border-bottom: none; color: var(--sky); }

/* ── BUTTONS ── */
.btn-primary, .btn-ghost, .btn-white, .btn-full {
  font-family: var(--font-body);
  display: inline-block; text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: 0;
  padding: 15px 32px; border: 1px solid transparent; cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
/* On dark grounds: Sky fill, Midnight text */
.btn-primary { background: var(--sky); color: var(--midnight); }
.btn-primary:hover { background: var(--paper); }
.btn-ghost { background: transparent; color: var(--paper); border-color: var(--hairline-dark); }
.btn-ghost:hover { border-color: var(--sky); color: var(--sky); }
.btn-white { background: var(--paper); color: var(--midnight); }
.btn-white:hover { background: var(--sky); }
/* On light grounds: Navy fill, Paper text */
.btn-navy { background: var(--navy); color: var(--paper); }
.btn-navy:hover { background: var(--midnight); }
.btn-full { width: 100%; text-align: center; background: var(--navy); color: var(--paper); font-size: 15px; padding: 17px 32px; }
.btn-full:hover { background: var(--midnight); }

/* ===================================================================
   INTERIOR PAGE HERO (city + section pages)
   =================================================================== */
.city-hero { background: var(--midnight); color: var(--paper); padding: 144px var(--pad-x) 116px; }
.city-hero-inner { max-width: var(--maxw); margin: 0 auto; }
.city-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--slate); display: block; margin-bottom: 28px;
}
.city-eyebrow::before {
  content: ''; display: block; width: 56px; height: 3px;
  background: var(--sky); margin-bottom: 16px;
}
.city-hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(38px, 6vw, 78px); letter-spacing: -0.04em;
  line-height: 1.0; color: var(--paper); margin-bottom: 28px; max-width: 16ch;
}
.city-hero h1 .accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--sky); }
.city-hero-sub {
  font-size: 17px; line-height: 1.8; color: var(--slate);
  max-width: 62ch; margin-bottom: 40px;
}
.city-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── GENERIC SECTION ── */
.sec { padding: var(--pad-y) var(--pad-x); border-top: 1px solid var(--hairline); }
.sec--tint { background: var(--paper); }
.sec-inner { max-width: var(--maxw); margin: 0 auto; }
.sec-inner--narrow { max-width: 820px; }
.sec-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--navy); display: block; margin-bottom: 20px;
}
.sec-eyebrow::before {
  content: ''; display: block; width: 56px; height: 3px;
  background: var(--sky); margin-bottom: 16px;
}
.sec h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(27px, 3.2vw, 38px); letter-spacing: -0.03em;
  line-height: 1.15; color: var(--midnight); margin-bottom: 22px;
}
.sec h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; letter-spacing: -0.02em; line-height: 1.25;
  color: var(--midnight); margin-bottom: 10px;
}
.sec p { font-size: 17px; line-height: 1.8; color: var(--body); margin-bottom: 20px; max-width: 70ch; }
.sec p:last-child { margin-bottom: 0; }
.sec p strong { color: var(--midnight); font-weight: 600; }
.sec a { color: var(--navy); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--sky); }
.sec a:hover { color: var(--midnight); border-bottom-color: var(--navy); }
.prose { max-width: 70ch; }

/* ── CARD GRID (hairline, not elevated) ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 26px; margin-top: 52px; }
.card {
  background: #fff; border: 1px solid var(--hairline);
  padding: 36px 34px 38px; transition: border-color 0.22s, background 0.22s;
}
.card:hover { border-color: var(--sky); background: var(--paper); }
.card-num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--navy); margin-bottom: 16px;
}
.card p { font-size: 15px; line-height: 1.75; margin-bottom: 0; }

/* ── CHECKLIST ── */
.checklist { list-style: none; margin-top: 36px; display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.checklist li {
  position: relative; padding: 20px 0 20px 30px; font-size: 16px;
  line-height: 1.75; color: var(--body); border-bottom: 1px solid var(--hairline);
}
.checklist li::before {
  content: ''; position: absolute; left: 0; top: 30px;
  width: 14px; height: 3px; background: var(--sky);
}
.checklist li strong { color: var(--midnight); font-weight: 600; }

/* ── FAQ ── */
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 26px 40px 26px 0; position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.02em; line-height: 1.35; color: var(--midnight);
  transition: color 0.18s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover, .faq-item[open] summary { color: var(--navy); }
.faq-item summary::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 13px; height: 3px;
  background: var(--sky); transform: translateY(-50%); transition: transform 0.2s;
}
.faq-item summary::before {
  content: ''; position: absolute; right: 9px; top: 50%; width: 3px; height: 13px;
  background: var(--sky); transform: translateY(-50%); transition: opacity 0.2s;
}
.faq-item[open] summary::before { opacity: 0; }
.faq-answer { padding: 0 40px 30px 0; font-size: 16px; line-height: 1.8; color: var(--body); max-width: 70ch; }
.faq-answer a { color: var(--navy); font-weight: 500; border-bottom: 1px solid var(--sky); text-decoration: none; }

/* ── MARKET PILLS ── */
.markets { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.market-pill {
  border: 1px solid var(--hairline);
  padding: 15px 26px; font-size: 15px; font-weight: 500; text-decoration: none;
  color: var(--midnight); transition: background 0.18s, color 0.18s;
}
.market-pill:hover { background: var(--navy); color: var(--paper); }

/* ── MARKET CARDS ── */
.areas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 26px; }
.area-card {
  display: block; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid var(--hairline);
  padding: 36px 34px 38px; transition: border-color 0.22s, background 0.22s;
}
.area-card:hover { border-color: var(--sky); background: var(--paper); }
.area-card--primary { background: var(--paper); border-color: var(--sky); }
.area-badge {
  display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); margin-bottom: 14px;
}
.area-city {
  font-family: var(--font-display); font-weight: 700; font-size: 21px;
  letter-spacing: -0.02em; color: var(--midnight); margin-bottom: 10px;
}
.area-desc { font-size: 15px; line-height: 1.75; color: var(--body); margin-bottom: 18px; }
.area-arrow { font-size: 14px; font-weight: 500; color: var(--navy); border-bottom: 1px solid var(--sky); padding-bottom: 2px; }

/* ── INTERIOR CTA ── */
.city-cta { background: var(--midnight); color: var(--paper); padding: var(--pad-y) var(--pad-x); }
.city-cta-inner { max-width: var(--maxw); margin: 0 auto; }
.city-cta h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -0.04em;
  line-height: 1.05; margin-bottom: 22px; max-width: 18ch; color: var(--paper);
}
.city-cta h2 .accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--sky); }
.city-cta p { color: var(--slate); font-size: 17px; line-height: 1.8; margin-bottom: 36px; max-width: 62ch; }

/* ===================================================================
   FORMS
   =================================================================== */
.form-wrap { max-width: 760px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; margin-bottom: 20px; }
.form-group label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--navy); margin-bottom: 10px;
}
.form-group input, .form-group select, .form-group textarea {
  font-family: var(--font-body); font-size: 16px; color: var(--midnight);
  background: #fff; border: 1px solid var(--hairline); border-radius: 0;
  padding: 14px 16px; width: 100%; transition: border-color 0.18s;
  -webkit-appearance: none; appearance: none;
}
.form-group select {
  background-image: linear-gradient(45deg, transparent 50%, #1E4173 50%), linear-gradient(135deg, #1E4173 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.form-group textarea { resize: vertical; min-height: 140px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--navy);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #9AA6B4; }
.form-note { font-size: 14px; color: var(--body); margin-top: 16px; text-align: center; }
.form-error {
  display: none; margin-top: 20px; padding: 16px 18px;
  border-left: 3px solid #B3261E; background: rgba(179,38,30,0.05);
  font-size: 15px; line-height: 1.7; color: var(--body);
}
.form-error a { color: var(--navy); font-weight: 600; }
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── SUCCESS + ANIMATED CHECKMARK ── */
.form-success { display: none; text-align: center; padding: 60px 24px; }
.form-success.show { display: block; }
.success-check { width: 96px; height: 96px; margin: 0 auto 30px; }
.success-check svg { width: 100%; height: 100%; display: block; }
.success-check .sc-circle {
  stroke: var(--sky); stroke-width: 2.5; stroke-linecap: butt;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  transform-origin: 50% 50%; transform: rotate(-90deg);
}
.success-check .sc-check {
  stroke: var(--navy); stroke-width: 3.4; stroke-linecap: butt; stroke-linejoin: miter;
  stroke-dasharray: 40; stroke-dashoffset: 40;
}
.form-success.show .success-check .sc-circle { animation: scDrawCircle 0.62s cubic-bezier(0.65,0,0.35,1) forwards; }
.form-success.show .success-check .sc-check  { animation: scDrawCheck 0.38s cubic-bezier(0.65,0,0.35,1) 0.5s forwards; }
@keyframes scDrawCircle { to { stroke-dashoffset: 0; } }
@keyframes scDrawCheck  { to { stroke-dashoffset: 0; } }
.form-success h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.03em;
  color: var(--midnight); margin-bottom: 16px;
}
.form-success p { font-size: 17px; line-height: 1.8; color: var(--body); max-width: 46ch; margin: 0 auto 12px; }
.form-success .fs-meta { font-size: 15px; color: var(--body); }
.form-success .fs-meta a { color: var(--navy); font-weight: 600; border-bottom: 1px solid var(--sky); text-decoration: none; }
.form-success.show h3      { animation: scRise 0.5s cubic-bezier(0.22,1,0.36,1) 0.80s both; }
.form-success.show p       { animation: scRise 0.5s cubic-bezier(0.22,1,0.36,1) 0.88s both; }
.form-success.show .fs-meta{ animation: scRise 0.5s cubic-bezier(0.22,1,0.36,1) 0.96s both; }
@keyframes scRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ===================================================================
   FOOTER
   =================================================================== */
footer.site-footer { background: var(--midnight); color: var(--slate); display: block; padding: 64px var(--pad-x) 44px; border-top: 1px solid var(--hairline-dark); }
.footer-top { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; }
.footer-logo { display: flex; align-items: center; }
.footer-logo .wm { --wm: 44px; }
.footer-contact { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.6; }
.footer-contact a,
.footer-contact .footer-contact-area {
  display: grid; grid-template-columns: 18px 1fr; align-items: start;
  gap: 12px; color: var(--paper); text-decoration: none;
}
.footer-contact a > span { border-bottom: 1px solid transparent; transition: border-color 0.18s; justify-self: start; }
.footer-contact a:hover > span { border-bottom-color: var(--sky); }
.footer-contact .fc-icon {
  width: 18px; height: 18px; display: block; color: var(--sky);
  margin-top: 2px; flex-shrink: 0;
}
.footer-contact-area { color: var(--paper); font-size: 15px; align-items: start; }
.footer-contact-area .fc-icon { color: var(--sky); margin-top: 2px; }
.fc-loc { display: block; color: var(--paper); line-height: 1.5; }
.fc-dot { color: var(--sky); margin: 0 3px; }
.fc-note {
  display: block; margin-top: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--slate); line-height: 1.4;
}
.footer-col { display: flex; flex-direction: column; }
.footer-col-title {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 18px;
}
.footer-col-title::before { content: ''; display: block; width: 32px; height: 2px; background: var(--sky); margin-bottom: 14px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; line-height: 1.7; }
.footer-col .footer-nav { flex-direction: column; gap: 11px; }
.footer-nav a { color: var(--paper); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.18s; }
.footer-nav a:hover { border-bottom-color: var(--sky); }
.footer-bottom {
  max-width: var(--maxw); margin: 44px auto 0; padding-top: 28px;
  border-top: 1px solid var(--hairline-dark);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: 14px; color: var(--slate);
}
.footer-bottom a { color: var(--slate); text-decoration: none; border-bottom: 1px solid var(--hairline-dark); }
.footer-bottom a:hover { color: var(--paper); border-bottom-color: var(--sky); }

/* ===================================================================
   SCROLL REVEAL (kept)
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
  .reveal.in-view { opacity: 1; transform: none; }
  .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1); }
  .reveal-stagger.in-view > * { opacity: 1; transform: none; }
  .reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.04s; }
  .reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.10s; }
  .reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.16s; }
  .reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.22s; }
  .reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.28s; }
  .reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.34s; }
  .reveal-stagger.in-view > *:nth-child(7) { transition-delay: 0.40s; }
  .reveal-stagger.in-view > *:nth-child(8) { transition-delay: 0.46s; }
}

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
  :root { --pad-x: 24px; --pad-y: 80px; }
  .site-nav { padding: 0 24px; }
  .nav-right { display: none; }
  .nav-hamburger { display: flex; }
  .city-hero { padding: 124px 24px 84px; }
  .areas-grid, .cards { grid-template-columns: 1fr; }

  .footer-top { gap: 34px; }
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .form-success.show .success-check .sc-circle,
  .form-success.show .success-check .sc-check { stroke-dashoffset: 0; }
  .form-success.show h3, .form-success.show p, .form-success.show .fs-meta { opacity: 1; transform: none; }
}

/* ===================================================================
   HOMEPAGE
   =================================================================== */
.hero { background: var(--midnight); color: var(--paper); padding: 144px var(--pad-x) 116px; }
.hero-inner { max-width: var(--maxw); margin: 0 auto; }
.hero-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--slate); display: block; margin-bottom: 30px;
}
.hero-eyebrow::before { content: ''; display: block; width: 56px; height: 3px; background: var(--sky); margin-bottom: 18px; }
.hero-headline {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(44px, 7vw, 84px); letter-spacing: -0.04em;
  line-height: 1.0; color: var(--paper); margin-bottom: 30px; max-width: 15ch;
}
.hero-headline .accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--sky); }
.hero-sub { font-size: 18px; line-height: 1.8; color: var(--slate); max-width: 64ch; margin-bottom: 20px; }
.hero-tagline {
  font-family: var(--font-accent); font-style: italic; font-weight: 400;
  font-size: 28px; line-height: 1.2; color: var(--sky); margin-bottom: 44px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 84px; }
.hero-stat-row { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--hairline-dark); }
.hero-stat-row > div { padding: 26px 40px 0 0; margin-right: 40px; border-right: 1px solid var(--hairline-dark); padding-right: 40px; }
.hero-stat-row > div:last-child { border-right: none; }
.hero-stat-num { font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -0.03em; color: var(--paper); line-height: 1; margin-bottom: 8px; }
.hero-stat-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate); }

.statement { background: #fff; padding: var(--pad-y) var(--pad-x); border-top: 1px solid var(--hairline); }
.statement-right { max-width: var(--maxw); margin: 0 auto; }
.statement-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); display: block; margin-bottom: 20px; }
.statement-label::before { content: ''; display: block; width: 56px; height: 3px; background: var(--sky); margin-bottom: 16px; }
.statement-headline { font-family: var(--font-display); font-weight: 800; font-size: clamp(27px, 3.4vw, 40px); letter-spacing: -0.03em; line-height: 1.15; color: var(--midnight); margin-bottom: 24px; max-width: 24ch; }
.statement-body { font-size: 17px; line-height: 1.8; color: var(--body); max-width: 70ch; }

.services { background: var(--paper); padding: var(--pad-y) var(--pad-x); border-top: 1px solid var(--hairline); }
.services-header { max-width: var(--maxw); margin: 0 auto 48px; display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-end; }
.services-headline { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1.1; color: var(--midnight); }
.services-sub { font-size: 17px; line-height: 1.8; color: var(--body); max-width: 46ch; }
.services-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 26px; }
.service-card { padding: 36px 34px 40px; background: #fff; border: 1px solid var(--hairline); transition: border-color 0.22s; }
.service-card:hover { border-color: var(--sky); }
.service-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--navy); margin-bottom: 16px; }
.service-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; color: var(--midnight); margin-bottom: 12px; }
.service-desc { font-size: 15px; line-height: 1.75; color: var(--body); }

.process { background: #fff; padding: var(--pad-y) var(--pad-x); border-top: 1px solid var(--hairline); }
.process-header { max-width: var(--maxw); margin: 0 auto 48px; }
.process-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); display: block; margin-bottom: 20px; }
.process-eyebrow::before { content: ''; display: block; width: 56px; height: 3px; background: var(--sky); margin-bottom: 16px; }
.process-headline { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1.1; color: var(--midnight); }
.process-steps { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 26px; }
.process-step { padding: 34px 32px 38px; border: 1px solid var(--hairline); transition: border-color 0.22s; }
.process-step:hover { border-color: var(--sky); }
.process-step-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--navy); margin-bottom: 16px; }
.process-step-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--midnight); margin-bottom: 10px; }
.process-step-desc { font-size: 15px; line-height: 1.75; color: var(--body); }

.industries { background: var(--paper); padding: var(--pad-y) var(--pad-x); border-top: 1px solid var(--hairline); }
.industries-header { max-width: var(--maxw); margin: 0 auto 48px; }
.industries-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); display: block; margin-bottom: 20px; }
.industries-eyebrow::before { content: ''; display: block; width: 56px; height: 3px; background: var(--sky); margin-bottom: 16px; }
.industries-headline { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1.1; color: var(--midnight); margin-bottom: 20px; max-width: 22ch; }
.industries-sub { font-size: 17px; line-height: 1.8; color: var(--body); max-width: 70ch; }
.industry-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 26px; }
.industry-card { padding: 36px 34px 38px; background: #fff; border: 1px solid var(--hairline); transition: border-color 0.22s; }
.industry-card:hover { border-color: var(--sky); }
.industry-icon { width: 30px; height: 30px; color: var(--navy); margin-bottom: 18px; }
.industry-icon svg { width: 100%; height: 100%; display: block; }
.industry-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--midnight); margin-bottom: 10px; }
.industry-card p { font-size: 15px; line-height: 1.75; color: var(--body); }

.work-section { background: #fff; padding: var(--pad-y) var(--pad-x); border-top: 1px solid var(--hairline); }
.work-inner { max-width: var(--maxw); margin: 0 auto; }
.work-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); display: block; margin-bottom: 20px; }
.work-eyebrow::before { content: ''; display: block; width: 56px; height: 3px; background: var(--sky); margin-bottom: 16px; }
.work-heading { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1.1; color: var(--midnight); margin-bottom: 48px; max-width: 22ch; }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.work-card { border: 1px solid var(--hairline); background: #fff; display: flex; flex-direction: column; transition: border-color 0.22s; }
.work-card:hover { border-color: var(--sky); }
.work-card-top { height: 210px; display: flex; align-items: center; justify-content: center; padding: 28px; }
.work-logo { max-width: 175px; max-height: 84px; width: auto; height: auto; object-fit: contain; }
.work-logo--sm { max-width: 78px; max-height: 78px; }
.work-logo--tall { max-width: 145px; max-height: 108px; }
.work-card-body { padding: 30px 30px 34px; flex: 1; display: flex; flex-direction: column; }
.work-client { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--midnight); margin-bottom: 12px; }
.work-desc { font-size: 15px; line-height: 1.75; color: var(--body); margin-bottom: 20px; flex: 1; }
.work-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.work-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); border: 1px solid var(--hairline); padding: 6px 10px; }
.work-link { font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--sky); padding-bottom: 2px; align-self: flex-start; }
.work-link:hover { color: var(--midnight); }
.work-more { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; margin-top: 48px; padding: 26px 30px; border: 1px solid var(--hairline); text-decoration: none; transition: background 0.2s; }
.work-more:hover { background: var(--paper); }
.work-more-left { display: flex; align-items: center; gap: 14px; }
.work-more-pulse { width: 10px; height: 10px; background: var(--sky); flex-shrink: 0; }
.work-more-text { font-size: 15px; color: var(--body); }
.work-more-cta { font-size: 15px; font-weight: 500; color: var(--navy); border-bottom: 1px solid var(--sky); padding-bottom: 2px; }

.areas { background: var(--paper); padding: var(--pad-y) var(--pad-x); border-top: 1px solid var(--hairline); }
.areas-inner { max-width: var(--maxw); margin: 0 auto; }
.areas-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); display: block; margin-bottom: 20px; }
.areas-eyebrow::before { content: ''; display: block; width: 56px; height: 3px; background: var(--sky); margin-bottom: 16px; }
.areas-headline { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1.1; color: var(--midnight); margin-bottom: 20px; }
.areas-sub { font-size: 17px; line-height: 1.8; color: var(--body); max-width: 64ch; margin-bottom: 48px; }
.areas-note { margin-top: 40px; font-size: 16px; line-height: 1.8; color: var(--body); }
.areas-note a { color: var(--navy); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--sky); }

.faq { background: #fff; padding: var(--pad-y) var(--pad-x); border-top: 1px solid var(--hairline); }
.faq-inner { max-width: 860px; margin: 0 auto; }
.faq-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); display: block; margin-bottom: 20px; }
.faq-eyebrow::before { content: ''; display: block; width: 56px; height: 3px; background: var(--sky); margin-bottom: 16px; }
.faq-headline { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1.1; color: var(--midnight); margin-bottom: 40px; }

.cta-block { background: var(--midnight); color: var(--paper); padding: var(--pad-y) var(--pad-x); border-top: 1px solid var(--hairline-dark); }
.cta-inner { max-width: var(--maxw); margin: 0 auto; }
.cta-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate); display: block; margin-bottom: 24px; }
.cta-eyebrow::before { content: ''; display: block; width: 56px; height: 3px; background: var(--sky); margin-bottom: 16px; }
.cta-headline { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.04em; line-height: 1.05; color: var(--paper); margin-bottom: 22px; max-width: 18ch; }
.cta-headline .accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--sky); }
.cta-sub { font-size: 17px; line-height: 1.8; color: var(--slate); max-width: 62ch; margin-bottom: 36px; }

.contact-section { background: #fff; padding: var(--pad-y) var(--pad-x); border-top: 1px solid var(--hairline); }
.contact-inner { max-width: 860px; margin: 0 auto; }
.contact-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); display: block; margin-bottom: 20px; }
.contact-eyebrow::before { content: ''; display: block; width: 56px; height: 3px; background: var(--sky); margin-bottom: 16px; }
.contact-heading { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1.1; color: var(--midnight); margin-bottom: 18px; }
.contact-sub { font-size: 17px; line-height: 1.8; color: var(--body); margin-bottom: 44px; max-width: 62ch; }
.contact-form { max-width: 100%; }

/* ===================================================================
   PORTFOLIO
   =================================================================== */
.pf-hero { background: var(--midnight); color: var(--paper); padding: 144px var(--pad-x) 104px; }
.pf-hero-inner { max-width: var(--maxw); margin: 0 auto; }
.pf-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate); display: block; margin-bottom: 28px; }
.pf-eyebrow::before { content: ''; display: block; width: 56px; height: 3px; background: var(--sky); margin-bottom: 16px; }
.pf-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6vw, 78px); letter-spacing: -0.04em; line-height: 1.0; color: var(--paper); margin-bottom: 26px; }
.pf-hero h1 .accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--sky); }
.pf-hero p { font-size: 18px; line-height: 1.8; color: var(--slate); max-width: 62ch; }
.pf-section { background: #fff; padding: var(--pad-y) var(--pad-x); }
.pf-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.pf-card { border: 1px solid var(--hairline); background: #fff; display: flex; flex-direction: column; transition: border-color 0.22s; }
.pf-card:hover { border-color: var(--sky); }
.pf-card-top { height: 240px; display: flex; align-items: center; justify-content: center; padding: 30px; }
.pf-card-logo { max-width: 185px; max-height: 92px; width: auto; height: auto; object-fit: contain; }
.pf-card-logo--sm { max-width: 84px; max-height: 84px; }
.pf-card-logo--tall { max-width: 155px; max-height: 116px; }
.pf-card-body { padding: 32px 32px 36px; flex: 1; display: flex; flex-direction: column; }
.pf-card-type { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); margin-bottom: 14px; }
.pf-card-client { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--midnight); margin-bottom: 12px; }
.pf-card-desc { font-size: 15px; line-height: 1.75; color: var(--body); margin-bottom: 20px; flex: 1; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pf-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); border: 1px solid var(--hairline); padding: 6px 10px; }
.pf-link { font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--sky); padding-bottom: 2px; align-self: flex-start; }
.pf-link:hover { color: var(--midnight); }
.pf-card--soon { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px 30px; background: var(--paper); }
.pf-soon-icon { width: 30px; height: 30px; color: var(--navy); margin-bottom: 18px; }
.pf-soon-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--midnight); margin-bottom: 10px; }
.pf-soon-desc { font-size: 15px; line-height: 1.75; color: var(--body); }
.pf-cta { background: var(--midnight); color: var(--paper); padding: var(--pad-y) var(--pad-x); border-top: 1px solid var(--hairline-dark); }
.pf-cta-inner { max-width: var(--maxw); margin: 0 auto; }
.pf-cta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 50px); letter-spacing: -0.04em; line-height: 1.05; color: var(--paper); margin-bottom: 22px; max-width: 18ch; }
.pf-cta h2 .accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--sky); }
.pf-cta p { font-size: 17px; line-height: 1.8; color: var(--slate); margin-bottom: 36px; max-width: 62ch; }

/* ===================================================================
   PRIVACY / LEGAL
   =================================================================== */
.policy-header { background: var(--midnight); color: var(--paper); padding: 144px var(--pad-x) 84px; }
.policy-header-inner { max-width: 820px; margin: 0 auto; }
.policy-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate); display: block; margin-bottom: 26px; }
.policy-eyebrow::before { content: ''; display: block; width: 56px; height: 3px; background: var(--sky); margin-bottom: 16px; }
.policy-header h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 62px); letter-spacing: -0.04em; line-height: 1.0; color: var(--paper); margin-bottom: 20px; }
.policy-updated { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--slate); }
.policy-intro { font-size: 18px; line-height: 1.8; color: var(--slate); margin-top: 22px; }
.policy-body { background: #fff; padding: var(--pad-y) var(--pad-x); max-width: calc(820px + var(--pad-x) * 2); margin: 0 auto; }
.policy-body h2 { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; line-height: 1.2; color: var(--midnight); margin: 44px 0 16px; }
.policy-body h2:first-child { margin-top: 0; }
.policy-body p { font-size: 17px; line-height: 1.8; color: var(--body); margin-bottom: 18px; max-width: 70ch; }
.policy-body ul { margin: 0 0 18px 20px; }
.policy-body li { font-size: 17px; line-height: 1.8; color: var(--body); margin-bottom: 8px; }
.policy-body a { color: var(--navy); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--sky); }

@media (max-width: 1000px) {
  .hero { padding: 124px 24px 84px; }
  .pf-hero, .policy-header { padding: 124px 24px 72px; }
  .services-grid, .process-steps, .industry-grid, .work-grid, .pf-grid { grid-template-columns: 1fr; }

  .hero-stat-row { gap: 0 34px; }
  .hero-stat-row > div { border-right: none; padding: 24px 0 0; margin: 0; }
  .hero-stat-num { font-size: 28px; }
}

/* ── Inline helpers used in page copy ── */
.inline-link { color: var(--navy); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--sky); white-space: nowrap; }
.inline-link:hover { color: var(--midnight); }
.section-note { font-size: 16px; line-height: 1.8; color: var(--body); margin-top: 18px; }
.faq-inner .section-note { margin: -24px 0 40px; }

/* ===================================================================
   MOTION SYSTEM
   The brand has no glows, shadows or gradients — so presence comes from
   precision movement instead. Every animation below uses only transform
   and opacity (compositor-only, no layout thrash), and every one of them
   is derived from the logo's underline rule: things wipe, draw, and rise.
   All of it collapses to nothing under prefers-reduced-motion.
   =================================================================== */

/* ── Scroll progress: the nav's hairline, filling as you read ── */
.scroll-progress {
  position: fixed; top: 90px; left: 0; right: 0; height: 2px;
  background: var(--sky); z-index: 101;
  transform: scaleX(0); transform-origin: left center;
  will-change: transform; pointer-events: none;
}

/* ── The rule device draws itself in when its section arrives ── */
[class*="eyebrow"]::before,
.statement-label::before,
.footer-col-title::before {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
[class*="eyebrow"].rule-in::before,
.statement-label.rule-in::before,
.footer-col-title.rule-in::before { transform: scaleX(1); }

/* ── Hero headline: per-line mask reveal ──
   fill-mode `backwards`, and the hidden state lives ONLY in the keyframe.
   If the animation is throttled, skipped, or never runs, the element falls
   back to its natural styles — visible. Content must never depend on an
   animation firing in order to be readable. */
.hl-line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hl-line > span { display: block; animation: hlRise 1.05s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.hl-line:nth-child(1) > span { animation-delay: 0.08s; }
.hl-line:nth-child(2) > span { animation-delay: 0.20s; }
.hl-line:nth-child(3) > span { animation-delay: 0.32s; }
@keyframes hlRise { from { transform: translateY(108%); } to { transform: translateY(0); } }

/* ── Supporting hero content rises behind the headline ── */
@keyframes enterRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-inner > .hero-eyebrow,
.hero-inner > .hero-sub,
.hero-inner > .hero-tagline,
.hero-inner > .hero-actions,
.hero-inner > .hero-stat-row {
  animation: enterRise 0.85s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.hero-inner > .hero-eyebrow   { animation-delay: 0.02s; }
.hero-inner > .hero-sub       { animation-delay: 0.44s; }
.hero-inner > .hero-tagline   { animation-delay: 0.54s; }
.hero-inner > .hero-actions   { animation-delay: 0.64s; }
.hero-inner > .hero-stat-row  { animation-delay: 0.76s; }

/* Interior page heroes get the same entrance, automatically */
.city-hero-inner > *, .pf-hero-inner > *, .policy-header-inner > * {
  animation: enterRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.city-hero-inner > *:nth-child(1), .pf-hero-inner > *:nth-child(1), .policy-header-inner > *:nth-child(1) { animation-delay: 0.04s; }
.city-hero-inner > *:nth-child(2), .pf-hero-inner > *:nth-child(2), .policy-header-inner > *:nth-child(2) { animation-delay: 0.14s; }
.city-hero-inner > *:nth-child(3), .pf-hero-inner > *:nth-child(3), .policy-header-inner > *:nth-child(3) { animation-delay: 0.26s; }
.city-hero-inner > *:nth-child(4), .pf-hero-inner > *:nth-child(4), .policy-header-inner > *:nth-child(4) { animation-delay: 0.38s; }

/* ── Link underlines wipe in from the left, out to the right ── */
.nav-link, .footer-nav a, .footer-contact a, .work-link, .pf-link,
.inline-link, .area-arrow, .market-pill {
  position: relative;
}
.nav-link, .footer-nav a, .footer-contact a, .work-link, .pf-link,
.inline-link, .area-arrow {
  border-bottom: none !important; text-decoration: none;
  display: inline-block; padding-bottom: 3px;
}
.nav-link::after, .footer-nav a::after, .footer-contact a::after,
.work-link::after, .pf-link::after, .inline-link::after, .area-arrow::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--sky);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-link::after, .pf-link::after, .inline-link::after, .area-arrow::after { transform: scaleX(1); transform-origin: left center; }
.nav-link:hover::after, .nav-link[aria-current="page"]::after,
.footer-nav a:hover::after, .footer-contact a:hover::after {
  transform: scaleX(1); transform-origin: left center;
}
.work-link:hover::after, .pf-link:hover::after,
.inline-link:hover::after, .area-arrow:hover::after {
  transform: scaleX(0); transform-origin: right center;
}
.area-card:hover .area-arrow::after { transform: scaleX(0); transform-origin: right center; }

/* ── Tiles: the client mark lifts slightly inside its panel ── */
.work-card-top, .pf-card-top { overflow: hidden; }
.work-card-top img, .pf-card-top img { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.work-card:hover .work-card-top img, .pf-card:hover .pf-card-top img { transform: scale(1.045); }

/* ── "Currently booking" indicator: square dot, square ring ── */
.work-more-pulse { position: relative; animation: pulseDot 2.6s ease-in-out infinite; }
.work-more-pulse::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid var(--sky);
  animation: pulseRing 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes pulseRing {
  0%        { transform: scale(1);   opacity: 1; }
  75%, 100% { transform: scale(3.8); opacity: 0; }
}

/* ── Buttons: the fill wipes across rather than cross-fading ──
   Each button wipes AWAY from the ground it sits on, never toward it —
   a Midnight wipe on a Midnight hero would make the button disappear. */
.btn-primary, .btn-white, .btn-full, .nav-cta, .btn-ghost { position: relative; overflow: hidden; z-index: 0; }
.btn-primary::before, .btn-white::before, .btn-full::before, .nav-cta::before, .btn-ghost::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* On dark grounds — wipe lighter, so the button gains presence */
.btn-primary::before, .nav-cta::before { background: var(--paper); }   /* Sky  -> Paper */
.btn-white::before                     { background: var(--sky); }     /* Paper -> Sky  */
.btn-ghost::before                     { background: var(--sky); }     /* clear -> Sky  */
/* On light grounds — wipe darker */
.btn-full::before                      { background: var(--midnight); }/* Navy -> Midnight */

.btn-primary:hover::before, .btn-white:hover::before, .btn-full:hover::before,
.nav-cta:hover::before, .btn-ghost:hover::before {
  transform: scaleX(1); transform-origin: left center;
}
.btn-primary:hover, .btn-white:hover, .nav-cta:hover { color: var(--midnight); }
.btn-ghost:hover { color: var(--midnight); border-color: var(--sky); }
.btn-full:hover  { color: var(--paper); }

/* ── Focus: visible, on-brand, never removed ── */
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.site-nav :focus-visible, .city-hero :focus-visible, .hero :focus-visible { outline-color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  [class*="eyebrow"]::before, .statement-label::before, .footer-col-title::before { transform: scaleX(1); }
  .hl-line > span { transform: none; animation: none; }
  .hero-inner > *, .city-hero-inner > *, .pf-hero-inner > *, .policy-header-inner > * { animation: none; }
  .work-more-pulse, .work-more-pulse::after { animation: none; }
  .work-more-pulse::after { display: none; }
}

/* ── SOCIAL BUTTONS ──
   Square hairline button matching the tag/pill language. The glyph and its
   border both take Sky on hover, so the highlight reads as brand blue rather
   than importing a foreign palette colour. */
.socials { display: flex; gap: 10px; align-self: flex-start; }
.social-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--hairline-dark);
  color: var(--slate); text-decoration: none;
  transition: color 0.22s, border-color 0.22s, background 0.22s;
}
.social-btn svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.social-btn:hover,
.social-btn:focus-visible {
  color: var(--midnight);
  background: var(--sky);
  border-color: var(--sky);
}

/* ── Footer contact CTA ── */
.footer-cta {
  display: inline-block; align-self: flex-start; margin-top: 28px;
  font-size: 15px; font-weight: 500; color: var(--paper); text-decoration: none;
  padding-bottom: 3px; position: relative;
}
.footer-cta::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--sky); transform: scaleX(1); transform-origin: left center;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-cta:hover::after { transform: scaleX(0); transform-origin: right center; }

/* ── Footer on narrow screens ──
   flex-wrap let the brand and Company columns pair up while Contact fell to
   its own row, which read as lopsided. Stack all three instead. */
@media (max-width: 700px) {
  footer.site-footer { padding: 46px 24px 34px; }
  .footer-top { flex-direction: column; flex-wrap: nowrap; gap: 34px; }
  .footer-col { width: 100%; }
  .footer-logo { margin-bottom: 18px !important; }
  .footer-logo .wm { --wm: 30px; }
  .footer-col-title { margin-bottom: 14px; }
  .footer-col .footer-nav { gap: 13px; }
  .footer-bottom { margin-top: 32px; padding-top: 22px; flex-direction: column; gap: 10px; }
}

/* ── FOUNDER BIO SPLIT ── */
.bio-split { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 56px; align-items: start; }
.bio-portrait { margin: 0; border: 1px solid var(--hairline); overflow: hidden; background: var(--paper); }
.bio-portrait img { display: block; width: 100%; height: auto; }
.bio-copy > h2 { margin-bottom: 24px; }
@media (max-width: 900px) {
  .bio-split { grid-template-columns: 1fr; gap: 36px; }
  .bio-portrait { max-width: 380px; }
}

/* ── HOMEPAGE WORK INDEX ──
   The homepage teases the work as an editorial index rather than repeating
   the full portfolio cards. Hairline rows, client mark held in its own
   brand-colour square, everything else deferred to /portfolio. */
.work-index { border-top: 1px solid var(--hairline); }
.work-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center; gap: 28px;
  padding: 22px 4px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--hairline);
  transition: background 0.22s;
}
.work-row:hover { background: var(--paper); }
.work-row-mark {
  width: 96px; height: 72px; display: flex; align-items: center;
  justify-content: center; padding: 12px; overflow: hidden;
}
.work-mark {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-mark--sm   { max-width: 40px;  max-height: 40px; }
.work-mark--tall { max-width: 62px;  max-height: 52px; }
.work-row:hover .work-mark { transform: scale(1.07); }
.work-row-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.work-row-client {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: -0.02em; color: var(--midnight); line-height: 1.25;
}
.work-row-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted, #6B7280); line-height: 1.5;
}
.work-row-meta { color: var(--body); }
.work-row-sep { color: var(--sky); margin: 0 4px; }
.work-row-go {
  font-size: 14px; font-weight: 500; color: var(--navy); white-space: nowrap;
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.24s, transform 0.24s;
}
.work-row:hover .work-row-go, .work-row:focus-visible .work-row-go {
  opacity: 1; transform: none;
}
.work-all {
  display: inline-block; margin-top: 34px; position: relative;
  font-size: 15px; font-weight: 500; color: var(--navy);
  text-decoration: none; padding-bottom: 3px;
}
.work-all::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--sky); transform: scaleX(1); transform-origin: left center;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-all:hover::after { transform: scaleX(0); transform-origin: right center; }

@media (max-width: 700px) {
  .work-row { grid-template-columns: 68px minmax(0, 1fr); gap: 18px; padding: 18px 2px; }
  .work-row-mark { width: 68px; height: 58px; padding: 9px; }
  .work-row-client { font-size: 17px; }
  .work-row-go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .work-row-go { opacity: 1; transform: none; }
}

/* ── FEATURED PORTFOLIO CARD ──
   Spans the grid and runs horizontally, so a five-project grid reads as
   one feature plus a 2x2 rather than leaving an orphan row. */
.pf-card--featured {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(280px, 42%) 1fr;
  text-decoration: none; color: inherit;
}
.pf-card--featured .pf-card-top { height: 100%; min-height: 300px; }
.pf-card--featured .pf-card-body { padding: 44px 44px 46px; justify-content: center; }
.pf-card--featured .pf-card-client { font-size: 27px; margin-bottom: 14px; }
.pf-card--featured .pf-card-desc { font-size: 16px; line-height: 1.8; flex: 0 0 auto; }
.pf-card--featured .pf-card-type { color: var(--sky); }
.pf-card-logo--nelson { max-width: 168px; max-height: 148px; }
.pf-card--featured .pf-card-logo--nelson { max-width: 210px; max-height: 185px; }
@media (max-width: 900px) {
  .pf-card--featured { grid-template-columns: 1fr; }
  .pf-card--featured .pf-card-top { min-height: 240px; }
  .pf-card--featured .pf-card-body { padding: 32px 32px 36px; }
  .pf-card--featured .pf-card-client { font-size: 22px; }
}
.work-mark--nelson { max-width: 46px; max-height: 42px; }

/* ── CASE STUDY ── */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0; border-top: 1px solid var(--hairline);
}
.stat { padding: 30px 28px 32px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.stat:last-child { border-right: none; }
.stat-num {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.03em; line-height: 1; color: var(--midnight); margin-bottom: 12px;
}
.stat-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--body); line-height: 1.5;
}
.cs-split { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 52px; align-items: start; }
.cs-mark {
  margin: 0; border: 1px solid var(--hairline); aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center; padding: 46px;
}
.cs-mark img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cs-caveat {
  margin-top: 30px; padding: 22px 24px; background: var(--paper);
  border-left: 3px solid var(--sky); font-size: 16px; line-height: 1.8; color: var(--body);
}
.sec--tint .cs-caveat { background: #fff; }
@media (max-width: 900px) {
  .cs-split { grid-template-columns: 1fr; gap: 32px; }
  .cs-mark { max-width: 260px; padding: 34px; }
  .stat { border-right: none; }
}
.pf-links { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.pf-link--muted { color: var(--body); }
.pf-link--muted::after { background: var(--hairline); }

/* ── CASE STUDIES INDEX ── */
.cs-list { display: grid; gap: 30px; }
.cs-card {
  display: grid; grid-template-columns: minmax(200px, 300px) 1fr;
  border: 1px solid var(--hairline); background: #fff;
  text-decoration: none; color: inherit;
  transition: border-color 0.22s;
}
.cs-card:hover { border-color: var(--sky); }
.cs-card-mark {
  display: flex; align-items: center; justify-content: center;
  padding: 46px; min-height: 260px; overflow: hidden;
}
.cs-card-mark img {
  max-width: 150px; max-height: 132px; width: auto; height: auto; object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-card:hover .cs-card-mark img { transform: scale(1.05); }
.cs-card-body { display: flex; flex-direction: column; padding: 40px 42px 42px; justify-content: center; }
.cs-card-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--navy); margin-bottom: 14px;
}
.cs-card-client {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  letter-spacing: -0.03em; color: var(--midnight); margin-bottom: 22px;
}
.cs-card-metric {
  font-family: var(--font-display); font-weight: 800; font-size: 44px;
  letter-spacing: -0.04em; line-height: 1; color: var(--navy);
}
.cs-card-metric-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--body); margin-top: 10px;
  padding-bottom: 22px; border-bottom: 1px solid var(--hairline); margin-bottom: 22px;
}
.cs-card-blurb { font-size: 16px; line-height: 1.8; color: var(--body); margin-bottom: 22px; }
.cs-card-go {
  font-size: 15px; font-weight: 500; color: var(--navy);
  align-self: flex-start; position: relative; padding-bottom: 3px;
}
.cs-card-go::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--sky); transform: scaleX(1); transform-origin: left center;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-card:hover .cs-card-go::after { transform: scaleX(0); transform-origin: right center; }
.cs-more { margin-top: 40px; font-size: 16px; line-height: 1.8; color: var(--body); max-width: 70ch; }
.cs-more a { color: var(--navy); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--sky); }
@media (max-width: 900px) {
  .cs-card { grid-template-columns: 1fr; }
  .cs-card-mark { min-height: 200px; padding: 34px; }
  .cs-card-body { padding: 32px 30px 34px; }
  .cs-card-metric { font-size: 36px; }
}

/* ── Footer contact rows ──
   Must come after the motion block, which sets .footer-contact a to
   inline-block for the underline wipe. Here the icon sits in its own grid
   column and the underline moves to the inner span, so it hugs the text
   rather than spanning the icon too. */
.footer-contact a {
  display: grid; grid-template-columns: 18px 1fr;
  align-items: center; gap: 12px; padding-bottom: 0;
}
.footer-contact a::after { display: none; }
.footer-contact a > span {
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color 0.18s; justify-self: start;
}
.footer-contact a:hover > span { border-bottom-color: var(--sky); }
.footer-contact .footer-contact-area {
  /* start-aligned: the block is two lines, so the pin must sit on the first
     line rather than float between them */
  display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 12px;
}
.footer-contact .footer-contact-area .fc-icon { margin-top: 3px; }

/* ── PULL QUOTE / TESTIMONIAL ──
   Set in the accent serif at display size. The rule device runs down the
   left edge instead of using quotation-mark ornament. */
.pullquote { margin: 0; max-width: 880px; }
.pullquote blockquote {
  margin: 0; padding-left: 30px; border-left: 3px solid var(--sky);
}
.pullquote blockquote p {
  font-family: var(--font-accent); font-style: italic; font-weight: 400;
  font-size: clamp(21px, 2.4vw, 28px); line-height: 1.45;
  color: var(--midnight); margin-bottom: 22px; max-width: 46ch;
}
.pullquote blockquote p:last-child { margin-bottom: 0; }
.pullquote figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin-top: 30px; padding-left: 33px;
}
.pq-name {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em; color: var(--midnight);
}
.pq-role {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--body);
}
.pq-role::before { content: '\00b7'; color: var(--sky); margin-right: 10px; }
@media (max-width: 640px) {
  .pullquote blockquote { padding-left: 20px; }
  .pullquote figcaption { padding-left: 23px; }
}

/* ── Testimonial inside a case-study card ── */
.cs-card-quote {
  display: block; border-left: 3px solid var(--sky);
  padding-left: 24px; margin: 4px 0 26px;
}
.cs-quote-text {
  display: block;
  font-family: var(--font-accent); font-style: italic; font-weight: 400;
  font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5;
  color: var(--midnight); max-width: 52ch;
}
.cs-quote-attr {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 16px;
}
.cs-card-blurb { margin-bottom: 22px; }
@media (max-width: 640px) {
  .cs-card-quote { padding-left: 18px; }
}

/* ── Second profile on the leadership page ── */
.bio-role {
  font-size: 17px; line-height: 1.7; color: var(--midnight);
  font-weight: 600; margin-bottom: 20px;
}

/* ── LEADERSHIP PROFILE IDENTITY BLOCK ──
   Name, rule, italic title: the same three-part construction as the
   wordmark, so a person's identity block echoes the brand mark. */
.bio-id-col { display: flex; flex-direction: column; align-items: flex-start; }
.bio-id { margin-top: 22px; --bio-n: clamp(22px, 2.2vw, 27px); }
.bio-name {
  display: inline-block;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--bio-n); letter-spacing: -0.03em;
  color: var(--midnight); margin: 0;
  /* line-height under 1 trims the font's descent space, which is what put a
     dead gap between the name and its rule (neither name has a descender). */
  line-height: 0.74;
  padding-bottom: calc(var(--bio-n) * 0.075);
  border-bottom: max(2px, calc(var(--bio-n) * 0.115)) solid var(--sky);
}
.bio-title {
  display: block; margin-top: calc(var(--bio-n) * 0.18);
  font-family: var(--font-accent); font-style: italic; font-weight: 400;
  font-size: calc(var(--bio-n) * 0.92); line-height: 1; color: var(--navy);
}
.bio-copy > h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 2.9vw, 34px); letter-spacing: -0.03em;
  line-height: 1.15; color: var(--midnight); margin-bottom: 24px;
}
@media (max-width: 900px) {
  .bio-id-col { align-items: flex-start; }
  .bio-id { margin-top: 18px; margin-bottom: 6px; }
}

/* ── Serif accent line in a hero ──
   Same treatment as the homepage tagline, for heroes whose headline has no
   natural place to split the italic accent. */
.hero-serif-line {
  display: block;
  font-family: var(--font-accent); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2.3vw, 28px); line-height: 1.3;
  color: var(--sky); max-width: 46ch;
}

/* ── Location mark under a leadership profile ── */
.bio-loc {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--body);
}
.bio-loc svg { width: 15px; height: 15px; color: var(--sky); flex-shrink: 0; }

/* ── Mobile tap targets ──
   Footer links were 19-29px tall. Google wants ~48px. Padding grows the hit
   area while the reduced gap keeps the visual rhythm unchanged. */
@media (max-width: 700px) {
  .footer-col .footer-nav { gap: 0; }
  .footer-nav a { padding: 11px 0; }
  .footer-contact { gap: 2px; }
  .footer-contact a { padding: 13px 0; }
  .footer-contact .footer-contact-area { padding: 8px 0 0; }
  .footer-cta { padding: 12px 0; margin-top: 18px; }
  .footer-cta::after { bottom: 12px; }
  .footer-bottom a { display: inline-block; padding: 12px 0; }
  .social-btn { width: 48px; height: 48px; }
}

/* ── Proof band: routes market traffic to the case study ── */
.proof-band {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
  justify-content: space-between; padding: 30px 34px;
  border: 1px solid var(--hairline); background: #fff;
  text-decoration: none; color: inherit; transition: border-color 0.22s;
}
.proof-band:hover { border-color: var(--sky); }
.proof-copy { display: block; max-width: 62ch; }
.proof-eyebrow {
  display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); margin-bottom: 10px;
}
.proof-line { display: block; font-size: 16px; line-height: 1.7; color: var(--body); }
.proof-go {
  font-size: 15px; font-weight: 500; color: var(--navy); white-space: nowrap;
  position: relative; padding-bottom: 3px;
}
.proof-go::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--sky); transform: scaleX(1); transform-origin: left center;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.proof-band:hover .proof-go::after { transform: scaleX(0); transform-origin: right center; }
@media (max-width: 700px) { .proof-band { padding: 26px 24px; } }