/* ============================================================
   v2 PREVIEW LAYER — applies the Oct 2026 design + psychographic
   review recommendations on top of the existing design system.
   Loaded after components.css; nothing here edits existing rules
   except the button hierarchy + measure cap at the bottom.
   ============================================================ */

:root {
  --v2-raspberry: #e35393;   /* brand "Raspberry Pink" from Brand Guidelines */
  --v2-ink: #151516;
  --v2-measure: 70ch;
}

/* ---------- HERO: full-bleed footage ---------- */
.hero2 {
  position: relative;
  min-height: clamp(520px, 78vh, 760px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--v2-ink);
  color: #fff;
}
.hero2__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.hero2__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(21,21,22,0) 0%, rgba(21,21,22,.04) 40%, rgba(21,21,22,.45) 72%, rgba(21,21,22,.78) 100%);
}
.hero2__inner {
  position: relative;
  padding-block: var(--space-16, 7rem) var(--space-10);
  text-align: left;
}
.hero2 h1 { max-width: 14ch; }
.hero2 h1 {
  text-shadow: 0 2px 8px rgba(0,0,0,.65), 0 10px 30px rgba(0,0,0,.5);
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  line-height: 1.05;
  margin: var(--space-3) 0 var(--space-4);
  color: #fff;
  text-wrap: balance;
}
.hero2 p {
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: rgba(255,255,255,.92);
  max-width: 52ch;
}
.hero2__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-6);
}
.eyebrow--onDark { color: #fbe1ad; text-shadow: 0 1px 4px rgba(0,0,0,.7); font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .hero2__video { display: none; }
  .hero2 { background: var(--v2-ink) url("../assets/v2/hero-arlington-poster.jpg") center/cover; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .hero2 { min-height: calc(100svh - 150px); max-height: 760px; }
  .hero2__inner { text-align: left; padding-top: 30vh; padding-bottom: var(--space-8); }
  .hero2__more { display: none; }
  .hero2 h1 { font-size: 2.2rem; max-width: 12ch; margin-inline: 0; }
  .hero2 p { margin-inline: 0; }
  .hero2__actions { justify-content: flex-start; }
  .hero2 p { font-size: 1rem; }
  .hero2__scrim { background: linear-gradient(180deg, rgba(21,21,22,0) 0%, rgba(21,21,22,0) 38%, rgba(21,21,22,.55) 62%, rgba(21,21,22,.85) 100%); }
  .hero2__actions { gap: var(--space-2); }
  .hero2__actions .btn { flex: 1 1 45%; }
}
@media (max-width: 640px) {
  .hero2 h1, .hero2 p { margin-inline: auto; }
  .hero2__actions { justify-content: center; }
  .hero2__inner { padding-inline: var(--space-4); }
  .hero2__actions .btn { flex: 1 1 100%; }
}

/* ---------- SOCIAL PROOF STRIP ---------- */
.proof { background: #fff; border-bottom: 1px solid rgba(21,21,22,.08); }
.proof__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-5);
}
.proof__item { display: grid; gap: 2px; text-align: center; }
.proof__item strong { font-size: 1.25rem; color: var(--v2-ink); letter-spacing: -.01em; }
.proof__item span { font-size: .9rem; color: #56535a; }
.proof__item a { color: #007241; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 820px) {
  .proof__row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- SEASONAL TILES ---------- */
.season2 { background: var(--color-peach, #f4cfb2); padding-block: var(--space-12); }
.season2__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.tile {
  display: grid; grid-template-rows: auto 1fr;
  background: #fff;
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 0 rgba(21,21,22,.06), 0 10px 30px -18px rgba(21,21,22,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(21,21,22,.45); }
.tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.tile__body { padding: var(--space-5) var(--space-5) var(--space-6); }
.tile__tag {
  display: inline-block;
  font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #007241; background: #d0e0d7;
  padding: 4px 10px; border-radius: 999px;
}
.tile__tag--hot { color: #fff; background: var(--v2-raspberry); }
.tile h3 { margin: var(--space-3) 0 var(--space-2); font-size: 1.3rem; }
.tile p { color: #56535a; font-size: .95rem; margin: 0; }
@media (max-width: 900px) {
  .season2__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

/* ---------- FULL-BLEED PHOTO BAND ---------- */
.band2 { position: relative; min-height: 520px; display: grid; align-items: end; overflow: hidden; background: var(--v2-ink); }
.band2__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.band2__caption {
  position: relative;
  margin: var(--space-8) auto var(--space-10);
  width: min(92%, 640px);
  background: rgba(21,21,22,.82);
  color: #fff;
  padding: var(--space-6);
  border-radius: var(--radius-lg, 20px);
  backdrop-filter: blur(6px);
}
.band2__caption h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); margin: var(--space-2) 0 var(--space-2); }
.band2__caption p { color: rgba(255,255,255,.88); margin-bottom: var(--space-5); }

/* ---------- REWARDS / APP BAND ---------- */
.rewards2 { background: #fff; padding-block: var(--space-12); }
.rewards2__inner {
  display: grid; grid-template-columns: minmax(240px, 380px) 1fr;
  gap: var(--space-10); align-items: center;
}
.rewards2__media img { width: 100%; border-radius: var(--radius-lg, 20px); box-shadow: 0 20px 50px -24px rgba(21,21,22,.5); }
.rewards2__copy h2 { font-size: var(--text-2xl); margin: var(--space-2) 0 var(--space-4); }
.rewards2__copy p { color: #56535a; max-width: var(--v2-measure); }
.rewards2__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
@media (max-width: 820px) {
  .rewards2__inner { grid-template-columns: 1fr; }
  .rewards2__media { max-width: 320px; margin-inline: auto; }
  .rewards2__copy { text-align: center; }
  .rewards2__copy p { margin-inline: auto; }
  .rewards2__actions { justify-content: center; }
}

/* ---------- BUTTON RULE (design review §3.3) ----------
   gold  = navigate (dark text)      → .btn--primary (unchanged)
   pink  = transact / order          → .btn--transact (new)
   outline = secondary               → .btn--outline (unchanged)  */
.btn--transact { background: var(--v2-raspberry); color: var(--v2-ink); }
.btn--transact:hover { background: #ee6aa6; transform: translateY(-2px) scale(1.03); box-shadow: var(--shadow-md); }
.hero2 .btn--outline, .band2 .btn--outline { border-color: #fff; color: #fff; }

/* ---------- MEASURE CAP (design review §3.7) ---------- */
main p, .why-band__manifesto, .text-muted { max-width: var(--v2-measure); }
.section-head--full p, .proof__item span, .tile p { margin-inline: auto; }

/* ---------- Eyebrows: deeper pink on light panels (§3.6 / #7) ---------- */
.season2 .eyebrow, .rewards2 .eyebrow { color: #b8266b; font-size: .85rem; }

/* ---------- Rewards facts + store badges ---------- */
.rewards2__facts { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-4) var(--space-6); justify-content: start; }
.rewards2__facts li { display: grid; gap: 2px; }
.rewards2__facts strong { font-size: 1.35rem; color: #007241; letter-spacing: -.01em; }
.rewards2__facts span { font-size: .9rem; color: #56535a; }
.storebadge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #151516; color: #fff; text-decoration: none;
  padding: 8px 16px 8px 12px; border-radius: 12px; line-height: 1.05;
  border: 2px solid #151516; transition: transform .15s ease, background .15s ease;
}
.storebadge:hover { transform: translateY(-2px); background: #2a2a2c; }
.storebadge span { display: grid; font-weight: 800; font-size: 1rem; }
.storebadge small { font-weight: 500; font-size: .68rem; letter-spacing: .02em; opacity: .85; }
.rewards2__actions { align-items: center; }
@media (max-width: 820px) {
  .rewards2__facts { grid-template-columns: 1fr 1fr 1fr; justify-content: center; }
}
@media (max-width: 520px) {
  .rewards2__facts { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ---------- Store pages: owner photo, good-to-know, notify ---------- */
.owner-photo { width: 100%; height: auto; border-radius: var(--radius-lg, 20px); margin-bottom: var(--space-5); display: block; }
.gtk { background: #fff; border-block: 1px solid rgba(21,21,22,.08); }
.gtk__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); padding-block: var(--space-5); }
.gtk__item { display: flex; gap: 12px; align-items: flex-start; }
.gtk__icon { font-size: 1.4rem; line-height: 1; margin-top: 2px; }
.gtk__item div { display: grid; gap: 2px; }
.gtk__item strong { color: var(--v2-ink); font-size: .98rem; }
.gtk__item span:not(.gtk__icon) { font-size: .85rem; color: #56535a; }
@media (max-width: 820px) { .gtk__row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .gtk__row { grid-template-columns: 1fr; } }
.notify { background: var(--color-peach, #f4cfb2); padding-block: var(--space-10); }
.notify__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: center; }
.notify h2 { font-size: var(--text-xl); margin: var(--space-2) 0 var(--space-3); }
.notify__form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.notify__form input[type=email] { flex: 1 1 220px; padding: 14px 16px; border-radius: 999px; border: 2px solid rgba(21,21,22,.15); font: inherit; background: #fff; }
.notify__ok { flex-basis: 100%; font-weight: 700; color: #007241; margin: 0; }
@media (max-width: 820px) { .notify__inner { grid-template-columns: 1fr; } }
/* Header: demote Franchising to a quiet text link (design review #8) */
.nav__franchise { background: transparent !important; border-color: transparent !important; color: #fff !important; text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.nav__franchise:hover, .nav__franchise:focus-visible { background: transparent !important; color: #fbe1ad !important; }
/* Menu hero band */
.menu-hero { position: relative; min-height: 340px; display: grid; align-items: end; overflow: hidden; background: var(--v2-ink); color: #fff; }
.menu-hero video, .menu-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.menu-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,21,22,.5) 0%, rgba(21,21,22,.15) 50%, rgba(21,21,22,0) 100%); }
.menu-hero__img { object-position: center 60%; }
.menu-hero .container { position: relative; z-index: 1; padding-block: var(--space-10) var(--space-8); }
.menu-hero h1 { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); margin: var(--space-2) 0 var(--space-3); }
.menu-hero p { color: rgba(255,255,255,.92); text-shadow: 0 1px 4px rgba(0,0,0,.6); max-width: 52ch; }
.handoff { background: #fff; border-bottom: 1px solid rgba(21,21,22,.08); }
.handoff__row { display: grid; justify-items: center; text-align: center; gap: var(--space-4); padding-block: var(--space-6); }
.handoff__row p { margin: 0; color: #56535a; max-width: 60ch; font-size: 1.05rem; }
/* Careers perks / catering tiers */
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
.perk { background: #fff; border: 1px solid rgba(21,21,22,.08); border-radius: var(--radius-lg, 20px); padding: var(--space-5); }
.perk h3 { font-size: 1.05rem; margin: 0 0 var(--space-2); }
.perk p { color: #56535a; font-size: .95rem; margin: 0; }
@media (max-width: 820px) { .perks { grid-template-columns: 1fr; } }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-block: var(--space-8); }
.tier { background: #fff; border-radius: var(--radius-lg, 20px); overflow: hidden; border: 1px solid rgba(21,21,22,.08); display: grid; grid-template-rows: auto 1fr auto; }
.tier img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.tier__body { padding: var(--space-5); }
.tier__body h3 { font-size: 1.15rem; margin: 0 0 var(--space-2); }
.tier__body p { color: #56535a; font-size: .95rem; margin: 0; }
.tier__body .tile__tag { margin-bottom: var(--space-3); }
.tier__foot { padding: 0 var(--space-5) var(--space-5); }
@media (max-width: 820px) { .tiers { grid-template-columns: 1fr; } }
/* Locations: use my location */
.nearme { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-6); }
.nearme p { margin: 0; color: #56535a; }
.location-card--nearest { outline: 3px solid var(--v2-raspberry); outline-offset: 2px; }
.nearme__badge { display: inline-block; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--v2-raspberry); padding: 4px 10px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }

.cater-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: center; }
.cater-ez { flex-basis: 100%; width: 100%; text-align: center; margin: var(--space-4) 0 0; font-size: .8rem; color: #7a7974; display: flex; gap: 6px; justify-content: center; align-items: center; }
.cater-ez img { height: 13px; width: auto; opacity: .7; }

/* ---------- Sitewide button consistency (matches homepage hero) ----------
   pink  (Raspberry, dark ink text) = Order / transact
   gold  (dark ink text)            = navigate / find / directions / catering
   outline is retired as a primary style; only ghost links in the header stay. */
.btn--order, .btn--order:hover, .btn--transact, .btn--transact:hover {
  background: var(--v2-raspberry); color: var(--v2-ink); font-weight: 800;
}
.btn--order:hover, .btn--transact:hover { background: #ee6aa6; }
.btn--order.btn--ghost-nav { color: #fff; } /* header pill keeps white text on teal bar */
.btn--outline:not(.nav__franchise) {
  background: var(--color-gold); border-color: var(--color-gold); color: var(--v2-ink); font-weight: 800;
}
.btn--outline:not(.nav__franchise):hover { background: var(--color-gold-light); border-color: var(--color-gold-light); color: var(--v2-ink); }
.btn--secondary { background: var(--color-gold); color: var(--v2-ink); }
.btn--secondary:hover { background: var(--color-gold-light); }
/* Order Online floating side tab + top ribbon keep pink */
.notify__inner, .notify__inner > * { min-width: 0; }
.notify__form input[type=email] { max-width: 100%; box-sizing: border-box; }

/* ---------- Dark-mode safety: v2 sections use fixed light surfaces, so pin their text to ink ---------- */
.season2, .season2 h2, .season2 .hl, .tile, .tile h3, .rewards2, .rewards2 h2, .rewards2__facts strong,
.gtk, .gtk strong, .notify, .notify h2, .handoff, .perk, .perk h3, .tier, .tier h3 { color: var(--v2-ink); }
.season2 h2 .hl--magenta, .rewards2 h2 .hl--teal { color: inherit; }
.season2 h2 .hl--magenta { color: #e35393; }
.rewards2 h2 .hl--teal { color: #00a59d; }
.tile p, .rewards2__copy p, .rewards2__facts span, .gtk__item span:not(.gtk__icon), .notify p { color: #56535a; }
.season2 .eyebrow, .rewards2 .eyebrow, .notify .eyebrow { color: #b8266b; }

@media (max-width: 700px) { .hero2__inner { text-align: left; } .hero2 h1, .hero2 p { margin-left: 0 !important; margin-right: 0 !important; text-align: left; } .hero2__actions { justify-content: flex-start; } }

/* stronger copy backing for bright scenes (white bow-tie wall) */
@media (min-width: 701px) { .hero2__scrim { background: linear-gradient(90deg, rgba(21,21,22,.55) 0%, rgba(21,21,22,.25) 50%, rgba(21,21,22,0) 100%), linear-gradient(180deg, rgba(21,21,22,0) 0%, rgba(21,21,22,.05) 40%, rgba(21,21,22,.55) 72%, rgba(21,21,22,.88) 100%); } }
@media (max-width: 700px) { .hero2__scrim { background: linear-gradient(180deg, rgba(21,21,22,0) 0%, rgba(21,21,22,0) 36%, rgba(21,21,22,.6) 58%, rgba(21,21,22,.9) 100%); } }

/* ---------- PHONES: show the FULL video frame (no cropping), copy below on brand teal ---------- */
@media (max-width: 700px) {
  .hero2 { display: block; min-height: 0; max-height: none; background: #00a59d; }
  .hero2__video { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #151516; }
  .hero2__scrim { display: none; }
  .hero2__inner { padding: var(--space-6) var(--space-4) var(--space-8) !important; text-align: left; }
  .hero2 h1 { font-size: 2rem; max-width: 14ch; text-shadow: none; color: #fff; }
  .hero2 p { text-shadow: none; color: rgba(255,255,255,.95); }
  .hero2__more { display: inline; }
  .eyebrow--onDark { text-shadow: none; color: #fbe1ad; }
  .hero2__actions .btn { flex: 1 1 100%; }
}

@media (max-width: 700px) { .hero2 { padding: 0 !important; } }

@media (max-width: 700px) { .hero2 h1 { max-width: none; font-size: clamp(1.45rem, 7vw, 1.9rem); line-height: 1.12; } .hero2 h1 br { display: inline; } }

@media (max-width: 700px) { .hero2 h1 { font-size: clamp(1.3rem, 6.1vw, 1.75rem); letter-spacing: -0.01em; white-space: nowrap; } }

@media (max-width: 700px) { .hero2 h1 { font-size: clamp(1.15rem, 5.35vw, 1.6rem); } }

@media (max-width: 700px) { .hero2 .hero2__inner h1 { font-size: clamp(1.15rem, 5.35vw, 1.6rem) !important; white-space: nowrap; letter-spacing: -0.01em; max-width: none !important; } }


/* ---------- Sitewide photo framing (carries the homepage's white-frame look through every page) ---------- */
.frame { border: 6px solid #fff; border-radius: var(--radius-xl, 24px); box-shadow: var(--shadow-lg); overflow: hidden; background: #fff; }
.frame--pink { border-color: #e55395; }
.frame--tilt-l { transform: rotate(-1.2deg); }
.frame--tilt-r { transform: rotate(1.2deg); }
.tile.frame:hover { transform: translateY(-4px) rotate(0deg); }
img.frame { display: block; }
@media (max-width: 720px) { .frame--tilt-l, .frame--tilt-r { transform: none; } .frame { border-width: 4px; } }

/* ---------- Rewards points card ---------- */
.pts-card { position: relative; background: #151516 url("../assets/img/patterns/pinstripe.png") ; background: #151516; color: #fff; padding: var(--space-8) var(--space-6) var(--space-6); text-align: center; display: grid; justify-items: center; gap: var(--space-2);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 14px, rgba(255,255,255,0) 14px 32px); }
.pts-card__badge { width: auto; height: 72px; object-fit: contain; margin-bottom: var(--space-2); }
.pts-card__hero { display: grid; justify-items: center; }
.pts-card__num { font-size: clamp(5rem, 11vw, 7.5rem); line-height: .9; font-weight: 900; color: var(--color-gold, #f6b333); letter-spacing: -.03em; text-shadow: 0 6px 0 rgba(0,0,0,.35); }
.pts-card__label { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #fff; margin-top: var(--space-2); }
.pts-card__sub { font-size: 1rem; color: #fbe1ad; font-weight: 600; }
.pts-card__plus { width: 44px; height: 44px; border-radius: 50%; background: #e55395; color: #151516; font-weight: 900; font-size: 1.6rem; line-height: 44px; margin: var(--space-3) 0; }
.pts-card__earn { font-size: 1.25rem; color: #fff; }
.pts-card__earn strong { color: #e55395; font-size: 1.6rem; font-weight: 900; }
.pts-card__foot { margin-top: var(--space-4); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.7); }
@media (min-width: 821px) { .rewards2__inner { grid-template-columns: minmax(260px, 400px) 1fr; } }
@media (max-width: 820px) { .rewards2__media { max-width: 360px; } }

@media (max-width: 820px) { .rewards2__facts { display: none; } }

/* ---------- Frame consistency: photo + video containers that were unframed ---------- */
.cat-video, .catering-split__media, .combo-card__media, .why-vs__card--old, .hero__feature {
  border: 6px solid #fff !important; border-radius: var(--radius-xl, 24px) !important; box-shadow: var(--shadow-lg) !important; overflow: hidden; background-clip: padding-box;
}
.catering-split__media.frame--tilt-l { transform: rotate(-1.2deg); }
@media (max-width: 720px) { .cat-video, .catering-split__media, .combo-card__media { border-width: 4px !important; } }

/* menu tiles: always two across on phones, regardless of how narrow the viewport is */
@media (max-width: 640px) { .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ---------- PHONE HERO, lean version: video is the hero, copy is a caption ---------- */
@media (max-width: 700px) {
  .hero2__video { aspect-ratio: 3 / 2; object-fit: cover; object-position: center; }   /* taller band, trims ~11% off each side */
  .hero2__inner { padding: var(--space-5) var(--space-4) var(--space-6) !important; }
  .hero2 .eyebrow--onDark { font-size: .95rem; }
  .hero2 h1 { margin: var(--space-2) 0 var(--space-4) !important; }
  .hero2 p { display: none; }                                   /* the paragraph moves off the hero on phones */
  .hero2__actions { gap: var(--space-2); }
  .hero2__actions .btn { flex: 1 1 calc(50% - var(--space-2)); padding-inline: var(--space-3); font-size: .95rem; }
  body.hero-visible .order-fab { opacity: 0; pointer-events: none; transition: opacity .25s; }  /* floating tab waits until the hero scrolls away */
}

/* Floating Order Online tab: lighter pink sitewide, dark text for contrast */
.order-fab { background: #ff7dac !important; color: #151516 !important; }
.order-fab:hover { background: #e55395 !important; color: #fff !important; }

/* ---------- Hover policy: motion = "this is clickable". One effect, one speed, only on links. ---------- */
.link-media { display: block; }
.link-media img, a.cat-card .cat-card__media img, .tile img, .link-media video { transition: transform 250ms ease; }
@media (hover: hover) {
  .link-media:hover img, a.cat-card:hover .cat-card__media img, .tile:hover img { transform: scale(1.04); }
  .tile:hover { transform: none; box-shadow: 0 1px 0 rgba(21,21,22,.06), 0 10px 30px -18px rgba(21,21,22,.35); } /* card stays put; image does the work */
  .tile.frame:hover { transform: none; }
  .frame--tilt-l.tile:hover { transform: rotate(-1.2deg); } .frame--tilt-r.tile:hover { transform: rotate(1.2deg); }
  .menu-tile:hover .menu-tile__media img { transform: none; }  /* menu tiles aren't links — no false signal */
}
.link-media:active img, a.cat-card:active .cat-card__media img, .tile:active img { transform: scale(0.98); transition-duration: 120ms; } /* tap feedback on touch */
@media (prefers-reduced-motion: reduce) { .link-media img, a.cat-card .cat-card__media img, .tile img, .menu-tile__media img { transition: none !important; transform: none !important; } }

/* step-inside photos: stacked full-width on phones for impact */
@media (max-width: 700px) { .photo-duo, .photo-duo--framed { grid-template-columns: 1fr !important; gap: var(--space-5) !important; } .photo-duo .photo-frame { width: 100% !important; aspect-ratio: 4 / 3; } .photo-duo .photo-frame img { width: 100%; height: 100%; object-fit: cover; } }