/* ==========================================================================
   Chi'Ella — CORRECTIVE LAYER
   Loaded LAST on every page (after site.css, motion.css and index.html's
   inline <style>) so these rules win without rewriting the originals.
   Every block below fixes a defect from the owner's 2026-08-12 audit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BRAND LOCKUP — the old CSS "C" crest is replaced by the real logo, and
      the lockup can no longer wrap out of the header bar (it was clipping
      "Chi'Ella" against the top of the screen on every page).
   -------------------------------------------------------------------------- */
/* logo-mark.png, not logo-icon.png. The icon file carries a large empty margin
   baked in - the mark occupies 872x665 of a 1024x962 canvas and sits low in it,
   with 256px of nothing above and 41px below. Fitted into a square box it drew
   small and dropped below the wordmark, which is what the owner photographed.
   logo-mark.png is the same artwork cropped to its own edges, so the box it is
   given is the size it actually appears. Its aspect is ~1.29:1, not square. */
.brand .crest{
  width:44px;height:34px;flex:0 0 auto;
  border:none;border-radius:0;
  background:url('../images/logo-mark.png') center/contain no-repeat;
  font-size:0;color:transparent;line-height:0;
}
.crestbig,.lm-cover .crestbig,.nf .crestbig{
  border:none!important;border-radius:0!important;
  background:url('../images/logo-mark.png') center/contain no-repeat!important;
  font-size:0!important;color:transparent!important;
}
.brand .txt b{line-height:1.05;white-space:nowrap}
.brand .txt span{white-space:nowrap;display:block;line-height:1.25}

@media(max-width:860px){
  /* let the bar grow instead of clipping its contents */
  header .bar{height:auto!important;min-height:64px;padding:9px 0}
}
@media(max-width:560px){
  .brand{gap:9px}
  .brand .crest{width:36px;height:36px}
  .brand .txt b{font-size:17px}
  .brand .txt span{font-size:8.5px;letter-spacing:.22em}
}
/* NOTE: the tagline used to be hidden here. It is now kept down to 360px and
   sized in section 27 below - the owner wants both lines of the wordmark
   readable. Do not re-add display:none at this width without changing 27 too. */

/* --------------------------------------------------------------------------
   2. HOME HERO (mobile) — index.html had `@media(max-width:860px){.hero2{
      min-height:auto}}`, which collapsed the hero to ~192px. The absolutely
      positioned .hw-frame then squeezed the headline up into the fixed
      header, so the title sat on top of the logo.
   -------------------------------------------------------------------------- */
@media(max-width:860px){
  .hero2{min-height:100vh;min-height:100svh}
  .hw-frame{
    inset:78px 14px 18px;      /* clears the fixed header */
    padding:20px 14px;
    justify-content:center;
  }
  .hw-crest{width:76px;height:59px;margin-bottom:8px}
  .hw-eyebrow{font-size:10px;letter-spacing:.22em}
  .hw-title{font-size:clamp(30px,8.4vw,46px);line-height:1.04;margin-top:10px}
  .hw-frame p{font-size:14.5px;margin:12px 0 18px;max-width:34ch}
  .hw-frame .cta{flex-direction:column;width:100%;max-width:300px;gap:10px}
  .hw-frame .cta .btn{width:100%;text-align:center}
  .hw-worlds{margin-top:16px;font-size:10.5px;gap:8px;flex-wrap:wrap;justify-content:center}
  /* the header already carries a MENU pill on mobile - two was confusing */
  .hero-menu{display:none}
  .scroll-hint{display:none}
}
@media(max-width:400px){
  .hw-frame{inset:74px 10px 14px;padding:16px 10px}
  .hw-crest{width:62px;height:48px}
  .hw-title{font-size:clamp(26px,8.2vw,38px)}
  .hw-frame p{font-size:13.5px;margin:10px 0 14px}
}

/* --------------------------------------------------------------------------
   3. GEM MENU (mobile) — CRITICAL. .navlist lives inside .panel-l, and the
      old rule `#gemMenu .panel-l{display:none}` hid the entire navigation,
      so tapping MENU on a phone showed only the contact column.
   -------------------------------------------------------------------------- */
@media(max-width:860px){
  #gemMenu{grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow-y:auto}
  #gemMenu .panel-l{
    display:flex!important;
    align-items:flex-start;
    min-height:0;
    padding:86px 0 6px;
  }
  /* drop the photo + veil so the links stay legible on a small screen */
  #gemMenu .panel-l img,#gemMenu .panel-l .veil{display:none!important}
  #gemMenu .navlist{padding:0 8vw;width:100%}
  #gemMenu .navlist a{font-size:clamp(26px,7.6vw,40px);padding:5px 0}
  #gemMenu .navlist a small{display:block;margin-left:0;margin-top:2px;font-size:11px}
  #gemMenu .navlist a.media-hot small{display:inline-block;margin-top:4px}
  #gemMenu .panel-r{padding:14px 8vw 40px;justify-content:flex-start}
  #gemMenu .panel-r .logo{font-size:28px;margin-bottom:12px}
  #gemMenu .panel-r p{font-size:14px}
  #gemMenu .gem-social{margin-top:18px}
  #gemMenu .gem-social a{width:40px;height:40px}
  #gemClose{top:14px;right:16px;font-size:34px}
}

/* --------------------------------------------------------------------------
   4. FOUNDER PORTRAIT — the caption sat across her face. The container was
      nearly square on mobile, so `object-position:center top` cropped hard
      into the face and the bottom-anchored caption landed on her mouth.
      Taller frame + a lower focal point + a scrim behind the caption.
   -------------------------------------------------------------------------- */
.story-visual img{object-position:center 14%!important}
.story-visual::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(10,9,12,.78));
  pointer-events:none;
}
.story-visual .glass{
  background:rgba(12,11,14,.42);
  border-color:rgba(217,190,130,.3);
}
/* desktop: the 480px frame cropped a 2:3 portrait so hard that the caption
   still landed on her chin - give the portrait room to be a portrait */
@media(min-width:861px){
  .story-visual{min-height:620px}
}
@media(max-width:860px){
  .story-visual{min-height:0;aspect-ratio:3/4;max-height:78vh}
  .story-visual .glass{left:16px;right:16px;bottom:16px;padding:15px 17px}
  .story-visual .glass b{font-size:20px}
  .story-visual .glass span{font-size:12px}
  .story-visual .ring{display:none}
}

/* --------------------------------------------------------------------------
   5. SUB-PAGE HEROES — were a flat dark gradient with no imagery. Each page
      now sets --phero-img and gets a real photographic hero.
   -------------------------------------------------------------------------- */
.phero{isolation:isolate}
.phero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--phero-img,none);
  background-size:cover;background-position:center;
  opacity:.62;                      /* the owner found .42 too faint - pages read empty */
  transform:scale(1.04);
  animation:pheroDrift 22s ease-in-out infinite alternate;
}
/* a readable scrim so the headline still holds against the photo */
.phero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,16,.72),rgba(14,13,16,.55) 45%,rgba(14,13,16,.88));
  opacity:1;
}
@keyframes pheroDrift{from{transform:scale(1.04)}to{transform:scale(1.13)}}
@media(prefers-reduced-motion:reduce){.phero::before{animation:none}}
.phero > .wrap{position:relative;z-index:2}
@media(max-width:860px){
  .phero{padding:112px 0 52px}
  .phero p{font-size:16.5px}
}

/* --------------------------------------------------------------------------
   6. TESTIMONIAL JOB-CARDS — the ±34% offsets threw the side cards off a
      narrow screen, leaving an apparently empty band.
   -------------------------------------------------------------------------- */
@media(max-width:560px){
  .jobstack{height:auto;min-height:430px;padding-bottom:8px}
  .job-card{width:min(300px,86%)}
}

/* --------------------------------------------------------------------------
   7. FLOATING ENQUIRY PILL — it sat on top of body copy. Smaller on phones,
      clear of the iOS home indicator, and the page keeps room beneath it.
   -------------------------------------------------------------------------- */
@media(max-width:600px){
  #cartBtn{
    right:14px;bottom:calc(14px + env(safe-area-inset-bottom));
    padding:12px 17px;font-size:13px;gap:7px;
  }
  #backTop,.backtop,#toTop{bottom:calc(14px + env(safe-area-inset-bottom))!important}
  /* keep the last of the footer clear of the floating pill */
  footer{padding-bottom:104px}
}

/* --------------------------------------------------------------------------
   8. MENU ROWS (catering) — name / price / Add crammed into one line on a
      phone; long dish names wrapped mid-word. Stack them.
   -------------------------------------------------------------------------- */
@media(max-width:560px){
  .mitem{flex-wrap:wrap;align-items:flex-start;gap:8px}
  .mitem .info{flex:1 1 100%;min-width:0}
  .mitem .price{font-size:17px}
  .mitem .add{margin-left:auto}
}

/* --------------------------------------------------------------------------
   9. GENERAL MOBILE RHYTHM — the 4-up "Cook / Dress / Seat / Serve" row was
      wrapping 3 + 1 and leaving a large dead gap.
   -------------------------------------------------------------------------- */
@media(max-width:760px){
  .stat-grid{grid-template-columns:1fr 1fr!important;gap:20px}
}
@media(max-width:560px){
  .pillars,.pillar-row{grid-template-columns:1fr 1fr!important}
}

/* --------------------------------------------------------------------------
   10. FOOTER — the social "icons" were text glyphs (◎ ♪ ✆) which rendered as
       near-invisible boxes. They are real SVGs now; these rules size them and
       give the footer a premium, deliberate feel.
   -------------------------------------------------------------------------- */
.f-social{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.f-social a{
  width:42px;height:42px;flex:0 0 auto;
  display:grid;place-items:center;
  border:1px solid rgba(217,190,130,.42);border-radius:50%;
  color:var(--gold-2);background:rgba(217,190,130,.05);
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.f-social a svg{width:19px;height:19px;display:block}
.f-social a:hover,.f-social a:focus-visible{
  background:var(--gold);color:#14131a;border-color:var(--gold);transform:translateY(-3px);
}
footer .f-brand p{max-width:46ch}
footer h5{letter-spacing:.18em}
/* the footer lockup was clipping exactly like the header one */
footer .brand{align-items:center}
@media(max-width:860px){
  .f-social{justify-content:flex-start}
  footer .f-grid{gap:30px}
}

/* --------------------------------------------------------------------------
   11. MEDIA HERO — was pure gradient with no photography behind it.
   -------------------------------------------------------------------------- */
.media-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url('../images/media-launch.jpg') center/cover no-repeat;
  opacity:.3;
}
.media-hero .wrap{position:relative;z-index:3}
@media(max-width:860px){
  .media-hero{min-height:auto;padding:120px 0 64px}
}

/* --------------------------------------------------------------------------
   12. HORIZONTAL SECTION on touch — native swipe carousel (motion.js adds
       .hz-static on phones instead of pinning, which felt broken).
   -------------------------------------------------------------------------- */
.hz.hz-static{overflow:visible}
.hz.hz-static .hz-track{
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-padding-left:6vw;
  min-height:0;padding-bottom:14px;
  scrollbar-width:none;
}
.hz.hz-static .hz-track::-webkit-scrollbar{display:none}
.hz.hz-static .hz-panel{scroll-snap-align:center;flex:0 0 84vw;max-width:420px;height:auto;min-height:420px}
/* a quiet affordance so people know it moves sideways */
.hz.hz-static .hz-track::after{content:"";flex:0 0 6vw}

/* --------------------------------------------------------------------------
   13. LEAD-MAGNET COVER — the card was mostly empty space under the title.
   -------------------------------------------------------------------------- */
.lm-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 26px}
.lm-cover .crestbig{width:64px;height:64px;margin:0 auto 16px}
@media(max-width:860px){
  .lm-cover{min-height:0;padding:30px 22px}
}

/* --------------------------------------------------------------------------
   14. TYPOGRAPHY on small screens — long em-dashed sentences were breaking
       badly and leaving orphan words ("...left too / late").
   -------------------------------------------------------------------------- */
@media(max-width:600px){
  h1,h2,.h2,.hw-title,.phero h1{text-wrap:balance;overflow-wrap:break-word}
  p,li,.lead{overflow-wrap:break-word;hyphens:none}
  .lead{font-size:16.5px}
}

/* ==========================================================================
   15. CSLIDER — one reusable, dependency-free slider used by packages,
       testimonials and any future carousel. Native scroll-snap means real
       swipe on touch and trackpad on desktop; the arrows and dots drive the
       same scroll, so mobile and desktop behave identically.
   ========================================================================== */
.cslider{position:relative;margin-top:38px}
.cs-track{
  display:flex;gap:22px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding:6px 2px 20px;
}
.cs-track::-webkit-scrollbar{display:none}
.cs-slide{flex:0 0 auto;scroll-snap-align:center;width:min(380px,82vw)}

.cs-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:6px}
.cs-btn{
  width:52px;height:52px;flex:0 0 auto;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:26px;line-height:1;
  background:transparent;color:var(--gold-2);
  border:1px solid rgba(217,190,130,.5);
  transition:background .25s,color .25s,transform .25s,border-color .25s,opacity .25s;
}
.cs-btn:hover:not(:disabled),.cs-btn:focus-visible{background:var(--gold);color:#14131a;border-color:var(--gold);transform:translateY(-2px)}
.cs-btn:disabled{opacity:.3;cursor:default}
.cs-dots{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:60%}
.cs-dots button{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(217,190,130,.32);border:none;transition:.25s;
}
.cs-dots button.on{background:var(--gold-2);transform:scale(1.5)}
/* on a light section the controls need the darker ink */
.cs-light .cs-btn{color:#8a6d2f;border-color:rgba(184,144,74,.55)}
.cs-light .cs-dots button{background:rgba(184,144,74,.3)}
.cs-light .cs-dots button.on{background:var(--gold)}

@media(max-width:600px){
  .cs-track{gap:14px;padding:6px 2px 16px}
  .cs-slide{width:86vw}
  .cs-btn{width:46px;height:46px;font-size:23px}
  .cs-nav{gap:14px}
}

/* ---- package slides ---- */
.pkg-card{
  position:relative;display:flex;flex-direction:column;height:100%;
  border-radius:20px;overflow:hidden;text-align:left;
  background:linear-gradient(180deg,#1d1b22,#141317);
  border:1px solid rgba(217,190,130,.24);
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.pkg-card:hover{border-color:rgba(217,190,130,.55);transform:translateY(-4px);box-shadow:0 26px 60px rgba(0,0,0,.4)}
.pkg-card .pk-img{position:relative;height:172px;overflow:hidden;flex:0 0 auto}
.pkg-card .pk-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pkg-card:hover .pk-img img{transform:scale(1.06)}
.pkg-card .pk-img:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(20,19,23,.95))}
.pkg-card .pk-flag{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--gold);color:#14131a;padding:5px 11px;border-radius:30px;font-weight:600;
}
.pkg-card .pk-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.pkg-card .pk-tier{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
.pkg-card h3{font-family:var(--serif);font-size:27px;color:#fff;margin:6px 0 2px}
.pkg-card .pk-price{font-family:var(--serif);font-size:22px;color:var(--gold-2);margin-bottom:14px}
.pkg-card ul{list-style:none;margin:0 0 18px;padding:0;flex:1}
.pkg-card li{position:relative;padding-left:20px;color:#c9c6c1;font-size:14px;line-height:1.5;margin-bottom:8px}
.pkg-card li:before{content:"✦";position:absolute;left:0;top:0;color:var(--gold-2);font-size:11px}
.pkg-card .btn{width:100%;text-align:center}

/* ---- testimonial slides ---- */
.tst-card{
  height:100%;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:30px 28px;box-shadow:0 18px 46px rgba(11,10,14,.10);
  transition:transform .3s,box-shadow .3s;
}
.tst-card:hover{transform:translateY(-4px);box-shadow:0 28px 62px rgba(11,10,14,.16)}
.tst-card .tq{font-family:var(--serif);font-size:60px;line-height:.1;height:26px;color:var(--gold-soft,#e3d3ae)}
.tst-card p{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.6;color:#33312e;flex:1;margin:14px 0 0}
.tst-who{margin-top:20px;display:flex;gap:12px;align-items:center}
.tst-av,.tst-who > .tst-av{
  width:46px;height:46px;flex:0 0 auto;border-radius:50%;
  display:grid!important;place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#fff!important;
  font-family:var(--serif);font-weight:700;font-size:19px!important;
  line-height:1;text-align:center;overflow:hidden;
}
/* NOTE: scope these to the text block. A bare `.tst-who span` also matched the
   avatar span and reset it to display:block / 12px / grey, so the initial
   rendered as small grey text in the corner instead of centred white. */
.tst-who > div b{display:block;font-size:14.5px;color:var(--navy)}
.tst-who > div span{display:block;font-size:12px;color:var(--muted)}
.tst-stars{color:var(--gold);font-size:13px;letter-spacing:2px;margin-top:12px}

/* ==========================================================================
   16. CONSULTATION CTA — was a plain centred paragraph that read as filler
       and clipped on mobile. Now a deliberate two-part card with the offer,
       the three steps and a live "20 minutes" badge.
   ========================================================================== */
.consult-card{
  position:relative;overflow:hidden;border-radius:26px;
  display:grid;grid-template-columns:1.25fr .75fr;gap:0;
  background:linear-gradient(155deg,#1b1921,#141317 60%,#1d1a22);
  border:1px solid rgba(217,190,130,.28);
  box-shadow:0 34px 80px rgba(11,10,14,.28);
}
.consult-card .cc-glow{
  position:absolute;top:-40%;right:-20%;width:70%;height:180%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(184,144,74,.32),transparent 70%);
  animation:ccFloat 14s ease-in-out infinite alternate;
}
@keyframes ccFloat{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-6%,6%,0) scale(1.15)}}
.consult-card .cc-left{position:relative;z-index:2;padding:52px 48px}
.consult-card .eyebrow{color:var(--gold-2)}
.consult-card .h2{color:#fff;margin-top:10px}
.consult-card .cc-left > p{color:#c9c6c1;font-weight:300;font-size:17px;margin-top:14px;max-width:52ch}
.cc-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.cc-steps li{display:flex;gap:14px;align-items:flex-start}
.cc-steps li span{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(217,190,130,.5);color:var(--gold-2);
  font-family:var(--serif);font-size:15px;
}
.cc-steps li div{color:#a9a5a0;font-size:13.5px;line-height:1.5}
.cc-steps li b{display:block;color:#fff;font-size:15px;font-weight:600;margin-bottom:1px}
.cc-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.cc-fine{color:#8b8781;font-size:12.5px;margin-top:14px}

.consult-card .cc-right{
  position:relative;z-index:2;display:grid;place-items:center;
  border-left:1px solid rgba(217,190,130,.16);
  padding:40px 30px;text-align:center;
}
.cc-badge{
  position:relative;z-index:3;width:150px;height:150px;border-radius:50%;
  display:grid;place-items:center;align-content:center;
  background:radial-gradient(circle at 34% 30%,rgba(217,190,130,.24),rgba(20,19,23,.9));
  border:1px solid rgba(217,190,130,.55);
}
.cc-min{font-family:var(--serif);font-size:52px;line-height:1;color:var(--gold-2)}
.cc-lbl{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#c9c6c1;margin-top:4px}
.cc-ring{position:absolute;border:1px solid rgba(217,190,130,.22);border-radius:50%;z-index:1}
.cc-r1{width:200px;height:200px;animation:ccPulse 3.6s ease-out infinite}
.cc-r2{width:200px;height:200px;animation:ccPulse 3.6s ease-out infinite 1.2s}
.cc-r3{width:200px;height:200px;animation:ccPulse 3.6s ease-out infinite 2.4s}
@keyframes ccPulse{from{transform:scale(.72);opacity:.9}to{transform:scale(1.35);opacity:0}}
.cc-quote{
  position:absolute;bottom:34px;left:26px;right:26px;z-index:3;
  font-family:var(--serif);font-style:italic;color:#b9b5b0;font-size:14px;line-height:1.5;
}
@media(max-width:960px){
  .consult-card{grid-template-columns:1fr}
  .consult-card .cc-left{padding:38px 26px 30px}
  .consult-card .cc-right{
    border-left:none;border-top:1px solid rgba(217,190,130,.16);
    padding:34px 22px 92px;
  }
}
@media(max-width:600px){
  .consult-card{border-radius:20px}
  .consult-card .cc-left{padding:30px 20px 26px}
  .consult-card .cc-left > p{font-size:15.5px}
  .cc-cta{flex-direction:column}
  .cc-cta .btn{width:100%;text-align:center}
  .cc-badge{width:126px;height:126px}
  .cc-min{font-size:44px}
  .cc-r1,.cc-r2,.cc-r3{width:170px;height:170px}
}
@media(prefers-reduced-motion:reduce){
  .cc-glow,.cc-r1,.cc-r2,.cc-r3{animation:none}
  .cc-ring{opacity:.35}
}

/* --------------------------------------------------------------------------
   17. LEAD-MAGNET COVER — was a title floating in a large empty card. It now
       shows what is actually inside the download.
   -------------------------------------------------------------------------- */
.lm-cover{aspect-ratio:auto!important;place-items:stretch!important;padding:0!important}
.lm-cover .lmc-inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:34px 28px 30px;width:100%;
}
.lm-cover h4{margin-top:2px}
.lm-cover .tagpill{margin-bottom:20px}
.lmc-toc{
  list-style:none;margin:6px 0 0;padding:20px 0 0;width:100%;
  border-top:1px solid rgba(217,190,130,.22);text-align:left;
}
.lmc-toc li{
  display:flex;gap:12px;align-items:baseline;
  color:#c9c6c1;font-size:13.5px;line-height:1.45;padding:7px 0;
  border-bottom:1px dashed rgba(217,190,130,.13);
}
.lmc-toc li:last-child{border-bottom:none}
.lmc-toc li span{
  flex:0 0 auto;font-family:var(--serif);font-size:12px;color:var(--gold-2);
  letter-spacing:.1em;min-width:22px;
}
.lmc-meta{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  margin-top:18px;color:var(--gold-2);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;
}
@media(max-width:600px){
  .lm-cover .lmc-inner{padding:28px 20px 26px}
  .lmc-toc li{font-size:13px}
}

/* --------------------------------------------------------------------------
   18. CURSOR-FOLLOW IMAGE — parked at the origin before the first mouse move,
       so it sat half off the left edge. Invisible and inert until active.
   -------------------------------------------------------------------------- */
#dishFollow:not(.on){visibility:hidden}

/* ==========================================================================
   19. "THE HOUSE IN MOTION" — the owner's own 8-second clips, shown as video
       cards in the standard slider. Each clip plays only while it is on
       screen (see motion.js), so nothing decodes for a visitor who never
       scrolls that far.
   ========================================================================== */
.motion-band{background:linear-gradient(180deg,#141317,#1a1820);color:#fff}
.motion-band h2,.motion-band .h2{color:#fff}
.motion-band .lead{color:#c9c6c1}
.vcard{
  position:relative;overflow:hidden;border-radius:20px;
  aspect-ratio:16/10;background:#1d1b22;
  border:1px solid rgba(217,190,130,.24);
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.vcard:hover{border-color:rgba(217,190,130,.55);transform:translateY(-4px);box-shadow:0 26px 60px rgba(0,0,0,.42)}
.vcard-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vcard:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,16,.05) 35%,rgba(14,13,16,.9));
}
.vcard-in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 22px 20px;text-align:left}
.vcard-in h3{font-family:var(--serif);font-size:23px;color:#fff;margin:0 0 5px}
.vcard-in p{color:#c9c6c1;font-size:13.5px;line-height:1.5;margin:0;max-width:36ch}
@media(max-width:600px){
  .vcard{aspect-ratio:4/3}
  .vcard-in{padding:18px 16px 16px}
  .vcard-in h3{font-size:20px}
  .vcard-in p{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .vcard-v{display:none}
  .vcard{background-size:cover;background-position:center}
}

/* --------------------------------------------------------------------------
   20. LEGAL PAGES — readable measure, clear hierarchy.
   -------------------------------------------------------------------------- */
.wrap.legal{max-width:760px}
.legal h2{font-family:var(--serif);font-size:26px;color:var(--navy);margin:34px 0 10px}
.legal h2:first-of-type{margin-top:8px}
.legal p,.legal li{color:#4a4740;font-size:16.5px;line-height:1.7}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 18px;padding-left:20px}
.legal li{margin-bottom:9px}
.legal a{color:#8a6d2f;text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--gold)}
.legal .legal-updated{
  color:var(--muted);font-size:13px;letter-spacing:.06em;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:8px;
}
.legal code{background:rgba(184,144,74,.12);padding:2px 6px;border-radius:4px;font-size:14px}
@media(max-width:600px){
  .legal h2{font-size:22px;margin-top:28px}
  .legal p,.legal li{font-size:15.5px}
}

/* ==========================================================================
   21. CARD E ON MOBILE — was a stack of 150px-tall tiles with the caption
       printed straight over the photo, so the text sat on people's faces.
       Below 821px the row becomes a swipeable, snapping carousel and the
       words move BENEATH the image, so every face stays visible.
       Desktop keeps the bulge-row behaviour untouched.
   ========================================================================== */
@media(max-width:820px){
  .cardE-row{
    flex-direction:row!important;
    height:auto!important;
    gap:14px!important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    scrollbar-width:none;
    padding:4px 0 14px;
    margin-top:26px;
  }
  .cardE-row::-webkit-scrollbar{display:none}

  .cardE{
    flex:0 0 78vw!important;
    max-width:340px;
    height:auto!important;
    scroll-snap-align:center;
    display:flex!important;
    flex-direction:column;
    align-items:stretch!important;
    background:linear-gradient(180deg,#1d1b22,#141317);
    border:1px solid rgba(217,190,130,.22);
  }
  /* photo on top, in flow - nothing overlaps it */
  .cardE .cardE-img{
    position:relative!important;inset:auto!important;
    width:100%;height:210px;flex:0 0 auto;
    opacity:1!important;transform:none!important;
  }
  /* words beneath, on the card itself */
  .cardE .cardE-in{
    position:relative;z-index:2;padding:16px 18px 20px;
    opacity:1!important;transform:none!important;
  }
  .cardE .cardE-in h3{font-size:21px;margin-bottom:5px}
  .cardE .cardE-in p{font-size:13.5px;line-height:1.5;color:#c9c6c1;max-width:none}
  .cardE .cardE-in .cardE-go{margin-top:11px;font-size:11px}
  .cardE .cardE-name{display:none!important}
  .cardE-row:hover .cardE{flex:0 0 78vw!important}
  /* trailing spacer so the last card can centre */
  .cardE-row::after{content:"";flex:0 0 6vw}
}
@media(max-width:400px){
  .cardE{flex:0 0 84vw!important}
  .cardE .cardE-img{height:180px}
}

/* nav injected by motion.js for these rows on mobile */
.cardE-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:4px}
@media(min-width:821px){.cardE-nav{display:none}}

/* --------------------------------------------------------------------------
   22. ENQUIRY ROUTES — the owner takes no payment online: every enquiry goes
       to WhatsApp or to his inbox, so both routes are offered side by side.
   -------------------------------------------------------------------------- */
.form-note{
  margin-top:12px;color:var(--muted);font-size:12.5px;line-height:1.5;text-align:center;
}
#panel .btn.ghost{border-color:rgba(184,144,74,.6);color:#8a6d2f}
#panel .btn.ghost:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.cn-card .btn.ghost{border-color:rgba(184,144,74,.6);color:#8a6d2f}
.cn-card .btn.ghost:hover{background:var(--gold);color:#fff;border-color:var(--gold)}

/* ==========================================================================
   23. CASUAL DOWNLOAD DETERRENT — stops drag-to-desktop and long-press "save
       image" on the owner's photography and video. This raises the effort
       required; it cannot make media truly un-copyable (see motion.js note).
   ========================================================================== */
img,video{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
video::-internal-media-controls-download-button{display:none}
video{-webkit-appearance:none}

/* ==========================================================================
   24. SIGNATURE COURSES on mobile — the pin is gone (see motion.js). The
       section now sits normally in the flow and the track is scrubbed
       sideways as it crosses the viewport, so it can no longer overlap the
       services above it or leave a blank spacer behind it.
   ========================================================================== */
@media(max-width:860px){
  .hz{overflow:hidden;position:relative;z-index:1;background:var(--navy-3)}
  .hz .hz-track{min-height:0;padding:0 6vw 8px;align-items:stretch}
  .hz-panel{flex-basis:78vw;max-width:340px;height:auto;min-height:0;aspect-ratio:3/4}
  .hz-panel .in{padding:20px}
  .hz-panel h3{font-size:23px}
  .hz-panel p{font-size:13.5px}
  /* breathing room so the band reads as its own section, not a collision */
  .hz{padding-bottom:52px}
}

/* ==========================================================================
   25. SERVICE CARD CTA — was a flat gold sentence ("Priced to your event —
       ask us") that read as body copy, not an action. Now a real button that
       opens WhatsApp pre-filled with that specific service.
   ========================================================================== */
.svc-cta{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:18px;padding:11px 20px;
  background:var(--gold);color:#14131a;
  border:1px solid var(--gold);border-radius:40px;
  font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.06em;text-decoration:none;white-space:nowrap;
  box-shadow:0 8px 22px rgba(184,144,74,.28);
  transition:background .25s,color .25s,transform .25s,box-shadow .25s;
}
.svc-cta span{transition:transform .25s}
.svc-cta:hover,.svc-cta:focus-visible{
  background:#14131a;color:var(--gold-2);border-color:var(--gold);
  transform:translateY(-2px);box-shadow:0 14px 30px rgba(11,10,14,.3);
}
.svc-cta:hover span{transform:translateX(4px)}
.svc .body{display:flex;flex-direction:column;align-items:flex-start}
@media(max-width:600px){
  .svc-cta{width:100%;justify-content:center;padding:13px 18px;font-size:13.5px}
}

/* The emoji badge was overlapping the photo edge awkwardly - seat it cleanly.
   ⚠️ top/left MUST be reset here. The inline rule in index.html sets
   position:absolute with top:150px;left:24px. Changing only `position` left
   those offsets in force, and on a relatively-positioned box they shift it 150px
   down and 24px across *without reserving space* - so the badge floated over the
   card's own paragraph, and further down the page it drifted into the section
   below entirely. Whenever you re-position something here, clear its offsets. */
.svc .ic{
  position:relative;top:auto;left:auto;right:auto;bottom:auto;
  z-index:2;margin:-26px 0 10px;
  width:52px;height:52px;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  font-size:24px;line-height:1;box-shadow:0 8px 20px rgba(11,10,14,.12);
}

/* --------------------------------------------------------------------------
   26. QUOTE BUILDER — a phone number is now asked for explicitly, and the
       brief can be emailed as well as sent on WhatsApp.
   -------------------------------------------------------------------------- */
.qb-email{
  width:100%;justify-content:center;margin-top:12px;
  border-color:rgba(184,144,74,.6);color:var(--gold-2);
}
.qb-email:hover{background:var(--gold);color:#14131a;border-color:var(--gold)}
.qb-note{margin-top:14px;color:#a9a5a0;font-size:12.5px;line-height:1.55;text-align:center}
@media(max-width:600px){
  .qb-nav{flex-direction:column;gap:10px}
  .qb-nav .btn{width:100%;justify-content:center}
}

/* --------------------------------------------------------------------------
   27. BRAND LOCKUP + HERO CREST sizing — the owner found the header logo too
       small and off to the left, and the hero crest too small to carry the
       "One house" panel.
   -------------------------------------------------------------------------- */
/* LOCKUP 2 - "Boxed", chosen by the owner from logo-options.html on 2026-08-14.
   Mark and name held together inside a gold frame, so the lockup reads as one
   object over the hero video instead of two loose pieces. The translucent
   backing is what keeps it legible over moving footage. */
.brand{
  gap:13px;align-items:center;
  border:1px solid rgba(201,162,39,.55);border-radius:12px;
  padding:10px 18px 10px 14px;
  background:rgba(12,11,14,.42);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  transition:border-color .3s,background .3s;
}
.brand:hover{border-color:rgba(201,162,39,.85);background:rgba(12,11,14,.55)}
.brand .crest{width:50px;height:39px}
.brand .txt b{font-size:26px;letter-spacing:.3px}
.brand .txt span{font-size:9.5px;letter-spacing:.32em;margin-top:2px}
header .bar{min-height:92px}
header.solid .bar{min-height:82px}
/* the header is already a dark bar once it solidifies - drop the blur there so
   the frame reads as a frame, not a smudge */
header.solid .brand{background:rgba(12,11,14,.28)}

@media(max-width:860px){
  header .bar{min-height:78px}
  .brand{gap:11px;padding:8px 14px 8px 11px;border-radius:11px}
  .brand .crest{width:42px;height:33px}
  .brand .txt b{font-size:22px}
  .brand .txt span{font-size:8.5px;letter-spacing:.26em}
}
@media(max-width:430px){
  .brand{gap:10px!important;padding:7px 12px 7px 10px!important}
  .brand .crest{width:38px!important;height:30px!important}
  .brand .txt b{font-size:20px!important}
  /* display is forced because an earlier block in this file used to hide it */
  .brand .txt span{display:block!important;font-size:7.5px!important;letter-spacing:.22em!important}
}
@media(max-width:359px){
  .brand{padding:6px 10px 6px 8px!important;gap:8px!important}
  .brand .crest{width:33px!important;height:26px!important}
  .brand .txt b{font-size:17.5px!important}
  .brand .txt span{font-size:7px!important;letter-spacing:.16em!important}
}

/* the footer sits on flat dark, so the frame is enough on its own - no blur,
   and a little more room since nothing is competing with it there */
footer .brand{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-color:rgba(201,162,39,.38);padding:12px 20px 12px 15px;
  /* .brand is a flex child of the footer column, so it stretched the full
     width of the column - the frame has to hug the lockup, not the column */
  width:-moz-fit-content;width:fit-content;align-self:flex-start;max-width:100%}
footer .brand:hover{background:rgba(201,162,39,.06)}

/* hero crest: give it real presence under the frame */
.hw-crest{width:150px;height:116px;margin-bottom:18px}
@media(max-width:860px){.hw-crest{width:112px;height:87px;margin-bottom:12px}}
@media(max-width:400px){.hw-crest{width:94px;height:73px;margin-bottom:10px}}

/* --------------------------------------------------------------------------
   28. HOME HERO — the film sits back behind the headline. This is done with
       the OVERLAY ONLY.

   🔴 NEVER apply a CSS filter to the hero video. Owner's instruction, and he
      is right twice over:
        1. He wants the footage at its original sharp quality. It is his own
           film - do not blur it, desaturate it, or re-encode it.
        2. `filter:blur()` on a *playing* video makes the browser re-run that
           filter on every single frame. That is what made it hang. A static
           image can carry a filter; 20fps of video cannot.
      The same goes for re-encoding the file to fake it - that was tried and
      reverted; hero-bg.mp4 must stay the original 1280x720 / 488kbps master.

       Darkening the scrim is free, because the gradient is a static layer the
       compositor paints once. To push the film further back, raise the MIDDLE
       stop - that is the band the headline sits in. Nothing else.
   -------------------------------------------------------------------------- */
.hero2:after{
  background:linear-gradient(180deg,
    rgba(14,13,16,.72),
    rgba(14,13,16,.62) 45%,
    rgba(14,13,16,.90))!important;
}
/* Nothing but the guard. A <video> is already composited on its own layer by
   every current browser, so extra GPU hints here would be cargo cult - the
   filter was the whole problem. */
.hero2-video{filter:none!important}

/* ==========================================================================
   29. THE PAGE MUST NEVER BE BLANK — content is visible unless JS says otherwise

   `.reveal` starts at opacity:0 and is switched on by script. That means ANY
   failure of the JS - a blocked file, a slow network, a throttled observer -
   left the whole page invisible. The owner hit this repeatedly: "the site is
   not loading".

   Inverted now. The hidden state only applies once an inline script in <head>
   has added `.anim` to <html>, and that same script REMOVES it again if nothing
   has actually been revealed after 4 seconds. So:
     - no JS at all      -> everything visible immediately
     - JS alive          -> normal reveal animation
     - JS alive but stuck -> everything visible after 4s
   There is no path left where content stays hidden.
   ========================================================================== */
html:not(.anim) .reveal{opacity:1!important;transform:none!important}

/* ==========================================================================
   30. FOOTER BASE LINE — it was one long span glued together with
       "&nbsp;&middot;&nbsp;". On a narrow column that wrapped mid-separator
       and stranded a lone dot on its own line, which the owner photographed.

       The separators are elements now, so they can be hidden at the wrap
       instead of dangling, and the three parts stack cleanly on a phone.
   ========================================================================== */
.f-bottom{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px 26px;
  border-top:1px solid rgba(255,255,255,.1);padding-top:22px;
  font-size:13px;line-height:1.6;
}
.fb-place{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:inherit}
.fb-place i{font-style:normal;opacity:.42}
.fb-legal{display:inline-flex;align-items:center;gap:22px;flex-wrap:wrap}
.fb-legal a{position:relative;white-space:nowrap}
/* the divider is drawn, not typed - it cannot end up alone on a line */
.fb-legal a + a::before{
  content:"";position:absolute;left:-11px;top:50%;transform:translateY(-50%);
  width:1px;height:11px;background:currentColor;opacity:.3;
}
@media(max-width:760px){
  .f-bottom{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .f-bottom > span:first-child{order:3;opacity:.75}
  .fb-place{order:1}
  .fb-legal{order:2;gap:20px}
}

/* ==========================================================================
   31. THE "GET A QUOTE" BUTTON — the owner's note: "it looks small, it doesn't
       make so much sense... make sure they are actually big".

       It is the single action the whole site exists to produce, and it was
       rendering at .btn.sm — 10px/13px, the same weight as a nav link. It now
       reads as the primary action on every page, at every width, and on a
       phone it becomes a full-width bar rather than a thumbnail-sized pill.
   ========================================================================== */
header nav a.btn,
header nav a.btn.sm{
  padding:15px 30px!important;
  font-size:15px!important;
  font-weight:600!important;
  letter-spacing:.02em;
  border-radius:44px;
  box-shadow:0 10px 26px rgba(184,144,74,.30);
}
header nav a.btn:hover{box-shadow:0 14px 32px rgba(184,144,74,.42);transform:translateY(-1px)}

/* the same for the quote button wherever it appears in the fullscreen menu */
#gemMenu .navlist a.btn{padding:16px 32px!important;font-size:16px!important}

/* --- back-to-home / back-to-site buttons: real targets, not text links ---- */
.nf .btn,.nf .btn.ghost{padding:16px 32px!important;font-size:15.5px!important;font-weight:600}

@media(max-width:860px){
  /* on a phone the header CTA is hidden behind the menu, so the one INSIDE
     the menu has to carry it - make it unmissable */
  #gemMenu .navlist a.btn{
    display:block;width:100%;text-align:center;
    padding:18px 24px!important;font-size:17px!important;margin-top:18px;
  }
  /* every full-width action on a phone gets a real thumb-sized target */
  .cta-band .btn,.consult-card .btn,.qb .btn,.lm-form .btn,
  .nf .btn,.nf .btn.ghost{
    width:100%;justify-content:center;
    padding:17px 24px!important;font-size:16px!important;
  }
  .nf .cta{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px;margin-inline:auto}
}

/* --------------------------------------------------------------------------
   31b. …and the reason enlarging it changed nothing: `header nav` is
        display:none at EVERY width (the fullscreen menu replaced it), so the
        Get a Quote button inside it was invisible on every page. Sizing it up
        did not help because nobody could see it.

        The nav stays hidden; only the button comes back, sitting beside the
        MENU pill on desktop. On a phone the bar is already brand + MENU with
        about 60px to spare, so it stays out of the way there and the
        full-width button inside the menu carries it instead.
   -------------------------------------------------------------------------- */
@media(min-width:861px){
  header nav{
    display:flex!important;position:static!important;inset:auto!important;
    transform:none!important;width:auto!important;max-width:none!important;
    background:none!important;box-shadow:none!important;padding:0!important;
    flex-direction:row!important;align-items:center;gap:0!important;
  }
  /* only the action - not the old link list */
  header nav > a:not(.btn){display:none!important}
  header nav > a.btn{display:inline-flex!important;margin-right:18px}
}

/* the section-level quote buttons were 14px - the same size as body text */
.cta-band .btn,.consult-card .btn,#quote .btn,.pk-cta .btn,.qb .btn{
  font-size:16px!important;padding:16px 32px!important;font-weight:600!important;
}
.cta-band .btn{box-shadow:0 12px 30px rgba(184,144,74,.28)}

/* ==========================================================================
   32. MOBILE PASS — 2026-08-15. Every item here came off the owner's own
       phone screenshots in ALL ERRORS/. Read the reason before changing any
       of them; each one was invisible or unreachable on a real handset.
   ========================================================================== */

/* --------------------------------------------------------------------------
   32a. HERO CTAs — `.hw-frame .cta .btn` was given `width:100%;text-align:
        center`, but `.btn` is `display:inline-flex`, and text-align does
        NOTHING to a flex container's items. The labels sat hard left inside
        full-width pills. `justify-content` is the property that centres a
        flex child; text-align is not.
   -------------------------------------------------------------------------- */
.hw-frame .cta .btn,
.hero2 .cta .btn{
  justify-content:center!important;
  text-align:center;
  font-weight:700!important;
  letter-spacing:.02em;
}
@media(max-width:860px){
  .hw-frame .cta{max-width:330px!important;margin-inline:auto}
  .hw-frame .cta .btn{
    font-size:16px!important;padding:17px 24px!important;min-height:56px;
  }
  /* the outlined one was thin white-on-video and read as a ghost */
  .hw-frame .cta .btn.ghost{
    border-width:2px!important;border-color:rgba(255,255,255,.9)!important;
    background:rgba(14,13,16,.45)!important;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }
}

/* --------------------------------------------------------------------------
   32b. CAROUSEL ARROWS — a 1px gold outline on a cream background is close to
        invisible on a phone in daylight, which is exactly what the owner
        photographed. Filled, dark, and 54px so it is a real touch target
        (48px is the accessibility floor).
   -------------------------------------------------------------------------- */
.cs-btn,
.cs-light .cs-btn{
  background:var(--navy)!important;
  color:#fff!important;
  border:2px solid var(--navy)!important;
  font-size:0!important;                 /* the built-in glyphs are hairline */
  box-shadow:0 10px 24px rgba(20,19,23,.28)!important;
  width:54px;height:54px;
}
/* draw the arrowheads instead - a rotated border is always thick enough */
.cs-btn::before{
  content:"";width:11px;height:11px;
  border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:rotate(45deg);margin-left:4px;
}
.cs-btn.cs-next::before{transform:rotate(-135deg);margin-left:-4px}
.cs-btn:hover:not(:disabled),.cs-btn:focus-visible{
  background:var(--gold)!important;border-color:var(--gold)!important;color:#14131a!important;
}
.cs-btn:disabled{opacity:.28!important}
/* …and the inverse on the one dark section that carries a carousel
   (media.html .media-dark). Navy-on-near-black would be the same mistake in
   the other direction, so this flips to gold there. Any future dark section
   with a carousel needs to be added here. */
.media-dark .cs-btn,.dark-band .cs-btn,section.dark .cs-btn{
  background:var(--gold)!important;color:#14131a!important;border-color:var(--gold)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.45)!important;
}
.media-dark .cs-btn:hover:not(:disabled),.dark-band .cs-btn:hover:not(:disabled){
  background:#fff!important;border-color:#fff!important;
}
.media-dark .cs-dots button{background:rgba(255,255,255,.3)!important}
.media-dark .cs-dots button.on{background:var(--gold)!important}
/* dots were 9px of 32%-opacity gold - bigger and solid */
.cs-dots button{width:11px;height:11px;background:rgba(20,19,23,.28)!important}
.cs-dots button.on{background:var(--gold)!important;transform:scale(1.45)}

/* --------------------------------------------------------------------------
   32c. BACK-TO-TOP — site.js writes it with an inline style attribute, so
        nothing but !important can reach it. It was a thin gold arrow on near
        black; on the cream pages it disappeared entirely.
   -------------------------------------------------------------------------- */
#toTop{
  width:54px!important;height:54px!important;
  background:var(--gold)!important;color:#14131a!important;
  border:2px solid #14131a!important;
  font-size:24px!important;font-weight:700!important;
  box-shadow:0 12px 30px rgba(0,0,0,.4)!important;
}

/* --------------------------------------------------------------------------
   32d. FULLSCREEN MENU ON A PHONE — this was the worst of them. At <=860px
        the overlay becomes a single-column grid of [navlist][contact panel],
        but it is `position:fixed;inset:0` with NO scrolling, so the two grid
        rows were taller than the screen and the contact panel simply sat on
        top of the links. Four of the eight menu items were unreachable.

        Fix: the overlay scrolls, the rows are normal block flow, and the type
        is sized so the whole menu fits a 375px screen. Never give a fixed
        full-screen panel more content than it can scroll.
   -------------------------------------------------------------------------- */
@media(max-width:860px){
  #gemMenu{
    display:block!important;
    overflow-y:auto!important;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:calc(28px + env(safe-area-inset-bottom));
  }
  /* block 3 gave .panel-l an 86px top pad to clear the close button; with the
     overlay in normal block flow that pad now belongs to .navlist alone, or
     the two stack and push the first link off the screen */
  #gemMenu .panel-l{display:block!important;padding:0!important;min-height:0}
  #gemMenu .navlist{padding:82px 22px 8px!important}
  #gemMenu .navlist a{
    font-size:29px!important;padding:11px 0!important;
    border-bottom:1px solid rgba(217,190,130,.13);
    display:flex!important;flex-wrap:wrap;align-items:baseline;
  }
  #gemMenu .navlist a small{
    margin-left:0!important;flex:1 1 100%;font-size:11.5px!important;
    letter-spacing:.16em;text-transform:uppercase;margin-top:2px;
  }
  #gemMenu .panel-r{padding:20px 22px 30px!important}
  #gemMenu .panel-r .logo{font-size:30px;margin-bottom:14px}
  #gemMenu .panel-r p{font-size:14.5px;margin:2px 0}
  #gemMenu .gem-social{margin-top:20px}
  #gemClose{
    top:14px;right:14px;width:46px;height:46px;border-radius:50%;
    border:2px solid rgba(217,190,130,.6)!important;
    background:rgba(12,11,14,.6)!important;font-size:26px!important;
    display:grid;place-items:center;
  }
}
@media(max-width:380px){
  #gemMenu .navlist a{font-size:25px!important;padding:9px 0!important}
}
/* the quote CTA injected into the menu - full width, unmissable, and the
   first thing under the links on a phone */
#gemMenu .gem-cta{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:22px 0 4px;padding:17px 24px;border-radius:60px;
  background:linear-gradient(135deg,var(--gold),#9c7b3c);color:#fff;
  font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:.02em;
  box-shadow:0 14px 30px rgba(184,144,74,.34);min-height:56px;
}
#gemMenu .gem-cta:hover{background:#fff;color:#14131a}
/* .panel-l is `display:flex` with the nav as its only flow child, so adding
   the CTA beside it laid the two out side by side on desktop. Column. */
#gemMenu .panel-l{flex-direction:column;justify-content:center;align-items:stretch}
/* The menu grew from 6 links to 8 (Gallery, Journal). At the old
   clamp(32px,5vw,60px) with 8px padding that is 920px of list, which does not
   fit a 900px-tall laptop window - the first and last links were cut off with
   no way to scroll a `justify-content:center` flex panel. Tighter pitch, and
   the panel scrolls if a window is shorter still. */
@media(min-width:861px){
  #gemMenu .gem-cta{margin:24px 8vw 0;align-self:flex-start;padding:16px 34px}
  #gemMenu .panel-l{overflow-y:auto;padding:28px 0}
  #gemMenu .navlist a{font-size:clamp(28px,3.2vw,44px);padding:5px 0}
  #gemMenu .navlist a small{font-size:12px}
}
@media(min-width:861px) and (max-height:820px){
  #gemMenu .navlist a{font-size:clamp(24px,2.6vw,34px);padding:3px 0}
  #gemMenu .gem-cta{margin-top:16px;padding:13px 28px;font-size:15px;min-height:48px}
}
@media(max-width:860px){#gemMenu .gem-cta{margin:22px 22px 6px}}

/* --------------------------------------------------------------------------
   32e. HEADER BAR — on a 360-390px screen the boxed lockup plus the MENU pill
        came to more than the wrap's inner width, so the pill was clipped by
        the right edge. Both sides shrink together now.
   -------------------------------------------------------------------------- */
@media(max-width:600px){
  header .bar{gap:8px}
  .brand{flex:0 1 auto;min-width:0;overflow:hidden}
  .brand .txt{min-width:0}
  header .menu-btn{flex:0 0 auto;padding:10px 15px!important}
  header .menu-btn:before{font-size:11px!important;letter-spacing:.18em!important}
  header .menu-btn:after{width:17px!important}
}
@media(max-width:400px){
  header .wrap.bar{padding-left:14px;padding-right:14px}
  header .menu-btn{padding:9px 13px!important}
  header .menu-btn:before{font-size:10px!important;letter-spacing:.14em!important}
}

/* --------------------------------------------------------------------------
   32f. SECTION CTAs — "big and obvious" on every page, per the owner. Rule
        31b only covered a handful of containers; this catches the rest.
   -------------------------------------------------------------------------- */
@media(max-width:700px){
  .cta-band .btn,.consult-card .btn,#quote .btn,.pk-cta .btn,.qb .btn,
  .lm-form .btn,.phero .btn,.ev-cta .btn,.post-cta .btn,.bl-cta .btn{
    width:100%;justify-content:center;font-size:16px!important;
    padding:17px 24px!important;min-height:56px;font-weight:700!important;
  }
  .cta-band .btns,.phero .cta{display:flex;flex-direction:column;gap:12px;
    max-width:360px;margin-inline:auto;width:100%}
}

/* the 404 contact lines */
.nf-contact{margin-top:28px;font-size:15px;color:#cfccc6}
.nf-contact a{color:var(--gold-2);font-weight:600}
.nf-contact span{opacity:.5;margin:0 8px}
.nf-social{margin-top:12px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.nf-social a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#9a978f;font-weight:600}
.nf-social a:hover,.nf-contact a:hover{color:var(--gold)}
@media(max-width:600px){.nf-contact{font-size:14px}.nf-contact span{display:block;height:4px;overflow:hidden;margin:0}}

/* --------------------------------------------------------------------------
   32g. BACK-TO-HOME buttons — big and thumb-sized on every page that has one.
   -------------------------------------------------------------------------- */
.back-home,.nf .btn,.post-back,.bl-back{
  min-height:56px;font-size:16px!important;font-weight:700!important;
  padding:16px 28px!important;
}
@media(max-width:700px){
  .back-home,.post-back,.bl-back{
    width:100%;max-width:360px;justify-content:center;margin-inline:auto;
  }
}

/* --------------------------------------------------------------------------
   33. MOBILE RHYTHM AND CAROUSEL CONTROLS  (session 26)
       From the owner's phone screenshots: (a) an enormous dead gap between
       every section, (b) arrows sitting cramped under the cards with all the
       empty space below them, (c) arrows and dots that vanish on the dark bands,
       (d) dots that look like a control but are an 11px target nobody can hit.
   -------------------------------------------------------------------------- */

/* 33a. VERTICAL RHYTHM. index.html sets `section{padding:96px 0}` inline. On a
        375px phone that is 192px of nothing between each of 21 sections -
        roughly 4,000px of scrolling past empty cream. Desktop keeps the
        generous rhythm; the phone gets a tighter one. */
@media(max-width:760px){
  section{padding:56px 0!important}
  section.hero,.hero2,.hw-frame{padding-top:0!important}
  .sec-head,.shead{margin-bottom:22px!important}
}
@media(max-width:480px){
  section{padding:48px 0!important}
}

/* 33b. THE CONTROL ROW. Give it real air above and below so it reads as a
        control belonging to the cards, not an afterthought pinned to them. */
.cs-nav,.cardE-nav{
  margin-top:20px!important;
  min-height:56px;
  gap:16px;
}
@media(max-width:600px){
  .cs-nav,.cardE-nav{margin-top:18px!important;gap:14px}
}

/* 33c. DARK VS LIGHT BACKDROP. motion.js measures the real backdrop luminance
        (gradients included - a gradient leaves backgroundColor transparent,
        which is why .motion-band, .pk-wrap and .aso were being treated as the
        cream body) and tags each row .on-dark or .on-light. Style the state,
        never the section name, so a new section cannot reintroduce this. */
.cs-nav.on-light .cs-btn,.cardE-nav.on-light .cs-btn{
  background:var(--navy)!important;color:#fff!important;border-color:var(--navy)!important;
  box-shadow:0 8px 20px rgba(20,19,23,.22)!important;
}
.cs-nav.on-dark .cs-btn,.cardE-nav.on-dark .cs-btn{
  background:var(--gold)!important;color:#14131a!important;border-color:var(--gold)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.5)!important;
}
.cs-nav.on-light .cs-btn:hover:not(:disabled),.cardE-nav.on-light .cs-btn:hover:not(:disabled),
.cs-nav.on-light .cs-btn:active,.cardE-nav.on-light .cs-btn:active{
  background:var(--gold)!important;border-color:var(--gold)!important;color:#14131a!important;
}
.cs-nav.on-dark .cs-btn:hover:not(:disabled),.cardE-nav.on-dark .cs-btn:hover:not(:disabled),
.cs-nav.on-dark .cs-btn:active,.cardE-nav.on-dark .cs-btn:active{
  background:#fff!important;border-color:#fff!important;color:#14131a!important;
}
/* a press must be felt on a touch screen - there is no hover to rely on */
.cs-btn:active{transform:scale(.9)!important}

/* 33d. DOTS AS A REAL CONTROL.
        They started as an 11px circle: below the 24px WCAG 2.2 minimum, and on
        the dark bands near-black on near-black.

        🔴 The first attempt at this grew the target with `padding` +
        `box-sizing:content-box` + `background-clip:content-box`. That is wrong:
        `border-radius:50%` is resolved against the BORDER box, so a 26x44 button
        painted a tall stretched OVAL, and at gap:0 they touched each other. The
        owner photographed a row of grey eggs.

        The target and the dot must be two different boxes. The <button> is a
        plain transparent 26x44 hit area; the visible dot is a ::before circle
        centred inside it, so its radius can never be distorted by the padding. */
.cs-dots{gap:3px!important;max-width:92%!important;align-items:center!important}
.cs-dots button{
  width:26px!important;height:44px!important;padding:0!important;
  background:none!important;border:0!important;border-radius:0!important;
  display:grid!important;place-items:center!important;
  box-sizing:border-box!important;transform:none!important;
  transition:none!important;cursor:pointer;
}
.cs-dots button::before{
  content:"";display:block;width:10px;height:10px;border-radius:50%;
  transition:background .25s,transform .2s;
}
/* .3 / .42 measured 1.9:1 and 4.2:1 against their backdrops - a non-text UI
   control needs 3:1, so both are raised to .55 (3.5:1 on cream, 6.0:1 on the
   dark bands). Faint dots are exactly what the owner could not see. */
.cs-nav.on-light .cs-dots button::before{background:rgba(20,19,23,.55)}
.cs-nav.on-light .cs-dots button.on::before{background:var(--gold);transform:scale(1.55)}
.cs-nav.on-dark  .cs-dots button::before{background:rgba(255,255,255,.55)}
.cs-nav.on-dark  .cs-dots button.on::before{background:var(--gold-2);transform:scale(1.55)}
.cs-dots button:active::before{transform:scale(1.9)}
.cs-dots button:focus-visible{outline:2px solid var(--gold);outline-offset:-4px;border-radius:6px!important}

/* 33e. FAN AND STACK DOTS. The fan dots were decorative <span>s with no
        handler - they looked live and did nothing. motion.js now writes real
        <button>s. Same two-box rule as above: transparent target, ::before dot,
        so the active pill stays a pill and the inactive stays a circle. */
.fan-dots button,.stack-dots button{
  width:24px;height:40px;padding:0;background:none;border:0;border-radius:0;
  display:grid;place-items:center;cursor:pointer;transition:none;
}
.fan-dots button::before,.stack-dots button::before{
  content:"";display:block;width:8px;height:8px;border-radius:4px;
  background:var(--line);transition:background .3s,width .3s;
}
.stack-dots button::before{background:rgba(255,255,255,.42)}
.fan-dots button.on::before,.stack-dots button.on::before{background:var(--gold);width:22px}
.fan-dots,.stack-dots{align-items:center;gap:2px}

/* --------------------------------------------------------------------------
   34. CMS NOTICE BAR — content.js inserts #cmsNotice as the first element in
       <body> when the owner fills the "Notice bar" field in /admin. Empty
       field, no element, no space taken. It sits above the fixed header, so
       the header is pushed down by the same amount.
   -------------------------------------------------------------------------- */
#cmsNotice{
  position:relative;z-index:60;
  background:var(--navy);color:var(--gold-2);
  font-size:13.5px;font-weight:600;letter-spacing:.04em;
  text-align:center;padding:11px 16px;line-height:1.45;
  border-bottom:1px solid rgba(217,190,130,.3);
}
@media(max-width:600px){#cmsNotice{font-size:12.5px;padding:9px 12px}}

/* --------------------------------------------------------------------------
   35. THE FULLSCREEN MENU, DESKTOP  (session 26, from his screenshot)
       Two faults, both measured on the live site:

       a) The <small> sub-labels under Events / Gallery / Journal / Media were
          12px in `var(--muted)` #7a756c. That colour is designed for the CREAM
          page. Over the menu's dark photograph it measured 3.4:1 — under the
          4.5:1 that text of that size needs — and over the bright parts of the
          picture it disappeared entirely. They were also `display:inline`, so
          they sat on the same line as a 34px serif link and read as debris
          scattered across the photo rather than as a caption.

       b) The right panel ran 15px body text and a 40px logo in a 440px column
          on a 1050px screen. The phone number — the single most valuable thing
          in that panel — was the same size as everything else.
   -------------------------------------------------------------------------- */
@media(min-width:861px){
  /* a) the sub-labels: own line, readable weight, and a colour that belongs
        on a dark surface. rgba(255,255,255,.78) measures about 9:1 here. */
  #gemMenu .navlist a small{
    display:block!important;margin-left:0!important;margin-top:2px!important;
    font-size:14px!important;letter-spacing:.16em!important;text-transform:uppercase;
    color:rgba(255,255,255,.78)!important;font-weight:500!important;
    text-shadow:0 1px 10px rgba(0,0,0,.85);
  }
  /* the picture must never be allowed to eat the type sitting on it */
  #gemMenu .panel-l img{opacity:.38!important}
  #gemMenu .panel-l .veil{
    background:linear-gradient(100deg,rgba(8,7,10,.88) 0%,rgba(8,7,10,.72) 55%,rgba(8,7,10,.5) 100%)!important;
  }
  #gemMenu .navlist a{
    padding:6px 0!important;
    text-shadow:0 2px 18px rgba(0,0,0,.7);
  }
  /* the Media pill was 11px; it is a badge, not fine print */
  #gemMenu .navlist a.media-hot small{
    display:inline-block!important;font-size:12.5px!important;padding:4px 12px!important;
    color:#f6ecd4!important;text-shadow:none;
  }

  /* b) the right panel, sized for a desktop screen */
  #gemMenu .panel-r .logo{font-size:48px!important;margin-bottom:28px!important}
  #gemMenu .panel-r p{font-size:17px!important;line-height:1.6!important;margin:5px 0!important}
  #gemMenu .panel-r p b{
    display:block;font-size:12.5px!important;letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold-2)!important;margin-bottom:3px;font-weight:600;
  }
  #gemMenu .panel-r a{font-size:17px!important}
  /* the number is the point of the panel - make it the biggest thing in it */
  #gemMenu .panel-r .gem-phone{
    font-family:var(--serif);font-size:30px!important;color:#fff!important;
    letter-spacing:.02em;display:inline-block;margin:2px 0 4px;
  }
  #gemMenu .panel-r .gem-phone:hover{color:var(--gold-2)!important}
  #gemMenu .gem-social a{width:48px;height:48px}
  #gemMenu .gem-social a svg{width:22px;height:22px}
}

/* c) the quote button was a transparent ghost with white text - on a photograph
      it read as another piece of debris. It is the one action in the menu. */
#gemMenu .gem-cta{
  background:var(--gold)!important;color:#14131a!important;
  border:2px solid var(--gold)!important;font-weight:700!important;
  box-shadow:0 12px 30px rgba(0,0,0,.45)!important;
  justify-content:center!important;
}
#gemMenu .gem-cta:hover{background:#fff!important;border-color:#fff!important;color:#14131a!important}
@media(min-width:861px){
  #gemMenu .gem-cta{font-size:17px!important;padding:16px 34px!important;align-self:flex-start}
}

/* 33f. TEN DOTS DO NOT FIT BESIDE TWO ARROWS ON A PHONE.
       With honest 26px targets, ten of them need 287px; between two 54px
       arrows there are only 187px, so the row silently wrapped into two
       ragged lines. Shrinking the target below 24px would undo the whole
       point of 33d, so on a phone the dots take their own full-width line
       under the arrows instead. */
@media(max-width:600px){
  .cs-nav{flex-wrap:wrap!important}
  .cs-nav .cs-dots{
    order:3!important;flex:0 0 100%!important;max-width:100%!important;
    margin-top:6px!important;
  }
}