/* ── a room in the gallery ─────────────────────────────────────────────────────
   The room opens exactly as the house does: the same street-lit hero and the same booking.
   After that, London carries every frame. Each is a full-bleed photograph of the city's homes, darkened where
   the words sit, the way the hero is, and everything you read or touch is the hero's own glass. */

.room{background:#0a0c0f}
.book-msg{margin:0;padding:0 2px;font:400 11.5px/1.45 var(--display);color:#ffd7a6;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.book-msg:empty{display:none}
.book-msg a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* ── a London frame ── */
.lf{position:relative;z-index:5;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;scroll-margin-top:60px;
  min-height:max(720px,100svh);padding:clamp(96px,12vh,140px) max(20px,4vw);background:#0a0c0f;color:#fff}
.lf.lf-tall{min-height:0}
.lf-bg{position:absolute;inset:0;z-index:-2}
.lf-bg img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.98) contrast(1.02) brightness(1.06)}
/* deep where the words sit, easing out to the full light of the street; the head and foot of each frame fall to night,
   so one photograph hands over to the next like a slow dissolve */
.lf-hush{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 66% 80% at 50% 52%,rgba(6,8,11,.72) 0%,rgba(6,8,11,.64) 22%,rgba(6,8,11,.5) 40%,rgba(6,8,11,.32) 58%,rgba(6,8,11,.14) 76%,rgba(6,8,11,.04) 92%,rgba(6,8,11,0) 100%),
    linear-gradient(180deg,rgba(6,8,11,.55) 0%,rgba(6,8,11,.14) 13%,rgba(6,8,11,0) 24%,rgba(6,8,11,0) 76%,rgba(6,8,11,.14) 87%,rgba(6,8,11,.55) 100%)}
.lf-in{position:relative;width:100%;max-width:1180px;display:flex;flex-direction:column;align-items:center;text-align:center}
.lf-h{margin:clamp(12px,1.6vh,18px) 0 0;max-width:21em;font:500 clamp(28px,3.1vw,50px)/1.16 var(--display);letter-spacing:.006em;color:#fff;text-wrap:balance;
  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)}
.lf-h em{font:italic 500 1.06em/1 'Lora',var(--serif-text);letter-spacing:0}
.lf-big{font-size:clamp(38px,4.8vw,76px);line-height:1.1}
.lf .lede{margin-top:clamp(14px,1.8vh,20px)}
/* where the photograph is bright (white stucco, sunlit brick, a hazy skyline) the street is dimmed a little more,
   so the words and the glass read as clearly as they do on the hero */
.lf-light .lf-bg img{filter:saturate(.96) contrast(1.04) brightness(.84)}
.lf-light .lf-hush{background:radial-gradient(ellipse 70% 82% at 50% 52%,rgba(6,8,11,.78) 0%,rgba(6,8,11,.7) 24%,rgba(6,8,11,.56) 42%,rgba(6,8,11,.38) 60%,rgba(6,8,11,.2) 78%,rgba(6,8,11,.08) 92%,rgba(6,8,11,.02) 100%),
  linear-gradient(180deg,rgba(6,8,11,.6) 0%,rgba(6,8,11,.16) 13%,rgba(6,8,11,0) 24%,rgba(6,8,11,0) 76%,rgba(6,8,11,.16) 87%,rgba(6,8,11,.6) 100%)}
/* the panes are the hero's glass with a little more night in it, so long reading stays clear over any street */
.lf .pane.glass{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 60%,rgba(255,255,255,.06)),rgba(12,14,18,.3);
  backdrop-filter:blur(16px) saturate(1.5) brightness(.8);-webkit-backdrop-filter:blur(16px) saturate(1.5) brightness(.8)}
.aft-k{margin-top:auto!important;padding-top:16px}
.aft-k a{font:600 10.5px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;text-decoration:none!important;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:4px}

/* ── the hero's glass, as panes ── */
.panes{list-style:none;width:100%;margin:clamp(30px,4.2vh,48px) 0 0;padding:0;display:grid;gap:8px}
.panes > li{display:flex;min-width:0}
.p4{grid-template-columns:repeat(4,minmax(0,1fr))}
.p6{grid-template-columns:repeat(6,minmax(0,1fr));padding-top:10px}
.p3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px}
.pane{position:relative;width:100%;min-width:0;border-radius:22px;padding:16px 15px 14px;display:flex;flex-direction:column;text-align:left;color:#fff}
.pane p{margin:10px 0 0;font:400 12px/1.55 var(--display);letter-spacing:.01em;color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(0,0,0,.3)}
a.pane{transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .4s ease}
a.pane:hover,a.pane:focus-visible{transform:translateY(-3px)}
.p6 .pane{padding-top:20px}

/* what have you noticed: the words people use, and what usually lies behind them */
.note q{quotes:"“" "”";font:italic 400 clamp(15px,1.15vw,17px)/1.42 'Lora',var(--serif-text);color:#fff;text-wrap:balance;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.note > span{position:relative;margin-top:auto;padding-top:24px;font:400 11.5px/1.45 var(--display);color:rgba(255,255,255,.86);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.note > span::before{content:"";position:absolute;left:0;right:0;top:12px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.12))}
.note b{display:block;margin-bottom:5px;font:600 9.5px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62)}

/* four kinds of damp: the hero's pill switch, one pane at a time */
.lf .kseg{display:inline-flex;gap:2px;margin:clamp(26px,3.6vh,40px) 0 0;padding:3px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.05));backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 0 0 1px rgba(255,255,255,.14),0 10px 26px -16px rgba(0,0,0,.5)}
.kseg button{padding:11px 19px;border-radius:999px;font:500 11.5px/1 var(--display);letter-spacing:.06em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);transition:background .35s ease,color .35s ease}
.kseg button:hover{background:rgba(255,255,255,.1)}
.kseg button[aria-selected="true"]{color:#0b0d10;text-shadow:none;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)}
.kpanes{width:100%;max-width:1000px;margin-top:12px;display:grid}
.kp{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:22px 34px;padding:26px 28px 24px;visibility:hidden;opacity:0;transition:opacity .5s ease,visibility 0s .5s}
.kp.on{visibility:visible;opacity:1;transition:opacity .5s ease}
.kp h3{margin:0;font:500 clamp(20px,1.7vw,26px)/1.2 var(--display);text-shadow:0 1px 3px rgba(0,0,0,.35)}
.kp-a p{margin:12px 0 0;font:400 14.5px/1.62 var(--sans);color:rgba(255,255,255,.9);letter-spacing:0}
.kp-a .kp-n{padding-left:12px;border-left:2px solid rgba(240,217,168,.75);font:italic 400 14.5px/1.55 'Lora',var(--serif-text);color:rgba(255,255,255,.84)}
.kp dl{display:grid;grid-template-columns:118px 1fr;gap:12px 18px;align-content:start;margin:0;padding-left:30px;border-left:1px solid rgba(255,255,255,.16)}
.kp dt{padding-top:3px;font:600 9.5px/1.4 var(--display);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.kp dd{margin:0;font:400 14px/1.6 var(--sans);color:rgba(255,255,255,.92)}
.kp a,.qa2 a,.aft2 p a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px}
.kp a:hover{text-decoration-color:#fff}

/* your findings: the report itself, on a monochrome terrace */
.rep{width:100%;max-width:1080px;margin-top:clamp(30px,4vh,46px);display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,3.4vw,56px);align-items:center}
.rep-l{padding:20px 20px 18px}
.ejc2{list-style:none;counter-reset:e;margin:4px 0 0;padding:0}
.ejc2 li{counter-increment:e;display:grid;grid-template-columns:38px 1fr;gap:3px 0;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.ejc2 li::before{content:"0" counter(e);grid-row:span 2;font:italic 400 18px/1.1 'Lora',var(--serif-text);color:rgba(255,255,255,.62)}
.ejc2 b{font:600 10.5px/1.4 var(--display);letter-spacing:.18em;text-transform:uppercase}
.ejc2 span{font:400 13.5px/1.5 var(--sans);color:rgba(255,255,255,.88)}
.rep-n{margin:14px 0 0!important;font:italic 400 15px/1.5 'Lora',var(--serif-text)!important;color:#fff!important}

/* the honest answer: London by lamplight, edge to edge, top to bottom, beside the words */
.lf-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:stretch;padding:0;background:radial-gradient(90% 90% at 70% 40%,#17130c 0%,#0b0c0d 60%,#08090a 100%)}
.split-ph{position:relative;margin:0;min-height:100%}
.split-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.split-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,9,10,0) 58%,rgba(8,9,10,1) 100%),linear-gradient(180deg,rgba(8,9,10,.35),rgba(8,9,10,0) 18%)}
.split-in{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;padding:clamp(96px,12vh,140px) clamp(28px,5.4vw,96px)}
.split-in .kicker{color:rgba(240,217,168,.92)}
.split-in .lf-h{max-width:14em;text-align:left}
.split-in .lede{text-align:left}
.promises{list-style:none;width:100%;max-width:580px;margin:clamp(28px,4vh,40px) 0 0;padding:0;display:grid;gap:8px}
.promises .pane{display:grid;grid-template-columns:34px 1fr;gap:4px 12px;padding:15px 18px}
.pn{grid-row:span 2;font:italic 400 22px/1 'Lora',var(--serif-text);color:rgba(240,217,168,.88)}
.promises b{font:600 13.5px/1.35 var(--display)}
.promises li > span:last-child{font:400 13px/1.5 var(--sans);color:rgba(255,255,255,.82)}

/* what happens next */
.aft2{width:100%;max-width:1000px;margin-top:clamp(30px,4vh,46px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px}
.aft2 .pane{padding:18px 20px 20px}
.aft2 p{font:400 14px/1.62 var(--sans);letter-spacing:0}
.wk2{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0}
.wk2 a{display:block;padding:8px 13px;border-radius:999px;font:500 11px/1 var(--display);letter-spacing:.03em;color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);transition:background .3s ease}
.wk2 a:hover,.wk2 a:focus-visible{background:rgba(255,255,255,.2)}

/* questions: the library, in one long pane of glass */
.qa2{max-width:900px;margin-top:clamp(28px,4vh,44px);padding:6px 24px}
.qa2 details{border-bottom:1px solid rgba(255,255,255,.14)}
.qa2 details:last-child{border-bottom:0}
.qa2 summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 2px;font:500 clamp(14.5px,1.1vw,16px)/1.4 var(--display);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.qa2 summary::-webkit-details-marker{display:none}
.qa2 summary::after{content:"";flex:none;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);
  background:linear-gradient(#fff,#fff) center/10px 1.4px no-repeat,linear-gradient(#fff,#fff) center/1.4px 10px no-repeat;transition:transform .45s var(--ease),background-color .3s ease}
.qa2 details[open] summary::after{transform:rotate(45deg);background-color:rgba(255,255,255,.1)}
.qa2 .qa-a{max-width:760px;padding:0 2px 18px}
.qa2 .qa-a p{margin:0 0 10px;font:400 14.5px/1.66 var(--sans);color:rgba(255,255,255,.88)}
.qa2 .qa-a p:last-child{margin-bottom:0}
.qa2 .qa-a .src{font:italic 400 13.5px/1.5 'Lora',var(--serif-text);color:rgba(255,255,255,.66)}

/* other surveys, free or with a fee */
.sv .tg{align-self:flex-start;padding:6px 10px;border-radius:999px;font:600 9px/1 var(--display);font-style:normal;letter-spacing:.18em;text-transform:uppercase;
  color:#dcffeb;background:rgba(120,235,170,.18);box-shadow:inset 0 0 0 1px rgba(150,250,195,.48),0 0 14px -4px rgba(120,235,170,.6)}
.sv .tg.paid{color:#f6e8ff;background:rgba(201,178,255,.18);box-shadow:inset 0 0 0 1px rgba(222,196,255,.5),0 0 14px -4px rgba(201,178,255,.6)}
.sv b{margin-top:14px;font:600 14px/1.3 var(--display);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.sv > span{margin-top:6px;font:400 12.5px/1.5 var(--display);color:rgba(255,255,255,.86)}

/* the invitation */
.inv-act{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:clamp(28px,4vh,40px)}
.inv-act .cta.go{min-height:54px;padding:0 36px}
.call-l{margin:0;font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.65),0 0 16px rgba(0,0,0,.6)}

/* a split frame can hang its photograph on the right */
.lf-split.flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.lf-split.flip .split-ph{order:2}
.lf-split.flip .split-ph::after{background:linear-gradient(270deg,rgba(8,9,10,0) 58%,rgba(8,9,10,1) 100%),linear-gradient(180deg,rgba(8,9,10,.35),rgba(8,9,10,0) 18%)}
.promises .pane.plain{grid-template-columns:1fr;gap:5px}
.proof2{width:100%;max-width:580px;margin:clamp(24px,3.4vh,34px) 0 0;padding:20px 22px}
.proof2 blockquote{margin:0;font:italic 400 clamp(19px,1.6vw,23px)/1.4 'Lora',var(--serif-text);color:#fff;text-wrap:balance}
.proof2 figcaption{margin-top:10px;font:400 13px/1.55 var(--sans);color:rgba(255,255,255,.74)}

/* the promise: the gold seal beside the guarantee in its full words */
.gseal{width:100%;max-width:980px;margin-top:clamp(30px,4vh,46px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center;text-align:left}
.gseal .seal{width:clamp(180px,17vw,232px)}
.gs-p{padding:20px 22px 20px}
.gs-p p{font:400 14.5px/1.64 var(--sans)!important;letter-spacing:0!important}
.gs-c{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;margin:16px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.16)}
.gs-c li{display:flex;align-items:center;gap:9px;font:500 10.5px/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.gs-c li::before{content:"";flex:none;width:5px;height:5px;transform:rotate(45deg);background:var(--gold)}

/* ── breathing space: the white walls between the paintings ──
   the same quiet band as the homepage's statement under the hero: white, a single statement, a line in italic,
   and once, near the top, the frosted rose-violet button. no cards, no boxes, nothing but air and words */
.br{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:4cm;
  padding:clamp(56px,7.4vh,72px) 24px;background:#fff;color:#14232d;text-align:center}
.br-h{margin:0;max-width:880px}
.br-k{display:block;font:600 clamp(10.5px,.82vw,12px)/1.3 var(--display);letter-spacing:.26em;text-transform:uppercase;color:rgba(20,35,45,.58)}
.br-k.brand{font-size:clamp(13px,1.33vw,19.5px);letter-spacing:.22em;color:#14232d}
.br-l{display:block;margin-top:clamp(9px,1vw,14px);font:500 clamp(20px,2.1vw,31px)/1.3 var(--display);letter-spacing:.005em;text-wrap:balance}
.br-l em{font:italic 400 1.14em/1 var(--serif-text);letter-spacing:0;margin-left:.06em}
.br-s{margin:clamp(18px,2.4vh,26px) 0 0;max-width:640px;font:italic 400 clamp(14.5px,1.08vw,16.5px)/1.5 var(--serif-text);color:rgba(20,35,45,.7);text-wrap:balance}
.br-s a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.br-act{margin-top:clamp(22px,3vh,30px)}
.iris-w{position:relative;flex:none;display:inline-flex;border-radius:999px}
.iris-w::before{content:"";position:absolute;inset:-7px -12px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--a),#f7a8d0,#c9b2ff,#a9b8ff,#f3c4e4,#e7a9f7,#f7a8d0);filter:blur(13px);opacity:.82;animation:orbit 9s linear infinite;transition:opacity .4s ease}
.iris-w:hover::before{opacity:1}
.br .cta.iris{min-height:48px;padding:0 28px;font-weight:600;font-size:10.5px;letter-spacing:.15em;color:#3a1d52;text-shadow:0 1px 0 rgba(255,255,255,.55);
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.26) 58%,rgba(255,255,255,.38));
  backdrop-filter:blur(16px) saturate(1.8) brightness(1.06);-webkit-backdrop-filter:blur(16px) saturate(1.8) brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.45),inset 0 0 18px rgba(255,255,255,.55),0 10px 22px -14px rgba(80,40,120,.5)}
.br .cta.iris::before{padding:1.3px;animation:orbit 4s linear infinite;background:conic-gradient(from var(--a),transparent 0 60%,rgba(236,110,180,.55) 70%,#fff 76%,rgba(150,110,250,.55) 81%,transparent 88%),linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,.4) 40%,rgba(255,255,255,.78))}
@media (prefers-reduced-motion:reduce){.iris-w::before,.br .cta.iris::before{animation:none}}

/* ── tablet ── */
@media (max-width:1099px){
  .p4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
  .p6{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px;max-width:760px}
  .p3{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
  .kp{grid-template-columns:1fr}
  .kp dl{padding:18px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .rep{grid-template-columns:1fr;max-width:640px}
  .aft2{grid-template-columns:1fr;max-width:640px}
  .lf-split{grid-template-columns:1fr}
  .split-ph{height:58svh;min-height:400px}
  .split-ph::after{background:linear-gradient(180deg,rgba(8,9,10,.3) 0%,rgba(8,9,10,0) 20%,rgba(8,9,10,0) 55%,rgba(8,9,10,.96) 100%)}
  .split-in{align-items:center;text-align:center;padding-top:32px}
  .split-in .lf-h,.split-in .lede{text-align:center}
  .lf-split.flip{grid-template-columns:1fr}
  .lf-split.flip .split-ph{order:0}
  .gseal{grid-template-columns:1fr;justify-items:center}
}

/* ── phone ── */
@media (max-width:759px){
  .lf{min-height:0;padding:84px 16px}
  .lf-h{font-size:clamp(25px,7.2vw,32px)}
  .lf-big{font-size:clamp(34px,10vw,44px)}
  .p4,.p6,.p3{grid-template-columns:1fr 1fr}
  .note q{font-size:14.5px}
  .note > span{font-size:11px}
  .pane{padding:14px 13px 12px}
  .p6 .pane{padding-top:18px}
  .lf .kseg{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:420px;border-radius:20px}
  .kseg button{padding:11px 8px;border-radius:16px}
  .kp{padding:20px 18px}
  .kp dl{grid-template-columns:1fr;gap:3px}
  .kp dd + dt{margin-top:10px}
  .qa2{padding:4px 16px}
  .lf.lf-split{padding:0}
  .br{padding:52px 20px}
  .br-l{font-size:clamp(19px,5.4vw,23px)}
  .split-in{padding:28px 16px 84px}
}