/* ---- The approved palette ------------------------------------------------
     Dark sage, signed off by Christie. This is the visual contract, not a
     default: it lives on :root itself, so nothing downstream — no query string,
     no local storage left over from the retired review panel, no injected
     attribute — can move the site off it. There are deliberately no alternate
     palette rules to override it. Locked by tests/palette-lock.test.mjs.
     -------------------------------------------------------------------------- */
  :root{
    color-scheme:dark;
    --ink:#101712;
    --panel:#171f19;
    --panel-2:#1f2820;
    --paper:#f2efe6;
    --paper-dim:#c4cbbb;
    --paper-faint:rgba(242,239,230,0.42);
    --rail:#9bb68e;
    --rail-bright:#bacba9;
    --rail-dim:#50654c;
    /* Preserve the alpha-channel values from the historically approved sage
       rendering. These were inherited from the original root palette. */
    --paper-rgb:244,237,225;
    --rail-rgb:201,154,76;
    --serif: Didot, "Big Caslon", "Hoefler Text", Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    --header-h:68px;
    --gutter:clamp(1.25rem, 4vw, 3.5rem);
    --rail-gutter:88px;
    --scroll-progress:0;
    --s1:0.5rem;
    --s2:1rem;
    --s3:1.75rem;
    --s4:3rem;
    --s5:5rem;
    --s6:8rem;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--paper);
    font-family:var(--sans);
    font-size:17px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{display:block;max-width:100%;}
  a{color:inherit;}
  h1,h2,h3{font-family:var(--serif);font-weight:400;}
  :focus-visible{outline:2px solid var(--rail-bright);outline-offset:3px;}

  .skip-link{
    position:absolute;left:-9999px;top:0;z-index:200;
    background:var(--rail);color:var(--ink);
    padding:0.9rem 1.4rem;font-weight:600;text-decoration:none;
  }
  .skip-link:focus{left:1rem;top:1rem;}

  .wrap{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding-inline:var(--gutter);
  }

  /* ---- The rail. Adapted from Magic UI scroll-progress; see head comment. ---- */
  .rail{
    position:fixed;
    top:0;
    left:calc(var(--rail-gutter) / 2 - 1.5px);
    width:3px;
    height:100vh;
    z-index:60;
    pointer-events:none;
  }
  .rail-track{
    position:absolute;
    top:96px;bottom:56px;left:0;
    width:3px;
    background:rgba(var(--rail-rgb),0.16);
  }
  .rail-fill{
    position:absolute;
    inset:0;
    background:var(--rail);
    transform:scaleY(var(--scroll-progress));
    transform-origin:top center;
  }
  .rail-fill::after{
    content:"";
    position:absolute;
    left:-3.5px;bottom:-5px;
    width:10px;height:10px;
    border-radius:50%;
    background:var(--rail-bright);
  }
  .rail-label{
    position:absolute;
    left:14px;bottom:56px;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-size:0.66rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--paper-faint);
  }

  /* ---- Header ---- */
  .site-header{
    position:sticky;top:0;z-index:50;
    height:var(--header-h);
    background:var(--ink);
    border-bottom:1px solid transparent;
    transition:border-color 220ms ease;
  }
  .site-header.is-stuck{border-bottom-color:rgba(var(--paper-rgb),0.1);}
  .header-inner{
    height:100%;
    display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  }
  .wordmark{display:inline-flex;align-items:center;text-decoration:none;}
  .wordmark img{width:auto;height:48px;max-width:min(40vw,170px);object-fit:contain;}
  .site-nav{display:flex;align-items:center;gap:0.35rem;}
  .site-nav a{
    display:inline-flex;align-items:center;
    min-height:44px;
    padding:0 0.8rem;
    font-size:0.86rem;
    letter-spacing:0.09em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--paper-dim);
    transition:color 180ms ease;
  }
  .site-nav a:hover{color:var(--rail);}
  .site-nav a.nav-book{
    color:var(--rail);
    border:1px solid var(--rail-dim);
    margin-left:0.5rem;
    padding:0 1.1rem;
    white-space:nowrap;
  }
  .site-nav a.nav-book:hover{background:var(--rail);color:var(--ink);border-color:var(--rail);}

  /* ---- Buttons ---- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;
    min-height:52px;
    padding:0.95rem 1.75rem;
    font-family:var(--sans);
    font-size:1rem;
    letter-spacing:0.015em;
    text-decoration:none;
    border-radius:1px;
    transition:background 200ms ease,color 200ms ease,border-color 200ms ease,transform 200ms cubic-bezier(0.16,1,0.3,1);
  }
  .btn svg{width:15px;height:15px;flex:none;}
  .btn-primary{
    background:var(--rail);
    color:var(--ink);
    font-weight:650;
    border:1px solid var(--rail);
  }
  .btn-primary:hover{background:var(--rail-bright);border-color:var(--rail-bright);transform:translateY(-2px);}
  .btn-ghost{
    background:transparent;
    color:var(--paper);
    border:1px solid rgba(var(--paper-rgb),0.32);
  }
  .btn-ghost:hover{border-color:var(--rail);color:var(--rail);transform:translateY(-2px);}
  .text-link{
    display:inline-flex;align-items:center;gap:0.5rem;
    min-height:44px;
    color:var(--rail);
    font-size:0.98rem;
    text-decoration:none;
    border-bottom:1px solid var(--rail-dim);
    width:fit-content;
    transition:border-color 180ms ease,color 180ms ease;
  }
  .text-link:hover{border-color:var(--rail-bright);color:var(--rail-bright);}
  .text-link svg{width:14px;height:14px;flex:none;}

  /* ---- Conditional booking action ----
     Hidden until site.js proves no other visible Bookwhen action is in view. */
  .floating-book{
    position:fixed;
    left:50%;bottom:1rem;z-index:44;
    transform:translate(-50%,10px);
    display:inline-flex;align-items:center;justify-content:center;
    min-height:50px;
    padding:0.8rem 1.4rem;
    background:var(--rail);
    color:var(--ink);
    border:1px solid var(--rail);
    box-shadow:0 10px 30px rgba(0,0,0,0.28);
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity 180ms ease,transform 220ms cubic-bezier(0.16,1,0.3,1),visibility 0s linear 220ms,background 180ms ease,border-color 180ms ease;
  }
  .floating-book.is-visible{
    transform:translate(-50%,0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s;
  }
  .floating-book:hover{background:var(--rail-bright);border-color:var(--rail-bright);}

  /* ---- Hero ---- */
  .hero{
    display:grid;
    grid-template-columns:53% 47%;
    min-height:calc(100vh - var(--header-h));
    min-height:calc(100svh - var(--header-h));
    border-top:1px solid rgba(var(--paper-rgb),0.06);
  }
  .hero-photo{position:relative;overflow:hidden;background:var(--panel-2);}
  .hero-photo img{
    width:100%;height:100%;
    object-fit:cover;object-position:56% 44%;
    filter:saturate(1.03) contrast(1.04);
  }
  .hero-photo::after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(97deg, rgba(16,14,12,0.5) 0%, rgba(16,14,12,0.05) 42%, rgba(16,14,12,0) 66%),
      linear-gradient(0deg, rgba(16,14,12,0.55) 0%, rgba(16,14,12,0) 16%);
  }
  .hero-copy{
    position:relative;
    background:var(--panel);
    display:flex;flex-direction:column;justify-content:center;
    padding:var(--s4) clamp(1.5rem,3.4vw,3.25rem) var(--s4) clamp(1.5rem,3.2vw,3rem);
    border-left:1px solid rgba(var(--rail-rgb),0.5);
  }
  .eyebrow{
    margin:0 0 1.1rem;
    font-size:0.74rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--rail);
  }
  .hero h1{
    margin:0 0 1.5rem;
    font-size:clamp(2.35rem, 4.55vw, 4.3rem);
    line-height:1.02;
    letter-spacing:-0.018em;
  }
  .hero h1 .ln{display:block;}
  .hero-support{
    margin:0 0 1.6rem;
    font-size:clamp(0.97rem, 1.12vw, 1.13rem);
    line-height:1.6;
    color:var(--paper-dim);
    max-width:38ch;
  }
  .cta-row{display:flex;flex-wrap:wrap;gap:0.85rem;margin-bottom:1.9rem;}
  .proof{list-style:none;margin:0;padding:0;display:grid;gap:0.55rem;}
  .proof li{
    display:flex;align-items:flex-start;gap:0.7rem;
    font-size:0.93rem;
    color:var(--paper-dim);
  }
  .proof li::before{
    content:"";
    flex:none;
    width:16px;height:1px;
    margin-top:0.72em;
    background:var(--rail);
  }
  .photo-note{
    position:absolute;left:var(--s2);bottom:var(--s2);z-index:2;
    font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;
    color:rgba(244,237,225,0.5);
  }

  /* ---- Section frame ---- */
  .section{padding-block:clamp(4rem,8vw,7.5rem);position:relative;}
  .section + .section{border-top:1px solid rgba(var(--paper-rgb),0.07);}
  .section-tag{
    display:flex;align-items:center;gap:0.85rem;
    margin:0 0 1.4rem;
    font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--rail);
  }
  .section-tag::before{content:"";width:34px;height:1px;background:var(--rail);flex:none;}
  .section h2{
    margin:0 0 1.3rem;
    font-size:clamp(1.95rem, 3.5vw, 3.15rem);
    line-height:1.06;
    letter-spacing:-0.015em;
    max-width:17ch;
  }
  .lede{
    margin:0 0 1.9rem;
    font-size:clamp(1rem,1.1vw,1.1rem);
    color:var(--paper-dim);
    max-width:46ch;
  }

  .split{display:grid;gap:clamp(2rem,4.5vw,4.5rem);align-items:start;}
  .split-7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
  .split-5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
  .figure{position:relative;overflow:hidden;background:var(--panel-2);}
  .figure img{width:100%;height:100%;object-fit:cover;}
  /* Restrained unifying grade so the bright studio-wall frames sit inside the
     near-black and gold world. Composition and content are untouched. */
  .graded{filter:saturate(0.66) contrast(1.05) brightness(0.97);}
  .figure figcaption{
    margin-top:0.85rem;
    font-size:0.74rem;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--paper-faint);
  }
  .offset-down{margin-top:clamp(1.5rem,5vw,4.5rem);}
  .offset-up{margin-top:clamp(0rem,-2vw,0rem);}

  /* ---- Classes and schedule ---- */
  .schedule{list-style:none;margin:0 0 1.5rem;padding:0;border-top:1px solid rgba(var(--paper-rgb),0.13);}
  .schedule li{border-bottom:1px solid rgba(var(--paper-rgb),0.13);}
  .schedule a{
    display:grid;
    grid-template-columns:minmax(0,4.5fr) minmax(0,5.5fr) auto;
    align-items:baseline;
    gap:0.4rem 1.5rem;
    min-height:76px;
    padding:1.35rem 0;
    text-decoration:none;
    transition:background 200ms ease,padding-left 240ms cubic-bezier(0.16,1,0.3,1);
  }
  .schedule a:hover{background:rgba(var(--rail-rgb),0.08);padding-left:0.9rem;}
  .sched-when{display:flex;flex-direction:column;gap:0.15rem;}
  .sched-day{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.05;}
  .sched-time{font-size:0.86rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--rail);}
  .sched-what{display:flex;flex-direction:column;gap:0.15rem;}
  .sched-name{font-size:1.03rem;color:var(--paper);}
  .sched-where{font-size:0.88rem;color:var(--paper-dim);}
  .sched-go{
    font-size:0.78rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--rail);
    white-space:nowrap;align-self:center;
  }
  .facts{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:0.5rem;}
  .facts li{display:flex;gap:0.7rem;font-size:0.95rem;color:var(--paper-dim);}
  .facts li::before{content:"";flex:none;width:16px;height:1px;margin-top:0.72em;background:var(--rail-dim);}
  .mutable{
    margin:0 0 1.6rem;
    padding:0.9rem 1.1rem;
    border-left:2px solid var(--rail-dim);
    background:rgba(var(--paper-rgb),0.05);
    font-size:0.82rem;
    line-height:1.55;
    color:var(--paper-faint);
    max-width:52ch;
  }

  /* ---- Beginner objections ---- */
  .objections{margin:0 0 1.9rem;padding:0;display:grid;gap:1px;background:rgba(var(--paper-rgb),0.12);}
  .objections > div{background:var(--ink);padding:1.35rem 0;}
  .objections dt{
    font-family:var(--serif);
    font-size:1.22rem;
    margin-bottom:0.3rem;
  }
  .objections dd{margin:0;font-size:0.96rem;color:var(--paper-dim);}

  /* ---- Christie ---- */
  .pullquote{
    margin:1.9rem 0 1.8rem;
    padding-left:1.4rem;
    border-left:2px solid var(--rail);
    max-width:36ch;
  }
  .pullquote p{
    margin:0 0 0.6rem;
    font-family:var(--serif);
    font-size:clamp(1.3rem,1.9vw,1.7rem);
    line-height:1.32;
    color:var(--paper);
  }
  .pullquote footer{
    font-size:0.76rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--rail);
  }

  /* ---- Retreats ---- */
  .retreat-pair{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:clamp(0.75rem,1.6vw,1.5rem);
    align-items:start;
  }
  .retreat-pair .figure:first-child{aspect-ratio:2/3;}
  .retreat-pair .figure:last-child{aspect-ratio:1/1;margin-top:clamp(2rem,7vw,6rem);}
  .depth{will-change:transform;transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1));}

  /* ---- FAQ ---- */
  .faq{max-width:42rem;border-top:1px solid rgba(var(--paper-rgb),0.13);}
  .faq details{border-bottom:1px solid rgba(var(--paper-rgb),0.13);}
  .faq summary{
    display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
    min-height:64px;
    padding:1.15rem 0;
    cursor:pointer;
    list-style:none;
    font-family:var(--serif);
    font-size:clamp(1.15rem,1.6vw,1.4rem);
    color:var(--paper);
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{
    content:"";
    flex:none;
    width:14px;height:14px;
    background:
      linear-gradient(var(--rail),var(--rail)) center/14px 1px no-repeat,
      linear-gradient(var(--rail),var(--rail)) center/1px 14px no-repeat;
    transition:transform 220ms cubic-bezier(0.16,1,0.3,1);
  }
  .faq details[open] summary::after{transform:rotate(90deg);background-size:14px 1px, 0 0;}
  .faq summary:hover{color:var(--rail);}
  .faq p{margin:0 0 1.4rem;color:var(--paper-dim);font-size:1rem;max-width:56ch;}

  /* ---- Close ---- */
  .close-band{background:var(--panel);border-top:1px solid rgba(var(--rail-rgb),0.4);}
  .close-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,4vw,4rem);align-items:center;}
  .close-grid h2{max-width:14ch;}
  .close-photo{aspect-ratio:4/3;}

  /* ---- Footer ---- */
  .site-footer{background:var(--ink);border-top:1px solid rgba(var(--paper-rgb),0.1);padding-block:clamp(2.75rem,5vw,4.5rem);}
  .footer-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,4fr);gap:clamp(2rem,4vw,3.5rem);}
  .footer-logo{width:auto;height:64px;object-fit:contain;opacity:1;}
  .footer-h{margin:0 0 0.9rem;font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--rail);}
  .footer-list{list-style:none;margin:0;padding:0;}
  .footer-list a{
    display:inline-flex;align-items:center;min-height:44px;
    color:var(--paper-dim);text-decoration:none;font-size:0.95rem;
  }
  .footer-list a:hover{color:var(--rail);}
  .footer-note{
    margin-top:clamp(2rem,4vw,3rem);
    padding-top:1.5rem;
    border-top:1px solid rgba(var(--paper-rgb),0.1);
    font-size:0.78rem;
    line-height:1.6;
    color:var(--paper-faint);
    max-width:70ch;
  }
  .footer-note a{color:var(--paper-dim);text-decoration:underline;}
  address{font-style:normal;color:var(--paper-dim);font-size:0.95rem;}

  /* =========================================================================
     MOTION
     Word cadence adapted from 21st.dev Cnippet text-reveal.
     In-view entry adapted from Magic UI blur-fade.
     ========================================================================= */
  @keyframes rise{from{opacity:0;transform:translate3d(0,10px,0);}to{opacity:1;transform:translate3d(0,0,0);}}
  @keyframes fade{from{opacity:0;}to{opacity:1;}}

  .hero h1 .ln,
  .hero h1 .w{opacity:0;animation:rise 520ms cubic-bezier(0.16,1,0.3,1) forwards;}
  .hero h1 .ln{animation-delay:calc(var(--i,0) * 90ms);}
  .hero h1.is-split .ln{opacity:1;animation:none;}
  .hero h1 .w{display:inline-block;animation-delay:calc(var(--i,0) * 55ms);}
  .hero .eyebrow{opacity:0;animation:rise 460ms cubic-bezier(0.16,1,0.3,1) 60ms forwards;}
  .hero .hero-support{opacity:0;animation:rise 460ms cubic-bezier(0.16,1,0.3,1) 260ms forwards;}
  /* The booking CTA fades on its own short timeline and is clickable from 0ms. */
  .hero .cta-row{opacity:0;animation:fade 320ms ease 180ms forwards;}
  .hero .proof{opacity:0;animation:rise 460ms cubic-bezier(0.16,1,0.3,1) 380ms forwards;}
  .hero-photo img{opacity:0;animation:fade 620ms ease forwards;}

  .js [data-reveal]{opacity:0;transform:translate3d(0,8px,0);}
  .js [data-reveal].is-in{
    opacity:1;transform:translate3d(0,0,0);
    transition:opacity 620ms ease,transform 620ms cubic-bezier(0.16,1,0.3,1);
  }
  .js [data-reveal="image"]{filter:blur(2px);}
  .js [data-reveal="image"].is-in{filter:blur(0);transition:opacity 620ms ease,transform 620ms cubic-bezier(0.16,1,0.3,1),filter 620ms ease;}
  .js [data-reveal][data-delay="1"].is-in{transition-delay:90ms;}
  .js [data-reveal][data-delay="2"].is-in{transition-delay:180ms;}
  .js [data-reveal][data-delay="3"].is-in{transition-delay:270ms;}

  /* =========================================================================
     DESKTOP RAIL GUTTER
     ========================================================================= */
  @media (min-width: 1024px){
    body{padding-left:var(--rail-gutter);}
  }

  /* =========================================================================
     TABLET
     ========================================================================= */
  @media (max-width: 1023px){
    .rail{
      top:0;left:0;
      width:100%;height:2px;
    }
    .rail-track{top:0;bottom:auto;left:0;width:100%;height:2px;}
    .rail-fill{transform:scaleX(var(--scroll-progress));transform-origin:left center;}
    .rail-fill::after{display:none;}
    .rail-label{display:none;}
    .split-7-5,.split-5-7,.close-grid{grid-template-columns:minmax(0,1fr);}
    .offset-down{margin-top:0;}
  }

  /* =========================================================================
     MOBILE — authored composition, not a stacked desktop.
     Copy, primary CTA and reassurance sit inside the first 844px, above the
     photograph band, per research/direction-3-cro-audit.md.
     ========================================================================= */
  @media (max-width: 760px){
    :root{--header-h:56px;}
    body{font-size:16px;}
    .hero{
      display:flex;
      flex-direction:column;
      min-height:0;
    }
    .hero-photo{
      order:1;
      height:clamp(170px, 26vh, 250px);
      flex:none;
    }
    .hero-photo img{object-position:56% 42%;}
    .hero-photo::after{
      background:linear-gradient(180deg, rgba(16,14,12,0.42) 0%, rgba(16,14,12,0) 45%);
    }
    .hero-copy{
      order:2;
      border-left:0;
      border-top:2px solid var(--rail);
      padding:1.6rem var(--gutter) 2rem;
      justify-content:flex-start;
    }
    .hero h1{font-size:2.35rem;margin-bottom:1rem;}
    .hero .eyebrow{margin-bottom:0.85rem;font-size:0.7rem;}
    .hero-support{font-size:0.97rem;margin-bottom:1.15rem;max-width:none;}
    .cta-row{flex-direction:column;align-items:stretch;gap:0.65rem;margin-bottom:1.15rem;}
    .btn{width:100%;min-height:50px;padding:0.85rem 1.25rem;}
    .proof li{font-size:0.88rem;line-height:1.45;}
    .photo-note{display:none;}

    .schedule a{
      grid-template-columns:minmax(0,1fr);
      gap:0.5rem;
      min-height:96px;
      padding:1.25rem 0;
    }
    .schedule a:hover{padding-left:0;}
    .sched-go{align-self:start;}
    .retreat-pair{grid-template-columns:minmax(0,1fr);gap:1rem;}
    .retreat-pair .figure:last-child{margin-top:0;}
    .retreat-pair .figure:first-child{aspect-ratio:3/4;}
    .depth{transform:none;}
    .footer-grid{grid-template-columns:minmax(0,1fr);gap:2rem;}
    .footer-logo{height:52px;}
    .section h2{max-width:none;}
  }

  @media (max-width: 420px){
    :root{--header-h:64px;}
    .header-inner{gap:0.75rem;}
    .wordmark img{width:auto;height:48px;max-width:150px;}
    .site-nav a.nav-book{margin-left:0;padding:0 0.8rem;font-size:0.78rem;}
    .hero h1{font-size:2.15rem;}
  }

  /* =========================================================================
     REDUCED MOTION — everything visible immediately, no transforms at all.
     ========================================================================= */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{
      animation:none !important;
      transition:none !important;
    }
    .hero h1 .ln,
    .hero h1 .w,
    .hero .eyebrow,
    .hero .hero-support,
    .hero .cta-row,
    .hero .proof,
    .hero-photo img,
    .js [data-reveal],
    .js [data-reveal].is-in{
      opacity:1 !important;
      transform:none !important;
      filter:none !important;
    }
    .depth{transform:none !important;}
    .rail-fill{transform:none;opacity:0.55;}
    .rail-fill::after{display:none;}
    .btn:hover,.schedule a:hover{transform:none;}
  }

  /* =========================================================================
     SHARED SITE EXTENSIONS
     Everything above this line is the approved homepage system, moved verbatim
     out of review/index.html so every route is authored from one stylesheet.
     Nothing below changes the approved homepage first viewport: the rules are
     either new components (menu, page heads, prose, form) or scoped to routes
     that did not exist when the homepage was approved.
     ========================================================================= */

  /* ---- Navigation: route state and the mobile Menu/Close control ---- */
  .site-nav a[aria-current="page"]{color:var(--rail);}
  .site-nav a:not(.nav-book)[aria-current="page"]{box-shadow:inset 0 -1px 0 var(--rail);}

  .nav-toggle{
    display:none;
    align-items:center;
    gap:0.55rem;
    min-height:48px;
    padding:0 0.9rem;
    background:transparent;
    color:var(--paper);
    border:1px solid rgba(var(--paper-rgb),0.32);
    border-radius:1px;
    font-family:var(--sans);
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    cursor:pointer;
    transition:border-color 180ms ease,color 180ms ease;
  }
  .nav-toggle:hover{border-color:var(--rail);color:var(--rail);}
  .nav-toggle .bars{position:relative;width:15px;height:9px;flex:none;}
  .nav-toggle .bars::before,
  .nav-toggle .bars::after{
    content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;
    transition:transform 200ms cubic-bezier(0.16,1,0.3,1),top 200ms cubic-bezier(0.16,1,0.3,1);
  }
  .nav-toggle .bars::before{top:0;}
  .nav-toggle .bars::after{top:8px;}
  .nav-toggle[aria-expanded="true"] .bars::before{top:4px;transform:rotate(45deg);}
  .nav-toggle[aria-expanded="true"] .bars::after{top:4px;transform:rotate(-45deg);}

  .mobile-menu{
    display:none;
    position:fixed;
    left:0;right:0;
    top:var(--header-h);
    bottom:0;
    z-index:49;
    background:var(--ink);
    border-top:2px solid var(--rail);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:var(--s2) 0 var(--s4);
  }
  .mobile-menu[data-open="true"]{display:block;}
  .mobile-menu ul{list-style:none;margin:0;padding:0;}
  .mobile-menu li + li{border-top:1px solid rgba(var(--paper-rgb),0.1);}
  .mobile-menu a{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    min-height:56px;
    padding:0.9rem 0;
    color:var(--paper);
    font-family:var(--serif);
    font-size:1.35rem;
    text-decoration:none;
  }
  .mobile-menu a[aria-current="page"]{color:var(--rail);}
  .mobile-menu a .go{
    font-family:var(--sans);
    font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--rail);
  }
  .mobile-menu .menu-book{
    margin-top:var(--s3);
    width:100%;
    min-height:56px;
    padding-inline:1.5rem;
    justify-content:center;
    gap:0.65rem;
  }
  .mobile-menu .menu-contact{
    margin-top:var(--s3);
    padding-top:var(--s2);
    border-top:1px solid rgba(var(--paper-rgb),0.1);
    font-size:0.9rem;
    color:var(--paper-dim);
  }
  .mobile-menu .menu-contact a{
    display:inline-flex;min-height:44px;font-family:var(--sans);font-size:0.95rem;color:var(--rail);
  }
  body[data-menu-open="true"]{overflow:hidden;}

  /* ---- Route page head. The hero grammar at a lower amplitude. ---- */
  .page-head{
    position:relative;
    background:var(--panel);
    border-top:1px solid rgba(var(--paper-rgb),0.06);
    border-bottom:1px solid rgba(var(--rail-rgb),0.4);
    padding-block:clamp(3rem,7vw,6rem);
  }
  .page-head .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:center;}
  .page-head h1{
    margin:0 0 1.3rem;
    font-size:clamp(2.2rem,4.1vw,3.7rem);
    line-height:1.04;
    letter-spacing:-0.018em;
    max-width:16ch;
  }
  .page-head .lede{margin-bottom:1.6rem;}
  .page-head .figure{aspect-ratio:4/5;margin:0;}
  .breadcrumb{margin:0 0 1.1rem;font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--paper-faint);}
  .breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.5rem;}
  .breadcrumb li + li::before{content:"/";margin-right:0.5rem;color:var(--rail-dim);}
  .breadcrumb a{color:var(--rail);text-decoration:none;}
  .breadcrumb a:hover{text-decoration:underline;}

  /* ---- Editorial prose ---- */
  .prose{max-width:62ch;}
  .prose p{margin:0 0 1.25rem;color:var(--paper-dim);}
  .prose p.first{color:var(--paper);font-size:1.08rem;}
  .prose h3{
    margin:2.2rem 0 0.8rem;
    font-size:clamp(1.25rem,1.9vw,1.6rem);
    line-height:1.2;
    color:var(--paper);
  }
  .prose ul{margin:0 0 1.4rem;padding:0;list-style:none;display:grid;gap:0.55rem;}
  .prose ul li{display:flex;gap:0.7rem;color:var(--paper-dim);}
  .prose ul li::before{content:"";flex:none;width:16px;height:1px;margin-top:0.72em;background:var(--rail-dim);}
  .prose a:not(.btn):not(.text-link){color:var(--rail);text-decoration:underline;text-underline-offset:0.22em;text-decoration-thickness:1px;}

  /* ---- Rule-separated definition blocks, reused for guidance and legal ---- */
  .stack{margin:0;padding:0;border-top:1px solid rgba(var(--paper-rgb),0.13);max-width:52rem;}
  .stack > div{padding:1.4rem 0;border-bottom:1px solid rgba(var(--paper-rgb),0.13);}
  .stack dt{
    font-family:var(--serif);
    font-size:clamp(1.15rem,1.7vw,1.45rem);
    line-height:1.25;
    margin-bottom:0.4rem;
    color:var(--paper);
  }
  .stack dd{margin:0;color:var(--paper-dim);font-size:0.98rem;max-width:56ch;}

  /* ---- Pathway rows on the homepage and the 404 ---- */
  .pathways{list-style:none;margin:0;padding:0;border-top:1px solid rgba(var(--paper-rgb),0.13);}
  .pathways li{border-bottom:1px solid rgba(var(--paper-rgb),0.13);}
  .pathways a{
    display:grid;
    grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto;
    align-items:baseline;
    gap:0.4rem 1.5rem;
    min-height:76px;
    padding:1.35rem 0;
    text-decoration:none;
    transition:background 200ms ease,padding-left 240ms cubic-bezier(0.16,1,0.3,1);
  }
  .pathways a:hover{background:rgba(var(--rail-rgb),0.08);padding-left:0.9rem;}
  .pathway-name{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.95rem);line-height:1.05;color:var(--paper);}
  .pathway-note{font-size:0.95rem;color:var(--paper-dim);}
  .pathway-go{font-size:0.78rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--rail);white-space:nowrap;align-self:center;}

  /* ---- Contact form ---- */
  .enquiry{max-width:34rem;}
  .field{display:grid;gap:0.4rem;margin-bottom:1.15rem;}
  .field > label{font-size:0.74rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--rail);}
  .field .hint{font-size:0.82rem;color:var(--paper-faint);}
  .field input,
  .field select,
  .field textarea{
    width:100%;
    min-height:52px;
    padding:0.8rem 0.95rem;
    background:rgba(var(--paper-rgb),0.05);
    color:var(--paper);
    border:1px solid rgba(var(--paper-rgb),0.24);
    border-radius:1px;
    font-family:var(--sans);
    font-size:1rem;
    line-height:1.5;
  }
  .field textarea{min-height:150px;resize:vertical;}
  .field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--rail) 50%),linear-gradient(135deg,var(--rail) 50%,transparent 50%);background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6rem;}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--rail);outline:none;}
  .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--rail-bright);outline-offset:2px;}
  .field [data-error]{
    display:none;
    font-size:0.85rem;
    color:var(--rail-bright);
  }
  .field[data-invalid="true"] [data-error]{display:block;}
  .field[data-invalid="true"] input,
  .field[data-invalid="true"] select,
  .field[data-invalid="true"] textarea{border-color:var(--rail-bright);}
  .consent{display:flex;align-items:flex-start;gap:0.75rem;margin-bottom:1.4rem;}
  .consent input{width:22px;height:22px;min-height:0;flex:none;margin-top:0.28rem;accent-color:var(--rail);}
  .consent label{font-size:0.93rem;color:var(--paper-dim);line-height:1.5;}
  .botcheck{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;}
  .form-status{
    margin:0 0 1.2rem;
    padding:0.9rem 1.1rem;
    border-left:2px solid var(--rail-dim);
    background:rgba(var(--paper-rgb),0.05);
    font-size:0.94rem;
    line-height:1.55;
    color:var(--paper-dim);
  }
  .form-status:empty{display:none;}
  .form-status[data-state="error"]{border-left-color:var(--rail-bright);color:var(--paper);}
  .form-status[data-state="success"]{border-left-color:var(--rail);color:var(--paper);}
  .enquiry button[type="submit"]{width:100%;border:0;cursor:pointer;font-family:var(--sans);}
  .enquiry button[type="submit"][disabled]{opacity:0.62;cursor:progress;}
  .alt-contact{margin-top:1.6rem;font-size:0.95rem;color:var(--paper-dim);}
  .alt-contact a{color:var(--rail);}

  /* ---- Genuine 404 ---- */
  .notfound{padding-block:clamp(4rem,10vw,8rem);}
  .notfound .code{
    margin:0 0 1rem;
    font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--rail);
  }

  /* The six-item inline navigation only fits alongside the lockup once the rail
     gutter has been paid for. Below that the labelled Menu control takes over.
     The approved 1440px homepage header is unchanged by this boundary. */
  @media (max-width: 1279px){
    .site-nav a:not(.nav-book){display:none;}
    .js .nav-toggle{display:inline-flex;}
  }

  @media (max-width: 1023px){
    .page-head .wrap{grid-template-columns:minmax(0,1fr);}
    .page-head .figure{
      display:block;
      width:100%;
      max-height:520px;
      aspect-ratio:16/9;
    }
  }

  @media (max-width: 760px){
    .js .site-nav .nav-book{display:none;}
    .pathways a{grid-template-columns:minmax(0,1fr);gap:0.5rem;min-height:96px;}
    .pathways a:hover{padding-left:0;}
    .pathway-go{align-self:start;}
    .page-head{padding-block:0;}
    .page-head .wrap{padding-inline:0;gap:0;}
    .page-head .wrap > div{order:2;padding:2rem var(--gutter) 3rem;}
    .page-head .figure{
      order:1;
      max-height:none;
      aspect-ratio:16/10;
      margin:0;
    }
    .page-head h1{max-width:none;font-size:2.2rem;}
    .stack dd{max-width:none;}
  }

  @media (max-width: 420px){
    .nav-toggle{padding:0 0.7rem;font-size:0.72rem;gap:0.45rem;}
  }

  /* The consent row is both a .field (for the shared invalid state) and a
     .consent (for the checkbox layout), so the shared label and error styling
     are reset back to sentence case and given their own row. */
  .consent{flex-wrap:wrap;}
  .consent > label{text-transform:none;letter-spacing:0;font-size:0.93rem;color:var(--paper-dim);}
  .consent [data-error]{flex:0 0 100%;}
  .consent a{color:var(--rail);}

  /* hCaptcha renders an iframe into this container. It is reserved at the widget's
     documented size so the form does not reflow when the widget arrives, and it
     keeps the invalid-state affordance the other fields use. */
  .captcha-field{min-height:78px;}
  .captcha-field .h-captcha{min-height:78px;}
  .captcha-field[data-invalid="true"] .h-captcha{
    outline:1px solid var(--rail-bright);
    outline-offset:4px;
  }

  /* Below 560px the lockup, an inline Book link and a labelled Menu control cannot
     all sit on one 320-390px row without crowding or overflow. Enhanced pages drop
     the inline link because the conditional fallback and menu remain available;
     without JavaScript it stays visible so booking is never lost. */
  @media (max-width: 559px){
    .js .site-nav a.nav-book{display:none;}
    .site-nav{gap:0;}
  }

  /* hCaptcha renders a fixed 303px-wide iframe. On the narrowest phones that is
     wider than the form column, so the widget is scaled down rather than allowed
     to push the document sideways. It stays fully visible and operable. */
  @media (max-width: 379px){
    .captcha-field .h-captcha{
      transform:scale(0.88);
      transform-origin:left top;
    }
    .captcha-field{min-height:70px;}
  }