/* ── the hero, as every page arrives: the street, the statement, the booking ──
   copied from the homepage's own styles so a room opens exactly as the house does; Astro will hold one copy */
/* ── the view ─────────────────────────────────────────────── */
/* the portico street is shown at its native sharpness: no zoom, no drift, no soft focus, no grain */
.view{position:fixed;inset:0;overflow:hidden}
.view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  filter:url(#sharpen) saturate(.98) contrast(1.02) brightness(1.26)}
.hush{position:absolute;inset:0;pointer-events:none;
  /* a spotlight in reverse: deep where the words sit, easing out to the full brightness of the street */
  background:radial-gradient(ellipse 62% 82% at 50% 60%,
    rgba(6,8,11,.74) 0%,rgba(6,8,11,.7) 18%,rgba(6,8,11,.6) 32%,rgba(6,8,11,.44) 46%,
    rgba(6,8,11,.27) 60%,rgba(6,8,11,.12) 74%,rgba(6,8,11,.03) 88%,rgba(6,8,11,0) 100%)}
@media (max-width:759px){
  /* on a phone the frame moves onto the columns and the door; the words sit lower down */
  .view img{object-position:88% 50%}
  .hush{background:radial-gradient(ellipse 95% 46% at 50% 70%,
    rgba(6,8,11,.74) 0%,rgba(6,8,11,.68) 22%,rgba(6,8,11,.54) 40%,rgba(6,8,11,.34) 58%,
    rgba(6,8,11,.16) 74%,rgba(6,8,11,.04) 90%,rgba(6,8,11,0) 100%)}
  body .card{place-items:end center;padding-bottom:max(40px,7vh)}
}
.shade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,8,11,.5) 0%,rgba(6,8,11,.16) 8%,rgba(6,8,11,0) 14%,rgba(6,8,11,0) 80%,rgba(6,8,11,.2) 100%)}


/* ── the title card ───────────────────────────────────────── */
.card{position:relative;z-index:3;min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:96px max(16px,env(safe-area-inset-right)) max(clamp(18px,2.8vh,28px),env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.card-in{width:100%;max-width:1180px;display:flex;flex-direction:column;align-items:center}
/* on wider screens the booking settles onto the foot of the frame, its last line resting just above the edge,
   and the statement floats centred in the open space above it */
@media (min-width:760px){
  .card{place-items:stretch center}
  .card-in{min-height:100%}
  /* the statement sits a touch below the optical centre of the space above the booking */
  .card-in .kicker{margin-top:auto;padding-top:clamp(15px,9vh,88px)}
  .card-in .book{margin-top:auto;padding-top:clamp(21px,3.8vh,34px)}
  /* the whole booking, scaled as one piece so every proportion holds */
  .card-in .book{zoom:1}
}
.kicker{max-width:30em;text-wrap:balance;font:600 clamp(11px,.8vw,12.5px)/1.6 var(--display);letter-spacing:.24em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 20px rgba(0,0,0,.65)}
.word{position:relative;width:100%;height:var(--wh);margin:clamp(8px,1.45vh,13px) 0 clamp(8px,1.45vh,13px)}
.word span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font:500 var(--ws,80px)/1.08 var(--display);letter-spacing:.12em;text-transform:uppercase;padding-left:.12em;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.45),0 2px 12px rgba(0,0,0,.4),0 4px 40px rgba(0,0,0,.55);visibility:hidden}
.word i{display:block;font-style:normal;white-space:nowrap}
.word span.on{visibility:visible}
.lede{margin:0;max-width:34em;font:italic 400 clamp(16px,1.25vw,19px)/1.55 'Lora',var(--serif-text);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 22px rgba(0,0,0,.65);text-wrap:balance}
.lede span{display:inline}
@media (min-width:760px){.lede span{display:block}}
.call{margin-top:16px;font:600 10.5px/1 var(--sans);letter-spacing:.2em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.65),0 0 16px rgba(0,0,0,.6)}
.call a{padding:8px 0;font-feature-settings:"tnum"}



.book{width:100%;max-width:880px;margin-top:clamp(21px,3.8vh,34px);color:#fff;text-align:left}
.book-cap{display:flex;align-items:center;justify-content:center;gap:13px;margin:0 0 clamp(13px,2.3vh,21px);text-align:center;font:500 clamp(14px,1.1vw,16px)/1.4 var(--display);letter-spacing:.02em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7),0 2px 22px rgba(0,0,0,.7)}
.book-cap b{font-weight:700;letter-spacing:.06em}
/* a home screen, not a form: two widgets, four tiles, three pills, each sitting on its own */
/* the invitation is the hinge between statement and booking: a line engraved between two hairlines */
.book-cap::before,.book-cap::after{content:"";flex:0 1 55px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85))}
.book-cap::after{background:linear-gradient(90deg,rgba(255,255,255,.85),transparent)}
.book-cap span{text-wrap:balance;white-space:nowrap}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{position:relative;display:flex;min-width:0}
/* the order of things: a small glass medallion set into the top rim of each box, numbered left to right.
   it lights as that step is in hand */
.tiles{padding-top:6px}
.step{position:absolute;z-index:2;top:-10px;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;display:grid;place-items:center;pointer-events:none;
  font:italic 500 11.5px/1 'Lora',var(--serif-text);color:#fff;padding-right:1px;text-shadow:0 1px 2px rgba(0,0,0,.35);
  background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.34),rgba(255,255,255,.08) 62%),rgba(20,22,26,.32);
  backdrop-filter:blur(10px) saturate(1.6);-webkit-backdrop-filter:blur(10px) saturate(1.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.62),inset 0 1px 1px rgba(255,255,255,.5),0 4px 12px -4px rgba(0,0,0,.5);
  transition:background .4s ease,color .4s ease,box-shadow .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.tile:hover .step,.tile:focus-within .step,.stack:hover .step,.stack:focus-within .step{color:#0b0d10;text-shadow:none;transform:scale(1.12);
  background:radial-gradient(circle at 50% 30%,#fff,rgba(255,255,255,.86));box-shadow:inset 0 0 0 1px #fff,0 0 14px rgba(255,255,255,.45),0 4px 12px -4px rgba(0,0,0,.5)}
.stack{position:relative}
.cap{font:500 11.5px/1.2 var(--display);letter-spacing:.01em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 12px rgba(0,0,0,.45);text-align:center}
.widget{width:100%;aspect-ratio:1;min-height:0;overflow:hidden;border-radius:22px;padding:16px 13px 11px;display:flex;flex-direction:column;min-width:0}
.w-head{position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:0;padding-bottom:8px;font:600 12px/1.2 var(--display);letter-spacing:.01em;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.w-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.12))}
.w-head svg{width:15px;height:15px;opacity:.9}
/* the rows sit in the optical middle of the space below the hairline: equal air above and below */
.list{display:flex;flex-direction:column;gap:10px;margin:auto 0}
/* measured to the glass edge itself, so the bottom padding steps aside */
.t-seen .widget,.incl.widget{padding-bottom:0}
.ring{position:relative;display:flex;align-items:center;gap:9px;font:400 11px/14px var(--display);cursor:pointer;padding:0;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.ring input{position:absolute;opacity:0;pointer-events:none}
.ring i{flex:none;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);transition:background .3s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.ring i::after{content:"";width:0;height:0;border-radius:50%;background:#0b0d10;transition:width .3s ease,height .3s ease}
.ring input:checked+i{background:#fff;box-shadow:0 2px 8px -2px rgba(0,0,0,.4);transform:scale(1.06)}
.ring input:checked+i::after{width:5px;height:5px}
.ring:active i{transform:scale(.88)}
/* a month on a page: today's grid, a light under the finger, the chosen day lit white */
.mon{display:flex;align-items:center;justify-content:space-between;margin:9px 0 3px;font:600 9.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;opacity:.92}
.mon button{width:18px;height:16px;display:grid;place-items:center;color:#fff;border-radius:6px;transition:background .25s ease,opacity .25s ease}
.mon button:hover{background:rgba(255,255,255,.16)}
.mon button:disabled{opacity:.25;pointer-events:none}
.mon svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cal{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.dow{margin-bottom:1px;font:600 7.5px/1.4 var(--display);letter-spacing:.08em;opacity:.6}
.month{flex:1;min-height:0;grid-template-rows:repeat(6,minmax(0,1fr))}
.day{position:relative;display:grid;place-items:center;cursor:pointer}
.day input{position:absolute;opacity:0;pointer-events:none}
.day span{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;font:500 9.5px/1 var(--display);font-feature-settings:"tnum";
  transition:background .3s ease,color .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}
.day:hover span{background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.42),rgba(255,255,255,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 10px rgba(255,255,255,.22);transform:scale(1.22)}
.day input:checked+span{color:#0b0d10;background:linear-gradient(180deg,#fff,rgba(255,255,255,.86));box-shadow:inset 0 1px 1px #fff,0 3px 10px -3px rgba(0,0,0,.45);transform:scale(1.12)}
.day.off{cursor:default;pointer-events:none}.day.off span{opacity:.3}
.day.now span{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.day:active span{transform:scale(.9)}
.seg{display:flex;gap:2px;margin-top:5px;padding:2px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 .5px rgba(255,255,255,.2)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg input:checked+span{color:#0b0d10;background:linear-gradient(180deg,#fff,rgba(255,255,255,.84));box-shadow:inset 0 1px 1px #fff,0 3px 10px -3px rgba(0,0,0,.4)}
.seg label{position:relative;flex:1;cursor:pointer}
.seg span{display:block;text-align:center;padding:5px 0;border-radius:999px;font:500 9.5px/1 var(--display);letter-spacing:.06em;transition:background .3s ease,color .3s ease}
.ring input:focus-visible+i,.day input:focus-visible+span,.seg input:focus-visible+span{outline:1px solid #fff;outline-offset:3px}
.tiles{grid-template-columns:1.16fr 1.16fr 1.16fr 1.22fr;grid-template-areas:"seen when incl stack"}
.t-incl{grid-area:incl}
.t-seen{grid-area:seen}.t-when{grid-area:when}
/* what every survey includes, each piece saying what it is */
/* the footnote: what every survey includes, on one quiet line */
.incl .list{margin:auto 0;padding:0;list-style:none}
.incl li{display:flex;align-items:center;gap:9px;font:400 11px/14px var(--display);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.incl li svg{flex:none;width:14px;height:14px;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
/* the details: one grouped panel, four rows parted by hairlines, then the button on its own */
.stack{grid-area:stack;display:flex;flex-direction:column;gap:8px;min-width:0}
.group{flex:1;display:flex;flex-direction:column;border-radius:22px;overflow:hidden}
.field{position:relative;flex:1;display:flex;transition:background .3s ease}
.field+.field::before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.26),rgba(255,255,255,.1))}
.field input{display:block;width:100%;height:100%;min-height:34px;border:0;background:transparent;color:#fff;padding:0 14px;font:400 11.5px/1 var(--display);letter-spacing:.02em;outline:none;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.field input::placeholder{color:rgba(255,255,255,.82)}
.field:hover{background:rgba(255,255,255,.05)}
.field:focus-within{background:rgba(255,255,255,.1)}
/* address and postcode share a row, three parts to two, parted by a fine upright hairline */
.pair .half{position:relative;display:flex;min-width:0}
.pair .half:first-child{flex:3}
.pair .pc{flex:2}
.pair .pc::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:1px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.3),rgba(255,255,255,.08))}
.pair .pc input{padding:0 8px 0 12px;text-transform:uppercase}
.pair .pc input::placeholder{text-transform:none}
.pair .half:first-child input{padding-right:10px}
.bad input::placeholder{color:#ffc4b5}
.field.bad::after{content:"";position:absolute;right:14px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#ff9d85;box-shadow:0 0 8px #ff9d85}
.stack .cta{flex:none;width:100%;min-height:44px;padding:0 12px;font-size:10px;letter-spacing:.12em}


.done{display:none;justify-content:center}
.book.sent .book-body{display:none}
.book.sent .done{display:flex;animation:rise .8s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.done .widget{aspect-ratio:auto;width:min(420px,100%);text-align:center;align-items:center;padding:26px 24px 22px}
.done h3{margin:0 0 10px;font:italic 500 clamp(24px,2.2vw,32px)/1.2 'Lora',var(--serif-text)}
.done p{margin:0 auto 6px;font:500 13.5px/1.6 var(--display);color:rgba(255,255,255,.92)}
.done .note{margin-top:12px;font-size:11px;color:rgba(255,255,255,.66)}
.done button{margin-top:14px;font:600 10px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#fff;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.5)}
@media (max-width:759px){
  .tiles{grid-template-columns:1fr 1fr;gap:8px}
  .tiles{grid-template-columns:1fr 1fr;grid-template-areas:"seen when" "incl incl" "stack stack"}
  .incl.widget{aspect-ratio:auto}
  .incl .list{display:grid;grid-template-columns:1fr 1fr;gap:9px 10px;margin:13px 0}
  .book-cap::before,.book-cap::after{flex-basis:20px}
  .book-cap span{max-width:19em;white-space:normal}
  .book-cap{font-size:14px}
  .group{flex:none}.field input{height:44px}.stack .cta{min-height:50px;font-size:11px}
  .widget{border-radius:22px;padding:16px 12px 11px}
  .tiles{row-gap:21px}
  .widget{aspect-ratio:auto}.w-head{font-size:11px;white-space:nowrap;padding-bottom:7px}.list{gap:9px}.month{grid-auto-rows:20px;grid-template-rows:none}.ring{font-size:10.5px;letter-spacing:-.01em;gap:6px;white-space:nowrap}.ring i{width:13px;height:13px}.widget{padding-left:11px;padding-right:10px}
  .day span{width:19px;height:19px;font-size:10px}
}

/* the reveal */
/* no staged entrance: the whole page is there the moment it opens */

@media (max-width:759px){
  .kicker{max-width:22em}
}

/* ── hero version B (?hero=b) ──
   the statement takes the stage: it stands in the optical centre of the first screen with air all round,
   and the booking begins low, its invitation and the tops of the four boxes showing above the fold,
   so the page invites a scroll. version A is untouched */
@media (min-width:760px){
  .hero-b .card{min-height:0;display:block;padding-bottom:clamp(34px,6vh,64px)}
  .hero-b .card-in{min-height:0;margin:0 auto}
  .hero-b .card-in .kicker{margin-top:0;padding-top:0}
  /* the statement block centred a little above the middle of the screen */
  .hero-b .card-in{padding-top:calc(40svh - clamp(130px,17vh,170px))}
  /* the booking starts about four fifths of the way down the first screen */
  .hero-b .card-in .book{margin-top:0;padding-top:0}
  .hero-b .card-in .lede{margin-bottom:calc(20svh - 42px)}
  .hero-b .call{margin-top:21px}
}