/* ==========================================================================
   NaahiXtension · styles.css
   Every value here comes from docs/design-system.md. Nothing is invented at
   the point of use.

   The five laws this file exists to hold:
     1. Radii are 999px or 0px. Nothing between 1px and 31px.
     2. No shadows. Depth is a surface step or light inside a photograph.
     3. One accent, on interactive elements only, twice per screen at most.
     4. Two families. Display weight 400. Hierarchy from size and space.
     5. Space has two registers: <=32px inside a group, 96-160px between.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  /* dark register */
  --abyss:#241318;
  --surface:#2E191F;
  --interactive:#3A2028;
  --starlight:#F4EAE3;
  --silver:#A89189;
  --rule-dark:rgba(244,234,227,.16);

  /* light register */
  --linen:#F7F0EA;
  --linen-deep:#EFE5DC;
  --ink:#1C1114;
  --muted:#6E564F;
  --rule:rgba(28,17,20,.14);

  /* the one accent. CTA fills and focus rings. Nothing else, ever. */
  --accent:#B9304A;
  --accent-hover:#A82740;

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --wrap:1220px;
  --gut:32px;

  /* the two registers, named so nothing improvises a third */
  --tight:24px;
  --tighter:14px;
  --seam:104px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
/* clip, not hidden: hidden silently breaks position:sticky, which the nav and
   every pinned plate depend on */
html,body{overflow-x:clip;max-width:100%}
body{margin:0;background:var(--linen);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video,canvas{max-width:100%;display:block}
/* the UA default on <figure> is margin:1em 40px, which quietly took 80px off
   the width of every photograph in the gallery grid */
figure,blockquote,dl,dd{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

/* One visible focus treatment for the whole site, and it is the only other
   place the accent is allowed to appear. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:999px}
.band-dark :focus-visible{outline-color:#F0899C}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* --------------------------------------------------------------- type scale
   Display 66px against 17px body is 3.88x, inside the <=4x law and within a
   pixel of mercury.com's measured 65.3px. Weight never exceeds 400 on the
   display face; authority is scale and space. */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;
  font-variation-settings:'SOFT' 0,'WONK' 0}
.d1{font-size:clamp(40px,6.2vw,66px);line-height:1.06;letter-spacing:-.015em}
.d2{font-size:clamp(32px,4.4vw,46px);line-height:1.12;letter-spacing:-.012em}
.d3{font-size:clamp(26px,2.9vw,32px);line-height:1.20;letter-spacing:-.008em}
.sub{font-size:clamp(19px,1.6vw,21px);line-height:1.45;color:var(--muted);
  max-width:52ch;margin:0}
.band-dark .sub{color:var(--silver)}
p{margin:0 0 var(--tight)}
p:last-child{margin-bottom:0}
.lede{font-size:19px;line-height:1.6;max-width:56ch}
/* No bold inside body copy anywhere on this site. Emphasis is an ink change
   or a family switch at the same weight. A critic measures stroke width. */
strong,b{font-weight:400;color:var(--ink)}
.band-dark strong,.band-dark b{color:var(--starlight)}

.eyebrow{font-size:12.5px;font-weight:500;letter-spacing:.10em;
  text-transform:uppercase;color:var(--muted);margin:0 0 var(--tight);
  display:block}
.band-dark .eyebrow{color:var(--silver)}

/* ------------------------------------------------------------------ shape
   999px or 0px. Grep this file: there is no third value. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:999px;border:1px solid transparent;cursor:pointer;
  padding:15px 30px;font-size:16px;font-weight:400;letter-spacing:.01em;
  min-height:48px;
  transition:background 450ms cubic-bezier(.22,.61,.36,1),
             color 450ms cubic-bezier(.22,.61,.36,1),
             border-color 450ms cubic-bezier(.22,.61,.36,1),
             transform 420ms cubic-bezier(.22,.61,.36,1)}
.btn-primary{background:var(--accent);color:var(--linen);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ink{background:var(--ink);color:var(--linen);border-color:var(--ink)}
.btn-ink:hover{background:#2A1A1E;border-color:#2A1A1E;transform:translateY(-2px)}
.btn-ink:active{transform:translateY(0)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.band-dark .btn-ghost{color:var(--starlight);border-color:var(--rule-dark)}
.band-dark .btn-ghost:hover{border-color:var(--starlight)}
.btn-light{background:var(--starlight);color:var(--abyss);border-color:var(--starlight)}
.btn-light:hover{transform:translateY(-2px)}
.btn-block{width:100%}
.btn-sm{padding:11px 20px;font-size:15px;min-height:44px}
/* a link that lives inside an answer becomes its own control rather than a
   run of underlined words inside a line box, which cannot be made a 44px
   target without wrecking the leading */
.qa-link{margin-top:14px}
.band-surface .qa-link{color:var(--starlight);border-color:var(--rule-dark)}
.band-surface .qa-link:hover{border-color:var(--starlight)}
.btn-lg{padding:19px 38px;font-size:16px;min-height:58px}

/* Cards, panels, images, containers: square. This is the tension that stops
   the page reading as a template, and it is the single most visible thing
   being replaced. */
.card,.panel,figure,.shot{border-radius:0}

/* ------------------------------------------------------------------- nav */
nav{position:fixed;top:0;left:0;right:0;z-index:40;height:68px;display:flex;align-items:center;
  transition:background 500ms ease,border-color 500ms ease,backdrop-filter 500ms ease;
  background:rgba(247,240,234,.86);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--rule)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:0}
.brand i{font-style:normal;color:var(--muted)}
.navlinks{display:flex;align-items:center;gap:30px;font-size:15px;color:var(--muted)}
.navlinks a{transition:color 420ms ease}
.navlinks a:hover{color:var(--ink)}
/* over the full-bleed hero the nav is transparent and its ground comes from
   the photograph's own top light, not a scrim doing art direction's job */
/* Over the hero the nav FLOATS on the photograph rather than slicing it: the
   picture runs full bleed to y=0 and the bar sits on top of it, translucent.
   Fully transparent was tried and fails on this particular frame, which is a
   bright curtain on the left and a dark wall on the right: ink measured 10.7:1
   under the wordmark and 2.18:1 under the links, and no single ink or light
   value clears both. A 0.72 ground clears everything at 10.9:1 and up while
   still showing the room through it. */
body.hero-dark nav{background:rgba(247,240,234,.72);border-bottom-color:transparent;
  backdrop-filter:saturate(160%) blur(16px)}
/* The nav sits on the brightest part of the picture, the morning window, so
   it is INK rather than starlight: measured 8.74:1 on the desk and 7.82:1 on
   the phone against the pixels behind it. Light type there measured 1.55:1
   and would have needed a scrim to fix, which is art direction done in CSS. */
body.hero-dark nav .brand,body.hero-dark nav .navlinks a{color:var(--ink)}
body.hero-dark nav .brand i{color:var(--muted)}
body.hero-dark nav .navlinks a:hover{color:var(--ink)}
.nav-cta{padding:11px 22px;font-size:15px;min-height:42px}

/* ------------------------------------------------------------------ hero
   Mechanism 1: the picture is the loudest thing on the first screen, and the
   headline sits inside the room's own cast shadow rather than on a CSS
   scrim. Measured: the lower-left quadrant of the scene reads 4.39:1 and
   5.23:1 against #F4EAE3, both clear of the 3:1 floor for large text. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--abyss)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media picture{display:block;position:absolute;inset:0}
/* Two framings of ONE photograph, chosen by measurement rather than by taste.
   Desktop is the master cropped to 1760x1100 (exactly the 16:10 the viewport
   asks for, so object-fit adds no second crop) and the copy field over the
   wooden floor measures 4.55:1 against the type. The phone is the same
   photograph cropped 647x1400, and its copy field measures 4.41:1. Both clear
   the 3:1 floor for large text on the room's own shadow, with a 0.22 whisper
   at the foot and nothing else. */
.hero-media .hero-still{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* the one gradient on this page, and it is a whisper: 0.22 at the foot only,
   holding the type where the room's own shadow already falls. Anything
   heavier is art direction being done in CSS. */
/* The whisper. It peaks at 0.25 and starts at 38% of the frame, following the
   floor's own light falloff rather than replacing it. Measured with it in
   place: every 40px band the copy sits on clears 4.4:1 on the desk and 4.5:1
   on the phone. Take it out entirely and the copy still clears 3:1 from
   y=480 down, because the darkening is in the room. */
.hero-media::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(36,19,24,0) 38%,rgba(36,19,24,.14) 62%,rgba(36,19,24,.25) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:96px;padding-bottom:52px}
.hero .eyebrow{color:rgba(244,234,227,.82)}
.hero h1{color:var(--starlight);max-width:15ch}
.hero p{color:rgba(244,234,227,.90);max-width:44ch;font-size:19px;line-height:1.6;
  margin:var(--tight) 0 0}
.hero .btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
/* The secondary is a solid light pill rather than an outline. An outlined
   button over a photograph puts its LABEL on the picture, and the label
   measured 2.6:1 there; a filled pill puts the label on its own surface and
   measures 14.9:1. Mercury pairs a saturated primary with a light secondary
   for the same reason. */
.hero .btns .btn-ghost{background:var(--starlight);color:var(--abyss);
  border-color:var(--starlight)}
.hero .btns .btn-ghost:hover{background:var(--linen);border-color:var(--linen);
  transform:translateY(-2px)}
.hero .heronote{margin-top:22px;font-size:14.5px;color:rgba(244,234,227,.78)}
.hero .heronote span{color:var(--starlight)}
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(244,234,227,.6)}

/* ------------------------------------------------------------- chapters */
section{position:relative}
/* A chapter's own air is HALF a seam, because a seam is shared: the run a
   reader sees at a surface change is this chapter's bottom plus the next
   chapter's top. 52 + 52 = 104px, inside the 96-160 register and split
   evenly, which is what stops a seam reading lopsided even when it measures
   legal. A pinned chapter overrides this to 0 and buys its air from the rig
   instead (see .pin-on and SEAM in motion.js). */
.band{padding:52px 0}
.band-dark{background:var(--abyss);color:var(--starlight)}
.band-dark h1,.band-dark h2,.band-dark h3{color:var(--starlight)}
.band-deep{background:var(--linen-deep)}
.band-surface{background:var(--surface);color:var(--starlight)}
/* column-gap is the seam between the claim and its sub; ROW gap is zero,
   because the eyebrow and the headline it labels are one group and the
   eyebrow already carries its own 24px. Set as `gap` it put 128px between
   a label and the line it labels. */
.chapter-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  column-gap:var(--seam);row-gap:0;align-items:end}
.ch-claim{grid-column:1}
.chapter-head .eyebrow{margin:0 0 var(--tight)}
.chapter-head .d2{margin:0;max-width:20ch}
.chapter-head .sub{grid-column:2;margin:0 0 6px;max-width:38ch}

/* ------------------------------------------- SP1  the room draws itself
   Held under scroll, an empty bedroom becomes the room she works in: window,
   then curtains and light, then the bed frame, then the linen, then the tray.
   Line art rather than a photograph, because there is one photograph of this
   room and cropping it again to fake a second scene is exactly what this build
   refuses to do.

   With no JavaScript the .motion-ready class is never added, so every stroke
   is simply drawn and the three steps read as an ordinary numbered list. */
/* The plate fills the viewport and the composition is centred in it, so for
   the whole of the hold the reader sees nothing but the room changing. A plate
   that only occupies half the screen reads as a section going past; one that
   fills it reads as being stopped. */
/* THE PLATE IS CONTENT HEIGHT, and this was tried the other way.
   Making the four pinned plates a full viewport with the composition centred
   does give a longer hold, and it reads better while held. It also produced
   four blank bands over 160px (388, 288, 169) and live seams of 154, 73, 30,
   -133 and 15px on the desk: a negative seam is the incoming chapter painting
   over the outgoing one, which is the exact fault ruling 23k and law 37 exist
   to stop. Measured, not guessed. The hold is bought back a different way:
   the composition plays in the TAIL of the rig's timeline (see `held` in
   motion.js) so it finishes under the stuck plate instead of before it. */
/* inside a held plate the price list is tighter than it is in flow: the slack
   it gives up is exactly what the chapter holds on */
#menu.pin-on .mrow{padding:10px 0}
#menu.pin-on .mtime{margin-top:0}
#menu.pin-on .mrow .mmeta{margin-top:4px}
#menu.pin-on .menu-foot{margin-top:14px}
.arrive-stage{margin-top:8px;display:grid;gap:16px}
.roomdraw{width:100%;max-width:840px;margin:0 auto;height:auto;
  display:block;color:var(--ink);opacity:.92}
.motion-ready .roomdraw .rd{stroke-dasharray:var(--len,1200);
  stroke-dashoffset:var(--off,0)}

.asteps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tight)}
.astep{position:relative;padding:0 0 0 40px}
.astep h3{margin:0 0 6px;max-width:20ch;font-size:20px;
  font-family:var(--display);font-weight:400;line-height:1.25}
.astep p{color:var(--muted);max-width:34ch;margin:0;font-size:15px;line-height:1.5}
.astep .dot{position:absolute;left:0;top:1px;width:27px;height:27px;border-radius:999px;
  border:1px solid var(--rule);background:var(--linen);display:flex;align-items:center;
  justify-content:center;font-size:12.5px;font-weight:500;color:var(--muted);
  font-variant-numeric:tabular-nums;
  transition:border-color 480ms ease,color 480ms ease,background 480ms ease}
.astep.lit .dot{border-color:var(--ink);background:var(--ink);color:var(--linen)}
.astep .when{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:500;
  letter-spacing:.10em;text-transform:uppercase;color:var(--muted);
  border-top:1px solid var(--rule);padding-top:8px;font-variant-numeric:tabular-nums}

/* ------------------------------------------- SP2  one frame, thirteen clients
   Held under scroll the frame moves through every real set she has
   photographed, one at a time and large, while the strip beneath shows where
   you are. The photographs are the proof, so they are never restyled: square,
   unfiltered, at their native grade.

   With no JavaScript the frames simply stack down the page and every one is
   visible, which is also what prints. */
.work-stage{margin-top:24px;display:grid;
  grid-template-columns:minmax(0,420px) minmax(0,1fr);
  column-gap:var(--seam);row-gap:var(--tight);align-items:start}
.wstack{position:relative;grid-row:1 / span 2;aspect-ratio:1/1;background:var(--linen-deep)}
.wframe{margin:0;position:absolute;inset:0;overflow:hidden}
.wframe img{width:100%;height:100%;object-fit:cover;display:block}
.motion-ready .wframe{opacity:0}
.motion-ready .wframe[data-w="0"]{opacity:1}
.motion-off .wframe{opacity:1!important;position:relative;inset:auto;margin-bottom:12px}
.motion-off .wstack{aspect-ratio:auto}

.wmeta{align-self:end}
/* the counter only means anything while the frame is being scrubbed; with
   no JavaScript every frame is stacked and visible, so it is not shown */
.wcount{display:none}
.motion-ready .wcount{display:block;font-family:var(--display);font-size:28px;line-height:1;
  color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:var(--tight)}
.wcount b{font-weight:400;color:var(--ink)}
.work-note{margin:0;font-size:15px;color:var(--muted);max-width:40ch}
.promo-note{margin:10px 0 0;font-size:13px;color:var(--muted);max-width:44ch}

.wstrip{align-self:start;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.wthumb{padding:0;border:0;background:none;cursor:pointer;aspect-ratio:1/1;
  overflow:hidden;border-radius:0;position:relative;
  transition:opacity 460ms ease}
.wthumb img{width:100%;height:100%;object-fit:cover;display:block}
.wthumb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:left center;
  transition:transform 460ms cubic-bezier(.22,.61,.36,1)}
.wthumb.on::after{transform:scaleX(1)}
.motion-ready .wthumb{opacity:.72}
.motion-ready .wthumb.on{opacity:1}
.motion-off .wthumb{opacity:1!important}

/* ---------------------------------------------- SP3  the month, counted
   Numbers tied to scroll travel. Stepped, not smoothed, so they read as
   events rather than a slot machine, and tabular so the row cannot reflow. */
/* the stretch between the gallery and the prices was a screen and a half of
   text on flat maroon. A visitor who came from an Instagram grid of lash
   photos should not scroll away from pictures. */
.month-comp{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  column-gap:var(--seam);align-items:start;margin-top:24px}
.month-shot{margin:0;grid-row:1 / span 2;aspect-ratio:1/1;overflow:hidden;
  background:var(--surface)}
.month-shot img{width:100%;height:100%;object-fit:cover;display:block}
.month-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  border-top:1px solid var(--rule-dark)}
/* the rule needs air on BOTH sides or it collides with the next column's
   stems: '25' began 1px off the rule it sat against */
.mfig{padding:22px 24px 18px 0;border-right:1px solid var(--rule-dark);
  border-bottom:1px solid var(--rule-dark)}
.mfig:nth-child(2n){border-right:0}
.mfig:nth-child(n+3){border-bottom:0}
.mfig:last-child{border-right:0}
/* the figures ARE the argument of this chapter, so they carry it: the numbers
   are the biggest type on the page after the hero headline */
/* the numeral rises whole from behind its own baseline. It is never shown at
   a partial or intermediate value: a figure here is a factual claim, and a
   count-up puts a number on screen that is not true. */
/* the mask has to clear the deepest glyph in the row. Fraunces' dollar sign
   descends below the baseline and .06em cut it off. */
.mfig .n{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.10em}
.mfig .n i{font-family:var(--display);font-style:normal;font-weight:400;
  font-size:clamp(46px,6.6vw,86px);line-height:1;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;color:var(--starlight);display:block;
  transform:translate3d(0,105%,0)}
.motion-off .mfig .n i{transform:none!important}
.mfig .k{display:block;margin-top:10px;font-size:13px;color:var(--silver);
  max-width:20ch;line-height:1.5}
.month-line{margin-top:6px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--seam);align-items:start}
.month-line>p{font-size:19px;line-height:1.6;color:var(--starlight);margin:0;max-width:44ch}
.month-line em{font-style:normal;color:var(--silver)}
.quote{margin:0;padding-top:0;border-top:0;max-width:46ch}
.quote q{font-family:var(--display);font-size:28px;line-height:1.3;color:var(--starlight);
  quotes:'"' '"'}
.quote cite{display:block;margin-top:14px;font-style:normal;font-size:13px;color:var(--silver)}

/* ----------------------------------------------- SP4  the menu, to scale
   Five services, and the bar under each IS its length: 2 hours to 3.5. The
   bars grow to their true proportion as the chapter is held, so the menu is
   read as time rather than as a price list. */
.menu-list{margin-top:24px;border-top:1px solid var(--rule)}
/* every row IS the booking path for that service: it selects the set and takes
   the reader to the form, so the price list is a step rather than a dead end */
/* every row carries a photograph of THAT style. Five adjectives cannot tell a
   first-timer the difference between a Hybrid and a Volume; five pictures can. */
.mrow{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:start;
  gap:var(--tight);padding:16px 0;border-bottom:1px solid var(--rule);position:relative;
  width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;
  border-radius:0;cursor:pointer;font:inherit;color:inherit;
  transition:opacity 420ms ease}
.mrow:hover .mname{text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1px}
.mrow:hover .mbar i{opacity:.72}
.mbar i{transition:opacity 420ms ease}
.mrow:last-child{border-bottom:0}
.mrow .mname{display:block;font-family:var(--display);font-size:clamp(22px,2.3vw,28px);
  line-height:1.2;letter-spacing:-.008em}
.mrow .mmeta{display:block;margin-top:8px;font-size:15px;color:var(--muted);max-width:46ch}
.mrow .mprice{font-family:var(--display);font-size:clamp(22px,2.3vw,28px);line-height:1.2;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.mrow .mfill{display:block;margin-top:8px;font-size:13px;color:var(--muted);
  text-align:right;font-variant-numeric:tabular-nums}
/* the bar sits directly under the name it belongs to, with its own length
   labelled at the end, so a reader never has to guess which row it measures */
.mpic{display:block;width:76px;aspect-ratio:1/1;overflow:hidden;background:var(--linen-deep)}
.mpic img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 700ms cubic-bezier(.22,.61,.36,1)}
.mrow:hover .mpic img{transform:scale(1.06)}
.mtime{grid-column:1 / -1;display:flex;align-items:center;gap:18px;margin-top:2px}
.mbar{flex:1 1 auto;height:3px;background:var(--rule);position:relative;display:block}
.mbar i{position:absolute;left:0;top:0;bottom:0;right:0;background:var(--ink);
  transform-origin:left center;transform:scaleX(0);display:block}
.motion-off .mbar i{transform:scaleX(1)!important}
.mrow .mhrs{flex:0 0 auto;font-size:12.5px;font-weight:500;letter-spacing:.10em;
  text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.menu-foot{margin-top:var(--tight);font-size:15px;color:var(--muted);max-width:58ch}
/* the highest-intent moment on the page is the instant after somebody reads a
   price. Before this there was no path to booking for 9.5 phone screens. */
.menu-cta{margin-top:8px}
.qa-cta{margin-top:var(--seam)}

/* --------------------------------------------------- the honest chapter */
.honest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--seam);
  margin-top:32px}
.honest h3{margin:0 0 10px}
.honest p{color:var(--silver);max-width:44ch;margin:0}

/* ------------------------------------------------------------------- faq
   Not an accordion. Default-hidden content fails the print and JS-off
   backstops and hides the answers that do the reassuring, so every question
   and every answer is on the page, always. */
/* A picture between the questions. Twelve Q&A pairs on flat maroon ran 3.4
   phone screens with no landmark, and that is the stretch where somebody
   scrolling on a phone gives up. */
.qa-break{margin:var(--seam) 0 0;position:relative}
/* The figure owns the aspect ratio rather than the file does, so swapping the
   16:9 desktop source for the 4:5 phone source cannot move the questions
   underneath it while the picture is still loading. */
.qa-break picture{display:block;aspect-ratio:1400/687;overflow:hidden;background:var(--linen-deep)}
.qa-break img{width:100%;height:100%;object-fit:cover;display:block}
.qa-break figcaption{margin-top:12px;font-size:12.5px;font-weight:500;
  letter-spacing:.10em;text-transform:uppercase;color:var(--silver)}
.faq-b{margin-top:var(--seam)}
.faq{margin-top:var(--seam);border-top:1px solid var(--rule-dark);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--seam);border-bottom:1px solid var(--rule-dark)}
.qa{padding:14px 0;border-bottom:1px solid var(--rule-dark)}
.qa:nth-last-child(-n+2){border-bottom:0}
.qa h3{font-size:20px;line-height:1.35;color:var(--starlight);margin:0 0 8px;max-width:30ch}
.qa p{color:var(--silver);font-size:16px;line-height:1.6;margin:0}
/* a link inside body copy has to look like one. Colour alone is not enough on a
   page whose whole palette is close in value. */
.qa p a,.deposit-note a,.month-line a{color:var(--starlight);
  border-bottom:1px solid rgba(244,234,227,.45);
  transition:border-color 420ms ease}
.qa p a:hover,.month-line a:hover{border-bottom-color:var(--starlight)}
.deposit-note a{color:var(--ink);border-bottom-color:var(--rule)}
.deposit-note a:hover{border-bottom-color:var(--ink)}

/* ------------------------------------------------- SP5  the close, grown
   The deposit figure grows out of the sentence into the numeral the visitor
   leaves with, then the form's first control lands. The page ends on the one
   thing that has to happen. */
/* The giant deposit figure is gone. Set at 180px beside the word "Book" it
   read as the PRICE of a set, which is $120 to $220, not $25. On a booking
   page the number a visitor sees biggest has to be the number they are
   actually being asked for. */
.close-cap{margin:0;font-size:19px;line-height:1.6;max-width:46ch;color:var(--muted)}
.close-cap b{font-weight:400;color:var(--ink)}

/* ------------------------------------------------------------ the form
   The one binary outcome. Square container, pill controls, one accent on
   the submit and nowhere else in the chapter. */
.bookshell{margin-top:32px;background:var(--linen-deep);padding:48px;border-radius:0}
.progress{display:flex;gap:8px;margin-bottom:32px}
/* the four step markers ink along their own track as the panel arrives */
.progress-step{flex:1;height:2px;background:var(--rule);position:relative;
  transition:background 500ms ease}
.progress-step::after{content:"";position:absolute;inset:0;background:var(--ink);
  transform:scaleX(var(--ink-in,0));transform-origin:left center;opacity:.28}
.motion-off .progress-step::after{transform:scaleX(1)}
.progress-step.active{background:var(--ink)}
.step{display:none}
.step.active{display:block}
.step > .eyebrow{margin-bottom:10px}
.step h3{margin:0 0 8px}
.step .steplede{color:var(--muted);font-size:15px;margin:0 0 var(--tight)}
#service-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* five cards in two columns leaves an orphan cell; the fifth takes the row */
.option-wide{grid-column:1 / -1}
.option{text-align:left;background:var(--linen-deep);border:1px solid var(--rule);border-radius:0;
  padding:18px 20px;cursor:pointer;display:flex;justify-content:space-between;
  align-items:flex-start;gap:14px;
  transition:border-color 420ms ease,background 420ms ease}
.option:hover{border-color:var(--ink)}
/* a 1px hairline is not a confirmation on a phone held outdoors: the chosen
   set inverts */
.option.selected{border-color:var(--ink);background:var(--ink);color:var(--linen)}
.option.selected .option-detail{color:rgba(247,240,234,.72)}
.option.selected .option-name::after{content:" ✓";font-family:var(--sans);font-size:15px}
.option-name{font-family:var(--display);font-size:20px;line-height:1.2;display:block}
.option-detail{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.option-price{font-family:var(--display);font-size:20px;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.fill-toggle{display:flex;gap:8px;margin-top:var(--tight)}
.fill-toggle button{flex:1;border-radius:999px;border:1px solid var(--rule);font-weight:400;
  background:transparent;padding:13px 18px;cursor:pointer;font-size:15px;min-height:46px;
  transition:border-color 420ms ease,background 420ms ease,color 420ms ease}
.fill-toggle button.active{border-color:var(--ink);background:var(--ink);color:var(--linen)}
.field{margin-top:var(--tight)}
.field label{display:block;font-size:12.5px;font-weight:500;letter-spacing:.10em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px}
/* one weight per size: the optional marker de-emphasises with ink, not weight */
.field label span{text-transform:none;letter-spacing:.02em;color:var(--rule)}
.field input,.field select,.field textarea{width:100%;border-radius:999px;
  border:1px solid var(--rule);background:var(--linen);padding:15px 22px;min-height:52px;
  font-size:16px;transition:border-color 420ms ease}
.field textarea{border-radius:0;min-height:104px;resize:vertical;padding:16px 22px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.formnav{display:flex;gap:12px;margin-top:32px}
.promo{margin-top:var(--tight)}
.promo-open{margin-top:var(--tight)}

#promoWrap{display:none;margin-top:14px}
#promoWrap.active{display:flex;gap:8px}
#promoWrap input{border-radius:999px;border:1px solid var(--rule);background:var(--linen);
  padding:13px 22px;min-height:46px;flex:1}
#promoFeedback{margin-top:10px;font-size:14px;color:var(--muted);min-height:1.2em}
#summary{margin:var(--tight) 0 0;border-top:1px solid var(--rule)}
.summary-row{display:flex;justify-content:space-between;gap:var(--tight);
  padding:14px 0;border-bottom:1px solid var(--rule);font-size:15px}
.summary-row .label{color:var(--muted)}
.summary-row .val{font-variant-numeric:tabular-nums}
.summary-row.total{border-bottom:0;font-family:var(--display);font-size:20px}
.summary-row.total .label{color:var(--ink)}
.deposit-note{margin-top:var(--tight);font-size:15px;line-height:1.6;color:var(--muted)}
.trustrow{display:flex;flex-wrap:wrap;gap:var(--tight);margin-top:var(--tight);
  font-size:13px;color:var(--muted)}
.paynote{margin-top:14px;font-size:13px;color:var(--muted);text-align:center}
.softcta{margin-top:var(--seam);padding-top:var(--tight);border-top:1px solid var(--rule);
  font-size:16px;color:var(--muted);margin-bottom:0}
.softcta a{color:var(--ink);border-bottom:1px solid var(--rule);
  transition:border-color 420ms ease}
.softcta a:hover{border-bottom-color:var(--ink)}
.closefig-wrap{display:grid;gap:var(--tight);align-items:start}
.close-shot{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--linen-deep)}
.close-shot picture{display:block;width:100%;height:100%}
.close-shot img{width:100%;height:100%;object-fit:cover;display:block}

/* the closing chapter is the one head whose second column is taller than its
   claim, so the eyebrow rides with the claim in column one and both columns
   start at the same top edge */
#closehead{align-items:start}
#closehead .closefig-wrap{grid-column:2;margin:0;justify-self:start;
  align-self:start;align-content:start}

/* ---------------------------------------------------------------- footer */
footer{background:var(--abyss);color:var(--silver);padding:52px 0 40px;position:relative}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--tight)}
footer .brand{color:var(--starlight);font-size:20px}
footer .brand i{color:var(--silver)}
.foot-grid p{margin-top:10px;max-width:34ch;font-size:15px}
/* .foot-grid p outranks a single class, so this one is qualified */
.foot-grid p.foot-h{font-size:12.5px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
  color:var(--silver);margin:0 0 var(--tighter)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.foot-grid a{transition:color 420ms ease}
.foot-grid a:hover{color:var(--starlight)}
/* 32, not 56: 56 put the run above the footer rule in the dead zone */
.foot-base{margin-top:32px;padding-top:var(--tight);
  border-top:1px solid var(--rule-dark);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:14px;font-size:13px}

/* ---------------------------------------------------------------- modals */
/* The aftercare guide and the appointment policy are real reassurance, so they
   can never be content that only exists behind JavaScript. The links are true
   anchors and :target opens the panel with no script at all; print opens both
   and lays them out inline. The overlay is the enhancement, not the mechanism. */
.modal-overlay{position:fixed;inset:0;z-index:80;background:rgba(28,17,20,.72);
  display:none;overflow-y:auto;padding:6vh var(--gut)}
.modal-overlay.active,.modal-overlay:has(.modal-content:target){display:block}
.modal-content:target{display:block}
.modal-content{display:none;max-width:720px;margin:0 auto;background:var(--linen);
  padding:52px;border-radius:0}
.modal-content h3{margin:0 0 var(--tight)}
.modal-content ul{padding-left:1.1em;margin:0;display:grid;gap:12px;color:var(--muted)}
/* an anchor, not a button: with JavaScript off the panel is opened by :target
   and it has to be closeable the same way */
.modal-close{position:sticky;top:0;float:right;background:none;border:0;cursor:pointer;
  font-size:30px;line-height:1;color:var(--muted);text-decoration:none;
  transition:color 420ms ease}
.modal-close:hover{color:var(--ink)}

/* -------------------------------------------------------------- lightbox */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(28,17,20,.94);
  display:none;align-items:center;justify-content:center}
.lightbox.active{display:flex}
.lightbox img{max-width:92vw;max-height:80vh;object-fit:contain}
.lb-cap{position:absolute;left:0;right:0;bottom:26px;text-align:center;margin:0;
  color:var(--silver);font-size:13px;letter-spacing:.06em}
/* the one non-text type role: navigation glyphs, sized to be a 44px target */
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;
  color:var(--starlight);font-size:30px;cursor:pointer;padding:20px;line-height:1}
.lb-prev{left:8px}.lb-next{right:8px}
.lb-close{position:absolute;top:16px;right:20px;transform:none;font-size:30px}

/* ==========================================================================
   MOTION
   Lifted from the kit's engine contract. Everything degrades safely: with no
   JS the .motion-ready class is never added, so nothing is ever hidden; with
   prefers-reduced-motion .motion-off paints the final state; print snaps
   everything and gives back the pin geometry.
   Nothing here is under 400ms.
   ========================================================================== */
.motion-ready [data-reveal]{
  opacity:0;transform:translate3d(0,22px,0);
  transition:opacity 760ms cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms),
             transform 760ms cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms);
  will-change:opacity,transform}
.motion-ready [data-reveal].is-in{opacity:1;transform:none}
.motion-ready [data-reveal][data-reveal="left"]{transform:translate3d(-26px,0,0)}
/* opacity MUST be restated on every variant. These rules sit after the
   generic .is-in rule with equal-or-higher specificity, and omitting it
   leaves the element at 0 forever. That shipped once as an empty rectangle. */
.motion-ready [data-reveal][data-reveal="left"].is-in{transform:none;opacity:1}
.motion-ready [data-reveal][data-reveal="scale"]{transform:scale(1.04);opacity:0}
.motion-ready [data-reveal][data-reveal="scale"].is-in{transform:none;opacity:1}
.motion-ready [data-reveal].is-in{will-change:auto}
.motion-ready [data-reveal="wipe"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);
  transition:clip-path 1100ms cubic-bezier(.19,1,.22,1) var(--reveal-delay,0ms)}
.motion-ready [data-reveal="wipe"].is-in{clip-path:inset(0 0 0 0)}
.motion-ready [data-reveal="wipe"] img{transform:scale(1.06);
  transition:transform 1400ms cubic-bezier(.19,1,.22,1)}
.motion-ready [data-reveal="wipe"].is-in img{transform:none}

.motion-off [data-reveal],.motion-off [data-reveal].is-in{
  opacity:1!important;transform:none!important;transition:none!important}
.motion-off [data-reveal="wipe"]{clip-path:none!important}
.motion-off [data-parallax]{transform:none!important}

/* headline words assemble out of their own line boxes */
.w-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.motion-ready [data-words] .w-in{display:inline-block;transform:translate3d(0,105%,0);
  transition:transform 900ms cubic-bezier(.19,1,.22,1)}
.motion-ready [data-words].words-in .w-in{transform:none}
.motion-ready [data-words].words-forced .w-in{transform:none!important;
  transition:none!important;transition-delay:0s!important}
.motion-off [data-words] .w-in{transform:none!important;transition:none!important}

/* --- hero sequence: settle, assemble, depart --- */
.motion-ready .hero-media{--hero-dim:0}
.motion-ready .hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--abyss);opacity:var(--hero-dim,0)}
.motion-ready .hero-media .hero-still{transform:scale(var(--hero-zoom,1.045));
  transition:transform 2100ms cubic-bezier(.16,1,.3,1)}
.motion-ready .hero.hero-settled .hero-media .hero-still{--hero-zoom:1}
.motion-ready .hero .eyebrow,
.motion-ready .hero p,
.motion-ready .hero .btns,
.motion-ready .hero .heronote{
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity 900ms cubic-bezier(.16,1,.3,1),transform 900ms cubic-bezier(.16,1,.3,1)}
.motion-ready .hero.hero-assembled .eyebrow{opacity:1;transform:none;transition-delay:60ms}
.motion-ready .hero.hero-assembled p{opacity:1;transform:none;transition-delay:620ms}
.motion-ready .hero.hero-assembled .btns{opacity:1;transform:none;transition-delay:780ms}
.motion-ready .hero.hero-assembled .heronote{opacity:1;transform:none;transition-delay:920ms}
.motion-ready .hero h1[data-words] .w-in{transition-duration:1000ms}
.motion-ready .hero .wrap{will-change:transform,opacity}
.motion-off .hero .eyebrow,.motion-off .hero p,.motion-off .hero .btns,
.motion-off .hero .heronote{opacity:1!important;transform:none!important;transition:none!important}
.motion-off .hero-media .hero-still{transform:none!important;transition:none!important}

/* --- the pin scaffold ---
   A pinned chapter is plate plus travel; the block after it carries a
   negative top margin equal to the travel, so the next chapter begins at the
   held plate's foot and climbs over it. Every number is written by motion.js
   from one place. Nothing here may set the plate's margin: overriding it
   from CSS desyncs the section height from the arithmetic and the incoming
   chapter crosses the held composition. */
/* A pinned chapter buys its air from the rig, not from padding, so its own
   padding is zero. The ONE exception is the chapter directly under the hero:
   nothing above it is pinned, so no rig pulls it up and no ground is owned
   by anything, and its live seam measured 48px against the photograph's edge.
   56 here plus the plate's own 48 is the page's 104px seam. */
.pin-on{padding:0!important;position:relative;background:var(--linen)}
#arrive.pin-on{padding-top:56px!important}
.pin-on.band-deep{background:var(--linen-deep)}
.pin-on.band-dark{background:var(--abyss)}
.pin-on.band-surface{background:var(--surface)}
.pin-on>.plate{position:sticky;top:0;height:auto;min-height:0;display:block;
  overflow:visible;padding:48px 0 0}
.pin-on.band-dark>.plate,.pin-on.band-surface>.plate{background:var(--abyss)}
.pin-on.band-surface>.plate{background:var(--surface)}
.pin-on.band-deep>.plate{background:var(--linen-deep)}
.pin-on:not(.band-dark):not(.band-deep):not(.band-surface)>.plate{background:var(--linen)}
/* anything that climbs over a held plate has to paint its own ground, or the
   held composition reads through it */
footer,.band{position:relative}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .motion-ready [data-reveal],.motion-ready [data-reveal].is-in{
    opacity:1!important;transform:none!important}
  .motion-ready [data-reveal="wipe"]{clip-path:none!important}
  .motion-ready [data-words] .w-in{transform:none!important}
  .motion-ready .hero .eyebrow,.motion-ready .hero p,.motion-ready .hero .btns,
  .motion-ready .hero .heronote{opacity:1!important;transform:none!important}
  .motion-ready .hero-media .hero-still{transform:none!important}
  .motion-ready .hero .wrap{transform:none!important;opacity:1!important}
}

/* Motion may never hide content from paper. The print sheet snaps every
   reveal AND gives back the geometry the holds are built out of: on paper
   nothing is held, so a hold height is a hole and the pull-up is a pure
   overlap. Inline styles must lose, hence !important. */
@media print{
  [data-reveal],[data-reveal].is-in,[data-words] .w-in{
    opacity:1!important;transform:none!important;clip-path:none!important}
  section,.plate,footer,.band{height:auto!important;margin-top:0!important;
    margin-bottom:0!important;top:auto!important;position:static!important}
  .hero{min-height:0!important}
  .roomdraw .rd{stroke-dashoffset:0!important}
  .mbar i{transform:scaleX(1)!important}
  .step{display:block!important}
  nav,.scrollcue,.lightbox{display:none!important}
  /* paper carries everything: all four form steps, the promo field, and both
     policy panels laid out inline rather than as overlays */
  .modal-overlay{display:block!important;position:static!important;inset:auto!important;
    background:none!important;padding:0!important;overflow:visible!important}
  .modal-content{display:block!important;max-width:none!important;padding:32px 0!important;
    border-top:1px solid #ccc}
  .modal-close{display:none!important}
  #promoWrap{display:flex!important}
  body{background:var(--linen)}
}

/* ==========================================================================
   MOBILE. Judged at equal or higher weight than desktop. Every set piece
   plays here, still scrubs, still holds mid-state. Compositions re-flow to
   stacks; nothing is switched off.
   ========================================================================== */
@media (max-width:1080px){
  .month-comp{grid-template-columns:1fr;row-gap:16px}
  .mfig{padding:16px 16px 10px 0}
  .month-line{margin-top:0}
  .month-shot{grid-row:auto;aspect-ratio:4/3}
  .mfig{padding:32px 22px 32px 0;border-bottom:1px solid var(--rule-dark)}
  .mfig:nth-child(2n){border-right:0}
  .mfig:nth-child(n+3){border-bottom:0}
  .honest{grid-template-columns:1fr;gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  /* ==================================================================
     MOBILE IS THE SITE. Over nine in ten visitors arrive from Instagram
     or Facebook on a phone and book there, so everything below is the
     real experience and the desktop rules above are the adaptation.
     ================================================================== */

  /* the room drawing was a 100px scratch in a 390px column and read as
     nothing. On a phone it is cropped to the half of the scene that
     carries the bed, and given real height. */
  .roomdraw{max-width:none;width:calc(100% + 40px);margin-left:-20px}
  .arrive-stage{margin-top:12px;gap:12px}

  /* four facts as two pairs rather than four full-width blocks: half the
     height, and the eye takes them in as a set */
  .month-comp{grid-template-columns:1fr;row-gap:16px}
  .mfig{padding:16px 16px 10px 0}
  .month-line{margin-top:0}
  .month-shot{grid-row:auto;aspect-ratio:4/3}
  .mfig{padding:18px 16px 18px 0;border-right:1px solid var(--rule-dark);
    border-bottom:1px solid var(--rule-dark)}
  .mfig:nth-child(2n){border-right:0;padding-right:0}
  .mfig:nth-child(n+3){border-bottom:0}
  .mfig .n i{font-size:clamp(38px,11vw,46px)}
  .mfig .k{margin-top:6px}

  /* a thumb has to be able to hit it. Measured on the rendered phone page: the
     wordmark was 32px, the inline aftercare link 26px and the footer links
     20px, all under the 44px floor. */
  .wthumb{min-height:44px}
  nav .brand{min-height:44px;display:flex;align-items:center}
  .foot-grid ul{gap:2px}
  .foot-grid ul a{min-height:44px;display:flex;align-items:center}

  .astep .dot{width:26px;height:26px}
  .promo-open{padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
  .softcta a,.qa p a,.deposit-note a{padding:2px 0}

  /* the strip is the browse affordance on a phone, so it gets room */
  .wstrip{gap:5px}
  .wmeta{order:3}

  .faq{grid-template-columns:1fr;column-gap:0}
  .qa:nth-last-child(-n+2){border-bottom:1px solid var(--rule-dark)}
  .qa:last-child{border-bottom:0}
  :root{--gut:20px;--seam:96px;--tight:20px}
  .navlinks{display:none}
  /* the eyebrow already carries its own bottom margin; a row-gap on top of it
     stacked two rules into the 48-95px dead zone */
  .chapter-head{grid-template-columns:1fr;row-gap:var(--tight);column-gap:0;align-items:start}
  .ch-claim,.chapter-head .sub{grid-column:1}
  .chapter-head .d2{margin-top:0}
  #closehead .closefig-wrap{grid-column:1;grid-row:auto;margin-top:12px;gap:14px}
  /* 4:5 on the phone, not 4:3. At 350px wide that is 437px of picture instead
     of 263px, which is the difference between a photograph and a stripe. */
  .close-shot{aspect-ratio:4/5}
  .qa-break picture{aspect-ratio:4/5}
  .qa-break figcaption{margin-top:10px}
  .chapter-head .d2,.chapter-head .sub{max-width:none}
  .chapter-head .sub{margin-bottom:0}
  nav{height:62px}
  .hero .wrap{padding-top:88px;padding-bottom:44px}
  /* The phone gets its own frame of the room, shot upright: the whole bed and
     the whole trolley sit in the top third and the bottom half is bare floor
     in the room's shadow, which is where the copy stack lands. Measured on the
     master with the type hidden, the worst 40px band under the copy is 6.72:1
     and the mean is 11.99:1, against 3.66 and 3.87 for the frame it replaces. */
  .hero-media .hero-still{object-position:50% 50%}
  .hero p{font-size:17px;max-width:38ch}
  /* The cue is gone on a phone. Measured at 390x844 its box ran y798-818 while
     the buttons ran y732-800, so the word SCROLL was printing on top of the
     secondary button. A touch device does not need to be told to scroll and a
     label over a tap target is worse than no label. */
  .scrollcue{display:none}
  .hero .btns{gap:10px}
  .hero .btns .btn{flex:1 1 auto;min-width:0}
  /* twelve in fours, then one full width: a hand of prints never ends on a
     single orphan card */
  .arrive-stage{row-gap:24px}
  .work-stage{grid-template-columns:1fr;row-gap:16px}
  .wstack{grid-row:auto}
  .wstrip{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
  .wcount{font-size:22px;margin-bottom:12px}
  .asteps{grid-template-columns:1fr;gap:24px}
  .astep{padding-left:34px}
  .astep h3{max-width:none}
  .astep p{max-width:none}
  .astep .dot{width:23px;height:23px;font-size:12.5px}
  .mrow{grid-template-columns:64px minmax(0,1fr);align-items:start;gap:14px}
  .mpic{width:64px}
  .mrow .mhead{grid-column:2}
  .mrow .mpricewrap{grid-column:2}
  .menu-cta,.qa-cta{width:100%}
  .mrow .mprice{font-size:22px}
  .mrow .mfill{text-align:left}
  .mrow .mpricewrap{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    margin-top:4px}
  .bookshell{padding:28px 20px}
  #service-options{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .formnav{flex-wrap:wrap}
  .formnav .btn{flex:1 1 auto}
  /* bigger buttons on the phone: they cannot be seen otherwise */
  .btn{padding:16px 26px;min-height:52px}
  .btn-lg{padding:20px 30px;min-height:60px}
  .modal-content{padding:32px 22px}
  .foot-grid{grid-template-columns:1fr;gap:20px}
  .month-line{grid-template-columns:1fr;gap:var(--tight)}
  .quote{max-width:none}

}
@media (max-width:520px){
  .month-grid{grid-template-columns:1fr}
  .mfig{border-right:0;border-bottom:1px solid var(--rule-dark);padding:16px 0}
  .mfig:last-child{border-bottom:0}
}