/* ===================================================================
   Chilly Cow — mockup styles
   Direction: Saturday at the Park (Bricolage 800 + Plus Jakarta Sans,
   butter field + navy break + strawberry accent). Photos are placeholder
   color blocks at this stage; final photography per Conventions 19-22.
   =================================================================== */

/* ===== Tokens ===== */
:root {
  --butter:        #FAEFC9;
  --butter-soft:   #FCF5DC;
  --navy:          #1E2D55;
  --navy-soft:     #2A3A66;
  --strawberry:    #E66075;
  --strawberry-deep: #C84A60;
  --ink:           #1E2D55;
  --ink-soft:      #4A5878;
  --rule:          rgba(30, 45, 85, 0.12);
  --walnut:        #1F1A14;
  --vellum:        #F4ECDC;
  --cw-amber:      #C68B4A;

  --container:     1240px;
  --gutter:        1.5rem;

  --display:       'Bricolage Grotesque', system-ui, sans-serif;
  --body:          'Plus Jakarta Sans', system-ui, sans-serif;

  --ease-out:      cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Reset / base ===== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 8rem;
}
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--butter);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* ===== Cow mark — color contexts ===== */
.cow {
  --cow-body: var(--navy);
  --cow-detail: var(--butter);
  --cow-accent: var(--strawberry);
  --cow-dark: var(--navy);
  --cow-eye: var(--butter);
  --cow-snout: var(--butter);
  display: inline-block;
}
.cow--on-navy {
  --cow-body: var(--butter);
  --cow-detail: var(--navy);
  --cow-accent: var(--strawberry);
  --cow-dark: var(--navy);
  --cow-eye: var(--butter);
  --cow-snout: var(--butter);
}
.cow--sm  { width: 36px;  height: 33px; }
.cow--md  { width: 70px;  height: 64px; }
.cow--lg  { width: 154px; height: 141px; }
@media (min-width: 720px) {
  .cow--lg { width: 196px; height: 180px; }
}

/* ===== Sevra showcase band ===== */
.sevra-band {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--walnut);
  color: var(--vellum);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}
.sevra-band__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.5rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.sevra-band__left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}
.mark {
  display: block;
  flex-shrink: 0;
}
.mark--band {
  /* Width/height set on the SVG element directly (24px). flex-shrink:0
     prevents the band's flex layout from squeezing it on narrow widths. */
}
.sevra-band__text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}
.sevra-band__text em { font-style: italic; color: var(--cw-amber); }
.sevra-band__sep { opacity: 0.4; }
.sevra-band__back {
  text-decoration: none;
  opacity: 0.85;
  flex-shrink: 0;
  white-space: nowrap;
}
.sevra-band__back:hover { opacity: 1; }
@media (max-width: 600px) {
  .sevra-band__text > span:not(:first-child):not(.sevra-band__sep) { display: none; }
  .sevra-band__text .sevra-band__sep:nth-of-type(1) { display: none; }
}

/* ===== Site topbar ===== */
.topbar {
  position: sticky;
  top: 56px; /* below sevra band (8px padding × 2 + 40px Sd mark = 56px) */
  z-index: 50;
  background: var(--butter);
  border-bottom: 1px solid var(--rule);
}
.topbar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0.875rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--ink);
}
.topbar__wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.topbar__nav {
  display: flex;
  gap: 1.75rem;
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.9375rem;
}
.topbar__nav a {
  text-decoration: none;
  color: var(--ink);
  position: relative;
  padding: 0.25rem 0;
}
.topbar__nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--strawberry);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.topbar__nav a:hover::after { transform: scaleX(1); }

@media (max-width: 560px) {
  .topbar__nav { gap: 1rem; font-size: 0.875rem; }
  .topbar__wordmark { font-size: 1.125rem; }
}

/* ===== Common: eyebrow + button ===== */
.eyebrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--strawberry-deep);
  margin: 0 0 0.875rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.875rem 1.5rem;
  border-radius: 999px;
  border: none;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.btn--accent {
  background: var(--strawberry);
  color: white;
  box-shadow: 0 1px 3px rgba(30,45,85,0.15);
}
.btn--accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(230,96,117,0.4);
}

/* ===== Hero (type-led, with full-bleed side photos and butter-mask fade) ===== */
.hero {
  position: relative;
  background: var(--butter);
  padding: 5rem var(--gutter) 6rem;
  overflow: hidden;
  /* Hero fills the visible viewport on first load — no peek of the next
     section at the bottom. The 116px subtraction accounts for the sticky
     sevra band (56px = 8px padding × 2 + 40px Sd mark) plus topbar (~60px)
     which sit above the hero. dvh adjusts dynamically as mobile browser
     chrome shows/hides; vh is the fallback for older browsers. */
  min-height: calc(100vh - 116px);
  min-height: calc(100dvh - 116px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__inner {
  position: relative;
  z-index: 5;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.hero__inner .cow {
  margin-bottom: 1.5rem;
}
.hero__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.5rem, 11vw, 8rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 1rem;
}
.hero__tagline {
  font-family: var(--body);
  font-weight: 500;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--ink-soft);
  margin: 0 0 2.25rem;
}

/* === Side photos === Full-height photo bands on left and right, masked
   with a layered gradient that fades them to butter horizontally toward the
   centered type and vertically toward the section boundary below. */
.hero__photos {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
}
.hero__photo {
  position: relative;
  flex: 1;
  background-color: var(--butter);
  background-image: var(--bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Per-side background-position controls which part of the portrait 2:3 photo
   is visible after `cover` crops top/bottom in the wider hero photo container.
   Both photos sit at Y=30% (upper portion) — cone-in-sky on the left, faces +
   cones on the right. X position doesn't affect a portrait-in-landscape cover
   crop, but the keyword form documents intent: subject on the outer edge.

   Mask: horizontal fade-toward-center (existing) + vertical fade-out at bottom
   (new). `mask-composite: intersect` means the photo is visible only where
   BOTH masks are visible. The bottom fade dissolves the photo into butter at
   the section boundary so it doesn't cut off mid-subject — gives a clean
   "hard stop" feel rather than abrupt edge into the reveal photo below.

   The right photo's source is composed right-weighted on purpose — the empty
   golden bokeh on the left sits in the mask's transparent zone, so the kids
   land in the visible territory without us having to anchor the photo. */
.hero__photo--left {
  background-position: left 30%;
  -webkit-mask-image:
    linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 65%),
    linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%);
          mask-image:
    linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 65%),
    linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  animation: hero-photo-zoom 22s ease-in-out infinite alternate;
}
.hero__photo--right {
  background-position: right 40%;
  -webkit-mask-image:
    linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 65%),
    linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%);
          mask-image:
    linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 65%),
    linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  animation: hero-photo-zoom 26s ease-in-out infinite alternate;
  animation-delay: -8s;
}

/* Subtle Ken Burns zoom — scale loops slowly so the hero feels alive
   without becoming distracting. Different timings per side keeps them
   from feeling mechanically synced. */
@keyframes hero-photo-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__photo--left,
  .hero__photo--right { animation: none; }
}

.hero__photo-content {
  position: absolute;
  inset: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}
.hero__photo--left .hero__photo-content {
  align-items: flex-start;
  text-align: left;
}
.hero__photo--right .hero__photo-content {
  align-items: flex-end;
  text-align: right;
}
.hero__photo-content .photo__label {
  background: rgba(252, 245, 220, 0.92);
  color: var(--ink);
  margin-bottom: 0.625rem;
}
.hero__photo-content .photo__intent {
  background: rgba(252, 245, 220, 0.88);
  font-size: 0.8125rem;
  padding: 0.625rem 0.875rem;
  max-width: 26ch;
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  font-style: italic;
}

@media (max-width: 700px) {
  /* Hide hero photos on mobile entirely. The portrait source photos in
     tall narrow strips never landed cleanly — every adjustment traded
     one problem for another. Mobile hero leans into the calm-confident
     voice with butter + cow + wordmark + tagline + button. The desktop
     hero does the warmth-establishing work; mobile doesn't need to repeat it. */
  .hero__photos { display: none; }
}

@media (min-width: 720px) {
  .hero { padding: 7rem var(--gutter) 8rem; }
}

/* ===== Photo placeholder base ===== */
.photo {
  position: relative;
  background: linear-gradient(135deg, #d8d2bf 0%, #c4bba0 100%);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  min-height: 200px;
  /* Real photo loads via inline --bg-image → covers the placeholder gradient.
     Photo missing → placeholder cross-hatch + gradient still show. */
  background-image:
    var(--bg-image, none),
    repeating-linear-gradient(45deg,
      rgba(30,45,85,0.04) 0px,
      rgba(30,45,85,0.04) 1px,
      transparent 1px,
      transparent 14px),
    linear-gradient(135deg, #d8d2bf 0%, #c4bba0 100%);
  background-size: cover, auto, auto;
  background-position: center, top left, top left;
  background-repeat: no-repeat, repeat, no-repeat;
}
.photo__label {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--ink);
  background: var(--butter-soft);
  padding: 0.375rem 0.625rem;
  border-radius: 4px;
  align-self: flex-start;
}
.photo__intent {
  font-family: var(--body);
  font-style: italic;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink);
  background: rgba(252, 245, 220, 0.82);
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  align-self: flex-end;
  max-width: 38ch;
}

/* ===== Reveal photo (parallax) ===== */
.reveal-photo {
  background: var(--butter);
}
.reveal-photo__frame {
  /* Full-width edge-to-edge — no container max-width, no rounded corners */
  width: 100%;
  height: clamp(360px, 60vw, 640px);
  position: relative;
  overflow: hidden;
  /* Hard top edge — meets the hero's already-faded bottom without
     stacking two fade zones on top of each other (which read as
     visible banding). Soft bottom only, dissolving into the Flavors
     section's butter background. */
  -webkit-mask-image: linear-gradient(to bottom,
    black 0%, black 88%, transparent 100%);
          mask-image: linear-gradient(to bottom,
    black 0%, black 88%, transparent 100%);
}
.photo--reveal {
  position: absolute;
  inset: -18% 0;
  min-height: 0;
  border-radius: 0;
  /* parallax translate set by JS via --parallax-y, gated by reduced-motion */
  transform: translateY(var(--parallax-y, 0));
  will-change: transform;
}

/* ===== Flavors ===== */
.flavors {
  background: var(--butter);
  padding: 5rem var(--gutter);
}
.flavors__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.flavors__header {
  text-align: center;
  margin-bottom: 3rem;
}
.flavors__heading {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.875rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
  margin-inline: auto;
}
.flavors__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* Mobile: explicit 2-column grid with tighter gap. The 260px minmax above
   forces single column under ~580px wide, which makes the 12-flavor list
   scroll forever on phones. 2 columns halves page length without losing
   readability — the photos are still big enough to identify each flavor,
   and the strawberry outline on the three classics actually reads stronger
   at smaller scale (the 4px offset is more proportional to the photo). */
@media (max-width: 700px) {
  .flavors__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  /* Reduce navy break photo container height on mobile. Default 60vh
     makes the container very portrait (~390×480) which forces cover to
     crop ~54% of horizontal content from the landscape source photos,
     pushing in tight on subjects. 40vh shifts the container shape closer
     to landscape, letting cover keep ~70% of the photo width visible. */
  .navy-break__photo {
    min-height: 40vh;
  }
}
.flavor {
  display: flex;
  flex-direction: column;
}
.flavor .photo {
  aspect-ratio: 4 / 3;
  min-height: 0;
  margin-bottom: 1rem;
  transition:
    transform 350ms var(--ease-out),
    box-shadow 350ms var(--ease-out);
}
/* Small "Always" badge on the three classics — sits between photo and name,
   styled in the same uppercase-tracked register as section eyebrows but
   slightly smaller, so it reads as a caption-level signal that this card
   is permanent without a copy line having to explain it. */
.flavor__tag {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--strawberry-deep);
  margin: 0 0 0.375rem;
}
.flavor__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  color: var(--ink);
  transition: color 220ms var(--ease-out);
}

/* Hover only on actual hover-capable devices — touch screens trigger :hover
   on tap and leave the card stuck in the hovered state, which looks broken.
   The scoop lifts and zooms slightly (like it's being offered forward) and
   the flavor name picks up the strawberry accent — same color cue the
   topbar nav uses, so it reads as part of a shared brand language. */
@media (hover: hover) {
  .flavor:hover .photo {
    transform: scale(1.04);
    box-shadow: 0 12px 28px rgba(30, 45, 85, 0.18);
  }
  .flavor:hover .flavor__name {
    color: var(--strawberry);
  }
}
.flavor__desc {
  font-family: var(--body);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 0;
}

/* The three classics carry a thin strawberry outline around the photo —
   pairs with the "Always" tag below to make permanence read at a glance,
   even when the rest of the page is scrolling past. Outline-offset keeps
   it clear of the photo's own edge so it reads as a frame, not a border. */
.flavor--classic .photo {
  outline: 3px solid var(--strawberry);
  outline-offset: 4px;
}

/* ===== Navy break ===== */
.navy-break {
  background: var(--navy);
  color: var(--butter);
  position: relative;
  min-height: 60vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  overflow: hidden;
}
.navy-break__photo {
  position: relative;
  min-height: 60vh;
  /* overflow:hidden clips the photo's parallax headroom (-18% inset)
     to this box so it doesn't bleed into the adjacent overlay on
     mobile where photo and quote stack vertically. */
  overflow: hidden;
}
.navy-break__photo .photo {
  position: absolute;
  /* -18% top/bottom = parallax headroom matching the reveal photo.
     Translation set by JS via --parallax-y, gated by reduced-motion. */
  inset: -18% 0;
  border-radius: 0;
  background-image:
    var(--bg-image, none),
    repeating-linear-gradient(45deg,
      rgba(250,239,201,0.04) 0px,
      rgba(250,239,201,0.04) 1px,
      transparent 1px,
      transparent 14px),
    linear-gradient(135deg, #2A3A66 0%, #18233F 100%);
  background-size: cover, auto, auto;
  background-position: center 35%, top left, top left;
  background-repeat: no-repeat, repeat, no-repeat;
  min-height: 0;
  transform: translateY(var(--parallax-y, 0));
  will-change: transform;
}
.navy-break__photo .photo__label {
  background: rgba(250,239,201,0.92);
  color: var(--navy);
}
.navy-break__photo .photo__intent {
  background: rgba(30,45,85,0.85);
  color: var(--butter);
}
.navy-break__overlay {
  padding: 4rem var(--gutter);
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--navy);
}
.navy-break__line {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 24ch;
  margin: 0;
  color: var(--butter);
}
.navy-break__line::first-letter,
.navy-break__quote::first-letter {
  /* leave default; accent only via class below */
}
.navy-break__overlay--quote .navy-break__quote {
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  line-height: 1.3;
  max-width: 30ch;
  margin: 0 0 1rem;
  color: var(--butter);
}
.navy-break__overlay--quote .navy-break__quote::before { content: ''; }
.navy-break__overlay--quote .navy-break__attrib {
  font-family: var(--body);
  font-size: 0.9375rem;
  color: var(--strawberry);
  margin: 0;
  letter-spacing: 0.02em;
}

@media (min-width: 880px) {
  .navy-break {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: 1fr;
  }
  .navy-break__photo { min-height: 60vh; }
  .navy-break__overlay { padding: 6rem 3rem; }

  /* Mirror-flip break #2: navy-left, photo-right.
     Keeps the photo as the dominant column on both breaks while
     swapping which side carries which, so the page reads with
     alternating rhythm rather than as two stacked stripes. */
  .navy-break--2 {
    grid-template-columns: 1fr 1.2fr;
  }
  .navy-break--2 .navy-break__photo {
    grid-column: 2;
  }
  .navy-break--2 .navy-break__overlay {
    grid-column: 1;
    grid-row: 1;
  }
}

/* ===== Story ===== */
.story {
  background: var(--butter);
  padding: 5rem var(--gutter);
}
.story__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
.story__heading {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  color: var(--ink);
  max-width: 18ch;
}
.story__copy p {
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 1rem;
  max-width: 56ch;
}
.story__photo .photo {
  aspect-ratio: 4 / 5;
  /* Subtle Ken Burns: photo holds at 1.0 until the section enters view,
     then scales slowly to 1.05 over five seconds. Pairs with the
     kitchen-process subject — implies the churn is running.
     Outer .story__photo has overflow:hidden so the frame stays fixed
     size; only the photo content inside zooms. */
  transform: scale(1);
  transition: transform 5000ms var(--ease-out);
}
.story__photo {
  overflow: hidden;
  border-radius: 8px;
}
.story__photo.is-revealed .photo {
  transform: scale(1.05);
}

@media (min-width: 880px) {
  .story__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
  }
}

/* ===== Visit ===== */
.visit {
  background: var(--butter);
  padding: 5rem var(--gutter) 6rem;
}
.visit__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.visit__header {
  text-align: center;
  margin-bottom: 3rem;
}
.visit__heading {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 auto;
  color: var(--ink);
  max-width: 24ch;
}
.visit__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  margin-bottom: 3rem;
}
.visit__sub {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--strawberry-deep);
  margin: 0 0 0.75rem;
}
.visit__col p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}
.visit__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.visit__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px dotted var(--rule);
  gap: 1rem;
}
.visit__list li:last-child { border-bottom: none; }
.visit__list li span:last-child {
  font-weight: 500;
  color: var(--ink-soft);
}

.visit__photo {
  margin-bottom: 2rem;
}
.visit__photo .photo {
  aspect-ratio: 16 / 9;
}

.visit__map {
  aspect-ratio: 16 / 6;
  border-radius: 8px;
  overflow: hidden;
}
.visit__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (min-width: 720px) {
  .visit__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

/* ===== Footer (navy) ===== */
.site-footer {
  background: var(--navy);
  color: var(--butter);
  /* Top padding tightened — the cow + name + tagline header was removed
     because all three elements duplicate content from the topbar/hero. */
  padding: 3.5rem var(--gutter) 2.5rem;
}
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  text-align: center;
  margin-bottom: 3rem;
}
.site-footer__label {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--strawberry);
  margin: 0 0 0.5rem;
}
.site-footer__cols p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--butter);
  opacity: 0.9;
}
.site-footer__cols a {
  color: var(--butter);
  text-decoration: none;
  border-bottom: 1px dotted rgba(250, 239, 201, 0.4);
}
.site-footer__cols a:hover { border-bottom-color: var(--strawberry); }

/* ===== Sevra credit column (the 4th col, "Website by" + Sd glyph link) =====
   Sd renders as a 1-color glyph at icon size, matching the Instagram/Facebook
   social icons in the Follow column. The full Sd brand chip (rect + colored
   letterforms) lives on the Sevra topbar/showcase contexts; in a client footer
   credit, the Sd reads as a typographic glyph paired with the URL — same shape
   as Instagram/Facebook in the column to its left. */
.site-footer__credit-label {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--strawberry);
  margin: 0 0 0.5rem;
}

/* ===== Inline social/credit links (icon + text on one line) =====
   Shared pattern between Follow column (Instagram, Facebook) and the
   credit column (Sd · sevradesign.com). flex aligns the inline SVG to
   the text baseline; gap controls the icon→text spacing consistently. */
.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--butter) !important;
  text-decoration: none;
  border-bottom: 1px dotted rgba(250, 239, 201, 0.4) !important;
  padding-bottom: 1px;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.site-footer__social:hover {
  border-bottom-color: var(--strawberry) !important;
}
.social-icon {
  display: block;
  flex-shrink: 0;
}

.site-footer__copy {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--butter);
  opacity: 0.6;
  margin: 0;
  border-top: 1px solid rgba(250, 239, 201, 0.12);
  padding-top: 1.5rem;
}
.site-footer__copy a {
  color: var(--strawberry);
  text-decoration: none;
}

@media (min-width: 720px) {
  .site-footer__cols {
    grid-template-columns: repeat(4, 1fr);
    text-align: left;
  }
}

/* ===== Reveal-on-scroll (Convention #27) ===== */
.flavor,
.story__copy,
.story__photo,
.visit__col {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
}
.flavor.is-revealed,
.story__copy.is-revealed,
.story__photo.is-revealed,
.visit__col.is-revealed {
  opacity: 1;
  transform: none;
}
/* stagger flavors */
.flavor:nth-child(1) { transition-delay: 0ms; }
.flavor:nth-child(2) { transition-delay: 60ms; }
.flavor:nth-child(3) { transition-delay: 120ms; }
.flavor:nth-child(4) { transition-delay: 180ms; }
.flavor:nth-child(5) { transition-delay: 60ms; }
.flavor:nth-child(6) { transition-delay: 120ms; }
.flavor:nth-child(7) { transition-delay: 180ms; }
.flavor:nth-child(8) { transition-delay: 60ms; }
.flavor:nth-child(9) { transition-delay: 120ms; }
.flavor:nth-child(10) { transition-delay: 180ms; }
.flavor:nth-child(11) { transition-delay: 240ms; }
.flavor:nth-child(12) { transition-delay: 60ms; }

/* ===== Reduced motion (Convention #9) ===== */
@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;
  }
  .flavor,
  .story__copy,
  .story__photo,
  .visit__col {
    opacity: 1;
    transform: none;
  }
  .photo--reveal {
    transform: none !important;
  }
  .navy-break__photo .photo {
    transform: none !important;
  }
  .story__photo .photo {
    transform: none !important;
  }
}