/* W.D. Hopper & Sons - Concept D (polished)
 * Externalized stylesheet
 */

:root {
  --bg: #FAF6EE;
  --surface: #FFFFFF;
  --paper: #FBF7EC;
  --ink: #0F1A2A;
  --ink-soft: #4A5868;
  --ink-faint: #8A95A6;
  --line: #E6DECD;
  --line-cool: #E2E6EE;
  --brand: #1F6FE0;
  --brand-deep: #144FAA;
  --brand-soft: rgba(31,111,224,0.10);
  --cta: #FF6B3D;
  --cta-deep: #E84F1A;
  --gold: #C9A24B;
  --gold-soft: #F2E6C4;
  --good: #21B073;
  --shadow-md: 0 14px 30px -12px rgba(15,26,42,0.18);
  --shadow-lg: 0 28px 60px -22px rgba(15,26,42,0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--ink); color: #FFF;
  padding: 10px 16px; border-radius: 8px;
  font-weight: 700; font-size: 14px;
  z-index: 1000;
}
.skip-link:focus { top: 16px; }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Top utility bar */
.utility {
  background: var(--ink);
  color: #C8D2DC;
  font-size: 13px;
  padding: 9px 0;
}
.utility .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.utility a { color: #FFF; font-weight: 600; }
.utility .badge-good { display: inline-flex; align-items: center; gap: 6px; }
.utility .badge-good::before {
  content: ''; width: 7px; height: 7px;
  background: var(--good); border-radius: 50%;
  box-shadow: 0 0 8px rgba(33,176,115,0.6);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* Header */
header.site {
  background: rgba(250,246,238,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  width: 42px; height: 42px;
  background: var(--ink);
  border-radius: 9px;
  color: #FFF;
  display: grid; place-items: center;
  font-weight: 900; font-size: 17px;
  position: relative;
}
.logo-mark::after {
  content: ''; position: absolute; bottom: 6px; right: 6px;
  width: 6px; height: 6px; background: var(--brand); border-radius: 50%;
}
.logo-text strong {
  display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.5px;
  line-height: 1.1;
}
.logo-text small { color: var(--ink-soft); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; }
nav.primary { display: flex; gap: 30px; }
nav.primary a { color: var(--ink); font-weight: 600; font-size: 14px; }
nav.primary a:hover { color: var(--brand); text-decoration: none; }
.nav-cta { display: flex; gap: 10px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 10px;
  font-weight: 700; font-size: 14px;
  cursor: pointer; border: none;
  transition: all 0.18s ease;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary { background: var(--cta); color: #FFF; box-shadow: 0 6px 18px -6px rgba(255,107,61,0.55); }
.btn-primary:hover { background: var(--cta-deep); color: #FFF; box-shadow: 0 12px 26px -8px rgba(255,107,61,0.6); }
.btn-ink { background: var(--ink); color: #FFF; }
.btn-ink:hover { background: #000; color: #FFF; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.btn-large { padding: 16px 28px; font-size: 15px; }

/* Hero */
.hero {
  padding: 64px 0 88px;
  background:
    radial-gradient(ellipse at top right, rgba(31,111,224,0.10), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(255,107,61,0.05), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #F4ECD9 100%);
  position: relative;
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); color: var(--ink);
  padding: 7px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.04);
}
.badge::before { content: '★'; color: var(--gold); }
.hero h1 {
  font-size: clamp(44px, 6.5vw, 76px); line-height: 1.0; letter-spacing: -2px;
  margin: 22px 0 22px; font-weight: 900;
}
.hero h1 em { color: var(--brand); font-style: normal; position: relative; }
.hero h1 em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px;
  height: 12px; background: rgba(31,111,224,0.15); z-index: -1;
}
.hero p.lead { font-size: 19px; color: var(--ink-soft); max-width: 540px; margin-bottom: 32px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.trust-row {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding-top: 28px; border-top: 1px solid var(--line);
}
.trust-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.trust-item strong { color: var(--ink); font-weight: 800; }
.trust-item .check { color: var(--good); font-weight: 900; }

.hero-vis {
  aspect-ratio: 4/5;
  border-radius: 14px;
  position: relative;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 8px solid #FFF;
  background: #1A2D40;
}
.hero-vis svg.scene { width: 100%; height: 100%; display: block; }
.hero-vis img.scene { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-vis::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(15,26,42,0.6) 100%);
  pointer-events: none;
}
.hero-stamp {
  position: absolute; bottom: 20px; left: 20px;
  background: rgba(255,255,255,0.96);
  color: var(--ink);
  padding: 14px 18px;
  border-radius: 12px;
  border-left: 4px solid var(--cta);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.35);
  z-index: 2;
}
.hero-stamp .num { font-size: 30px; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.hero-stamp .label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-top: 2px; }

/* Motto plate: replaces the old "1915" stamp on the hero photo. */
.hero-motto-stamp { max-width: min(78%, 320px); }
.hero-motto-stamp .motto {
  font-size: 19px; font-weight: 800; line-height: 1.25;
  letter-spacing: -0.2px; color: var(--ink);
}

/* ---------- Hero carousel ---------- */
.hero-carousel .hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity 700ms ease;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-dots {
  position: absolute; right: 16px; bottom: 18px;
  display: flex; gap: 8px; z-index: 3;
}
.hero-dots button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.9);
  background: transparent; cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.hero-dots button[aria-selected="true"] { background: #FFF; transform: scale(1.25); }
.hero-dots button:hover { background: rgba(255,255,255,0.6); }
.hero-dots button:focus-visible { outline: 2px solid #FFF; outline-offset: 3px; }

@media (max-width: 560px) {
  .hero-motto-stamp .motto { font-size: 16px; }
  .hero-motto-stamp { max-width: 74%; }
}
/* No auto-advance or cross-fade for users who ask for reduced motion;
   the dots still work, so every photo stays reachable. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}
.hero-tag {
  position: absolute; top: 20px; right: 20px;
  background: rgba(15,26,42,0.85); color: #FFF;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  backdrop-filter: blur(6px);
  z-index: 2;
}
.hero-tag::before { content: '●'; color: var(--cta); margin-right: 6px; font-size: 9px; }

/* Stats strip */
.stats { background: var(--ink); color: #FFF; padding: 40px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; align-items: center; }
.stat .num { font-size: 44px; font-weight: 900; letter-spacing: -1.5px; line-height: 1; }
.stat .num .unit { color: var(--cta); }
.stat .label { color: #8B97A8; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; margin-top: 6px; font-weight: 600; }

/* Sections */
section { padding: 96px 0; }
.section-head { text-align: center; margin-bottom: 56px; }
.eyebrow { color: var(--cta); font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; }
.section-head h2 {
  font-size: clamp(34px, 4.5vw, 52px); line-height: 1.05; letter-spacing: -1.5px; margin: 12px 0;
  font-weight: 900;
}
.section-head p { color: var(--ink-soft); font-size: 17px; max-width: 640px; margin: 0 auto; }

/* Services */
.services { background: var(--surface); }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 26px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.svc::after {
  content: '→';
  position: absolute; top: 28px; right: 28px;
  color: var(--ink-faint); font-size: 18px; font-weight: 700;
  transition: all 0.2s ease;
}
.svc:hover { transform: translateY(-4px); border-color: var(--brand); background: #FFF; box-shadow: 0 18px 40px -16px rgba(31,111,224,0.25); }
.svc:hover::after { color: var(--cta); transform: translate(4px, -4px); }
.svc-icon {
  width: 44px; height: 44px;
  background: var(--brand-soft); color: var(--brand);
  border-radius: 10px; display: grid; place-items: center;
  margin-bottom: 18px; font-size: 20px;
}
.svc h3 { font-size: 18px; margin-bottom: 6px; font-weight: 800; letter-spacing: -0.3px; }
.svc p { color: var(--ink-soft); font-size: 14px; }

/* Heritage */
.heritage {
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 100%);
  color: #FFF;
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.heritage::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,0.12), transparent 35%),
    radial-gradient(circle at 85% 70%, rgba(255,107,61,0.15), transparent 40%);
}
.heritage .container { position: relative; }
.heritage .section-head { margin-bottom: 48px; }
.heritage .eyebrow { color: rgba(255,255,255,0.7); }
.heritage h2 { color: #FFF; }
.heritage .section-head p { color: rgba(255,255,255,0.85); }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 980px; margin: 0 auto; }
.tl-item {
  padding: 22px;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  border-left: 3px solid var(--cta);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.tl-year { font-size: 26px; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.tl-text { font-size: 13px; color: rgba(255,255,255,0.85); margin-top: 8px; line-height: 1.5; }

/* Crew */
.crew { background: var(--bg); }
.crew-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.crew-photo {
  aspect-ratio: 5/4;
  border-radius: 14px;
  border: 8px solid #FFF;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
  background: #1A2D40;
}
.crew-photo svg { width: 100%; height: 100%; display: block; }
.crew-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crew-photo .photo-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, transparent, rgba(15,26,42,0.85) 60%);
  color: #FFF;
  padding: 60px 20px 16px;
  font-size: 13px; font-weight: 600;
}
.crew-content h2 {
  font-size: clamp(32px, 4vw, 46px); font-weight: 900; letter-spacing: -1.2px;
  line-height: 1.05; margin-bottom: 18px;
}
.crew-content p { font-size: 17px; color: var(--ink-soft); margin-bottom: 18px; }
.crew-content blockquote {
  font-size: 18px; font-style: italic; color: var(--ink);
  padding: 18px 20px; margin: 22px 0;
  border-left: 4px solid var(--cta);
  background: var(--paper);
  border-radius: 0 10px 10px 0;
}
.crew-content blockquote cite {
  display: block; margin-top: 8px;
  font-style: normal; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
}

/* Channels */
.channels { background: var(--surface); }
.channels-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 980px; margin: 0 auto; }
.ch {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  display: flex; gap: 18px; align-items: flex-start;
  transition: all 0.2s ease;
  color: var(--ink);
  text-decoration: none;
}
.ch:hover { border-color: var(--brand); background: #FFF; transform: translateY(-3px); text-decoration: none; box-shadow: 0 14px 30px -12px rgba(31,111,224,0.18); }
.ch-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  background: var(--brand-soft); color: var(--brand);
  border-radius: 12px; display: grid; place-items: center;
  font-size: 22px;
}
.ch h4 { font-size: 17px; margin-bottom: 4px; font-weight: 800; letter-spacing: -0.3px; }
.ch p { color: var(--ink-soft); font-size: 14px; }
.ch .meta { color: var(--cta); font-size: 12px; font-weight: 700; margin-top: 8px; letter-spacing: 1.2px; text-transform: uppercase; }

/* Reviews */
.reviews { background: var(--bg); }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
}
.stars { color: var(--gold); margin-bottom: 14px; letter-spacing: 3px; font-size: 16px; }
.review p { font-size: 15px; color: var(--ink); margin-bottom: 18px; line-height: 1.55; }
.reviewer { display: flex; align-items: center; gap: 12px; }
.reviewer-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #FFF; display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
}
.reviewer-name { font-weight: 800; font-size: 14px; }
.reviewer-meta { font-size: 12px; color: var(--ink-soft); }

/* Final CTA */
.final-cta {
  background: linear-gradient(135deg, #FFF7EC 0%, #FFE4D2 100%);
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.final-cta h2 { font-size: clamp(36px, 5vw, 56px); font-weight: 900; letter-spacing: -1.5px; margin-bottom: 16px; line-height: 1.05; }
.final-cta p { font-size: 18px; color: var(--ink-soft); max-width: 560px; margin: 0 auto 30px; }

/* Footer */
footer {
  background: var(--ink); color: #C8D2DC;
  padding: 64px 0 28px; font-size: 14px;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
footer h5 { color: #FFF; font-size: 13px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 2px; font-weight: 800; }
footer a { color: #C8D2DC; transition: color 0.15s; }
footer a:hover { color: var(--cta); text-decoration: none; }
footer ul { list-style: none; }
footer li { margin-bottom: 9px; }
.footer-bottom { border-top: 1px solid #2A3645; padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: #8A97A8; font-size: 12px; }

/* Helper widget - interactive (compact) */
.helper {
  position: fixed; bottom: 20px; right: 20px;
  z-index: 40;
  font-family: inherit;
}
.helper-bubble {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px 10px 12px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-md);
  max-width: 260px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  text-align: left;
}
.helper-bubble:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--shadow-lg); }
.helper-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #FFF; border-radius: 9px; display: grid; place-items: center;
  flex-shrink: 0; font-size: 16px;
  position: relative;
}
.helper-icon::after {
  content: '';
  position: absolute; top: -2px; right: -2px;
  width: 9px; height: 9px;
  background: var(--good); border: 2px solid var(--surface);
  border-radius: 50%;
  animation: pulse 2.4s ease-in-out infinite;
}
.helper-text strong { display: block; font-size: 13px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.helper-text small { color: var(--ink-soft); font-size: 11px; line-height: 1.3; }

.helper-panel {
  position: absolute; bottom: 0; right: 0;
  width: 340px; max-width: calc(100vw - 32px);
  height: 460px; max-height: calc(100vh - 100px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.helper-panel.open { display: flex; }
.helper-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.helper-header h4 { font-size: 15px; font-weight: 800; }
.helper-header small { color: var(--ink-soft); font-size: 12px; display: block; }
.helper-close {
  margin-left: auto;
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-soft); font-size: 20px; padding: 4px;
  border-radius: 6px;
}
.helper-close:hover { background: var(--bg); color: var(--ink); }
.helper-body { padding: 20px 18px; overflow-y: auto; flex: 1; }
.helper-message {
  background: var(--paper);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  margin-bottom: 14px;
}
.helper-message strong { display: block; margin-bottom: 6px; }
.helper-suggestions { display: flex; flex-direction: column; gap: 8px; }
.helper-suggestions button {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: all 0.15s;
}
.helper-suggestions button:hover { border-color: var(--brand); background: var(--brand-soft); }
.helper-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-soft);
  text-align: center;
}

/* ===== Multi-page additions ===== */

/* Dropdown nav */
nav.primary { align-items: center; }
.nav-item { position: relative; }
.nav-item > a { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 600; font-size: 14px; padding: 10px 0; }
.nav-item > a::after { content: '▾'; font-size: 9px; color: var(--ink-faint); }
.nav-item > a:hover { color: var(--brand); text-decoration: none; }
.dropdown {
  position: absolute; top: 100%; left: -14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  min-width: 235px;
  display: none;
  z-index: 60;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { display: block; }
.dropdown a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.dropdown a:hover { background: var(--brand-soft); color: var(--brand); text-decoration: none; }

/* Mobile nav */
.nav-toggle {
  display: none;
  background: none; border: 1.5px solid var(--ink); border-radius: 9px;
  padding: 7px 12px; font-size: 17px; cursor: pointer; color: var(--ink);
}
.mobile-menu { display: none; border-top: 1px solid var(--line); background: var(--surface); max-height: calc(100vh - 130px); overflow-y: auto; }
.mobile-menu.open { display: block; }
.mm-group { padding: 14px 24px; border-bottom: 1px solid var(--line); }
.mm-group h5 { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; font-weight: 800; }
.mm-group a { display: block; padding: 7px 0; font-weight: 600; color: var(--ink); font-size: 15px; }
.mm-group a:hover { color: var(--brand); text-decoration: none; }

/* Sticky mobile call/text bar */
.mobile-bar { display: none; }

/* Page hero (subpages) */
.page-hero {
  padding: 52px 0 46px;
  background:
    radial-gradient(ellipse at top right, rgba(31,111,224,0.10), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, #F4ECD9 100%);
  border-bottom: 1px solid var(--line);
}
.crumbs { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; font-weight: 600; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--brand); text-decoration: none; }
.crumbs .sep { margin: 0 7px; color: var(--ink-faint); }
.page-hero h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 900; letter-spacing: -1.5px; line-height: 1.05; margin-bottom: 14px; }
.page-hero .lead { font-size: 18px; color: var(--ink-soft); max-width: 660px; }
.page-hero .cta-row { margin: 24px 0 0; }

/* Page body */
.page-body { padding: 64px 0; background: var(--surface); }
.page-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: start; }
.prose { font-size: 16.5px; }
.prose p { margin-bottom: 16px; color: var(--ink-soft); }
.prose p strong { color: var(--ink); }
.prose h2 { font-size: 26px; font-weight: 900; letter-spacing: -0.5px; margin: 34px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 19px; font-weight: 800; margin: 26px 0 8px; }
.prose ul, .prose ol { margin: 0 0 16px 20px; color: var(--ink-soft); }
.prose li { margin-bottom: 8px; }
.prose .callout {
  background: var(--paper); border-left: 4px solid var(--brand);
  padding: 16px 18px; border-radius: 0 10px 10px 0; margin: 22px 0;
  color: var(--ink);
}
aside.page-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.aside-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.aside-card h4 { font-weight: 800; font-size: 15px; margin-bottom: 12px; }
.aside-card ul { list-style: none; }
.aside-card li { margin-bottom: 9px; font-size: 14px; }
.aside-card .btn { width: 100%; justify-content: center; margin-top: 6px; }
.aside-card p.small { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }

/* Photo galleries */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
figure.ph { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 0; }
figure.ph img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
figure.ph figcaption { padding: 10px 12px; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.photo-feature { margin: 24px 0; }
.photo-feature img { width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.photo-feature figcaption { padding: 10px 4px 0; font-size: 13px; color: var(--ink-soft); font-weight: 600; }

/* Team grid */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.tm { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-align: center; padding-bottom: 16px; }
.tm img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 12px; }
.tm h4 { font-size: 15px; font-weight: 800; }
.tm p { font-size: 12.5px; color: var(--ink-soft); padding: 0 10px; }
/* Placeholder tile for team members whose headshot hasn't arrived yet. */
.tm-placeholder { width: 100%; aspect-ratio: 1; margin-bottom: 12px; display: flex;
  align-items: center; justify-content: center; font-size: 34px; font-weight: 800;
  letter-spacing: 1px; color: #7C8AA0; background: repeating-linear-gradient(
    45deg, #EEF2F7, #EEF2F7 10px, #E5EAF1 10px, #E5EAF1 20px); }

/* Sister-business card. Deliberately quieter than a service CTA: this is a
   helpful pointer to family in another region, not a competing call to action. */
.partner-card {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 14px; padding: 22px 24px; margin-top: 14px;
}
.partner-body { flex: 1 1 320px; }
.partner-card p { margin-bottom: 10px; }
.partner-card p:last-child { margin-bottom: 0; }
.partner-note { font-size: 14px; color: var(--ink-soft); font-style: italic; }
.partner-btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) { .partner-btn { width: 100%; text-align: center; } }

/* Placeholder review section. Deliberately loud so nobody mistakes these
   for real customer quotes, and so it can't quietly ship. Remove this rule
   together with the placeholder markup once Ron's real reviews go in. */
.review-notice { border: 2px dashed #C8102E; background: #FFF4F4; color: #8A1020;
  border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; font-size: 14px;
  line-height: 1.55; }
.review-notice strong { display: block; margin-bottom: 2px; }
.review.is-placeholder { opacity: 0.62; border-style: dashed; }
.review.is-placeholder p { font-style: italic; color: var(--ink-soft); }

/* History timeline (page) */
.hist-item { display: grid; grid-template-columns: 92px 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.hist-item:last-child { border-bottom: none; }
.hist-year { font-weight: 900; font-size: 22px; letter-spacing: -0.5px; color: var(--brand); line-height: 1.3; }
.hist-item p { color: var(--ink-soft); margin-bottom: 10px; }

/* Video grid */
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.video-grid figure { margin: 0; }
.video-grid video { width: 100%; border-radius: 12px; background: #000; }
.video-grid figcaption { padding: 8px 4px 0; font-size: 13px; color: var(--ink-soft); font-weight: 600; }

/* FAQ */
.faq-item { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); margin-bottom: 10px; padding: 4px 18px; }
.faq-item summary { font-weight: 700; cursor: pointer; padding: 12px 0; }
.faq-item .faq-a { padding: 0 0 14px; color: var(--ink-soft); font-size: 15px; }
.faq-item .faq-a p { margin-bottom: 10px; }
.faq-item .faq-a ul { margin: 0 0 10px 20px; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.contact-form { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.contact-form label { display: block; font-weight: 700; font-size: 13px; margin: 16px 0 6px; }
.contact-form label:first-of-type { margin-top: 0; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 9px;
  font-family: inherit; font-size: 14px; background: var(--surface); color: var(--ink);
}
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-form .btn { margin-top: 20px; }
.contact-form .form-note { font-size: 12px; color: var(--ink-faint); margin-top: 12px; }

/* Responsive */
@media (max-width: 960px) {
  .hero-grid, .crew-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .svc-grid, .channels-grid, .review-grid, .timeline, .footer-grid { grid-template-columns: 1fr 1fr; }
  nav.primary { display: none; }
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  .page-grid, .contact-grid { grid-template-columns: 1fr; }
  aside.page-aside { position: static; }
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .video-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .mobile-bar {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
    background: var(--ink);
    box-shadow: 0 -6px 20px -8px rgba(15,26,42,0.4);
  }
  .mobile-bar a { padding: 14px 8px; text-align: center; color: #FFF; font-weight: 700; font-size: 13px; }
  .mobile-bar a:hover { text-decoration: none; background: rgba(255,255,255,0.06); }
  .mobile-bar a + a { border-left: 1px solid rgba(255,255,255,0.12); }
  body { padding-bottom: 50px; }
  .helper { bottom: 70px; }
}
@media (max-width: 560px) {
  .svc-grid, .channels-grid, .review-grid, .timeline, .footer-grid, .stats-grid { grid-template-columns: 1fr; }
  section { padding: 64px 0; }
  .helper-panel { width: calc(100vw - 32px); }
  .photo-grid { grid-template-columns: 1fr; }
}