/* ===========================================================
   THE LASH & GLOW CAFE
   Cumming, Georgia. Ciera, sole artist.

   THIRD build. The palette and logo are no longer our guess:
   Ciera sent her actual brand guide on 23 Aug 2026 and these are
   her designer's hex codes, straight off page 5 of the PDF.

   She also said in her onboarding: "I'm not big on neutral
   colors... I love intentional color, typography w attitude,
   a little depth, space to breathe & simple nav basically eye
   candy." Build two was white and ink and cherry. It was wrong
   in the other direction. This is her brand.

   TYPE. Her guide specifies Vandalism (brush), Enchant (soft
   blackletter) and Avenir Heavy. Vandalism and Enchant are
   licensed desktop faces and both live in the logo artwork, so
   they are used as art, not as webfonts. Avenir has no web
   licence here either, so body and headings use Figtree, which
   is the closest free geometric humanist. Archivo Black carries
   the big statements, matching the heavy condensed caps she
   already uses on her own Instagram graphics.
   Substituting a client's specified typeface is a brand
   decision, not a default. Deliberately still avoiding Inter,
   Geist, Space Grotesk, Instrument Serif, Fraunces, Playfair.

   SHAPE. Squared containers, pill buttons. Her identity is
   bubbly (sticker outlines, circular badge, smileys) so pills
   are on-brand; the documented tell is 24px+ radius on cards,
   which this does not do.

   ONE PRIMITIVE, kept from build two because it works: the
   ruled row. Prices, hours, policies, kit contents, studio
   facts.

   MOTION. None on scroll. Nothing hidden at rest.
   =========================================================== */

:root {
  /* Her brand guide, page 5, verbatim */
  --hot:      #f20775;
  --coral:    #ff5e42;
  --pink:     #f995c4;
  --pale:     #f6d1e5;
  --yellow:   #facc53;

  --ink:      #2a0b1c;   /* deep plum-black; reads warm against the pinks */
  --ink-2:    #6b4356;
  --ink-3:    #9c7788;
  --paper:    #ffffff;
  --rule:     #f0cfdf;
  --rule-2:   #f8e6ef;

  --sans:     'Figtree', -apple-system, 'Segoe UI', sans-serif;
  --display:  'Archivo Black', 'Figtree', sans-serif;

  --edge:  clamp(18px, 5vw, 76px);
  --wide:  1260px;
  --read:  60ch;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase; }
h1 { font-size: clamp(40px, 7.2vw, 86px); }
h2 { font-size: clamp(28px, 4.4vw, 52px); }
h3 { font-size: clamp(17px, 1.9vw, 22px); line-height: 1.15; letter-spacing: -0.01em; }
h4 { font-family: var(--sans); font-size: 17px; font-weight: 800; }

p { max-width: var(--read); }
p + p { margin-top: 1em; }
strong { font-weight: 800; }

::selection { background: var(--hot); color: #fff; }
:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 10px; top: 10px; z-index: 99; background: var(--ink); color: #fff; padding: 10px 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ---- rhythm ---- */
.wrap { max-width: var(--wide); margin: 0 auto; padding-left: var(--edge); padding-right: var(--edge); }
.s-lg { padding-top: clamp(64px, 10vw, 132px); padding-bottom: clamp(64px, 10vw, 132px); }
.s-md { padding-top: clamp(36px, 4.6vw, 64px);   padding-bottom: clamp(44px, 6vw, 84px); }
.s-sm { padding-top: clamp(28px, 3.6vw, 48px); padding-bottom: clamp(28px, 3.6vw, 48px); }

.on-pale { background: var(--pale); }
.on-pink { background: var(--pink); }
.on-hot  { background: var(--hot); color: #fff; }
.on-hot h1, .on-hot h2, .on-hot h3 { color: #fff; }
.on-hot p { color: rgba(255,255,255,.92); }
.on-hot .tick { color: rgba(255,255,255,.75); }
.on-hot .rows, .on-hot .row { border-color: rgba(255,255,255,.3); }
.on-hot .row .n { color: rgba(255,255,255,.85); }
.on-hot .tx a:not(.cta) { color: #fff; border-bottom-color: rgba(255,255,255,.7); }
.on-hot .tx a:not(.cta):hover { background: #fff; color: var(--hot); }

.tick { font-size: 14.5px; color: var(--ink-2); font-weight: 600; }
.lead { font-size: clamp(18px, 2.1vw, 22px); line-height: 1.45; max-width: 32ch; font-weight: 500; }

/* ---- her sparkle, traced from the logo artwork ----
   A straight-edged polygon reads as a plus sign, not a sparkle. The four
   points need concave sides, which clip-path polygon cannot express, so this
   is a curved SVG path in the brand coral. */
.spark { display: inline-block; width: .8em; height: .8em; vertical-align: -0.04em;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0Q56 44 100 50Q56 56 50 100Q44 56 0 50Q44 44 50 0Z' fill='%23ff5e42'/%3E%3C/svg%3E"); }
.on-hot .spark, .on-pink .spark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0Q56 44 100 50Q56 56 50 100Q44 56 0 50Q44 44 50 0Z' fill='%23facc53'/%3E%3C/svg%3E"); }

/* ---- nav ---- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: var(--wide); margin: 0 auto; padding: 14px var(--edge); }
.nav .home { display: flex; align-items: center; gap: 11px; }
.nav .home img { width: 46px; height: 46px; }
.nav .home span { font-family: var(--display); font-size: 15px; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; max-width: 8ch; color: var(--hot); }
.nav ul { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 28px); list-style: none; flex-wrap: wrap; margin-left: auto; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.only-mobile { display: none; }
.burger { display: none; width: 42px; height: 38px; background: none; border: 2px solid var(--rule);
  border-radius: 999px; cursor: pointer; padding: 0; position: relative; }
.burger span { position: absolute; left: 11px; width: 18px; height: 2px; background: var(--hot);
  transition: transform .2s ease, opacity .2s ease; }
.burger span:nth-child(1) { top: 12px; } .burger span:nth-child(2) { top: 17px; } .burger span:nth-child(3) { top: 22px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 17px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 17px; transform: rotate(-45deg); }
.nav a { font-size: 15.5px; font-weight: 700; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--hot); }
.nav a[aria-current] { color: var(--hot); border-bottom-color: var(--hot); }
.nav .book { background: var(--hot); color: #fff; border-radius: 999px; padding: 10px 22px; border-bottom: 0; }
.nav .book:hover { background: var(--ink); border-bottom: 0; }

/* ---- images: cap the height, crop instead of growing the page ---- */
.hero-shot img { width: 100%; aspect-ratio: 4/5; object-fit: cover; max-height: 58vh; }
.duo img { width: 100%; max-height: 480px; object-fit: cover; object-position: center 30%; }
.duo.mid img { max-height: 520px; }

/* ---- hero ---- */
/* .hero is the simple two-column head used by the interior pages.
   The homepage uses .shot-hero below, which is a composed image, not a grid. */
.hero { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  gap: clamp(20px,3vw,40px) clamp(24px,4vw,64px); align-items: center; }
.hero .lead { margin-top: 18px; }

/* ---- HOMEPAGE HERO ---------------------------------------------------
   One composed picture rather than a stack. The photo fills the frame, the
   logo sits on it like the sticker it actually is, slightly off-square
   because stickers never land straight, and a solid pink bar carries the
   headline and the booking button. No scrim gradient: the bar is opaque, so
   the type never sits on the photo and legibility does not depend on a wash.
   -------------------------------------------------------------------- */
/* Column, not a stack of absolutes: the media box owns the logo, so the
   sticker can never be clipped by the bar the way it was when both were
   positioned against the whole hero. */
.shot-hero { background: var(--pale); height: min(88vh, 820px);
  display: flex; flex-direction: column; }
.shot-hero-media { position: relative; flex: 1 1 auto; min-height: 45vh; overflow: hidden; }
.shot-hero-media > picture { position: absolute; inset: 0; }
.shot-hero picture img { width: 100%; height: 100%; object-fit: cover; object-position: center 56%; }
.shot-hero-logo { position: absolute; z-index: 2;
  top: clamp(14px, 4vh, 46px); left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: min(56%, 290px); max-height: 66%; height: auto; object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(42,11,28,.3)); }
.shot-hero-bar { position: relative; z-index: 2; width: 100%; flex: 0 0 auto;
  background: var(--hot); color: #fff;
  padding: clamp(20px,3vw,32px) var(--edge) clamp(22px,3.2vw,34px); }
.shot-hero-in { max-width: var(--wide); margin: 0 auto; }
.shot-hero-bar h1 { color: #fff; font-size: clamp(30px, 5.6vw, 56px); line-height: 1; }
.shot-hero-sub { color: rgba(255,255,255,.93); margin-top: 11px; max-width: 46ch; font-weight: 500; }
.shot-hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (min-width: 861px) {
  .shot-hero-logo { left: auto; right: var(--edge); transform: rotate(-3deg); width: min(26%, 280px); }
}
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }

/* ---- THE PRIMITIVE ---- */
.rows { border-bottom: 2px solid var(--rule); }
.row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px clamp(14px,4vw,44px);
  align-items: baseline; padding: clamp(13px,1.5vw,19px) 0; border-top: 2px solid var(--rule); }
.row .k { font-size: 17.5px; font-weight: 800; }
.row .v { font-weight: 800; white-space: nowrap; text-align: right; color: var(--hot); font-size: 17.5px; }
.row .n { grid-column: 1 / 2; color: var(--ink-2); font-size: 15.5px; max-width: 54ch; }
@media (max-width: 620px) { .row { grid-template-columns: 1fr; } .row .v { text-align: left; grid-column: 1; } }
.facts .k { font-weight: 600; color: var(--ink-2); font-size: 15.5px; }
.facts .v { font-size: 15.5px; white-space: normal; text-align: right; max-width: 44ch; color: var(--ink); font-weight: 700; }
@media (max-width: 620px) { .facts .v { text-align: left; } }

/* ---- headings ---- */
.head { margin-bottom: clamp(20px,2.6vw,34px); }
.head p { margin-top: 12px; color: var(--ink-2); }
.head h2 .amp { color: var(--coral); }

/* ---- prose ---- */
.tx a:not(.cta) { border-bottom: 2px solid var(--hot); color: var(--hot); font-weight: 700; }
.tx a:not(.cta):hover { background: var(--hot); color: #fff; }
.tx h3 { margin-top: clamp(26px,3vw,38px); margin-bottom: 9px; }
.tx h3:first-child { margin-top: 0; }
.tx ul { margin: 12px 0 0; padding-left: 20px; max-width: var(--read); }
.tx li { margin-bottom: 7px; }
.tx li::marker { color: var(--hot); }

/* ---- buttons ---- */
.cta { display: inline-block; font-weight: 800; font-size: 16px; border-radius: 999px;
  background: var(--hot); color: #fff; padding: 14px 28px; border: 2px solid var(--hot); }
.cta:hover { background: var(--ink); border-color: var(--ink); }
.cta.out { background: transparent; color: var(--ink); border-color: var(--ink); }
.cta.out:hover { background: var(--ink); color: #fff; }
.cta.pale { background: #fff; color: var(--hot); border-color: #fff; }
.cta.pale:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.cta.ghostw { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.cta.ghostw:hover { background: #fff; color: var(--hot); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px,3vw,32px); }

/* ---- two columns, uneven ---- */
.duo { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(26px,4.5vw,72px); align-items: start; }
.duo.flip { grid-template-columns: minmax(0,7fr) minmax(0,5fr); }
.duo.mid { align-items: center; }
@media (max-width: 860px) { .duo, .duo.flip { grid-template-columns: 1fr; } }

/* ---- gallery ---- */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gal figure { margin: 0; }
.gal img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.gal figcaption { font-size: 13.5px; font-weight: 700; color: var(--ink-2); padding-top: 7px; }
.gal .tall img { aspect-ratio: 4/5; }
.gal .wide { grid-column: span 2; }
.gal .wide img { aspect-ratio: 8/5; }
@media (max-width: 900px) { .gal { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .gal { grid-template-columns: 1fr; } .gal .wide { grid-column: span 1; } }

/* ---- her words / reviews ---- */
.said { font-size: clamp(19px,2.3vw,26px); line-height: 1.35; font-weight: 600; max-width: 26ch; }
.who { margin-top: 14px; font-size: 14px; font-weight: 800; color: var(--hot); letter-spacing: .02em; }
.on-hot .who { color: #fff; }   /* yellow on hot pink measured 2.73:1; white is 4.9:1 */

.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,3vw,38px); }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .reviews { grid-template-columns: 1fr; } }
.review p { font-size: 16.5px; line-height: 1.5; max-width: none; }
.review .who { margin-top: 10px; }

.score { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.score { align-items: center; gap: clamp(16px,3vw,34px); }
.score b { font-family: var(--display); font-size: clamp(52px,8vw,96px); line-height: .9; color: var(--hot); }
.on-hot .score b { color: #fff; }
.score .stars { color: #fff; font-size: 20px; letter-spacing: 2px; }

/* ---- homepage benefit blocks ----
   Three blocks because the client asked for three. Deliberately NOT the
   three-equal-cards-with-an-icon pattern: no boxes, no borders on the sides,
   no icons. Just a hairline above each and the site's own type scale, so it
   reads as the ruled primitive used everywhere else. */
.bens { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,3vw,40px); }
.ben { border-top: 3px solid var(--hot); padding-top: 16px; }
.ben h2 { font-size: clamp(19px, 2.1vw, 25px); margin-bottom: 10px; }
.ben p { font-size: 16px; max-width: none; }
@media (max-width: 860px) { .bens { grid-template-columns: 1fr; gap: 22px; } }

/* small print under the hero button */
.shot-hero-note { color: rgba(255,255,255,.9); font-size: 14px; font-weight: 600; margin-top: 12px; }

/* ---- review scroller ----
   Native horizontal scroll with snap, not an auto-playing marquee: a marquee
   moves text out from under people who read slowly, cannot be paused, and is
   one of the documented generated-UI tells. Swipe works on a phone, the
   scrollbar and the arrow keys work on a desktop. */
.rev-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 0 16px; margin: 0 calc(var(--edge) * -1); padding-left: var(--edge); padding-right: var(--edge);
  /* scroll-snap-align:start snaps to the SCROLLPORT edge, not the padding box,
     so without this the first card sits flush against the screen edge while
     the heading above it is indented. */
  scroll-padding-left: var(--edge); scroll-padding-right: var(--edge);
  scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.rev-rail::-webkit-scrollbar { height: 8px; }
.rev-rail::-webkit-scrollbar-thumb { background: var(--hot); }
.rev-rail::-webkit-scrollbar-track { background: rgba(255,255,255,.45); }
.rev-rail > figure { flex: 0 0 min(84%, 330px); scroll-snap-align: start; margin: 0;
  background: #fff; border: 2px solid var(--rule); padding: 20px 20px 18px;
  display: flex; flex-direction: column; }
.rev-rail blockquote { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); flex: 1; }
.rev-rail figcaption { margin-top: 14px; font-size: 13.5px; font-weight: 800; color: var(--hot); }
.rev-rail .rs { color: var(--coral); font-size: 15px; letter-spacing: 1px; margin-bottom: 9px; display: block; }
.rev-hint { font-size: 13.5px; font-weight: 700; color: var(--ink-2); margin-top: 2px; }
.on-pink .rev-hint { color: var(--ink); }
.on-hot .rev-hint { color: rgba(255,255,255,.9); }
.on-hot .rev-rail { margin-top: clamp(20px, 3vw, 30px); }
.on-hot .rev-rail::-webkit-scrollbar-track { background: rgba(255,255,255,.28); }
.on-hot .rev-rail::-webkit-scrollbar-thumb { background: #fff; }
.on-hot .rev-rail > figure { border-color: rgba(255,255,255,.5); }
/* Auto-advance pauses on hover, focus and touch, and never runs at all when
   the visitor has asked for reduced motion. Scroll-snap keeps it swipeable. */
.rev-rail { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .rev-rail { scroll-behavior: auto; } }
@media (max-width: 620px) { .rev-rail > figure { flex-basis: 84%; } }

/* ---- FAQ, plain ---- */
.qa { border-top: 2px solid var(--rule); padding-top: clamp(20px,2.4vw,28px); margin-top: clamp(20px,2.4vw,28px); }
.qa:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.qa h3 { margin-bottom: 9px; }

/* ---- forms ---- */
.form { max-width: 620px; }
.f { margin-bottom: 18px; }
.f label { display: block; font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.f input, .f select, .f textarea { width: 100%; background: #fff; border: 2px solid var(--rule);
  padding: 12px 14px; font-size: 16.5px; border-radius: 0; }
.f textarea { min-height: 124px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--hot); }
.f .help { font-size: 13.5px; color: var(--ink-2); margin-top: 5px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .two { grid-template-columns: 1fr; } }
.ok { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0; max-width: var(--read); }
.ok input { width: 18px; height: 18px; margin-top: 4px; flex: 0 0 auto; accent-color: var(--hot); }
.ok label { font-size: 14px; font-weight: 500; color: var(--ink-2); line-height: 1.5; margin: 0; }
.hp { position: absolute; left: -9999px; }
.form button { background: var(--hot); color: #fff; border: 2px solid var(--hot); border-radius: 999px;
  font-weight: 800; font-size: 16px; padding: 14px 30px; cursor: pointer; }
.form button:hover { background: var(--ink); border-color: var(--ink); }

/* ---- map ---- */
.map { border: 2px solid var(--rule); line-height: 0; }
.map iframe { width: 100%; height: 380px; border: 0; display: block; }

/* ---- footer ---- */
.foot { background: var(--ink); color: #fff; }
.foot a { color: #fff; }
.foot a:hover { color: var(--yellow); }
.foot-in { max-width: var(--wide); margin: 0 auto; padding: clamp(34px,4.4vw,56px) var(--edge) 26px;
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 24px 44px; align-items: start; }
.foot .badge { width: 92px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot nav a { font-weight: 700; font-size: 15.5px; }
.foot address { font-style: normal; font-size: 15px; line-height: 1.7; text-align: right; color: rgba(255,255,255,.85); }
.foot-btm { max-width: var(--wide); margin: 0 auto; padding: 0 var(--edge) 28px;
  font-size: 13px; color: rgba(255,255,255,.55); display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between; }
@media (max-width: 860px) {
  .foot-in { grid-template-columns: 1fr; }
  .foot address { text-align: left; }
}

/* ---- colour-surface overrides ----
   Found by a contrast audit of the live site, not by reading the CSS.
   Component colours must win over surface colours, and anything sitting on a
   coloured band needs its own value. .who at --hot on --pink measured 2.00:1
   and the SMS consent label at --ink-2 on --hot measured 1.98:1, which for a
   consent control is not acceptable at any standard. */
.on-pink .who, .on-pale .who { color: var(--ink); }
/* Hot pink prose links on the pale band measure 3.00:1. Ink text with a hot
   underline keeps the brand cue and passes. */
.on-pale .tx a:not(.cta) { color: var(--ink); border-bottom-color: var(--hot); }
.on-pale .tx a:not(.cta):hover { background: var(--hot); color: #fff; }
.on-pink .review p { color: var(--ink); }
.on-hot .f label { color: #fff; }
.on-hot .f .help { color: rgba(255,255,255,.85); }
.on-hot .ok label { color: rgba(255,255,255,.95); }
.on-hot .f input, .on-hot .f select, .on-hot .f textarea { border-color: rgba(255,255,255,.55); }
.on-hot .form button { background: #fff; color: var(--hot); border-color: #fff; }
.on-hot .form button:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

@media print { .nav .book, .map { display: none; } }

/* =========================================================
   MOBILE LAYOUT — keep this block LAST.
   Media queries do not raise specificity, so a mobile rule placed above an
   equally specific desktop rule loses.

   This is not "the desktop layout, smaller". Three earlier attempts shrank
   values and it still read badly, because the structure was wrong: a two-row
   wrapping nav that pushed everything down, a hero that led with a huge logo,
   and desktop section padding on a 390px screen. On a phone this is a booking
   page first, so the header is sticky and carries Book, the hero leads with
   the work rather than the logo, and the vertical rhythm is roughly halved.
   ========================================================= */
@media (max-width: 860px) {

  /* --- sticky compact header. Book never scrolls away. --- */
  .nav { position: sticky; top: 0; z-index: 60; background: #fff;
    border-bottom: 2px solid var(--rule); padding: 8px var(--edge);
    flex-wrap: nowrap; gap: 10px; }
  .nav .home img { width: 34px; height: 34px; }
  .nav .home span { font-size: 12px; max-width: 7ch; }
  .nav-right { margin-left: auto; }
  .nav .book { padding: 9px 16px; font-size: 14px; }
  .burger { display: block; }
  .only-mobile { display: list-item; }

  /* links become a dropdown panel instead of a second wrapped row */
  .nav ul { display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: #fff; border-bottom: 2px solid var(--rule);
    padding: 4px var(--edge) 10px; box-shadow: 0 12px 24px rgba(42,11,28,.12); }
  .nav ul.open { display: flex; }
  .nav ul li { border-top: 1px solid var(--rule-2); }
  .nav ul a { display: block; padding: 13px 0; font-size: 16px; border-bottom: 0; }
  .nav ul a[aria-current] { border-bottom: 0; }

  /* --- homepage hero on a phone --- */
  .shot-hero { height: min(86vh, 720px); }
  .shot-hero-logo { width: min(66%, 250px); top: 4vh; }
  .shot-hero picture img { object-position: center 60%; }
  .shot-hero-bar h1 { font-size: clamp(28px, 8.4vw, 40px); }
  .shot-hero-sub { font-size: 16px; margin-top: 9px; }
  .shot-hero-ctas { gap: 8px; align-items: center; margin-top: 15px; }
  .shot-hero-ctas .cta.pale { flex: 1 1 100%; text-align: center; }
  /* the secondary action becomes a link, so the bar keeps its height for the
     photo rather than for a second pill */
  .shot-hero-ctas .cta.ghostw { border: 0; background: none; padding: 4px 0;
    text-decoration: underline; text-underline-offset: 4px; font-size: 15.5px; }
  .hero { grid-template-columns: 1fr; gap: 16px; }

  /* --- vertical rhythm, roughly halved --- */
  .s-lg { padding-top: 42px; padding-bottom: 42px; }
  .s-md { padding-top: 30px; padding-bottom: 34px; }
  .s-sm { padding-top: 22px; padding-bottom: 22px; }
  .duo, .duo.flip { grid-template-columns: 1fr; gap: 20px; }
  .duo img { max-height: 240px; }
  .head { margin-bottom: 16px; }

  h1 { font-size: clamp(32px, 8.5vw, 46px); }
  h2 { font-size: clamp(25px, 6.8vw, 36px); }
  h3 { font-size: 17px; }
  body { font-size: 16.5px; }
  p { max-width: none; }
  .lead { max-width: none; }
  .said { font-size: 21px; max-width: none; }

  /* --- the price menu stays a menu: name left, price right --- */
  .row { grid-template-columns: minmax(0,1fr) auto; gap: 3px 14px; padding: 13px 0; }
  .row .v { text-align: right; grid-column: 2 / 3; grid-row: 1 / 2; white-space: nowrap; }
  .row .n { grid-column: 1 / -1; font-size: 14.5px; }
  .facts .v { max-width: 60vw; }

  /* --- full-width buttons read better than two half-width pills --- */
  .ctas { gap: 10px; }
  .ctas .cta { flex: 1 1 100%; text-align: center; }

  .gal { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gal .wide { grid-column: span 2; }
  .gal figcaption { font-size: 12.5px; }

  .score b { font-size: 58px; }
  .score { gap: 14px; }

  .foot-in { grid-template-columns: 1fr; gap: 18px; padding-top: 30px; }
  .foot address { text-align: left; }
  .foot .badge { width: 64px; }

  .map iframe { height: 280px; }

  /* chat button: icon only, so it stops covering content */
  .lg-fab span:not(.lg-dots) { display: none; }
  .lg-fab { padding: 15px; border-radius: 50%; right: 12px; bottom: 12px; }
  .lg-fab svg { width: 22px; height: 22px; }
}

@media (max-width: 430px) {
  /* The portfolio page goes full width, because there the work IS the page and
     there is no lightbox to enlarge a thumbnail. The homepage block is a teaser
     that links onward, so it stays a 2-up grid and saves about 900px of scroll. */
  .gal { grid-template-columns: 1fr; }
  .gal.teaser { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gal.teaser img { aspect-ratio: 1/1; }
  .gal .wide { grid-column: span 1; }
  .hero .logo { width: min(62%, 180px); }
  .rev-rail > figure { flex-basis: 88%; padding: 17px; }
}