/* ==========================================================================
   Brian & Sons Removals & Storage — design system v13
   1 Tokens · 2 Base · 3 Frame, grid & surfaces · 4 Components · 5 Header
   6 Sections · 7 Footer · 8 Action bar · 9 Lightbox · 10 Quote form · 11 Motion · 12 Interior pages · 13 V13 compositions

   One alignment line: content sits inside .frame (70px from the viewport
   edge on desktop) on a 12-column grid. Section surfaces run edge to edge
   in a fixed sequence: warm white, charcoal, ivory, sand, stone, charcoal,
   warm white, ivory, charcoal. Icons are official Phosphor (regular) SVGs.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Surfaces */
  --c-warm: #FDFBF7;         /* header, hero, team */
  --c-ivory: #F7F1E5;        /* services, quotation */
  --c-sand: #EFE6D5;         /* gallery */
  --c-stone-soft: #F2ECE1;   /* storage */
  --c-white: #FFFFFF;        /* cards, form, inputs */
  --c-charcoal: #1C1814;     /* confidence panel, heritage, footer */
  --c-charcoal-2: #25201B;   /* raised surface on charcoal */

  /* Text and accents */
  --c-ink: #1A1410;
  --c-stone: #5F5446;
  --c-red: #B41212;
  --c-red-dark: #8C0D0D;
  --c-gold: #B49666;         /* on charcoal */
  --c-gold-text: #7A5E30;    /* on light */
  --c-tan: #D8C08A;          /* headings on charcoal */
  --c-cream: #F3EBDC;        /* strong text on charcoal */
  --c-cream-dim: #CFC4AE;    /* body text on charcoal */
  --c-line: #E2D7C1;
  --c-line-strong: #C9B894;
  --c-line-dark: rgba(180, 150, 102, 0.26);
  --c-field-line: #857455;   /* input borders, 4.4:1 on white */

  /* Type */
  --font-display: 'Bitter', Georgia, 'Times New Roman', serif;
  --font-body: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --fs-h1: clamp(2.25rem, 1rem + 3.4vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 1.4vw, 2.75rem);
  --fs-h3: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  --fs-lede: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* Frame, grid and rhythm */
  --frame: 16px;
  --maxw: 1780px;
  --gap: 16px;
  --fw: min(100vw - var(--frame) * 2, var(--maxw));
  --col: calc((var(--fw) - var(--gap) * 11) / 12);
  --sy: 56px;
  --head-gap: 32px;
  --header-h: 64px;
  --radius: 4px;

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(26, 20, 16, 0.06);
  --shadow-md: 0 18px 36px -24px rgba(26, 20, 16, 0.38);
  --shadow-lg: 0 28px 56px -36px rgba(26, 20, 16, 0.45);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 0.2s;
  --t: 0.25s;
  --t-img: 0.45s;
}
@media (min-width: 360px)  { :root { --frame: 20px; } }
@media (min-width: 768px)  { :root { --frame: 36px; --gap: 20px; --sy: 72px; --head-gap: 40px; } }
@media (min-width: 1024px) { :root { --frame: 44px; --gap: 24px; --sy: 80px; --head-gap: 48px; --header-h: 84px; } }
@media (min-width: 1200px) { :root { --frame: 70px; --sy: 88px; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.menu-open { overflow: hidden; }
body {
  background: var(--c-ivory); color: var(--c-ink);
  font: 400 var(--fs-body)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
::selection { background: var(--c-tan); color: var(--c-charcoal); }
svg.ph { width: 1.25em; height: 1.25em; flex: none; }

:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.section--dark :focus-visible, .confidence :focus-visible, .site-footer :focus-visible, .action-bar :focus-visible, .lightbox :focus-visible { outline-color: var(--c-tan); }
:focus { scroll-margin-top: calc(var(--header-h) + 16px); scroll-margin-bottom: 88px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px;
  background: var(--c-charcoal); color: var(--c-warm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Frame, grid & surfaces ---------- */
.frame { width: min(100% - var(--frame) * 2, var(--maxw)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap); }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.section { position: relative; padding-block: var(--sy); }
.section--warm { background: var(--c-warm); }
.section--ivory { background: var(--c-ivory); }
.section--sand { background: var(--c-sand); }
.section--stone { background: var(--c-stone-soft); border-top: 1px solid var(--c-line); }
.section--dark { background: var(--c-charcoal); color: var(--c-cream-dim); }

/* Genuine photography blended into one edge of a section, never behind body copy */
.has-bg-photo { overflow: hidden; overflow: clip; isolation: isolate; }
.has-bg-photo::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: var(--bg) center / cover no-repeat;
}
.has-bg-photo > .frame { position: relative; }

.section-head { margin-bottom: var(--head-gap); row-gap: 16px; }
@media (min-width: 1024px) {
  .section-head-main { grid-column: 1 / span 7; }
  .section-head-aside { grid-column: 9 / -1; align-self: end; }
}

/* ---------- 4. Components ---------- */
.label {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font: 600 var(--fs-label)/1.3 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold-text);
}
.label::before { content: ""; width: 24px; height: 1px; background: currentColor; flex: none; }
.section--dark .label { color: var(--c-gold); }

.h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.015em; max-width: 22ch; }
.section--dark .h2 { color: var(--c-tan); }
.lede { font-size: var(--fs-lede); line-height: 1.6; color: var(--c-stone); max-width: 52ch; }
.section--dark .lede { color: var(--c-cream-dim); }
.h2 + .lede { margin-top: 16px; }

/* Buttons: colour, border, arrow and press share one timing */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: inherit;
  font: 600 0.9375rem/1.2 var(--font-body); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.btn svg.ph { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.btn:hover .ph-arrow-right { transform: translateX(3px); }
.btn:active { transform: translateY(1px); transition-duration: 0.08s; }
.btn:focus-visible { outline-offset: 3px; }
.btn--primary { background: var(--c-red); border-color: var(--c-red); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--c-red-dark); border-color: var(--c-red-dark); box-shadow: 0 12px 24px -14px rgba(140, 13, 13, 0.75); }
@media (hover: hover) { .btn--primary:hover { transform: translateY(-1px); } .btn--primary:active { transform: translateY(0); } }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.875rem; }
.btn--outline { border-color: var(--c-ink); color: var(--c-ink); }
.btn--outline:hover { background: var(--c-ink); color: var(--c-warm); }
.btn--outline svg.ph:first-child { color: var(--c-red); }
.btn--outline:hover svg.ph:first-child { color: inherit; }
.btn--outline-light { border-color: rgba(247, 241, 229, 0.42); color: var(--c-warm); }
.btn--outline-light:hover { border-color: var(--c-warm); background: var(--c-warm); color: var(--c-charcoal); }
.btn--outline-light svg.ph:first-child { color: var(--c-tan); }
.btn--outline-light:hover svg.ph:first-child { color: var(--c-red); }
.btn[disabled] { opacity: 0.75; cursor: progress; transform: none; }

/* Secondary telephone action: icon disc + two-line label, distinct from the button */
.call-link { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; color: var(--c-ink); }
.call-link-icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-red);
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.call-link-icon svg.ph { width: 20px; height: 20px; }
.call-link-text { display: grid; font: 600 1.0625rem/1.2 var(--font-display); font-variant-numeric: lining-nums; transition: color var(--t) var(--ease); }
.call-link-text small { font: 600 0.75rem/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-stone); }
.call-link:hover .call-link-icon { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.call-link:hover .call-link-text { color: var(--c-red); }
.call-link-icon svg.ph { transition: transform var(--t) var(--ease); }
.call-link:hover .call-link-icon svg.ph { transform: rotate(-8deg); }
.call-link:active .call-link-icon { transform: scale(0.95); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }

.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--c-gold); transition: color var(--t) var(--ease); }
.link:hover { color: var(--c-red); }
.section--dark .link:hover, .site-footer .link:hover { color: var(--c-tan); }

.photo { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: #DDD3C1; }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 5. Header ---------- */
/* Slim utility strip: location and every contact route, scrolls away above the sticky header */
.utility { display: none; background: var(--c-charcoal); color: var(--c-cream-dim); border-bottom: 1px solid rgba(180, 150, 102, 0.35); font-size: 0.875rem; }
.utility-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; }
.utility-note { display: flex; align-items: center; gap: 8px; }
.utility svg.ph { width: 16px; height: 16px; color: var(--c-gold); }
.utility-links { list-style: none; padding: 0; display: flex; align-items: center; gap: 4px; }
.utility-links li + li { border-left: 1px solid var(--c-line-dark); }
.utility-links a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; color: var(--c-cream); text-decoration: none; font-variant-numeric: lining-nums; transition: color var(--t) var(--ease); }
.utility-links li:last-child a { padding-right: 0; }
.utility-key { color: var(--c-cream-dim); }
.utility-links a:hover, .utility-links a:hover .utility-key { color: var(--c-tan); }
.utility :focus-visible { outline-color: var(--c-tan); outline-offset: -2px; }
@media (min-width: 1024px) { .utility { display: block; } }

.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--c-warm);
  border-bottom: 1px solid transparent; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.site-header { border-bottom-color: var(--c-line); }
.site-header.is-scrolled { border-bottom-color: var(--c-line); box-shadow: 0 10px 24px -22px rgba(26, 20, 16, 0.5); }
@supports (backdrop-filter: blur(1px)) {
  .site-header.is-scrolled { background: rgba(253, 251, 247, 0.92); backdrop-filter: saturate(1.3) blur(12px); }
  html.menu-open .site-header { background: var(--c-warm); backdrop-filter: none; }
}
.header-inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); transition: height 0.3s var(--ease); }
.brand { display: flex; align-items: center; min-height: 44px; flex: none; }
.brand img { width: 132px; height: auto; mix-blend-mode: multiply; transition: width 0.3s var(--ease); }

.site-nav { display: none; margin-left: auto; }
.site-nav ul { list-style: none; padding: 0; display: flex; }
.site-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px;
  font: 500 0.9375rem/1 var(--font-body); text-decoration: none; color: var(--c-ink); transition: color var(--t) var(--ease);
}
.site-nav a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 8px; height: 2px; border-radius: 1px; background: var(--c-gold);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease), background-color var(--t) var(--ease);
}
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a:hover { color: var(--c-ink); }
.site-nav a[aria-current="true"], .site-nav a[aria-current="page"] { color: var(--c-red); }
.site-nav a[aria-current="true"]::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--c-red); }
.site-nav a { white-space: nowrap; }

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.header-phone { display: none; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--c-ink); }
.header-phone-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-line-strong); color: var(--c-red); transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); }
.header-phone-icon svg.ph { width: 18px; height: 18px; }
.header-phone-text { display: grid; font: 600 1rem/1.15 var(--font-display); font-variant-numeric: lining-nums; transition: color var(--t) var(--ease); }
.header-phone-text small { font: 600 0.75rem/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-stone); }
.header-phone:hover .header-phone-icon { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.header-phone:hover .header-phone-text { color: var(--c-red); }
.header-cta { display: none; }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--c-line-strong); background: var(--c-white); color: var(--c-ink);
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.icon-btn svg.ph { width: 20px; height: 20px; }
/* Labelled controls on small screens: a word beside each icon, no guessing */
.icon-btn:has(.icon-btn-text) { display: inline-flex; align-items: center; width: auto; gap: 6px; padding: 0 14px 0 12px; border-radius: 999px; text-decoration: none; }
.icon-btn-text { font: 600 0.875rem/1 var(--font-body); }
.menu-toggle .mt-open, .menu-toggle .mt-close { display: inline-flex !important; align-items: center; gap: 6px; }
.menu-toggle .mt-close, .menu-toggle[aria-expanded="true"] .mt-open { display: none !important; }
@media (max-width: 359px) { .icon-btn--call .icon-btn-text { display: none; } .icon-btn--call { padding: 0 12px; } }
.icon-btn:hover, .menu-toggle[aria-expanded="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-warm); }
.icon-btn--call { color: var(--c-red); }
.icon-btn--call:hover { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.menu-toggle span { display: grid; place-items: center; }
.menu-toggle .mt-close, .menu-toggle[aria-expanded="true"] .mt-open { display: none; }
.menu-toggle[aria-expanded="true"] .mt-close { display: grid; }

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain;
  background: var(--c-warm); border-top: 1px solid var(--c-line);
  opacity: 0; transform: translateY(-6px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.mobile-menu.is-open { opacity: 1; transform: none; }
.mobile-menu[hidden] { display: none; }
.mobile-menu-inner { padding-block: 8px 32px; }
.mobile-menu-list { list-style: none; padding: 0; }
.mobile-menu-list li { border-bottom: 1px solid var(--c-line); opacity: 0; transform: translateY(6px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.mobile-menu.is-open .mobile-menu-list li { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-menu-list li:nth-child(2) { transition-delay: 0.03s; }
.mobile-menu.is-open .mobile-menu-list li:nth-child(3) { transition-delay: 0.06s; }
.mobile-menu.is-open .mobile-menu-list li:nth-child(4) { transition-delay: 0.09s; }
.mobile-menu.is-open .mobile-menu-list li:nth-child(5) { transition-delay: 0.12s; }
.mobile-menu-list a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font: 600 1.25rem/1.2 var(--font-display); text-decoration: none; transition: color var(--t) var(--ease); }
.mobile-menu-list a svg.ph { width: 20px; height: 20px; color: var(--c-gold-text); transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.mobile-menu-list a:hover, .mobile-menu-list a[aria-current] { color: var(--c-red); }
.mobile-menu-list a:hover svg.ph, .mobile-menu-list a[aria-current] svg.ph { color: var(--c-red); transform: translateX(3px); }
.mobile-menu-foot { display: grid; gap: 12px; margin-top: 28px; }
.mobile-menu-address { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: var(--fs-small); color: var(--c-stone); }
.mobile-menu-address svg.ph { width: 18px; height: 18px; color: var(--c-gold-text); margin-top: 1px; }

@media (min-width: 1024px) {
  .brand img { width: 184px; }
  .site-header.is-scrolled { --header-h: 66px; }
  .site-header.is-scrolled .brand img { width: 152px; }
  .site-nav a { padding: 0 14px; }
  .site-nav { display: block; }
  .header-actions { margin-left: 8px; gap: 20px; }
  .header-phone, .header-cta { display: inline-flex; }
  .icon-btn--call, .menu-toggle, .mobile-menu { display: none !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-phone { display: none; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .brand img, .site-header.is-scrolled .brand img { width: 140px; }
  .site-nav a { padding: 0 9px; font-size: 0.875rem; }
  .site-nav a::after { left: 9px; right: 9px; }
  .header-actions { gap: 12px; }
  .utility-note { display: none; }
  .utility-inner { justify-content: flex-end; }
}
.utility-links a { white-space: nowrap; }
/* With three phone numbers in the strip, the location note only fits on wide screens */
@media (min-width: 1200px) and (max-width: 1439px) {
  .utility-note { display: none; }
  .utility-inner { justify-content: flex-end; }
}

/* ==========================================================================
   6. Sections
   ========================================================================== */

/* ---------- Hero: the photograph is framed inside the content edge, and the copy sits on a
   warm-white panel cut into it, like a signboard. The heritage seal marks the corner. ---------- */
.hero {
  --overlap: 72px;
  position: relative; overflow-x: clip; padding-top: 24px;
  background: linear-gradient(to bottom, var(--c-warm) calc(100% - var(--overlap)), var(--c-ivory) calc(100% - var(--overlap)));
}
.hero-stage { display: flex; flex-direction: column-reverse; }
.hero-title { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.026em; margin-bottom: 22px; }
.hero-title span { display: block; }
.hero-panel .lede { max-width: 44ch; }
.hero-media { position: relative; margin: 32px calc(-1 * var(--frame)) 0; }
.hero-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #CFC6B4; }
.hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(26, 20, 16, 0.22), transparent 30%); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 62%; filter: contrast(1.03) saturate(1.04); }
.hero .hero-seal { right: calc(var(--frame) + 4px); top: -34px; left: auto; z-index: 3; width: 84px; height: 84px; }
@media (min-width: 640px) { .hero-media { margin-inline: 0; } .hero-photo { border-radius: var(--radius); } .hero .hero-seal { right: -10px; } }
@media (min-width: 1024px) {
  .hero { padding-top: 32px; --overlap: 88px; }
  .hero-stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
  .hero-media { grid-column: 7 / -1; grid-row: 1; margin: 0; }
  .hero-photo { aspect-ratio: auto; height: clamp(500px, 68vh, 640px); box-shadow: var(--shadow-lg); }
  /* The gold edge where the panel meets the photograph */
  .hero-photo::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, var(--c-gold), rgba(180, 150, 102, 0)); }
  .hero-panel {
    position: relative; z-index: 2; grid-column: 1 / span 7; grid-row: 1;
    padding: 44px 44px 44px 0; background: var(--c-warm); border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: 28px 0 48px -36px rgba(26, 20, 16, 0.5);
  }
  .hero-panel::after { content: ""; position: absolute; right: 0; top: 24px; bottom: 24px; width: 2px; background: var(--c-gold); opacity: 0.6; }
  .hero-title span { white-space: nowrap; }
  .hero .hero-seal { right: -24px; top: -30px; width: 116px; height: 116px; }
}
@media (min-width: 1440px) {
  .hero-media { grid-column: 6 / -1; }
  .hero-panel { grid-column: 1 / span 6; padding-right: 52px; }
}

/* Confidence panel */
.confidence {
  position: relative; margin-top: 48px; padding: 24px 22px; border-radius: var(--radius);
  background: radial-gradient(560px 200px at 0 0, rgba(216, 192, 138, 0.11), transparent 70%), var(--c-charcoal);
  color: var(--c-cream-dim); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(216, 192, 138, 0.14); display: grid; gap: 18px;
}
.confidence-kicker { display: flex; align-items: center; gap: 8px; font: 600 0.75rem/1.3 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold); }
.confidence-kicker svg.ph { width: 18px; height: 18px; }
.confidence-title { margin-top: 10px; font: 600 1.3125rem/1.22 var(--font-display); letter-spacing: -0.01em; color: var(--c-tan); }
.confidence-text { margin-top: 8px; font-size: 1rem; line-height: 1.5; }
.confidence-points { list-style: none; padding: 0; display: grid; }
.confidence-points li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; padding: 14px 0; border-top: 1px solid var(--c-line-dark); }
.confidence-points svg.ph { width: 26px; height: 26px; color: var(--c-gold); }
.confidence-points p { font-size: 1rem; line-height: 1.45; }
.confidence-points .cp-title { font: 600 1.0625rem/1.5rem var(--font-display); color: var(--c-cream); margin-bottom: 2px; }
@media (min-width: 640px) {
  .confidence-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
  .confidence-points li { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
}
@media (min-width: 1024px) {
  .confidence { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; margin-top: 32px; padding: 28px 40px; z-index: 2; }
  .confidence-lead { grid-column: 1 / span 4; padding-right: 24px; }
  /* One divider only: between the heritage statement and the facts */
  .confidence-points { grid-column: 5 / -1; position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; padding-left: 36px; }
  .confidence-points::before { content: ""; position: absolute; left: 0; top: -6px; bottom: -6px; width: 1px; background: linear-gradient(to bottom, transparent, rgba(180, 150, 102, 0.55) 20%, rgba(180, 150, 102, 0.55) 80%, transparent); }
  .confidence-points li { grid-template-columns: 26px minmax(0, 1fr); padding: 0; border-top: 0; }
  .confidence-points svg.ph { margin-top: -1px; }
}
@media (max-width: 1023px) { .confidence { margin-top: -40px; z-index: 2; } }

/* ---------- Removals: six cards, three photographic, three brand surfaces ---------- */
.cards { list-style: none; padding: 0; display: grid; gap: 20px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } }
.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t-fast) var(--ease);
}
.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-charcoal); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.012); transition: transform var(--t-img) var(--ease); }
/* Shared finish on both media treatments: a soft charcoal foot and a hairline inner frame */
.card-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(28, 24, 20, 0.3), transparent 42%); box-shadow: inset 0 0 0 1px rgba(26, 20, 16, 0.06); }
/* The same thin red rule the team portraits use, drawn across the foot of the image */
.card-media::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c-red); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.card:hover .card-media::before, .card:focus-within .card-media::before { transform: scaleX(1); }
/* Where no genuine photograph fits the service, a charcoal brand surface carries the icon */
.card-media--brand {
  display: grid; place-items: center; color: var(--c-tan);
  background:
    radial-gradient(260px 160px at 85% 15%, rgba(216, 192, 138, 0.12), transparent 70%),
    repeating-linear-gradient(135deg, rgba(180, 150, 102, 0.07) 0 1px, transparent 1px 12px),
    var(--c-charcoal);
}
.brand-mark {
  display: grid; place-items: center; width: 112px; height: 112px; margin-top: -8px; border-radius: 50%;
  border: 1px solid rgba(216, 192, 138, 0.34); background: rgba(28, 24, 20, 0.6);
  box-shadow: 0 0 0 12px rgba(216, 192, 138, 0.035), 0 0 0 13px rgba(216, 192, 138, 0.12);
  transition: transform var(--t-img) var(--ease), border-color var(--t) var(--ease);
}
.brand-mark svg.ph { width: 56px; height: 56px; }
.card-body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: 0 24px 24px; }
.card-badge {
  display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%;
  background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); color: var(--c-ink);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.card-badge svg.ph { width: 24px; height: 24px; }
.card h3 { margin-top: 14px; font-size: 1.1875rem; line-height: 1.3; }
.card-link { text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.card-link:focus-visible { outline: none; }
.card p { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--c-stone); }
.card-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-size: var(--fs-small); font-weight: 600; color: var(--c-ink); transition: color var(--t-fast) var(--ease); }
.card-cta svg.ph { width: 16px; height: 16px; color: var(--c-red); transition: transform var(--t) var(--ease); }
.card:hover, .card:focus-within { border-color: var(--c-line-strong); box-shadow: var(--shadow-md); }
.card:has(.card-link:focus-visible) { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.card:hover .card-badge, .card:focus-within .card-badge { color: var(--c-red); border-color: rgba(180, 18, 18, 0.35); }
.card:hover .card-cta, .card:focus-within .card-cta { color: var(--c-red); }
.card:hover .card-cta svg.ph, .card:focus-within .card-cta svg.ph { transform: translateX(4px); }
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); }
  .card:hover .card-media img { transform: scale(1.035); }
  .card:hover .brand-mark { transform: scale(1.04); border-color: rgba(216, 192, 138, 0.6); }
  .card:active { transform: translateY(-1px); box-shadow: var(--shadow-sm); transition-duration: 0.08s; }
}
.cards-foot { margin-top: 28px; font-size: 1rem; color: var(--c-stone); }
.call-inline { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--c-ink); text-decoration: none; transition: color var(--t) var(--ease); }
.call-inline svg.ph { width: 18px; height: 18px; color: var(--c-red); }
.call-inline:hover { color: var(--c-red); }

/* ---------- At work: aligned row of three, each opens the viewer ---------- */
.gallery { grid-template-columns: 1fr 1fr; row-gap: 24px; }
.gallery-item--feature { grid-column: 1 / -1; }
.gallery-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: var(--radius); cursor: zoom-in; }
.gallery-item .photo { aspect-ratio: 3 / 4; box-shadow: var(--shadow-sm); }
.gallery-item--feature .photo { aspect-ratio: 3 / 2; }
.gallery-item .photo img { transition: transform var(--t-img) var(--ease), filter var(--t-img) var(--ease); }
.gallery-item .photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(26, 20, 16, 0.08); background: linear-gradient(to top, rgba(28, 24, 20, 0.28), transparent 40%); opacity: 0; transition: opacity var(--t) var(--ease); }
.gallery-open:active .photo { transform: scale(0.996); }
.gallery-open .photo { transition: transform 0.1s var(--ease); }
.gallery-zoom {
  position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: rgba(253, 251, 247, 0.92); color: var(--c-ink); box-shadow: var(--shadow-sm);
  opacity: 0.9; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.gallery-zoom svg.ph { width: 18px; height: 18px; }
@media (hover: hover) {
  .gallery-zoom { opacity: 0; transform: scale(0.92); }
  .gallery-open:hover .gallery-zoom, .gallery-open:focus-visible .gallery-zoom { opacity: 1; transform: none; }
  .gallery-open:hover .photo img { transform: scale(1.03); filter: contrast(1.04); }
  .gallery-open:hover .photo::after, .gallery-open:focus-visible .photo::after { opacity: 1; }
  .gallery-open:hover + figcaption { color: var(--c-ink); }
}
.gallery-item figcaption { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-line-strong); font-size: 0.9375rem; color: var(--c-stone); transition: color var(--t) var(--ease); }
.gallery-item figcaption span { font: 600 0.75rem/1 var(--font-display); color: var(--c-gold-text); font-variant-numeric: lining-nums; }
@media (min-width: 1024px) {
  .gallery { --g-h: min(calc((var(--col) * 3 + var(--gap) * 2) * 4 / 3), 480px); grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gallery-item { grid-column: span 3; }
  .gallery-item--feature { grid-column: 1 / span 6; }
  .gallery-item--feature.gallery-item--end { grid-column: 7 / -1; }
  .gallery-item .photo, .gallery-item--feature .photo { aspect-ratio: auto; height: var(--g-h); }
  .gallery--more .gallery-item { grid-column: span 4; }
  .gallery--more .gallery-item .photo { height: auto; aspect-ratio: 4 / 3; }
}
.gallery + .gallery-more, .gallery-more { margin-top: 24px; }
.gallery--more .gallery-item .photo { aspect-ratio: 4 / 3; }
@media (max-width: 1023px) { .gallery--more .gallery-item:first-child { grid-column: 1 / -1; } }
.gallery-more:not([hidden]) .gallery-item { animation: qf-in 0.4s var(--ease) both; }
.gallery-foot { display: flex; justify-content: center; margin-top: 32px; }
.gallery-toggle svg.ph { color: var(--c-gold-text); }
.gallery-toggle:hover svg.ph { color: inherit; }

/* ---------- Storage: one photograph, a charcoal store plate, and a clear choice between two ways to store ---------- */
.storage { row-gap: 40px; align-items: start; }
.store-media { position: relative; }
.store-photo { aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); }
.store-photo img { transition: transform 0.9s var(--ease); }
/* The gold photographic edge used on the hero */
.store-photo::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, var(--c-gold), rgba(180, 150, 102, 0)); }
.store-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(26, 20, 16, 0.32), transparent 45%); }
@media (hover: hover) { .store-media:hover .store-photo img { transform: scale(1.025); } }
.store-plate {
  position: relative; z-index: 2; margin: -40px 12px 0; padding: 22px 22px 20px;
  background: radial-gradient(420px 200px at 100% 0, rgba(216, 192, 138, 0.1), transparent 70%), var(--c-charcoal);
  border-top: 2px solid var(--c-gold); border-radius: var(--radius); color: var(--c-cream-dim);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.8);
}
.store-plate-kicker { display: flex; align-items: center; gap: 8px; font: 600 var(--fs-label)/1.3 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold); }
.store-plate-kicker svg.ph { width: 18px; height: 18px; }
.store-plate-figure { margin-top: 12px; font: 600 clamp(2.25rem, 1.9rem + 1.2vw, 3rem)/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: lining-nums; color: var(--c-tan); }
.store-plate-figure span { font-size: 0.5em; letter-spacing: 0; color: var(--c-cream); }
.store-plate-unit { margin-top: 8px; max-width: 36ch; font-size: 1rem; line-height: 1.5; }
.store-plate-facts { list-style: none; padding: 16px 0 0; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 20px; border-top: 1px solid var(--c-line-dark); font-size: 0.9375rem; color: var(--c-cream); }
.store-plate-facts li { display: inline-flex; align-items: center; gap: 8px; }
.store-plate-facts svg.ph { width: 18px; height: 18px; color: var(--c-gold); }

.store-options-title { display: flex; align-items: center; gap: 14px; font: 600 var(--fs-label)/1.3 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold-text); }
.store-options-title::after { content: ""; flex: 1; height: 1px; background: var(--c-line-strong); }
.store-options { list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 16px; }
.store-option {
  position: relative; padding: 20px 22px 20px 24px; border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* A short gold rule on each option that runs the full height on hover */
.store-option::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; border-radius: var(--radius) 0 0 var(--radius); background: var(--c-gold); transform: scaleY(0.3); transform-origin: top; transition: transform 0.35s var(--ease); }
.store-option-q { font: 600 0.75rem/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-stone); }
.store-option-title { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 1.25rem; }
.store-option-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--c-ivory); border: 1px solid var(--c-line); color: var(--c-gold-text); transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); }
.store-option-icon svg.ph { width: 20px; height: 20px; }
.store-option-text { margin-top: 10px; max-width: 46ch; font-size: 1rem; line-height: 1.55; color: var(--c-stone); }
.store-option-access { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 5px 14px 5px 5px; border-radius: 999px; background: var(--c-ivory); border: 1px solid var(--c-line); font: 600 0.9375rem/1.2 var(--font-display); color: var(--c-ink); }
.store-option-access span { padding: 4px 9px; border-radius: 999px; background: var(--c-charcoal); color: var(--c-tan); font: 600 0.75rem/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; }
@media (hover: hover) {
  .store-option:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-md); }
  .store-option:hover::before { transform: scaleY(1); }
  .store-option:hover .store-option-icon { background: var(--c-charcoal); border-color: var(--c-charcoal); color: var(--c-tan); }
}
.store-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--c-line); }
@media (min-width: 640px) { .store-options { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) {
  .store-media { margin-bottom: 40px; }
  .store-plate { position: absolute; left: 24px; bottom: -40px; width: min(400px, 68%); margin: 0; }
}
@media (min-width: 1024px) {
  .storage { align-items: center; }
  .store-media { grid-column: 1 / span 7; }
  .store-body { grid-column: 9 / -1; }
  .store-options { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .store-body { grid-column: 8 / -1; } }

/* ---------- Our story: a mounted archive print beside a timeline read as one story ---------- */
#story { background: radial-gradient(900px 520px at 88% 8%, rgba(216, 192, 138, 0.08), transparent 70%), var(--c-charcoal); }
.story { row-gap: 40px; }
.story-print { position: relative; margin: 0; padding: 10px 10px 0; background: #EFE6D5; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 40px 70px -40px rgba(0, 0, 0, 0.95); }
.story-print-photo { aspect-ratio: 817 / 459; overflow: hidden; background: #2A241E; }
.story-print-photo img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.12) contrast(1.02); }
.story-print figcaption { padding: 11px 4px 13px; font-size: 0.9375rem; color: var(--c-stone); }
/* The heritage seal: reused wherever the founding year needs marking */
.seal { position: absolute; right: -8px; top: -30px; width: 92px; height: 92px; transform: rotate(-8deg); filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45)); }
.seal-disc { fill: var(--c-charcoal); stroke: var(--c-gold); stroke-width: 1.5; }
.seal-rule { fill: none; stroke: rgba(180, 150, 102, 0.55); stroke-width: 0.75; }
.seal-ring { font: 600 8.4px var(--font-body); letter-spacing: 0.12em; fill: var(--c-gold); }
.seal-est { font: 600 7.5px var(--font-body); letter-spacing: 0.24em; fill: var(--c-gold); }
.seal-year { font: 700 19px var(--font-display); fill: var(--c-tan); }

/* The family line, set like the back of a print */
.story-family { display: grid; margin-top: 28px; border-top: 1px solid var(--c-line-dark); }
.story-family div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--c-line-dark); }
.story-family dt { font: 600 var(--fs-label)/1.6 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold); }
.story-family dd { margin: 0; font: 600 1.0625rem/1.4 var(--font-display); color: var(--c-cream); }
@media (max-width: 479px) { .story-family div { grid-template-columns: 1fr; } }
.timeline { list-style: none; padding: 0; }
.milestone { position: relative; padding: 0 0 30px 44px; }
.milestone:last-child { padding-bottom: 0; }
/* The rail between milestones, drawn in gold as the story is read */
.milestone::before {
  content: ""; position: absolute; left: 8px; top: 26px; bottom: 2px; width: 1px;
  background: linear-gradient(var(--c-gold), var(--c-gold)) 0 0 / 1px 0% no-repeat, var(--c-line-dark);
  transition: background-size 0.7s var(--ease);
}
.milestone:last-child::before { display: none; }
.milestone::after {
  content: ""; position: absolute; left: 1px; top: 5px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--c-charcoal); border: 2px solid var(--c-gold);
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.milestone-mark { display: block; font: 600 1.0625rem/1.4 var(--font-display); color: var(--c-gold); font-variant-numeric: lining-nums; transition: color 0.4s var(--ease); }
.milestone:first-child .milestone-mark { font-size: 1.5rem; line-height: 1.2; }
.milestone h3 { margin-top: 4px; font-size: var(--fs-h3); color: var(--c-cream); transition: color 0.4s var(--ease); }
.milestone p { margin-top: 6px; max-width: 52ch; font-size: 1rem; line-height: 1.6; }
/* Without JavaScript every milestone shows as reached */
.timeline:not(.is-live) .milestone::before, .milestone.is-past::before { background-size: 1px 100%; }
.timeline:not(.is-live) .milestone::after, .milestone.is-past::after { background: var(--c-gold); }
.timeline.is-live .milestone:not(.is-current):not(.is-past) h3 { color: var(--c-cream-dim); }
.milestone.is-current::after { background: var(--c-tan); border-color: var(--c-tan); box-shadow: 0 0 0 6px rgba(216, 192, 138, 0.16); transform: scale(1.1); }
.milestone.is-current .milestone-mark { color: var(--c-tan); }
@media (min-width: 1024px) {
  .story { row-gap: 0; }
  .story-head { grid-column: 1 / span 6; grid-row: 1; }
  .timeline { grid-column: 1 / span 6; grid-row: 2; margin-top: 44px; }
  .story-aside { grid-column: 8 / -1; grid-row: 1 / span 2; }
  .story-sticky { position: sticky; top: calc(66px + 48px); margin-top: 28px; }
  .seal { right: -26px; top: -38px; width: 112px; height: 112px; }
  .milestone { padding-bottom: 34px; }
}

/* ---------- Team: one featured profile beside a selector of the whole team ---------- */
.team-show { row-gap: 28px; align-items: start; }
.team-stage { display: grid; gap: 20px; }
.profile {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); overflow: hidden; border-radius: var(--radius);
  background: radial-gradient(520px 260px at 100% 0, rgba(216, 192, 138, 0.16), transparent 70%), var(--c-ivory);
  border: 1px solid var(--c-line); border-top: 3px solid var(--c-gold); box-shadow: var(--shadow-md);
}
.profile-photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #1A1714; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: saturate(0.9) contrast(1.03) brightness(1.02); }
.profile-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c-red); }
.profile-body { align-self: center; padding: 20px 18px; }
.profile-role { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--c-white); border: 1px solid var(--c-line); font: 600 0.75rem/1.3 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-text); }
.profile-name { margin-top: 12px; font-size: clamp(1.375rem, 1.2rem + 0.7vw, 2rem); }
.profile-bio { margin-top: 10px; max-width: 50ch; font-size: 1rem; line-height: 1.6; color: var(--c-stone); }
.profile-facts { display: grid; margin-top: 16px; border-top: 1px solid var(--c-line); }
.profile-facts div { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.profile-facts dt { font: 600 var(--fs-label)/1.6 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-gold-text); }
.profile-facts dd { margin: 0; font: 600 1rem/1.45 var(--font-display); color: var(--c-ink); }
.team-call { margin-top: 18px; }

/* Selector: real buttons with portrait, name and role always visible */
.team-picker-title { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font: 600 var(--fs-label)/1.3 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold-text); }
.team-picker-title::after { content: ""; flex: 1; height: 1px; background: var(--c-line-strong); }
.team-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.team-pick {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; align-items: center; gap: 10px;
  width: 100%; min-height: 64px; padding: 8px 10px 8px 8px; text-align: left;
  border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); color: var(--c-ink);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.team-pick::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; border-radius: var(--radius) 0 0 var(--radius); background: var(--c-red); transform: scaleY(0); transition: transform var(--t) var(--ease); }
.team-pick-photo { display: block; width: 44px; height: 55px; overflow: hidden; border-radius: 2px; background: #1A1714; }
.team-pick-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; filter: saturate(0.85); transition: transform var(--t-img) var(--ease), filter var(--t) var(--ease); }
.team-pick-text { display: grid; min-width: 0; }
.team-pick-name { font: 600 1rem/1.25 var(--font-display); transition: color var(--t) var(--ease); }
.team-pick-role { font-size: 0.8125rem; line-height: 1.35; color: var(--c-stone); }
.team-pick svg.ph { width: 16px; height: 16px; color: var(--c-gold-text); transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.team-pick:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-sm); }
.team-pick:hover .team-pick-photo img { transform: scale(1.06); filter: saturate(1); }
.team-pick:hover svg.ph { transform: translateX(2px); }
.team-pick:active { transform: scale(0.99); }
.team-pick[aria-pressed="true"] { border-color: var(--c-ink); background: #FFFDF8; box-shadow: var(--shadow-sm); }
.team-pick[aria-pressed="true"]::before { transform: scaleY(1); }
.team-pick[aria-pressed="true"] .team-pick-name { color: var(--c-red-dark); }
.team-pick[aria-pressed="true"] .team-pick-photo img { filter: saturate(1); }
.team-pick[aria-pressed="true"] svg.ph { color: var(--c-red); }

/* Live: every profile shares one cell so switching never moves the page */
.team-show.is-live .team-stage { gap: 0; }
.team-show.is-live .profile { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s; }
.team-show.is-live .profile.is-active { opacity: 1; visibility: visible; transition: opacity 0.35s var(--ease) 0.05s, visibility 0s; }
.team-show.is-live .profile.is-active .profile-photo img { animation: profile-in 0.6s var(--ease) both; }
@keyframes profile-in { from { transform: scale(1.03); } to { transform: none; } }
.team-show:not(.is-live) .team-picker { display: none; }

@media (max-width: 639px) {
  .profile { grid-template-columns: minmax(0, 1fr); }
  .profile-photo { aspect-ratio: 4 / 3; }
  .profile-photo img { object-position: 50% 22%; }
  .team-pick { grid-template-columns: 40px minmax(0, 1fr); padding-right: 8px; }
  .team-pick svg.ph { display: none; }
  .team-pick-photo { width: 40px; height: 50px; }
}
/* On small screens the selector comes first, so the chosen profile appears just below it */
@media (max-width: 1023px) {
  .team-picker { order: -1; }
}
@media (min-width: 640px) {
  .profile-body { padding: 28px 28px 28px 30px; }
}
@media (min-width: 1024px) {
  .team-show { align-items: stretch; }
  .team-stage-wrap { grid-column: 1 / span 8; }
  .team-picker { grid-column: 9 / -1; }
  .profile-body { padding: 36px 36px 36px 40px; }
  .team-list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ---------- Quote: one framed desk; the guidance column stays in view beside the form ---------- */
#quote { border-top: 1px solid var(--c-line); }
.quote {
  column-gap: 0; align-items: stretch; background: var(--c-white);
  border: 1px solid var(--c-line); border-top: 3px solid var(--c-gold); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.quote-info { position: relative; padding: 28px 20px; background: linear-gradient(180deg, #F4EDE0, var(--c-sand)); border-bottom: 1px solid var(--c-line); }
.steps { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 2px; }
.steps li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 10px 0; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 58px; bottom: -8px; width: 1px; background: var(--c-line-strong); }
.step-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-white); border: 1px solid var(--c-line-strong); color: var(--c-red); box-shadow: var(--shadow-sm); transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); }
.steps li.is-current .step-icon { background: var(--c-red); border-color: var(--c-red); color: #fff; box-shadow: 0 0 0 5px rgba(180, 18, 18, 0.1); }
.steps li.is-done .step-icon { background: var(--c-charcoal); border-color: var(--c-charcoal); color: var(--c-tan); }
.step-now { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--c-white); border: 1px solid var(--c-line); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--c-red-dark); vertical-align: 1px; }
.step-icon svg.ph { width: 22px; height: 22px; }
.step-n { font: 600 0.75rem/1.3 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-text); }
.steps h3 { margin-top: 2px; font-size: 1.0625rem; line-height: 1.4; }
.steps p:not(.step-n) { font-size: 1rem; line-height: 1.5; color: var(--c-stone); }

/* Call card: the office photograph beside the numbers */
.call-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); margin-top: 22px; overflow: hidden; border-radius: var(--radius); background: var(--c-charcoal); color: var(--c-cream-dim); box-shadow: var(--shadow-md); }
.call-card-photo { position: relative; min-height: 100%; background: #2A241E; }
.call-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 45%; filter: saturate(0.85); transition: transform 0.6s var(--ease); }
.call-card-photo::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: var(--c-gold); }
.call-card-body { padding: 16px 18px 12px; }
.call-card-kicker { font-size: var(--fs-small); }
.call-card-num { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; white-space: nowrap; font: 600 clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem)/1 var(--font-display); font-variant-numeric: lining-nums; color: var(--c-tan); text-decoration: none; transition: color var(--t) var(--ease); }
.call-card-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--c-line-dark); color: var(--c-tan); transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); }
.call-card-icon svg.ph { width: 16px; height: 16px; }
.call-card-num:hover { color: #fff; }
.call-card-num:hover .call-card-icon { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.call-card:hover .call-card-photo img { transform: scale(1.04); }
.call-card-alt { display: flex; align-items: center; gap: 6px; margin-top: -4px; font-size: var(--fs-small); }
.call-card .link { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-cream); }
.call-card .link:hover { color: var(--c-tan); }
.call-card :focus-visible { outline-color: var(--c-tan); }
@media (min-width: 640px) {
  .quote-info { padding: 40px; }
  .call-card { grid-template-columns: 140px minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .quote-info { grid-column: 1 / span 5; padding: 44px 40px; border-bottom: 0; border-right: 1px solid var(--c-line); border-radius: var(--radius) 0 0 var(--radius); }
  .form-surface { grid-column: 6 / -1; }
  /* Set by site.js only when the whole column fits under the compact header */
  #quote.can-stick .quote-body { position: sticky; top: calc(66px + 24px); }
  .quote-info .steps { margin-top: 20px; }
  .quote-info .steps li { padding: 8px 0; }
  .quote-info .call-card { margin-top: 18px; }
}

/* ==========================================================================
   7. Footer
   ========================================================================== */
.site-footer {
  position: relative; padding-top: 56px; color: var(--c-cream-dim);
  background: radial-gradient(900px 320px at 100% 0, rgba(216, 192, 138, 0.07), transparent 70%), var(--c-charcoal);
  border-top: 3px solid var(--c-gold);
}
.footer-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  padding: 24px; border-radius: var(--radius); background: var(--c-charcoal-2); border: 1px solid var(--c-line-dark);
}
.footer-kicker { font: 600 0.75rem/1.3 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold); }
.footer-statement { margin-top: 6px; font: 600 clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem)/1.25 var(--font-display); color: var(--c-tan); max-width: 32ch; }
.footer-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-grid { row-gap: 36px; padding-block: 48px 40px; grid-template-areas: "brand" "contact" "map" "nav"; }
.footer-brand { grid-area: brand; }
.footer-contact { grid-area: contact; }
.footer-location { grid-area: map; display: flex; flex-direction: column; }
.footer-heading--spaced { margin-top: 28px; }
.footer-nav { grid-area: nav; }

/* The genuine logo artwork on a warm-white plate, so its own background reads as intended */
.footer-logo {
  display: inline-flex; padding: 12px 16px; border-radius: var(--radius); background: var(--c-warm);
  box-shadow: 0 0 0 1px rgba(216, 192, 138, 0.4), 0 20px 40px -26px rgba(0, 0, 0, 0.9);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.footer-logo img { width: 190px; height: auto; mix-blend-mode: multiply; }
.footer-logo:hover { box-shadow: 0 0 0 1px var(--c-tan), 0 24px 44px -26px rgba(0, 0, 0, 0.95); transform: translateY(-2px); }
.footer-about { margin-top: 20px; max-width: 38ch; font-size: 1rem; line-height: 1.6; color: var(--c-cream-dim); }

.footer-heading { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--c-line-dark); font: 600 0.75rem/1.4 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold); }
.footer-nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 22px; }
.footer-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; color: var(--c-cream); text-decoration: none; transition: color var(--t) var(--ease); }
.footer-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: var(--c-tan); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.footer-nav a:hover { color: var(--c-tan); }
.footer-nav a:hover::after { transform: scaleX(1); }

.footer-list { list-style: none; padding: 0; font-size: 1rem; }
.footer-list li { display: grid; grid-template-columns: 20px 4.25rem minmax(0, 1fr); column-gap: 12px; align-items: center; }
.footer-list-email { row-gap: 0; margin-top: 4px; }
.footer-list-email a { grid-column: 2 / -1; }
.footer-ico { display: grid; place-items: center; color: var(--c-gold); }
.footer-ico svg.ph { width: 18px; height: 18px; }
.footer-key { font-size: 0.875rem; color: var(--c-cream-dim); }
.footer-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-cream); overflow-wrap: anywhere; }
.footer-list-email a { min-height: 44px; align-items: flex-start; padding-top: 2px; }

.footer-social { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.social-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 13px; border-radius: 999px;
  border: 1px solid rgba(216, 192, 138, 0.32); color: var(--c-cream); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.social-link svg.si { width: 18px; height: 18px; color: var(--c-tan); transition: color var(--t) var(--ease), transform var(--t) var(--ease); }
.social-link:hover { border-color: var(--c-tan); background: rgba(216, 192, 138, 0.1); color: #fff; }
.social-link:hover svg.si { color: #fff; transform: scale(1.06); }

.footer-address { font-style: normal; font-size: 1rem; line-height: 1.7; }
.footer-address a { color: var(--c-cream); text-decoration: none; transition: color var(--t) var(--ease); }
.footer-address a:hover { color: var(--c-tan); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.map-wrap {
  position: relative; flex: 1; min-height: 220px; margin-top: 18px; background: #fff;
  border-radius: var(--radius); overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  box-shadow: 0 0 0 1px rgba(216, 192, 138, 0.35), 0 20px 40px -28px rgba(0, 0, 0, 0.9);
}
.map-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; margin-top: 6px; font-size: 0.9375rem; font-weight: 500; color: var(--c-cream); text-decoration: none; transition: color var(--t) var(--ease); }
.map-link svg.ph { width: 18px; height: 18px; color: var(--c-gold); transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.map-link svg.ph:last-of-type { width: 15px; height: 15px; }
.map-link:hover { color: var(--c-tan); }
.map-link:hover svg.ph:last-of-type { transform: translate(2px, -2px); color: var(--c-tan); }

.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-block: 22px 28px; border-top: 1px solid var(--c-line-dark); }
.footer-legal { font-size: 0.8125rem; line-height: 1.6; max-width: 110ch; }
.footer-legal a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--t) var(--ease); }
.footer-legal a:hover { color: var(--c-tan); }
.footer-top { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--fs-small); font-weight: 500; color: var(--c-cream); text-decoration: none; transition: color var(--t) var(--ease); }
.footer-top-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(216, 192, 138, 0.32); transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
.footer-top-icon svg.ph { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.footer-top:hover { color: var(--c-tan); }
.footer-top:hover .footer-top-icon { border-color: var(--c-tan); background: rgba(216, 192, 138, 0.1); }
.footer-top:hover .footer-top-icon svg.ph { transform: translateY(-2px); }

@media (min-width: 768px) {
  .footer-cta { padding: 28px 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "brand contact" "nav contact" "map map"; }
  .map-wrap { min-height: 280px; }
}
@media (min-width: 1024px) {
  .site-footer { padding-top: 64px; }
  /* Three balanced columns: brand and navigation, contact and address, then the map at full height */
  .footer-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: 56px 44px; align-items: stretch;
    grid-template-areas:
      "brand brand brand brand contact contact contact contact map map map map"
      "nav nav nav nav contact contact contact contact map map map map";
  }
  .footer-brand { padding-right: 24px; }
  .footer-nav { align-self: end; padding-right: 24px; }
  .footer-contact { padding-right: 12px; }
  .footer-location .map-wrap { margin-top: 0; }
  .footer-logo img { width: 220px; }
}

/* ---------- 8. Mobile action bar ---------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px;
  padding: 10px var(--frame) calc(10px + env(safe-area-inset-bottom));
  background: var(--c-charcoal); border-top: 1px solid var(--c-line-dark); box-shadow: 0 -12px 24px -18px rgba(0, 0, 0, 0.5);
  transform: translateY(110%); transition: transform 0.3s var(--ease);
}
.action-bar.is-visible { transform: none; }
.action-bar .btn { min-height: 48px; padding: 0 12px; }
@media (min-width: 1024px) { .action-bar { display: none; } }
@media (max-width: 1023px) { .site-footer { padding-bottom: 72px; } }

/* ---------- 9. Lightbox ---------- */
.lightbox {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 72px 16px 72px; border: 0;
  background: transparent; color: var(--c-cream); overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; animation: lb-in 0.22s var(--ease); }
.lightbox::backdrop { background: rgba(20, 17, 14, 0.92); }
.lightbox-figure { display: grid; justify-items: center; gap: 14px; max-width: 100%; }
.lightbox-stage { position: relative; display: grid; place-items: center; min-width: min(280px, 100%); min-height: 180px; }
.lightbox-img {
  max-width: min(1200px, 100%); max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); width: auto; height: auto;
  border-radius: var(--radius); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); background: #2a241e;
  touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-drag: none; transition: opacity 0.25s var(--ease);
}
.lightbox.is-loading .lightbox-img { opacity: 0.2; }
/* Stepping through photographs: a short slide in the direction of travel */
.lightbox.is-stepping .lightbox-img { animation: lb-step 0.35s var(--ease); }
@keyframes lb-step { from { transform: translateX(calc(var(--dir, 0) * 18px)); } to { transform: none; } }
.lightbox.is-error .lightbox-img { visibility: hidden; }
.lightbox-spinner { position: absolute; width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(243, 235, 220, 0.22); border-top-color: var(--c-tan); opacity: 0; animation: qf-spin 0.8s linear infinite; transition: opacity 0.2s var(--ease); pointer-events: none; }
.lightbox.is-loading .lightbox-spinner { opacity: 1; }
.lightbox-error { position: absolute; padding: 12px 16px; border-radius: var(--radius); background: var(--c-charcoal-2); border: 1px solid var(--c-line-dark); font-size: 0.9375rem; color: var(--c-cream); text-align: center; }
.lightbox-caption { font-size: 1rem; color: var(--c-cream); text-align: center; }
.lightbox-count { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: rgba(243, 235, 220, 0.08); font-size: var(--fs-small); color: var(--c-cream-dim); font-variant-numeric: tabular-nums; }
.lightbox-btn {
  position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(243, 235, 220, 0.28); background: rgba(37, 32, 27, 0.72); color: var(--c-cream);
  backdrop-filter: blur(6px);
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.lightbox-btn svg.ph { width: 22px; height: 22px; transition: transform var(--t) var(--ease); }
.lightbox-btn:hover { background: var(--c-cream); border-color: var(--c-cream); color: var(--c-charcoal); }
.lightbox-btn:active { transform: scale(0.94); }
.lightbox-prev:hover svg.ph { transform: translateX(-2px); }
.lightbox-next:hover svg.ph { transform: translateX(2px); }
.lightbox-close { top: 14px; right: 14px; }
.lightbox-prev { left: 16px; top: 50%; margin-top: -26px; }
.lightbox-next { right: 16px; top: 50%; margin-top: -26px; }
@media (min-width: 1024px) { .lightbox-prev { left: 28px; } .lightbox-next { right: 28px; } .lightbox-close { top: 20px; right: 28px; } }
@media (max-width: 639px) {
  .lightbox { padding-inline: 8px; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 12px; margin-top: 0; }
  .lightbox-count { bottom: 26px; }
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   10. Quote form — rendered from the Wix Forms schema by quote-form.js
   ========================================================================== */
.form-surface { position: relative; min-width: 0; padding: 24px 20px 28px; background: var(--c-white); border-radius: 0 0 var(--radius) var(--radius); }
@media (min-width: 640px) { .form-surface { padding: 36px 40px 40px; } }
@media (min-width: 1024px) { .form-surface { padding: 44px 48px 48px; border-radius: 0 var(--radius) var(--radius) 0; } }
/* Required-answer progress, kept in step with the fields by site.js */
.qf-progress { flex-basis: 100%; display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.qf-progress[hidden] { display: none; }
.qf-progress-bar { position: relative; flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--c-line); }
.qf-progress-bar span { position: absolute; inset: 0; background: var(--c-charcoal); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform 0.45s var(--ease), background-color var(--t) var(--ease); }
.qf-progress.is-done .qf-progress-bar span { background: var(--c-gold-text); }
.qf-progress-text { flex: none; font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: var(--c-stone); }
.qf-progress.is-done .qf-progress-text { font-weight: 600; color: var(--c-ink); }
.form-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--c-line); }
.form-title { font-size: 1.375rem; }
.form-note { font-size: var(--fs-small); color: var(--c-stone); }

.qf-group { padding: 20px; border-radius: var(--radius); background: #FBF8F2; border: 1px solid var(--c-line); }
.qf-group + .qf-group { margin-top: 16px; }
.qf-group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.qf-group-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-charcoal); color: var(--c-tan); font: 600 0.75rem/1 var(--font-display); }
.qf-group { transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
.qf-group:focus-within { border-color: var(--c-line-strong); background: #FAF6EE; }
.qf-group-num { transition: background-color var(--t) var(--ease); }
/* A finished group swaps its number for a tick */
.qf-group-num { position: relative; }
.qf-group.is-complete .qf-group-num { color: transparent; }
.qf-group.is-complete .qf-group-num::after { content: ""; position: absolute; inset: 0; margin: auto; width: 11px; height: 11px; background: var(--c-tan); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / contain no-repeat; animation: qf-in 0.25s var(--ease); }
.qf-field:focus-within > .qf-label { color: var(--c-red-dark); }
.qf-label { transition: color var(--t-fast) var(--ease); }
.qf-actions .btn::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--t) var(--ease); }
.qf-actions .btn:hover::after { transform: translateX(3px); }
.qf-actions .btn[disabled]::after { display: none; }
.qf-group-title { font: 600 var(--fs-label)/1.3 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold-text); }
@media (max-width: 639px) { .qf-group { padding: 16px 14px; } }
.qf-grid { display: grid; gap: 20px 16px; }
@media (min-width: 640px) { .qf-grid { grid-template-columns: 1fr 1fr; } .qf-field--wide { grid-column: 1 / -1; } }
.qf-field { min-width: 0; }
.qf-label, .qf-legend { display: block; margin-bottom: 7px; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--c-ink); }
.qf-req { color: var(--c-red); margin-left: 3px; }
.qf-req-text { margin-left: 6px; font-size: 0.8125rem; font-weight: 400; color: var(--c-stone); }
.qf-input, .qf-select, .qf-textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--c-white); border: 1px solid var(--c-field-line); font-size: 1rem; line-height: 1.4; color: var(--c-ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.qf-textarea { min-height: 120px; resize: vertical; }
.qf-select { padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231A1410'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.qf-input:hover, .qf-select:hover, .qf-textarea:hover { border-color: var(--c-ink); }
.qf-input:focus, .qf-select:focus, .qf-textarea:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-ink), 0 0 0 4px rgba(180, 150, 102, 0.3); }
.qf-input::placeholder, .qf-textarea::placeholder { color: #7B6E5D; }
.qf-input[aria-invalid="true"], .qf-select[aria-invalid="true"], .qf-textarea[aria-invalid="true"] { border-color: var(--c-red); box-shadow: 0 0 0 1px var(--c-red); background: #FFFBFA; }
.qf-help { margin-top: 6px; font-size: var(--fs-small); color: var(--c-stone); }
.qf-error { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--c-red); animation: qf-in 0.2s var(--ease); }
.qf-error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--c-red); color: #fff; font-size: 11px; line-height: 1; }
.qf-error:empty { display: none; }
@keyframes qf-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.qf-fieldset { border: 0; padding: 0; min-width: 0; }
.qf-choices { display: grid; gap: 8px; }
@media (min-width: 640px) { .qf-choices--cols { grid-template-columns: 1fr 1fr; } }
.qf-choice {
  display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--c-white); border: 1px solid var(--c-line-strong); cursor: pointer; line-height: 1.35;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.qf-choice:hover { border-color: var(--c-ink); }
/* Native inputs, restyled: still real checkboxes and radios for keyboard and screen readers */
.qf-choice input {
  -webkit-appearance: none; appearance: none; flex: none; display: grid; place-items: center;
  width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--c-field-line); border-radius: 3px; background: var(--c-white); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.qf-choice input[type="radio"] { border-radius: 50%; }
.qf-choice input::after { content: ""; opacity: 0; transform: scale(0.6); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.qf-choice input[type="checkbox"]::after { width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23FDFBF7'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.qf-choice input[type="radio"]::after { width: 8px; height: 8px; border-radius: 50%; background: var(--c-warm); }
.qf-choice input:checked { background: var(--c-ink); border-color: var(--c-ink); }
.qf-choice input:checked::after { opacity: 1; transform: none; }
.qf-choice input:focus-visible { outline: none; }
.qf-choice:has(input:checked) { border-color: var(--c-ink); background: #FFFDF8; box-shadow: inset 3px 0 0 var(--c-red); }
.qf-choice:has(input:focus-visible) { box-shadow: 0 0 0 1px var(--c-ink), 0 0 0 4px rgba(180, 150, 102, 0.35); }
.qf-fieldset[aria-invalid="true"] .qf-choice { border-color: var(--c-red); }
.qf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.qf-actions .btn { min-width: min(100%, 240px); min-height: 52px; font-size: 1rem; }
.qf-actions .btn[disabled]::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: qf-spin 0.8s linear infinite; }
@keyframes qf-spin { to { transform: rotate(360deg); } }
.qf-actions-note { font-size: var(--fs-small); color: var(--c-stone); max-width: 34ch; }
@media (max-width: 639px) { .qf-actions .btn { width: 100%; } }
.qf-form-error { margin-top: 20px; padding: 12px 14px; border-left: 3px solid var(--c-red); border-radius: 0 var(--radius) var(--radius) 0; background: #F8E6E2; color: #6E1210; font-weight: 600; }
.qf-form-error:empty { display: none; }
.qf-disabled-note { padding: 14px; border: 1px dashed var(--c-field-line); border-radius: var(--radius); color: var(--c-stone); font-size: var(--fs-small); }
.qf-skeleton { display: grid; gap: 16px; }
.qf-skeleton span { display: block; height: 50px; border-radius: var(--radius); background: linear-gradient(90deg, #F1EBDF 0%, #F9F5EE 50%, #F1EBDF 100%); background-size: 200% 100%; animation: qf-shimmer 1.4s linear infinite; }
.qf-skeleton span:nth-child(odd) { width: 40%; height: 14px; }
@keyframes qf-shimmer { to { background-position: -200% 0; } }
.qf-success { padding: 8px 0; animation: qf-in 0.3s var(--ease); }
.qf-success:focus { outline: none; }
.qf-success-mark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: var(--c-charcoal); color: var(--c-tan); box-shadow: 0 0 0 6px var(--c-sand); }
.qf-success-mark svg { width: 24px; height: 24px; }
.qf-success h3 { font-size: 1.625rem; margin-bottom: 10px; }
.qf-success p { color: var(--c-stone); max-width: 52ch; }
.qf-success p + p { margin-top: 8px; }
.qf-success-next { display: grid; gap: 4px; margin-top: 20px; padding: 16px 18px; border-radius: var(--radius); background: var(--c-ivory); border: 1px solid var(--c-line); }
.qf-success-next strong { font: 600 var(--fs-label)/1.4 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold-text); }
.qf-success .btn { margin-top: 22px; }
.qf-success-mark svg { fill: currentColor; }
/* A service chosen from a card elsewhere on the page is briefly highlighted when it is ticked */
.qf-flash { animation: qf-flash 1.6s var(--ease); }
@keyframes qf-flash { 0%, 40% { box-shadow: 0 0 0 1px var(--c-ink), 0 0 0 5px rgba(180, 150, 102, 0.45); } 100% { box-shadow: 0 0 0 1px transparent, 0 0 0 5px transparent; } }
.qf-form-error a { color: inherit; }
.qf[aria-busy="true"] .qf-group { opacity: 0.7; transition: opacity var(--t) var(--ease); }
.qf-noscript { color: var(--c-stone); }

/* ==========================================================================
   12. Interior pages — one hero system, shared section patterns
   ========================================================================== */
/* Breadcrumbs */
.crumbs { margin-bottom: 18px; }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-small); color: var(--c-stone); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: ""; width: 5px; height: 5px; border-top: 1.5px solid var(--c-line-strong); border-right: 1.5px solid var(--c-line-strong); transform: rotate(45deg); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--c-line-strong); transition: color var(--t) var(--ease); }
.crumbs a:hover { color: var(--c-red); }
.crumbs [aria-current] { color: var(--c-stone); }
.section--dark .crumbs, .page-hero--dark .crumbs ol { color: var(--c-cream-dim); }

/* Interior hero: compact, one photograph framed inside the content edge */
.page-hero { position: relative; padding-block: 24px 48px; background: var(--c-warm); border-bottom: 1px solid var(--c-line); overflow-x: clip; }
.page-hero-grid { row-gap: 28px; align-items: center; }
.page-title { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.06; letter-spacing: -0.022em; max-width: 18ch; }
.page-hero .lede { margin-top: 18px; max-width: 46ch; }
.page-hero .actions { margin-top: 26px; }
.page-hero-media { position: relative; }
.page-hero-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: #CFC6B4; box-shadow: var(--shadow-lg); }
.page-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-photo::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, var(--c-gold), rgba(180, 150, 102, 0)); }
.page-hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(26, 20, 16, 0.22), transparent 35%); }
.page-hero-tag {
  position: absolute; z-index: 2; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px);
  padding: 10px 14px 10px 12px; border-radius: var(--radius); background: rgba(28, 24, 20, 0.88); color: var(--c-cream); font-size: 0.875rem; line-height: 1.35;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.page-hero-tag svg.ph { width: 20px; height: 20px; color: var(--c-tan); flex: none; }
.page-hero-tag strong { font-family: var(--font-display); font-weight: 600; color: var(--c-tan); }
/* Plain hero (legal, news, not found): no photograph, a fine ruled surface */
.page-hero--plain { padding-bottom: 40px; background: linear-gradient(180deg, var(--c-warm), var(--c-ivory)); }
.page-hero--plain .page-title { max-width: 22ch; }
@media (min-width: 1024px) {
  .page-hero { padding-block: 32px 64px; }
  .page-hero-copy { grid-column: 1 / span 6; padding-right: 24px; }
  .page-hero-media { grid-column: 7 / -1; }
  .page-hero-photo { aspect-ratio: auto; height: clamp(360px, 46vh, 460px); }
  .page-hero--plain .page-hero-copy { grid-column: 1 / span 8; }
}

/* Then-and-now pairing (About) */
.pair { position: relative; padding: 0 0 56px 0; }
.pair-then { position: relative; width: 88%; margin: 0; padding: 10px 10px 0; background: #EFE6D5; border-radius: 2px; box-shadow: 0 0 0 1px var(--c-line), var(--shadow-lg); }
.pair-then img { width: 100%; aspect-ratio: 817 / 459; object-fit: cover; filter: sepia(0.12); }
.pair-now { position: absolute; right: 0; bottom: 0; width: 46%; margin: 0; padding: 6px; background: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.pair-now img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.pair figcaption { padding: 8px 4px 10px; font-size: 0.875rem; color: var(--c-stone); }
.pair-now figcaption { padding: 6px 2px 2px; }
.pair figcaption strong { display: block; font: 600 var(--fs-label)/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-text); }
.pair .seal { left: -14px; right: auto; top: -26px; }

/* Section heading used inside interior pages */
.split-head { margin-bottom: var(--head-gap); row-gap: 14px; }
/* Two children: heading left, supporting text right. One child: the heading keeps the left columns */
@media (min-width: 1024px) {
  .split-head > :first-child { grid-column: 1 / span 7; }
  .split-head > :first-child:not(:only-child) { grid-column: 1 / span 6; }
  .split-head > :last-child:not(:only-child) { grid-column: 8 / -1; align-self: end; }
}

/* Editorial statement */
.statement { font: 600 clamp(1.375rem, 1.1rem + 1vw, 2rem)/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--c-ink); max-width: 30ch; }
.statement::before { content: ""; display: block; width: 48px; height: 2px; margin-bottom: 18px; background: var(--c-gold); }
.section--dark .statement { color: var(--c-tan); }

/* Prose blocks */
.prose > * + * { margin-top: 16px; }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.7; color: var(--c-stone); max-width: 64ch; }
.prose h2 { margin-top: 40px; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); }
.prose h3 { margin-top: 28px; font-size: 1.1875rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 6px; }
.prose strong { color: var(--c-ink); }
.prose a { overflow-wrap: anywhere; color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--c-gold); }
.prose a:hover { color: var(--c-red); }
.section--dark .prose p, .section--dark .prose li { color: var(--c-cream-dim); }

/* Journey: chapters on a rail, each with a year marker and an optional photograph */
.journey { list-style: none; padding: 0; position: relative; display: grid; gap: 44px; }
.chapter { position: relative; display: grid; gap: 20px; padding-left: 44px; }
.chapter::before { content: ""; position: absolute; left: 8px; top: 30px; bottom: -44px; width: 1px; background: var(--c-line-dark); }
.chapter:last-child::before { display: none; }
.chapter::after { content: ""; position: absolute; left: 1px; top: 8px; width: 15px; height: 15px; border-radius: 50%; background: var(--c-charcoal); border: 2px solid var(--c-gold); }
.chapter:last-child::after { background: var(--c-tan); border-color: var(--c-tan); box-shadow: 0 0 0 6px rgba(216, 192, 138, 0.15); }
.chapter-mark { font: 600 clamp(1.5rem, 1.2rem + 1vw, 2.25rem)/1.1 var(--font-display); color: var(--c-tan); font-variant-numeric: lining-nums; }
.chapter-mark small { display: block; margin-top: 6px; font: 600 var(--fs-label)/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold); }
.chapter h3 { font-size: var(--fs-h3); color: var(--c-cream); }
.chapter-body p { margin-top: 8px; font-size: 1.0625rem; line-height: 1.65; color: var(--c-cream-dim); max-width: 58ch; }
.chapter-photo { margin: 0; }
.chapter-photo .photo { aspect-ratio: 3 / 2; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.9); outline: 1px solid var(--c-line-dark); outline-offset: 5px; }
.chapter-photo figcaption { margin-top: 12px; font-size: 0.875rem; color: var(--c-cream-dim); }
@media (min-width: 1024px) {
  .chapter { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: 0 var(--gap); padding-left: 56px; align-items: start; }
  .chapter-mark { padding-right: 12px; }
  .chapter-body { grid-column: 2; }
  .chapter-photo { grid-column: 3; }
}

/* Information plate: charcoal panel of verified facts */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-radius: var(--radius); background: var(--c-charcoal); border-top: 2px solid var(--c-gold); box-shadow: var(--shadow-lg); }
.fact { padding: 20px 20px 22px; border-right: 1px solid var(--c-line-dark); border-bottom: 1px solid var(--c-line-dark); color: var(--c-cream-dim); }
.fact svg.ph { width: 22px; height: 22px; color: var(--c-gold); }
.fact strong { display: block; margin-top: 10px; font: 600 clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem)/1.15 var(--font-display); color: var(--c-tan); font-variant-numeric: lining-nums; }
.fact span { display: block; margin-top: 4px; font-size: 0.9375rem; line-height: 1.45; }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fact { border-bottom: 0; } .fact:last-child { border-right: 0; } }

/* Link tiles (About: the business today) */
.tiles { list-style: none; padding: 0; display: grid; gap: 16px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px 24px 22px; border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.tile::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 3px; background: var(--c-red); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.tile-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-ivory); border: 1px solid var(--c-line); color: var(--c-gold-text); transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.tile-icon svg.ph { width: 24px; height: 24px; }
.tile h3 { font-size: 1.25rem; }
.tile p { font-size: 1rem; line-height: 1.55; color: var(--c-stone); }
.tile a { text-decoration: none; color: inherit; }
.tile a::after { content: ""; position: absolute; inset: 0; }
.tile-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--c-ink); }
.tile-more svg.ph { width: 16px; height: 16px; color: var(--c-red); transition: transform var(--t) var(--ease); }
.tile:hover, .tile:focus-within { border-color: var(--c-line-strong); box-shadow: var(--shadow-md); }
.tile:hover::before, .tile:focus-within::before { transform: scaleX(1); }
.tile:hover .tile-icon, .tile:focus-within .tile-icon { background: var(--c-charcoal); color: var(--c-tan); }
.tile:hover .tile-more svg.ph, .tile:focus-within .tile-more svg.ph { transform: translateX(4px); }
.tile:has(a:focus-visible) { outline: 2px solid var(--c-ink); outline-offset: 3px; }
* + .tiles { margin-top: 40px; }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } }

/* Feature row: photograph and copy, alternating */
.feature { row-gap: 28px; align-items: center; }
.feature + .feature { margin-top: 72px; }
.feature-media .photo { aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); }
.feature-media--tall .photo { aspect-ratio: 3 / 4; max-height: 680px; }
@media (min-width: 1024px) { .feature-media--tall { padding-inline: 6%; } }
.feature-media figcaption { margin-top: 12px; font-size: 0.875rem; color: var(--c-stone); }
.feature-copy .h2, .feature-copy h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.feature-copy > p:not(.label):not(.ticks-title) { margin-top: 14px; font-size: 1.0625rem; line-height: 1.65; color: var(--c-stone); max-width: 56ch; }
.ticks { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 20px; }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 1rem; line-height: 1.5; color: var(--c-ink); }
.ticks svg.ph { width: 20px; height: 20px; margin-top: 1px; color: var(--c-gold-text); }
.section--dark .ticks li { color: var(--c-cream); }
.section--dark .ticks svg.ph { color: var(--c-gold); }
@media (min-width: 1024px) {
  .feature-media { grid-column: 1 / span 6; }
  .feature-copy { grid-column: 8 / -1; }
  .feature--flip .feature-media { grid-column: 7 / -1; grid-row: 1; }
  .feature--flip .feature-copy { grid-column: 1 / span 5; grid-row: 1; }
}

.ticks-title { margin-top: 28px; font: 600 var(--fs-label)/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-text); }
.ticks-title + .ticks { margin-top: 12px; }
.feature--qa { align-items: start; }
@media (min-width: 1024px) {
  .feature--qa .feature-copy--aside { grid-column: 1 / span 5; position: sticky; top: calc(66px + 84px); }
  .feature--qa .faq { grid-column: 7 / -1; }
}

.tile .ticks { margin-top: 6px; }
.tiles--two .tile h3 { font-size: 1.375rem; }
@media (min-width: 768px) { .tiles.tiles--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .feature--compare .compare-wrap { grid-column: 1 / span 8; }
  .feature--compare .feature-media { grid-column: 9 / -1; }
  .feature .feature-copy--first { grid-column: 1 / span 5; grid-row: 1; }
  .feature .feature-copy--first ~ .testimonial { grid-column: 7 / -1; }
}

/* Team page: portrait strip in the hero, office and store pair */
.team-strip { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; }
.team-strip li { position: relative; overflow: hidden; border-radius: var(--radius); background: #CFC6B4; box-shadow: var(--shadow-md); }
.team-strip li:nth-child(odd) { transform: translateY(-14px); }
.team-strip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.team-strip span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; font: 600 0.875rem/1.2 var(--font-display); color: #fff; background: linear-gradient(to top, rgba(26, 20, 16, 0.75), transparent); }
.team-strip li:first-child { border-top: 3px solid var(--c-gold); }
.duo { row-gap: 24px; }
.duo-item .photo { aspect-ratio: 4 / 3; box-shadow: var(--shadow-md); }
.duo-item figcaption { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-line-strong); font-size: 0.9375rem; color: var(--c-stone); }
@media (min-width: 768px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .team-strip { gap: 14px; padding-top: 14px; } }

/* Small aside panel (tips, notes) */
.note { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; margin-top: 24px; padding: 18px 20px; border-radius: var(--radius); background: var(--c-ivory); border: 1px solid var(--c-line); border-left: 3px solid var(--c-gold); }
.note svg.ph { width: 22px; height: 22px; color: var(--c-gold-text); }
.note-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-white); border: 1px solid var(--c-line); }
.note p { font-size: 1rem; line-height: 1.55; color: var(--c-stone); }
.note strong { font-family: var(--font-display); color: var(--c-ink); }

/* In-page section navigation (chips) */
.page-nav { position: relative; z-index: 20; background: var(--c-warm); border-bottom: 1px solid var(--c-line); }
.page-nav ul { list-style: none; padding: 10px 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.page-nav ul::-webkit-scrollbar { display: none; }
.page-nav a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; white-space: nowrap; border-radius: 999px;
  border: 1px solid var(--c-line-strong); background: var(--c-white); font-size: 0.9375rem; font-weight: 500; color: var(--c-ink); text-decoration: none;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.page-nav a svg.ph { width: 18px; height: 18px; color: var(--c-gold-text); transition: color var(--t) var(--ease); }
.page-nav a:hover { border-color: var(--c-ink); }
.page-nav a.is-active { background: var(--c-charcoal); border-color: var(--c-charcoal); color: var(--c-cream); }
.page-nav a.is-active svg.ph { color: var(--c-tan); }
@media (min-width: 1024px) {
  .page-nav { position: sticky; top: 66px; }
  .page-nav ul { flex-wrap: wrap; overflow: visible; }
  [data-page-nav] ~ * [id], .has-page-nav [id] { scroll-margin-top: calc(66px + 84px); }
}

/* Coverage: three tiers */
.reach { list-style: none; padding: 0; display: grid; gap: 16px; }
.reach-item { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--c-charcoal); color: var(--c-cream-dim); box-shadow: var(--shadow-md); }
.reach-item .photo { aspect-ratio: 16 / 10; border-radius: 0; }
.reach-item .photo img { transition: transform var(--t-img) var(--ease); }
.reach-body { padding: 18px 20px 22px; }
.reach-kicker { font: 600 var(--fs-label)/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold); }
.reach-item h3 { margin-top: 6px; font-size: 1.25rem; color: var(--c-tan); }
.reach-item p { margin-top: 8px; font-size: 1rem; line-height: 1.55; }
@media (hover: hover) { .reach-item:hover .photo img { transform: scale(1.03); } }
@media (min-width: 768px) { .reach { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } }

/* Process: numbered steps in a row */
.process { list-style: none; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.process li { position: relative; padding: 22px 22px 22px 22px; border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line); counter-increment: step; }
.process li::before { content: counter(step, decimal-leading-zero); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 50%; background: var(--c-charcoal); color: var(--c-tan); font: 600 0.875rem/1 var(--font-display); }
.process h3 { font-size: 1.125rem; }
.process p { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--c-stone); }
@media (min-width: 768px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .process { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
  .process li:not(:last-child)::after { content: ""; position: absolute; top: 42px; right: calc(-1 * var(--gap)); width: var(--gap); height: 1px; background: var(--c-line-strong); }
}

/* Comparison table (Storage) */
.compare-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--c-line); background: var(--c-white); box-shadow: var(--shadow-md); }
.compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 1rem; }
.compare caption { padding: 16px 20px 0; text-align: left; font-size: var(--fs-small); color: var(--c-stone); caption-side: bottom; padding-bottom: 16px; }
.compare th, .compare td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); line-height: 1.5; }
.compare thead th { background: var(--c-charcoal); color: var(--c-cream); font: 600 1.0625rem/1.3 var(--font-display); border-bottom: 2px solid var(--c-gold); }
.compare thead th:first-child { color: var(--c-gold); font: 600 var(--fs-label)/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; }
.compare thead th svg.ph { display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; color: var(--c-tan); }
.compare tbody th { width: 26%; font: 600 var(--fs-label)/1.5 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-gold-text); background: #FBF8F2; }
.compare td { color: var(--c-stone); }
.compare td strong { color: var(--c-ink); font-weight: 600; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr { transition: background-color var(--t) var(--ease); }
.compare tbody tr:hover td { background: #FFFDF8; }

@media (max-width: 639px) {
  .compare { min-width: 0; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tbody tr { display: block; border-bottom: 1px solid var(--c-line-strong); }
  .compare tbody th { display: block; width: auto; padding: 12px 16px 8px; border-bottom: 0; }
  .compare td { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 8px 16px; border-bottom: 0; }
  .compare td::before { content: attr(data-label); font-size: 0.875rem; font-weight: 600; color: var(--c-ink); }
  .compare tbody tr td:last-child { padding-bottom: 14px; }
}
.contact-card-text span { overflow-wrap: break-word; }
@media (max-width: 479px) { .contact-cards-wide .contact-card-text span { font-size: 1rem; } }

/* Questions: native disclosure */
.faq { display: grid; gap: 10px; }
.faq details { border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.faq details[open] { border-color: var(--c-line-strong); box-shadow: var(--shadow-sm); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 20px; cursor: pointer; list-style: none; font: 600 1.0625rem/1.4 var(--font-display); color: var(--c-ink); transition: color var(--t) var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--c-red-dark); }
.faq-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--c-line-strong); color: var(--c-gold-text); transition: transform var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease); }
.faq-icon svg.ph { width: 16px; height: 16px; }
.faq details[open] .faq-icon { transform: rotate(180deg); background: var(--c-charcoal); border-color: var(--c-charcoal); color: var(--c-tan); }
.faq-answer { padding: 0 20px 18px; }
.faq-answer p { font-size: 1rem; line-height: 1.6; color: var(--c-stone); max-width: 64ch; }
.faq-answer p + p { margin-top: 10px; }
.faq details[open] .faq-answer { animation: qf-in 0.25s var(--ease); }

/* Quote from a customer (verbatim) */
.testimonial { position: relative; margin: 0; padding: 28px 28px 24px; border-radius: var(--radius); background: var(--c-charcoal); color: var(--c-cream); box-shadow: var(--shadow-lg); }
.testimonial svg.ph { width: 32px; height: 32px; color: var(--c-gold); }
.testimonial blockquote { margin: 12px 0 0; font: 500 clamp(1.125rem, 1rem + 0.5vw, 1.375rem)/1.5 var(--font-display); color: var(--c-cream); }
.testimonial figcaption { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-line-dark); font-size: 0.9375rem; color: var(--c-cream-dim); }
.testimonial figcaption strong { color: var(--c-tan); font-weight: 600; }

/* Contact page: direct contact cards */
.contact-cards { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 26px; }
.contact-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line); text-decoration: none; color: var(--c-ink); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
a.contact-card:hover { border-color: var(--c-ink); box-shadow: var(--shadow-sm); }
.contact-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-ivory); border: 1px solid var(--c-line); color: var(--c-red); transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
a.contact-card:hover .contact-card-icon { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.contact-card-icon svg.ph { width: 20px; height: 20px; }
.contact-card-text { display: grid; min-width: 0; }
.contact-card-text small { font: 600 var(--fs-label)/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-text); }
.contact-card-text span { font: 600 1.125rem/1.35 var(--font-display); }
@media (min-width: 640px) { .contact-cards { grid-template-columns: 1fr 1fr; } }

/* Contact page: find us */
@media (min-width: 640px) { .contact-cards-wide { grid-column: 1 / -1; } }
.page-hero .contact-cards { max-width: 560px; }
.find { row-gap: 32px; align-items: stretch; }
.find-address { margin-top: 20px; font-style: normal; font: 500 1.125rem/1.7 var(--font-display); color: var(--c-ink); }
.find-note { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin-top: 24px; font-size: 0.9375rem; line-height: 1.55; color: var(--c-stone); max-width: 48ch; }
.find-note svg.ph { width: 20px; height: 20px; color: var(--c-gold-text); margin-top: 1px; }
.map-wrap--page { margin-top: 0; min-height: 360px; box-shadow: 0 0 0 1px var(--c-line), var(--shadow-lg); }
@media (min-width: 1024px) { .find-info { grid-column: 1 / span 5; } .map-wrap--page { grid-column: 7 / -1; min-height: 440px; } }

/* Map panel (consent-gated) used in the footer and on the contact page */
.map-consent { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; background: radial-gradient(400px 220px at 50% 0, rgba(216, 192, 138, 0.14), transparent 70%), var(--c-charcoal-2); color: var(--c-cream-dim); }
.map-consent-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--c-line-dark); color: var(--c-tan); }
.map-consent-icon svg.ph { width: 26px; height: 26px; }
.map-consent-title { font: 600 1.125rem/1.3 var(--font-display); color: var(--c-tan); }
.map-consent-text { max-width: 34ch; font-size: 0.9375rem; line-height: 1.5; }
.map-consent .btn { margin-top: 6px; }
.map-wrap.is-loaded .map-consent { display: none; }
.map-wrap { background: var(--c-charcoal-2); }
.map-wrap.is-loaded { background: #fff; }
.map-wrap--light .map-consent { background: radial-gradient(400px 220px at 50% 0, rgba(216, 192, 138, 0.18), transparent 70%), var(--c-ivory); color: var(--c-stone); border: 1px solid var(--c-line); }
.map-wrap--light .map-consent-title { color: var(--c-ink); }
.map-wrap--light .map-consent-icon { border-color: var(--c-line-strong); color: var(--c-gold-text); }

/* Resource cards (News & guides) */
.resources { list-style: none; padding: 0; display: grid; gap: 16px; }
.resource { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.resource .photo { aspect-ratio: 16 / 9; border-radius: 0; }
.resource .photo img { transition: transform var(--t-img) var(--ease); }
.resource-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; }
.resource-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--c-stone); }
.chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font: 600 var(--fs-label)/1.4 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; background: var(--c-ivory); border: 1px solid var(--c-line); color: var(--c-gold-text); }
.chip--guide { background: var(--c-charcoal); border-color: var(--c-charcoal); color: var(--c-tan); }
.chip--archive { background: var(--c-white); color: var(--c-stone); }
.resource h3 { font-size: 1.1875rem; }
.resource h3 a { text-decoration: none; color: inherit; }
.resource h3 a::after { content: ""; position: absolute; inset: 0; }
.resource p { font-size: 1rem; line-height: 1.55; color: var(--c-stone); }
.resource .tile-more { margin-top: auto; }
.resource:hover, .resource:focus-within { border-color: var(--c-line-strong); box-shadow: var(--shadow-md); }
.resource:hover .photo img { transform: scale(1.03); }
.resource:hover .tile-more svg.ph { transform: translateX(4px); }
.resource:has(a:focus-visible) { outline: 2px solid var(--c-ink); outline-offset: 3px; }
@media (min-width: 768px) { .resources { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); } }

/* The moving guide: grouped checklists */
.archive { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--c-line-strong); }
.archive-item { display: grid; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--c-line); }
.archive-item h3 { font-size: 1.125rem; }
.archive-item > p:last-child { font-size: 1rem; line-height: 1.55; color: var(--c-stone); max-width: 64ch; }
@media (min-width: 1024px) { .archive-item { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr); align-items: baseline; gap: var(--gap); } }
.guide details { break-inside: avoid; }

.guide { display: grid; gap: 12px; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.checklist { list-style: none; padding: 0; display: grid; gap: 8px; }
.checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 1rem; line-height: 1.5; color: var(--c-stone); }
.checklist li::before { content: ""; width: 18px; height: 18px; margin-top: 2px; border: 1.5px solid var(--c-field-line); border-radius: 3px; background: var(--c-white); }
.checklist--cols { column-gap: 32px; }
@media (min-width: 640px) { .checklist--cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .checklist--cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Legal pages: table of contents beside readable prose */
.legal { row-gap: 32px; align-items: start; }
.draft-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 28px; border-radius: var(--radius); background: #FFF6E5; border: 1px solid #E8CF9C; color: #5A4214; font-size: 0.9375rem; line-height: 1.5; }
.draft-note svg.ph { width: 22px; height: 22px; flex: none; color: #8A6420; }
.toc { padding: 20px; border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line); }
.toc-title { font: 600 var(--fs-label)/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold-text); }
.toc ol { list-style: none; padding: 0; margin-top: 10px; display: grid; }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; font-size: 0.9375rem; color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-line); transition: color var(--t) var(--ease); }
.toc li:last-child a { border-bottom: 0; }
.toc a:hover { color: var(--c-red); }
.legal .prose h2 { scroll-margin-top: calc(var(--header-h) + 24px); padding-top: 8px; border-top: 1px solid var(--c-line); }
.legal-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 0.9375rem; }
.legal-table th, .legal-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); line-height: 1.5; color: var(--c-stone); }
.legal-table th { color: var(--c-ink); font-weight: 600; background: #FBF8F2; }
.legal-table-wrap { overflow-x: auto; }
.legal-table-wrap:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
@media (min-width: 1024px) {
  .legal-aside { grid-column: 1 / span 3; position: sticky; top: calc(66px + 24px); }
  .legal-body { grid-column: 5 / span 8; }
}

/* Not found */
.link-btn { display: inline; min-height: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--c-ink); cursor: pointer; }
.page-hero--nf { padding-block: 56px 72px; }
.page-hero--nf .page-hero-copy { grid-column: 1 / -1; }

.nf-links { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 28px; max-width: 640px; }
@media (min-width: 640px) { .nf-links { grid-template-columns: 1fr 1fr; } }

/* Cookie consent: a compact panel, bottom left, never covering the whole page */
.consent { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; max-width: 560px; opacity: 0; transform: translateY(12px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.consent.is-open { opacity: 1; transform: none; }
.consent-inner { max-height: calc(100vh - 24px); overflow-y: auto; padding: 20px; border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line-strong); border-top: 3px solid var(--c-gold); box-shadow: 0 24px 60px -24px rgba(26, 20, 16, 0.55); }
.consent-title { display: flex; align-items: center; gap: 10px; font: 600 1.125rem/1.3 var(--font-display); color: var(--c-ink); }
.consent-title svg.ph { width: 22px; height: 22px; color: var(--c-gold-text); }
.consent-text { margin-top: 8px; font-size: 0.9375rem; line-height: 1.55; color: var(--c-stone); }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; }
.consent-actions .btn { flex: 1 1 200px; }
.consent-manage { min-height: 44px; padding: 0 4px; border: 0; background: none; font-size: 0.9375rem; font-weight: 600; color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-gold); }
.consent-manage:hover { color: var(--c-red); }
.consent-panel { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-line); }
.consent-panel[hidden] { display: none; }
.consent-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.consent-row-title { font-weight: 600; color: var(--c-ink); }
.consent-row-text { font-size: 0.875rem; line-height: 1.5; color: var(--c-stone); }
.consent-always { flex: none; font-size: 0.8125rem; font-weight: 600; color: var(--c-gold-text); }
.consent-switch { position: relative; flex: none; display: inline-grid; place-items: center; width: 56px; height: 44px; cursor: pointer; }
.consent-switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.consent-switch span { position: relative; width: 48px; height: 28px; border-radius: 999px; background: var(--c-field-line); transition: background-color var(--t) var(--ease); }
.consent-switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--t) var(--ease); }
.consent-switch input:checked + span { background: var(--c-charcoal); }
.consent-switch input:checked + span::after { transform: translateX(20px); }
.consent-switch input:focus-visible + span { outline: 2px solid var(--c-ink); outline-offset: 3px; }
@media (min-width: 640px) { .consent { left: 20px; bottom: 20px; right: auto; } }
@media (max-width: 1023px) { .consent { bottom: 84px; } }
.footer-legal-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; margin-bottom: 6px; }
.footer-legal-links a, .footer-cookie-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font-size: 0.875rem; color: var(--c-cream); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(216, 192, 138, 0.5); transition: color var(--t) var(--ease); }
.footer-legal-links a:hover, .footer-cookie-btn:hover { color: var(--c-tan); }
.footer-bottom-main { display: grid; }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--c-gold); transition: color var(--t) var(--ease); }
.text-link svg.ph { width: 16px; height: 16px; color: var(--c-red); transition: transform var(--t) var(--ease); }
.text-link:hover { color: var(--c-red); }
.text-link:hover svg.ph { transform: translateX(3px); }
.section--dark .text-link { color: var(--c-cream); }
.section--dark .text-link:hover { color: var(--c-tan); }
.head-link { margin-top: 10px; }
.cards-foot-sep { margin: 0 8px; color: var(--c-line-strong); }

/* Print: the moving checklist prints cleanly */
@media print {
  .utility, .site-header, .site-footer, .action-bar, .consent, .page-nav, .guide-actions, .lightbox { display: none !important; }
  body { background: #fff; }
  .section { padding-block: 16px; }
  details { border: 0 !important; }
  details > * { display: block !important; }
  .faq-icon { display: none; }
}

/* ==========================================================================
   13. V13 — blended photography, service compositions, heritage timeline
   ========================================================================== */
/* Blended photographs behind dark sections. Each variant uses a different technique, so the
   site never repeats the same treatment twice in a row. The image is always decorative. */
.has-bgp { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.bgp { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bgp img { width: 100%; height: 100%; object-fit: cover; }
/* 1 · Luminosity, fading in from the right edge */
.bgp--fade-right img { mix-blend-mode: luminosity; opacity: 0.32; -webkit-mask-image: linear-gradient(to left, #000 8%, rgba(0, 0, 0, 0.5) 42%, transparent 78%); mask-image: linear-gradient(to left, #000 8%, rgba(0, 0, 0, 0.5) 42%, transparent 78%); }
/* 2 · Warm sepia band across the top, dissolving downwards */
.bgp--band-top { bottom: auto; height: min(82%, 680px); }
.bgp--band-top img { filter: sepia(0.6) saturate(0.85) contrast(1.05); opacity: 0.3; -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%); mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%); }
/* 3 · Heritage-gold duotone: greyscale photo screened over a gold-to-charcoal wash */
.bgp--duotone { background: linear-gradient(115deg, #4a3922 0%, #2a221a 38%, var(--c-charcoal) 70%); }
.bgp--duotone img { filter: grayscale(1) contrast(1.2) brightness(0.85); mix-blend-mode: screen; opacity: 0.3; -webkit-mask-image: radial-gradient(ellipse 80% 90% at 85% 40%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 80% 90% at 85% 40%, #000 25%, transparent 75%); }
/* 4 · Soft-light wash, rising from the bottom edge */
.bgp--rise { top: auto; height: min(70%, 520px); }
.bgp--rise img { object-position: center 70%; mix-blend-mode: soft-light; opacity: 0.85; filter: contrast(1.1) saturate(0.75); -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 35%, transparent 75%); mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 35%, transparent 75%); }
.section--rise { padding-bottom: calc(var(--sy) + clamp(120px, 16vw, 240px)); }
/* 5 · Vignette: a sepia print glowing out of the left-hand side */
.bgp--vignette img { filter: sepia(0.7) contrast(1.1); mix-blend-mode: luminosity; opacity: 0.42; -webkit-mask-image: radial-gradient(ellipse 50% 75% at 12% 55%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 50% 75% at 12% 55%, #000 15%, transparent 72%); }
/* 6 · Out-of-focus depth for small dark panels */
.bgp--blur img { filter: blur(3px) grayscale(0.5) brightness(0.9); transform: scale(1.08); opacity: 0.24; }
/* 7 · Screened texture, strongest top right, for dark information plates */
.bgp--screen img { filter: grayscale(1) contrast(1.3); mix-blend-mode: screen; opacity: 0.16; -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 60%); mask-image: linear-gradient(225deg, #000 0%, transparent 60%); }
@media (max-width: 767px) {
  .bgp--fade-right img { opacity: 0.2; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 55%); mask-image: linear-gradient(to top, #000 0%, transparent 55%); }
  .bgp--vignette img { -webkit-mask-image: radial-gradient(ellipse 90% 45% at 50% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 90% 45% at 50% 0%, #000 10%, transparent 75%); }
}
@media (prefers-contrast: more) { .bgp { display: none; } }

/* Feature hero for the Removals page: wider photograph and a strip of three essentials */
.page-hero--feature .page-hero-photo { aspect-ratio: 16 / 11; }
.hero-facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--c-line); }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 500; color: var(--c-ink); }
.hero-facts svg.ph { width: 20px; height: 20px; color: var(--c-gold-text); }
@media (min-width: 1024px) {
  .page-hero--feature .page-hero-copy { grid-column: 1 / span 5; padding-right: 0; }
  .page-hero--feature .page-hero-media { grid-column: 6 / -1; }
  .page-hero--feature .page-hero-photo { aspect-ratio: auto; height: clamp(420px, 56vh, 540px); }
}

/* Domestic removals: a wide photograph with the copy panel laid over its lower edge */
.wide-feature { position: relative; }
.wide-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 10; background: #CFC6B4; box-shadow: var(--shadow-lg); }
.wide-photo img { width: 100%; height: 100%; object-fit: cover; }
.wide-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26, 20, 16, 0.35), transparent 45%); pointer-events: none; }
.wide-body { row-gap: 20px; margin-top: 20px; align-items: start; }
.wide-panel { padding: 26px 24px 28px; border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line); border-top: 3px solid var(--c-red); box-shadow: var(--shadow-lg); }
.wide-panel h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.wide-panel > p:not(.label) { margin-top: 12px; font-size: 1.0625rem; line-height: 1.65; color: var(--c-stone); max-width: 58ch; }
.visit-card { padding: 22px 22px 24px; border-radius: var(--radius); background: var(--c-charcoal); color: var(--c-cream-dim); box-shadow: var(--shadow-lg); }
.visit-card-title { display: flex; align-items: center; gap: 10px; font: 600 1.125rem/1.3 var(--font-display); color: var(--c-tan); }
.visit-card-title svg.ph { width: 22px; height: 22px; color: var(--c-gold); }
.visit-card > p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.55; }
.visit-list { list-style: none; padding: 0; display: grid; gap: 0; margin-top: 14px; border-top: 1px solid var(--c-line-dark); }
.visit-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--c-line-dark); font-size: 0.9375rem; color: var(--c-cream); }
.visit-list svg.ph { width: 18px; height: 18px; margin-top: 2px; color: var(--c-gold); }
.visit-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.875rem; color: var(--c-cream-dim); }
.visit-card-foot svg.ph { width: 18px; height: 18px; color: var(--c-gold); }
@media (min-width: 1024px) {
  .wide-photo { aspect-ratio: auto; height: clamp(420px, 52vw, 600px); }
  .wide-body { margin-top: -150px; position: relative; z-index: 1; padding-inline: 32px; }
  .wide-panel { grid-column: 1 / span 7; padding: 34px 36px 36px; }
  .visit-card { grid-column: 9 / -1; margin-top: 64px; }
}

/* Commercial removals: charcoal section with a blended fleet band */
.biz { padding-top: 0; }
.fleet-band { position: relative; height: clamp(150px, 22vw, 300px); margin-bottom: 8px; overflow: hidden; }
.fleet-band img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: saturate(0.85) contrast(1.05); -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%), linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 35%, transparent 100%), linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-composite: intersect; opacity: 0.85; }
.biz-grid { row-gap: 32px; align-items: start; }
.biz-copy > p:not(.label) { margin-top: 14px; font-size: 1.0625rem; line-height: 1.65; color: var(--c-cream-dim); max-width: 54ch; }
.biz-copy .ticks { margin-top: 22px; }
.plan { counter-reset: plan; list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--c-line-dark); }
.plan li { counter-increment: plan; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--c-line-dark); }
.plan li::before { content: counter(plan, decimal-leading-zero); font: 600 1.75rem/1 var(--font-display); color: var(--c-gold); font-variant-numeric: lining-nums; }
.plan h3 { font-size: 1.1875rem; color: var(--c-tan); }
.plan p { margin-top: 6px; font-size: 1rem; line-height: 1.6; color: var(--c-cream-dim); }
@media (min-width: 1024px) { .biz-copy { grid-column: 1 / span 5; } .plan-wrap { grid-column: 7 / -1; } }

/* Packing: one image, three clearly distinguished options */
.pack-grid { row-gap: 28px; align-items: center; }
.pack-photo { margin: 0; }
.pack-photo .photo { aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); }
.options { list-style: none; padding: 0; display: grid; margin-top: 22px; border-top: 1px solid var(--c-line-strong); }
.option { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.option-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-white); border: 1px solid var(--c-line-strong); color: var(--c-gold-text); }
.option-icon svg.ph { width: 24px; height: 24px; }
.option h3 { font-size: 1.1875rem; }
.option p { margin-top: 4px; font-size: 1rem; line-height: 1.55; color: var(--c-stone); }
.option--accent .option-icon { background: var(--c-charcoal); border-color: var(--c-charcoal); color: var(--c-tan); }
@media (min-width: 1024px) { .pack-photo { grid-column: 1 / span 5; } .pack-copy { grid-column: 7 / -1; } }

/* Specialist removals: a framed plate with its own callout */
.spec-plate { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line); border-top: 3px solid var(--c-gold); box-shadow: var(--shadow-md); }
.spec-plate-photo { margin: 0; position: relative; min-height: 240px; background: #CFC6B4; }
.spec-plate-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spec-plate-body { padding: 26px 24px 28px; }
.spec-plate-body h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.spec-plate-body > p:not(.label) { margin-top: 12px; font-size: 1.0625rem; line-height: 1.65; color: var(--c-stone); max-width: 54ch; }
.spec-items { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.spec-items li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--c-ivory); border: 1px solid var(--c-line); font-size: 0.9375rem; font-weight: 500; color: var(--c-ink); }
.spec-items svg.ph { width: 18px; height: 18px; color: var(--c-gold-text); }
.callout { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; margin-top: 20px; padding: 16px 18px; border-radius: var(--radius); background: #FBF6EC; border-left: 3px solid var(--c-red); }
.callout-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-red); color: #fff; }
.callout-icon svg.ph { width: 20px; height: 20px; }
.callout p { font-size: 1rem; line-height: 1.55; color: var(--c-stone); }
.callout strong { display: block; font-family: var(--font-display); color: var(--c-ink); }
@media (min-width: 1024px) { .spec-plate { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .spec-plate-photo { min-height: 100%; } .spec-plate-body { padding: 40px 44px; } }

/* Coverage: a distance scale from Alnwick outwards, instead of three lorry photographs */
.reach-scale { list-style: none; padding: 0; display: grid; gap: 0; position: relative; }
.reach-step { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 0 0 30px; }
.reach-step::before { content: ""; position: absolute; left: 31px; top: 64px; bottom: 0; width: 1px; background: linear-gradient(var(--c-gold), rgba(180, 150, 102, 0.15)); }
.reach-step:last-child::before { display: none; }
.reach-ring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--c-line-dark); background: rgba(28, 24, 20, 0.75); color: var(--c-tan); }
.reach-ring::before { content: ""; position: absolute; inset: calc(var(--ring, 0) * -1px); border-radius: 50%; border: 1px dashed rgba(180, 150, 102, 0.35); }
.reach-ring svg.ph { width: 26px; height: 26px; }
.reach-step:nth-child(1) .reach-ring { --ring: 0; background: var(--c-gold); color: var(--c-charcoal); border-color: var(--c-gold); }
.reach-step:nth-child(2) .reach-ring { --ring: 6; }
.reach-step:nth-child(3) .reach-ring { --ring: 12; }
.reach-kicker { font: 600 var(--fs-label)/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold); }
.reach-step h3 { margin-top: 4px; font-size: 1.3125rem; color: var(--c-tan); }
.reach-step p { margin-top: 6px; font-size: 1rem; line-height: 1.6; color: var(--c-cream-dim); max-width: 40ch; }
.reach-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; font-size: 0.9375rem; color: var(--c-cream-dim); }
.reach-note svg.ph { flex: none; width: 20px; height: 20px; color: var(--c-gold); }
@media (min-width: 1024px) {
  .reach-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  .reach-step { grid-template-columns: 1fr; gap: 18px; padding: 0 24px 0 0; }
  .reach-step::before { left: 76px; right: 0; top: 32px; bottom: auto; width: auto; height: 1px; background: linear-gradient(to right, var(--c-gold), rgba(180, 150, 102, 0.15)); }
  .reach-step:last-child::before { display: none; }
}

/* Moving process: a connected stepper, horizontal on desktop and vertical on phones */
.stepper { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: step; }
.stepper li { counter-increment: step; position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding-bottom: 26px; }
.stepper li::after { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: var(--c-line-strong); }
.stepper li:last-child::after { display: none; }
.step-dot { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-white); border: 2px solid var(--c-line-strong); color: var(--c-red); transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); }
.step-dot svg.ph { width: 24px; height: 24px; }
.step-dot::after { content: counter(step); position: absolute; right: -4px; top: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-charcoal); color: var(--c-tan); font: 600 0.75rem/1 var(--font-display); }
.stepper h3 { font-size: 1.1875rem; padding-top: 4px; }
.stepper p { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--c-stone); max-width: 34ch; }
.stepper li:hover .step-dot { background: var(--c-charcoal); border-color: var(--c-charcoal); color: var(--c-tan); }
@media (min-width: 1024px) {
  .stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
  .stepper li { grid-template-columns: 1fr; gap: 16px; padding: 0 16px 0 0; }
  .stepper li::after { left: 64px; right: 8px; top: 27px; bottom: auto; width: auto; height: 2px; }
}

/* Storage: two groups of uses separated by a rule, not two cards */
.uses { display: grid; gap: 28px; padding: 28px 0 0; border-top: 1px solid var(--c-line-strong); }
.use-head { display: flex; align-items: center; gap: 14px; }
.use-head .tile-icon { flex: none; }
.use-head h3 { font-size: 1.375rem; }
.use-head p { font-size: 0.9375rem; color: var(--c-stone); }
.uses .ticks { margin-top: 16px; }
@media (min-width: 768px) {
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .use-group:first-child { padding-right: 40px; }
  .use-group + .use-group { padding-left: 40px; border-left: 1px solid var(--c-line-strong); }
}

/* About: compact heritage timeline beside a curated photo stack */
.heritage { row-gap: 40px; align-items: start; }
.hist { list-style: none; padding: 0; position: relative; }
.hist::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--c-gold), rgba(180, 150, 102, 0.2)); }
.hist li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 0 0 26px 40px; }
.hist li::before { content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--c-charcoal); border: 2px solid var(--c-gold); }
.hist li:last-child { padding-bottom: 0; }
.hist li:last-child::before { background: var(--c-tan); border-color: var(--c-tan); box-shadow: 0 0 0 6px rgba(216, 192, 138, 0.15); }
.hist-mark { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hist-year { font: 600 1.375rem/1.1 var(--font-display); color: var(--c-tan); font-variant-numeric: lining-nums; }
.hist-tag { font: 600 var(--fs-label)/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gold); }
.hist h3 { margin-top: 2px; font-size: 1.125rem; color: var(--c-cream); }
.hist p { font-size: 1rem; line-height: 1.6; color: var(--c-cream-dim); max-width: 56ch; }
.hist-media { position: relative; display: grid; gap: 18px; }
.hist-print { margin: 0; padding: 10px 10px 0; background: #EFE6D5; border-radius: 2px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); transform: rotate(-1.2deg); }
.hist-print img { width: 100%; aspect-ratio: 817 / 459; object-fit: cover; filter: sepia(0.15); }
.hist-print figcaption { padding: 8px 4px 10px; font-size: 0.875rem; color: var(--c-stone); }
.hist-photo { margin: 0 0 0 12%; position: relative; }
.hist-photo img { width: 100%; aspect-ratio: 1400 / 720; object-fit: cover; border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); outline: 1px solid var(--c-line-dark); outline-offset: 5px; }
.hist-photo figcaption { margin-top: 12px; font-size: 0.875rem; color: var(--c-cream-dim); }
.hist-media .seal { right: 4px; left: auto; top: -30px; }
@media (min-width: 640px) and (max-width: 1023px) { .hist-media { grid-template-columns: 1fr 1fr; align-items: start; } .hist-photo { margin: 0; } }
@media (min-width: 1024px) {
  .hist-wrap { grid-column: 1 / span 6; }
  .hist-media { grid-column: 8 / -1; position: sticky; top: calc(66px + 40px); }
  .hist li { padding-bottom: 30px; }
}

/* About: compact links onward, instead of repeating each page's content */
.next-links { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 28px; }
.next-links a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 14px 18px; border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line); text-decoration: none; color: var(--c-ink); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.next-links a > span { display: inline-flex; align-items: center; gap: 12px; font: 600 1.0625rem/1.3 var(--font-display); }
.next-links a > span svg.ph { width: 22px; height: 22px; color: var(--c-gold-text); }
.next-links a > svg.ph { width: 18px; height: 18px; color: var(--c-red); transition: transform var(--t) var(--ease); }
.next-links a:hover { border-color: var(--c-ink); box-shadow: var(--shadow-sm); }
.next-links a:hover > svg.ph { transform: translateX(4px); }
@media (min-width: 768px) { .next-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Galleries without captions: the photographs carry themselves */
.gallery-item:not(:has(figcaption)) .photo { margin-bottom: 0; }

/* Team page: a black-and-white team photograph printed into the warm page with multiply */
.team-band { row-gap: 24px; align-items: center; }
.team-band-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); }
.team-band-photo img { width: 100%; aspect-ratio: 1400 / 720; object-fit: cover; mix-blend-mode: multiply; filter: contrast(1.08) sepia(0.12); }
.team-band-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px 30px var(--c-ivory); }
@media (min-width: 1024px) { .team-band-copy { grid-column: 1 / span 4; } .team-band-photo { grid-column: 5 / -1; } }

/* Moving guide: an index of the checklist beside the quote route */
.guide-index { row-gap: 20px; align-items: start; }
.guide-toc { counter-reset: gt; list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--c-line-strong); }
.guide-toc li { counter-increment: gt; }
.guide-toc a { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--c-line); text-decoration: none; color: var(--c-ink); font-weight: 500; transition: color var(--t) var(--ease); }
.guide-toc a::before { content: counter(gt, decimal-leading-zero); font: 600 0.875rem/1 var(--font-display); color: var(--c-gold-text); }
.guide-toc a svg.ph { width: 16px; height: 16px; color: var(--c-red); transition: transform var(--t) var(--ease); }
.guide-toc a:hover { color: var(--c-red); }
.guide-toc a:hover svg.ph { transform: translateY(2px); }
@media (min-width: 768px) { .guide-toc { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
@media (min-width: 1024px) { .guide-index-main { grid-column: 1 / span 8; } .guide-index-aside { grid-column: 9 / -1; } }
.quote-route { position: relative; padding: 24px; border-radius: var(--radius); background: var(--c-charcoal); color: var(--c-cream-dim); box-shadow: var(--shadow-lg); }
.quote-route h2 { font-size: 1.375rem; color: var(--c-tan); }
.quote-route p { margin-top: 8px; font-size: 1rem; line-height: 1.55; }
.quote-route .btn { margin-top: 18px; width: 100%; }
.quote-route .call-link { margin-top: 12px; color: var(--c-cream); }
.quote-route .call-link-text small { color: var(--c-cream-dim); }
.quote-route .call-link-icon { background: transparent; border-color: var(--c-line-dark); color: var(--c-tan); }
.quote-route :focus-visible { outline-color: var(--c-tan); }

/* Contact: one clear panel of ways to reach the office */
.page-contact .call-card { grid-template-columns: 1fr; }
.page-contact .call-card-photo { display: none; }
.reach-panel { margin-top: 26px; max-width: 560px; border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); }
.reach-panel a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: center; gap: 14px; min-height: 64px; padding: 10px 18px; text-decoration: none; color: var(--c-ink); border-bottom: 1px solid var(--c-line); transition: background-color var(--t) var(--ease); }
.reach-panel li:last-child a { border-bottom: 0; }
.reach-panel ul { list-style: none; padding: 0; }
.reach-panel a:hover { background: #FFFDF8; }
.reach-panel a:hover .contact-card-icon { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.reach-panel a > svg.ph { width: 18px; height: 18px; color: var(--c-stone); transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.reach-panel a:hover > svg.ph { transform: translateX(3px); color: var(--c-red); }
@media (max-width: 479px) { .reach-panel .contact-card-text span { font-size: 1rem; } }

/* Footer: a blended photograph behind the closing call to action */
.site-footer.has-bgp { overflow: visible; }
.footer-bgp { position: absolute; left: 0; right: 0; top: 0; height: 420px; z-index: 0; pointer-events: none; overflow: hidden; }
.footer-bgp img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; filter: grayscale(0.35) sepia(0.25) contrast(1.05); opacity: 0.22; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%); }
.site-footer > .frame { position: relative; z-index: 1; }
.footer-cta { background: rgba(28, 24, 20, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-color: rgba(216, 192, 138, 0.3); }
.footer-logo { padding: 10px 14px; }
.footer-location .map-wrap { box-shadow: 0 0 0 1px rgba(216, 192, 138, 0.45), 0 0 0 6px rgba(216, 192, 138, 0.06), 0 24px 44px -28px rgba(0, 0, 0, 0.95); }
@media (max-width: 767px) {
  .footer-grid { row-gap: 28px; padding-block: 36px 28px; }
  .footer-logo img { width: 170px; }
}

/* ==========================================================================
   11. Motion — short, quiet, transform and opacity only
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* One hero moment: the photograph settles in; the headline and buttons never wait for it */
  .js .hero-photo { animation: hero-reveal 1.1s var(--ease) both; }
  .js .hero-photo img { animation: hero-settle 1.6s var(--ease) both; }
  .js .hero-seal { animation: seal-in 0.7s var(--ease) 0.55s both; }
  @keyframes hero-reveal { from { clip-path: inset(0 0 0 14%); } to { clip-path: inset(0); } }
  @keyframes hero-settle { from { transform: scale(1.06); } to { transform: none; } }
  @keyframes seal-in { from { opacity: 0; transform: rotate(-24deg) scale(0.9); } to { opacity: 1; transform: rotate(-8deg); } }
  .motion [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  .motion [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}