/* The Granary Estates Matchmaker
   Brand skin taken from thegranaryestates.co.uk
   Cardo for display, Josefin Sans for interface, square edges, generous space. */

:root{
  --ink:#000000;
  --ink-70:rgba(0,0,0,.70);
  --ink-55:rgba(0,0,0,.55);
  --ink-38:rgba(0,0,0,.38);
  --paper:#FFF4EF;
  --off:#F1EDEE;
  --white:#FFFFFF;
  --sage:#989E83;
  --sage-soft:#EDEFE6;
  --sage-line:rgba(152,158,131,.42);
  --sage-deep:#6F7560;
  --sand:#CDB184;
  --sand-soft:#F7F0E4;
  --grey:#6B6F74;
  --line:rgba(0,0,0,.14);
  --line-soft:rgba(0,0,0,.08);
  --serif:"Cardo",Georgia,"Times New Roman",serif;
  --sans:"Josefin Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --track:.16em;
  --wrap:940px;
  --header-h:64px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
button{font:inherit;color:inherit;}
a{color:inherit;}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;line-height:1.15;letter-spacing:.005em;}
.display{font-size:clamp(30px,6.2vw,54px);}
.h2{font-size:clamp(24px,4.4vw,36px);}
.h3{font-size:clamp(19px,3vw,24px);}
.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:400;
  letter-spacing:var(--track);
  text-transform:uppercase;
  color:var(--sage-deep);
  margin:0 0 14px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--sage-line);}
.reveal .eyebrow,.cta-block .eyebrow{justify-content:center;}
.reveal .eyebrow::after,.cta-block .eyebrow::after{display:none;}
.lede{font-size:16px;color:var(--ink-70);margin:12px 0 0;max-width:56ch;}
.fine{font-size:13px;line-height:1.6;color:var(--ink-55);letter-spacing:.01em;}
.serif-num{font-family:var(--serif);font-variant-numeric:lining-nums tabular-nums;}

/* ---------- shell ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px;}

.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--sage-line);
}
.site-header__in{
  max-width:var(--wrap);margin:0 auto;padding:0 20px;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;}
.brand img{height:34px;width:auto;}
.brand__word{
  font-family:var(--serif);font-size:15px;letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;
}
.header-link{
  font-size:11px;letter-spacing:var(--track);text-transform:uppercase;
  text-decoration:none;color:var(--ink-55);white-space:nowrap;
}
.header-link:hover{color:var(--ink);}

/* ---------- progress ---------- */
.progress{position:sticky;top:var(--header-h);z-index:55;background:var(--paper);}
.progress__track{height:3px;background:var(--sage-soft);}
.progress__bar{height:3px;background:var(--sage);width:0;transition:width .4s cubic-bezier(.4,0,.2,1);}
.progress__meta{
  max-width:var(--wrap);margin:0 auto;padding:8px 20px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:11px;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-70);
  min-height:52px;
}
/* Back is a real control, so it looks like one. It used to be faint grey text
   that nobody could see, least of all on the dark layout. */
.backlink{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--white);border:1px solid var(--line);
  padding:9px 15px;cursor:pointer;border-radius:0;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);min-height:38px;
  transition:background .18s,color .18s,border-color .18s;
}
.backlink::before{content:"\2039";font-size:16px;line-height:1;margin-top:-3px;}
.backlink:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.backlink[hidden]{display:none;}

/* ---------- step ---------- */
main{padding:40px 0 200px;}
.step{max-width:720px;margin:0 auto;}
.step__head{margin-bottom:26px;}
.step__q{font-size:clamp(25px,4.6vw,38px);}
.step__hint{font-size:14.5px;color:var(--ink-55);margin:12px 0 0;max-width:52ch;}

/* option cards */
.opts{display:grid;gap:10px;}
.opts--2{grid-template-columns:repeat(2,1fr);}
.opt{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--white);border:1px solid var(--line);
  padding:17px 18px;
  transition:border-color .18s,background .18s,transform .18s;
}
.opt:hover{border-color:var(--ink);}
.opt__t{font-size:16px;letter-spacing:.01em;display:block;}
.opt__d{font-size:13px;color:var(--ink-55);display:block;margin-top:4px;line-height:1.5;}
.opt.is-on{background:var(--sage-soft);border-color:var(--sage);box-shadow:inset 3px 0 0 var(--sage);}
.opt.is-on .opt__t{font-weight:500;}
.opt.is-off{opacity:.42;cursor:not-allowed;}
.opt.is-off:hover{border-color:var(--line);}
.opt__flag{
  display:inline-block;margin-top:7px;
  font-size:10.5px;letter-spacing:var(--track);text-transform:uppercase;color:var(--grey);
}

/* compact grid choices (months, days) */
.grid-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.grid-pick .opt{text-align:center;padding:15px 6px;}
.grid-pick .opt__t{font-size:14.5px;}
.grid-pick--wide{grid-template-columns:repeat(2,1fr);}
.grid-pick--4{grid-template-columns:repeat(4,1fr);}

/* fields */
.field{margin-bottom:16px;}
.field label{
  display:block;font-size:10.5px;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink-55);margin-bottom:7px;
}
.field input{
  width:100%;font-family:var(--sans);font-size:16px;
  background:var(--white);border:1px solid var(--line);
  padding:14px 15px;border-radius:0;color:var(--ink);
  min-height:50px;
}
.field input:focus{outline:none;border-color:var(--sage);box-shadow:inset 0 0 0 1px var(--sage);}
.field input::placeholder{color:var(--ink-38);}
.field--err input{border-color:#A1442F;}
.field__err{font-size:12.5px;color:#A1442F;margin-top:6px;display:none;}
.field--err .field__err{display:block;}

/* guest stepper */
.counter{display:flex;align-items:stretch;border:1px solid var(--line);background:var(--white);max-width:280px;}
.counter button{
  width:56px;flex:0 0 56px;background:none;border:0;cursor:pointer;
  font-size:22px;line-height:1;color:var(--ink);
}
.counter button:hover{background:var(--off);}
.counter input{
  flex:1;min-width:0;border:0;text-align:center;
  font-family:var(--serif);font-size:26px;padding:14px 4px;background:none;color:var(--ink);
  -moz-appearance:textfield;
}
.counter input::-webkit-outer-spin-button,.counter input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.counter input:focus{outline:none;}

.range{width:100%;margin:22px 0 6px;accent-color:var(--sage);height:24px;font-size:16px;}
.range-ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-38);letter-spacing:.04em;}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:13px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  padding:17px 32px;border:1px solid var(--ink);border-radius:0;
  background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;
  min-height:52px;max-width:100%;transition:background .18s,color .18s;
}
.btn:hover{background:transparent;color:var(--ink);}
.btn--ghost{background:var(--off);color:var(--ink);border-color:var(--ink);}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn--light{background:var(--off);border-color:var(--off);color:var(--ink);}
.btn--light:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn--full{width:100%;}
.btn[disabled]{opacity:.35;pointer-events:none;}
.btn-row{display:grid;grid-template-columns:1fr;gap:10px;margin-top:26px;}
.btn-row--2{grid-template-columns:1fr 1fr;}

.textlink{
  background:none;border:0;padding:0;cursor:pointer;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-55);
  text-decoration:underline;text-underline-offset:4px;
}
.textlink:hover{color:var(--ink);}

/* ---------- running total ---------- */
.total{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--ink);color:var(--paper);border-top:2px solid var(--sage);
  transform:translateY(102%);transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.total.is-up{transform:translateY(0);}
.total__bar{
  max-width:var(--wrap);margin:0 auto;padding:13px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;
}
.total__label{font-size:10.5px;letter-spacing:var(--track);text-transform:uppercase;opacity:.62;}
.total__pkg{font-size:13px;letter-spacing:.02em;margin-top:2px;}
.total__fig{font-family:var(--serif);font-size:25px;line-height:1;white-space:nowrap;}
.total__chev{font-size:11px;opacity:.6;margin-left:6px;}
.total__body{display:none;border-top:1px solid rgba(255,244,239,.18);}
.total.is-open .total__body{display:block;}
.total__body-in{max-width:var(--wrap);margin:0 auto;padding:16px 20px 20px;}
.total__line{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;padding:6px 0;opacity:.9;}
.total__line span:last-child{white-space:nowrap;}
.total__note{font-size:12px;opacity:.6;margin-top:10px;line-height:1.5;}

/* ---------- results ---------- */
.result{max-width:820px;margin:0 auto;}
.reveal{text-align:center;padding:8px 0 34px;border-bottom:1px solid var(--line-soft);}
.reveal__name{font-size:clamp(28px,5.4vw,46px);}
.reveal__pkg{display:block;margin-top:6px;}
.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:22px;}
.chip{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--sage-line);padding:7px 11px;color:var(--ink-70);background:var(--white);
}

.sect{padding:38px 0;border-bottom:1px solid var(--line-soft);}
.sect:last-child{border-bottom:0;}
.sect__t{font-size:clamp(21px,3.4vw,28px);margin-bottom:6px;}

.pricebox{background:var(--white);border:1px solid var(--line);border-top:2px solid var(--sage);padding:26px 24px;margin-top:20px;}
.pricebox__fig{font-family:var(--serif);font-size:clamp(38px,8vw,58px);line-height:1;}
.pricebox__for{font-size:13px;color:var(--ink-55);margin-top:9px;}

.years{margin-top:22px;border-top:1px solid var(--line-soft);}
.years__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft);}
.years__yr{font-size:12px;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-55);}
.years__amt{font-family:var(--serif);font-size:21px;}
.years__save{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sage);display:block;margin-top:2px;text-align:right;}
.years__row.is-base .years__yr{color:var(--ink);}

.incl{margin:18px 0 0;padding:0;list-style:none;}
.incl li{position:relative;padding:9px 0 9px 26px;border-bottom:1px solid var(--line-soft);font-size:14.5px;line-height:1.55;}
.incl li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:1px;background:var(--sage);}
.incl__sub{font-size:10.5px;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-55);margin:24px 0 4px;}

.tune{background:var(--white);border:1px solid var(--line);padding:24px;margin-top:18px;}
.tune__row + .tune__row{margin-top:26px;padding-top:24px;border-top:1px solid var(--line-soft);}
.tune__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px;}
.tune__lbl{font-size:10.5px;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-55);}
.tune__val{font-family:var(--serif);font-size:20px;}
.daybtns{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px;}
.daybtn{
  padding:11px 4px;background:var(--paper);border:1px solid var(--line);cursor:pointer;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:center;
}
.daybtn:hover{border-color:var(--ink);}
.daybtn.is-on{background:var(--sage-soft);border-color:var(--sage);font-weight:500;}
.daybtn.is-off{opacity:.35;pointer-events:none;}

.stepup{background:var(--sand-soft);border:1px solid var(--sand);padding:26px 24px;margin-top:18px;}
.stepup__gap{font-family:var(--serif);font-size:clamp(28px,5.5vw,40px);line-height:1;margin-top:4px;}
.stepup__cond{font-size:12.5px;color:var(--grey);margin-top:10px;}

.addons{display:grid;gap:9px;margin-top:18px;}
.addon{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--white);border:1px solid var(--line);padding:15px 17px;cursor:pointer;text-align:left;width:100%;
}
.addon:hover{border-color:var(--ink);}
.addon.is-on{background:var(--sage-soft);border-color:var(--sage);box-shadow:inset 3px 0 0 var(--sage);}
.addon__t{font-size:15px;}
.addon__d{font-size:12.5px;color:var(--ink-55);margin-top:3px;line-height:1.45;}
.addon__p{font-family:var(--serif);font-size:18px;white-space:nowrap;}
.portions{background:var(--white);border:1px solid var(--line);padding:17px;margin-top:9px;}

.note{
  background:var(--sage-soft);border-left:2px solid var(--sage);
  padding:17px 19px;margin-top:20px;font-size:14.5px;line-height:1.6;
}
.note strong{font-weight:600;}
.note--warm{background:var(--sand-soft);border-left-color:var(--sand);}

.cta-block{text-align:center;padding:44px 0 10px;}
.cta-block .btn{min-width:min(270px,100%);}
.share{margin-top:26px;text-align:center;}
.share .btn.is-done{background:var(--sage);border-color:var(--sage);color:var(--ink);}
.share .btn.is-done::before{content:"\2713";margin-right:8px;}
.share__note{margin:10px 0 0;}
/* only appears if the clipboard is refused */
.share__fallback{
  display:block;width:100%;margin-top:12px;
  font-family:var(--sans);font-size:16px;text-align:center;
  border:1px solid var(--line);background:var(--white);padding:12px;color:var(--ink-70);min-height:46px;
}

/* toast */
.toast{
  position:fixed;left:50%;bottom:96px;transform:translate(-50%,18px);
  background:var(--ink);color:var(--paper);padding:13px 20px;
  font-size:12.5px;letter-spacing:.04em;z-index:90;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:88vw;text-align:center;
}
.toast.is-on{opacity:1;transform:translate(-50%,0);}

/* gate + preview */
.gate{max-width:560px;margin:60px auto;background:var(--white);border:1px solid var(--line);padding:44px 30px;text-align:center;}
.preview-badge{
  position:fixed;left:12px;bottom:12px;z-index:95;
  background:var(--sand);color:var(--ink);padding:7px 12px;
  font-size:10px;letter-spacing:var(--track);text-transform:uppercase;
}

/* ---------- landing page ---------- */
.lp-hero{background:var(--ink);color:var(--paper);padding:74px 0 66px;text-align:center;}
.lp-hero .eyebrow{color:rgba(255,244,239,.6);}
.lp-hero .lede{color:rgba(255,244,239,.8);margin-left:auto;margin-right:auto;}
.lp-hero .btn{background:var(--paper);border-color:var(--paper);color:var(--ink);margin-top:30px;}
.lp-hero .btn:hover{background:transparent;color:var(--paper);}
.trust{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.trust__i{padding:26px 12px;text-align:center;border-right:1px solid var(--line-soft);}
.trust__i:last-child{border-right:0;}
.trust__n{font-family:var(--serif);font-size:27px;line-height:1;}
.trust__l{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55);margin-top:7px;}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:30px;}
.col__n{font-family:var(--serif);font-size:32px;color:var(--sage);line-height:1;}
.col__t{font-family:var(--serif);font-size:20px;margin:10px 0 6px;}
.quote{background:var(--white);border:1px solid var(--line);padding:28px 26px;}
.quote p{font-family:var(--serif);font-size:17px;line-height:1.62;margin:0;}
.quote cite{display:block;font-style:normal;font-size:10.5px;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-55);margin-top:16px;}
.lp-sect{padding:56px 0;}
.lp-sect--tint{background:var(--off);}

.site-footer{border-top:1px solid var(--line-soft);padding:30px 0 40px;text-align:center;}
.site-footer p{margin:0;}

/* ---------- motion ---------- */
.fade{opacity:0;transform:translateY(9px);animation:fade .42s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes fade{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  .fade{opacity:1;transform:none;}
}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .cols3{grid-template-columns:1fr;gap:26px;}
  .trust{grid-template-columns:repeat(2,1fr);}
  .trust__i:nth-child(2){border-right:0;}
  .trust__i:nth-child(1),.trust__i:nth-child(2){border-bottom:1px solid var(--line-soft);}
  main{padding:28px 0 190px;}
  .sect{padding:30px 0;}
}
@media (max-width:520px){
  body{font-size:16px;}
  .wrap,.site-header__in,.progress__meta,.total__bar,.total__body-in{padding-left:16px;padding-right:16px;}
  .btn-row--2{grid-template-columns:1fr;}
  .grid-pick{grid-template-columns:repeat(2,1fr);}
  .grid-pick--4{grid-template-columns:repeat(2,1fr);}
  .opts--2{grid-template-columns:1fr;}
  .pricebox,.tune,.stepup{padding:20px 17px;}
  .addon{align-items:flex-start;}
}
/* very narrow, reviewed down to 260px */
@media (max-width:330px){
  :root{--track:.1em;}
  .site-header__in{gap:8px;}
  .brand img{height:26px;}
  .brand__word{font-size:12px;}
  .header-link{font-size:9.5px;}
  .grid-pick,.grid-pick--4,.daybtns{grid-template-columns:1fr 1fr;}
  .total__fig{font-size:20px;}
  .total__label,.total__pkg{font-size:10px;}
  .btn{padding:15px 14px;font-size:11px;}
  .counter button{width:44px;flex-basis:44px;}
  .addon{flex-direction:column;gap:8px;}
  .step__q{font-size:22px;}
}

/* ==========================================================================
   Photography
   ========================================================================== */

.hero-band{margin:26px 0 0;overflow:hidden;background:var(--off);}
.hero-band img{width:100%;height:clamp(200px,38vw,340px);object-fit:cover;display:block;}
.hero-band--wide img{height:clamp(180px,32vw,280px);}

/* option cards carrying a thumbnail */
.opt--img{display:flex;align-items:stretch;gap:0;padding:0;overflow:hidden;}
.opt__thumb{flex:0 0 108px;overflow:hidden;background:var(--off);position:relative;align-self:stretch;}
.opt__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.opt--img{min-height:104px;}
.opt--img:hover .opt__thumb img{transform:scale(1.05);}
.opt__body{flex:1;min-width:0;padding:16px 17px;display:flex;flex-direction:column;justify-content:center;}
.opt--img.is-on{box-shadow:none;}
.opt--img.is-on .opt__thumb{box-shadow:inset 0 0 0 2px var(--sage);}

.stepup__img{margin:0 0 20px;overflow:hidden;}
.stepup__img img{width:100%;height:clamp(150px,26vw,210px);object-fit:cover;display:block;}

/* ==========================================================================
   The reveal. A held moment between the last answer and the price.
   ========================================================================== */

.reveal-seq{
  position:fixed;inset:0;z-index:120;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity .42s ease;
}
.reveal-seq.is-gone{opacity:0;}
.reveal-seq__stack{position:absolute;inset:0;overflow:hidden;}
.reveal-seq__f{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);
  transition:opacity 1.1s ease, transform 5s ease-out;
}
.reveal-seq__f.is-on{opacity:1;transform:scale(1);}
.reveal-seq__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.72) 0%, rgba(0,0,0,.58) 55%, rgba(0,0,0,.66) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.35));
}
.reveal-seq__body{position:relative;text-align:center;padding:0 24px;max-width:560px;width:100%;}
.reveal-seq__line{
  font-family:var(--serif);
  font-size:clamp(23px,5.2vw,36px);
  line-height:1.25;margin:0;
  text-shadow:0 1px 24px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.6);
  opacity:1;transform:translateY(0);
  transition:opacity .18s ease, transform .18s ease;
}
.reveal-seq__line.is-out{opacity:0;transform:translateY(-8px);}
.reveal-seq__track{
  height:1px;background:rgba(255,244,239,.26);
  margin:30px auto 0;max-width:260px;overflow:hidden;
}
.reveal-seq__bar{display:block;height:1px;width:0;background:var(--sage);transition:width linear;}

@media (max-width:520px){
  .opt__thumb{flex-basis:88px;}
  .opt__body{padding:14px 15px;}
}
@media (max-width:330px){
  .opt--img{flex-direction:column;}
  .opt__thumb{flex:0 0 110px;height:110px;width:100%;}
  .opt--img.is-on .opt__thumb{box-shadow:inset 0 0 0 2px var(--sage);}
}
@media (prefers-reduced-motion:reduce){
  .reveal-seq__f{transition-duration:.01ms;}
  .opt--img:hover .opt__thumb img{transform:none;}
}

/* ==========================================================================
   Layout switcher. Internal review control only.
   Turn off with SHOW_LAYOUT_SWITCH in assets/js/main.js before launch.
   ========================================================================== */
.layout-switch{
  position:fixed;right:12px;bottom:14px;z-index:130;
  display:flex;align-items:center;gap:3px;
  background:var(--ink);color:var(--paper);
  padding:5px 6px 5px 11px;
  box-shadow:0 3px 18px rgba(0,0,0,.3);
}
/* only lift clear of the total bar when the total bar is actually up, otherwise
   it sat on top of the Continue button */
body:has(.total.is-up) .layout-switch{bottom:86px;}
.layout-switch{opacity:.55;transition:opacity .18s;}
.layout-switch:hover,.layout-switch:focus-within{opacity:1;}
.layout-switch__l{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.55;margin-right:5px;
}
.layout-switch__b{
  display:block;min-width:26px;text-align:center;
  padding:6px 8px;text-decoration:none;
  font-size:11px;letter-spacing:.1em;
  color:var(--paper);background:rgba(255,244,239,.12);
}
.layout-switch__b:hover{background:rgba(255,244,239,.26);}
.layout-switch__b.is-on{background:var(--sage);color:var(--ink);}
@media (max-width:330px){
  .layout-switch{right:8px;padding:4px 5px 4px 8px;}
  .layout-switch__l{display:none;}
}

/* ==========================================================================
   Results gallery
   ========================================================================== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px;}
.gallery__i{margin:0;position:relative;overflow:hidden;background:var(--off);}
.gallery__i img{
  width:100%;height:190px;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.gallery__i:hover img{transform:scale(1.05);}
.gallery__i figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:24px 12px 10px;
  font-size:11px;line-height:1.35;letter-spacing:.02em;color:#FFF4EF;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
}
@media (max-width:760px){
  .gallery{grid-template-columns:repeat(2,1fr);gap:8px;}
  .gallery__i img{height:150px;}
}
@media (max-width:380px){
  .gallery{grid-template-columns:1fr;}
  .gallery__i img{height:180px;}
}
@media (prefers-reduced-motion:reduce){
  .gallery__i:hover img{transform:none;}
}

/* ==========================================================================
   Step photography, Layout A
   Layout B carries a full screen backdrop instead, so this is scoped to A.
   ========================================================================== */
.step-figure{margin:0;overflow:hidden;background:var(--off);}
.step-figure img{width:100%;display:block;object-fit:cover;}

@media (min-width:861px){
  body[data-layout="a"] .step--fig{
    display:flex;gap:46px;align-items:flex-start;max-width:1010px;
  }
  body[data-layout="a"] .step__body{flex:1 1 auto;min-width:0;}
  body[data-layout="a"] .step-figure{
    flex:0 0 310px;
    position:sticky;top:calc(var(--header-h) + 82px);
  }
  body[data-layout="a"] .step-figure img{height:430px;}
}
@media (max-width:860px){
  body[data-layout="a"] .step--fig{display:flex;flex-direction:column;}
  body[data-layout="a"] .step-figure{order:-1;margin-bottom:22px;}
  body[data-layout="a"] .step-figure img{height:165px;}
}
/* only the very narrow phones lose height here. 375px is the commonest phone
   width, so it keeps the full band. */
@media (max-width:340px){
  body[data-layout="a"] .step-figure img{height:125px;}
}

/* ==========================================================================
   Motion. Screens slide in the direction of travel, a tapped card pops, the
   price counts up, results rise in one section after another.
   ========================================================================== */
.enter-fwd{animation:enterFwd .42s cubic-bezier(.2,.7,.3,1) both;}
.enter-back{animation:enterBack .42s cubic-bezier(.2,.7,.3,1) both;}
.is-leaving{animation:leaveFwd .19s ease-in both;pointer-events:none;}
.is-leaving-back{animation:leaveBack .19s ease-in both;pointer-events:none;}
@keyframes enterFwd{from{opacity:0;transform:translateX(26px);}to{opacity:1;transform:none;}}
@keyframes enterBack{from{opacity:0;transform:translateX(-26px);}to{opacity:1;transform:none;}}
@keyframes leaveFwd{to{opacity:0;transform:translateX(-18px);}}
@keyframes leaveBack{to{opacity:0;transform:translateX(18px);}}

.opt{transition:border-color .18s,background .18s,box-shadow .18s,transform .12s;}
.opt:active{transform:scale(.985);}
.opt.is-fresh{animation:optIn .32s cubic-bezier(.2,.7,.3,1);}
@keyframes optIn{0%{transform:scale(.985);}55%{transform:scale(1.012);}100%{transform:none;}}

.rise{animation:rise .55s cubic-bezier(.2,.7,.3,1) both;}
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

.is-bump{animation:bump .42s cubic-bezier(.2,.7,.3,1);display:inline-block;transform-origin:right center;}
@keyframes bump{0%{transform:scale(1);}35%{transform:scale(1.06);}100%{transform:scale(1);}}

.total__chev{display:inline-block;transition:transform .25s;}
.total.is-open .total__chev{transform:rotate(180deg);}
.progress__bar{transition:width .5s cubic-bezier(.4,0,.2,1);}

@media (prefers-reduced-motion:reduce){
  .enter-fwd,.enter-back,.is-leaving,.is-leaving-back,.rise,.is-fresh,.is-bump{animation:none !important;opacity:1;transform:none;}
  .opt:active{transform:none;}
}