/* One screen, one idea (owner 10/31: "when they're scrolling down, sometimes it doesn't fit perfectly. It's too long or
   too short"). Every homepage section is exactly one screen: the visible height under the sticky header, minus the
   phone's bottom Order bar. Packages is two screens. Scrolling settles on the nearest screen (proximity, never forced).
   Nothing is removed; only sizes and arrangement change. Plan: Claude Design canvas "HSF One Screen at a Time". */
:root { --nav-h: 65px; --bot-h: 79px; --fit-h: calc(100vh - var(--nav-h) - var(--bot-h)); }
@supports (height: 100svh) { :root { --fit-h: calc(100svh - var(--nav-h) - var(--bot-h)); } }
@media (min-width: 900px) { :root { --nav-h: 70px; --bot-h: 0px; } }
html { scroll-snap-type: none; scroll-padding-top: var(--nav-h); }   /* smooth-scroll 11/02: no page snapping */
@media (prefers-reduced-motion: reduce) { html { scroll-snap-type: none; } }

.fit-screen { box-sizing: border-box; min-height: var(--fit-h); display: flex; flex-direction: column; justify-content: center;
  scroll-snap-align: start; }
.fit-screen > .hd-wrap, .fit-screen > .container { width: 100%; }
.fit-screen.hd-section { padding-top: 18px; padding-bottom: 18px; }
@media (min-width: 900px) { .fit-screen.hd-section { padding-top: 28px; padding-bottom: 28px; } }
/* the page's scroll-padding already clears the header; a second offset here made snaps stop short */
#packages, #reviews, #how, #service-area, #faq, #team, #real-deliveries, #about, #n1, .hd-final { scroll-margin-top: 0; }

/* 1. First screen: students, 240+, #1 and the black bar together (phones too) */
.hd-hero.hd-hero { min-height: calc(var(--fit-h) - var(--hd-bar-h, 117px)); scroll-snap-align: start; }
.offer-band { scroll-snap-align: none; }

/* 2. #1 in the Southeast: exactly one screen; the map gives way so the button clears the phone's bottom bar */
#n1.n1-earth { box-sizing: border-box; min-height: var(--fit-h); height: var(--fit-h); }
#n1 .n1-end { height: 100%; box-sizing: border-box; padding-top: 16px; padding-bottom: 20px; justify-content: center; }
#n1 .n1-mapbox { width: min(100%, 420px, calc((var(--fit-h) - 366px) * 600 / 621)); }
#n1 .n1-eyebrow { margin-top: 12px; font-size: 13px; }
#n1 h2 { margin-top: 6px; font-size: clamp(54px, 9.4svh, 84px); }
#n1 .n1-sub { margin-top: 10px; font-size: 16px; }
#n1 .n1-link { margin-top: 16px; }
@media (min-width: 900px) {
  #n1 .n1-end { min-height: 0; }
  #n1 .n1-mapbox { width: min(100%, calc((var(--fit-h) - 48px) * 600 / 621)); }
  #n1 .n1-eyebrow { margin-top: 0; font-size: 16px; }
  #n1 h2 { margin-top: 10px; font-size: clamp(80px, 8.4vw, 128px); }
  #n1 .n1-sub { font-size: 22px; }
}

/* 3 + 4. Packages: screen A = the title and the whole Senior card; screen B = Junior, Sophomore, Freshman and Just fill my
   space. The long summary paragraph (kept for search) moves under the packages. */
#packages.fit-screen { display: block; min-height: 0; padding-top: 0; padding-bottom: 0; scroll-snap-align: none; }
#packages .fit-a, #packages .fit-b { box-sizing: border-box; min-height: var(--fit-h); display: flex; flex-direction: column; justify-content: center;
  gap: 14px; padding: 18px 0; scroll-snap-align: start; scroll-margin-top: 0; }
#packages .hd-pk-head { margin-bottom: 0; }
#packages .hd-pk-title .hd-h2 { font-size: clamp(38px, 6svh, 64px); }
#packages .hd-pay-promise { margin-top: 8px; }
#packages .hd-pk-note { margin-top: 6px; font-size: 15px; }
/* phones: the Senior photo (always whole: it shows the size) beside the badge, name, price and promise; the details,
   bullets and Add button run full width under both */
@media (max-width: 899px) {
  #pkg-grid .hd-senior { display: grid; grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; }
  /* owner 11/01: "the package photos are not shown fully": every package photo is whole, at its own shape */
  #pkg-grid .hd-senior-photo { grid-column: 1; grid-row: 1 / span 3; align-self: start; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: none; }
  #pkg-grid .hd-senior .pkg-card-img { width: 100%; height: auto; max-height: none; min-height: 0; aspect-ratio: 2 / 3; object-fit: cover; }
  #pkg-grid .hd-senior-body { display: contents; }
  #pkg-grid .hd-senior-body > * { grid-column: 1 / -1; margin: 10px 14px 0; }
  #pkg-grid .hd-senior .hd-badge { grid-column: 2; grid-row: 1; align-self: end; margin: 14px 14px 0 0; }
  #pkg-grid .hd-senior .hd-tier-row { grid-column: 2; grid-row: 2; flex-direction: column; align-items: flex-start; gap: 2px; margin: 8px 14px 0 0; }
  #pkg-grid .hd-senior .hd-senior-tag { grid-column: 2; grid-row: 3; align-self: start; margin: 8px 14px 12px 0; }
  #pkg-grid .hd-senior .pkg-tier { font-size: 40px; }
  #pkg-grid .hd-senior .pkg-price { font-size: 34px; }
  #pkg-grid .hd-senior-sub, #pkg-grid .hd-senior-tag { font-size: 14.5px; line-height: 1.4; }
  #pkg-grid .hd-bullets { gap: 4px; }
  #pkg-grid .hd-bullets li { font-size: 14px; line-height: 1.35; }
  #pkg-grid .hd-senior .pkg-control { margin-top: 12px; margin-bottom: 14px; }
  #pkg-grid .hd-add-red { min-height: 50px; }
}
/* screen B on phones: the three as compact rows (photo, name, price, Add), then Just fill my space */
#pkg-grid .hd-pk-row { display: flex; flex-direction: column; gap: 12px; }
#packages .fit-b { gap: 12px; }
#packages .hd-pk-links { margin-top: 4px; font-size: 15px; }
#packages .hd-pk-about-moved { margin: 22px 0 28px; max-width: 760px; font: 500 14px/1.55 'Manrope', 'Manrope Fallback', sans-serif; color: var(--ink-2); }
@media (max-width: 899px) {
  #pkg-grid .hd-pk-under { grid-template-columns: 1fr; gap: 8px; }
  #pkg-grid .hd-under { flex-direction: row; align-items: stretch; }
  #pkg-grid .hd-under-photo { flex: 0 0 45%; align-self: center; border-bottom: 0; border-right: 2px solid var(--ink); }
  #pkg-grid .hd-under .pkg-card-img { width: 100%; height: auto; aspect-ratio: 3 / 2; max-height: none; min-height: 0; object-fit: cover; }
  #pkg-grid .hd-under .pkg-card-body { padding: 4px 10px; gap: 2px; justify-content: center; min-width: 0; }
  #packages .fit-b { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  #pkg-grid .hd-under .pkg-tier { font-size: 22px; }
  #pkg-grid .hd-under .pkg-price { font-size: 21px; }
  #pkg-grid .hd-under .pkg-tagline { font-size: 12.5px; line-height: 1.28; }
  #pkg-grid .hd-under .hd-add-outline, #pkg-grid .hd-under .pkg-add { min-height: 38px; font-size: 14.5px; }
  #pkg-grid .hd-under .pkg-control { margin-top: 2px; }
  #pkg-grid .hd-pk-row .hd-fill { padding: 12px 16px; gap: 6px; }
  #pkg-grid .hd-pk-row .hd-fill-h { font-size: 28px; }
  #pkg-grid .hd-fill-s { font-size: 13.5px; line-height: 1.38; }
  #pkg-grid .hd-fill-btn { min-height: 44px; }
  #packages .hd-pk-links { gap: 2px 18px; font-size: 14.5px; }
}
@media (min-width: 900px) {
  #packages .hd-pk-head { display: block; }
  #pkg-grid .hd-senior-photo { flex: 0 0 auto; background: none; border-right: 2px solid var(--ink); }
  #pkg-grid .hd-senior .pkg-card-img { width: auto; height: min(640px, calc(var(--fit-h) - 240px)); max-height: none; aspect-ratio: 2 / 3; object-fit: cover; }
  #pkg-grid .hd-senior-body { padding: 24px 28px; gap: 12px; justify-content: center; }
  #pkg-grid .hd-senior .pkg-tier { font-size: 60px; }
  #pkg-grid .hd-senior .pkg-price { font-size: 52px; }
  #pkg-grid .hd-senior-sub, #pkg-grid .hd-senior-tag { font-size: 17px; }
  #pkg-grid .hd-bullets li { font-size: 16px; }
  /* screen B: Junior, Sophomore and Freshman three across, each photo whole; Just fill my space as one band under them */
  #pkg-grid .hd-pk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  #pkg-grid .hd-under .pkg-card-img { width: 100%; height: auto; max-height: none; aspect-ratio: 3 / 2; object-fit: cover; }
  #pkg-grid .hd-pk-row > .hd-fill-col { grid-column: 1 / -1; }
  #pkg-grid .hd-pk-row .hd-fill { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "eye eye btn" "h s btn";
    align-items: center; column-gap: 32px; row-gap: 4px; padding: 18px 28px; width: 100%; box-sizing: border-box; }
  #pkg-grid .hd-pk-row .hd-fill-eyebrow { grid-area: eye; }
  #pkg-grid .hd-pk-row .hd-fill-h { grid-area: h; font-size: 40px; white-space: nowrap; }
  #pkg-grid .hd-pk-row .hd-fill-s { grid-area: s; font-size: 16px; max-width: 520px; }
  #pkg-grid .hd-pk-row .hd-fill-btn { grid-area: btn; margin: 0; align-self: center; }
}

/* 5. Real deliveries: one big real photo (phone) or the grid (computer), sized to the screen */
#real-deliveries .hd-rd-head { margin-bottom: 14px; }
#real-deliveries .hd-rd-item img { height: calc(var(--fit-h) - 200px); width: 100%; aspect-ratio: auto; object-fit: cover; }
@media (min-width: 900px) {
  #real-deliveries .hd-rd-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; overflow: visible; }
  #real-deliveries .hd-rd-item img { height: calc((var(--fit-h) - 220px) / 2); }
  #real-deliveries .hd-rd-item:nth-child(n+7) { display: none; }
}

/* 6. Reviews: 240+, then the dog photo big and whole, then the review stack (owner 11/02: "I don't feel like the dog
   photo is emphasized perfectly") */
#reviews { --rv-img: min(calc(100vw - 84px), max(200px, calc((var(--fit-h) - 552px) * 4 / 3))); }   /* the photo's width on a phone */
#reviews .hd-wrap { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "badge" "photo" "stage" "all"; justify-items: center; }
#reviews.fit-screen.hd-section { padding-top: 10px; padding-bottom: 10px; }
#reviews .hd-rv-h { grid-area: h; margin: 0; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 12px; }
#reviews .hd-rv-200 { font-size: clamp(50px, 7.6svh, 120px); }
#reviews .hd-rv-words { font-size: clamp(20px, 3svh, 36px); padding-bottom: 0; }
#reviews .hd-rv-badge { grid-area: badge; margin: 6px 0 16px; font-size: 12.5px; padding: 7px 12px; white-space: nowrap; }
/* phones: the badge rides the photo's bottom edge, so the photo can be bigger in the same screen */
@media (max-width: 899px) {
  #reviews .hd-wrap { grid-template-areas: "h" "photo" "stage" "all"; }
  #reviews .hd-rv-h { margin-bottom: 12px; }
  /* on the bottom-left corner of the print, across from the gold sticker (the middle would cover the dog's paws) */
  #reviews .hd-rv-badge { grid-area: photo; z-index: 2; align-self: end; justify-self: start; margin: 0 0 0 calc((100% - var(--rv-img) - 14px) / 2 - 6px); transform: translateY(42%) rotate(-2deg);
    background: var(--red, #B72A2A); color: #fff; box-shadow: 0 2px 0 #6b1717, 0 6px 12px rgba(27, 26, 23, .30); }   /* red, so it never melts into the dark card */
  #reviews .hd-wrap .hd-rv-photo { margin-bottom: 14px; }
  #reviews .hd-rv-stage { position: relative; z-index: 0; row-gap: 6px; }   /* its own layer, so the cards never cover the badge */
  #reviews .hd-rv-stack { padding-left: 14px; padding-right: 14px; }
  #reviews .hd-rv-card.hd-rv-card .review-meta-sub { font-size: 10.5px; }
  #reviews .hd-rv-200 { font-size: clamp(50px, 7svh, 120px); }
  #reviews .reviews-all-row { margin-top: 0; }
  #reviews .hd-rv-card.hd-rv-card .hd-rv-more { min-height: 28px; }
}
/* a printed photo: white border, a slight tilt, a deep shadow and the gold 5.0 sticker on its corner; never cropped */
#reviews .hd-rv-photo { grid-area: photo; position: relative; z-index: 1; max-width: none; margin: 0 0 6px; padding: 7px; background: #fff; border: 0; transform: rotate(-2deg);
  box-shadow: 0 2px 0 rgba(27, 26, 23, .14), 0 16px 34px rgba(27, 26, 23, .34); }
#reviews .hd-rv-photo img { width: var(--rv-img); height: auto; aspect-ratio: 4 / 3; border: 0; object-fit: cover; }
#reviews .hd-rv-photo::after { content: '★ 5.0'; content: '★ 5.0' / ''; position: absolute; right: -12px; top: -12px; padding: 7px 11px; border-radius: 999px; background: var(--gold, #E0A82E); color: var(--ink);
  font: 800 15px/1 'Manrope', 'Manrope Fallback', sans-serif; box-shadow: 0 2px 0 rgba(27, 26, 23, .35); transform: rotate(8deg); }
#reviews .hd-rv-stage { grid-area: stage; width: 100%; margin-top: 0; }
#reviews .reviews-all-row { grid-area: all; margin: 4px 0 0; }
/* the review card, sized to what's left of the screen (Read full review still opens it in place) */
#reviews .hd-rv-stack { padding-top: 4px; padding-bottom: 8px; }
#reviews .hd-rv-card.hd-rv-card.hd-rv-card { min-height: 0; gap: 7px; padding: 12px 16px; }
#reviews .hd-rv-card.hd-rv-card .hd-rv-stars { font-size: 18px; }
#reviews .hd-rv-card.hd-rv-card .hd-rv-quote { gap: 6px; }
#reviews .hd-rv-card.hd-rv-card .review-pull { font-size: clamp(16px, 2.2svh, 26px); line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#reviews .hd-rv-card.hd-rv-card .hd-rv-short .review-body { font-size: 14px; line-height: 1.45; -webkit-line-clamp: 2; }
#reviews .hd-rv-card.hd-rv-card .hd-rv-more { min-height: 32px; font-size: 15px; }
#reviews .hd-rv-card.hd-rv-card .review-meta { padding-top: 8px; gap: 10px; }
#reviews .hd-rv-card.hd-rv-card .review-avatar { width: 36px; height: 36px; font-size: 16px; }
#reviews .hd-rv-card.hd-rv-card .review-meta-name { font-size: 15px; }
#reviews .hd-rv-card.hd-rv-card .review-meta-sub { font-size: 11.5px; }
#reviews .hd-rv-stage .hd-rv-arrow { width: 48px; height: 48px; }
#reviews .hd-rv-pos { margin-top: 0; }
/* the short text shows a few lines (every card the same height); Read full review opens it all in place */
#reviews .hd-rv-card.hd-rv-card .hd-rv-short .review-body { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 900px) {
  /* left: 240+ and the photo, as big as the screen allows; right: the review stack with its arrows under it (owner
     11/02: "the button is hidden": the stage was built wider than its column, so the arrows sat under the photo
     and off the edge) */
  #reviews .hd-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "h stage" "badge stage" "photo stage" "all stage"; column-gap: 64px; align-content: center; justify-items: start; }
  #reviews .hd-rv-h, #reviews .reviews-all-row { justify-content: flex-start; text-align: left; }
  #reviews .hd-rv-photo { margin: 2px 0 24px 10px; padding: 10px; transform: rotate(-1.5deg); }
  #reviews .hd-rv-photo img { width: min(calc(50vw - 110px), 560px, calc((var(--fit-h) - 290px) * 4 / 3)); }
  #reviews .hd-rv-photo::after { font-size: 18px; padding: 8px 13px; right: -16px; top: -16px; }
  #reviews .hd-rv-stage { width: 100%; max-width: 600px; margin: 0; justify-self: center; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "stack stack stack" "prev pos next"; gap: 14px 20px; }
  #reviews .hd-rv-stage #rev-prev { justify-self: end; }
  #reviews .hd-rv-stage #rev-next { justify-self: start; }
  #reviews .hd-rv-stage .hd-rv-arrow { width: 56px; height: 56px; }
  #reviews .hd-rv-card.hd-rv-card.hd-rv-card { gap: 12px; padding: 22px 26px; }
  #reviews .hd-rv-card.hd-rv-card .review-pull { -webkit-line-clamp: 5; }
  #reviews .hd-rv-card.hd-rv-card .hd-rv-short .review-body { font-size: 15px; -webkit-line-clamp: 4; }
}

/* 7. How it works: the three photos in one row, then the steps and the guarantee */
#how .hd-how { gap: 18px 56px; }
#how .hd-how-left { gap: 12px; }
#how .hd-h2 { font-size: clamp(38px, 6svh, 64px); }
#how .hd-how-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#how .hd-how-photos figure, #how .hd-how-photos figure:first-child { margin: 0; grid-column: auto; gap: 4px; }
#how .hd-how-photos img { width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 22svh; object-fit: cover; }
#how .hd-how-photos figcaption { font-size: 10.5px; line-height: 1.3; }
#how .hd-steps li { padding: 9px 0; gap: 4px 16px; }
#how .hd-steps strong { font-size: 22px; }
#how .hd-steps li > span:last-child { font-size: 14.5px; line-height: 1.4; }
#how .hd-steps li.hd-stamp { margin-top: 12px; padding: 12px 14px; }
#how .hd-steps li.hd-stamp > span:last-child { font-size: 15px; }
@media (min-width: 900px) {
  #how .hd-how-photos img { max-height: none; aspect-ratio: 4 / 3; }
  #how .hd-steps strong { font-size: 30px; }
  #how .hd-steps li > span:last-child { font-size: 16px; }
}

/* 8. Team: the crew photo and the words on one screen (side by side on a computer) */
#team.fit-screen { justify-content: flex-start; }
#team .hd-team-photo img { height: 30svh; max-height: none; }
#team .hd-team-row { padding: 16px clamp(20px, 5vw, 40px) 16px; gap: 12px 40px; flex: 1; }
#team .hd-eyebrow { margin-bottom: 6px; }
#team .hd-h2 { font-size: clamp(38px, 5.8svh, 64px); }
#team .hd-team-text { margin: 8px 0 12px; font-size: 14.5px; line-height: 1.45; }
#team .hd-bray { display: flex; align-items: center; gap: 12px; }
#team .hd-bray img { width: 84px; height: 84px; max-height: none; object-fit: cover; flex: none; }
@media (min-width: 900px) {
  #team.fit-screen { flex-direction: row; align-items: stretch; }
  #team .hd-team-photo { flex: 0 0 50%; }
  #team .hd-team-photo img { height: 100%; }
  #team .hd-team-row { flex: 1; align-content: center; padding: 40px; }
  #team .hd-h2 { font-size: clamp(56px, 6vw, 84px); }
  #team .hd-team-text { font-size: 17px; }
  #team .hd-bray img { max-height: 24svh; }
}

/* 9. We deliver across Georgia, with Follow us at the bottom of the same screen */
#service-area .hd-h2 { font-size: clamp(32px, 5svh, 56px); margin-bottom: 8px; }
#service-area .hd-wall { font-size: clamp(16px, 2.15svh, 30px); line-height: 1.1; margin: 0 0 8px; }
#service-area .hd-area-text { font-size: 13.5px; line-height: 1.4; margin: 0 0 8px; }
#service-area .hd-city-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
#service-area .hd-city-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; font-size: 12.5px; margin: 0; }
#service-area .hd-follow-band { margin: 12px calc(-1 * clamp(20px, 5vw, 40px)) 0; padding: 10px clamp(20px, 5vw, 40px); }
#service-area .hd-follow-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "photo copy" "photo icons"; gap: 4px 12px; align-items: center; padding: 0; }
#service-area .hd-follow-photo { grid-area: photo; margin: 0; }
#service-area .hd-follow-photo img { width: 64px; height: 64px; object-fit: cover; }
#service-area .hd-follow-copy { grid-area: copy; }
#service-area .hd-follow-h { font-size: 24px; margin: 0; }
#service-area .hd-follow-p { font-size: 12.5px; margin: 0; line-height: 1.3; }
#service-area .hd-follow-icons { grid-area: icons; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
#service-area .hd-follow-icons .hd-social { min-height: 44px; }
@media (min-width: 900px) {
  #service-area .hd-wall { font-size: clamp(26px, 4.6svh, 40px); }
  #service-area .hd-follow-row { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "photo copy icons"; }
  #service-area .hd-follow-photo img { width: 96px; height: 96px; }
}

/* 10. About: word for word, fitted to one screen */
#about .hd-h2 { font-size: clamp(34px, 5.6svh, 56px); }
#about .hd-about-p { font-size: 15px; line-height: 1.55; }
@media (min-width: 900px) { #about .hd-about-p { font-size: 17px; } }

/* 11. FAQ: every question starts closed, so the whole list fits; tap one to open it */
#faq .hd-h2 { font-size: clamp(32px, 5svh, 56px); margin-bottom: 6px; }
#faq .hd-faq-q { min-height: 46px; padding-top: 7px; padding-bottom: 7px; font-size: 15px; line-height: 1.3; }
#faq .hd-faq-ask { margin-top: 10px; }
@media (min-width: 900px) { #faq .hd-faq-q { min-height: 52px; font-size: 17px; } }

/* 12. The last screen: the order button */
.hd-final.fit-screen { min-height: var(--fit-h); }
footer { scroll-snap-align: none; }
/* reviews-buttons 11/02: the fanned cards hang ~32 px below the stack; keep the arrow row clear of them */
#reviews .hd-rv-stage .hd-rv-stack { padding-bottom: 40px; }
#reviews .hd-rv-stage .hd-rv-arrow:focus:not(:focus-visible) { outline: none; }
@media (hover: none) { #reviews .hd-rv-stage .hd-rv-arrow:hover { background: #FFFFFF; color: var(--ink); } }

/* imgfix-1105 */
/* 11/05 owner "NOT WORKING": the #1 map was sized (screen height - 366px), so on a short visible screen (Chrome on iPhone
   with both toolbars, iPhone SE, landscape) it shrank to a ~40 px square that read as a broken image. It never goes
   under 17.5rem now; the section grows past one screen instead of crushing the map. */
#n1.n1-earth { height: auto; }
#n1 .n1-end { height: auto; min-height: var(--fit-h); }
#n1 .n1-mapbox { flex-shrink: 0; width: min(100%, 420px, max(calc((var(--fit-h) - 366px) * 600 / 621), 17.5rem)); }
@media (min-width: 900px) {
  #n1 .n1-end { min-height: var(--fit-h); }
  #n1 .n1-mapbox { width: min(100%, max(calc((var(--fit-h) - 48px) * 600 / 621), 20rem)); }
}
/* the same floor for every other picture sized from the screen height */
#real-deliveries .hd-rd-item img { height: max(calc(var(--fit-h) - 200px), 15rem); }
@media (min-width: 900px) {
  #real-deliveries .hd-rd-item img { height: max(calc((var(--fit-h) - 220px) / 2), 10rem); }
  #pkg-grid .hd-senior .pkg-card-img { height: min(640px, max(calc(var(--fit-h) - 240px), 20rem)); }
  #reviews .hd-rv-photo img { width: min(calc(50vw - 110px), 560px, max(calc((var(--fit-h) - 290px) * 4 / 3), 16rem)); }
}
/* 11/05 owner: "These pics need to be bigger. Make them above each of their descriptions." Phones: each package photo is
   full width on top of its card, whole (its own shape, nothing cropped), then name, price, description, Add to order. */
@media (max-width: 899px) {
  #pkg-grid .hd-under { flex-direction: column; align-items: stretch; }
  #pkg-grid .hd-under-photo { flex: none; align-self: stretch; border-right: 0; border-bottom: 2px solid var(--ink); }
  #pkg-grid .hd-under .pkg-card-img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
  #pkg-grid .hd-under .pkg-card-body { padding: 0.875rem 1rem 1rem; gap: 0.5rem; justify-content: flex-start; }
  #pkg-grid .hd-under .pkg-tier { font-size: 1.875rem; }
  #pkg-grid .hd-under .pkg-price { font-size: 1.75rem; }
  #pkg-grid .hd-under .pkg-tagline { font-size: 1rem; line-height: 1.4; }
  #pkg-grid .hd-under .hd-add-outline, #pkg-grid .hd-under .pkg-add { width: 100%; min-height: 3rem; font-size: 1.0625rem; }
  #pkg-grid .hd-under .pkg-control { margin-top: 0.25rem; }
  #pkg-grid .hd-pk-under { gap: 0.875rem; }
}
@media (min-width: 600px) and (max-width: 899px) {   /* tablets, phones sideways: the three across, Just fill my space under */
  #pkg-grid .hd-pk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
  #pkg-grid .hd-pk-row > .hd-fill-col { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  #pkg-grid .hd-senior { display: flex; flex-direction: column; }
  #pkg-grid .hd-senior-photo { align-self: stretch; border-right: 0; border-bottom: 2px solid var(--ink); }
  #pkg-grid .hd-senior .pkg-card-img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
  #pkg-grid .hd-senior-body { display: flex; flex-direction: column; gap: 0.625rem; padding: 1rem 1rem 1.125rem; }
  #pkg-grid .hd-senior-body > * { margin: 0; }
  #pkg-grid .hd-senior .hd-badge { align-self: flex-start; margin: 0; }
  #pkg-grid .hd-senior .hd-tier-row { flex-direction: row; align-items: baseline; justify-content: space-between; margin: 0; }
  #pkg-grid .hd-senior .hd-senior-tag { margin: 0; }
  #pkg-grid .hd-senior .pkg-control { margin: 0.25rem 0 0; }
}
/* imgfix-1105b */
/* the quantity stepper fills the wider card: minus at the left, the number in the middle, plus at the right */
@media (max-width: 899px) {
  #pkg-grid .pkg-stepper-row .stepper { justify-content: space-between; }
  #pkg-grid .pkg-stepper-row .stepper input { flex: 1; font-size: 1.0625rem; }
  #pkg-grid .pkg-stepper-row .stepper button { width: 3.5rem; }
}