/* ── a product page ──────────────────────────────────────────────────────────────
   Clear before clever: the name you can read at once, the facts at a glance, the choice laid side by side,
   then what is included, three steps, the questions and the booking. The look is the hero's: London and glass. */

.product{background:#0a0c0f}
/* clip rather than hide the sideways overflow, so the page itself stays the scroller and the product bar can stick */
body.product{overflow-x:clip}
.product .bar{z-index:8}

/* ── arrival: the name, plainly, on a London street ── */
.phero{position:relative;z-index:5;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;
  min-height:max(620px,calc(100svh - 150px));padding:clamp(124px,15vh,160px) 24px clamp(64px,8vh,96px);color:#fff;text-align:center;background:#0a0c0f}
.phero .lf-bg img{filter:saturate(.98) contrast(1.02) brightness(1.08)}
.phero-hush{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 64% 76% at 50% 54%,rgba(6,8,11,.74) 0%,rgba(6,8,11,.66) 22%,rgba(6,8,11,.5) 42%,rgba(6,8,11,.3) 62%,rgba(6,8,11,.12) 80%,rgba(6,8,11,.02) 100%),
    linear-gradient(180deg,rgba(6,8,11,.5) 0%,rgba(6,8,11,0) 22%,rgba(6,8,11,0) 78%,rgba(6,8,11,.55) 100%)}
.phero-in{width:100%;max-width:1040px;display:flex;flex-direction:column;align-items:center}
.phero-h{margin:clamp(12px,1.6vh,16px) 0 0;padding-left:.1em;font:500 clamp(34px,5.1vw,78px)/1.08 var(--display);letter-spacing:.1em;text-transform:uppercase;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)}
.phero .lede{margin-top:clamp(14px,1.8vh,20px)}
.phero-f{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0;margin:clamp(20px,2.6vh,26px) 0 0;padding:0}
.phero-f li{font:600 10.5px/1.4 var(--display);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.9);text-shadow:0 1px 3px rgba(0,0,0,.7)}
.phero-f li + li::before{content:"·";margin:0 14px;color:rgba(255,255,255,.55)}
.phero-act{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(28px,4vh,40px)}
.phero-act .cta{min-height:52px;padding:0 30px}

/* ── the product bar: the name on the left, the booking on the right, always within reach ── */
.pbar{position:sticky;top:var(--bar-h,66px);z-index:7;
  background:linear-gradient(180deg,rgba(20,22,26,.9),rgba(12,14,17,.9));backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 1px 0 rgba(245,240,231,.08),0 14px 30px -24px rgba(0,0,0,.75)}
.pbar-in{max-width:1240px;height:54px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:26px}
.pbar-n{font:600 15px/1 var(--display);letter-spacing:.01em;color:#fff;white-space:nowrap}
.pbar-l{display:flex;gap:24px;margin-left:auto}
.pbar-l a{position:relative;padding:6px 0;font:500 12px/1 var(--display);letter-spacing:.03em;color:rgba(255,255,255,.7);white-space:nowrap;transition:color .3s ease}
.pbar-l a:hover,.pbar-l a:focus-visible,.pbar-l a.on{color:#fff}
.pbar-l a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:#fff}
.product .pbar .pbar-b{min-height:34px;padding:0 17px;font-size:10px;letter-spacing:.14em}

/* ── at a glance: four facts, the way a phone's specifications are given ── */
.glance{position:relative;z-index:5;background:#fff;color:#14232d;text-align:center;padding:clamp(64px,8.6vh,92px) 24px}
.glance ul{list-style:none;max-width:1120px;margin:clamp(22px,3vh,30px) auto 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.glance li{padding:6px clamp(14px,2.2vw,34px);border-left:1px solid rgba(20,35,45,.12)}
.glance li:first-child{border-left:0}
.glance b{display:block;font:500 clamp(30px,3.3vw,50px)/1.08 var(--display);letter-spacing:-.005em;color:#14232d}
.glance b em{font:italic 400 1.04em/1 var(--serif-text);letter-spacing:0}
.glance span{display:block;margin-top:10px;font:400 14px/1.5 var(--sans);color:rgba(20,35,45,.66)}

/* ── which one is right for you: the line-up, side by side ── */
.cmp{width:100%;max-width:1180px;margin-top:clamp(30px,4.2vh,46px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(7,auto);column-gap:10px;text-align:left}
.cmp-c{grid-row:span 7;display:grid;grid-template-rows:subgrid;row-gap:0;padding:10px 10px 16px;border-radius:24px}
.cmp-c.here{box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 0 0 1.5px rgba(150,250,195,.6),0 0 34px -8px rgba(120,235,170,.6)}
.cmp-img{aspect-ratio:16/10;border-radius:15px;overflow:hidden}
.cmp-img img{width:100%;height:100%;object-fit:cover;display:block}
.cmp-c h3{margin:16px 6px 0;font:500 clamp(17px,1.32vw,20px)/1.25 var(--display);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.cmp-pr{margin:10px 6px 0!important}
.tg{display:inline-block;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,.5),0 0 14px -4px rgba(120,235,170,.6)}
.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)}
.cmp-r{margin:14px 6px 0!important;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);font:400 13px/1.5 var(--sans)!important;letter-spacing:0!important;color:rgba(255,255,255,.88)!important}
.cmp-r b{display:block;margin-bottom:5px;font:600 9.5px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.cmp-act{align-self:end;display:flex;align-items:center;gap:14px;margin:18px 6px 0}
.cmp .cmp-b{min-height:38px;padding:0 18px;font-size:10px;letter-spacing:.14em}
.cmp-more{font:600 10px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:3px}
.cmp-here{display:flex;align-items:center;gap:7px;font:600 9.5px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#bff7d7}
.cmp-here::before{content:"";width:7px;height:7px;border-radius:50%;background:#7debb0;box-shadow:0 0 8px #7debb0}
.cmp-also{margin:22px 0 0;max-width:720px;font:italic 400 15px/1.55 'Lora',var(--serif-text);color:rgba(255,255,255,.84);text-shadow:0 1px 3px rgba(0,0,0,.4)}

/* ── what's included: one picture and one idea at a time, on white ── */
.inc{position:relative;z-index:5;background:#fff;color:#14232d;padding:clamp(84px,11vh,124px) 24px}
.inc-head{max-width:880px;margin:0 auto;text-align:center}
.frow{max-width:1160px;margin:clamp(56px,7vh,88px) auto 0;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(32px,5.4vw,88px);align-items:center}
.frow.rev .fimg{order:2}
.fimg{margin:0;aspect-ratio:4/3;border-radius:28px;overflow:hidden;background:#eceae5;box-shadow:0 34px 70px -46px rgba(20,25,30,.55)}
.fimg img{width:100%;height:100%;object-fit:cover;display:block}
.fimg.tall img{object-position:50% 62%}
.fimg.paper{display:grid;place-items:center;padding:7% 9%;background:linear-gradient(160deg,#efedea,#e3e0da)}
.fimg.paper .rep{margin:0;display:block;max-width:none}
.fimg.paper .rep-l{display:none}
.fimg.paper .sheets{width:100%}
.ftxt .kick{text-align:left}
.ftxt h3{margin:12px 0 0;font:500 clamp(26px,2.6vw,40px)/1.16 var(--display);letter-spacing:.004em;text-wrap:balance}
.ftxt h3 em{font:italic 400 1.1em/1 var(--serif-text);letter-spacing:0}
.ftxt > p:not(.kick){margin:16px 0 0;max-width:31em;font:400 16px/1.68 var(--sans);color:rgba(20,35,45,.76)}
.flink{display:inline-block;margin-top:20px;font:600 10.5px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#14232d;border-bottom:1px solid rgba(20,35,45,.4);padding-bottom:4px}

/* ── three steps ── */
.p3s{grid-template-columns:repeat(3,minmax(0,1fr));max-width:980px;padding-top:10px}
.p3s .pane{padding:24px 22px 20px}
.p3s .w-head{font-size:14px}
.p3s .pane p{font-size:13.5px}

/* ── the questions, on white, as on the homepage ── */
.product .faq{background:#fff}

/* ── the booking, at the end, once you know what you want ── */
/* the calendar sits right beneath the three steps, in the same frame, as the natural next move */
.pbook{width:100%;display:flex;flex-direction:column;align-items:center;scroll-margin-top:150px;margin-top:clamp(44px,6vh,64px)}
.pbook .book{margin-top:0}
.pb-call{margin-top:18px}
.pbook .call-l a{color:#fff}

/* ── tablet ── */
@media (max-width:1099px){
  .cmp{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(14,auto);row-gap:10px;max-width:760px}
  .frow,.frow.rev{grid-template-columns:1fr;max-width:640px;gap:26px}
  .frow.rev .fimg{order:0}
  .glance ul{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px;max-width:640px}
  .glance li:nth-child(3){border-left:0}
  .pbar-l{gap:16px}
}

/* ── phone ── */
@media (max-width:759px){
  .phero{min-height:max(560px,calc(100svh - 140px));padding:108px 18px 60px}
  .phero-h{font-size:clamp(30px,9vw,40px);letter-spacing:.08em}
  .phero-f li{font-size:9.5px;letter-spacing:.16em}
  .phero-f li + li::before{margin:0 9px}
  .phero-act{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .pbar-in{height:50px;padding:0 14px;gap:12px}
  .pbar-n{font-size:13px;overflow:hidden;text-overflow:ellipsis}
  .pbar-l{display:none}
  .pbar-b{margin-left:auto}
  .glance{padding:56px 18px}
  .glance b{font-size:clamp(26px,7.6vw,32px)}
  .glance span{font-size:13px}
  /* the line-up swipes sideways, a card at a time */
  .cmp{display:grid;grid-template-columns:none;grid-template-rows:repeat(7,auto);grid-auto-flow:column;grid-auto-columns:82%;column-gap:10px;row-gap:0;
    overflow-x:auto;scroll-snap-type:x mandatory;margin:30px -16px 0;padding:0 16px 8px;width:calc(100% + 32px);max-width:none;scrollbar-width:none}
  .cmp::-webkit-scrollbar{display:none}
  .cmp-c{scroll-snap-align:center}
  .inc{padding:72px 18px}
  .ftxt h3{font-size:clamp(24px,7vw,30px)}
  .ftxt > p:not(.kick){font-size:15px}
  .fimg{border-radius:22px}
  .p3s{grid-template-columns:1fr;row-gap:22px;max-width:440px}
}