/* Industrial Metals: one stylesheet.
   Design pass 2026-11-02: one type family (Archivo, width + weight axes), IM's own colours
   (navy #2E425F, orange #F53C03, cool grey #DFE5E8, white), plain headings, lists and tables
   instead of card grids, numbers only on real sequences.
   Media pass 2026-11-02: photo page headers and a photo visit band, graded in IM navy (multiply), a second
   film on the home page, the 45° roof cut on every photo and film band, and a few quiet interaction details.
   Floors (checked by verify.mjs): no font-size under 13px; tap targets 44px+; buttons 48px+. */

@font-face { font-family: 'Archivo'; src: url('/industrial-metals/assets/Archivo-Variable.woff2?v=e3a28eade2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

:root {
  --ink: #0f1c2b;            /* deep navy: text, dark bands */
  --navy: #2e425f;           /* IM navy, from the logo */
  --steel: #dfe5e8;          /* IM cool grey */
  --mist: #f2f4f5;           /* light steel for alternate sections */
  --paper: #fff;
  --text: #1d2b3a;
  --muted: #4d5b68;          /* 6.97:1 on white */
  --rule: #cbd3d9;
  --rule-strong: #0f1c2b;
  --field: #7a8791;          /* input borders: 3.6:1 on white */
  --orange: #f53c03;         /* IM orange: large type, graphics, accents on dark */
  --orange-ink: #c93000;     /* small orange text and white-on-orange buttons: 5.38:1 */
  --orange-deep: #a52700;
  --on-ink: #dce3e9;
  --on-ink-muted: #aebbc7;   /* 8.79:1 on ink */
  --rule-dark: rgba(255, 255, 255, 0.18);
  --error: #b42318;
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --spring: cubic-bezier(0.32, 0.72, 0, 1); /* settles like a heavy part, no bounce */
  --cut: polygon(0 0, calc(100% - 72px) 0, 100% 72px, 100% 100%, 0 100%); /* the roof angle from IM's logo mark */
  --wrap: 1320px;
  --gutter: 20px;
  --section: 52px;
  --header-h: 68px;
  --radius: 4px;
}
@media (min-width: 720px) { :root { --gutter: 32px; --section: 68px; } }
@media (min-width: 1180px) { :root { --gutter: 56px; --section: 80px; --header-h: 84px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font: 400 17px/1.6 var(--font); font-stretch: 100%; color: var(--text); background: var(--paper); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-feature-settings: 'kern' 1; }
@media (min-width: 1180px) { body { font-size: 18px; } }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
a[href^="tel:"] { white-space: nowrap; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
[hidden] { display: none !important; }
.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; }
.icon { width: 1.2em; height: 1.2em; flex-shrink: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
@media (min-width: 600px) { .nowrap { white-space: nowrap; } }
.nobr { white-space: nowrap; }
.tnum, .hero-number, .header-call, .hours td, .visit-facts a[href^="tel"] { font-variant-numeric: tabular-nums; }

/* Type scale: wide headings, sentence case, no all-caps labels */
.hero-title, .page-title, .section-title, .article-title { font-family: var(--font); font-weight: 780; color: var(--ink); }
.hero-title { font-size: clamp(50px, 8.4vw, 124px); line-height: 0.9; letter-spacing: -0.045em; font-stretch: 112%; }
@media (min-width: 720px) { .hero-title { font-stretch: 120%; } }
.page-title { font-size: clamp(40px, 5.8vw, 84px); line-height: 0.96; letter-spacing: -0.04em; font-stretch: 116%; max-width: 18ch; }
.section-title { font-size: clamp(32px, 3.7vw, 54px); line-height: 1.02; letter-spacing: -0.035em; font-stretch: 114%; }
.h2, .side-title, .info-title, .finder-h { font-weight: 720; font-stretch: 106%; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); }
.h2, .side-title { font-size: clamp(22px, 2vw, 26px); margin: 0 0 12px; }
.lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; color: var(--text); max-width: 54ch; margin: 0; }

/* Links and buttons */
.text-link { display: inline-block; padding-block: 11px; color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--orange); transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease); }
.text-link:hover { color: var(--orange-ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--radius); background: var(--orange-ink); color: #fff; font-weight: 680; font-stretch: 104%; font-size: 17px; line-height: 1.2; text-decoration: none; transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.3s var(--spring); }
.btn:hover { background: var(--orange-deep); }
.btn:active { transform: scale(0.98); }
.btn .icon { width: 20px; height: 20px; }
.btn.dark { background: var(--ink); }
.btn.dark:hover { background: var(--navy); }
.btn.light { background: #fff; color: var(--ink); }
.btn.light:hover { background: var(--steel); }
.btn.outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.outline:hover { background: var(--ink); color: #fff; }
.btn.outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.btn.outline-light:hover { background: #fff; color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Skip link and preview banner */
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--ink); color: #fff; border-radius: var(--radius); font-weight: 650; }
.skip:focus { top: 12px; }
.preview-banner { background: #fff1e8; color: var(--ink); font-size: 15px; padding: 10px 0; border-bottom: 1px solid #f0c7b2; }
.preview-banner a { font-weight: 650; }

/* Utility row and header */
.utility { display: none; background: var(--ink); color: var(--on-ink-muted); font-size: 14px; }
.utility-inner { display: flex; align-items: center; gap: 28px; min-height: 40px; }
.utility a { color: var(--on-ink); text-decoration: none; display: inline-block; padding-block: 11px; }
.utility a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.utility-right { margin-left: auto; }
@media (min-width: 1000px) { .utility { display: block; } }

.site-header { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--rule); }
/* Once the page scrolls, a soft navy shadow fades in under the header (CSS scroll timeline, no script).
   Browsers without scroll timelines keep the plain rule, which is fine. */
.site-header::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none; background: linear-gradient(rgba(15, 28, 43, 0.14), rgba(15, 28, 43, 0)); opacity: 0; }
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header::after { animation: header-shadow linear both; animation-timeline: scroll(block root); animation-range: 0px 48px; }
    @keyframes header-shadow { to { opacity: 1; } }
  }
}
.header-inner { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.brand { display: block; margin-right: auto; padding-block: 8px; }
.brand img { height: 46px; width: auto; }
@media (min-width: 1180px) { .brand img { height: 58px; } }
.nav { display: none; }
.nav-meta { display: none; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 580; font-size: 16px; }
.header-call { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 48px; min-height: 48px; padding: 0 12px; border-radius: var(--radius); background: var(--orange-ink); color: #fff; text-decoration: none; font-weight: 720; font-stretch: 106%; font-size: 17px; transition: background-color 0.2s var(--ease); }
.header-call:hover { background: var(--orange-deep); }
.header-call .icon { width: 20px; height: 20px; }
.header-call-text { display: none; }
@media (min-width: 480px) { .header-call { padding: 0 16px; } .header-call-text { display: inline; } }
.menu-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 1px solid var(--ink); border-radius: var(--radius); background: #fff; color: var(--ink); font-weight: 650; font-size: 15px; }
.menu-toggle .icon { width: 22px; height: 22px; }
.menu-toggle .icon-close, .nav-open .menu-toggle .icon-open { display: none; }
.nav-open .menu-toggle .icon-close { display: block; }

@media (max-width: 1179px) {
  .nav-open .nav { position: fixed; inset: var(--header-h) 0 0; display: flex; flex-direction: column; overflow-y: auto; padding: 8px var(--gutter) 120px; background: #fff; border-top: 1px solid var(--rule); }
  .nav-open .nav a { display: flex; align-items: center; min-height: 64px; border-bottom: 1px solid var(--rule); font-size: 24px; font-weight: 720; font-stretch: 110%; letter-spacing: -0.02em; }
  .nav-open .nav a[aria-current] { color: var(--orange-ink); }
  .nav-open { overflow: hidden; }
  .nav-open .nav .nav-meta { display: block; margin: 28px 0 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
}
@media (min-width: 1180px) {
  .header-inner { gap: 36px; }
  .nav { display: flex; align-items: center; gap: 30px; }
  .nav a { position: relative; display: inline-flex; align-items: center; min-height: 48px; }
  .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); }
  .nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
  .nav .nav-extra { display: none; }
  .menu-toggle { display: none; }
  .header-call { min-height: 50px; padding: 0 20px; font-size: 18px; }
}

/* Home hero on Jeff's photo of the yard (2026-11-03: "I want a background image in the top"). Phones: the photo
   fills the top and fades into ink, and the words sit below it on ink. From 720px the photo fills the hero and a
   navy fade sits behind the words on the left, so the handler and the car stay clear on the right.
   tools/media-contrast.mjs measures the text on the real pixels. */
.hero { background: var(--ink); color: var(--on-ink); padding-bottom: clamp(40px, 6vw, 64px); }
.hero-media { position: absolute; top: 0; left: 0; right: 0; z-index: -1; display: block; }
.hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 28, 43, 0) 30%, rgba(15, 28, 43, 0.72) 68%, var(--ink) 100%); }
.hero-grid { display: grid; gap: 28px; padding-top: calc(75vw - 92px); }
.hero-title { color: #fff; }
.hero-lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; color: var(--on-ink); max-width: 40ch; margin: 0; }
.hero-more { margin: 8px 0 0; }
.hero .text-link { color: #fff; }
.hero .text-link:hover { color: #ff7a4d; }
.hero-call { padding-top: 20px; border-top: 2px solid var(--rule-dark); }
.hero-call-k { margin: 0 0 4px; font-size: 15px; font-weight: 650; color: var(--on-ink-muted); }
.hero-number { display: inline-block; font-size: clamp(38px, 4.6vw, 66px); line-height: 1.02; font-weight: 800; font-stretch: 114%; letter-spacing: -0.03em; color: var(--orange); text-decoration: none; padding-block: 4px; }
.hero-number:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.hero-call-v { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--on-ink-muted); }
.hero-call-v a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 4px; display: inline-block; padding-block: 13px; margin-block: -13px; }
.hero-call-v a:hover { text-decoration-color: var(--orange); }
@media (min-width: 720px) {
  .hero { display: flex; align-items: flex-end; min-height: clamp(600px, calc(100svh - 110px), 860px); padding-bottom: 0; }
  .hero-media { bottom: 0; }
  .hero-media img { height: 100%; aspect-ratio: auto; object-position: 72% 100%; }
  .hero-media::after { background: linear-gradient(90deg, rgba(15, 28, 43, 0.9) 0%, rgba(15, 28, 43, 0.82) 38%, rgba(15, 28, 43, 0.46) 62%, rgba(15, 28, 43, 0.14) 82%, rgba(15, 28, 43, 0.08) 100%), linear-gradient(0deg, rgba(15, 28, 43, 0.86) 0%, rgba(15, 28, 43, 0) 50%); }
  .hero-grid { padding-block: clamp(72px, 8vw, 112px) clamp(40px, 4.4vw, 60px); }
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; }
  .hero-title { grid-column: 1 / span 8; }
  .hero-copy, .hero-call { grid-column: 1 / span 6; }
}
@media (min-width: 1180px) { .hero { clip-path: var(--cut); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-title, .hero-copy, .hero-call { animation: rise 0.9s var(--ease) both; }
  .hero-copy { animation-delay: 0.12s; }
  .hero-call { animation-delay: 0.2s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

.film { position: relative; margin: clamp(32px, 4vw, 56px) 0 0; }
.film-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }
.film-frame img, .film-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.film-video { opacity: 0; transition: opacity 0.8s var(--ease); }
.film-video.is-on { opacity: 1; }
@media (min-width: 720px) { .film-frame { aspect-ratio: 16 / 7; } }
@media (min-width: 1180px) { .film-frame { aspect-ratio: 21 / 8; clip-path: var(--cut); } }
.media-label { position: absolute; z-index: 3; margin: 0; padding: 5px 10px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; pointer-events: none; bottom: 14px; right: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
/* Each film is its own pause/play control (no visible button, Jeff 2026-11-02). */
.film-toggle { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.film-toggle:focus-visible { outline: 3px solid var(--orange); outline-offset: -6px; }

/* Home reel: the shredder film and what happens to your scrap. On phones the copy sits below the film on ink,
   so text never sits on moving footage there. From 1000px it sits on the film, over a navy fade. */
.reel { position: relative; background: var(--ink); color: var(--on-ink); }
.film-reel { margin: 0; }
.film-reel .film-frame { aspect-ratio: 16 / 9; }
.film-reel .film-frame img, .film-reel .film-frame video { object-position: 62% 38%; }
.film-reel .film-frame::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, var(--ink) 0%, rgba(15, 28, 43, 0) 42%); }
.reel-copy { padding: 4px 0 8px; }
.reel-title { font-size: clamp(32px, 3.7vw, 54px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 780; font-stretch: 114%; color: #fff; margin: 0 0 18px; }
.reel-text p { max-width: 46ch; color: var(--on-ink); }
.reel-text p:last-child { margin: 0; }
.reel .text-link { color: #fff; }
.reel .text-link:hover { color: #ff7a4d; }
.reel-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
@media (min-width: 1000px) {
  .film-reel .film-frame { aspect-ratio: auto; height: clamp(560px, 48vw, 720px); }
  .film-reel .film-frame::after { background: linear-gradient(90deg, rgba(15, 28, 43, 0.94) 0%, rgba(15, 28, 43, 0.86) 34%, rgba(15, 28, 43, 0.25) 62%, rgba(15, 28, 43, 0) 82%), linear-gradient(0deg, var(--ink) 0%, rgba(15, 28, 43, 0) 36%); }
  .reel-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 0 clamp(40px, 4.4vw, 72px); pointer-events: none; }
  .reel-text { max-width: 600px; pointer-events: auto; }
  .reel-text p { font-size: 19px; }
}

/* Photo bands: page headers and the visit band. Each photo is multiplied with IM navy, so no pixel behind
   the text is lighter than the navy at that point (white text stays above 7:1, muted text above 4.5:1).
   tools/media-contrast.mjs measures it on the rendered page. */
.has-media { position: relative; isolation: isolate; overflow: hidden; }
.masthead-media, .visit-media { position: absolute; inset: 0; z-index: -1; display: block; }
.masthead-media img, .visit-media img { width: 100%; height: 100%; object-fit: cover; }
.masthead-media::after, .visit-media::after { content: ''; position: absolute; inset: 0; mix-blend-mode: multiply; }

/* Sections */
.section { padding-block: var(--section); }
/* Two white sections in a row share one gap; a section right after a masthead starts closer. */
.section:not(.section-mist):not(.section-ink):not(.finder-section) + .section:not(.section-mist):not(.section-ink):not(.finder-section) { padding-top: 0; }
.section-mist + .section-mist, .finder-section + .section-mist { padding-top: 0; }
.masthead + .section, .masthead + .page-body { padding-top: clamp(40px, 4.4vw, 64px); }
.film + .section, .hero + .section { padding-top: clamp(44px, 5vw, 72px); }
.section-mist { background: var(--mist); }
.section-ink { background: var(--ink); color: var(--on-ink); }
.section-ink .section-title { color: #fff; }
.section-head { margin-bottom: clamp(32px, 4vw, 52px); }
.section-head .section-title { max-width: 22ch; }
.section-lead { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; max-width: 56ch; margin: 16px 0 0; }
.section-aside > p:last-child:not(.section-lead) { margin: 4px 0 0; }
.section-ink .section-lead { color: var(--on-ink); }
.section-ink .text-link { color: #fff; }
.section-ink .text-link:hover { color: var(--orange); }

/* Index list: one full-width link row per item (paths, services, guides) */
.paths .section-title, .section > .wrap > .section-title { margin-bottom: clamp(24px, 3vw, 40px); }
.index-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.index-row { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; transition: background-color 0.25s var(--ease); }
.index-title { font-size: clamp(24px, 2.4vw, 34px); font-weight: 740; font-stretch: 112%; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); transition: color 0.2s var(--ease); }
.index-text { font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 52ch; }
.index-link { font-size: 16px; font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--orange); }
.index-row:hover .index-title, .index-row:hover .index-link { color: var(--orange-ink); }
/* Pointer hover: the row title steps in slightly, like a tab being pulled. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .index-title, .guide-name { transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease), transform 0.5s var(--spring); }
  .index-row:hover .index-title, .guide-link:hover .guide-name { transform: translateX(8px); }
}
@media (min-width: 900px) {
  .index-row { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr); column-gap: 32px; align-items: baseline; padding: 30px 0; }
  .index-link { justify-self: end; text-align: right; }
}

/* Material guides: a two-column list */
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 48px; border-top: 2px solid var(--ink); }
.guide-link { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
.guide-name { font-size: clamp(21px, 1.8vw, 25px); font-weight: 720; font-stretch: 108%; letter-spacing: -0.02em; color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease); }
.guide-ex { font-size: 16px; color: var(--muted); }
.guide-link:hover .guide-name { color: var(--orange-ink); text-decoration-color: var(--orange); }
@media (min-width: 900px) { .guide-list { grid-template-columns: 1fr 1fr; } }

/* Material finder */
.finder-section { background: var(--mist); }
.finder-top { display: grid; gap: 28px; padding-bottom: 24px; border-bottom: 2px solid var(--ink); }
.finder-more { margin: 4px 0 0; }
.finder-bar { display: grid; gap: 8px; align-content: end; }
.finder-label { font-size: 16px; font-weight: 650; color: var(--ink); }
.finder-input { position: relative; }
.finder-input .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.finder-input input { width: 100%; min-height: 52px; padding: 0 16px 0 46px; border: 1px solid var(--field); border-radius: var(--radius); background: #fff; font-size: 17px; }
.finder-input input::placeholder { color: #66737f; }
.finder-status { margin: 0; font-size: 15px; color: var(--muted); }
@media (min-width: 900px) {
  .finder-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: end; }
  .finder-top.no-intro { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .finder-top.no-intro .finder-bar { grid-column: 1; }
}
.finder-groups { display: grid; gap: 40px; margin-top: 32px; }
@media (min-width: 900px) { .finder-groups { grid-template-columns: 1fr 2fr; column-gap: 48px; } }
.finder-h { font-size: clamp(22px, 2vw, 26px); }
.finder-h .count { font-size: 15px; font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.group-note { margin: 6px 0 12px; font-size: 15px; color: var(--muted); }
.mat-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .is-wide .mat-list { columns: 2; column-gap: 48px; } }
.mat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.mat-name { font-size: 17px; font-weight: 600; color: var(--ink); }
a.mat-name { display: inline-block; min-width: 48px; padding-block: 13px; margin-block: -13px; text-decoration: underline; text-decoration-color: #93a1ad; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease); }
a.mat-name:hover { color: var(--orange-ink); text-decoration-color: var(--orange-ink); }
.mat-notes { display: inline-flex; flex-wrap: wrap; gap: 0 10px; font-size: 15px; color: var(--muted); }
.mat-code { font-weight: 650; }
.mat-flags { display: inline-flex; gap: 8px; margin-left: auto; }
.mat-hot { font-size: 14px; font-weight: 700; color: #fff; background: var(--orange-ink); padding: 2px 8px; border-radius: 2px; }
.mat-flag { font-size: 14px; font-weight: 650; color: var(--orange-ink); }
.finder-expand { display: none; width: 100%; margin-top: 20px; }
@media (max-width: 719px) {
  .finder.is-collapsible:not(.is-expanded):not(.is-searching) .mat:nth-child(n+6) { display: none; }
  .finder.is-collapsible:not(.is-expanded):not(.is-searching) .finder-expand:not([hidden]) { display: flex; }
}
.finder-empty { margin: 24px 0 0; padding: 16px 20px; background: #fff; border-left: 3px solid var(--orange); }
.finder-empty a { color: var(--orange-ink); font-weight: 650; }

/* Stewards statement */
.stewards-grid { display: grid; gap: 32px; }
.stewards-photo { margin: 0; }
.stewards-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.stewards-photo figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.statement { font-size: clamp(21px, 2.1vw, 29px); line-height: 1.38; letter-spacing: -0.012em; color: var(--ink); margin: 20px 0 24px; max-width: 40ch; }
.stewards-copy > p:not(.statement) { max-width: 56ch; }
@media (min-width: 1000px) {
  .stewards-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: center; }
  .stewards-photo img { aspect-ratio: 4 / 5; }
}

/* Visit steps: a real sequence, so numbers are allowed here */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.steps li { border-top: 2px solid var(--ink); padding-top: 20px; }
.step-num { display: block; font-size: clamp(48px, 5vw, 72px); line-height: 1; font-weight: 800; font-stretch: 118%; letter-spacing: -0.04em; color: var(--orange); margin-bottom: 18px; }
.steps h3 { font-size: clamp(22px, 2vw, 26px); font-weight: 720; font-stretch: 106%; letter-spacing: -0.015em; margin-bottom: 10px; }
.steps p { margin: 0; max-width: 38ch; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; } }

/* Visit band */
.visit { background: var(--navy); color: #fff; padding-block: clamp(48px, 6vw, 80px); }
.visit .section-title { color: #fff; }
.visit-grid { display: grid; gap: 32px; }
.visit-address { margin: 18px 0 0; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; font-weight: 640; font-stretch: 108%; letter-spacing: -0.02em; }
.visit-facts { margin: 0; display: grid; gap: 18px; }
.visit-facts dt { font-size: 14px; font-weight: 650; color: #c9d3dc; }
.visit-facts dd { margin: 4px 0 0; font-size: 17px; line-height: 1.5; }
.visit-facts a { color: #fff; font-weight: 650; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 4px; display: inline-block; padding-block: 13px; margin-block: -13px; }
.visit-facts .text-link { color: #fff; }
.visit-actions { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) { .visit-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); column-gap: 48px; align-items: start; } }
.visit.has-media { background: var(--ink); padding-block: clamp(64px, 7.5vw, 112px); }
.visit-media img { object-position: 50% 30%; }
.visit-media::after { background: #3b5375; }
@media (min-width: 1180px) { .visit.has-media { clip-path: var(--cut); } }

/* Footer and mobile bar */
.footer { background: var(--ink); color: var(--on-ink-muted); padding: clamp(56px, 6vw, 88px) 0 96px; font-size: 16px; }
@media (min-width: 1000px) { .footer { padding-bottom: 40px; } }
.footer-top { display: grid; gap: 40px; }
@media (min-width: 720px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .footer-top { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr)); column-gap: 48px; } }
.footer-brand img { width: 200px; height: auto; }
.footer-brand p { margin: 20px 0 0; max-width: 34ch; line-height: 1.55; }
.footer-h { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 12px; letter-spacing: 0; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li a { display: inline-block; padding-block: 10px; color: var(--on-ink); text-decoration: none; }
.footer li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer address { font-style: normal; line-height: 1.6; margin-bottom: 8px; color: var(--on-ink); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule-dark); font-size: 14px; }
.footer-bottom nav { display: flex; gap: 20px; }
.footer-bottom a { color: var(--on-ink); padding-block: 12px; }
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 -1px 0 var(--rule); }
.mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; font-weight: 700; font-size: 17px; text-decoration: none; }
.mobile-bar a:first-child { background: var(--orange-ink); color: #fff; }
.mobile-bar a:last-child { background: #fff; color: var(--ink); }
.mobile-bar .icon { width: 20px; height: 20px; }
@media (min-width: 1000px) { .mobile-bar { display: none; } }
.mobile-bar.is-waiting { transform: translateY(100%); visibility: hidden; }
@media (prefers-reduced-motion: no-preference) { .mobile-bar { transition: transform 0.35s var(--ease), visibility 0s linear 0s; } .mobile-bar.is-waiting { transition: transform 0.35s var(--ease), visibility 0s linear 0.35s; } }

/* Inner page masthead */
.masthead { padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--rule); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: clamp(28px, 4vw, 48px); font-size: 15px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; display: inline-block; padding: 13px 6px; margin: -13px -6px; }
.crumbs a:hover { color: var(--ink); text-decoration-color: var(--orange); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.masthead-grid { display: grid; gap: 32px; }
.masthead .page-title { margin-bottom: 24px; }
@media (min-width: 1000px) {
  .has-aside .masthead-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: start; }
}
/* Photo masthead: crumbs at the top, title and lead at the bottom of the photo, white type. */
.masthead.has-media { background: var(--ink); color: #fff; border-bottom: 0; padding-bottom: clamp(64px, 6vw, 96px); }
.masthead-media::after { background: linear-gradient(180deg, #2e425f 0%, #22344c 100%); }
.has-media .page-title { color: #fff; }
.has-media .lead { color: var(--on-ink); }
.has-media .crumbs, .has-media .crumbs a { color: var(--on-ink-muted); }
.has-media .crumbs a { text-decoration-color: rgba(255, 255, 255, 0.35); }
.has-media .crumbs a:hover { color: #fff; text-decoration-color: var(--orange); }
.has-media .crumbs [aria-current] { color: #fff; }
.has-media .fact-panel { background: #fff; }
@media (min-width: 1000px) {
  .masthead.has-media { display: flex; min-height: clamp(420px, 34vw, 520px); }
  .masthead.has-media > .wrap { display: flex; flex-direction: column; }
  .has-media .masthead-grid { margin-top: auto; width: 100%; }
  .has-media.has-aside .masthead-grid { align-items: end; }
  .masthead-media::after { background: linear-gradient(90deg, #22344c 0%, #33496a 46%, #6f86a8 100%); }
}
@media (min-width: 1180px) { .masthead.has-media { clip-path: var(--cut); } }
/* A material photo in its real colour (2026-11-03: copper). Navy sits only behind the words, so the metal shows:
   top to bottom on phones (title and lead first), left to right from 1000px (the copy is on the left). */
.masthead.media-material .masthead-media::after { mix-blend-mode: normal; background: linear-gradient(180deg, rgba(15, 28, 43, 0.9) 0%, rgba(15, 28, 43, 0.84) 58%, rgba(15, 28, 43, 0.58) 100%); }
@media (min-width: 1000px) {
  .masthead.media-material .masthead-media::after { background: linear-gradient(90deg, rgba(15, 28, 43, 0.92) 0%, rgba(15, 28, 43, 0.86) 50%, rgba(15, 28, 43, 0.5) 62%, rgba(15, 28, 43, 0.14) 82%, rgba(15, 28, 43, 0.06) 100%); }
}
/* The photo settles once on load (scale only, so it never hides the page's largest image). */
@media (prefers-reduced-motion: no-preference) {
  .masthead-media img { animation: settle 1.8s var(--spring) both; }
  @keyframes settle { from { transform: scale(1.06); } }
}

/* Fact panels and side cards */
.fact-panel, .side-card { background: var(--mist); border-radius: var(--radius); padding: 24px 28px; }
.facts { margin: 0; }
.facts > div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.facts > div:first-child { padding-top: 0; }
.facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.facts dt { font-size: 14px; font-weight: 650; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-size: 17px; font-weight: 520; color: var(--ink); line-height: 1.45; }
.facts dd a { color: var(--orange-ink); font-weight: 650; text-underline-offset: 4px; display: inline-block; padding-block: 13px; margin-block: -13px; }
.fact-panel .btn { margin-top: 20px; }
.facts-tight > div { padding: 10px 0; }
.side-card .btn { width: 100%; margin-top: 4px; }
.side-card > p { color: var(--text); }
.side-alt { margin: 8px 0 16px; text-align: center; }
.side-card .facts { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--rule); }
.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; }
.tick-list .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--orange-ink); }
.tick-list a { display: inline-block; padding-block: 10px; margin-block: -10px; color: inherit; text-decoration: underline; text-decoration-color: #93a1ad; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.tick-list a:hover { color: var(--orange-ink); text-decoration-color: var(--orange-ink); }

/* Page body and prose */
.page-body { padding-block: clamp(44px, 5vw, 72px); }
.page-body + .section:not(.section-mist):not(.section-ink):not(.finder-section) { padding-top: 0; }
.two-col { display: grid; gap: 48px; }
@media (min-width: 1000px) {
  .two-col { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 80px; align-items: start; }
  .two-col > .side-card { position: sticky; top: calc(var(--header-h) + 24px); }
}
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 730; font-stretch: 108%; letter-spacing: -0.02em; line-height: 1.15; margin: 44px 0 12px; }
.prose > h2:first-child, .prose section:first-child h2 { margin-top: 0; }
.prose p { line-height: 1.65; }
.prose a:not(.btn):not(.text-link) { color: var(--orange-ink); font-weight: 600; text-underline-offset: 4px; }
.prose .tick-list { margin-bottom: 24px; }
.notice { margin: 24px 0; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 16px; color: var(--ink); }
.narrow, .narrow-prose { max-width: 72ch; }

/* About: three facts */
.info-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.info-grid li { border-top: 2px solid var(--ink); padding-top: 20px; }
.info-title { font-size: clamp(22px, 2vw, 26px); margin-bottom: 10px; }
@media (min-width: 900px) { .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
.link-row { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 40px; }

/* Areas */
.area-list { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 40px; border-top: 2px solid var(--ink); }
.area-list li { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.area-list h3 { font-size: 20px; font-weight: 720; font-stretch: 106%; letter-spacing: -0.01em; margin-bottom: 6px; }
.area-list p { margin: 0; font-size: 16px; color: var(--muted); }
@media (min-width: 720px) { .area-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .area-list { grid-template-columns: repeat(3, 1fr); } }
.near-grid { display: grid; gap: 32px; }
@media (min-width: 1000px) { .near-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: start; } }
.town-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; border-top: 2px solid var(--ink); }
.town-list li { padding: 10px 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
@media (min-width: 720px) { .town-list { columns: 3; } }

/* Questions */
.faq-grid { display: grid; gap: 32px; }
@media (min-width: 1000px) { .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 72px; align-items: start; } }
.faq-intro p { margin-top: 16px; color: var(--muted); }
.faq-intro a { color: var(--orange-ink); font-weight: 650; }
.faq-list { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 0; list-style: none; cursor: pointer; font-size: clamp(18px, 1.6vw, 21px); font-weight: 680; font-stretch: 104%; color: var(--ink); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--orange-ink); }
.faq-icon { width: 22px; height: 22px; color: var(--orange-ink); transition: transform 0.25s var(--ease); }
.faq details[open] .faq-icon { transform: rotate(45deg); }
.faq-a p { margin: 0; padding-bottom: 22px; max-width: 62ch; color: var(--text); }
/* Answers open with a short height change where the browser can animate to auto height; elsewhere they open at once. */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.35s var(--spring), content-visibility 0.35s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
.faq-a a { color: var(--orange-ink); font-weight: 650; }
.section-ink .faq-intro p { color: var(--on-ink-muted); }
.section-ink .faq-intro a, .section-ink .faq-a a, .section-ink .faq-icon { color: #ff7a4d; }
.section-ink .faq-list { border-top-color: var(--on-ink); }
.section-ink .faq details { border-bottom-color: var(--rule-dark); }
.section-ink .faq summary { color: #fff; }
.section-ink .faq summary:hover { color: #ff7a4d; }
.section-ink .faq-a p { color: var(--on-ink); }

/* Plan your visit */
.visit-plan { display: grid; gap: 32px; }
.panel { border-radius: var(--radius); }
.panel-find, .panel-yard { background: var(--mist); padding: 28px; }
.panel-before { border-top: 2px solid var(--ink); padding-top: 20px; }
.panel p { max-width: 60ch; }
@media (min-width: 1000px) {
  .visit-plan { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: start; }
  .panel-find { grid-column: 1; grid-row: 1; }
  .panel-yard { grid-column: 1; grid-row: 2; }
  .panel-before { grid-column: 2; grid-row: 1 / span 2; }
}
.num-list { margin: 0 0 16px; padding-left: 1.4em; }
.num-list li { padding: 6px 0 6px 4px; }
.num-list li::marker { color: var(--orange-ink); font-weight: 700; }
.hours { width: 100%; border-collapse: collapse; margin: 16px 0 4px; }
.hours th, .hours td { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.hours th { text-align: left; font-weight: 650; color: var(--ink); }
.hours td { text-align: right; }

/* Contact */
.contact-list { display: grid; gap: 0 32px; margin: 0 0 clamp(48px, 6vw, 80px); }
.contact-list > div { padding: 16px 0 20px; border-top: 2px solid var(--ink); }
.contact-list dt { font-size: 14px; font-weight: 650; color: var(--muted); }
.contact-list dd { margin: 6px 0 0; font-size: clamp(20px, 1.7vw, 24px); font-weight: 720; font-stretch: 106%; letter-spacing: -0.015em; overflow-wrap: break-word; }
.contact-list a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 2px; text-underline-offset: 6px; display: inline-block; padding-block: 6px; }
.contact-list a:hover { color: var(--orange-ink); text-decoration-color: var(--orange); }
@media (min-width: 720px) { .contact-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .contact-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.2fr); } }
.inquiry .section-title { font-size: clamp(28px, 2.8vw, 40px); margin-bottom: 14px; }
.form-grid { display: grid; gap: 20px; margin-top: 24px; }
@media (min-width: 720px) { .form-grid { grid-template-columns: 1fr 1fr; } .field.full { grid-column: 1 / -1; } }
.field label { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 650; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--field); border-radius: var(--radius); background: #fff; font-size: 17px; }
.field textarea { min-height: 128px; resize: vertical; }
.field [aria-invalid='true'] { border-color: var(--error); background: #fff5f4; }
.form-note { margin: 16px 0 0; font-size: 15px; color: var(--muted); }
.form-error { margin: 16px 0 0; padding: 12px 16px; border-left: 3px solid var(--error); background: #fff5f4; color: var(--error); font-weight: 600; }
.summary { margin-top: 28px; padding: 24px; background: var(--mist); border-radius: var(--radius); }
.summary h3 { font-size: 22px; font-weight: 720; margin-bottom: 8px; }
.summary pre { white-space: pre-wrap; font: 15px/1.55 var(--font); background: #fff; padding: 16px; border: 1px solid var(--rule); border-radius: var(--radius); }
/* Inquiry forms that post to the SaaS (2026-11-04): the honeypot sits off screen, the :target messages show only
   when a plain (no-script) post comes back to the form, and the price box is the one boxed form on a guide page. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.hp input { min-width: 240px; min-height: 52px; }
.target-msg { display: none; }
.target-msg:target { display: block; }
.inquiry-form button[disabled] { opacity: 0.6; cursor: wait; }
.price-box { margin: 32px 0 8px; padding: 24px; background: var(--mist); border-radius: var(--radius); }
.price-box h2 { margin: 0 0 8px; font-size: clamp(24px, 2.2vw, 30px); }
.price-box > p { margin: 0; }
.price-box .form-grid { margin-top: 20px; }
.price-box .field input { background: #fff; }
.price-box .btn-row { margin-top: 20px; }
.price-box .summary { margin-top: 0; padding: 0; background: none; }
@media (min-width: 720px) { .price-box { padding: 28px 32px; } }

/* Scrapbook (drafts are preview only) */
.articles { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
@media (min-width: 900px) { .articles { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; } }
.article-card { display: grid; gap: 10px; color: inherit; text-decoration: none; }
.article-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.article-meta { font-size: 14px; color: var(--muted); }
.article-card-title { font-size: 22px; font-weight: 720; font-stretch: 106%; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); }
.article-card:hover .article-card-title { color: var(--orange-ink); }
.article-card-text { font-size: 16px; color: var(--muted); }
.article-head { padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--rule); }
.article-head-grid { display: grid; gap: 32px; }
@media (min-width: 1000px) { .article-head-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: end; } }
.article-kicker { margin: 0 0 12px; font-size: 15px; font-weight: 650; color: var(--orange-ink); }
.article-title { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.0; letter-spacing: -0.035em; font-stretch: 112%; margin-bottom: 20px; }
.byline { margin: 20px 0 0; font-size: 15px; color: var(--muted); }
.draft { font-weight: 700; color: var(--orange-ink); }
.article-figure { margin: 0; }
.article-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.article-body { display: grid; gap: 40px; padding-block: clamp(48px, 6vw, 80px); }
@media (min-width: 1000px) { .article-body { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 72px; align-items: start; } .toc { position: sticky; top: calc(var(--header-h) + 24px); } }
.toc-h { margin: 0 0 8px; font-size: 15px; font-weight: 650; color: var(--muted); }
.toc a { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-size: 16px; }
.toc a:hover { color: var(--orange-ink); }
.checklist { margin-top: 40px; padding: 24px 28px; background: var(--mist); border-radius: var(--radius); }
.checklist h2 { margin-top: 0; }
.article-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 2px solid var(--ink); }
.article-cta p { margin: 0; }

/* Review list (preview only) and sitemap */
.table-wrap { overflow-x: auto; }
.claims { width: 100%; border-collapse: collapse; font-size: 15px; }
.claims caption { text-align: left; color: var(--muted); padding-bottom: 12px; }
.claims th, .claims td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); }
.claims thead th { border-bottom: 2px solid var(--ink); }
.status { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: 14px; font-weight: 650; white-space: nowrap; }
.s-needs-confirmation { background: #fff1e8; color: #8a2a00; }
.s-verified-public-source { background: #e8f2ec; color: #1e5a32; }
.s-draft-editorial { background: var(--steel); color: var(--ink); }
.s-approved-for-publication { background: #e8f2ec; color: #1e5a32; }
.narrow-prose { margin-top: 48px; }
.sitemap-list { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 40px; border-top: 2px solid var(--ink); }
.sitemap-list li { border-bottom: 1px solid var(--rule); break-inside: avoid; }
.sitemap-list a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; display: inline-block; min-width: 48px; padding-block: 10px; }
.sitemap-list li { padding: 0; }
.sitemap-list a:hover { color: var(--orange-ink); }
@media (min-width: 720px) { .sitemap-list { columns: 2; } }

@media print {
  .utility, .site-header, .mobile-bar, .film, .skip, .masthead-media, .visit-media, .media-label { display: none !important; }
  body { font-size: 12pt; }
  .has-media, .reel, .visit, .section-ink { background: none !important; color: #000 !important; clip-path: none !important; }
  .has-media *, .reel *, .visit *, .section-ink * { color: #000 !important; }
}

/* Location pages (2026-11-04): neighbourhood entries and the links to every other area and town. */
.town-list a { color: inherit; text-decoration: underline; text-decoration-color: #93a1ad; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease); }
.town-list a:hover, .area-list h3 a:hover { color: var(--orange-ink); text-decoration-color: var(--orange-ink); }
.area-list h3 a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--orange); }
.area-list p a { color: inherit; text-decoration: underline; text-decoration-color: #b4bec7; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.area-list p a:hover { color: var(--orange-ink); text-decoration-color: var(--orange-ink); }
.hood-list li:target { color: var(--orange-ink); font-weight: 650; }
.location-nav { background: var(--mist); padding: clamp(40px, 5vw, 64px) 0; }
.location-nav .wrap { display: grid; gap: 32px; }
.location-nav h2 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 8px; letter-spacing: 0; }
.location-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.location-nav a, .location-nav span { display: inline-block; padding-block: 10px; font-size: 16px; }
.location-nav a { color: var(--ink); text-decoration: underline; text-decoration-color: #93a1ad; text-underline-offset: 5px; }
.location-nav a:hover { color: var(--orange-ink); text-decoration-color: var(--orange-ink); }
.location-nav span { color: var(--muted); }
@media (min-width: 900px) { .location-nav .wrap { grid-template-columns: 1fr 1fr; column-gap: 72px; } }
/* Numbered steps inside a prose column (the buyer page, 2026-11-04). The content is a sequence, so the numbers mean something. */
.steps-list { list-style: none; margin: 0 0 32px; padding: 0; counter-reset: step; }
.steps-list li { position: relative; padding: 14px 0 14px 56px; border-top: 1px solid var(--rule); counter-increment: step; }
.steps-list li:last-child { border-bottom: 1px solid var(--rule); }
.steps-list li::before { content: counter(step); position: absolute; left: 0; top: 12px; width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; font-weight: 720; font-size: 16px; }
.steps-list strong { font-weight: 700; }