/* UrbIN Networks site: page layout on top of the design system (tokens.css + bundle.css).
   Colours are tokens only; spacing follows "Spacing and flow" (urbin-space-*). */
html { background: var(--urbin-navy-70); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--urbin-navy-70); color: var(--urbin-surface-ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; }
h1, h2, h3, .u-headline { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--urbin-focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 16px; background: var(--urbin-yellow-base); color: var(--urbin-navy-base); font-family: var(--font-mono); font-size: 12px; }
.skip:focus { left: 8px; }
.gutter { padding-inline: clamp(var(--urbin-layout-margin-mobile), 5.5vw, var(--urbin-layout-margin-desktop)); }
.u-section__inner, .gutter > * { box-sizing: border-box; }
.eyebrow { margin: 0 0 var(--urbin-space-16); color: var(--urbin-surface-muted); text-transform: uppercase; }
.body { margin: 0 0 var(--urbin-space-20); color: var(--urbin-surface-body); }
.lead { margin: var(--urbin-space-30) 0 0; max-width: 760px; color: var(--urbin-surface-body); }
.accent { color: var(--urbin-surface-accent); }
.prose a, .body a, .contact-aside a, .empty a { color: var(--urbin-surface-accent); text-underline-offset: 4px; }
.u-surface-light .prose a, .u-surface-light .body a, .u-surface-lavender .contact-aside a, .u-surface-light .empty a { color: var(--urbin-teal-base); }

/* ---------- header ---------- */
/* Pinned header (Mike 2026-11-14): sticky on inner pages, fixed and transparent over the home hero; it turns solid navy
   and compacts once the page scrolls (site.js toggles .is-scrolled). */
html { scroll-padding-top: 96px; }
.site-header { position: sticky; top: 0; z-index: 50; padding: clamp(14px, 2.4vw, 32px) clamp(var(--urbin-layout-margin-mobile), 3.5vw, 50px); background: var(--urbin-navy-70);
  transition: padding .2s ease-out, background-color .2s ease-out, box-shadow .2s ease-out; }
.site-header.is-overlay { position: fixed; inset: 0 0 auto 0; background: transparent; }
.site-header.is-scrolled { padding-block: 10px; background: var(--urbin-alpha-navy-70-85); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 var(--urbin-alpha-white-15); }
.site-header .u-logo { transition: width .2s ease-out; }
.site-header.is-scrolled .u-logo { width: 120px; }
.site-header .u-header { align-items: center; }
@media (prefers-reduced-motion: reduce) { .site-header, .site-header .u-logo { transition: none; } }
.menu-btn { display: none; }
.mnav[hidden] { display: none; }
@media (max-width: 860px) {
  .site-header .u-header__nav { display: none; }
  .menu-btn { display: flex; flex-direction: column; justify-content: center; gap: 6px; position: absolute; right: clamp(var(--urbin-layout-margin-mobile), 3.5vw, 50px); top: 50%; transform: translateY(-50%); width: 48px; height: 48px; padding: 12px; background: var(--urbin-alpha-navy-70-65); border: 1px solid var(--urbin-alpha-white-15); border-radius: var(--urbin-radius-pill); cursor: pointer; }
  .menu-btn span { display: block; height: 1.5px; background: var(--urbin-neutral-white); transition: transform .2s ease-out, opacity .2s ease-out; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .mnav { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; gap: var(--urbin-space-24); padding: 120px var(--urbin-layout-margin-mobile) 40px; background: var(--urbin-navy-70); overflow-y: auto; }
  .mnav a { color: var(--urbin-neutral-white); text-decoration: none; }
  .mnav__cta { align-self: flex-start; margin-top: var(--urbin-space-12); padding: 14px 22px; border-radius: var(--urbin-radius-pill); background: var(--urbin-yellow-base); color: var(--urbin-navy-base) !important; text-transform: uppercase; }
  .mnav__sub { display: flex; flex-wrap: wrap; gap: var(--urbin-space-16) var(--urbin-space-24); margin-top: var(--urbin-space-24); padding-top: var(--urbin-space-24); border-top: 1px solid var(--urbin-alpha-white-15); }
  .mnav__sub a { color: var(--urbin-lavender-base); text-transform: uppercase; }
  body.nav-open { overflow: hidden; }
  /* backdrop-filter makes the header the containing block for the fixed menu, which collapsed it to a strip once the
     page had scrolled. While the menu is open the header is plain navy, so the menu fills the screen again. */
  body.nav-open .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--urbin-navy-70); }
}

/* ---------- home hero (Spacing and flow, section 1) ---------- */
.hero { position: relative; isolation: isolate; background: var(--urbin-navy-70); --photo-h: clamp(560px, 62vw, 960px); --overlap: clamp(48px, 4.9vw, 70px); }
.hero__photo { position: absolute; inset: 0 0 auto 0; height: var(--photo-h); z-index: -1; overflow: hidden; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; }
.hero__photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(20deg, var(--urbin-navy-100) 8%, var(--urbin-alpha-navy-base-65) 38%, var(--urbin-alpha-navy-base-00) 70%),
              linear-gradient(180deg, var(--urbin-alpha-navy-70-65) 0%, var(--urbin-alpha-navy-70-00) 22%, var(--urbin-alpha-navy-70-00) 78%, var(--urbin-navy-70) 100%); }
.hero__labels { position: absolute; inset: 0 0 auto 0; height: var(--photo-h); pointer-events: none; }
.hero__labels .u-maplabel { position: absolute; transform: translate(-50%, -50%); }
/* label anchors measured from the render: 165 Halsey at 18.6% / 44%, 60 Hudson at 81.4% / 42% of the 16:9 image, re-mapped for the 62vw crop */
.hero__labels .hl-a { left: 15.4%; top: 38.5%; }
.hero__labels .hl-b { left: 84.6%; top: 36.5%; }
.hero__top { min-height: calc(var(--photo-h) - var(--overlap)); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 140px; padding-bottom: clamp(var(--urbin-space-40), 3.5vw, var(--urbin-space-48)); box-sizing: border-box; }
.hero__headline { max-width: 820px; }
.hero__sub { margin: var(--urbin-space-24) 0 var(--urbin-space-30); max-width: 640px; color: var(--urbin-surface-body); }
.hero__band { position: relative; padding-bottom: clamp(var(--urbin-space-60), 9vw, 130px); }
.hero__band .u-dotgrid { top: -200px; bottom: -120px; }
@media (max-width: 699px) {
  .hero { --photo-h: 125vw; }
  .hero__labels { display: none; }
  .hero__top { min-height: 0; padding-top: calc(var(--photo-h) * .70); }
  .hero__headline .u-headline { font-size: 40px; }
  .site-header .u-logo { width: 112px; height: auto; }
}

/* ---------- grids ---------- */
.cards { position: relative; z-index: 1; max-width: var(--urbin-layout-content); margin-inline: auto; display: grid; gap: var(--urbin-space-20); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: clamp(var(--urbin-space-48), 7vw, var(--urbin-space-100)); }
.cards--5 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cards .u-card { min-height: 0; height: 100%; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--urbin-space-40) clamp(var(--urbin-space-40), 6vw, var(--urbin-space-100)); align-items: start; }
.split__body { max-width: 620px; }
.split__body > .u-fluid { margin-top: var(--urbin-space-12); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- title band (inner pages) ---------- */
.title-band { position: relative; isolation: isolate; overflow: hidden; background: var(--urbin-navy-70); padding-block: clamp(var(--urbin-space-48), 7vw, var(--urbin-space-100)) clamp(var(--urbin-space-60), 9vw, var(--urbin-space-130)); }
.title-band .u-dotgrid { z-index: -1; }
.title-band__inner { max-width: calc(var(--urbin-layout-content) + 2 * var(--urbin-layout-margin-desktop)); margin-inline: auto; box-sizing: border-box; }
.title-band .u-headline { max-width: 1000px; }
.title-band .filter { margin-top: var(--urbin-space-40); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--urbin-space-20); margin: 0 0 clamp(var(--urbin-space-48), 6vw, var(--urbin-space-80)); padding-block: var(--urbin-space-24); border-block: 1px solid var(--urbin-surface-line); }
.stats--light { border-color: var(--urbin-alpha-navy-base-65); }
.stat__fig { margin: 0; color: var(--urbin-surface-ink); line-height: 1; white-space: nowrap; }
.stat--lit .stat__fig { color: var(--urbin-surface-accent); }
.stat__label { margin: var(--urbin-space-12) 0 0; color: var(--urbin-surface-muted); }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } .stat__fig { font-size: 40px; } }
/* Between phone and desktop width three equal columns are narrower than the figures in them ("PATH Tunnel" is
   261px wide at 48px type and the column was 194px on an iPhone Duo open and upright), so the figures ran into
   each other. Here each column takes its content's width and the type scales with the screen. */
@media (min-width: 641px) and (max-width: 1023px) {
  .stats { grid-template-columns: repeat(3, auto); justify-content: space-between; }
  .stat__fig { font-size: min(48px, 6.2vw); }
}

/* ---------- home sections ---------- */
.story .split { align-items: end; }
.ny__head { max-width: 760px; margin-bottom: clamp(var(--urbin-space-40), 6vw, var(--urbin-space-80)); }
.ny__head .body { margin-top: var(--urbin-space-30); }
.ny__cta, .who__cta, .why__cta, .glance__cta { margin-top: var(--urbin-space-40); }
.iso figcaption { margin-top: var(--urbin-space-12); color: var(--urbin-surface-muted); }
.who .u-headline { max-width: 900px; }

/* ---------- what we do / projects ---------- */
.glance { margin-top: clamp(var(--urbin-space-60), 9vw, var(--urbin-space-120)); }
.glance > .u-headline { margin-bottom: var(--urbin-space-40); }
.facts { margin: 0; display: grid; gap: 0; }
.facts__row { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--urbin-space-24); padding-block: var(--urbin-space-24); border-top: 1px solid var(--urbin-surface-line); }
.facts__row:last-child { border-bottom: 1px solid var(--urbin-surface-line); }
.facts dt { color: var(--urbin-surface-ink); padding-top: 4px; }
.facts dd { margin: 0; color: var(--urbin-surface-body); max-width: 760px; }
@media (max-width: 720px) { .facts__row { grid-template-columns: 1fr; gap: var(--urbin-space-8); } }
.includes { margin-top: clamp(var(--urbin-space-60), 9vw, var(--urbin-space-120)); }
.includes > h3 { margin: 0 0 var(--urbin-space-40); }   /* the child selector matters: a bare h3 also hit every card title */
.bullets { margin: 0 0 var(--urbin-space-24); padding-left: 1.2em; color: var(--urbin-surface-body); }
.bullets li { margin-bottom: var(--urbin-space-12); }
.bullets li::marker { color: var(--urbin-surface-accent); }
.proj-route .split { margin-bottom: clamp(var(--urbin-space-48), 7vw, var(--urbin-space-100)); align-items: end; }
.legs { max-width: 1107px; margin: 0 auto clamp(var(--urbin-space-60), 9vw, var(--urbin-space-120)); }
.legs .u-fluid { min-width: 0; }
.legs__panels { margin: var(--urbin-space-30) 0 0 auto; max-width: 520px; color: var(--urbin-surface-body); }
.legs__panels .leg { margin: 0; }
@media (max-width: 720px) { .legs { overflow-x: auto; } .legs .u-fluid { min-width: 640px; } .legs__panels { margin-left: 0; } }
.iso { margin: 0; }
.iso__zoom { display: block; cursor: zoom-in; }
.iso img { display: block; width: 100%; }

/* ---------- audiences, values ---------- */
.aud__row { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: var(--urbin-space-40); align-items: start; padding-block: clamp(var(--urbin-space-30), 4vw, var(--urbin-space-48)); border-top: 1px solid var(--urbin-surface-line); }
.aud__row:last-child { border-bottom: 1px solid var(--urbin-surface-line); }
.aud__text h3 { margin: var(--urbin-space-8) 0 var(--urbin-space-16); }
.aud__text .body { max-width: 640px; margin: 0; }
.aud__cta { padding-top: var(--urbin-space-30); }
@media (max-width: 760px) { .aud__row { grid-template-columns: 1fr; gap: var(--urbin-space-16); } .aud__cta { padding-top: 0; } }
.mv__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--urbin-space-60); }
.mv__grid .urbin-heading-subhead { margin: 0 0 var(--urbin-space-24); color: var(--urbin-surface-ink); }
.values__list { list-style: none; margin: clamp(var(--urbin-space-48), 7vw, var(--urbin-space-100)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--urbin-space-40) var(--urbin-space-30); }
.values__list li { padding-top: var(--urbin-space-20); border-top: 1px solid var(--urbin-surface-line); }
.values__list h3 { margin: var(--urbin-space-12) 0; }
.values__list .urbin-mono-eyebrow, .aud__text .urbin-mono-eyebrow { color: var(--urbin-surface-muted); margin: 0; }
.why .lead { margin-bottom: clamp(var(--urbin-space-40), 6vw, var(--urbin-space-80)); }

/* ---------- closer ---------- */
.closer .u-headline--display { max-width: 980px; margin: 0; }
.closer__body { margin: var(--urbin-space-30) 0 0; max-width: 680px; color: var(--urbin-surface-body); }
.closer__actions { margin-top: clamp(var(--urbin-space-40), 6vw, var(--urbin-space-60)); display: flex; flex-wrap: wrap; gap: var(--urbin-space-20); }
/* The request form in the closing band (Mike 2026-11-15: the request belongs here, not a page away, in the same
   row design as the long form, with less space around it). */
.u-section.closer--form { padding-block: clamp(var(--urbin-space-48), 6vw, var(--urbin-space-80)); }
.closer__form { margin-top: clamp(var(--urbin-space-30), 4vw, var(--urbin-space-48)); }
.quick-route { scroll-margin-top: var(--urbin-space-8); }
.rq-three { align-items: flex-end; }   /* three fields in a row: a label that wraps must not push its field below the others */   /* the page already keeps clear of the pinned header (scroll-padding-top) */
@media (max-width: 699px) { .closer .u-headline--display { font-size: 56px; } }

/* ---------- forms ---------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(var(--urbin-space-40), 5vw, var(--urbin-space-80)); align-items: start; max-width: var(--urbin-layout-content); margin-inline: auto; }
.form-layout .u-form-stack { max-width: var(--urbin-layout-form); }
.form-layout .u-row__content > * + * { margin-top: var(--urbin-space-20); }
.form-layout > * { min-width: 0; }
.contact-aside { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--urbin-space-30); max-width: var(--urbin-layout-form); color: var(--urbin-surface-ink); }
.page-request .contact-aside { grid-template-columns: 1fr; max-width: 640px; }
.contact-aside .eyebrow { margin-bottom: var(--urbin-space-8); color: var(--urbin-surface-body); }
.contact-aside .body, .contact-aside p { margin: 0; color: var(--urbin-surface-body); }
.contact-aside h3 { margin: 0; }
.form-status { margin: 0; min-height: 1.5em; color: var(--urbin-yellow-base); }
@media (max-width: 1000px) { .form-layout { grid-template-columns: 1fr; } }

/* ---------- resources, legal, agent ---------- */
.res .empty { color: var(--urbin-surface-body); max-width: 680px; }
.legal .u-section__inner { max-width: 860px; }
.prose { color: var(--urbin-surface-body); font-size: 17px; line-height: 1.6; }
.prose h2 { margin: var(--urbin-space-48) 0 var(--urbin-space-16); color: var(--urbin-surface-ink); font-size: 22px; line-height: 1.25; font-weight: 700; }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--urbin-space-16); }
.prose li { margin-bottom: var(--urbin-space-8); }
.table-wrap { overflow-x: auto; margin: 0 0 var(--urbin-space-24); }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--urbin-surface-line); }
.agent-md { white-space: pre-wrap; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--urbin-surface-body); background: var(--urbin-lavender-10); padding: var(--urbin-space-30); border-radius: var(--urbin-radius-label); }

/* ---------- footer ---------- */
.foot { background: var(--urbin-navy-100); color: var(--urbin-surface-ink); padding: clamp(var(--urbin-space-60), 8vw, var(--urbin-space-100)) clamp(var(--urbin-layout-margin-mobile), 5.5vw, var(--urbin-layout-margin-desktop)) var(--urbin-space-40); }
.foot__inner { max-width: var(--urbin-layout-content); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--urbin-space-60); }
.foot__tag { margin: var(--urbin-space-24) 0 0; color: var(--urbin-lavender-base); max-width: 320px; }
.foot__tag .accent { color: var(--urbin-yellow-base); }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--urbin-space-40); }
.foot__h { margin: 0 0 var(--urbin-space-16); color: var(--urbin-lavender-60); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--urbin-space-12); }
/* inline-block: a link that wraps onto two lines is then one solid box to tap, with no dead gap beside its short first line */
.foot ul a { display: inline-block; color: var(--urbin-lavender-base); text-decoration: none; overflow-wrap: anywhere; }
.foot ul a:hover { color: var(--urbin-yellow-base); }
.foot__legal { max-width: var(--urbin-layout-content); margin: clamp(var(--urbin-space-48), 6vw, var(--urbin-space-80)) auto 0; padding-top: var(--urbin-space-24); border-top: 1px solid var(--urbin-alpha-white-15); display: flex; flex-wrap: wrap; gap: var(--urbin-space-12) var(--urbin-space-40); }
.foot__legal p { margin: 0; color: var(--urbin-lavender-60); text-transform: uppercase; }
.foot__legal a { color: var(--urbin-lavender-base); }
@media (max-width: 800px) { .foot__inner { grid-template-columns: 1fr; } }

@media (max-width: 860px) { .site-header .u-logo { width: 112px; height: auto; } }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.ts-slot:empty { display: none; }
.form-status[data-ok="0"] { color: var(--urbin-yellow-base); }
.u-row--submit .u-row__content { row-gap: var(--urbin-space-16); }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--urbin-space-30) var(--urbin-space-24); margin-top: var(--urbin-space-30); }
.post-card { padding-top: var(--urbin-space-20); border-top: 1px solid var(--urbin-surface-line); }
.post-card__meta { margin: 0 0 var(--urbin-space-12); color: var(--urbin-surface-muted); }
.post-card h3 { margin: 0 0 var(--urbin-space-12); }
.post-card h3 a { color: var(--urbin-surface-ink); text-decoration: none; }
.post-card h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.post-card .body { margin: 0; }
.post-title { max-width: 980px; margin: 0; }
.eyebrow a { color: inherit; }
.post .prose h2 { font-size: 26px; }
.res.more { padding-top: 0; }
.ny__iso .u-headline { margin: 0 0 var(--urbin-space-30); }
/* full-size schematic viewer: pinch-zoom on touch, scroll/drag on desktop; the hint sits at the top so it never covers the image credit */
.lb { position: fixed; inset: 0; z-index: 100; background: var(--urbin-navy-100); display: flex; flex-direction: column; }
.lb[hidden] { display: none; }
.lb__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--urbin-space-16); padding: var(--urbin-space-12) var(--urbin-space-20); border-bottom: 1px solid var(--urbin-alpha-white-15); }
.lb__hint { margin: 0; color: var(--urbin-lavender-60); text-transform: uppercase; }
.lb__x { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--urbin-yellow-base); background: transparent; color: var(--urbin-yellow-base); font-size: 28px; line-height: 1; cursor: pointer; }
.lb__scroll { flex: 1; overflow: auto; touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; display: grid; place-items: center; }
.lb__scroll img { display: block; width: min(2608px, 220vw); max-width: none; height: auto; }
@media (min-width: 1000px) { .lb__scroll img { width: min(2608px, 140vw); } }
body.lb-open { overflow: hidden; }

/* ---------- interactive isometric (IsoModel) ---------- */
.isomodel { margin: 0; }
.isomodel__stage { position: relative; aspect-ratio: 3478 / 1726; }
.isomodel__stage { overflow: hidden; }
/* Zoom to a stop (Mike 2026-11-15: "I do love zooming into the features"). site.js sets the transform and --z (the
   scale); the markers divide by --z so they keep their size while the drawing grows under them. */
.isomodel__view { position: absolute; inset: 0; transform-origin: 0 0; --z: 1; transition: transform .75s cubic-bezier(.22, 1, .36, 1); }
.isomodel__view img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.isomodel__view > img:not([src]) { visibility: hidden; }   /* held back until the drawing is asked for; no broken-image box */
.isomodel:not(.is-3d) .isomodel__hot { transform: scale(calc(1 / var(--z))); transition: transform .75s cubic-bezier(.22, 1, .36, 1); }
.isomodel.is-3d .isomodel__view { transform: none !important; transition: none; }
@media (prefers-reduced-motion: reduce) { .isomodel__view, .isomodel:not(.is-3d) .isomodel__hot { transition: none; } }
.isomodel__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.isomodel__glow, .isomodel__leg, .isomodel__pulse { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.isomodel__glow { stroke: var(--urbin-yellow-base); stroke-width: 46; stroke-opacity: 0; transition: stroke-opacity .2s ease-out; }
.isomodel__leg { stroke: var(--urbin-yellow-10); stroke-width: 9; stroke-opacity: 0; transition: stroke-opacity .2s ease-out; }
.isomodel__glow.is-active { stroke-opacity: .22; }
.isomodel__leg.is-active { stroke-opacity: 1; }
/* light travelling down the fiber: one short bright dash running the whole route */
.isomodel__pulse { stroke: var(--urbin-neutral-white); stroke-width: 11; stroke-dasharray: 16 1000; stroke-dashoffset: 1016; opacity: .95; animation: isopulse 6s linear infinite; }
@keyframes isopulse { to { stroke-dashoffset: 0; } }
.isomodel__hot { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.isomodel__hot span { position: absolute; inset: 9px; border-radius: 50%; border: 2px solid var(--urbin-yellow-base); box-shadow: var(--urbin-glow-route); animation: isoring 2.4s ease-out infinite; transition: background-color .15s ease-out; }
.isomodel__hot:hover span, .isomodel__hot[aria-pressed="true"] span { background: var(--urbin-alpha-yellow-base-35); animation: none; }
.isomodel__hot:focus-visible { outline: 2px solid var(--urbin-focus); outline-offset: 2px; }
@keyframes isoring { 0% { transform: scale(.8); opacity: 1; } 70% { transform: scale(1.25); opacity: .35; } 100% { transform: scale(.8); opacity: 1; } }
.isomodel__full { position: absolute; right: 1.2%; bottom: 3%; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--urbin-alpha-white-15); background: var(--urbin-alpha-navy-70-65); color: var(--urbin-yellow-base); }
.isomodel__full:hover { border-color: var(--urbin-yellow-base); }
.isomodel__panel { margin-top: var(--urbin-space-16); min-height: 112px; box-sizing: border-box; padding: var(--urbin-space-20) var(--urbin-space-24);
  display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--urbin-space-40); align-content: center;
  border-radius: var(--urbin-radius-card); background: var(--urbin-alpha-navy-70-85); box-shadow: inset 0 0 0 1px var(--urbin-alpha-white-15); transition: box-shadow .18s ease-out; }
.isomodel__panel[data-open] { box-shadow: inset 0 0 0 1.5px var(--urbin-yellow-40); }
.isomodel__panel .isomodel__eyebrow { grid-column: 1; grid-row: 1; }
.isomodel__panel .isomodel__title { grid-column: 1; grid-row: 2; }
.isomodel__panel .isomodel__body { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
@media (max-width: 699px) { .isomodel__panel { display: block; min-height: 0; } .isomodel__panel .isomodel__body { margin-top: var(--urbin-space-8); } }
.isomodel__eyebrow { margin: 0 0 var(--urbin-space-8); color: var(--urbin-yellow-base); }
.isomodel__title { margin: 0 0 var(--urbin-space-8); color: var(--urbin-neutral-white); }
.isomodel__body { margin: 0; color: var(--urbin-lavender-base); }
.isomodel__legs { margin-top: var(--urbin-space-24); }
.isomodel__cap { margin-top: var(--urbin-space-16); color: var(--urbin-surface-muted); }
@media (max-width: 899px) {
  /* small screens: a 32px invisible tap target, but only a 10px visible ring so labels stay readable */
  .isomodel__hot { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .isomodel__hot span { inset: 11px; border-width: 1.5px; box-shadow: 0 0 6px var(--urbin-alpha-yellow-base-60); }
  .isomodel__full { width: 32px; height: 32px; right: 1%; bottom: 2%; }
  .isomodel__legs { overflow-x: auto; scrollbar-width: none; }
  .isomodel__legs .u-fluid { min-width: 600px; }
}
@media (prefers-reduced-motion: reduce) { .isomodel__pulse { display: none; } .isomodel__hot span { animation: none; } }
/* The interactive model replaced the flat top-down map (Mike 2026-11-15), so it follows the section intro directly:
   the intro's own bottom margin is the gap, and on Projects the model is the last thing in its section. */
.ny__iso { margin: 0 0 clamp(var(--urbin-space-40), 6vw, var(--urbin-space-80)); }
.proj-route .isomodel { margin-bottom: 0; }

/* ---------- request a route: A to Z picker ---------- */
.rq-map { border-radius: var(--urbin-radius-card); background: var(--urbin-navy-70); padding: var(--urbin-space-16) var(--urbin-space-12) var(--urbin-space-8); }
.rq-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.rq-river { fill: var(--urbin-alpha-teal-base-55); }
.rq-rl { fill: var(--urbin-lavender-60); font: 400 7px var(--font-mono); letter-spacing: .1em; }
.rq-base { stroke: var(--urbin-alpha-lavender-base-75); stroke-opacity: .5; stroke-width: 1.5; }
.rq-lit { stroke: var(--urbin-yellow-base); stroke-width: 3; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 4px var(--urbin-alpha-yellow-base-90)); transition: all .35s ease-out; }
.rq-lit.is-on { opacity: 1; }
.rq-nd circle { fill: var(--urbin-navy-40); transition: fill .2s ease-out; }
.rq-nd text { fill: var(--urbin-lavender-base); font: 400 8px var(--font-mono); letter-spacing: .06em; }
.rq-nd.is-on circle { fill: var(--urbin-yellow-base); filter: drop-shadow(0 0 5px var(--urbin-alpha-yellow-base-90)); }
.rq-nd.is-on text { fill: var(--urbin-yellow-base); }
.rq-oth { opacity: 0; transition: opacity .2s ease-out; }
.rq-oth.is-on { opacity: 1; }
.rq-od { stroke: var(--urbin-yellow-base); stroke-width: 1.5; stroke-dasharray: 3 3; }
.rq-note { margin: var(--urbin-space-8) 0 0; text-align: center; color: var(--urbin-lavender-60); }
.rq-hint { margin: 0; min-height: 1.5em; color: var(--urbin-teal-base); font-weight: 700; }
.rq-hint:empty { min-height: 0; }
.rq-other[hidden] { display: none; }
.rq-ac { position: relative; }
.rq-acl { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--urbin-neutral-white); border-radius: var(--urbin-radius-fill); box-shadow: inset 0 0 0 1.5px var(--urbin-navy-base), 0 18px 36px 0 var(--urbin-alpha-black-45); }
.rq-acl[hidden] { display: none; }
.rq-acl [role="option"] { padding: 10px 12px; border-radius: 12px; color: var(--urbin-navy-base); font: 400 15px/1.4 var(--font-sans); cursor: pointer; }
.rq-acl [role="option"]:hover, .rq-acl [aria-selected="true"] { background: var(--urbin-lavender-20); }
.rq-acat { padding: 6px 12px 4px; color: var(--urbin-lavender-90); font: 400 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.rq-summary { margin: 0; flex-basis: 100%; color: var(--urbin-neutral-white); }
.rq-summary:empty { display: none; }
.isomodel__cta { display: inline-block; margin-left: var(--urbin-space-8); color: var(--urbin-yellow-base); text-transform: uppercase; text-underline-offset: 4px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .rq-lit, .rq-nd circle, .rq-oth { transition: none; } }

.form-noscript { margin: 0; color: var(--urbin-neutral-white); }
.form-noscript a { color: var(--urbin-yellow-base); }
.notfound { padding-block: clamp(var(--urbin-space-60), 10vw, var(--urbin-space-140)); }

/* ---------- phone spacing pass (Mike 2026-11-15: "spacing is off" on mobile) ---------- */
/* A headline sat directly on the first rule of the fact list. */
.u-headline + .facts { margin-top: var(--urbin-space-40); }
.rq-hint:empty { display: none; }
.lg-short { display: none; }
@media (max-width: 720px) {
  /* The design system stacks form rows with a shared outline, which reads as one table on desktop. With phone-width
     rows the 30px corners touch and look broken, so the rows separate and the padding drops to give fields room. */
  .u-form-stack > * + * { margin-top: var(--urbin-space-12); }
  .u-row { padding: var(--urbin-space-24) var(--urbin-space-20) var(--urbin-space-30); gap: var(--urbin-space-20); }
  .u-row__label { min-width: 0; flex-basis: 100%; gap: var(--urbin-space-4); }
  /* one rhythm between fields: the stack gap only (the extra margin doubled it between field groups) */
  .form-layout .u-row__content > * + * { margin-top: 0; }
  .u-row__content, .u-fields { gap: var(--urbin-space-20); }
  .u-chips .u-seg { min-width: 0; }
  .cards { gap: var(--urbin-space-16); }
  .cards .u-card { padding: var(--urbin-space-24); gap: var(--urbin-space-16); }
  .cards .u-card__top { gap: var(--urbin-space-12); }
  .cards .u-icon { --u-icon-size: 64px !important; }
  .stats { gap: var(--urbin-space-24); }
}
@media (max-width: 699px) {
  /* The photo ended in a hard edge under the headline: the corner shade was darker than the page behind it.
     On phones the photo now fades straight down into the page colour. */
  .hero__photo::after { background: linear-gradient(180deg, var(--urbin-alpha-navy-70-65) 0%, var(--urbin-alpha-navy-70-00) 20%, var(--urbin-alpha-navy-70-00) 38%, var(--urbin-alpha-navy-70-85) 74%, var(--urbin-navy-70) 100%); }
  /* the schematic runs edge to edge so it is as large as the screen allows */
  .isomodel__stage { margin-inline: calc(-1 * var(--urbin-space-20)); }   /* the phone gutter is a fixed 20px (see the phone spacing scale) */
  /* route legs: short labels so all three fit without sideways scrolling (the long names stay for screen readers) */
  .lg-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lg-short { display: inline; }
  .isomodel__legs .u-fluid { min-width: 0; }
  .isomodel__legs .u-seg__label { padding: 0 10px; }
  .isomodel__legs .u-gap--fluid { min-width: 16px; flex-basis: 16px; }
}

/* ---------- dark mode (Mike 2026-11-15: "jarring with the lack of dark mode at night") ---------- */
/* The navy sections are already dark; the white and lavender ones are what glare. Their components draw with palette
   tokens (ink = navy-base, surface = neutral-white, and so on), so dark mode swaps those tokens inside the two light
   surfaces and every component follows, including ones added later. The --x-* aliases resolve on :root, so they keep
   the true colours for the places that must not flip. Follows the device setting; there is no switch. */
:root {
  --x-white: var(--urbin-neutral-white); --x-navy: var(--urbin-navy-base); --x-navy-70: var(--urbin-navy-70);
  --x-navy-10: var(--urbin-navy-10); --x-navy-30: var(--urbin-navy-30); --x-navy-40: var(--urbin-navy-40); --x-navy-50: var(--urbin-navy-50);
  --x-teal: var(--urbin-teal-base); --x-teal-80: var(--urbin-teal-80); --x-teal-a00: var(--urbin-alpha-teal-base-00);
  --x-teal-a20: var(--urbin-alpha-teal-base-20); --x-teal-a55: var(--urbin-alpha-teal-base-55);
  --x-lav: var(--urbin-lavender-base); --x-lav-10: var(--urbin-lavender-10); --x-lav-20: var(--urbin-lavender-20);
  --x-lav-60: var(--urbin-lavender-60); --x-lav-80: var(--urbin-lavender-80); --x-lav-90: var(--urbin-lavender-90);
  --x-navy-a05: var(--urbin-alpha-navy-base-05); --x-navy-a65: var(--urbin-alpha-navy-base-65);
  --x-navy-a85: var(--urbin-alpha-navy-base-85); --x-navy-a90: var(--urbin-alpha-navy-base-90); --x-navy-a00: var(--urbin-alpha-navy-base-00);
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
  .u-surface-light, .u-surface-lavender, [data-theme="light"], [data-theme="lavender"] {
    --urbin-neutral-white: var(--x-navy);      /* surfaces */
    --urbin-navy-base: var(--x-white);         /* ink */
    --urbin-navy-50: var(--x-lav);             /* body copy */
    --urbin-navy-10: var(--x-navy-40);
    --urbin-lavender-10: var(--x-navy-70);     /* field wells */
    --urbin-lavender-20: var(--x-navy-50);
    --urbin-lavender-80: var(--x-navy-30);     /* field borders, placeholders */
    --urbin-lavender-90: var(--x-lav);
    --urbin-teal-base: var(--urbin-yellow-base);   /* the accent on a dark ground is yellow */
    --urbin-alpha-teal-base-00: var(--urbin-alpha-yellow-base-00);
    --urbin-alpha-teal-base-20: var(--urbin-alpha-yellow-base-25);
    --urbin-alpha-teal-base-55: var(--urbin-alpha-yellow-base-55);
    --urbin-alpha-navy-base-00: transparent;
    --urbin-alpha-navy-base-05: var(--urbin-alpha-white-05);
    --urbin-alpha-navy-base-65: var(--urbin-alpha-white-15);
    --urbin-alpha-navy-base-85: var(--urbin-alpha-white-15);
    --urbin-alpha-navy-base-90: var(--urbin-alpha-white-15);
    --urbin-surface-bg: var(--x-navy);
    --urbin-surface-ink: var(--x-white);
    --urbin-surface-body: var(--x-lav);
    --urbin-surface-muted: var(--x-lav-60);
    --urbin-surface-accent: var(--urbin-yellow-base);
    --urbin-surface-line: var(--urbin-alpha-white-15);
    --urbin-focus: var(--urbin-yellow-base);
    --urbin-fluid-outline: var(--x-white);
    --urbin-fluid-outline-strong: var(--urbin-yellow-base);
    --urbin-fluid-label: var(--x-white);
    --urbin-fluid-fill-active: var(--urbin-yellow-base);
    --urbin-fluid-label-active: var(--x-navy);
    --urbin-fluid-route-lit: var(--urbin-yellow-base);
    --urbin-fluid-gap-fill: var(--urbin-yellow-base);
    --urbin-fluid-gap-fill-fade: var(--urbin-alpha-yellow-base-00);
    --urbin-fluid-edge: var(--urbin-fluid-outline);
  }
  /* the lavender band (closers, form pages) becomes deep teal so it still reads as its own band */
  .u-surface-lavender, [data-theme="lavender"] { --urbin-surface-bg: var(--x-teal-80); }
  /* navy pieces that sit inside a light surface keep the true palette */
  .u-surface-light .u-surface-navy, .u-surface-lavender .u-surface-navy, .u-surface-light .rq-map, .u-surface-lavender .rq-map, .u-dotgrid {
    --urbin-neutral-white: var(--x-white); --urbin-navy-base: var(--x-navy); --urbin-navy-50: var(--x-navy-50); --urbin-navy-10: var(--x-navy-10);
    --urbin-lavender-10: var(--x-lav-10); --urbin-lavender-20: var(--x-lav-20); --urbin-lavender-80: var(--x-lav-80); --urbin-lavender-90: var(--x-lav-90);
    --urbin-teal-base: var(--x-teal); --urbin-alpha-teal-base-00: var(--x-teal-a00); --urbin-alpha-teal-base-20: var(--x-teal-a20); --urbin-alpha-teal-base-55: var(--x-teal-a55);
    --urbin-alpha-navy-base-00: var(--x-navy-a00); --urbin-alpha-navy-base-05: var(--x-navy-a05); --urbin-alpha-navy-base-65: var(--x-navy-a65);
    --urbin-alpha-navy-base-85: var(--x-navy-a85); --urbin-alpha-navy-base-90: var(--x-navy-a90);
  }
  /* full-strength white outlines are harsh on a dark ground: use the hairline the glass cards use */
  .u-row, .u-card--schematic { box-shadow: inset 0 0 0 1px var(--urbin-alpha-white-15); }
  .u-card--schematic:is(.is-hover, .is-interactive:hover, .is-interactive:focus-within) { box-shadow: inset 0 0 0 1.5px var(--urbin-yellow-40); }
  .u-row--submit { background: var(--x-navy-70); box-shadow: inset 0 0 0 1px var(--urbin-alpha-yellow-base-45); }
  .rq-acl { box-shadow: inset 0 0 0 1px var(--urbin-alpha-white-15), 0 18px 36px 0 var(--urbin-alpha-black-45); }
  .u-check--light .u-check__input:checked + .u-check__box { background: var(--urbin-yellow-base); border-color: var(--urbin-yellow-base); color: var(--x-navy); }
  /* icons are inline SVG with the light-surface ink baked in */
  :is(.u-surface-light, .u-surface-lavender) .u-icon [stroke="#05151D" i] { stroke: var(--x-white); }
  :is(.u-surface-light, .u-surface-lavender) .u-icon [fill="#05151D" i] { fill: var(--x-white); }
  :is(.u-surface-light, .u-surface-lavender) .u-icon [stroke="#31444F" i] { stroke: var(--x-lav-60); }
}

/* ---------- 3D route model (model3d.js; Mike 2026-11-15: the drawing "isn't really usable" on a phone) ---------- */
.m3d__cv, .m3d__fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.m3d__fx, .m3d__tags { pointer-events: none; }
.m3d__tags { position: absolute; inset: 0; overflow: hidden; }
.isomodel:not(.is-3d) :is(.m3d__cv, .m3d__fx, .m3d__tags, .cap-3d) { display: none; }
.isomodel.is-3d :is(.isomodel__view img, .isomodel__svg, .isomodel__full, .cap-img) { display: none; }
.isomodel.is-3d .isomodel__stage { aspect-ratio: 2 / 1; overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.isomodel.is-3d .isomodel__stage.is-grabbing { cursor: grabbing; }
.isomodel.is-3d .isomodel__stage:focus-visible { outline: 2px solid var(--urbin-focus); outline-offset: -2px; }
.m3d__tag { position: absolute; left: 0; top: 0; white-space: nowrap; text-align: center; text-transform: uppercase; font: 400 10px/1.25 var(--font-mono); letter-spacing: .08em; color: var(--urbin-lavender-60); opacity: 0; transition: opacity .2s ease-out; }
.m3d__tag small { display: block; font-size: 9px; color: var(--urbin-yellow-base); }
.m3d__tag.is-end { font-weight: 700; font-size: 11px; color: var(--urbin-neutral-white); text-shadow: 0 0 6px var(--urbin-navy-70), 0 0 2px var(--urbin-navy-70); }
.m3d__tag.is-water { color: var(--urbin-teal-30); }
.m3d__tag.is-near { color: var(--urbin-lavender-base); }
.isomodel.is-3d .isomodel__hot { z-index: 2; }
.m3d__mh { position: absolute; z-index: 2; width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.m3d__mh:focus-visible { outline: 2px solid var(--urbin-focus); outline-offset: 0; }
.isomodel:not(.is-3d) .m3d__mh { display: none !important; }
/* top right: the top left corner of the drawing holds the 165 Halsey label, which the button must not cover */
.m3d__ctl button:hover { border-color: var(--urbin-yellow-base); }
/* bottom left: in the whole-route view the route runs from the top left to the bottom right, where 60 Hudson and its
   label sit, so the bottom right is the one corner the controls must stay out of */
.m3d__ctl { position: absolute; left: var(--urbin-space-12); bottom: var(--urbin-space-12); z-index: 3; display: flex; gap: var(--urbin-space-8); }
.m3d__ctl[hidden], .m3d__steps[hidden] { display: none; }
.m3d__ctl button, .m3d__prev { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1.5px solid var(--urbin-alpha-white-15); background: var(--urbin-alpha-navy-70-85); color: var(--urbin-yellow-base); cursor: pointer; }
.m3d__steps { display: flex; align-items: center; gap: var(--urbin-space-12); margin-top: var(--urbin-space-16); }
.m3d__rail { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; justify-content: space-between; height: 44px; }
.m3d__rail::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 1.5px; background: var(--urbin-alpha-white-15); transform: translateY(-50%); }
.m3d__dot { position: relative; flex: 1 1 0; min-width: 24px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.m3d__dot span { width: 10px; height: 10px; border-radius: 50%; background: var(--urbin-navy-70); border: 1.5px solid var(--urbin-lavender-60); transition: transform .15s ease-out, background-color .15s ease-out, border-color .15s ease-out; }
.m3d__dot--all span { border-radius: 3px; }                                   /* the square is the whole route; the circles are its stops */
.m3d__dot.is-past span { background: var(--urbin-yellow-70); border-color: var(--urbin-yellow-70); }
.m3d__dot.is-on span { background: var(--urbin-yellow-base); border-color: var(--urbin-yellow-base); transform: scale(1.5); box-shadow: 0 0 0 4px var(--urbin-alpha-yellow-base-25); }
.m3d__dot:hover span { border-color: var(--urbin-yellow-base); }
.m3d__dot:focus-visible { outline: 2px solid var(--urbin-focus); outline-offset: -4px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .m3d__dot span { transition: none; } }
.m3d__next { display: inline-flex; align-items: center; gap: var(--urbin-space-8); height: 44px; padding: 0 var(--urbin-space-16) 0 var(--urbin-space-20); border-radius: var(--urbin-radius-pill); border: 0; background: var(--urbin-yellow-base); color: var(--urbin-navy-base); text-transform: uppercase; cursor: pointer; }
.m3d__prev { background: transparent; color: var(--urbin-neutral-white); }
.isomodel.is-3d .isomodel__panel { margin-top: var(--urbin-space-12); }
@media (max-width: 699px) {
  /* The model, the stop buttons, and the description must fit on one phone screen under the pinned header
     (Mike 2026-11-15), so the stage takes what is left after about 350px for the header, buttons, and the longest card. */
  /* --trim is set by site.js when a stop's description is taller than this allowance: the stage gives up exactly
     the height the text needs, so the model never slides under the header */
  .isomodel.is-3d .isomodel__stage { aspect-ratio: auto; height: calc(clamp(260px, calc(100vh - 352px), 120vw) - var(--trim, 0px)); height: calc(clamp(260px, calc(100svh - 352px), 120vw) - var(--trim, 0px)); }
  /* the stops walk the route on a phone, so the leg buttons would only repeat them */
  .isomodel.is-3d .isomodel__legs { display: none; }
}
/* the compass: its needle is turned by model3d.js to keep pointing north */
.m3d__needle { transform-box: view-box; transform-origin: 50% 50%; }

/* ---------- phone spacing scale (independent review, 2026-11-15) ---------- */
/* Root cause of "spacing is off": there was no phone scale. Every gap was a desktop clamp() floor or a desktop grid
   gap reused as a stack gap, so one relationship took three or four values (headline to body was 16, 24, 30, and 40;
   section seams ran 94 to 171px) and a button sat closer to its paragraph than a headline sat to its own.
   One scale now, under 700px:  section 48/48 (title band 40/48, closer 60/60)  |  headline to body 24  |
   body to button 30  |  block to block 40, headline to cards or a list 30, sub-section 60  |  cards 16 apart,
   ruled rows 24 above and below  |  card padding 24.  Trailing margins are zeroed so they cannot leak into a seam. */
.prose > :first-child { margin-top: 0; }
@media (max-width: 699px) {
  .gutter, .u-section, .foot, .site-header { padding-inline: var(--urbin-space-20); }   /* one gutter: the header and the content edges now line up */
  .menu-btn { right: var(--urbin-space-20); }
  .u-section--dark, .u-section--light { padding-block: var(--urbin-space-48); }
  .title-band { padding-block: var(--urbin-space-40) var(--urbin-space-48); }
  .u-section.closer { padding-block: var(--urbin-space-60); }
  .hero__band { padding-bottom: var(--urbin-space-48); }
  .u-section__inner > :last-child, .split__body > :last-child, .split > :last-child > :last-child, .mv__grid > div > :last-child, .values__list li > :last-child { margin-bottom: 0; }
  .split { row-gap: var(--urbin-space-24); }
  .lead, .ny__head .body, .closer__body { margin-top: var(--urbin-space-24); }
  .split__body > .u-fluid { margin-top: var(--urbin-space-30); }
  .split__body > .body:has(+ .u-fluid) { margin-bottom: 0; }
  .aud__cta { padding-top: var(--urbin-space-12); }
  .aud__row { padding-block: var(--urbin-space-24); }
  .closer__actions, .ny__cta, .who__cta, .why__cta, .glance__cta { margin-top: var(--urbin-space-30); }
  .values__list { row-gap: var(--urbin-space-24); margin-top: var(--urbin-space-30); }
  .values__list li { padding-top: var(--urbin-space-24); }
  .post-grid { row-gap: var(--urbin-space-24); }
  .post-card { padding-top: var(--urbin-space-24); }
  .includes > h3, .glance > .u-headline { margin-bottom: var(--urbin-space-30); }
  .cards--4, .u-headline + .facts { margin-top: var(--urbin-space-30); }
  .glance .stats { margin-bottom: 0; border-bottom: 0; }   /* its rule sat 48px above the fact list's first rule with nothing between */
  .glance, .includes { margin-top: var(--urbin-space-60); }
  .mv__grid { gap: var(--urbin-space-48); }
  .ny__head, .ny__iso, .proj-route .split, .why .lead, .stats { margin-bottom: var(--urbin-space-40); }
  /* type was driving height: a 22px lead ran to ten lines and filled two thirds of the screen */
  .lead, .hero__sub, .closer__body { font-size: 19px; }
  .urbin-heading-subhead { font-size: 26px; }
  .foot { padding-block: var(--urbin-space-48) var(--urbin-space-30); }
  .foot__inner { gap: var(--urbin-space-40); }
  .foot__cols { grid-template-columns: 1fr 1fr; gap: var(--urbin-space-30) var(--urbin-space-20); }
  .foot__cols > :last-child { grid-column: 1 / -1; }
  .foot ul { gap: 0; }
  .foot ul a { display: block; padding-block: 10px; }   /* 44px touch targets */
  .foot__h { margin-bottom: var(--urbin-space-4); }
  .foot__legal { margin-top: var(--urbin-space-40); }
  .site-header.is-scrolled { padding-block: var(--urbin-space-4); }
  .u-form-stack > .sr-only + * { margin-top: 0; }
  .u-row { padding-bottom: var(--urbin-space-24); }
}

/* ---------- usability pass (Mike 2026-11-15: "responsive to mobile and desktop, including iPhone Duo in all its modes") ---------- */
/* Grounded in the Interface Lineage library; each rule names the dossier it applies (interfacelineage.com/<slug>).

   1. The model and its description always fit one screen.
      map-place-card: a detail card sits under the map on an upright phone and becomes a column beside it when the
      screen is wider than it is tall, which "leaves the map its full height". So: stacked when the screen is tall,
      side by side when it is short and wide (a phone or a folded Duo on its side, a small laptop window).
   2. collapse-by-priority: as room runs out, parts go in a planned order, least important first: the caption, the
      leg buttons (the stops cover them), the word "stop" on the Next button, then header padding. The stage, the
      rail, Next, and the description never go. Breaks sit where a part stops fitting, not at device sizes.
   3. Stacked layouts cap the stage so header + stage + rail + description fit the height (about 290px of chrome). */
.isomodel:not(.is-3d) .isomodel__stage { width: min(100%, max(280px, calc((100vh - 290px) * 2.015))); width: min(100%, max(280px, calc((100svh - 290px) * 2.015))); margin-inline: auto; }
@media (min-width: 700px) {
  .isomodel.is-3d .isomodel__stage { aspect-ratio: auto; height: clamp(300px, calc(100vh - 290px), 640px); height: clamp(300px, calc(100svh - 290px), 640px); }
}
@media (max-width: 420px) { .m3d__more { display: none; } .m3d__next { padding-inline: var(--urbin-space-16) var(--urbin-space-12); } .m3d__steps { gap: var(--urbin-space-8); } }
@media (orientation: landscape) and (max-height: 720px) and (min-width: 560px) {
  .isomodel { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 34%, 360px); column-gap: var(--urbin-space-16); align-items: start; --m-h: calc(100vh - 92px); --m-h: calc(100svh - 92px); }
  .isomodel > * { grid-column: 2; min-width: 0; }
  .isomodel > .isomodel__stage { grid-column: 1; grid-row: 1 / span 5; margin-inline: 0; }
  .isomodel.is-3d .isomodel__stage { aspect-ratio: auto; height: max(220px, var(--m-h)); }
  .isomodel:not(.is-3d) .isomodel__stage { width: min(100%, calc(max(220px, var(--m-h)) * 2.015)); margin-inline: 0; }
  .isomodel__legs, .isomodel__cap { display: none; }
  .m3d__steps { margin-top: 0; flex-wrap: wrap; gap: var(--urbin-space-8); }
  .m3d__rail { flex: 1 0 100%; order: -1; }
  .m3d__next { margin-left: auto; }
  .isomodel__panel, .isomodel.is-3d .isomodel__panel { display: block; min-height: 0; margin-top: var(--urbin-space-8); padding: var(--urbin-space-16); }
  .isomodel__panel .isomodel__body { margin-top: var(--urbin-space-8); }
  .isomodel__title { font-size: 18px; }
  .ny__iso, .proj-route .isomodel { margin-bottom: var(--urbin-space-40); }
}
/* A short upright screen (the Duo's cover screen is about 575px tall): the longest descriptions need about 20px
   more than the tall-phone budget leaves, so the stage gives it up. */
@media (max-width: 699px) and (max-height: 620px) and (orientation: portrait) {
  .isomodel.is-3d .isomodel__stage { height: calc(clamp(200px, calc(100vh - 356px), 120vw) - var(--trim, 0px)); height: calc(clamp(200px, calc(100svh - 356px), 120vw) - var(--trim, 0px)); }
}
/* A phone on its side has about 370px of height: the pinned header shrinks, and the home photo stops at one screen
   so the headline is on the first screen with it. */
@media (orientation: landscape) and (max-height: 480px) {
  .site-header, .site-header.is-scrolled { padding-block: var(--urbin-space-4); }
  .site-header .u-logo, .site-header.is-scrolled .u-logo { width: 92px; min-width: 0; }
  .menu-btn { width: 40px; height: 40px; padding: 10px; }
  .hero { --photo-h: 100vh; --photo-h: 100svh; }
  .hero__top { min-height: 0; padding-top: 34vh; padding-top: 34svh; }
  .isomodel { --m-h: calc(100vh - 64px); --m-h: calc(100svh - 64px); }
  .mnav { padding-top: 72px; gap: var(--urbin-space-12); }
  /* collapse by priority, last steps: the description keeps its title, text, and link; its kicker and padding go */
  .isomodel__panel .isomodel__eyebrow { display: none; }
  .isomodel__panel, .isomodel.is-3d .isomodel__panel { padding: var(--urbin-space-12); margin-top: var(--urbin-space-4); }
  .isomodel__title { font-size: 16px; margin-bottom: var(--urbin-space-4); }
  .isomodel__panel .isomodel__body { font-size: 13px; line-height: 1.4; }
  .m3d__rail, .m3d__dot { height: 36px; }
  .m3d__prev, .m3d__next { height: 40px; }
  .m3d__prev { width: 40px; }
  .m3d__steps { gap: var(--urbin-space-4) var(--urbin-space-8); }
}

/* pinned-primary-action: one control for the page's main job, fixed within the thumb's reach, on phones only.
   site.js shows it only when nothing else on screen already leads to the request form. */
.pin-cta { display: none; }
@media (max-width: 699px) {
  .pin-cta:not([hidden]) { position: fixed; right: var(--urbin-space-16); bottom: calc(var(--urbin-space-16) + env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: var(--urbin-space-8);
    height: 48px; padding: 0 var(--urbin-space-16) 0 var(--urbin-space-20); border-radius: var(--urbin-radius-pill); background: var(--urbin-yellow-base); color: var(--urbin-navy-base);
    text-decoration: none; text-transform: uppercase; box-shadow: 0 10px 30px var(--urbin-alpha-black-45); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s ease-out, transform .2s ease-out; }
  .pin-cta.is-on { opacity: 1; pointer-events: auto; transform: none; }
}
@media (max-height: 480px) { .pin-cta:not([hidden]) { display: none; } }   /* too little height to give any of it away */
@media (prefers-reduced-motion: reduce) { .pin-cta { transition: none; } }

/* An in-browser agent is filling a form (WebMCP): show which form, and light the Send button while the browser waits
   for the visitor to review and press it. Browsers without WebMCP do not know these selectors and skip each rule,
   which is why they stand alone. */
form:tool-form-active { outline: 2px solid var(--urbin-yellow-base); outline-offset: 6px; border-radius: var(--urbin-space-8); }
button:tool-submit-active { outline: 3px solid var(--urbin-yellow-base); outline-offset: 3px; }