/* ==============================================================
   Colin Dawson Ltd — sitewide styles (premium scroll-driven build)
   Brand tokens per build brief §3 + two derived navy tones.
   Layering = colour bands + overlap + speed difference. Mobile-first.
   ============================================================== */

:root {
  --navy: #283878;
  --navy-deep: #1B2654;       /* dark bands */
  --navy-pale: #E6E9F3;       /* raised panels */
  --green: #4A8B2C;
  --green-text: #3D7324;      /* green on white at text sizes (4.5:1+) — brand green itself is 4.2:1 */
  --amber: #E8A013;           /* RESERVED: 24hr dairy breakdown CTA only */
  --grey: #F4F3F0;
  --line: #E0DED8;
  --ink: #1C1C1C;
  --ink-soft: #4A4A48;
  --white: #FFFFFF;

  --font-head: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* motion tokens — mirrored in js/site.js */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 320ms;
  --dur-base: 560ms;
  --dur-slow: 900ms;
  --parallax-far: 0.8;
  --parallax-mid: 0.9;
  --parallax-near: 1.0;
  --reveal-y: 28px;
  --stagger: 40ms;

  --container: 1200px;
  --nav-h: 72px;
  --overlap: 72px;
  --radius: 6px;
  --shadow: 0 10px 30px rgba(27, 38, 84, 0.10);
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-500-italic.woff2") format("woff2");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  overflow-x: clip;
}
img, picture, video { display: block; max-width: 100%; }
picture img { width: 100%; height: auto; }
a { color: var(--navy); }
a:hover { color: var(--navy-deep); }
ul { list-style: none; }
strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.band--navy :focus-visible, .hero :focus-visible, .contact-strip :focus-visible { outline-color: var(--white); }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--navy-deep); color: var(--white); padding: .6rem 1rem;
  border-radius: var(--radius); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ type */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.2; }
p { max-width: 62ch; }
.band--navy h2, .band--navy h3, .band--navy p, .hero h1, .hero p, .contact-strip h2, .contact-strip p { color: var(--white); }

.eyebrow {
  display: block;
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-text);
  margin-bottom: 1rem;
}
.eyebrow--serif {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.05rem;
  font-weight: 500;
}
.band--navy .eyebrow, .hero .eyebrow, .contact-strip .eyebrow, .feature .eyebrow { color: var(--navy-pale); }

.serif { font-family: var(--font-serif); font-weight: 500; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 58ch; }
.muted { color: var(--ink-soft); }

/* ------------------------------------------------------------ layout */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.band { position: relative; padding-block: clamp(3.5rem, 8vw, 7rem); }
.band--grey { background: var(--grey); }
.band--white { background: var(--white); }
.band--navy { background: var(--navy-deep); color: var(--white); }
.band--pale { background: var(--navy-pale); }
.band--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* panels overlap the band above (primary layer feel, works with JS off) */
.overlap-up { position: relative; z-index: 2; margin-top: calc(-1 * var(--overlap)); }
.overlap-up--sm { margin-top: -48px; }

.grid-2 { display: grid; gap: 2rem; }
.grid-3 { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
.cols-2 { columns: 1; }
@media (min-width: 700px) { .cols-2 { columns: 2; column-gap: 3rem; } }

/* photo with a solid navy offset block behind it (reads as a print, not a card) */
.photo { position: relative; }
.photo img { width: 100%; height: auto; }
@media (min-width: 900px) {
  .photo--block { margin: 0 12px 12px 0; isolation: isolate; }
  .photo--block::after {
    content: ""; position: absolute; z-index: -1;
    top: 12px; left: 12px; right: -12px; bottom: -12px;
    background: var(--navy);
  }
  .photo--block-left { margin: 0 0 12px 12px; }
  .photo--block-left::after { left: -12px; right: 12px; }
}
/* image bleeds to the viewport edge on one side; text stays in the container */
@media (min-width: 900px) {
  .bleed-left  { margin-left: min(calc((var(--container) - 100vw) / 2), -1.25rem); }
  .bleed-right { margin-right: min(calc((var(--container) - 100vw) / 2), -1.25rem); }
  .bleed-left picture img, .bleed-right picture img { height: 100%; object-fit: cover; }
  .split-media .photo picture img { max-height: 640px; object-fit: cover; }
}

/* sticky section heading (CSS only) */
@media (min-width: 900px) {
  .sticky-head { position: sticky; top: calc(var(--nav-h) + 2.5rem); align-self: start; }
}

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-block;
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.btn:hover { transform: translateY(-2px); }
.btn-amber { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.btn-amber:hover { background: #d9940f; border-color: #d9940f; color: var(--ink); }
.btn-green { background: var(--green-text); color: var(--white); border-color: var(--green-text); }
.btn-green:hover { background: #326019; border-color: #326019; color: var(--white); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.7); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: var(--white); border-color: var(--white); }
.btn-ghost-ink { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost-ink:hover { background: var(--navy); color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.arrow-link {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  color: var(--navy); text-decoration: none; margin-top: 1rem;
}
.arrow-link::after { content: "\00a0\2192"; display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.arrow-link:hover::after { transform: translateX(4px); }
.arrow-link:hover { text-decoration: underline; }

/* ------------------------------------------------------------ nav */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-fast);
}
.navbar.scrolled { box-shadow: 0 4px 20px rgba(27, 38, 84, 0.08); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); gap: 1rem; }
.nav-brand { display: inline-flex; align-items: center; }
.nav-logo { height: 44px; width: auto; }
.nav-links { display: none; gap: 1.6rem; }
.nav-links a {
  font-family: var(--font-head); font-weight: 600; font-size: 0.95rem;
  color: var(--ink); text-decoration: none; padding: .4rem 0; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--green); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 0.75rem; }
.nav-cta { display: none; padding: .7rem 1.1rem; font-size: .95rem; }
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; border-radius: var(--radius);
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-block; }
  .nav-toggle { display: none; }
}
@media (max-width: 899px) {
  .nav-links.open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1rem;
    box-shadow: 0 12px 30px rgba(27, 38, 84, 0.12);
  }
  .nav-links.open a { padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav-links.open a:last-child { border-bottom: 0; }
}

/* ------------------------------------------------------------ hero (split) */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: 50vh auto;
  background: var(--navy-deep);
  overflow: hidden;
}
.hero-media { position: relative; order: -1; overflow: hidden; background: var(--navy-deep); }
.hero-media picture { position: absolute; inset: 0; }
.hero-media picture img { width: 100%; height: 100%; object-fit: cover; }
.hero-media .frame { opacity: 0; transition: opacity 1000ms ease; will-change: opacity; }
.hero-media .frame.is-on { opacity: 1; }
.hero-media .frame--rest { opacity: 1; }
.hero-panel {
  position: relative; z-index: 2;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem);
  display: flex; flex-direction: column; justify-content: center;
}
.hero-panel h1 { color: var(--white); margin-bottom: 1.25rem; }
.hero-sub {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45;
  color: var(--navy-pale); max-width: 44ch;
}
.hero-sub--sans { font-family: var(--font-body); font-weight: 400; font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.est-pill {
  position: absolute; z-index: 3;
  left: 1.25rem; top: calc(50vh - 1.25rem);
  transform: translateY(-100%);
  display: inline-block;
  background: var(--white); color: var(--navy-deep);
  font-family: var(--font-head); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: .55rem .9rem; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
@media (min-width: 768px) {
  .hero {
    grid-template-columns: 45fr 55fr;
    grid-template-rows: none;
    min-height: min(calc(100vh - var(--nav-h)), 820px);
  }
  .hero-media { order: 0; height: auto; }
  .hero-media picture { top: -6%; bottom: -6%; }        /* 12% bleed for parallax */
  .hero-media::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, var(--navy-deep) 0%, rgba(27, 38, 84, 0.55) 10%, rgba(27, 38, 84, 0) 26%);
  }
  .est-pill {
    left: 45%; top: auto; bottom: clamp(2rem, 5vw, 3.5rem);
    transform: translateX(-50%);
  }
  .hero--inner { min-height: min(calc(78vh - var(--nav-h)), 640px); }
}

/* ------------------------------------------------------------ brand partners strip (compact) */
.partners { background: var(--white); border-bottom: 1px solid var(--line); padding-block: 1.5rem; }
.partners--bordered { border-top: 1px solid var(--line); }
.partners .container { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.partners-lede { color: var(--ink-soft); font-size: .95rem; max-width: none; }
.partner-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem 3rem; }
.partner-logos picture { display: block; }
.partner-logos img { height: 44px; width: auto; }
@media (min-width: 900px) {
  .partners .container { flex-direction: row; justify-content: space-between; text-align: left; }
  .partner-logos img { height: 52px; }
}
.band--services { padding-top: clamp(2.5rem, 5vw, 4rem); }
.band--services .panels { margin-top: 2.5rem; }

/* ------------------------------------------------------------ areas: map + region cards */
.areas-grid { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 900px) { .areas-grid { grid-template-columns: 6fr 5fr; gap: 2rem; align-items: stretch; } }
.area-map-wrap { position: relative; min-height: 360px; background: var(--navy-pale); box-shadow: var(--shadow); }
.area-map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.area-cards { display: grid; gap: 1rem; align-content: start; }
.area-card { background: var(--white); border-left: 4px solid var(--green); padding: 1.25rem 1.5rem; box-shadow: var(--shadow); }
.area-card h3 { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-deep); margin-bottom: .4rem; }
.area-card p { color: var(--ink-soft); font-size: 1rem; }
.area-tag { display: inline-block; margin-top: .75rem; font-family: var(--font-head); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-text); }

/* ------------------------------------------------------------ video + gallery */
.work-video { width: 100%; height: auto; background: #000; box-shadow: var(--shadow); }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 2rem; }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.gallery picture img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: 100%; }

/* ------------------------------------------------------------ service panels */
.panels { display: grid; gap: 4.5rem 2rem; }
@media (min-width: 900px) { .panels { grid-template-columns: repeat(3, 1fr); } }
.panel {
  background: var(--white);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform var(--dur-fast) var(--ease-out);
  margin-top: 48px; /* room for the photo to bleed out the top */
}
.panel:hover { transform: translateY(-4px); }
.panel-img { margin: -48px 1.25rem 0; box-shadow: 0 8px 24px rgba(27, 38, 84, 0.18); }
.panel-img img { width: 100%; height: auto; }
.panel-body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.panel-body h3 { margin-bottom: .6rem; }
.panel-body p { color: var(--ink-soft); }
.panel-body .arrow-link { margin-top: auto; padding-top: 1rem; }
.panel--text { margin-top: 0; padding: 1.75rem 1.5rem; border-top: 4px solid var(--green); }
.panel--text h3 { margin-bottom: .6rem; }
.panels--text { gap: 1.5rem; }
@media (min-width: 700px) and (max-width: 999px) { .panels--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .panels--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .panels--text .panel--text:nth-child(even) { transform: translateY(2rem); } .panels--text .panel--text:nth-child(even):hover { transform: translateY(calc(2rem - 4px)); } }

/* ------------------------------------------------------------ feature (pinned) */
.feature { position: relative; background: var(--navy-deep); color: var(--white); overflow: clip; }
.feature-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; }
.feature-bg picture { position: absolute; top: -6%; left: 0; width: 100%; height: 112%; }
.feature-bg picture img { width: 100%; height: 100%; object-fit: cover; }
.feature-bg .scrim { position: absolute; inset: 0; background: rgba(27, 38, 84, 0.72); }
.feature-inner { position: relative; z-index: 1; padding-block: clamp(3.5rem, 8vw, 7rem); display: grid; gap: 2.5rem; }
.feature h2 { color: var(--white); }
.feature-copy > * { background: rgba(27, 38, 84, 0.6); border: 1px solid rgba(255, 255, 255, 0.28); padding: 1.35rem 1.6rem; border-radius: var(--radius); }
.feature-copy > * + * { margin-top: 1.25rem; }
.feature-copy p { color: var(--white); font-size: 1.1rem; max-width: 46ch; }
.feature-step { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.25rem; align-items: start; }
.feature-step .num {
  font-family: var(--font-serif); font-size: 2.6rem; line-height: 1; color: var(--amber); font-weight: 500;
}
.feature-step h3 { color: var(--white); margin-bottom: .4rem; }
.feature-step p { color: var(--navy-pale); font-size: 1.05rem; }
@media (min-width: 900px) {
  .feature-inner { grid-template-columns: 5fr 6fr; gap: clamp(3rem, 6vw, 6rem); }
  .js.motion .feature-bg { height: 100vh; }              /* pinned to the viewport while the copy scrolls */
  .js.motion .feature-copy > * + * { margin-top: 10vh; }
  .js.motion .feature-copy { padding-block: 6vh; }
}

/* ------------------------------------------------------------ store / split sections */
.split-media { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .split-media { grid-template-columns: 6fr 5fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .split-media--flip { grid-template-columns: 5fr 6fr; }
  .split-media--flip > .photo { order: 2; }
}
.split-media h2 { margin-bottom: 1.25rem; }
.split-media p + p { margin-top: 1rem; }
.list-plain li { padding: .35rem 0 .35rem 1.4rem; position: relative; }
.list-plain li::before { content: ""; position: absolute; left: 0; top: .95em; width: .6rem; height: 2px; background: var(--green); }

/* ------------------------------------------------------------ pull quote */
.pull {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2.15rem); line-height: 1.35;
  color: var(--navy-deep); max-width: 34ch; text-wrap: pretty;
}
.pull-cite { display: block; margin-top: 1.25rem; font-family: var(--font-head); font-weight: 600; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green-text); }

/* quote beside a dominant photo (home availability) */
.quote-split { display: grid; gap: 2rem; }
.quote-card { background: var(--white); border-left: 5px solid var(--green); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow); align-self: center; }
.quote-card .pull { font-size: clamp(1.25rem, 2vw, 1.7rem); }
@media (min-width: 900px) {
  .quote-split { grid-template-columns: 7fr 5fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
  .quote-split .photo picture img { max-height: none; }
}

/* ------------------------------------------------------------ areas */
.areas-lead { margin-bottom: 1.75rem; }
.areas-cols h3 { font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); margin-bottom: .5rem; break-after: avoid; }
.areas-cols ul { margin-bottom: 1.5rem; break-inside: avoid; }
.areas-cols li { padding: .2rem 0; }

/* ------------------------------------------------------------ contact strip */
.contact-strip { background: var(--navy-deep); color: var(--white); }
.contact-strip .container { display: grid; gap: 2rem; padding-block: clamp(3.5rem, 7vw, 6rem); }
.contact-strip .big-tel { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.9rem, 4vw, 3rem); color: var(--white); text-decoration: none; letter-spacing: -.01em; }
.contact-strip .big-tel:hover { text-decoration: underline; }
.contact-strip dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.25rem; align-content: start; }
.contact-strip dt { color: var(--navy-pale); font-weight: 600; }
.contact-strip dd a { color: var(--white); }
.contact-strip .note { color: var(--navy-pale); font-size: .95rem; margin-top: .75rem; }
@media (min-width: 900px) { .contact-strip .container { grid-template-columns: 1fr 1fr; align-items: center; } }

/* ------------------------------------------------------------ FAQ */
.faq-list { max-width: 780px; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; line-height: 1.3; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--dur-fast) var(--ease-out);
}
.faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--navy); }
.faq-a { padding: 0 0 1.25rem; }
.faq-a p { color: var(--ink-soft); }
.band--grey .faq { border-color: #d8d6cf; }

/* ------------------------------------------------------------ stock strip (shop) */
.stock-grid { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .stock-grid { grid-template-columns: repeat(3, 1fr); } }
.stock-card { background: var(--white); box-shadow: var(--shadow); }
.stock-card .photo img { aspect-ratio: 3 / 4; object-fit: cover; }
.stock-card-body { padding: 1.25rem 1.25rem 1.5rem; }
.stock-card-body h3 { margin-bottom: .4rem; }
.stock-card-body p { color: var(--ink-soft); font-size: 1rem; }
.range-list { display: grid; gap: .5rem 2rem; margin-top: 1.25rem; }
@media (min-width: 600px) { .range-list { grid-template-columns: 1fr 1fr; } }
.range-list li { padding-left: 1.4rem; position: relative; }
.range-list li::before { content: ""; position: absolute; left: 0; top: .95em; width: .6rem; height: 2px; background: var(--green); }
.hours { border-collapse: collapse; margin-top: 1rem; }
.hours td { padding: .5rem 1.5rem .5rem 0; border-bottom: 1px solid var(--line); }
.hours td:last-child { font-weight: 700; }

/* ------------------------------------------------------------ contact page */
.contact-blocks { display: grid; gap: 1.25rem; max-width: 720px; }
.contact-block { background: var(--white); border: 1px solid var(--line); padding: 1.75rem; border-radius: var(--radius); }
.contact-block--dairy { border-left: 6px solid var(--amber); }
.contact-block h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: .75rem; }
.contact-block .tel { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--navy-deep); text-decoration: none; }
.contact-block .tel:hover { text-decoration: underline; }
.contact-block dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.25rem; align-items: baseline; margin-top: .5rem; }
.contact-block dt { color: var(--ink-soft); }
.contact-block .small { font-size: .95rem; color: var(--ink-soft); margin-top: .75rem; }
.map-embed { width: 100%; height: 380px; border: 0; display: block; margin-top: 1.5rem; background: var(--grey); }

/* ------------------------------------------------------------ legal pages */
.legal { max-width: 760px; }
.legal h2 { font-size: 1.4rem; margin: 2rem 0 .75rem; }
.legal p + p, .legal ul { margin-top: .9rem; }
.legal li { list-style: disc; margin-left: 1.25rem; }
.page-head { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.breadcrumb { font-size: .9rem; color: var(--ink-soft); margin-bottom: 1rem; }
.breadcrumb a { color: var(--ink-soft); }

/* ------------------------------------------------------------ footer */
.footer { background: var(--grey); border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 4.5rem) 0 6rem; font-size: .95rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer h3 { font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-deep); margin-bottom: .75rem; }
.footer li { padding: .2rem 0; }
.footer p + p { margin-top: .6rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .875rem; }
@media (min-width: 900px) { .footer { padding-bottom: clamp(3rem, 6vw, 4.5rem); } }

/* ------------------------------------------------------------ sticky mobile CTA */
.sticky-call {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: block; text-align: center; padding: 1rem 1.25rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; text-decoration: none;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.15);
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.sticky-call--amber { background: var(--amber); color: var(--ink); }
.sticky-call--green { background: var(--green-text); color: var(--white); }
@media (min-width: 900px) { .sticky-call { display: none; } }

/* ==============================================================
   MOTION — reveals are hidden ONLY when JS has taken control
   (html.js) and motion is allowed (html.motion). Content is in the
   DOM and readable before any script runs. Reduced-motion and
   no-JS get the finished layout instantly.
   ============================================================== */
.js.motion [data-reveal] { opacity: 0; }
.js.motion [data-reveal="words"] .w, .js.motion [data-reveal="lines"] .ln { display: inline-block; overflow: hidden; vertical-align: top; }
.js.motion [data-reveal="words"] .w { padding-bottom: .08em; margin-bottom: -.08em; }
.js.motion [data-reveal="lines"] .ln { display: block; }
.js.motion [data-reveal="words"] .wi, .js.motion [data-reveal="lines"] .li { display: inline-block; transform: translateY(110%); }
.js.motion [data-reveal="words"], .js.motion [data-reveal="lines"] { opacity: 1; }

/* hero intro: words rise in, sub + CTAs follow */
.js.motion .hero-panel .hero-sub, .js.motion .hero-panel .btn-row { opacity: 0; }

/* parallax layers get a will-change hint only on desktop with motion */
@media (min-width: 768px) { .js.motion [data-parallax] { will-change: transform; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .hero-media .frame { transition: none; }
}