:root{
    --bg:#F7FCFB;
    --surface:#FFFFFF;
    --surface-alt:#E7F6F3;
    --ink:#12302C;
    --ink-soft:#4E6A66;
    --line:#D6EAE6;
    --tiffany:#0DB4A9;
    --tiffany-deep:#0A8E85;
    --tiffany-tint:rgba(13,180,169,0.10);
    --tiffany-tint-strong:rgba(13,180,169,0.18);

    --font-display:'Literata', Georgia, 'Times New Roman', serif;
    --font-body:'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:'IBM Plex Mono', 'Consolas', 'SFMono-Regular', monospace;

    --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
    --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4.5rem; --space-9:7rem;

    --radius-sm:6px; --radius-md:10px;
    --shadow-card:0 1px 2px rgba(18,48,44,.04), 0 8px 24px -12px rgba(18,48,44,.12);
    --danger:#B3261E;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0A1715;
      --surface:#0F211E;
      --surface-alt:#123028;
      --ink:#EAF6F3;
      --ink-soft:#9FC2BC;
      --line:#1D3A34;
      --tiffany:#2FD9CB;
      --tiffany-deep:#7CEFE3;
      --tiffany-tint:rgba(47,217,203,0.13);
      --tiffany-tint-strong:rgba(47,217,203,0.22);
      --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
      --danger:#FF8A80;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0A1715;
    --surface:#0F211E;
    --surface-alt:#123028;
    --ink:#EAF6F3;
    --ink-soft:#9FC2BC;
    --line:#1D3A34;
    --tiffany:#2FD9CB;
    --tiffany-deep:#7CEFE3;
    --tiffany-tint:rgba(47,217,203,0.13);
    --tiffany-tint-strong:rgba(47,217,203,0.22);
    --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --danger:#FF8A80;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%; overflow-x:hidden;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;}
  h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;text-wrap:balance;}
  p{margin:0;}
  ul{margin:0;padding:0;list-style:none;}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

  :focus-visible{outline:2px solid var(--tiffany-deep);outline-offset:3px;border-radius:2px;}

  .container{
    max-width:1180px;
    margin-inline:auto;
    padding-inline:clamp(1.25rem, 4vw, 3rem);
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--tiffany-deep);
    display:flex;
    align-items:center;
    gap:.6em;
    white-space:nowrap;
  }

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid transparent;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  header.scrolled{ border-color:var(--line); box-shadow:0 1px 0 rgba(0,0,0,.02); }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding-block:var(--space-4);
  }
  .brand{
    display:flex; align-items:center; gap:.65rem;
    font-family:var(--font-display); font-weight:600; font-size:1.05rem;
    text-decoration:none; letter-spacing:.01em;
  }
  .brand-text{ display:flex; flex-direction:column; line-height:1.2; white-space:nowrap; }
  .brand-kicker{
    font-family:var(--font-mono); font-size:.6rem; font-weight:500;
    text-transform:uppercase; letter-spacing:.08em; color:var(--tiffany-deep);
  }
  .brand-mark{
    width:2rem; height:2rem; border-radius:50%;
    background:var(--tiffany-tint);
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:.68rem; color:var(--tiffany-deep); font-weight:500;
    overflow:hidden; flex:none;
  }
  .brand-mark img{ width:78%; height:78%; object-fit:contain; display:block; }
  .nav-links{
    display:flex; align-items:center; gap:var(--space-6);
    font-size:.92rem;
  }
  .nav-links a{
    text-decoration:none; color:var(--ink-soft);
    position:relative; padding-block:.25rem;
    transition:color .15s ease;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
    background:var(--tiffany); transition:right .2s ease;
  }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a:hover::after{ right:0; }

  .btn{
    display:inline-flex; align-items:center; gap:.55rem;
    font-family:var(--font-body); font-weight:600; font-size:.88rem;
    padding:.72rem 1.3rem; border-radius:var(--radius-sm);
    text-decoration:none; cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    border:1px solid transparent;
    white-space:nowrap;
  }
  .btn:active{ transform:translateY(1px); }
  .btn-primary{ background:var(--tiffany); color:#04211E; }
  .btn-primary:hover{ background:var(--tiffany-deep); }
  .btn-ghost{ border-color:var(--line); color:var(--ink); background:var(--surface); }
  .btn-ghost:hover{ border-color:var(--tiffany); color:var(--tiffany-deep); }
  .btn svg{ width:1rem; height:1rem; }

  .nav-cta{ display:flex; align-items:center; gap:.75rem; }
  .nav-toggle{ display:none; }

  /* ---------- Hero ---------- */
  .hero{
    padding-block:clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 5rem);
    position:relative;
    overflow:hidden;
  }
  .hero .container{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:clamp(2rem, 5vw, 4rem);
    align-items:center;
  }
  .hero-tags{
    display:flex; flex-wrap:wrap; gap:.5rem;
    margin-top:var(--space-6);
  }
  .tag{
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
    padding:.4rem .7rem; border-radius:999px;
    background:var(--surface-alt); border:1px solid var(--line); color:var(--ink-soft);
  }
  .hero h1{
    font-size:clamp(2.15rem, 1.5rem + 3vw, 3.6rem);
    line-height:1.08;
    margin-top:var(--space-4);
    letter-spacing:-.01em;
  }
  .hero-lead{
    font-size:1.1rem; color:var(--ink-soft); max-width:46ch;
    margin-top:var(--space-5); line-height:1.65;
  }
  .hero-actions{
    display:flex; flex-wrap:wrap; gap:.85rem; margin-top:var(--space-7);
  }
  .hero-note{
    margin-top:var(--space-5);
    font-family:var(--font-mono); font-size:.74rem; color:var(--ink-soft);
    display:flex; align-items:center; gap:.5rem;
  }
  .hero-note .dot{ width:6px;height:6px;border-radius:50%;background:var(--tiffany); flex:none; }

  .hero-visual{
    position:relative; aspect-ratio:4/5; border-radius:var(--radius-md);
    background:var(--surface-alt); border:1px solid var(--line);
    overflow:hidden;
  }
  .hero-visual img{ width:100%; height:100%; display:block; object-fit:cover; object-position:50% 8%; }
  .hero-visual::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.02);
  }

  /* ---------- Section spine layout ---------- */
  section.chart{
    border-top:1px solid var(--line);
    padding-block:clamp(3rem, 7vw, 5rem);
  }
  section.chart .container{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:clamp(1.5rem, 4vw, 3.5rem);
    align-items:start;
  }
  .chart-marker{
    position:relative;
    padding-top:.15rem;
    min-width:0; /* let the grid item actually shrink to the track width instead of
                    growing to fit an unbroken long word, which was overflowing into
                    the content column next to it */
  }
  .chart-marker .eyebrow{ flex-wrap:wrap; }
  .chart-marker::before{
    content:""; position:absolute; left:-1px; top:.35rem;
    width:7px; height:7px; border-radius:50%;
    background:var(--tiffany); box-shadow:0 0 0 3px var(--tiffany-tint);
  }
  .chart-heading{
    /* Capped lower than other headings on purpose: this column is a fixed
       260px regardless of viewport width, but vw-based clamps keep growing
       on wide screens — left uncapped, long Ukrainian words (e.g.
       "починається", "звертаються") stopped fitting on one line and broke
       mid-word. word-break stays on only as a last-resort safety net. */
    font-size:clamp(1.4rem, 1rem + 1.1vw, 1.85rem);
    margin-top:var(--space-3);
    max-width:22ch;
    overflow-wrap:break-word;
    word-break:break-word;
  }
  .chart-body{ max-width:64ch; }
  .chart-body > p + p{ margin-top:var(--space-4); }
  .chart-body p{ color:var(--ink-soft); font-size:1.02rem; line-height:1.7; }
  .chart-body p strong{ color:var(--ink); font-weight:600; }

  /* ---------- About photo ---------- */
  .about-grid{ display:grid; grid-template-columns:220px 1fr; gap:var(--space-6); align-items:start; }
  .about-photo img{
    width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 12%;
    border-radius:var(--radius-md); border:1px solid var(--line);
  }

  /* ---------- Story teaser ---------- */
  .story-teaser-box{
    margin-top:var(--space-6); display:grid; grid-template-columns:220px 1fr; gap:var(--space-6);
    align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:var(--space-6);
  }
  .story-teaser-photo{ display:block; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line); }
  .story-teaser-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .3s ease; }
  .story-teaser-photo:hover img{ transform:scale(1.04); }
  .story-stat{
    font-family:var(--font-display); font-size:2rem; font-weight:600; color:var(--tiffany-deep);
    line-height:1;
  }
  .story-stat span{ font-family:var(--font-mono); font-size:.85rem; color:var(--ink-soft); font-weight:400; margin-left:.5rem; }
  .story-teaser-text p:not(.story-stat){ color:var(--ink-soft); font-size:.98rem; line-height:1.65; margin-top:var(--space-3); max-width:56ch; }
  .story-teaser-text .btn{ margin-top:var(--space-5); }
  .service-story-link{
    display:block; width:fit-content; margin-top:var(--space-3); font-family:var(--font-mono); font-size:.72rem;
    color:var(--tiffany-deep); text-decoration:none; border-bottom:1px dashed var(--tiffany-deep);
  }
  .service-story-link:hover{ color:var(--tiffany); border-color:var(--tiffany); }

  /* ---------- Services ---------- */
  .service-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-5);
    margin-top:var(--space-7);
  }
  .service-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:var(--space-6);
    box-shadow:var(--shadow-card);
    transition:border-color .18s ease, transform .18s ease;
  }
  .service-card:hover{ border-color:var(--tiffany); transform:translateY(-3px); }
  .service-icon{
    width:2.75rem; height:2.75rem; border-radius:var(--radius-sm);
    background:var(--tiffany-tint); color:var(--tiffany-deep);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:var(--space-5);
  }
  .service-icon svg{ width:1.4rem; height:1.4rem; stroke:currentColor; }
  .service-num{
    font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); letter-spacing:.06em;
  }
  .service-card h3{
    font-size:1.2rem; margin-top:.5rem; margin-bottom:var(--space-3);
  }
  .service-card p{ color:var(--ink-soft); font-size:.95rem; line-height:1.65; }
  .service-flag{
    margin-top:var(--space-4);
    font-family:var(--font-mono); font-size:.68rem; color:var(--tiffany-deep);
    padding-top:var(--space-3); border-top:1px dashed var(--line);
    line-height:1.5;
  }

  /* ---------- Why / advantages ---------- */
  .why-grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-5) var(--space-6);
    margin-top:var(--space-6);
  }
  .why-item{ display:flex; gap:var(--space-4); }
  .why-icon{
    flex:none; width:2.25rem; height:2.25rem; border-radius:50%;
    border:1px solid var(--line); background:var(--surface);
    display:flex; align-items:center; justify-content:center; color:var(--tiffany-deep);
  }
  .why-icon svg{ width:1.05rem; height:1.05rem; }
  .why-item h3{ font-size:1.02rem; font-weight:700; font-family:var(--font-body); }
  .why-item p{ color:var(--ink-soft); font-size:.92rem; margin-top:.35rem; line-height:1.6; }

  /* ---------- Reviews ---------- */
  .reviews-box{
    margin-top:var(--space-6);
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:var(--space-6);
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-6);
    flex-wrap:wrap;
  }
  .reviews-box p{ color:var(--ink-soft); max-width:46ch; font-size:.98rem; line-height:1.65; }
  .reviews-actions{ display:flex; gap:.75rem; flex-wrap:wrap; }

  /* ---------- FAQ ---------- */
  .faq-list{ margin-top:var(--space-6); border-top:1px solid var(--line); }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-q{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
    padding-block:var(--space-5); text-align:left;
    font-family:var(--font-body); font-weight:600; font-size:1rem;
  }
  .faq-q svg{ width:1.15rem; height:1.15rem; flex:none; color:var(--tiffany-deep); transition:transform .2s ease; }
  .faq-item[data-open="true"] .faq-q svg{ transform:rotate(180deg); }
  .faq-a{
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .faq-a p{ color:var(--ink-soft); padding-bottom:var(--space-5); max-width:60ch; line-height:1.65; font-size:.96rem; }

  /* ---------- Contact ---------- */
  .contact-grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-5);
    margin-top:var(--space-6);
  }
  .contact-card{
    display:flex; align-items:center; gap:var(--space-5);
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:var(--space-6);
    text-decoration:none; color:var(--ink);
    transition:border-color .18s ease, transform .18s ease;
  }
  .contact-card:hover{ border-color:var(--tiffany); transform:translateY(-2px); }
  .contact-icon{
    flex:none; width:3rem; height:3rem; border-radius:50%;
    background:var(--tiffany-tint); color:var(--tiffany-deep);
    display:flex; align-items:center; justify-content:center;
  }
  .contact-icon svg{ width:1.4rem; height:1.4rem; }
  .contact-card h3{ font-size:1.05rem; font-family:var(--font-body); font-weight:700; }
  .contact-card span{ display:block; color:var(--ink-soft); font-size:.88rem; margin-top:.2rem; }
  .contact-future{
    margin-top:var(--space-5);
    display:flex; gap:.7rem; align-items:flex-start;
    font-family:var(--font-mono); font-size:.76rem; color:var(--ink-soft);
    padding:var(--space-4); border:1px dashed var(--line); border-radius:var(--radius-sm);
  }
  .contact-future svg{ width:1rem; height:1rem; flex:none; margin-top:.15rem; color:var(--tiffany-deep); }

  /* ---------- Booking banner (index page) ---------- */
  .booking-banner{
    margin-top:var(--space-6);
    background:var(--tiffany-tint); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:var(--space-6);
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-6);
    flex-wrap:wrap;
  }
  .booking-banner h3{ font-size:1.1rem; font-family:var(--font-body); font-weight:700; }
  .booking-banner p{ color:var(--ink-soft); font-size:.95rem; margin-top:.35rem; max-width:46ch; line-height:1.6; }

  /* ---------- Footer ---------- */
  footer{ border-top:1px solid var(--line); padding-block:var(--space-6); }
  .footer-row{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); flex-wrap:wrap;
  }
  .footer-brand{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); }
  .footer-social{ display:flex; gap:.85rem; }
  .footer-social a{
    width:2.1rem; height:2.1rem; border-radius:50%; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
    transition:color .15s ease, border-color .15s ease;
  }
  .footer-social a:hover{ color:var(--tiffany-deep); border-color:var(--tiffany); }
  .footer-social svg{ width:1rem; height:1rem; }
  .disclaimer{
    margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--line);
    font-size:.78rem; color:var(--ink-soft); line-height:1.6; max-width:80ch;
  }

  /* ---------- Reveal ---------- */
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
  .reveal.is-visible{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 920px){
    .hero .container{ grid-template-columns:1fr; }
    .hero-visual{ order:-1; max-width:22rem; margin-inline:auto; }
    section.chart .container{ grid-template-columns:1fr; }
    .chart-marker::before{ display:none; }
    .service-grid{ grid-template-columns:1fr; }
    .why-grid{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; }
    .about-grid{ grid-template-columns:1fr; }
    .about-photo{ max-width:14rem; margin:0 auto; }
    .story-teaser-box{ grid-template-columns:1fr; }
    .story-teaser-photo{ max-width:14rem; margin:0 auto; }
  }
  /* Nav switches to the drawer well before the general content breakpoints —
     with a brand + 6 links + 2 buttons, it has no room left on a laptop-width
     window even though the rest of the page still fits fine at that width. */
  @media (max-width: 1080px){
    .nav-links{
      position:fixed; inset:0 0 0 auto; top:0; height:100vh; width:min(78vw, 320px);
      background:var(--surface); border-left:1px solid var(--line);
      flex-direction:column; align-items:flex-start; justify-content:flex-start;
      padding:5.5rem var(--space-6) var(--space-6);
      gap:var(--space-5);
      transform:translateX(100%); transition:transform .25s ease;
      font-size:1.05rem;
      z-index:55; box-shadow:-8px 0 24px -8px rgba(0,0,0,.15);
    }
    .nav-links[data-open="true"]{ transform:translateX(0); }
    .nav-links a::after{ display:none; }
    .nav-cta .btn-ghost{ display:none; }
    .nav-toggle{
      display:flex; align-items:center; justify-content:center;
      width:2.4rem; height:2.4rem; border-radius:var(--radius-sm);
      border:1px solid var(--line); background:var(--surface); z-index:60; position:relative;
    }
    .nav-toggle svg{ width:1.15rem; height:1.15rem; }
    .nav-scrim{
      display:none; position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:35;
    }
    .nav-scrim[data-open="true"]{ display:block; }
  }
  /* Small phones: brand text + "Записатись" button + hamburger have zero
     room to spare at ~375px — tighten them so they never touch. */
  @media (max-width: 420px){
    .nav{ gap:.5rem; }
    .brand{ font-size:.92rem; gap:.5rem; }
    .brand-mark{ width:1.75rem; height:1.75rem; font-size:.6rem; }
    .nav-cta{ gap:.5rem; }
    .nav-cta .btn-primary{ padding:.6rem .85rem; font-size:.8rem; }
  }
  @media (max-width: 760px){
    .reviews-box{ flex-direction:column; align-items:flex-start; }
    .footer-row{ flex-direction:column; align-items:flex-start; }
    .story-gallery{ grid-template-columns:repeat(2, 1fr) !important; }
    .results-grid{ grid-template-columns:1fr !important; }
    .booking-banner{ flex-direction:column; align-items:flex-start; }
    .form-row, .form-row-3{ grid-template-columns:1fr !important; }
    .referral-meta{ grid-template-columns:1fr; }
    .referral-letterhead{ flex-direction:column; }
    .referral-letterhead .contact-block{ text-align:left; }
  }

  /* ---------- Story page: note box + gallery ---------- */
  .note-box{
    margin-top:var(--space-5);
    display:flex; gap:.7rem; align-items:flex-start;
    font-family:var(--font-mono); font-size:.76rem; color:var(--ink-soft);
    padding:var(--space-4); border:1px dashed var(--line); border-radius:var(--radius-sm);
  }
  .note-box svg{ width:1rem; height:1rem; flex:none; margin-top:.15rem; color:var(--tiffany-deep); }
  .story-gallery{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-4);
    margin-top:var(--space-6);
  }
  .story-gallery img{
    width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 18%;
    border-radius:var(--radius-md); border:1px solid var(--line);
  }

  /* ---------- Extra before/after comparison collages ---------- */
  .compare-block{ display:flex; flex-direction:column; gap:var(--space-6); margin-top:var(--space-6); }
  .compare-item img{
    width:100%; display:block; border-radius:var(--radius-md); border:1px solid var(--line);
  }
  .compare-labels{
    display:flex; justify-content:space-between; margin-top:var(--space-2);
    font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase;
    letter-spacing:.08em; color:var(--ink-soft); padding-inline:.2rem;
  }

  /* ---------- Results gallery ---------- */
  .results-filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:var(--space-6); }
  .filter-pill{
    font-family:var(--font-mono); font-size:.76rem; letter-spacing:.02em;
    padding:.5rem .9rem; border-radius:999px; border:1px solid var(--line);
    background:var(--bg); color:var(--ink-soft); cursor:pointer;
    transition:border-color .15s ease, background .15s ease, color .15s ease;
  }
  .filter-pill:hover{ border-color:var(--tiffany); color:var(--ink); }
  .filter-pill.is-active{
    border-color:var(--tiffany); background:var(--tiffany-tint); color:var(--tiffany-deep); font-weight:600;
  }
  .results-grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-6);
  }
  .result-item{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:var(--space-4); position:relative;
  }
  .result-item .compare-block{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
  .result-item .compare-item{ background:none; border:0; padding:0; }
  .result-item .compare-item img{ border-radius:var(--radius-sm); }
  .result-note{ margin-top:var(--space-3); font-size:.85rem; color:var(--ink-soft); line-height:1.55; }
  .result-item.is-draft{ border-style:dashed; border-color:var(--tiffany-deep); }
  .draft-badge{
    position:absolute; top:var(--space-3); right:var(--space-3);
    font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.05em;
    background:var(--tiffany-deep); color:var(--bg); padding:.3rem .55rem; border-radius:999px;
  }

  .results-empty{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-4);
    padding:var(--space-8) var(--space-5); border:1px dashed var(--line); border-radius:var(--radius-md);
    color:var(--ink-soft);
  }
  .results-empty svg{ width:2.5rem; height:2.5rem; color:var(--tiffany-deep); }
  .results-empty p{ font-size:.98rem; line-height:1.65; max-width:38ch; }
  .results-empty strong{ color:var(--ink); }

  .draft-toggle-row{ margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--line); }
  .draft-toggle{
    display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
    font-size:.85rem; color:var(--ink-soft);
  }
  .draft-toggle input{ accent-color:var(--tiffany-deep); }
  .draft-toggle .hint{ font-size:.78rem; }

  /* ---------- Simple page intro (booking page) ---------- */
  .page-intro{ padding-block:clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem); }
  .page-intro .container{ max-width:760px; }
  .page-intro h1{
    font-family:var(--font-display); font-weight:600; margin-top:var(--space-4);
    font-size:clamp(1.8rem, 1.4rem + 2vw, 2.75rem); line-height:1.15; text-wrap:balance;
  }
  .page-intro p{ color:var(--ink-soft); font-size:1.05rem; line-height:1.65; margin-top:var(--space-4); max-width:60ch; }

  section.chart-wide{ padding-block:0 clamp(3rem, 7vw, 5rem); }
  section.chart-wide .container{ max-width:760px; }

  /* ---------- Booking form ---------- */
  .booking-form{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:clamp(1.5rem, 4vw, var(--space-7));
    display:flex; flex-direction:column; gap:var(--space-7);
  }
  .form-section{ display:flex; flex-direction:column; gap:var(--space-4); }
  .form-section-title{
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--tiffany-deep); border-bottom:1px solid var(--line); padding-bottom:var(--space-3);
  }
  .form-row{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-4); }
  .form-row-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-4); }
  .field{ display:flex; flex-direction:column; gap:.4rem; }
  .field label{ font-size:.85rem; font-weight:600; color:var(--ink); }
  .field .hint{ font-weight:400; color:var(--ink-soft); font-size:.8rem; }
  .field input[type="text"], .field input[type="tel"], .field input[type="number"], .field textarea{
    font:inherit; font-family:var(--font-body); font-size:.95rem; color:var(--ink);
    background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:.65rem .85rem; width:100%;
  }
  .field textarea{ min-height:5rem; resize:vertical; }
  .field input:focus, .field textarea:focus{
    outline:2px solid var(--tiffany-deep); outline-offset:1px; border-color:var(--tiffany);
  }
  .field input[type="file"]{
    font:inherit; font-family:var(--font-body); font-size:.85rem; color:var(--ink-soft);
    background:var(--bg); border:1px dashed var(--line); border-radius:var(--radius-sm);
    padding:.55rem .7rem; width:100%; cursor:pointer;
  }
  .field input[type="file"]:focus{ outline:2px solid var(--tiffany-deep); outline-offset:1px; }

  .choice-group{ display:flex; flex-wrap:wrap; gap:.6rem; }
  .choice{
    display:inline-flex; align-items:center; gap:.5rem;
    border:1px solid var(--line); border-radius:999px; padding:.5rem .9rem;
    font-size:.88rem; cursor:pointer; background:var(--bg);
    transition:border-color .15s ease, background .15s ease;
  }
  .choice input{ accent-color:var(--tiffany-deep); }
  .choice:has(input:checked){ border-color:var(--tiffany); background:var(--tiffany-tint); }
  .choice:has(input:focus-visible){ outline:2px solid var(--tiffany-deep); outline-offset:2px; }

  .bmi-box{
    display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap;
    background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:var(--space-4) var(--space-5);
  }
  .bmi-value{ font-family:var(--font-display); font-size:2rem; font-weight:600; color:var(--tiffany-deep); line-height:1; white-space:nowrap; }
  .bmi-value span{ font-family:var(--font-mono); font-size:.68rem; color:var(--ink-soft); display:block; margin-top:.35rem; font-weight:400; letter-spacing:.04em; }
  .bmi-category{ font-size:.95rem; font-weight:700; }
  .bmi-note{ font-size:.8rem; color:var(--ink-soft); max-width:32ch; margin-top:.25rem; }

  .lab-block{
    display:none;
    border:1px dashed var(--tiffany-deep); border-radius:var(--radius-md);
    padding:var(--space-5); background:var(--tiffany-tint); margin-top:var(--space-2);
  }
  .lab-block[data-visible="true"]{ display:block; }
  .lab-block h3{ font-family:var(--font-body); font-weight:700; font-size:1rem; }
  .lab-note{ font-size:.85rem; color:var(--ink-soft); margin-top:.35rem; }
  .lab-list{ margin-top:var(--space-4); display:grid; gap:.5rem; list-style:none; padding:0; }
  .lab-list li{ display:flex; gap:.6rem; font-size:.9rem; color:var(--ink); align-items:flex-start; line-height:1.5; }
  .lab-list li::before{ content:"—"; color:var(--tiffany-deep); flex:none; }
  .lab-actions{ margin-top:var(--space-5); }
  .lab-error{ color:var(--danger); font-size:.82rem; margin-top:var(--space-3); }

  .form-submit{ display:flex; flex-direction:column; gap:var(--space-3); align-items:flex-start; }
  .form-submit .hint{ font-size:.82rem; color:var(--ink-soft); line-height:1.6; }
  .form-submit .hint a{ color:var(--tiffany-deep); }

  /* ---------- Referral document ---------- */
  .referral-wrap{ display:none; }
  .referral-wrap[data-visible="true"]{ display:block; }
  .referral-actions{ display:flex; gap:.75rem; margin-bottom:var(--space-5); flex-wrap:wrap; }
  .referral-doc{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
    padding:clamp(1.5rem, 4vw, var(--space-7));
  }
  .referral-letterhead{
    display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-5);
    border-bottom:2px solid var(--ink); padding-bottom:var(--space-4); flex-wrap:wrap;
  }
  .referral-letterhead .brand-block{ font-family:var(--font-display); font-size:1.2rem; font-weight:600; }
  .referral-letterhead .brand-sub{ font-family:var(--font-body); font-size:.8rem; color:var(--ink-soft); margin-top:.4rem; font-weight:400; line-height:1.5; }
  .referral-letterhead .contact-block{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); text-align:right; line-height:1.7; }
  .referral-title{
    font-family:var(--font-display); font-size:1.4rem; font-weight:600; text-align:center;
    margin-top:var(--space-6); text-transform:uppercase; letter-spacing:.03em;
  }
  .referral-meta{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-3) var(--space-6);
    margin-top:var(--space-6); padding:0; list-style:none;
  }
  .referral-meta dt{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; color:var(--ink-soft); letter-spacing:.05em; margin:0; }
  .referral-meta dd{ margin:.15rem 0 0; font-weight:600; }
  .referral-list{ margin-top:var(--space-6); }
  .referral-list h4{ font-family:var(--font-body); font-size:.95rem; font-weight:700; margin-bottom:var(--space-3); }
  .referral-list ol{ list-style:decimal; padding-left:1.3rem; display:grid; gap:.45rem; }
  .referral-list ol li{ font-size:.92rem; line-height:1.5; }
  .referral-note{
    margin-top:var(--space-6); padding:var(--space-4); border:1px dashed var(--tiffany-deep);
    border-radius:var(--radius-sm); background:var(--tiffany-tint); font-size:.88rem; line-height:1.6;
  }
  .referral-footer{ margin-top:var(--space-6); padding-top:var(--space-4); border-top:1px solid var(--line); font-size:.78rem; color:var(--ink-soft); }

  /* ---------- Print (referral only) ---------- */
  @media print{
    header, footer, .booking-form, .page-intro, .no-print{ display:none !important; }
    body{ background:#fff; }
    section.chart-wide{ padding:0; }
    .referral-wrap{ display:block !important; }
    .referral-doc{ border:none; padding:0; }
  }