/* ==========================================================================
   Precision Hair Systems London — shared site stylesheet
   Design system carried over from the homepage preview.
   Used by every page except the homepage (which still carries its own inline
   CSS for the scroll-scrubbed hero). Consolidating the two is a follow-up.
   ========================================================================== */

:root{
  --ice:#DCEAEF;          /* her logo blue */
  --cream:#FBFCFD;
  --alt:#DCEAEF;
  --white:#FFFFFF;
  --ink:#131A22;
  --muted:#4E5D67;
  --teal:#1F5586;         /* action only */
  --teal-deep:#1E4A70;
  --teal-night:#16304A;
  --teal-deepest:#0F2237;
  --aside:#4A6C78;
  --gold:#E5B96A;
  --brass:#7E5C18;
  --line:#DCE6EC;
  --dark:#0F2237;
  --ease-out: cubic-bezier(0.23,1,0.32,1);
  --container: 1160px;
  --radius: 24px;
  --shadow: 0 1px 2px rgba(22,22,22,0.04), 0 24px 48px -28px rgba(22,22,22,0.22);
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }

.u-container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

h1,h2,h3{ font-family:'Inter',sans-serif; font-weight:600; letter-spacing:-0.01em; }
h1{ font-size:clamp(34px,5vw,54px); line-height:1.08; }
h2{ font-size:clamp(28px,3.6vw,42px); line-height:1.12; }
h3{ font-size:19px; line-height:1.4; font-weight:600; }

/* ---------- act mark (site signature kicker) ---------- */
.act-mark{
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
  font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.16em; color:var(--muted);
}
.act-mark em{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; font-size:19px; color:var(--brass); letter-spacing:0; line-height:1; }
.act-mark .rule{ width:26px; height:1px; background:var(--brass); flex:0 0 auto; }

.act-mark--block{
  border-top:1px solid var(--ink); padding-top:12px; margin-bottom:26px;
  justify-content:space-between; gap:20px; letter-spacing:0.2em;
  font-size:11.5px; color:var(--ink);
}
.act-mark--block .rule{ display:none; }
.act-mark--block em{
  font-family:'Inter',sans-serif; font-style:normal; font-weight:600;
  font-size:11.5px; letter-spacing:0.14em; color:var(--brass);
}

/* ---------- preview banner ---------- */
.preview-banner{ background:var(--teal-deepest); color:#CBDAE3; text-align:center; padding:12px 16px; font-size:13px; }
.preview-banner strong{ color:#fff; font-weight:600; }
.preview-banner .sep{ margin:0 10px; color:#4A6C78; }

/* ---------- navigation: flat, no dropdowns, no accordions ---------- */
header.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,0.75);
  box-shadow:0 1px 24px -12px rgba(19,60,75,0.25);
}
section[id]{ scroll-margin-top:96px; }
.nav-inner{
  max-width:var(--container); margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
/* Lockup, strengthened 26 Aug 2026. It read as muted because the name was
   15.5px against 14.5px nav links — a one-pixel difference, so it had no
   hierarchy over the navigation, and LONDON sat in --muted, the faintest
   thing in the bar. Name up to 19px; LONDON moves to --brass so it belongs
   to the rule above it rather than reading as a grey caption. */
.wordmark{ display:flex; flex-direction:column; gap:5px; }
.wm-name{ font-weight:600; font-size:19px; letter-spacing:-0.005em; line-height:1.1; white-space:nowrap; }
.wm-rule{ display:flex; align-items:center; gap:7px; }
.wm-rule i{ display:block; height:1.5px; width:30px; background:var(--brass); flex:0 0 auto; }
.wm-rule span{ font-size:9.5px; font-weight:600; letter-spacing:0.3em; color:var(--brass); }

.nav-links{ display:flex; align-items:center; gap:22px; }
.nav-links a{
  font-size:14.5px; color:var(--ink); white-space:nowrap;
  border-bottom:1px solid transparent; padding-bottom:3px;
  transition:color 200ms ease, border-color 200ms ease;
}
.nav-links a[aria-current="page"]{ color:var(--teal); border-color:var(--teal); }
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{ color:var(--teal); border-color:var(--teal); }
}

/* Mobile: links stay visible on a scrollable strip. Nothing is hidden behind
   a menu — every destination is one tap, no dropdown or accordion. */
@media (max-width:1099px){
  .nav-inner{ flex-wrap:wrap; row-gap:10px; padding:14px 24px 0; }
  .nav-links{
    order:3; width:100%;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:20px; padding:4px 0 12px;
    -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent 100%);
    mask-image:linear-gradient(90deg, #000 88%, transparent 100%);
  }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{ font-size:15px; padding-bottom:2px; }
}
@media (max-width:479px){
  .wordmark{ font-size:16.5px; max-width:170px; line-height:1.3; }
  .wm-name{ font-size:16.5px; }
  .wm-rule i{ width:22px; }
  .wm-rule span{ font-size:8.5px; letter-spacing:0.26em; }
  .nav-inner .btn{ padding:12px 18px; font-size:14px; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 24px; border-radius:999px; font-size:15px; font-weight:500;
  white-space:nowrap;
  transition:background 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.btn:active{ transform:scale(0.97); }
.btn svg{ width:15px; height:15px; }
.btn-primary{ background:var(--teal); color:#fff; border:1px solid var(--teal); }
@media (hover:hover) and (pointer:fine){ .btn-primary:hover{ background:var(--teal-deep); border-color:var(--teal-deep); } }
.btn-ghost{ background:var(--white); color:var(--ink); border:1px solid var(--line); }
@media (hover:hover) and (pointer:fine){ .btn-ghost:hover{ border-color:var(--teal); color:var(--teal); } }
.btn-outline-dark{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.45); }
@media (hover:hover) and (pointer:fine){ .btn-outline-dark:hover{ background:#fff; color:var(--ink); } }

.link-quiet{ font-size:15px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--muted); padding-bottom:2px; transition:color 200ms ease, border-color 200ms ease; }
@media (hover:hover) and (pointer:fine){ .link-quiet:hover{ color:var(--teal); border-color:var(--teal); } }
.link-quiet.on-dark{ color:#fff; border-color:#4A6C78; }

/* ---------- page shells ---------- */
/* .section.bg-dark and .footer-word .wm-name deleted 23 Aug 2026: matched no
   element on any live page. The footer wordmark is the logo image now. */
.section{ padding:88px 0; }
@media (max-width:759px){ .section{ padding:64px 0; } }
.section.bg-alt{ background:var(--alt); }

.page-head{ padding:72px 0 56px; background:var(--ice); }
.page-head .lede{ margin-top:20px; color:var(--muted); font-size:18.5px; max-width:56ch; }
@media (min-width:1000px){
  .page-head .u-container{ padding-left:132px; }
  .page-head .head-inner{ position:relative; }
  .page-head .act-mark{
    position:absolute; left:-108px; top:5px; width:92px;
    flex-direction:column; align-items:flex-start; gap:9px;
    margin-bottom:0; font-size:10.5px; letter-spacing:0.16em; line-height:1.5;
  }
  .page-head .act-mark .rule{ width:40px; }
  .page-head .act-mark em{ font-size:17px; }
}

.card{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); color:var(--ink); }

/* ---------- the arch (signature section transition) ---------- */
.arch-divider{ display:block; width:100%; height:110px; margin:-1px 0; }
.arch-divider svg{ width:100%; height:100%; display:block; }
@media (max-width:759px){ .arch-divider{ height:56px; } }

/* ---------- scaffold notice ---------- */
.scaffold{
  border:1px dashed var(--line); border-radius:16px;
  padding:26px 28px; max-width:720px; background:rgba(255,255,255,0.55);
}
.scaffold .tag{
  display:inline-block; font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.16em; color:var(--brass); margin-bottom:12px;
}
.scaffold p{ color:var(--muted); font-size:15.5px; max-width:56ch; }
.scaffold p + p{ margin-top:10px; }
.scaffold.blocked{ border-color:#C9A227; background:rgba(234,196,121,0.1); }
.scaffold.blocked .tag{ color:#8A6D1E; }
.scaffold ul{ margin-top:12px; display:flex; flex-direction:column; gap:7px; }
.scaffold li{ display:flex; gap:11px; align-items:baseline; color:var(--muted); font-size:15px; }
.scaffold li::before{ content:''; width:12px; height:1px; background:var(--brass); flex:0 0 auto; position:relative; top:-4px; }

/* ---------- booking page ---------- */
.book-grid{ display:grid; gap:44px; align-items:start; }
@media (min-width:900px){ .book-grid{ grid-template-columns:1fr 1fr; } }
.book-form{ display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.field input, .field textarea{
  background:var(--white); border:1px solid var(--line); color:var(--ink);
  padding:13px 14px; font-family:'Inter',sans-serif; font-size:15px;
  border-radius:12px; transition:border-color 200ms ease;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--teal); }
.field textarea{ resize:vertical; min-height:96px; }
.form-note{ color:var(--muted); font-size:12.5px; }

.detail-rows{ display:flex; flex-direction:column; }
.detail-row{ display:grid; gap:4px; padding:18px 0; border-top:1px solid var(--line); }
@media (min-width:560px){ .detail-row{ grid-template-columns:130px 1fr; gap:24px; align-items:baseline; } }
.detail-row:last-child{ border-bottom:1px solid var(--line); }
.detail-k{ font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.16em; color:var(--brass); }
.detail-v{ font-size:16px; }
.detail-v .ph{ color:var(--muted); }
.map-frame{
  margin-top:28px; border-radius:16px; background:#1B2226; aspect-ratio:16/9;
  position:relative; overflow:hidden; padding:9px;
}
.map-frame .inner{ position:absolute; inset:9px; border:1px solid rgba(234,196,121,0.42); border-radius:10px; }
.map-frame .ph{ position:absolute; left:22px; bottom:20px; color:#9AA5A9; font-size:11.5px; max-width:28ch; line-height:1.55; }

/* ---------- mobile sticky booking bar ---------- */
.mobile-bar{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; gap:14px; align-items:center; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,0.7); backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3); border-top:1px solid rgba(255,255,255,0.75); box-shadow:0 -1px 24px -12px rgba(19,60,75,0.25); transform:translateY(100%); transition:transform 380ms var(--ease-out); }
.mobile-bar .btn-primary{ flex:1; justify-content:center; min-height:48px; }
.mobile-bar .link-quiet{ flex:0 0 auto; }
@media (max-width:759px){ .mobile-bar{ display:flex; } }
.mobile-bar.on{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .mobile-bar{ transition:none; } }

/* ---------- footer ---------- */
footer{ background:var(--teal-deepest); color:#9EB2BA; padding:60px 0 28px; }
.footer-top{ display:grid; gap:36px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.14); }
@media (min-width:760px){ .footer-top{ grid-template-columns:1.2fr 1fr 1fr; } }
.footer-word{ display:flex; flex-direction:column; gap:6px; color:#fff; }
.footer-word .wm-rule i{ background:var(--gold); }
.footer-word .wm-rule span{ color:#9EB2BA; }
.footer-tagline{ margin-top:12px; color:#8FA5AE; font-size:14.5px; max-width:34ch; }
.footer-brand img{ width:200px; height:200px; opacity:0.92; display:block; margin:-16px 0 0 -8px; }
@media (max-width:759px){ .footer-brand img{ width:170px; height:170px; margin:0 0 4px -6px; } }
.footer-col h2{ text-transform:uppercase; font-weight:600; letter-spacing:0.1em; font-size:11.5px; color:#7A939D; margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:14.5px; transition:color 200ms ease; }
@media (hover:hover) and (pointer:fine){ .footer-col a:hover{ color:#fff; } }
.footer-bottom{ padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:#7A939D; }
@media (max-width:759px){ footer{ padding-bottom:96px; } }

/* ==========================================================================
   Components lifted verbatim from the homepage so inner pages match exactly.
   Do not fork these — if one changes, change it in both places or hoist the
   homepage onto this stylesheet.
   ========================================================================== */

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 480ms var(--ease-out), transform 480ms var(--ease-out); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- section head + gutter section marks ---------- */
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head p{ margin-top:16px; color:var(--muted); font-size:17px; max-width:56ch; }
@media (min-width:1000px){
  .section--hang .u-container{ padding-left:132px; }
  /* .reveal puts a transform on these, so they are the containing block:
     offset back into the gutter from the section head, not the container */
  .section--hang .section-head{ position:relative; }
  .section--hang .act-mark{
    position:absolute; left:-108px; top:5px; width:92px;
    flex-direction:column; align-items:flex-start; gap:9px;
    margin-bottom:0; font-size:10.5px; letter-spacing:0.16em; line-height:1.5;
  }
  .section--hang .act-mark .rule{ width:40px; }
  .section--hang .act-mark em{ font-size:17px; }
  /* the block variant is a full-width rule, never a gutter marker */
  .page-head .act-mark--block,
  .section--hang .act-mark--block{ position:static; width:auto; flex-direction:row; }
}

/* ---------- the vertical thread (homepage "The plan") ---------- */
.plan-thread{ position:relative; max-width:760px; }
.plan-thread::before{ content:''; position:absolute; left:7px; top:8px; bottom:8px; width:1px; background:var(--line); }
.th-step{ position:relative; padding:0 0 42px 46px; }
.th-step:last-child{ padding-bottom:0; }
.th-step::before{ content:''; position:absolute; left:0; top:6px; width:15px; height:15px; border-radius:50%; background:var(--alt); border:1.5px solid var(--brass); }
.th-step.first::before{ background:var(--brass); }
.th-step .k{ font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.16em; color:var(--brass); display:block; margin-bottom:8px; }
.th-step h3{ margin-bottom:8px; }
.th-step p{ color:var(--muted); max-width:54ch; }
.th-step .meta{ margin-top:10px; font-size:13px; color:var(--muted); }
.th-step a{ color:var(--teal); border-bottom:1px solid rgba(31,85,134,0.35); padding-bottom:1px; transition:border-color 200ms ease; }
@media (hover:hover) and (pointer:fine){ .th-step a:hover{ border-color:var(--teal); } }
.th-step.reveal:nth-child(1){ transition-delay:0ms; }
.th-step.reveal:nth-child(2){ transition-delay:90ms; }
.th-step.reveal:nth-child(3){ transition-delay:180ms; }

/* ---------- proof chip ---------- */
.proof-chip{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.proof-chip .stars{ display:inline-flex; gap:2px; }
.proof-chip .stars svg{ width:13px; height:13px; fill:var(--gold); }
.stars{ display:inline-flex; gap:2px; }
.stars svg{ width:15px; height:15px; fill:var(--gold); }

/* ---------- booking section (dark) ---------- */
.cta-section{ background:var(--teal-night); color:#fff; }
.cta-section h2{ color:#fff; }
.cta-section .act-mark{ color:#9EB2BA; }
.cta-section .act-mark em{ color:var(--gold); }
.cta-section .act-mark .rule{ background:var(--gold); }
.cta-section .act-mark--block{ border-top-color:rgba(255,255,255,0.45); color:#fff; }
.cta-aside{ display:block; font-weight:400; font-size:0.5em; letter-spacing:0; color:var(--gold); margin-top:10px; }
.cta-grid{ display:grid; gap:48px; }
@media (min-width:860px){ .cta-grid{ grid-template-columns:1fr 1fr; } }
.cta-copy p{ margin-top:18px; color:#B7C6D0; font-size:18px; max-width:44ch; }
.cta-actions{ margin-top:28px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.cta-form{ display:flex; flex-direction:column; gap:16px; }
.cta-section .field label{ color:#9EB2BA; }
.cta-section .field input,
.cta-section .field textarea{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.22); color:#fff; }
.cta-section .field input:focus,
.cta-section .field textarea:focus{ border-color:var(--gold); }
.cta-section .field textarea{ resize:vertical; min-height:110px; }
.cta-section .form-note{ color:#7E96A1; }
.cta-section .proof-chip{ color:#9EB2BA; }
.cta-section .btn-primary{ background:#fff; color:var(--teal-night); border-color:#fff; }
@media (hover:hover) and (pointer:fine){
  .cta-section .btn-primary:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
}
.form-status{ font-size:14px; color:var(--gold); min-height:18px; }

/* ---------- page hero (inner pages) ---------- */
.page-head .hero-actions{ margin-top:32px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

/* ---------- three-up numbered cards (homepage "The system") ---------- */
.grid-3{ display:grid; gap:24px; }
@media (min-width:760px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }
.num-card{ padding:30px; }
.num-chip{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:#F2EEE2; color:var(--brass); font-weight:700; font-size:14px; margin-bottom:18px; }
.num-card h3{ margin-bottom:10px; }
.num-card p{ color:var(--muted); font-size:15.5px; }
.num-card.reveal:nth-child(1){ transition-delay:0ms; }
.num-card.reveal:nth-child(2){ transition-delay:80ms; }
.num-card.reveal:nth-child(3){ transition-delay:160ms; }

/* ---------- brass fact lines (homepage "Meet Stacey") ---------- */
.facts{ margin-top:26px; display:flex; flex-direction:column; gap:10px; }
.fact{ display:flex; gap:12px; align-items:baseline; font-size:15.5px; color:var(--muted); }
.fact::before{ content:''; width:14px; height:1px; background:var(--brass); flex:0 0 auto; position:relative; top:-5px; }
.fact strong{ color:var(--ink); font-weight:600; }

/* ---------- split section: copy beside a photo (homepage studio card) ---------- */
.split{ display:grid; gap:44px; align-items:center; }
@media (min-width:900px){ .split{ grid-template-columns:1.05fr 0.95fr; } }
.ph-frame{ position:relative; background:#1B2226; border-radius:16px; overflow:hidden; padding:9px; }
.ph-frame img{ width:100%; height:100%; object-fit:cover; border-radius:10px; display:block; }
.ph-frame .inner{ position:absolute; inset:9px; border:1px solid rgba(234,196,121,0.42); border-radius:10px; pointer-events:none; }

/* the hero on inner pages can carry an image alongside the copy */
.head-split{ display:grid; gap:48px; align-items:center; }
@media (min-width:900px){ .head-split{ grid-template-columns:1.1fr 0.9fr; } }
@media (min-width:1000px){ .page-head .head-split .head-inner{ position:relative; } }
.section-head a{ color:var(--teal); border-bottom:1px solid rgba(31,85,134,0.35); padding-bottom:1px; transition:border-color 200ms ease; }
@media (hover:hover) and (pointer:fine){ .section-head a:hover{ border-color:var(--teal); } }

/* ---------- inner-page hero: a title page, not the homepage's split ----------
   The homepage hero is copy beside a scroll-scrubbed image. Inner pages get a
   full-width typographic opening instead, so they read as part of the same site
   without impersonating the front door. */
.page-head--title{ padding:76px 0 64px; }
.page-head--title .head-inner{ max-width:none; }
.page-head--title h1{ max-width:15ch; }
.page-head--title .lede{ font-size:19.5px; max-width:52ch; }
.page-head--title .head-foot{
  margin-top:38px; padding-top:26px; border-top:1px solid rgba(19,26,34,0.14);
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.page-head--title .head-meta{
  display:flex; gap:26px; flex-wrap:wrap;
  font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
}
.page-head--title .head-meta b{ color:var(--brass); font-weight:600; }
@media (max-width:759px){
  .page-head--title{ padding:52px 0 46px; }
  .page-head--title .head-foot{ margin-top:28px; padding-top:20px; }
  .page-head--title .head-meta{ gap:14px; font-size:11px; }
}

/* ---------- hold to reveal (homepage "The proof") ---------- */
.proof-grid{ display:grid; gap:24px; }
@media (min-width:860px){ .proof-grid{ grid-template-columns:repeat(3,1fr); } }
.proof-card{ padding:14px; }
.proof-stage{ position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.proof-layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:opacity 340ms var(--ease-out), filter 340ms var(--ease-out); }
.proof-layer.after-l{ background:#171D20; opacity:1; }
.proof-layer.before-l{ background:#262F34; opacity:0; filter:blur(6px); }
.proof-stage.holding .after-l{ opacity:0; filter:blur(6px); }
.proof-stage.holding .before-l{ opacity:1; filter:blur(0); }
.state-pill{ position:absolute; top:14px; left:14px; font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px; background:#fff; color:var(--ink); z-index:2; box-shadow:0 1px 4px rgba(0,0,0,0.15); }
.state-pill.after{ background:var(--ink); color:#fff; border:1px solid rgba(255,255,255,0.35); }
.proof-hint{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); background:rgba(22,22,22,0.72); color:#fff; font-size:12px; padding:6px 13px; border-radius:999px; z-index:2; white-space:nowrap; transition:opacity 200ms ease; }
.proof-stage.holding .proof-hint{ opacity:0; }
.proof-caption{ padding:16px 8px 6px; }
.proof-caption h3{ font-size:16.5px; }
.proof-caption p{ margin-top:6px; color:var(--muted); font-size:13.5px; }
@media (prefers-reduced-motion: reduce){ .proof-layer{ transition:none; filter:none !important; } }

/* ---------- expanded steps ----------
   Built for pages where the steps ARE the content, not a summary of it.
   The homepage thread stays a summary; this is the long form. Composed from
   existing primitives: brass serif numerals, hairline rules, fact lines. */
.steps{ border-top:1px solid var(--line); }
.step-row{ display:grid; gap:22px; padding:40px 0; border-bottom:1px solid var(--line); }
@media (min-width:900px){
  .step-row{ grid-template-columns:104px minmax(0,1.05fr) minmax(0,0.95fr); gap:44px; align-items:start; }
}
.step-n{
  font-family:'Instrument Serif',serif; font-style:italic; font-weight:400;
  font-size:46px; line-height:0.9; color:var(--brass);
}
.step-n span{
  display:block; margin-top:12px; font-family:'Inter',sans-serif; font-style:normal;
  font-size:10.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted);
}
@media (max-width:899px){
  .step-n{ display:flex; align-items:baseline; gap:14px; font-size:34px; }
  .step-n span{ margin-top:0; }
}
.step-main h3{ font-size:23px; line-height:1.25; margin-bottom:12px; }
.step-main p{ color:var(--muted); max-width:46ch; }
.step-main p + p{ margin-top:12px; }
.step-main a{ color:var(--teal); border-bottom:1px solid rgba(31,85,134,0.35); padding-bottom:1px; transition:border-color 200ms ease; }
@media (hover:hover) and (pointer:fine){ .step-main a:hover{ border-color:var(--teal); } }
.step-detail{ display:flex; flex-direction:column; gap:0; }
.step-detail .row{ display:grid; gap:3px; padding:11px 0; border-bottom:1px solid var(--line); }
@media (min-width:520px){ .step-detail .row{ grid-template-columns:118px 1fr; gap:18px; align-items:baseline; } }
.step-detail .row:first-child{ padding-top:0; }
.step-detail .row:last-child{ border-bottom:0; }
.step-detail .k{ font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--brass); }
.step-detail .v{ font-size:15px; color:var(--muted); }
.step-detail .v em{ font-style:normal; color:var(--ink); font-weight:600; }
.step-row.reveal:nth-of-type(1){ transition-delay:0ms; }
.step-row.reveal:nth-of-type(2){ transition-delay:80ms; }
.step-row.reveal:nth-of-type(3){ transition-delay:160ms; }

/* ---------- continuous body ----------
   Alternating grounds section by section turns a text-led page into a stack of
   panels. On inner pages the body runs as one field and sections are separated
   by a hairline and space instead, so colour is left free to mean something. */
.section--flow{ padding:64px 0; }
.section--flow + .section--flow{ border-top:1px solid var(--line); }
.section--flow .section-head{ margin-bottom:0; }
.section--flow .section-head + *{ margin-top:40px; }
@media (max-width:759px){ .section--flow{ padding:48px 0; } }

/* ---------- numbered step rows ----------
   Replaces the tone-graded plates. Same information, but carried by a numeral
   in the gutter and a hairline between rows instead of by three filled slabs,
   so the section stops being the heaviest thing on the page. The old "what
   happens" line is gone: it restated the paragraph directly above it. */
.steps{ border-top:2px solid var(--ink); }
.step{ padding:34px 0 36px; border-bottom:1px solid var(--line); display:grid; gap:14px; }
@media (min-width:900px){
  .step{ grid-template-columns:72px 1fr; gap:0 32px; align-items:start; }
  .step-body{ grid-column:2; }
}
.step-n{ font-family:'Instrument Serif',serif; font-style:italic; font-size:42px; line-height:0.85; color:var(--brass); }
.step-k{ display:block; font-size:10.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.step-body h3{ font-size:clamp(21px,2.2vw,25px); line-height:1.2; letter-spacing:-0.015em; margin-bottom:12px; }
.step-body > p{ color:var(--muted); font-size:16.5px; max-width:58ch; }
.step-body a{ color:var(--teal); border-bottom:1px solid rgba(31,85,134,0.35); padding-bottom:1px; transition:border-color 200ms ease; }
.step-body a:hover{ border-bottom-color:var(--teal); }
.step-facts{ margin-top:24px; display:grid; gap:16px 44px; }
@media (min-width:640px){ .step-facts{ grid-template-columns:1fr 1fr; max-width:760px; } }
.step-facts .fk{ display:block; font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--brass); margin-bottom:5px; }
.step-facts .fv{ font-size:15.5px; color:var(--ink); }

/* ---------- the title page, beside the studio ----------
   The photograph sits with the headline rather than under it, so the page
   opens on the place before it opens on the process. */
.page-head--photo{ padding-bottom:64px; }
.head-photo{ display:grid; gap:36px; align-items:center; }
@media (min-width:960px){ .head-photo{ grid-template-columns:1.02fr 0.98fr; gap:64px; } }
.head-fig{ margin:0; }
.head-fig img{
  display:block; width:100%; height:auto; border-radius:var(--radius);
  aspect-ratio:4/3; object-fit:cover; box-shadow:0 24px 60px rgba(15,34,55,0.14);
}
.head-fig figcaption{ margin-top:12px; font-size:12.5px; color:var(--aside); }

/* ---------- heading in its own column ----------
   The section heading and its call to action hold a column of their own and
   stay put, so the button is in view for the whole of the steps rather than
   only at the end of them. */
.hdr-split{ display:grid; gap:36px; }
@media (min-width:1000px){ .hdr-split{ grid-template-columns:320px minmax(0,1fr); gap:0 80px; align-items:start; } }
.hdr-col{ align-self:start; }
@media (min-width:1000px){ .hdr-col{ position:sticky; top:120px; } }
.hdr-col h2{ margin-top:14px; }
.hdr-col p{ margin-top:16px; color:var(--muted); font-size:16.5px; }
@media (min-width:1000px){ .hdr-after{ padding-left:400px; } }

/* ---------- a photograph per step ----------
   Every frame carries a caption naming the shot it needs. The crops currently
   in place are stand-ins and must be replaced before this reaches a client. */
.ph-steps{ border-top:2px solid var(--ink); }
.ph-step{ padding:34px 0 36px; border-bottom:1px solid var(--line); display:grid; gap:22px; }
@media (min-width:760px){ .ph-step{ grid-template-columns:196px minmax(0,1fr); gap:0 34px; align-items:start; } }
.ph-step .p-fig{ margin:0; }
.ph-step .p-fig img{
  display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border-radius:16px; background:var(--alt);
}
.ph-step .p-fig figcaption{ margin-top:10px; font-size:11.5px; line-height:1.5; color:var(--aside); }
.ph-n{ display:block; font-family:'Instrument Serif',serif; font-style:italic; font-size:30px; line-height:0.9; color:var(--brass); }
.ph-k{ display:block; margin-top:8px; font-size:10.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
.ph-step h3{ margin:10px 0 12px; font-size:clamp(21px,2.2vw,25px); line-height:1.2; letter-spacing:-0.015em; }
.ph-body > p{ color:var(--muted); font-size:16.5px; max-width:54ch; }
.ph-step a{ color:var(--teal); border-bottom:1px solid rgba(31,85,134,0.35); padding-bottom:1px; transition:border-color 200ms ease; }
.ph-step a:hover{ border-bottom-color:var(--teal); }
.ph-facts{ margin-top:24px; display:grid; gap:16px 40px; }
@media (min-width:640px){ .ph-facts{ grid-template-columns:1fr 1fr; } }
.ph-facts .fk{ display:block; font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--brass); margin-bottom:5px; }
.ph-facts .fv{ font-size:15px; color:var(--ink); }

/* ---------- caption under a framed photograph ----------
   The gold-mounted .ph-frame had no caption slot. Photography placeholders
   have to stay legible as placeholders, so the note sits outside the frame. */
.fig-note{ margin-top:10px; font-size:11.5px; line-height:1.5; color:var(--aside); }

/* ---------- silent process loop ----------
   A short muted clip sized like a photograph rather than a player: no controls,
   no chrome, no sound. This page is read late at night by someone who does not
   want to be noticed, so nothing here may ever make noise or demand attention.
   Until the footage exists, .vid-note carries the shot brief over a poster. */
.vid{ position:relative; margin:0; }
.vid-frame{ position:relative; overflow:hidden; border-radius:18px; background:#0F2237; aspect-ratio:16/9; }
.vid-frame video,.vid-frame img{ display:block; width:100%; height:100%; object-fit:cover; }
.vid figcaption{ margin-top:11px; font-size:11.5px; line-height:1.5; color:var(--aside); }
.vid--loop .vid-frame{ aspect-ratio:4/5; }

/* the placeholder state: the shot brief written over the poster frame */
.vid-note{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; text-align:center; padding:28px;
  background:linear-gradient(180deg,rgba(15,34,55,0.55),rgba(15,34,55,0.82)); color:#fff;
}
.vid-note b{ font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); }
.vid-note span{ font-size:14.5px; line-height:1.6; color:#CBDAE3; max-width:46ch; }

/* nothing moves for anyone who has asked for less motion: hold the poster */
@media (prefers-reduced-motion:reduce){
  .vid-media{ display:none; }
  .vid-frame .vid-poster{ display:block; }
}

/* ---------- step rows without a numeral ----------
   Some sections are a set of aspects rather than an ordered sequence. They use
   the same rows, but the numeral column would imply an order that is not there,
   and a second numbered run on a page is what the one-sequence rule forbids. */
.steps--plain .step{ grid-template-columns:1fr; }
.steps--plain .step-body{ grid-column:1; }

/* ---------- the mounted night block ----------
   One dark object on the continuous cream field, not a band across it. Marks
   the crossing from pages for a man deciding into a page for a man who already
   has. The inset gold hairline is the same mount language as .ph-frame.
   Budget: one distinguishing move per page. This is Maintenance's. */
.night-hold{ background:var(--cream); }
.night-mount{
  position:relative; background:var(--teal-night); color:#fff;
  border-radius:32px; padding:56px 48px 60px;
}
@media (max-width:759px){ .night-mount{ border-radius:22px; padding:38px 24px 42px; } }
.night-inner{
  position:absolute; inset:14px; border:1px solid rgba(229,185,106,0.40);
  border-radius:22px; pointer-events:none;
}
@media (max-width:759px){ .night-inner{ inset:10px; border-radius:14px; } }
.night-body{ position:relative; z-index:1; }

/* the gutter mark hangs outside its section everywhere else on the site. It
   cannot here, because the block has its own edge, so it sits inline instead */
.night-mount .act-mark{ position:static; width:auto; flex-direction:row; gap:12px; margin-bottom:18px; }
.night-mount .act-mark .rule{ background:var(--gold); width:26px; }
.night-mount .act-mark{ color:#9EB2BA; }
.night-mount h2,.night-mount h3{ color:#fff; }
.night-mount .section-head p{ color:#B7C6D0; }
.night-mount .steps{ border-top-color:rgba(255,255,255,0.34); }
.night-mount .step{ border-bottom-color:rgba(255,255,255,0.14); }
.night-mount .step-k{ color:#9EB2BA; }
.night-mount .fk{ color:var(--gold); }
.night-mount .fv{ color:#DCEAEF; }

/* ---------- the cost table ----------
   The plainest page on the site, so the table is the only thing on it with any
   structure. No fills, no zebra striping, no card: hairlines and row height do
   all the work, and the figures column is the one thing given weight. */
.cost-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cost-table{ width:100%; border-collapse:collapse; min-width:560px; text-align:left; }
.cost-table th,.cost-table td{ padding:26px 24px 26px 0; vertical-align:top; border-bottom:1px solid var(--line); }
.cost-table thead th{
  padding-top:0; padding-bottom:14px; border-bottom:2px solid var(--ink);
  font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);
}
/* the figure is what he came for, so the label steps back rather than
   competing with it. Size does the work: no accent colour on a price. */
.cost-table tbody th{ font-size:16px; font-weight:500; color:var(--muted); width:30%; }
.cost-table tbody td{ font-size:15px; color:var(--muted); }
.cost-table tbody tr:last-child th,
.cost-table tbody tr:last-child td{ border-bottom:0; }
/* the last row is the number he actually came for */
.cost-table tbody tr:last-child th{ font-size:17px; color:var(--ink); }
.cost-table .c-num{
  font-size:21px; font-weight:600; letter-spacing:-0.015em;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
/* the monthly equivalent, on genuinely recurring costs only. Never on a
   one-off or on a year-one total: that would imply finance we do not offer. */
.cost-table .c-mo{
  display:block; margin-top:5px; font-size:13.5px; font-weight:400;
  letter-spacing:0; color:var(--muted);
}
@media (max-width:759px){ .cost-table .c-num{ font-size:19px; } }
@media (max-width:759px){
  .cost-table th,.cost-table td{ padding:20px 18px 20px 0; }
  .cost-table tbody th{ font-size:16px; }
}
.table-note{ margin-top:20px; font-size:12.5px; color:var(--aside); max-width:60ch; }

/* ---------- plain sections ----------
   The Cost page drops the gutter section marks. Someone anxious about money is
   not helped by ornament, and the page still reads as this site through type,
   colour, the lockup and the footer. Headings carry the structure alone. */
.section--plain .section-head{ max-width:640px; }
.section--plain .section-head h2{ margin-bottom:0; }
.section--plain .section-head p{ margin-top:18px; }

/* screen-reader-only, for the table caption */
.u-visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* a line after the table, so the page does not end on its largest number */
.cost-after{ margin-top:30px; padding-top:24px; border-top:1px solid var(--line); max-width:62ch; color:var(--muted); font-size:16px; }
.cost-after a{ color:var(--teal); border-bottom:1px solid rgba(31,85,134,0.35); padding-bottom:1px; }

/* ---------- case records ----------
   The gallery grows as permissions land, so it is built as a list of records
   rather than a grid of thumbnails. One card is a complete, balanced row;
   ten are a stacked gallery. A three-up grid holding a single card reads as
   broken, which is the failure this component exists to avoid.
   Add a case by copying one <article class="case"> block. Nothing else changes. */
.case-list{ display:grid; gap:0; border-top:2px solid var(--ink); }
.case{ display:grid; gap:26px; padding:38px 0 42px; border-bottom:1px solid var(--line); }
@media (min-width:900px){
  .case{ grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:0 56px; align-items:start; }
}
.case:last-child{ border-bottom:0; }
.case-media .proof-stage{ aspect-ratio:4/5; }
.case-n{ display:block; font-size:10.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--brass); }
.case-detail h3{ margin:12px 0 24px; font-size:clamp(20px,2.2vw,25px); line-height:1.22; letter-spacing:-0.016em; }
.case-spec{ margin:0; display:grid; gap:0; border-top:1px solid var(--line); }
@media (min-width:620px){ .case-spec{ grid-template-columns:1fr 1fr; } }
.case-spec > div{ padding:15px 0; border-bottom:1px solid var(--line); }
@media (min-width:620px){
  .case-spec > div{ padding:15px 24px 15px 0; }
  .case-spec > div:nth-child(odd){ border-right:1px solid var(--line); }
  .case-spec > div:nth-child(even){ padding-left:24px; }
  .case-spec > div:nth-last-child(-n+2){ border-bottom:0; }
}
.case-spec dt{ font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--brass); margin-bottom:5px; }
.case-spec dd{ margin:0; font-size:15px; color:var(--ink); }
.case-permission{ margin-top:22px; font-size:12.5px; line-height:1.55; color:var(--aside); }

/* ---------- reels ----------
   Vertical films at 9:16, the shape they are shot in. Three across on desktop.
   Motion sits above the stills because it is the part a photograph cannot
   fake: a still can be angled and lit, a head turning in daylight cannot.
   Three 9:16 frames side by side on a phone would be 117px each, so below
   760px they become a snap-scrolling strip instead. */
.reels{ display:grid; gap:20px; }
@media (min-width:760px){ .reels{ grid-template-columns:repeat(3,1fr); } }
.reel{ margin:0; }
.reel-frame{ position:relative; overflow:hidden; border-radius:18px; background:#0F2237; aspect-ratio:9/16; }
.reel-frame img{ display:block; width:100%; height:100%; object-fit:cover; }
.reel figcaption{ margin-top:12px; font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.reels--strip{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
@media (min-width:760px){ .reels--strip{ display:grid; overflow:visible; } }
.reels--strip .reel{ flex:0 0 68%; scroll-snap-align:start; }
@media (min-width:760px){ .reels--strip .reel{ flex:none; } }
.reels-note{ margin:16px 0 46px; font-size:12.5px; color:var(--aside); max-width:62ch; }

/* ---------- before and after pairs ----------
   Two cases per row, four photographs across. Copy per case is one line: a
   four-field spec block each would put sixteen placeholders on a page whose
   job is looking. Permission is stated once for the set, not per photograph. */
.ggrid{ display:grid; gap:40px 36px; }
@media (min-width:900px){ .ggrid{ grid-template-columns:1fr 1fr; } }
.gcase{ margin:0; }
.gpair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:559px){ .gpair{ grid-template-columns:1fr; gap:12px; } }
.gimg{ position:relative; display:block; }
.gimg img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:14px; background:var(--alt); }
.gimg i{
  position:absolute; left:12px; top:12px; z-index:2; font-style:normal;
  font-size:10px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; background:rgba(255,255,255,0.94); color:var(--ink);
}
.gimg:last-child i{ background:rgba(15,34,55,0.88); color:#fff; }
.gcase figcaption{ margin-top:13px; font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.gallery-note{ margin-top:40px; padding-top:22px; border-top:1px solid var(--line); font-size:12.5px; color:var(--aside); max-width:62ch; }

/* ---------- the About letter ----------
   The one page that should read personal rather than procedural, so it runs as
   a single measure with the images set into the text like a column byline,
   signed at the end. Both pictures are small: the portrait is the subject and
   is always the larger, the studio is where she works and sits opposite it. */
.letter{ max-width:660px; }
.letter::after{ content:''; display:block; clear:both; }
.lead-p{ font-size:clamp(18px,2vw,21px); line-height:1.5; color:var(--ink); letter-spacing:-0.01em; }
#stacey p,#studio .letter p{ color:var(--muted); font-size:16.5px; }
#stacey p + p{ margin-top:18px; }
#stacey a{ color:var(--teal); border-bottom:1px solid rgba(31,85,134,0.35); padding-bottom:1px; }
.ph-line{ color:var(--aside); }
.sign{
  margin-top:34px; padding-top:22px; border-top:1px solid var(--line);
  font-size:17px; font-weight:600; color:var(--ink) !important;
}
.sign span{ display:block; margin-top:4px; font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--brass); }
#studio .letter h2{ margin-bottom:18px; }

/* the portrait: deliberately empty until a real photograph exists. A stock face
   here would be the single most damaging thing anywhere on this site, so the
   markup for the real image sits commented out inside the slot instead. */
.portrait-slot{
  position:relative; aspect-ratio:4/5; border-radius:14px;
  border:1px dashed rgba(19,26,34,0.30); background:rgba(19,26,34,0.015);
  display:flex; align-items:center; justify-content:center; padding:18px; text-align:center;
}
.portrait-slot img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:13px; }
.slot-note{ font-size:12px; line-height:1.55; color:var(--aside); max-width:22ch; }
.portrait-slot--small{ float:left; width:220px; margin:6px 30px 18px 0; }

/* the studio sits opposite the portrait and stays smaller than it */
.studio-inline{ float:right; width:140px; aspect-ratio:4/5; margin:6px 0 18px 30px; }
.studio-inline img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:13px; background:var(--alt); }

@media (max-width:559px){
  .portrait-slot--small,.studio-inline{ float:none; width:100%; margin:0 0 24px; }
}

/* ---------- the booking form ----------
   Lifted from the exploration file when the templates were built: these rules
   were approved with the K-series but never folded into site.css, so the live
   markup referenced classes that did not exist. Values unchanged. */
.book-single{ max-width:520px; }
.field-hint{ font-size:12.5px; color:var(--muted); }
.opt{ font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass); margin-left:8px; }

/* the confirmation replaces the form in place: no redirect, no new page */
.book-confirm{ max-width:520px; padding:34px 0 6px; }
.book-confirm:focus{ outline:none; }
.confirm-line{ font-size:clamp(20px,2.3vw,25px); line-height:1.3; letter-spacing:-0.015em; color:var(--ink); }
.confirm-sub{ margin-top:12px; color:var(--muted); font-size:16px; }

/* the right-hand column of the header-column frame. It carries no styles of
   its own — the grid does the work — but it is a real grid child and needs to
   exist so the steps do not collapse into the heading column. */
.hdr-body{ min-width:0; }

/* A step with no photograph drops to one column rather than holding a 196px
   hole open. The three process shots do not exist yet, so this is the state
   the page is actually in until they do. */
@media (min-width:760px){ .ph-step--noimage{ grid-template-columns:1fr; } }

/* Fact pairs: auto-fit rather than a fixed two-up. A single detail was
   leaving an empty second column, which read as a hole in the row. */
@media (min-width:640px){
  .ph-facts,
  .step-facts{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
}

/* ---- Reels strip (Results) — upright 9:16, three across, scrolls on phone ---- */
.reels--strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 0 0 3rem;
}
.reel { margin: 0; }
.reel-frame {
	position: relative;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 20px;
	background: #1B2A41;
}
.reel-frame video,
.reel-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.reel figcaption {
	margin-top: .75rem;
	font-size: .875rem;
	opacity: .7;
}
@media (max-width: 759px) {
	.reels--strip {
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: .5rem;
		margin-left: calc(-1 * var(--container-pad, 1.25rem));
		margin-right: calc(-1 * var(--container-pad, 1.25rem));
		padding-left: var(--container-pad, 1.25rem);
		padding-right: var(--container-pad, 1.25rem);
	}
	.reel {
		flex: 0 0 68vw;
		scroll-snap-align: start;
	}
}

/* ---- Results: reels are the lead, case pairs sit inset on a pale panel ---- */
.reels--strip { margin-bottom: 3.5rem; }
.reel-frame { background: #DCE8EF; }
.reels--strip + .ggrid {
	background: #DCE8EF;
	border-radius: 24px;
	padding: 2.5rem;
	margin-inline: 2rem;
}
@media (max-width: 759px) {
	.reels--strip + .ggrid {
		padding: 1.25rem;
		margin-inline: 0;
		border-radius: 18px;
	}
}

/* ---- Reels: caption overlaid top-left, staggered reveal ---- */
.reel { position: relative; }
.reel figcaption {
	position: absolute;
	top: 1rem;
	left: 1rem;
	margin: 0;
	padding: .4rem .8rem;
	border-radius: 999px;
	background: rgba(27, 42, 65, .78);
	color: #fff;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: 1;
	pointer-events: none;
	z-index: 2;
}
.reels--strip .reel:nth-child(2) { transition-delay: .12s; }
.reels--strip .reel:nth-child(3) { transition-delay: .24s; }

/* ---- Reels: title dead centre with the gold rule ---- */
.reel figcaption {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: radial-gradient(60% 40% at 50% 50%, rgba(27,42,65,.55), rgba(27,42,65,0) 70%);
	color: #fff;
	font-size: .85rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: center;
	pointer-events: none;
	z-index: 3;
}

/* ---- Reels overlay: rule, title, play button. Consolidated, overrides earlier blocks. ---- */
.reels--strip .reel { position: relative; }
.reels--strip .reel-frame { cursor: pointer; }
.reels--strip .reel figcaption {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: radial-gradient(60% 40% at 50% 50%, rgba(27,42,65,.55), rgba(27,42,65,0) 70%);
	color: #fff;
	font-size: .85rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: center;
	pointer-events: none;
	z-index: 3;
	opacity: 1;
	transition: opacity .3s;
}
.reels--strip .reel figcaption::before {
	content: "";
	display: block;
	width: 36px;
	height: 2px;
	margin: 0 0 .8rem;
	background: #B08D57;
}
.reels--strip .reel figcaption::after {
	content: "";
	display: block;
	width: 56px;
	height: 56px;
	margin-top: 1.1rem;
	border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,.85);
	background-color: rgba(255,255,255,.14);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6l9 6-9 6z' fill='white'/></svg>");
	background-repeat: no-repeat;
	background-position: 55% 50%;
	background-size: 26px 26px;
}
.reels--strip .reel.is-playing figcaption { opacity: 0; }
.reels--strip .reel-frame.is-playing { cursor: default; }

/* ---- How It Works step tiles: real card with a real shadow ---- */
.ph-steps .p-fig {
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	background: #DCE8EF;
	box-shadow:
		0 10px 24px rgba(27, 42, 65, .16),
		0 2px 6px rgba(27, 42, 65, .08);
}
.ph-steps .p-fig img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Page hero image: lifted off the ground ---- */
.page-head--photo .head-fig {
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	box-shadow:
		0 24px 48px rgba(27, 42, 65, .18),
		0 4px 12px rgba(27, 42, 65, .10);
}
.page-head--photo .head-fig img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Cost page: price table and closing panels as cards ---- */
.price-table {
	background: #fff;
	border-radius: 20px;
	padding: 1rem 2.5rem;
	width: 100%;
	border-collapse: collapse;
	box-shadow:
		0 14px 32px rgba(27, 42, 65, .10),
		0 2px 6px rgba(27, 42, 65, .06);
}
.price-table td,
.price-table th { padding: 1.6rem .75rem; vertical-align: top; }
.price-table tr + tr { border-top: 1px solid rgba(27, 42, 65, .10); }
.price-table td:nth-last-child(2) {
	font-size: 1.35rem;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}
.price-table td:last-child {
	color: #6E7C93;
	font-size: .95rem;
	text-align: right;
	white-space: nowrap;
}
@media (max-width: 759px) {
	.price-table { padding: .5rem 1.25rem; }
	.price-table td { padding: 1.25rem .4rem; }
}

/* ---- Cost page: price table and closing panels as cards ---- */
.price-table {
	background: #fff;
	border-radius: 20px;
	padding: 1rem 2.5rem;
	width: 100%;
	border-collapse: collapse;
	box-shadow:
		0 14px 32px rgba(27, 42, 65, .10),
		0 2px 6px rgba(27, 42, 65, .06);
}
.price-table td,
.price-table th { padding: 1.6rem .75rem; vertical-align: top; }
.price-table tr + tr { border-top: 1px solid rgba(27, 42, 65, .10); }
.price-table td:nth-last-child(2) {
	font-size: 1.35rem;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}
.price-table td:last-child {
	color: #6E7C93;
	font-size: .95rem;
	text-align: right;
	white-space: nowrap;
}
@media (max-width: 759px) {
	.price-table { padding: .5rem 1.25rem; }
	.price-table td { padding: 1.25rem .4rem; }
}

/* ---- Cost table: card treatment, generous padding ---- */
.cost-table-wrap {
	background: #fff;
	border-radius: 20px;
	padding: 1rem 2.5rem;
	box-shadow:
		0 14px 32px rgba(27, 42, 65, .10),
		0 2px 6px rgba(27, 42, 65, .06);
	overflow-x: auto;
}
.cost-table { width: 100%; border-collapse: collapse; }
.cost-table th,
.cost-table td { padding: 1.6rem .75rem; vertical-align: top; text-align: left; }
.cost-table thead th {
	padding-top: 1.25rem;
	padding-bottom: 1rem;
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .55;
	font-weight: 600;
}
.cost-table tbody tr + tr { border-top: 1px solid rgba(27, 42, 65, .10); }
.cost-table tbody th { font-weight: 600; white-space: nowrap; }
.cost-table .c-num {
	text-align: right;
	white-space: nowrap;
	font-size: 1.35rem;
	font-weight: 600;
}
.cost-table .c-mo {
	display: block;
	margin-top: .3rem;
	font-size: .9rem;
	font-weight: 400;
	color: #6E7C93;
}
@media (max-width: 759px) {
	.cost-table-wrap { padding: .5rem 1.25rem; }
	.cost-table th,
	.cost-table td { padding: 1.25rem .4rem; }
	.cost-table thead th:nth-child(2),
	.cost-table tbody td:nth-child(2) { display: none; }
}

/* ---- Cost page: the three headline figures ---- */
.cost-figures {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0 0 2.5rem;
}
.cost-fig {
	flex: 1 1 220px;
	background: #fff;
	border-radius: 20px;
	padding: 1.75rem 2rem;
	box-shadow:
		0 14px 32px rgba(27, 42, 65, .10),
		0 2px 6px rgba(27, 42, 65, .06);
}
.cost-fig--lead { background: #1B2A41; color: #fff; }
.cost-fig-rule {
	display: block;
	width: 36px;
	height: 2px;
	background: #B08D57;
	margin-bottom: 1rem;
}
.cost-fig-n {
	display: block;
	font-size: 2.75rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.02em;
}
.cost-fig-l {
	display: block;
	margin-top: .65rem;
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .6;
}
@media (max-width: 759px) {
	.cost-fig { padding: 1.25rem 1.5rem; }
	.cost-fig-n { font-size: 2.1rem; }
}

/* ---------- staggered reveals, matching the homepage step pattern ---------- */
.cost-figures .cost-fig:nth-child(2),
.reels--strip .reel:nth-child(2),
.ph-steps .ph-step:nth-child(2) { transition-delay: 90ms; }
.cost-figures .cost-fig:nth-child(3),
.reels--strip .reel:nth-child(3),
.ph-steps .ph-step:nth-child(3) { transition-delay: 180ms; }
.ph-steps .ph-step:nth-child(4) { transition-delay: 270ms; }

/* ---------- enquiry quiz ---------- */
.quiz { max-width: 600px; }
.quiz-progress { height: 3px; background: rgba(27,42,65,.12); border-radius: 2px; overflow: hidden; margin-bottom: .6rem; }
.quiz-bar { display: block; height: 100%; background: #B08D57; transition: width 320ms ease; }
.quiz-count { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; opacity: .55; margin: 0 0 1.75rem; }
.quiz-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.quiz-q { display: block; font-size: 2rem; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 1.5rem; max-width: 22ch; }
.quiz-opts { display: grid; gap: .75rem; }
.quiz-opt { position: relative; display: block; cursor: pointer; }
.quiz-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quiz-opt span {
	display: flex; align-items: center; gap: 1rem;
	padding: 1rem 1.25rem;
	background: #fff;
	border: 1.5px solid rgba(27,42,65,.14);
	border-radius: 14px;
	font-size: 1.05rem;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.quiz-opt img { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 12px; display: block; }
.quiz-opt:hover span { border-color: #1B2A41; }
.quiz-opt input:focus-visible + span { outline: 3px solid #B08D57; outline-offset: 2px; }
.quiz-opt input:checked + span { border-color: #1B2A41; box-shadow: inset 0 0 0 1px #1B2A41, 0 8px 20px rgba(27,42,65,.10); transform: translateX(4px); }
.quiz-opt input:checked + span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #B08D57; margin-left: auto; flex: 0 0 10px; }
.quiz-back { margin-top: 1.25rem; background: none; border: 0; padding: 0; font: inherit; color: #5F6E85; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.quiz-fields { display: grid; gap: 1rem; }
.quiz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.quiz-fields label { display: block; font-size: .85rem; letter-spacing: .04em; color: #5F6E85; }
.quiz-fields input {
	display: block; width: 100%; margin-top: .4rem; padding: .95rem 1.1rem;
	font: inherit; font-size: 1.05rem; color: #1B2A41;
	background: #fff; border: 1.5px solid rgba(27,42,65,.14); border-radius: 12px;
}
.quiz-fields input:focus { outline: none; border-color: #1B2A41; }
.quiz-fields input[aria-invalid="true"] { border-color: #B04A3C; }
.quiz-note { font-size: 1rem; color: #5F6E85; margin: -.5rem 0 1.5rem; }
.quiz-consent { font-size: .85rem; color: #5F6E85; margin: 1.25rem 0 1.5rem; }
.quiz-consent a { color: inherit; }
.quiz-actions { display: flex; gap: 1.25rem; align-items: center; }
.quiz-actions .quiz-back { margin-top: 0; }
.form-error { background: #fff; border-left: 3px solid #B04A3C; padding: .9rem 1.1rem; border-radius: 0 10px 10px 0; margin: 0 0 1.5rem; }
.book-confirm .btn { margin-top: 1.5rem; }
@media (max-width: 759px) { .quiz-q { font-size: 1.5rem; } .quiz-row { grid-template-columns: 1fr; } }

/* ---------- enquiry quiz v2: full-page, centred, intro screen ---------- */
.quiz, .book-confirm { max-width: 600px; margin: 0 auto; }
.quiz { padding: 2rem 0 4rem; }
.quiz-head { margin-bottom: 1.75rem; }
.quiz-q--intro { font-size: 2.6rem; max-width: 18ch; }
.quiz-lede { font-size: 1.2rem; line-height: 1.6; color: #2A3A52; max-width: 34rem; margin: 0 0 2rem; }
.quiz-opt span { padding: .9rem 1.25rem; }
.quiz-opt img { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 12px; background: #fff; object-fit: cover; }
@media (max-width: 759px) {
	.quiz-q--intro { font-size: 2rem; }
	.quiz-opt img { width: 56px; height: 56px; flex-basis: 56px; }
}

/* Ask-a-question modal */
.ask-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
}
.ask-modal.is-open { display: block; }

.ask-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(26, 35, 50, 0.55);
}

.ask-modal__panel {
	position: relative;
	max-width: 420px;
	margin: 8vh auto 0;
	background: #f7f5f1;
	border-radius: 4px;
	padding: 48px 40px 40px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.ask-modal__close {
	position: absolute;
	top: 16px;
	right: 20px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: #1a2332;
	cursor: pointer;
	opacity: 0.5;
}
.ask-modal__close:hover { opacity: 1; }

.ask-modal__accent {
	display: block;
	width: 36px;
	height: 3px;
	background: #b8935a;
	margin-bottom: 16px;
}

.ask-modal h2 {
	font-family: inherit;
	font-size: 28px;
	color: #1a2332;
	margin: 0 0 12px;
}

.ask-modal__intro {
	color: #4a5568;
	margin: 0 0 28px;
	line-height: 1.5;
}

.ask-modal__field {
	display: block;
	margin-bottom: 18px;
}
.ask-modal__field span {
	display: block;
	font-size: 13px;
	color: #4a5568;
	margin-bottom: 6px;
}
.ask-modal__field input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d8d3ca;
	border-radius: 4px;
	font-size: 16px;
	background: #fff;
	box-sizing: border-box;
}
.ask-modal__field input:focus {
	outline: none;
	border-color: #1a2332;
}

.ask-modal__submit {
	width: 100%;
	margin-top: 8px;
	justify-content: center;
}

.ask-modal__error {
	color: #b3453a;
	font-size: 14px;
	margin-top: 12px;
	text-align: center;
}

.ask-modal__success {
	text-align: center;
	padding: 20px 0;
}
.ask-modal__success h2 { margin-bottom: 12px; }
.ask-modal__success p { color: #4a5568; line-height: 1.5; margin: 0; }

@media (max-width: 480px) {
	.ask-modal__panel { margin: 5vh 16px 0; padding: 40px 24px 32px; }
}