/* Galil (dry-cleaner layout 1): one stylesheet for the home page and every sub-page.
   The five :root names below are the ones agency-site/app.js injects for the
   showroom palette picker; everything else derives from them with color-mix(). */
:root {
  --ink: #14294d;
  --paper: #ffffff;
  --accent-green: #2864d7;
  --accent-brass: #d8b48c;
  --text: #162233;
  --field: color-mix(in srgb, var(--accent-brass) 50%, var(--paper));
  --mist: color-mix(in srgb, var(--ink) 10%, var(--paper));
  --quiet: color-mix(in srgb, var(--text) 72%, var(--paper));
  --radius: 12px;
  --max: 1120px;
  --gutter: 24px;
  /* The header runs the window's full width, so it keeps its own gutter: the page's
     exactly, until the page below it stops filling the window and starts centring in
     --max, and then a twelfth of the margin that opens up, to 76px. The name never
     ends up against the glass at 1920, and never sits off the page's own gutter while
     the page is full-bleed. (The agency site went to a growing gutter 2026-09-22.) */
  --head-gutter: clamp(var(--gutter), calc(var(--gutter) + (100vw - var(--max) - 2 * var(--gutter)) / 12), 76px);
  --display: 'Libre Franklin', Arial, Helvetica, sans-serif;
  --body: 'Libre Franklin', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
/* In-page links land below the pinned header, not under it. --head-pin is its height; the
   showroom adds its announcement bar to it, or zeroes it when a client has the header scroll away. */
html { --head-pin: 88px; scroll-behavior: smooth; scroll-padding-top: var(--head-pin); }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
p { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }

.skip-link { position: absolute; left: 20px; top: -80px; z-index: 50; padding: 10px 14px; border-radius: var(--radius); background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 16px; }
.preview-return { background: var(--ink); color: var(--paper); }
.preview-return a { display: flex; align-items: center; gap: 10px; min-height: 48px; max-width: var(--max); margin: auto; padding: 0 var(--gutter); font-size: 14px; font-weight: 600; text-decoration: none; }
.preview-return svg { width: 18px; height: 18px; transition: transform .16s ease; }
.preview-return a:hover svg { transform: translateX(-4px); }
.embedded-preview .preview-return { display: none; }
/* A live site's holiday-closing line, which site-live.js puts just above the header on every page:
   the hours card's brass under the page's ink, since it is an hours fact, on the header's own left
   edge. It scrolls away with the page and the sticky header stays; the home page re-measures its fold
   when it arrives. `body >` outranks social-links.css, which loads after this file and centres it. */
body > .live-closed { padding: 10px var(--head-gutter); background: var(--field); color: var(--ink); font-size: 15px; text-align: left; }

.prices, .notes, .contact, .footer-inner { max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* The header runs the full width of the window, per E: the name at the left edge, the
   call button at the right, over the same edges the photo below it reaches. Only the
   header moved out to the glass -- everything under it still sits in the --max column. */
/* The header stays on screen while the page scrolls, per E (2026-09-23). Sticky, not fixed: it
   keeps its place in the flow, so the home page's --above fold maths is unchanged. */
.masthead { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px; min-height: 88px; background: var(--paper); padding-left: var(--head-gutter); padding-right: var(--head-gutter); }
.brand { margin-right: auto; color: var(--ink); font: 700 1.4rem/1.1 var(--display); text-decoration: none; white-space: nowrap; }
/* Logo slot (PROJECT.md §4): the generator sets src/width/height and removes `hidden`; alt stays empty
   because the name stays in the span for assistive tech, visually hidden while the logo shows. */
.brand-logo { display:block; height:36px; width:auto; max-width:220px; }
.brand-logo[hidden] { display:none; }
.brand:has(.brand-logo:not([hidden])) { display:inline-flex; align-items:center; }
.brand:has(.brand-logo:not([hidden])) [data-business-name] { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.site-nav { display: flex; gap: 26px; font-weight: 500; }
.site-nav a { padding: 6px 0; color: var(--ink); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav-toggle { display: none; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--ink); border-radius: var(--radius); background: transparent; color: var(--ink); }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
.button:hover { background: var(--accent-green); border-color: var(--accent-green); }
.button.secondary { background: transparent; color: var(--ink); }
.button.secondary:hover { background: var(--mist); border-color: var(--ink); }
.masthead .button { flex-shrink: 0; min-height: 44px; padding: 0 18px; white-space: nowrap; }

/* Header states. nav.js measures the row and sets these on <html> the moment the
   row would wrap: `nav-tight` drops the number from the Call button, `nav-snug`
   closes the links up a little, `nav-collapsed` moves them behind the menu button. No name, font, or width wraps the header;
   the only thing ever allowed to break is the name itself, behind the menu button
   on a phone. Without JS the links wrap under the name at phone widths instead. */
html.nav-tight .masthead .button { padding: 0 14px; }
html.nav-tight .masthead .button span { display: none; }
html.nav-snug .masthead { gap: 18px; }
html.nav-snug .site-nav { gap: 18px; font-size: 16px; }
html.nav-collapsed .masthead { gap: 12px; }
html.nav-collapsed .brand { white-space: normal; min-width: 0; }
html.nav-collapsed .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
html.nav-collapsed .site-nav { position: absolute; top: calc(100% - 6px); right: var(--head-gutter); z-index: 10; display: none; min-width: 200px; padding: 10px 18px 12px; border-radius: var(--radius); background: var(--paper); box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 22%, transparent); }
html.nav-collapsed .site-nav.nav-open { display: grid; gap: 2px; }
html.nav-collapsed .site-nav a { padding: 9px 0; }

/* The opening is the whole first screen: one photo edge to edge, the line and the two
   buttons on it at the bottom-left, the hours card ("the door") at the bottom-right.
   --above is what sits above <main> (the demo's return bar, a live site's holiday-closing line, the masthead), measured by
   the home page's inline script so the hero ends exactly at the fold; 88px is the
   masthead's own height, the fallback without JS. The scrim is one gradient from the
   bottom, darkest where the copy sits, so paper-colored text reads on any photo. */
.hero { position: relative; display: grid; align-items: end; min-height: calc(100vh - var(--above, 88px)); min-height: calc(100svh - var(--above, 88px)); background: var(--ink); color: var(--paper); overflow: hidden; isolation: isolate; }
.hero-photo { position: absolute; inset: 0; margin: 0; background: var(--mist); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 10, 20, .84) 0%, rgba(6, 10, 20, .66) 40%, rgba(6, 10, 20, .2) 74%, rgba(6, 10, 20, 0) 100%); }
.hero-copy { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr); gap: clamp(40px, 6vw, 96px); align-items: end; width: 100%; max-width: var(--max); margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--gutter) clamp(40px, 6vw, 64px); }
/* Capped at 3rem, not the 3.5rem the column's own width would allow: Libre Franklin
   wraps the full headline to two lines at 3.5rem, but Poppins' wider letterforms (a
   font the studio picker can swap in, per the picker's own default) don't -- the same
   headline goes to three lines and crowds the buttons underneath it. 3rem is the largest
   size that still holds two lines in both faces (checked live at 1920px). */
.opening h1 { max-width: 20ch; margin: 0; color: var(--paper); font: 600 clamp(2.3rem, 4vw, 3rem)/1.08 var(--display); }
.lede { max-width: 46ch; margin: 24px 0 0; font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.45; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* Two buttons in a row read as one balanced unit, not one wide and one narrow -- matched
   to the widest sibling's own content width, not a guessed pixel value, so it still works
   if a client's button text is longer or shorter. Mobile keeps its own full-width stack
   below (the flex:1 1 auto rule under 760px), so this only applies once there's a row. */
@media (min-width: 761px) {
  .actions { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
}
.hero .button { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.hero .button:hover { background: var(--field); border-color: var(--field); color: var(--ink); }
.hero .button.secondary { background: transparent; color: var(--paper); border-color: var(--paper); }
.hero .button.secondary:hover { background: rgba(255, 255, 255, .16); }
.hero :focus-visible { outline-color: var(--paper); }

.door { padding: 28px 28px 30px; border-radius: var(--radius); background: var(--field); color: var(--text); }
.door .rows { max-width: 440px; }
.door .rows th { white-space: nowrap; }
.door h2 { margin: 0 0 12px; color: var(--ink); font: 600 1.5rem/1.1 var(--display); }
.rows { width: 100%; border-collapse: collapse; }
.rows th { padding: 7px 16px 7px 0; font-weight: 500; text-align: left; vertical-align: top; }
.rows td { padding: 7px 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; vertical-align: top; white-space: nowrap; }
.door-address { margin: 22px 0 0; }

.photo-band { padding-left: max(var(--gutter), calc(50% - var(--max) / 2 + var(--gutter))); }
/* The slot keeps its own height (no shift while the photo loads) and the mist ground as the loading
   state; the photo is cut to the slot with object-fit, and the sample-photo credit sits on it at the
   bottom-left on a dark translucent ground so it reads on any photo. The credit is the one short line
   "Sample photo (Unsplash)", the same label Tabor's slots carry, so it never wraps to a second line
   and never covers more than a corner of the smallest tile (335px wide at 375). */
.photo-slot { position: relative; display: flex; align-items: flex-end; height: clamp(260px, 32vw, 460px); margin: 0; padding: 24px; overflow: hidden; border-radius: var(--radius) 0 0 var(--radius); background: var(--mist); }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slot figcaption { position: relative; max-width: 100%; padding: 3px 8px; border-radius: 4px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 14px; line-height: 1.4; }
/* A sample photo whose focus sits off center (photos/manifest.json) carries its own object-position as an
   inline style on its <img>, never here keyed by slot: the generator swaps the whole <picture> for the
   client's photo, and a crop written for shirts-line or a tall gown would then cut the client's storefront
   or van at the same offset. The crop leaves with the sample it was chosen for. */

.prices { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(40px, 5vw, 64px); }
.section-title { margin: 0; color: var(--ink); font: 600 clamp(1.75rem, 2.6vw, 2.3rem)/1.1 var(--display); }
.prices .note { max-width: 60ch; margin: 10px 0 0; color: var(--quiet); font-size: 15px; }
.price-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: clamp(40px, 7vw, 110px); row-gap: 44px; margin-top: 40px; }
.price-table { max-width: 460px; }
.price-table caption { padding: 0 0 8px; color: var(--ink); font: 600 1.1rem/1.2 var(--display); text-align: left; caption-side: top; }
.price-table th { padding: 11px 20px 11px 0; }
.price-table th small { display: block; margin-top: 2px; color: var(--quiet); font-size: 14px; font-weight: 400; }
.price-table td { padding: 11px 0; color: var(--accent-green); }

.notes { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: clamp(20px, 5vw, 80px); padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 80px); }
.notes p { max-width: 58ch; margin: 0; font-size: 1.05rem; }

.contact { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(56px, 7vw, 96px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: 28px; }
.map-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--mist); }
.map-embed { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.map-link { position: absolute; inset: 0; border-radius: var(--radius); }
.map-link:focus-visible { outline-offset: -4px; }
.details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 28px; margin: 4px 0 0; }
.details dt { color: var(--quiet); font-weight: 500; }
.details dd { margin: 0; font-weight: 600; }
.details a { color: var(--ink); text-underline-offset: 4px; }
.contact .actions { margin-top: 28px; }

/* Live from the shop's account (agency-site/site-live.js): the buttons and links the owner switched
   on in Integrations, under the block's own buttons (Find us on the home page, the hours card on
   Contact). Both slots ship hidden and empty; only the lists inside them carry a display. Buttons are
   the outline one, so the filled Call / Get directions stays the block's own call, and a label up to
   40 characters wraps inside its button rather than running out of it. On a wide screen they fill the
   hours table's 440px measure: buttons that fit side by side split a row evenly (the same balanced pair
   as .actions), a long one takes the row. Links sit one to a line in the details' ink; Zelle has no
   address, so it arrives as a span and reads as a plain fact. */
.live-actions { margin-top: 12px; }
.live-buttons { display: flex; flex-wrap: wrap; gap: 12px; max-width: 440px; }
.live-buttons .button { max-width: 100%; padding-top: 10px; padding-bottom: 10px; line-height: 1.3; white-space: normal; text-align: center; text-wrap: balance; }
@supports (min-width: fit-content) {
  .live-buttons .button { flex: 1 1 0; min-width: fit-content; }
  /* Find us: the block's own Call / Get directions pair takes the same sizing, so the two rows'
     edges line up and the pair wraps instead of running past the narrow column (761-900px). */
  @media (min-width: 761px) {
    .contact .actions { display: flex; flex-wrap: wrap; max-width: 440px; }
    .contact .actions .button { flex: 1 1 0; min-width: fit-content; }
  }
}
/* In the hours card the card's own Get directions sits at its natural width, so the live buttons
   do too; stretched, they would outweigh the one filled call. */
@media (min-width: 761px) {
  .door .live-buttons .button { flex: 0 1 auto; }
}
.door .live-buttons .button:hover { background: var(--paper); }
.live-links { margin-top: 24px; }
.live-link-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.live-link-list li { margin: 0; }
.live-link-list a { color: var(--ink); font-weight: 600; text-underline-offset: 4px; }
.live-link-list span { font-weight: 600; }
@media (max-width: 760px) {
  .live-buttons .button { flex: 1 1 auto; min-width: auto; }
}

footer { background: var(--ink); color: var(--paper); }
footer :focus-visible { outline-color: var(--paper); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 44px; padding-bottom: 44px; font-size: 14px; text-align: center; }
.footer-inner p { margin: 0; }
.footer-inner .footer-credit { margin-top: 14px; font-size: 13px; color: color-mix(in srgb, currentColor 72%, transparent); }
.footer-credit a { color: #8fb3ff; }
footer a { text-underline-offset: 3px; }

html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease-out, transform .6s ease-out; }
html.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .button, .preview-return svg { transition: none; }
}

/* Six links (About joined 2026-09-19) need 922px at the masthead's 26px gaps in Libre Franklin and
   946px in the showroom's Poppins; just above the phone menu the gaps close to 18px (862 / 887px). */
@media (min-width: 901px) and (max-width: 1000px) {
  .masthead { gap: 18px; }
  .site-nav { gap: 18px; }
}

@media (max-width: 900px) {
  html { --head-pin: 76px; }
  .masthead { min-height: 76px; }
  /* Without JS the links wrap under the name, too tall to keep on screen, so it scrolls away. */
  html:not(.js) .masthead { position: relative; flex-wrap: wrap; gap: 12px; padding-bottom: 12px; }
  html:not(.js) .masthead .button { padding: 0 14px; }
  html:not(.js) .masthead .button span { display: none; }
  html:not(.js) .site-nav { flex-wrap: wrap; flex-basis: 100%; order: 3; gap: 16px; min-width: 0; }
  .hero { display: block; min-height: 0; }
  /* The copy fills more of a phone's screen, so the scrim is flatter and darker there. */
  .hero::after { background: linear-gradient(to top, rgba(6, 10, 20, .86) 0%, rgba(6, 10, 20, .74) 50%, rgba(6, 10, 20, .4) 82%, rgba(6, 10, 20, .12) 100%); }
  .hero-copy { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100vh - var(--above, 76px)); min-height: calc(100svh - var(--above, 76px)); }
  .door { margin-top: 40px; }
}

@media (max-width: 760px) {
  .brand { font-size: 1.25rem; }
  :root { --gutter: 20px; }
  .hero-copy { padding-top: 40px; padding-bottom: 28px; }
  .actions .button { flex: 1 1 auto; }
  .door { padding: 24px 22px 26px; }
  .photo-slot { height: clamp(220px, 60vw, 300px); }
  .map-frame { aspect-ratio: 4 / 3; }
  .prices { padding-top: 56px; padding-bottom: 32px; }
  .price-groups { grid-template-columns: minmax(0, 1fr); row-gap: 36px; margin-top: 30px; }
  .notes { display: block; padding-top: 32px; padding-bottom: 56px; }
  .notes .section-title { margin-bottom: 14px; }
  .contact { padding-top: 40px; padding-bottom: 64px; }
  .contact-grid { display: block; }
  .details { margin-top: 24px; }
  .footer-inner { padding-top: 36px; padding-bottom: 36px; }
}

/* ---- sub-pages ------------------------------------------------------------ */
.page, .page-head { max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.page-head { padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(24px, 3vw, 36px); }
.page-head h1 { max-width: 22ch; margin: 0; color: var(--ink); font: 600 clamp(2rem, 3.4vw, 3rem)/1.08 var(--display); }
.page-note { max-width: 60ch; margin: 12px 0 0; color: var(--quiet); font-size: 15px; }
.page > .price-groups { margin-top: 8px; }
.price-groups.sheet { display: block; columns: 2; column-gap: clamp(40px, 7vw, 110px); }
.price-groups.sheet .price-table { break-inside: avoid; margin-bottom: 44px; }
.page-end { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(56px, 7vw, 96px); }
.page-end .actions { margin-top: 0; }

.sheet-notes { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: clamp(20px, 5vw, 80px); padding-top: clamp(48px, 6vw, 80px); }
.sheet-notes h2 { margin: 0; }
.sheet-notes p { max-width: 58ch; margin: 0; font-size: 1.05rem; }

/* About: the head keeps the home's air before the bleeding photo; the questions are one more
   label-left / value-right sheet, no rules, with the hours rows inside the last answer. */
.about-head { padding-bottom: clamp(40px, 5vw, 64px); }
.answers { padding-top: clamp(64px, 8vw, 104px); }
.answers dl { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: 36px clamp(20px, 5vw, 80px); margin: 36px 0 0; }
.answers dt { color: var(--ink); font: 600 1.1rem/1.5 var(--display); }
.answers dd { max-width: 58ch; margin: 0; font-size: 1.05rem; }
.answers dd .rows { max-width: 440px; margin-top: 12px; }
.answers a { color: var(--ink); font-weight: 600; text-underline-offset: 4px; }

.gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "a a a a b b" "a a a a c c" "d d d e e e" "f f g g h h"; gap: 16px; padding-top: 8px; padding-bottom: clamp(56px, 7vw, 96px); }
.gallery .photo-slot { height: auto; min-height: 200px; padding: 16px; border-radius: var(--radius); }
.gallery .g1 { grid-area: a; min-height: 420px; }
.gallery .g2 { grid-area: b; }
.gallery .g3 { grid-area: c; }
.gallery .g4 { grid-area: d; min-height: 260px; }
.gallery .g5 { grid-area: e; min-height: 260px; }
.gallery .g6 { grid-area: f; min-height: 260px; }
.gallery .g7 { grid-area: g; min-height: 260px; }
.gallery .g8 { grid-area: h; min-height: 260px; }

/* Contact reads as one column at every width, per E (2026-09-24): map, then the hours card, then the
   note form, then reviews. The track stops at 760px so the map stays a sensible height; it sits on
   the page head's left edge rather than centring. */
.contact-top { display: grid; grid-template-columns: minmax(0, 760px); gap: 28px; align-items: start; padding-top: 8px; }
.contact-top .door { margin: 0; }
.door-phone { margin: 6px 0 0; }
.door-phone a { color: inherit; font-weight: 600; text-underline-offset: 4px; }
.contact-bottom { display: grid; grid-template-columns: minmax(0, 760px); gap: clamp(40px, 5vw, 64px); padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 96px); }
.contact-bottom h2 { margin: 0 0 16px; }
.form { display: grid; gap: 16px; max-width: 520px; }
.form label { display: block; margin-bottom: 6px; font-weight: 500; }
.form input, .form textarea { display: block; width: 100%; padding: 12px 14px; border: 1.5px solid color-mix(in srgb, var(--text) 60%, var(--paper)); border-radius: var(--radius); background: var(--paper); color: var(--text); font: inherit; }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.form .button { justify-self: start; }
.form-note { margin: 12px 0 0; color: var(--quiet); font-size: 15px; }
.form-status { margin: 0; color: var(--ink); font-weight: 600; }
/* Honeypot: parked off-screen, never display:none, so a bot fills it and a person never sees it. */
.form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* No-JS result: the relay sends the visitor back to #sent or #not-sent (the id beats the UA [hidden] rule). */
#sent:target, #not-sent:target { display: block; }
.reviews p { margin: 0; max-width: 48ch; }
.reviews a { color: var(--ink); font-weight: 600; text-underline-offset: 4px; }

/* Cannot ship by accident: the protocol's hot-pink placeholder for text that does not exist yet. */
.todo-block { max-width: 62ch; margin: 8px 0 clamp(56px, 7vw, 96px); padding: 22px 24px; border-radius: var(--radius); background: #C4007A; color: #fff; font-size: 1.05rem; line-height: 1.5; }
.todo-block strong { display: block; margin-bottom: 8px; font-size: 1.15rem; }

@media (max-width: 760px) {
  .gallery { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c" "d" "e" "f" "g" "h"; padding-bottom: 56px; }
  .gallery .photo-slot { min-height: 180px; }
  .gallery .photo-slot.g1 { min-height: 280px; }
  .price-groups.sheet { columns: 1; }
  .sheet-notes { display: block; padding-top: 40px; }
  .sheet-notes h2 { margin-bottom: 14px; }
  .about-head { padding-bottom: 36px; }
  .answers { padding-top: 56px; }
  .answers dl { display: block; margin-top: 24px; }
  .answers dt + dd { margin-top: 6px; }
  .answers dd + dt { margin-top: 28px; }
  .contact-bottom { padding-top: 40px; padding-bottom: 64px; }
  .page-end { padding-top: 32px; padding-bottom: 64px; }
}