/* Lifted verbatim from the inline <style> block of the approved static
   index.html. Homepage only. Loaded after site.css. Do not reformat.
   Six rules were removed where site.css is authoritative — see the
   v-next entry in BRAND-GUIDELINES.md. Each removal is marked below. */


  :root{
    --ice:#DCEAEF;          /* her logo blue — the hero and the alternating bands */
    --cream:#FBFCFD;        /* page ground */
    --alt:#DCEAEF;
    --white:#FFFFFF;
    --ink:#131A22;
    --muted:#4E5D67;
    --teal:#1F5586;         /* action: buttons and links only */
    --teal-deep:#1E4A70;    /* the plan block */
    --teal-night:#16304A;   /* booking section */
    --teal-deepest:#0F2237; /* footer and top banner */
    --aside:#4A6C78;        /* the quiet hero line */
    --pill:#DFEAEE;
    --pill-text:#317790;
    --gold:#E5B96A;         /* editorial accent on dark grounds */
    --brass:#7E5C18;        /* editorial accent on light grounds */
    --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(38px,5.6vw,60px); 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; }

  /* emphasis: a quieter aside, not a decorative italic. Used on the hero and the close only. */
  .hero-aside{ font-weight:400; color:var(--aside); }
  .cta-aside{ display:block; font-weight:400; font-size:0.5em; letter-spacing:0; color:var(--gold); margin-top:10px; }

  /* act mark: the site's kicker — brass serif numeral, short rule, tracked caps */
  .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; }

  .utility{ font-family:'Inter',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.14em; font-size:12px; color:var(--teal); }

  /* ---------- motion ---------- */
  .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; }
  }

  /* ---------- 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; }

  /* ---------- nav ---------- */
    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], .hero{ scroll-margin-top:90px; }
  @media (max-width:759px){ section[id], .hero{ scroll-margin-top:132px; } }
  .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; }
  .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); }
  @media (max-width:479px){
    .wm-name{ font-size:16.5px; }
    .wm-rule i{ width:22px; }
    .wm-rule span{ font-size:8.5px; letter-spacing:0.26em; }
  }
  .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); } }
  @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; }
    .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; transition:background 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out); white-space:nowrap; }
  .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); }
    .hero .btn-outline-dark:hover{ background:var(--ink); color:#fff; border-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; }
  @media (hover:hover) and (pointer:fine){ .link-quiet.on-dark:hover{ color:var(--teal); border-color:var(--teal); } }

  /* ---------- section shell ---------- */
  .section{ padding:88px 0; }
  .section.bg-alt{ background:var(--alt); }
/* removed: .section.bg-dark — deleted from both: matches nothing on any live page */
  .section.bg-dark h2{ color:#fff; }
  .section.bg-dark .section-head p{ color:#B7C6D0; }
  .section.bg-dark .act-mark{ color:#9EB2BA; }
  .section.bg-dark .act-mark em{ color:var(--gold); }
  .section.bg-dark .act-mark .rule{ background:var(--gold); }
  .section-head{ max-width:640px; margin-bottom:48px; }
  .section-head p{ margin-top:16px; color:var(--muted); font-size:17px; max-width:56ch; }

  /* on any teal ground the primary action inverts, so it stays the loudest thing */
  .cta-section .btn-primary,
  #plan .btn-primary{ background:#fff; color:var(--teal-night); border-color:#fff; }
  .hero .btn-outline-dark{ color:var(--ink); border-color:rgba(19,26,34,0.28); }
  @media (hover:hover) and (pointer:fine){
    .cta-section .btn-primary:hover,
    #plan .btn-primary:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
  }

  /* ---------- the plan on teal ---------- */
  #plan{ background:var(--teal-deep); color:#fff; }
  #plan h2, #plan h3{ color:#fff; }
  #plan .act-mark{ color:rgba(255,255,255,0.66); }
  #plan .act-mark em{ color:var(--gold); }
  #plan .act-mark .rule{ background:var(--gold); }
  #plan .plan-thread::before{ background:rgba(255,255,255,0.28); }
  #plan .th-step::before{ background:var(--teal-deep); border-color:var(--gold); }
  #plan .th-step.first::before{ background:var(--gold); }
  #plan .th-step .k{ color:var(--gold); }
  #plan .th-step p{ color:rgba(255,255,255,0.78); }
  #plan .th-step .meta{ color:rgba(255,255,255,0.6); }
  #plan .proof-chip{ color:rgba(255,255,255,0.75); }

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

  /* ---------- hero (night, scroll-scrubbed compare window) ---------- */
  .hero{ background:var(--ice); color:var(--ink); height:185vh; position:relative; }
  .hero-sticky{ position:sticky; top:0; min-height:100vh; display:flex; align-items:center; padding:96px 0 64px; }
  .hero .act-mark{ color:var(--muted); }
  .hero .act-mark em{ color:var(--brass); }
  .hero .act-mark .rule{ background:var(--brass); }
/* removed: .cta-section .act-mark — site.css wins: #9EB2BA is old-palette drift */
  .cta-section .act-mark em{ color:var(--gold); }
  .cta-section .act-mark .rule{ background:var(--gold); }
  .hero h1{ color:var(--ink); }
  
  .hero-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:64px; align-items:center; }
  @media (prefers-reduced-motion: reduce){
    .hero{ height:auto; }
    .hero-sticky{ position:static; min-height:0; }
  }
  .hero-copy .line{ opacity:0; transform:translateY(16px); transition:opacity 640ms var(--ease-out), transform 640ms var(--ease-out); }
  .hero.is-loaded .hero-copy .line{ opacity:1; transform:none; }
  .hero.is-loaded .hero-copy .line:nth-child(1){ transition-delay:20ms; }
  .hero.is-loaded .hero-copy .line:nth-child(2){ transition-delay:140ms; }
  .hero.is-loaded .hero-copy .line:nth-child(3){ transition-delay:260ms; }
  .hero.is-loaded .hero-copy .line:nth-child(4){ transition-delay:380ms; }
  .hero.is-loaded .hero-copy .line:nth-child(5){ transition-delay:460ms; }
  .hero-sub{ margin-top:22px; max-width:42ch; color:var(--muted); font-size:18px; }
  .hero-actions{ margin-top:32px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  .hero-trust{ margin-top:32px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:14px; }
  .stars{ display:inline-flex; gap:2px; }
  .stars svg{ width:15px; height:15px; fill:var(--gold); }

  .hero-media{ position:relative; }
  .hero-media .card{ position:relative; padding:14px; background:#fff; box-shadow:0 1px 2px rgba(19,42,60,0.06), 0 30px 60px -32px rgba(19,42,60,0.4); }
  .hero-compare{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:16px; background:var(--teal-deepest); }
  .hero-shot{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block;
    will-change:opacity, filter;
  }
  .hero-shot.is-after{ clip-path:inset(0 0 0 100%); }
  .hero-compare .state-tag{
    position:absolute; top:16px; left:16px; z-index:3;
    font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px;
    box-shadow:0 1px 4px rgba(0,0,0,0.2);
  }
  .hero-compare .state-tag.is-before{ background:#fff; color:var(--ink); }
  .hero-compare .state-tag.is-after{ background:var(--gold); color:var(--ink); opacity:0; }
  @media (prefers-reduced-motion: reduce){
    .hero-shot.is-after{ opacity:1; }
    .hero-compare .state-tag.is-before{ opacity:0; }
    .hero-compare .state-tag.is-after{ opacity:1; }
  }
  .hero-scrub-hint{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); background:rgba(22,22,22,0.78); color:#CBDAE3; font-size:12.5px; padding:7px 14px; border-radius:999px; z-index:4; white-space:nowrap; }
  .hero-badge{ position:absolute; right:22px; bottom:-18px; background:var(--teal); color:#fff; border-radius:16px; padding:12px 18px; box-shadow:var(--shadow); font-size:13px; font-weight:600; z-index:3; }
  .img-placeholder{ position:relative; background:#1B2226; border-radius:16px; overflow:hidden; display:flex; align-items:flex-end; justify-content:flex-start; padding:20px; aspect-ratio:4/5; }
  .img-placeholder.caption-right{ justify-content:flex-end; }
  .img-placeholder.caption-right .placeholder-tag{ text-align:right; }
  .img-placeholder.short{ aspect-ratio:16/10; }
  .img-placeholder::before,.img-placeholder::after{ content:''; position:absolute; width:18px; height:18px; }
  .img-placeholder::before{ top:12px; left:12px; border-top:1px solid rgba(255,255,255,0.35); border-left:1px solid rgba(255,255,255,0.35); }
  .img-placeholder::after{ bottom:12px; right:12px; border-bottom:1px solid rgba(255,255,255,0.35); border-right:1px solid rgba(255,255,255,0.35); }
  .placeholder-tag{ color:#9AA5A9; font-size:12.5px; line-height:1.55; max-width:30ch; }

  .compare-tag{ position:absolute; top:16px; font-size:12px; font-weight:600; letter-spacing:0.04em; padding:6px 12px; border-radius:999px; z-index:2; }
  .compare-tag.before{ left:16px; background:#fff; color:var(--ink); }
  .compare-tag.after{ right:16px; background:var(--ink); color:#fff; border:1px solid rgba(255,255,255,0.35); }

  .floating-badge{ position:absolute; right:22px; bottom:-18px; background:var(--teal); color:#fff; border-radius:16px; padding:12px 18px; box-shadow:var(--shadow); font-size:13px; font-weight:600; z-index:3; }

  /* ---------- results / proof: hold to reveal ---------- */
  .compare-layer{ position:absolute; inset:0; background:#20282C; }
  .compare-layer.after{ background:#171D20; }
  .compare-layer.before{ background:#262F34; clip-path:inset(0 50% 0 0); }
  .compare-handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; transform:translateX(-50%); z-index:2; }

  .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; } }

  /* ---------- triptych / numbered cards ---------- */
  .grid-3{ display:grid; gap:24px; }
  @media (min-width:760px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }
  .grid-4{ display:grid; gap:24px; }
  @media (min-width:640px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
  @media (min-width:1000px){ .grid-4{ grid-template-columns:repeat(4,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; }
  /* plan: the thread */
  .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.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; }

  /* ---------- cost ---------- */
  .cost-grid{ display:grid; gap:24px; }
  @media (min-width:760px){ .cost-grid{ grid-template-columns:repeat(3,1fr); } }
  .cost-item{ padding:30px; }
  .cost-item .tag{ display:inline-block; background:var(--pill); color:var(--pill-text); font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px; margin-bottom:16px; }
  .cost-item .figure{ font-size:28px; font-weight:700; }
  .cost-item p{ margin-top:10px; color:var(--muted); font-size:15px; }


  /* --- S2 title block: used on the hero and the close, framing the page --- */
  .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);
  }
  .hero .act-mark--block{ border-top-color:var(--ink); color:var(--ink); }
  .cta-section .act-mark--block{ border-top-color:rgba(255,255,255,0.45); color:#fff; }
  .hero .act-mark--block em{ color:var(--brass); }
  .cta-section .act-mark--block em{ color:var(--gold); }

  /* --- S5 hanging rule: the middle acts, marker in the left gutter --- */
  @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 */
    .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; }
  }

  /* ---------- meet stacey: studio card ---------- */
  .ph-frame{ position:relative; background:#1B2226; border-radius:16px; overflow:hidden; padding:9px; }
  .ph-frame .inner{ position:absolute; inset:9px; border:1px solid rgba(234,196,121,0.42); border-radius:10px; pointer-events:none; }
  .ph-frame .ph{ position:absolute; left:22px; bottom:20px; color:#9AA5A9; font-size:11.5px; max-width:24ch; line-height:1.55; }
  .stacey-card{ padding:16px; display:grid; gap:0; overflow:hidden; }
  @media (min-width:900px){ .stacey-card{ grid-template-columns:1.05fr 0.95fr; } }
  .stacey-card .ph-frame{ aspect-ratio:auto; min-height:380px; border-radius:16px; }
  .stacey-copy{ padding:36px 40px; display:flex; flex-direction:column; justify-content:center; }
  @media (max-width:899px){ .stacey-copy{ padding:26px 20px 18px; } }
  .stacey-copy > p{ color:var(--muted); font-size:16.5px; max-width:46ch; }
  .stacey-facts{ margin-top:26px; display:flex; flex-direction:column; gap:10px; }
  .stacey-fact{ display:flex; gap:12px; align-items:baseline; font-size:14.5px; color:var(--muted); }
  .stacey-fact::before{ content:''; width:14px; height:1px; background:var(--brass); flex:0 0 auto; position:relative; top:-4px; }
  .stacey-fact strong{ color:var(--ink); font-weight:600; }
  .name-row{ display:flex; align-items:baseline; gap:12px; margin-top:26px; padding-top:16px; border-top:1px solid var(--line); }
  .name-row .nm{ font-weight:600; font-size:15.5px; }
  .name-row .role{ color:var(--muted); font-size:13.5px; }

  /* ---------- proof chip (placeholder-marked, sits beside actions) ---------- */
  .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); }
/* removed: .cta-section .proof-chip — site.css wins: #9EB2BA is old-palette drift */

  /* ---------- mobile sticky action 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 280ms 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; } }

  /* ---------- plan step meta ---------- */
  .step-meta{ margin-top:12px; font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:10px; }

  /* ---------- the arch (signature section divider, plain, used at act breaks) ---------- */
  .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; } }

  /* ---------- problem: glass bridge ---------- */
  .problem-dark{ background:var(--ice); padding:20px 0 130px; position:relative; }
  .problem-dark::before{ content:''; }   /* ambient glows only read on a dark ground */
  .problem-light{ background:var(--cream); padding:0 0 16px; }
  .glass-band{
    position:relative; z-index:2;
    margin-top:-76px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:44px 48px;
  }
  @media (max-width:759px){ .glass-band{ padding:30px 24px; } }
  .glass-band .lede{ font-size:clamp(20px,2.6vw,28px); line-height:1.5; font-weight:500; color:var(--ink); max-width:44ch; }
  .glass-band .lede .aside{ font-weight:400; color:var(--brass); }
  .glass-band .turn{ margin-top:18px; color:var(--muted); font-size:16.5px; max-width:56ch; }

  /* ---------- guide / about ---------- */
  .about-card{ padding:16px; display:grid; gap:40px; align-items:center; }
  @media (min-width:760px){ .about-card{ grid-template-columns:0.85fr 1.15fr; padding:24px; } }
  .about-photo{ position:relative; }
  .about-photo .img-placeholder{ border-radius:16px; margin:0; }
  .about-badge{ position:absolute; left:20px; bottom:-16px; background:var(--teal); color:#fff; border-radius:14px; padding:12px 18px; font-size:13px; font-weight:600; box-shadow:var(--shadow); }
  .about-copy{ padding:8px 20px 20px 0; }
  @media (max-width:759px){ .about-copy{ padding:0 20px 20px; } }
  .about-copy p{ margin-top:16px; color:var(--muted); font-size:17px; max-width:52ch; }

  /* ---------- what changes ---------- */
  .stakes-line{ margin-top:28px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:15px; max-width:56ch; }

  /* ---------- testimonials ---------- */
  .testi-feature{ padding:16px; display:grid; gap:0; margin-bottom:28px; }
  @media (min-width:700px){ .testi-feature{ grid-template-columns:0.9fr 1.1fr; } }
  .testi-photo{ width:100%; height:100%; object-fit:cover; border-radius:16px; display:block; }
  .testi-feature-copy{ padding:28px 24px; display:flex; flex-direction:column; justify-content:center; }
  .testi-grid{ display:grid; gap:24px; }
  @media (min-width:760px){ .testi-grid{ grid-template-columns:repeat(3,1fr); } }
  .testi-card{ padding:26px; display:flex; flex-direction:column; gap:16px; }
  .testi-card blockquote{ margin:0; font-size:15.5px; color:var(--ink); }
  .testi-meta{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line); }
  .testi-meta .name{ font-weight:600; font-size:14px; }
  .testi-meta .role{ color:var(--muted); font-size:12.5px; }
  .testi-trust{ margin-top:32px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
  .g-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:13.5px; font-weight:500; }
  .avatar-chip{ width:40px; height:40px; border-radius:50%; background:var(--pill); color:var(--pill-text); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; flex:0 0 auto; }


  /* ---------- final cta ---------- */
  .cta-section{ background:var(--teal-night); color:#fff; }
  .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; }
  .field{ display:flex; flex-direction:column; gap:8px; }
/* removed: .field label — site.css wins: #9EB2BA is old-palette drift */
/* removed: .field input — site.css wins: light base + .cta-section dark override */
  .field input:focus, .field textarea:focus{ outline:none; border-color:var(--teal); }
/* removed: .field textarea — site.css wins: light base + .cta-section dark override */
/* removed: .form-note — site.css wins: #7d7d78 is old-palette drift */
  .form-status{ font-size:14px; color:var(--gold); min-height:18px; }


  /* ---------- 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; }
/* removed: .footer-word .wm-name — deleted from both: footer wordmark replaced by the logo image */
  .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-col h3{ 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-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-bottom{ padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:#7A939D; }

  @media (max-width:759px){
    .hero-grid{ grid-template-columns:1fr; gap:32px; }
    .hero{ height:170vh; }
    .hero-sticky{ padding:120px 0 48px; align-items:flex-start; }
    .hero-compare{ aspect-ratio:4/3; }
    .section{ padding:64px 0; }
  }

/* ---------- problem: glass bridge, restored ---------- */
.glass-band {
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .55);
	box-shadow:
		0 20px 48px rgba(27, 42, 65, .14),
		inset 0 1px 0 rgba(255, 255, 255, .65);
}
@supports not (backdrop-filter: blur(1px)) {
	.glass-band { background: rgba(255, 255, 255, .92); }
}

/* ---------- problem: glass bridge, restored ---------- */
.glass-band {
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .55);
	box-shadow:
		0 20px 48px rgba(27, 42, 65, .14),
		inset 0 1px 0 rgba(255, 255, 255, .65);
}
@supports not (backdrop-filter: blur(1px)) {
	.glass-band { background: rgba(255, 255, 255, .92); }
}

/* ---------- reviews: swipe strip, gold rule unless a real star count exists ---------- */
.testi-strip {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: .25rem .25rem 1rem;
	margin: 0 -.25rem;
}
.testi-strip .testi-card {
	flex: 0 0 340px;
	scroll-snap-align: start;
}
.testi-rule {
	display: block;
	width: 36px;
	height: 2px;
	background: var(--brass, #B08D57);
	margin-bottom: 1rem;
}
.testi-stars { color: var(--brass, #B08D57); letter-spacing: .12em; margin-bottom: .75rem; }
.testi-strip .testi-card:nth-child(2) { transition-delay: 90ms; }
.testi-strip .testi-card:nth-child(3) { transition-delay: 180ms; }
.testi-strip .testi-card:nth-child(4) { transition-delay: 270ms; }
@media (max-width: 759px) { .testi-strip .testi-card { flex-basis: 84vw; } }

/* ---------- hero: after image only. Scroll-scrub compare retired 9 Sep 2026 ---------- */
.hero { height: auto; }
.hero-sticky { position: static; min-height: 0; padding: 96px 0 64px; }
.hero-single {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 16px;
	background: var(--teal-deepest);
}
.hero-single .hero-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 759px) {
	.hero { height: auto; }
	.hero-sticky { padding: 120px 0 48px; }
	.hero-single { aspect-ratio: 4 / 3; }
}

/* ---------- hero, option A: copy left, after photo right, no border ---------- */
.hero-sticky { padding: 88px 0 72px; }
.hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}
.hero-copy { order: 1; }
.hero-media { order: 2; position: relative; }
.hero-frame { background: none; padding: 0; border: 0; box-shadow: none; border-radius: 0; }
.hero-single {
	aspect-ratio: 4 / 5;
	border-radius: 24px;
	overflow: hidden;
	box-shadow:
		0 24px 48px rgba(27, 42, 65, .18),
		0 4px 12px rgba(27, 42, 65, .10);
}
.hero-badge { right: -14px; bottom: 28px; }
@media (max-width: 820px) {
	.hero-grid { grid-template-columns: 1fr; gap: 2rem; }
	.hero-media { order: 1; }
	.hero-copy { order: 2; }
	.hero-single { aspect-ratio: 4 / 3; }
	.hero-badge { right: 16px; bottom: 16px; }
}

/* ---------- hero: larger type, copy column slightly wider ---------- */
.hero-grid { grid-template-columns: 1.08fr .92fr; gap: 3.5rem; }
.hero-copy h1 { font-size: clamp(3rem, 5.4vw, 5rem); line-height: 1.02; letter-spacing: -.025em; }
.hero-copy .hero-sub { font-size: 1.2rem; line-height: 1.6; max-width: 34rem; }
@media (max-width: 820px) {
	.hero-grid { grid-template-columns: 1fr; }
	.hero-copy h1 { font-size: clamp(2.3rem, 9vw, 3rem); }
}