/**
 * Scaling Made Easy - section styles.
 * Transcribed from the approved prototype. Values are locked.
 * Responsive: desktop >=1025px, tablet 768-1024px, mobile <=767px.
 */

/* ============ NAV ============ */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--black);border-bottom:1px solid var(--line-dark);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px;padding:0 40px;max-width:1600px;margin:0 auto;}
.logo{font-family:"NHG Display",sans-serif;color:var(--white);font-size:20px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;text-decoration:none;white-space:nowrap;}
.logo span{color:var(--gold);}

.nav-links{display:flex;gap:38px;align-items:center;list-style:none;}
.nav-links>li{position:relative;}
.nav-links a{color:var(--white);text-decoration:none;font-size:15px;display:flex;align-items:center;gap:6px;padding:28px 0;transition:color .2s;}
.nav-links a:hover{color:var(--gold);}
.chev{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s;flex:none;}
.nav-links li:hover>a .chev,.nav-links li:focus-within>a .chev{transform:rotate(225deg);margin-top:2px;}
.dropdown{position:absolute;top:100%;left:-24px;min-width:260px;background:var(--white);padding:14px 0;border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(8px);transition:all .22s ease;list-style:none;}
.nav-links li:hover>.dropdown,.nav-links li:focus-within>.dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{color:var(--soft-black);padding:11px 26px;font-size:15px;display:block;}
.dropdown a:hover{color:var(--gold);background:var(--cream);}

.nav-right{display:flex;align-items:center;gap:26px;}
.nav-login{color:#fff;text-decoration:none;font-size:15px;}
.nav-cta{background:var(--white);color:var(--black)!important;padding:12px 26px!important;border-radius:100px;font-family:"NHG Display",sans-serif;font-weight:500;font-size:15px;text-decoration:none;transition:background .2s;}
.nav-cta:hover{background:var(--gold)!important;}

.nav-toggle{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer;}
.nav-toggle span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .28s,opacity .2s;}
.nav-toggle span+span{margin-top:5px;}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-mobile{display:none;}

/* ============ HERO ============ */
.hero{position:relative;min-height:100vh;background:#0a0a0a;display:flex;align-items:flex-end;overflow:hidden;}
.hero-img{position:absolute;inset:0;background-position:center right;background-size:cover;background-repeat:no-repeat;filter:brightness(1.5) contrast(1.02);}
.hero-grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 32%,rgba(0,0,0,0) 58%,rgba(0,0,0,.1) 100%),linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 42%);}
.hero-content{position:relative;z-index:2;padding:0 40px 100px;max-width:1600px;margin:0 auto;width:100%;}
.hero h1{color:var(--white);font-size:clamp(46px,7.2vw,108px);line-height:1.0;letter-spacing:-0.03em;max-width:15ch;margin-bottom:44px;}
.hero-sub{color:rgba(255,255,255,.75);font-size:clamp(18px,1.7vw,24px);line-height:1.5;max-width:44ch;margin:-24px 0 44px;}

.btn-white{background:var(--white);color:var(--black);padding:20px 46px;border-radius:100px;font-size:17px;}
.btn-white:hover{background:var(--gold);transform:translateY(-2px);}
.btn-grey{background:#e8e8e6;color:var(--soft-black);padding:17px 40px;border-radius:100px;font-size:17px;margin-top:20px;}
.btn-grey:hover{background:var(--soft-black);color:#fff;}

section{padding:150px 0;}
.section-cream{background:var(--cream);}

/* ============ VALUE PROP ============ */
.value h2{font-size:clamp(48px,6.4vw,94px);line-height:1.04;letter-spacing:-0.03em;margin-bottom:64px;max-width:26ch;}
.value h2 .brand{font-family:"NHG Display",sans-serif;font-weight:500;}
.value h2 .rest{font-family:"NHG Display",sans-serif;font-weight:400;}
.value h3{font-family:"NHG Display",sans-serif;font-weight:400;font-size:clamp(30px,3.8vw,54px);line-height:1.18;letter-spacing:-0.02em;color:#2a2a2a;max-width:26ch;margin-bottom:52px;}
.value h3 b{font-weight:500;color:var(--soft-black);}
.value h4{font-family:"NHG Display",sans-serif;font-weight:400;font-size:clamp(26px,2.8vw,40px);line-height:1.32;letter-spacing:-0.015em;color:var(--grey);max-width:36ch;}
.value h4 strong{color:var(--soft-black);font-weight:500;}

/* ============ STATS ============ */
.stats{padding:120px 0;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.stat{text-align:center;padding:0 20px;}
.stat .num{font-family:"NHG Display",sans-serif;font-size:clamp(52px,6vw,92px);line-height:1;letter-spacing:-0.03em;color:var(--white);}
.stat .num em{color:var(--gold);font-style:normal;}
.stat .label{font-size:clamp(19px,1.6vw,24px);color:rgba(255,255,255,.65);margin-top:22px;}
.stat:not(:last-child){border-right:1px solid var(--line-dark);}

/* ============ TESTIMONIALS ============ */
.testi-head{text-align:center;margin-bottom:76px;}
.testi-head h2{font-size:clamp(36px,4.4vw,62px);letter-spacing:-0.024em;line-height:1.1;}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;transition:opacity .5s ease;}
.testi{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:44px 40px;display:flex;flex-direction:column;}
.testi[hidden]{display:none;}
.testi .quote{font-family:"NHG Display",sans-serif;font-size:26px;line-height:1.34;letter-spacing:-0.014em;color:var(--soft-black);margin-bottom:34px;flex:1;}
.testi .who{display:flex;align-items:center;gap:16px;}
.testi .avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,var(--gold),var(--gold-hover));flex:none;display:flex;align-items:center;justify-content:center;font-family:"NHG Display",sans-serif;color:var(--black);font-size:22px;overflow:hidden;}
.testi .name{font-size:18px;color:var(--soft-black);line-height:1.3;}
.testi .role{font-size:15px;color:var(--grey);line-height:1.3;}
.progress{height:3px;background:var(--line);border-radius:3px;max-width:200px;margin:64px auto 0;overflow:hidden;}
.progress-bar{height:100%;background:var(--gold);width:0;}
@keyframes fill{from{width:0}to{width:100%}}

/* ============ LOGOS ============ */
.logos{padding:130px 0;border-top:1px solid var(--line);}
.logos p{text-align:center;color:var(--grey);font-size:clamp(20px,1.7vw,26px);letter-spacing:.1em;text-transform:uppercase;margin-bottom:70px;}
.logos-row{
  display:flex;align-items:center;gap:70px;
  justify-content:center;flex-wrap:nowrap;
  overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-bottom:4px;
}
.logos-row::-webkit-scrollbar{display:none;}
.logos-row > *{flex:none;scroll-snap-align:center;}
/* Once the row is wider than the viewport, centring would hide the first item. */
.logos-row.is-scrollable{justify-content:flex-start;}

/* Luxe scroll indicator: a hairline rule with a gold segment that tracks
   position. No arrow, no chevron, no "swipe" label. */
.logos-rail{
  position:relative;height:1px;background:var(--line);
  max-width:180px;margin:38px auto 0;display:none;
}
.logos-rail::after{
  content:"";position:absolute;left:0;top:-1px;height:3px;
  width:var(--rail-w,34%);border-radius:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-hover));
  transform:translateX(var(--rail-x,0));
  transition:transform .18s ease-out;
}
.logos-row.is-scrollable + .logos-rail{display:block;}
.logos-row span{font-family:"NHG Display",sans-serif;font-size:clamp(30px,3.4vw,52px);color:#cfcfcf;letter-spacing:-.015em;filter:grayscale(1);}
.logos-row img{max-height:56px;width:auto;filter:grayscale(1);opacity:.65;}

/* ============ FRAMEWORK SCROLLYTELLING ============ */
.fw-head{text-align:center;max-width:800px;margin:0 auto 20px;padding-top:20px;}
.fw-head .eyebrow{margin-bottom:26px;display:block;}
.fw-head h2{font-size:clamp(44px,6vw,90px);line-height:1.0;letter-spacing:-0.03em;}
.fw-head p{font-size:clamp(18px,1.6vw,22px);color:rgba(255,255,255,.45);margin-top:26px;}

.fw-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;}
.quadbox{position:relative;width:min(560px,80vw);height:min(560px,80vw);}

.qtile{
  position:absolute;width:calc(50% - 9px);height:calc(50% - 9px);
  background:var(--gold);border-radius:26px;
  display:flex;align-items:center;justify-content:center;z-index:3;
  /* FIX A, part 2: promote each tile to its own compositor layer. Without
     this the tiles rasterise against different pixel grids during transform
     and the right column reads a fraction low even when the offsets are
     mathematically identical. */
  will-change:transform,opacity;backface-visibility:hidden;
}
.qtile.tl{top:0;left:0;}
.qtile.tr{top:0;right:0;}
.qtile.bl{bottom:0;left:0;}
.qtile.br{bottom:0;right:0;}
.qtile .lbl{font-family:"NHG Display",sans-serif;font-weight:500;color:#fff;font-size:clamp(22px,3vw,38px);letter-spacing:-.02em;opacity:0;transition:opacity .4s;}
.qtile .lbl .n{color:rgba(255,255,255,.55);margin-right:10px;font-weight:400;}

/* Centred with negative margins, NOT with a transform.
   GSAP takes ownership of an element's transform the moment it animates
   it, and whether it preserved or doubled the CSS translate(-50%,-50%)
   varied by breakpoint and by when a matchMedia context was created. The
   result was a ball sitting half its own width or height out of true at
   some sizes and perfect at others. Margins are outside the transform
   system entirely, so GSAP cannot touch them.
   The quadbox is square, so -13.35% (half of the ball's 26.7%) is correct
   on both axes: percentage margins resolve against the container width. */
.ball{position:absolute;left:50%;top:50%;border-radius:50%;background:#fff;z-index:1;will-change:transform;}

/* FIX B: was 340vh. The timeline completed well before the track ended,
   leaving roughly 40vh of black nothing before Part 1 Sales. 250vh is the
   shortest track that still lets the sequence read at a comfortable scroll
   speed. If it ever feels rushed, raise this rather than adding an empty
   tween back into framework.js. */
.fw-track{height:250vh;position:relative;}

/* Static grid, shown instead of the animation on tablet and mobile. */
.fw-static{display:none;}
.fw-track.is-static{height:auto;}
.fw-track.is-static .fw-stage{position:relative;height:auto;padding:40px 0;}
body.sme-static-fw .fw-track{display:none;}
body.sme-static-fw .fw-static{display:block;padding:16px 24px 48px;}
.fw-static-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:520px;margin:0 auto;}
.fw-static-tile{background:var(--gold);border-radius:22px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;}
.fw-static-tile .lbl{font-family:"NHG Display",sans-serif;font-weight:500;color:#fff;font-size:clamp(19px,4.4vw,30px);letter-spacing:-.02em;}
.fw-static-tile .n{color:rgba(255,255,255,.55);margin-right:8px;font-weight:400;}

/* FIX B, part 2: padding-top was 40px, compounding the gap. */
.fw-panels{max-width:1100px;margin:0 auto;padding:0 40px;}
.panel{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:28px;padding:60px 64px;margin-bottom:28px;display:grid;grid-template-columns:0.8fr 1.2fr;gap:60px;align-items:center;will-change:transform,opacity;}
.panel .pn{font-family:"NHG Display",sans-serif;color:var(--gold);font-size:16px;letter-spacing:.14em;margin-bottom:18px;}
.panel h3{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(38px,4.6vw,68px);letter-spacing:-.03em;line-height:.98;color:#fff;}
.panel .pbody{font-size:clamp(18px,1.5vw,22px);line-height:1.6;color:#fff;}

/* ============ BOTTLENECK + SERVICES ============ */
.bottleneck{max-width:1000px;margin:0 auto 44px;text-align:center;}
.bottleneck .big{font-family:"NHG Display",sans-serif;font-weight:400;font-size:clamp(36px,4.8vw,68px);line-height:1.08;letter-spacing:-0.026em;margin-bottom:70px;}
.pains{max-width:760px;margin:0 auto 110px;list-style:none;}
.pain-row{display:flex;align-items:center;gap:18px;padding:26px 0;border-bottom:1px solid var(--line);font-size:clamp(22px,2.1vw,30px);color:#2a2a2a;line-height:1.3;font-family:"NHG Display",sans-serif;letter-spacing:-0.01em;}
.pain-row:first-child{border-top:1px solid var(--line);}
.pain-row .dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--gold);}

.svc-head{text-align:center;margin-bottom:76px;}
.svc-head h2{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(40px,5.4vw,80px);letter-spacing:-0.03em;line-height:1.02;max-width:18ch;margin:0 auto;}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.card{background:var(--cream);border-radius:18px;overflow:hidden;border:1px solid transparent;transition:border .25s,transform .25s;display:flex;flex-direction:column;}
.card:hover{border-color:var(--gold);transform:translateY(-3px);}
.card-img{aspect-ratio:16/9;background-size:cover;background-position:center;}
.card-body{padding:40px 42px 44px;display:flex;flex-direction:column;flex:1;}
.card .sname{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(28px,3vw,40px);letter-spacing:-0.02em;color:var(--soft-black);margin-bottom:20px;line-height:1.05;}
.card .hook{font-family:"NHG Display",sans-serif;font-weight:400;font-size:22px;line-height:1.3;letter-spacing:-0.01em;color:#333;margin-bottom:22px;}
.card .sdesc{font-size:17px;color:#555;line-height:1.55;flex:1;margin-bottom:28px;}
.card .more{font-family:"NHG Display",sans-serif;font-weight:500;font-size:16px;color:var(--soft-black);text-decoration:none;display:inline-flex;align-items:center;gap:8px;}
.card .more span{color:var(--gold);transition:transform .2s;}
.card:hover .more span{transform:translateX(4px);}

/* ============ MEET GERRY ============ */
.meet{display:grid;grid-template-columns:0.9fr 1.1fr;gap:80px;align-items:center;}
.meet-img{aspect-ratio:4/5;border-radius:18px;background-size:cover;background-position:center;filter:brightness(1.35) grayscale(.1);}
.meet-txt .eyebrow{display:block;margin-bottom:28px;font-size:clamp(16px,1.6vw,21px);letter-spacing:.1em;line-height:1.2;}
.meet-txt h2{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(42px,5vw,76px);letter-spacing:-0.03em;line-height:1.02;margin-bottom:40px;}
.meet-txt p{font-size:20px;line-height:1.62;color:#3a3a3a;margin-bottom:24px;}
.meet-txt p.last{color:var(--soft-black);font-family:"NHG Display",sans-serif;font-size:24px;letter-spacing:-0.01em;}

/* ============ BOOK A CALL ============ */
.callcta{text-align:center;}
.callcta h2{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(44px,6vw,92px);line-height:1.0;letter-spacing:-0.03em;max-width:14ch;margin:0 auto 40px;}
.callcta h2 em{color:var(--gold);font-style:normal;}
.callcta p{font-size:clamp(22px,2vw,30px);color:rgba(255,255,255,.65);max-width:40ch;margin:0 auto 52px;line-height:1.45;font-family:"NHG Display",sans-serif;letter-spacing:-0.01em;}

/* ============ PROGRAMME ============ */
.prog{display:grid;grid-template-columns:1.1fr 0.9fr;gap:70px;align-items:center;}
.prog h2{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(38px,4.8vw,68px);line-height:1.04;letter-spacing:-0.03em;margin-bottom:36px;}
.prog p{font-size:clamp(19px,1.7vw,24px);color:rgba(255,255,255,.65);line-height:1.5;margin-bottom:46px;max-width:40ch;}
.prog-img{aspect-ratio:3/4;border-radius:16px;background:linear-gradient(160deg,#161616,#000);border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.25);font-size:14px;letter-spacing:.1em;text-transform:uppercase;overflow:hidden;}
.prog-img img{width:100%;height:100%;object-fit:cover;}

/* ============ BOOK ============ */
.book{display:grid;grid-template-columns:0.85fr 1.15fr;gap:80px;align-items:center;}
/* The placeholder cover is a white book, not a black rectangle. On the
   dark book sections it was black on black and read as a hole in the page
   rather than as a physical object sitting on the surface. */
.book-cover{
  aspect-ratio:3/4;border-radius:12px;
  background:linear-gradient(165deg,#ffffff,#f2efe8);
  box-shadow:0 30px 70px rgba(0,0,0,.42), 0 2px 0 rgba(0,0,0,.06) inset;
  display:flex;flex-direction:column;justify-content:center;
  padding:48px;color:var(--soft-black);overflow:hidden;position:relative;
}
/* A hairline down the left edge reads as the spine and stops it looking
   like a flat card. */
.book-cover::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:9px;
  background:linear-gradient(90deg,rgba(0,0,0,.14),rgba(0,0,0,0));
  pointer-events:none;
}
.book-cover.has-img{padding:0;background:none;box-shadow:0 30px 70px rgba(0,0,0,.42);}
.book-cover.has-img::before{display:none;}
.book-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.book-cover .bk-e{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6e581a;margin-bottom:26px;}
.book-cover .bk-t{font-family:"NHG Display",sans-serif;font-weight:500;font-size:30px;line-height:1.18;letter-spacing:-.015em;color:var(--black);}
.book-cover .bk-a{margin-top:auto;font-size:14px;color:#5f5a52;letter-spacing:.05em;}
.book-txt .eyebrow{display:block;margin-bottom:24px;}
.book-txt h2{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(36px,4vw,58px);letter-spacing:-0.026em;line-height:1.06;margin-bottom:30px;}
.book-quote{border-left:2px solid var(--gold);padding-left:26px;margin:34px 0 40px;}
.book-quote p{font-family:"NHG Display",sans-serif;font-size:27px;line-height:1.4;color:var(--soft-black);margin-bottom:14px;letter-spacing:-0.01em;}
.book-quote .bq-who{font-size:16px;color:var(--grey);}
.book-form{display:flex;gap:12px;max-width:500px;margin-top:8px;}
.book-form input{flex:1;padding:19px 24px;border:1px solid var(--line);border-radius:100px;font-family:"NHG Text",sans-serif;font-size:17px;color:var(--soft-black);min-width:0;}
.book-form input:focus{outline:none;border-color:var(--gold);}
.book-form button{background:var(--gold);color:var(--black);border:none;padding:19px 34px;border-radius:100px;font-family:"NHG Display",sans-serif;font-weight:500;font-size:17px;cursor:pointer;transition:background .2s;white-space:nowrap;}
.book-form button:hover{background:var(--gold-hover);}

/* ============ FOOTER ============ */
.site-footer{background:var(--black);color:var(--white);padding:100px 0 40px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:70px;border-bottom:1px solid var(--line-dark);}
.foot-brand .logo{margin-bottom:20px;display:inline-block;}
.foot-brand p{color:rgba(255,255,255,.5);font-size:16px;line-height:1.6;max-width:32ch;}
.foot-col h4{font-family:"NHG Text",sans-serif;font-weight:400;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:22px;}
.foot-col ul{list-style:none;}
.foot-col a{display:block;color:rgba(255,255,255,.65);text-decoration:none;font-size:15px;margin-bottom:14px;transition:color .2s;}
.foot-col a:hover{color:var(--white);}
.foot-bottom{padding-top:34px;display:flex;justify-content:space-between;color:rgba(255,255,255,.4);font-size:13px;flex-wrap:wrap;gap:12px;}
.foot-bottom a{color:inherit;text-decoration:none;}
.foot-bottom a:hover{color:var(--white);}
.foot-credit a{color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s;}
.foot-credit a:hover{color:var(--gold);}

/* =====================================================================
   TABLET  (768 - 1024)
   ===================================================================== */
@media (max-width:1024px){
  .nav-links,.nav-login{display:none;}
  .nav-toggle{display:block;}

  /* The prototype simply hid the nav below 1025px, which left tablet and
     mobile visitors with no way to navigate at all. Slide-down panel. */
  .nav-mobile{
    display:block;
    position:fixed;top:76px;left:0;right:0;bottom:0;
    background:var(--black);padding:32px 24px 60px;
    overflow-y:auto;list-style:none;
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity .24s ease,transform .24s ease,visibility .24s;
    -webkit-overflow-scrolling:touch;
  }
  .nav-open .nav-mobile{transform:translateY(0);opacity:1;visibility:visible;}
  .nav-mobile>li{border-bottom:1px solid var(--line-dark);}
  .nav-mobile>li>a,.nav-mobile>li>button{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    background:none;border:0;color:#fff;text-decoration:none;
    font-family:"NHG Display",sans-serif;font-size:22px;letter-spacing:-.01em;
    padding:22px 4px;cursor:pointer;text-align:left;
  }
  .nav-mobile .submenu{list-style:none;max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .nav-mobile li.open .submenu{max-height:460px;}
  .nav-mobile .submenu a{display:block;color:rgba(255,255,255,.62);font-size:16px;padding:12px 4px 12px 18px;text-decoration:none;}
  .nav-mobile .submenu a:hover{color:var(--gold);}
  .nav-mobile li.open>button .chev{transform:rotate(225deg);}
  .nav-mobile .m-cta{margin-top:32px;display:block;text-align:center;}
  body.nav-open{overflow:hidden;}

  /* SPECIFICITY FIX: base.css sets .section-white/.section-black padding with a
     class selector, which beats a bare `section` element selector even inside a
     media query. Every responsive padding override below must therefore carry at
     least class-level specificity or it is silently ignored. */
  section,.section-white,.section-black,.section-cream{padding:84px 0;}
  .container,.wide{padding:0 24px;}
  .hero-content{padding:0 24px 70px;}
  .hero-sub{margin:-16px 0 36px;}

  .stats-grid{grid-template-columns:repeat(2,1fr);gap:44px 20px;}
  .stat:nth-child(2){border-right:none;}
  .testi-grid,.cards{grid-template-columns:1fr;}
  .meet,.prog,.book{grid-template-columns:1fr;gap:44px;}
  .prog-img,.book-cover{max-width:340px;}
  .logos{padding:80px 0;}
  .logos-row{gap:40px;}

  /* The scrollytelling now runs on tablet and mobile too, so the static
     fallback is only used for reduced-motion. */
  .fw-track{height:210vh;}
  .fw-panels{padding:0 24px;}
  .panel{grid-template-columns:1fr;gap:24px;padding:40px 32px;opacity:1;transform:none;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:44px 32px;}
}

/* =====================================================================
   MOBILE  (<= 767)
   ===================================================================== */
@media (max-width:767px){
  .nav-inner{padding:0 20px;height:68px;}
  .nav-mobile{top:68px;}
  .logo{font-size:16px;letter-spacing:.1em;}
  .nav-cta{padding:10px 18px!important;font-size:13px;}

  section,.section-white,.section-black,.section-cream{padding:58px 0;}
  .container,.wide{padding:0 20px;}

  .hero{min-height:88vh;}
  .hero-content{padding:0 20px 56px;}
  .hero h1{max-width:none;margin-bottom:30px;}
  .btn-white,.btn-grey{display:block;text-align:center;padding:18px 28px;}

  .value h2{margin-bottom:38px;}
  .value h3{margin-bottom:32px;}

  .stats{padding:72px 0;}
  .stats-grid{grid-template-columns:1fr;gap:0;}
  .stat{border-right:none!important;padding:26px 0;border-bottom:1px solid var(--line-dark);}
  .stat:last-child{border-bottom:none;}
  .stat .label{margin-top:12px;}

  .testi-head{margin-bottom:44px;}
  .testi{padding:32px 26px;}
  .testi .quote{font-size:21px;margin-bottom:26px;}
  .progress{margin-top:40px;}

  .logos{padding:60px 0;}
  .logos p{margin-bottom:38px;}
  .logos-row{gap:26px;}

  .fw-track{height:190vh;}
  .fw-static{padding:12px 20px 40px;}
  .fw-static-grid{gap:10px;}
  .fw-panels{padding:0 20px;}
  .panel{padding:30px 24px;border-radius:20px;}

  .bottleneck .big{margin-bottom:44px;}
  .pains{margin-bottom:64px;}
  .pain-row{padding:20px 0;gap:14px;align-items:flex-start;}
  .pain-row .dot{margin-top:11px;}
  .svc-head{margin-bottom:44px;}
  .cards{gap:20px;}
  .card-body{padding:28px 26px 32px;}
  .card .hook{font-size:19px;}

  .meet,.prog,.book{gap:34px;}
  .meet-img{aspect-ratio:1;}
  .meet-txt p{font-size:18px;}
  .meet-txt p.last{font-size:21px;}
  .prog-img,.book-cover{max-width:100%;}
  .book-cover{padding:34px;}
  .book-cover .bk-t{font-size:24px;}
  .book-quote{padding-left:18px;margin:26px 0 30px;}
  .book-quote p{font-size:21px;}

  /* Stacked form, full-width tap targets. */
  .book-form{flex-direction:column;max-width:none;}
  .book-form input,.book-form button{width:100%;}

  .site-footer{padding:64px 0 32px;}
  .foot-grid{grid-template-columns:1fr;gap:38px;padding-bottom:44px;}
  .foot-bottom{flex-direction:column;gap:10px;text-align:center;align-items:center;}
}

/* Landscape phones: a full-height hero swallows the whole viewport. */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding:120px 0 60px;}
}

/* =====================================================================
   SERVICE PAGES
   ===================================================================== */

.svc-hero{position:relative;background:var(--black);color:var(--white);padding:210px 0 120px;overflow:hidden;}
.svc-hero-img{position:absolute;inset:0;background-position:center right;background-size:cover;filter:brightness(1.35);}
.svc-hero-grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.15) 100%),linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 50%);}
.svc-hero-inner{position:relative;z-index:2;}
.svc-hero .eyebrow{display:block;margin-bottom:26px;}
.svc-hero h1{font-size:clamp(42px,6.2vw,92px);line-height:1.02;letter-spacing:-0.03em;max-width:17ch;margin-bottom:34px;}
.svc-hero-sub{font-size:clamp(19px,1.8vw,26px);line-height:1.5;color:rgba(255,255,255,.7);max-width:46ch;margin-bottom:44px;font-family:"NHG Display",sans-serif;letter-spacing:-.01em;}

.svc-sec-head{text-align:center;max-width:800px;margin:0 auto 76px;}
.svc-sec-head .eyebrow{display:block;margin-bottom:24px;}
.svc-sec-head h2{font-size:clamp(38px,5vw,74px);line-height:1.04;letter-spacing:-0.03em;}
.svc-sec-head p{font-size:clamp(18px,1.6vw,22px);color:rgba(255,255,255,.5);margin-top:26px;line-height:1.55;}

/* Steps */
.steps{list-style:none;max-width:900px;margin:0 auto;counter-reset:step;}
.step{display:grid;grid-template-columns:auto 1fr;gap:40px;padding:44px 0;border-top:1px solid var(--line-dark);align-items:start;}
.step:last-child{border-bottom:1px solid var(--line-dark);}
.step-n{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(34px,3.6vw,52px);color:var(--gold);line-height:1;letter-spacing:-.02em;min-width:2.4ch;}
.step h3{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.02em;line-height:1.1;margin-bottom:16px;color:#fff;}
.step p{font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:rgba(255,255,255,.62);max-width:52ch;}

/* Outcomes */
.out-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.out-card{background:var(--cream);border-radius:18px;padding:44px 40px;border:1px solid transparent;transition:border .25s;}
.out-card:hover{border-color:var(--gold);}
.out-card h3{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.02em;line-height:1.1;margin-bottom:18px;color:var(--soft-black);}
.out-card p{font-size:17px;line-height:1.6;color:#555;}

/* Fit */
.fit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.fit-grid.single{grid-template-columns:1fr;max-width:700px;margin:0 auto;}
.fit-col{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:48px 44px;}
.fit-col h3{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(22px,2vw,28px);letter-spacing:-.015em;margin-bottom:28px;color:var(--soft-black);}
.fit-col ul{list-style:none;}
.fit-col li{position:relative;padding:0 0 18px 34px;font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:#3a3a3a;}
.fit-col li:last-child{padding-bottom:0;}
.fit-col li::before{position:absolute;left:0;top:1px;font-family:"NHG Display",sans-serif;font-weight:500;}
.fit-col.is-for li::before{content:"\2713";color:var(--gold);}
.fit-col.is-not li::before{content:"\2715";color:var(--grey);}

/* Single testimonial */
.svc-proof figure{max-width:900px;margin:0 auto;text-align:center;}
.svc-proof blockquote p{font-family:"NHG Display",sans-serif;font-size:clamp(28px,3.4vw,48px);line-height:1.22;letter-spacing:-.024em;color:var(--soft-black);margin-bottom:36px;}
.svc-proof figcaption{display:flex;flex-direction:column;gap:6px;}
.svc-proof .pq-name{font-family:"NHG Display",sans-serif;font-weight:500;font-size:18px;color:var(--soft-black);}
.svc-proof .pq-role{font-size:16px;color:var(--grey);}

/* Included */
.inc-list{list-style:none;max-width:860px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:4px 44px;}
.inc-list li{display:flex;align-items:flex-start;gap:16px;padding:20px 0;border-bottom:1px solid var(--line-dark);font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:rgba(255,255,255,.82);}
.inc-list .tick{flex:none;width:9px;height:9px;border-radius:50%;background:var(--gold);margin-top:9px;}
.inc-format{text-align:center;max-width:640px;margin:52px auto 0;color:rgba(255,255,255,.45);font-size:16px;line-height:1.6;}

/* FAQ */
.faq-list{max-width:860px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:first-child{border-top:1px solid var(--line);}
.faq-item summary{
  list-style:none;cursor:pointer;padding:32px 44px 32px 0;position:relative;
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(20px,1.9vw,27px);letter-spacing:-.015em;line-height:1.28;color:var(--soft-black);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-ico{position:absolute;right:6px;top:50%;width:15px;height:15px;margin-top:-7px;}
.faq-ico::before,.faq-ico::after{content:"";position:absolute;background:var(--gold);transition:transform .25s;}
.faq-ico::before{left:0;top:6px;width:15px;height:2px;}
.faq-ico::after{left:6px;top:0;width:2px;height:15px;}
.faq-item[open] .faq-ico::after{transform:scaleY(0);}
.faq-a{padding:0 44px 34px 0;}
.faq-a p{font-size:clamp(17px,1.5vw,20px);line-height:1.62;color:#4a4a4a;max-width:66ch;}

@media (max-width:1024px){
  .svc-hero{padding:160px 0 90px;}
  .svc-hero h1{max-width:none;}
  .svc-sec-head{margin-bottom:52px;}
  .out-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  .fit-grid{grid-template-columns:1fr;}
  .inc-list{grid-template-columns:1fr;gap:0;}
  .step{gap:26px;padding:34px 0;}
}

@media (max-width:767px){
  .svc-hero{padding:128px 0 72px;}
  .svc-hero .eyebrow{margin-bottom:18px;}
  .svc-hero h1{margin-bottom:24px;}
  .svc-hero-sub{margin-bottom:32px;}
  .svc-sec-head{margin-bottom:40px;}
  .out-grid{grid-template-columns:1fr;}
  .out-card{padding:32px 26px;}
  .fit-col{padding:34px 26px;}
  .fit-col li{padding-left:28px;font-size:17px;}
  .step{grid-template-columns:1fr;gap:12px;padding:28px 0;}
  .step-n{font-size:28px;}
  .svc-proof blockquote p{margin-bottom:26px;}
  .faq-item summary{padding:24px 38px 24px 0;}
  .faq-a{padding:0 0 26px;}
}

/* ============ LOCAL SEO BAND ============ */
.local-grid{display:grid;grid-template-columns:1.25fr 0.75fr;gap:70px;align-items:start;}
.local-grid h2{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(32px,3.6vw,52px);letter-spacing:-.03em;line-height:1.06;margin-bottom:28px;}
.local-grid p{font-size:clamp(17px,1.5vw,20px);line-height:1.62;color:#3a3a3a;margin-bottom:20px;max-width:56ch;}
.local-travel{color:var(--soft-black);font-family:"NHG Display",sans-serif;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.01em;}
.local-grid h3{font-family:"NHG Text",sans-serif;font-weight:400;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:22px;}
.area-list{list-style:none;columns:2;column-gap:28px;}
.area-list li{padding:9px 0;font-size:16px;color:#4a4a4a;border-bottom:1px solid var(--line);break-inside:avoid;}

@media (max-width:1024px){
  .local-grid{grid-template-columns:1fr;gap:44px;}
}
@media (max-width:767px){
  .area-list{columns:1;}
}

/* ============ ABOUT TIMELINE ============ */
.timeline .step-n{font-size:clamp(26px,2.6vw,36px);min-width:4.6ch;}

/* ============ CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:1.35fr 0.65fr;gap:80px;align-items:start;}
.contact-fallback{color:var(--grey);font-size:17px;padding:40px;border:1px dashed var(--line);border-radius:16px;}
.contact-aside .ct-block{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--line);}
.contact-aside .ct-block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}
.contact-aside h3{font-family:"NHG Text",sans-serif;font-weight:400;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;}
.contact-aside a{font-family:"NHG Display",sans-serif;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.01em;color:var(--soft-black);text-decoration:none;transition:color .2s;word-break:break-word;}
.contact-aside a:hover{color:var(--gold);}
.contact-aside p{font-size:17px;line-height:1.6;color:#4a4a4a;}

/* Style whatever form plugin is used, so it matches the rest of the site. */
.contact-form input[type="text"],.contact-form input[type="email"],
.contact-form input[type="tel"],.contact-form textarea,.contact-form select{
  width:100%;padding:18px 22px;border:1px solid var(--line);border-radius:14px;
  font-family:"NHG Text",sans-serif;font-size:17px;color:var(--soft-black);
  background:var(--white);margin-bottom:18px;
}
.contact-form textarea{border-radius:18px;min-height:170px;resize:vertical;}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:none;border-color:var(--gold);}
.contact-form label{display:block;font-size:15px;color:#4a4a4a;margin-bottom:8px;}
.contact-form input[type="submit"],.contact-form button[type="submit"]{
  background:var(--soft-black);color:#fff;border:0;padding:19px 42px;border-radius:100px;
  font-family:"NHG Display",sans-serif;font-weight:500;font-size:17px;cursor:pointer;
  width:auto;transition:background .2s;
}
.contact-form input[type="submit"]:hover,.contact-form button[type="submit"]:hover{background:var(--gold);color:var(--black);}

/* ============ BOOK OPT-IN PAGE ============ */
.book-hero{padding:190px 0 130px;}
.book-hero .book-txt h1{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(36px,4.4vw,64px);letter-spacing:-.03em;line-height:1.04;margin-bottom:26px;color:#fff;}
.book-hero .book-cover{box-shadow:0 30px 80px rgba(0,0,0,.5);}
.bk-sub{font-size:clamp(18px,1.6vw,23px);line-height:1.55;color:rgba(255,255,255,.65);margin-bottom:36px;max-width:44ch;}
.bk-privacy{margin-top:16px;font-size:14px;color:rgba(255,255,255,.4);line-height:1.5;max-width:44ch;}
.book-hero .book-form input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff;}
.book-hero .book-form input::placeholder{color:rgba(255,255,255,.45);}

/* ============ EVENTS ============ */
.ev-list{max-width:960px;margin:0 auto;}
.ev-card{display:grid;grid-template-columns:250px 1fr;gap:48px;padding:48px 0;border-top:1px solid var(--line);align-items:start;}
.ev-card:last-child{border-bottom:1px solid var(--line);}
.ev-card.is-soldout{opacity:.55;}
.ev-when time{display:block;font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;color:var(--soft-black);margin-bottom:8px;}
.ev-loc{font-size:15px;color:var(--grey);letter-spacing:.04em;text-transform:uppercase;}
.ev-body h2{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.02em;line-height:1.08;margin-bottom:18px;}
.ev-body p{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:#4a4a4a;margin-bottom:26px;max-width:56ch;}
.ev-tag{display:inline-block;padding:11px 26px;border:1px solid var(--line);border-radius:100px;font-size:15px;color:var(--grey);letter-spacing:.06em;text-transform:uppercase;}
.ev-empty{max-width:640px;margin:0 auto;text-align:center;padding:40px 0 20px;}
.ev-empty h2{font-size:clamp(30px,3.4vw,48px);letter-spacing:-.03em;line-height:1.08;margin-bottom:24px;}
.ev-empty p{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:#4a4a4a;margin-bottom:40px;}
.ev-empty .book-form{margin:0 auto;}

@media (max-width:1024px){
  .contact-grid{grid-template-columns:1fr;gap:56px;}
  .book-hero{padding:150px 0 90px;}
  .ev-card{grid-template-columns:1fr;gap:16px;padding:38px 0;}
}
@media (max-width:767px){
  .book-hero{padding:120px 0 72px;}
  .contact-grid{gap:44px;}
  .ev-empty{padding:16px 0;}
}

/* =====================================================================
   BLOG
   ===================================================================== */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.post-card{background:var(--cream);border-radius:18px;overflow:hidden;border:1px solid transparent;transition:border .25s,transform .25s;}
.post-card:hover{border-color:var(--gold);transform:translateY(-3px);}
.pc-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;}
.pc-img{aspect-ratio:16/9;overflow:hidden;}
.pc-img img{width:100%;height:100%;object-fit:cover;display:block;}
.pc-body{padding:34px 32px 36px;display:flex;flex-direction:column;flex:1;}
.pc-meta{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--grey);margin-bottom:18px;letter-spacing:.04em;}
.pc-cat{color:var(--gold);text-transform:uppercase;letter-spacing:.1em;font-size:13px;}
.pc-title{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(22px,1.9vw,27px);letter-spacing:-.02em;line-height:1.14;margin-bottom:16px;color:var(--soft-black);}
.pc-excerpt{font-size:16px;line-height:1.6;color:#555;flex:1;margin-bottom:24px;}

.post-hero .post-meta{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,.55);font-size:16px;margin-top:8px;}
.dot-sep{width:4px;height:4px;border-radius:50%;background:var(--gold);}
.post-lead{background:var(--white);}
.post-lead .container{padding-top:0;}
.post-lead img{width:100%;height:auto;border-radius:20px;margin-top:-70px;position:relative;z-index:2;display:block;}

/* Long-form typography for post content. */
.prose{max-width:720px;margin:0 auto;}
.prose > * + *{margin-top:28px;}
.prose p{font-size:clamp(18px,1.5vw,21px);line-height:1.72;color:#2e2e2e;}
.prose h2{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(28px,2.8vw,40px);letter-spacing:-.025em;line-height:1.12;margin-top:60px;}
.prose h3{font-family:"NHG Display",sans-serif;font-weight:500;font-size:clamp(23px,2.1vw,30px);letter-spacing:-.02em;line-height:1.18;margin-top:44px;}
.prose ul,.prose ol{padding-left:26px;}
.prose li{font-size:clamp(18px,1.5vw,21px);line-height:1.68;color:#2e2e2e;margin-bottom:12px;}
.prose li::marker{color:var(--gold);}
.prose blockquote{border-left:2px solid var(--gold);padding-left:28px;margin:44px 0;}
.prose blockquote p{font-family:"NHG Display",sans-serif;font-size:clamp(23px,2.2vw,30px);line-height:1.34;letter-spacing:-.015em;color:var(--soft-black);}
.prose img{width:100%;height:auto;border-radius:16px;}
.prose a{color:var(--soft-black);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;text-decoration-thickness:2px;}
.prose a:hover{color:var(--gold);}
.prose figcaption{font-size:15px;color:var(--grey);margin-top:12px;text-align:center;}
.prose hr{border:0;border-top:1px solid var(--line);margin:56px 0;}

.post-author{max-width:720px;margin:80px auto 0;padding-top:44px;border-top:1px solid var(--line);display:grid;grid-template-columns:88px 1fr;gap:28px;align-items:start;}
.pa-img{width:88px;height:88px;border-radius:50%;background-size:cover;background-position:center;}
.post-author h3{font-family:"NHG Display",sans-serif;font-weight:500;font-size:22px;letter-spacing:-.015em;margin-bottom:12px;}
.post-author p{font-size:17px;line-height:1.6;color:#4a4a4a;margin-bottom:16px;}

.pagination{margin-top:70px;display:flex;justify-content:center;}
.pagination .nav-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;padding:0 16px;
  border:1px solid var(--line);border-radius:100px;text-decoration:none;color:var(--soft-black);
  font-family:"NHG Display",sans-serif;font-size:16px;transition:all .2s;
}
.pagination .page-numbers:hover{border-color:var(--gold);color:var(--gold);}
.pagination .page-numbers.current{background:var(--soft-black);border-color:var(--soft-black);color:#fff;}

@media (max-width:1024px){
  .post-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  .post-lead img{margin-top:-40px;border-radius:16px;}
}
@media (max-width:767px){
  .post-grid{grid-template-columns:1fr;}
  .pc-body{padding:26px 24px 30px;}
  .post-lead img{margin-top:-24px;border-radius:12px;}
  .prose > * + *{margin-top:22px;}
  .prose h2{margin-top:40px;}
  .prose h3{margin-top:32px;}
  .post-author{grid-template-columns:1fr;gap:18px;margin-top:52px;}
  .pagination{margin-top:44px;}
}

/* =====================================================================
   MOBILE + TABLET REFINEMENT PASS
   Rhythm, type scale, and the header.
   Every rule here carries class-level specificity on purpose: base.css
   sets section padding with class selectors, so element selectors lose.
   ===================================================================== */

/* ---------- HEADER: compact, logo left, hamburger right ---------- */
@media (max-width:1024px){
  .nav-inner{height:60px;padding:0 20px;}
  .logo{font-size:15px;letter-spacing:.11em;}

  /* The pill CTA sat between the logo and the burger, crowding both and
     leaving no clean tap target. It now lives at the top of the menu. */
  .nav-right .nav-cta{display:none;}
  .nav-right{gap:0;}

  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;
    width:44px;height:44px;padding:11px 8px;margin-right:-8px;
    position:relative;z-index:2;
  }
  .nav-toggle span{width:100%;}
  .nav-mobile{top:60px;padding:20px 20px 60px;}

  /* CTA pinned to the top of the panel, styled as the primary action. */
  .nav-mobile .m-cta{
    display:block;margin:0 0 20px;text-align:center;
    background:var(--white);color:var(--black);
    padding:16px 26px;border-radius:100px;
    font-family:"NHG Display",sans-serif;font-weight:500;font-size:16px;
    text-decoration:none;
  }
  .nav-mobile .m-cta-item{border-bottom:0;}
  .nav-mobile>li>a,.nav-mobile>li>button{font-size:19px;padding:17px 4px;}
  .nav-mobile .submenu a{font-size:15px;padding:10px 4px 10px 16px;}
}

@media (max-width:767px){
  .nav-inner{height:54px;padding:0 18px;}
  .logo{font-size:13.5px;letter-spacing:.1em;}
  .nav-toggle{width:42px;height:42px;padding:11px 7px;}
  .nav-toggle span+span{margin-top:4px;}
  .nav-mobile{top:54px;}
}

/* ---------- MOBILE TYPE SCALE + RHYTHM ---------- */
@media (max-width:767px){

  /* HERO
     was clamp(46px,7.2vw,108px) -> 46px on a phone, which swallowed the
     photograph entirely. 37px is that value less 20%. */
  .hero{min-height:100svh;}
  .hero h1{font-size:37px;line-height:1.06;margin-bottom:26px;}
  .hero-sub{font-size:17px;margin:0 0 30px;}
  /* CTA sat too high with dead space beneath it. */
  .hero-content{padding:0 20px 34px;}

  /* VALUE PROP
     h2 was 48px -> 38px (-20%)
     h3 was 30px -> 27px (-10%)
     h4 was 26px -> 23px (-10%) */
  .value h2{font-size:38px;line-height:1.08;margin-bottom:30px;}
  .value h3{font-size:27px;line-height:1.22;margin-bottom:26px;}
  .value h4{font-size:23px;line-height:1.36;}
  /* Excess white after "Gerry fixes that". */
  .value{padding-bottom:46px;}

  /* TESTIMONIALS: tighten above the heading and below the progress bar. */
  .section-white.stats + .section-white,
  .testi-head{margin-bottom:34px;}
  .progress{margin:34px auto 0;}

  /* LOGOS: horizontal rail, tighter band. */
  .logos{padding:44px 0 52px;border-top:1px solid var(--line);}
  .logos p{margin-bottom:26px;font-size:15px;}
  .logos-row{gap:34px;padding-left:2px;}
  .logos-row span{font-size:26px;}
  .logos-rail{margin-top:26px;max-width:140px;}

  /* FRAMEWORK: less black before it, and after the last panel. */
  .fw-head{padding-top:0;margin-bottom:0;}
  .fw-head h2{font-size:38px;}
  .fw-head p{font-size:16px;margin-top:16px;}
  .fw-head .eyebrow{margin-bottom:16px;}
  .panel{padding:26px 22px;margin-bottom:16px;}
  .panel h3{font-size:32px;}
  .panel .pbody{font-size:17px;}

  /* SERVICES: tighter above "You're the hardest working person". */
  .bottleneck{margin-bottom:26px;}
  .bottleneck .big{font-size:32px;line-height:1.12;margin-bottom:30px;}
  .pains{margin-bottom:44px;}
  .svc-head{margin-bottom:32px;}
  .svc-head h2{font-size:34px;}

  /* MEET GERRY
     Body copy up from 18px to 21px, and the closing line from 21px to 32px
     so it reads as the payoff rather than another paragraph. */
  .meet{gap:26px;}
  .meet-img{aspect-ratio:4/5;}
  .meet-txt .eyebrow{margin-bottom:14px;}
  .meet-txt h2{font-size:36px;margin-bottom:22px;}
  .meet-txt p{font-size:21px;line-height:1.58;margin-bottom:20px;}
  .meet-txt p.last{font-size:32px;line-height:1.18;margin-bottom:26px;}
  .meet-txt .btn-grey{margin-top:4px;}

  /* CLOSING CTA bands. */
  .callcta h2{font-size:40px;margin-bottom:22px;}
  .callcta p{font-size:19px;margin-bottom:30px;}

  /* PROGRAMME + BOOK. */
  .prog{gap:28px;}
  .prog h2{font-size:33px;margin-bottom:20px;}
  .prog p{font-size:18px;margin-bottom:28px;}
  .book{gap:28px;}
  .book-txt h2{font-size:31px;margin-bottom:20px;}
  .book-txt .eyebrow{margin-bottom:14px;}
  .book-quote{margin:22px 0 24px;}
}

/* ---------- TARGETED SPACING, MOBILE + TABLET ----------
   Where two sections of the same colour meet, the combined padding reads
   as a void rather than a pause. These pairs are collapsed deliberately. */
@media (max-width:1024px){

  /* Value prop -> stats: white to black. */
  .section-white.value{padding-bottom:52px;}

  /* Logos band sits directly under the testimonials, so it needs no top pad. */
  .section-white + .logos.section-white{padding-top:0;}

  /* Framework head is inside a section with its own inline padding-top. */
  .fw-panels + *,
  .fw-track + .wide{padding-bottom:56px !important;}

  /* Services block: the gap before Meet Gerry was the single worst offender,
     two full section paddings back to back with no visual break. */
  .cards + *,
  .section-white:has(.cards){padding-bottom:56px;}
  .section-white:has(.meet){padding-top:52px;}

  /* Meet Gerry -> Book a call. */
  .section-white:has(.meet){padding-bottom:56px;}
  .section-black.callcta{padding-top:60px;padding-bottom:60px;}

  /* Programme band. */
  .section-black:has(.prog){padding-top:56px;padding-bottom:56px;}

  /* Book section -> footer. */
  .section-white:has(.book){padding-top:52px;padding-bottom:56px;}
}

/* Fallback for browsers without :has(). Keeps the rhythm close enough
   that nothing reads as broken. */
@supports not selector(:has(*)){
  @media (max-width:1024px){
    section,.section-white,.section-black,.section-cream{padding:58px 0;}
  }
}

/* Emphasis inside the Meet Gerry copy. Colour shift plus weight, so the
   bold phrases read as deliberate rather than as shouting. */
.meet-txt p strong,.meet-txt p b{font-weight:500;color:var(--soft-black);}

/* ---------- FRAMEWORK SECTION PADDING ----------
   These were inline styles on the section, which no stylesheet can override.
   Now classed, so the responsive rhythm applies like everywhere else. */
.fw-section{padding-top:130px;padding-bottom:0;}
.fw-panels-wrap{padding-bottom:150px;}

/* =====================================================================
   FINAL RHYTHM PASS
   Measured gap between the last piece of content in one section and the
   first in the next. Target: ~78px on mobile, ~96px on tablet. Enough of
   a pause to separate ideas, not enough to read as a void.
   ===================================================================== */
@media (max-width:1024px){
  .fw-section{padding-top:72px;}
  .fw-panels-wrap{padding-bottom:64px;}
  .section-black.stats{padding:64px 0;}
}

@media (max-width:767px){
  /* Value prop -> stats: was 124px. */
  .section-white.value{padding-bottom:40px;}
  .section-black.stats{padding:44px 0;}

  /* Stats -> testimonials: was 130px. */
  .section-white#testiSec,
  .stats + .section-white{padding-top:44px;}
  .testi-head{margin-bottom:30px;}

  /* Logos -> The Framework: was 182px, most of it the old inline 130px. */
  .logos{padding-bottom:40px;}
  .fw-section{padding-top:44px;}

  /* Last panel -> "hardest working": was 147px. */
  .fw-panels-wrap{padding-bottom:38px;}
  .section-white:has(.bottleneck){padding-top:44px;}

  /* Last card -> Gerry photo: was 108px. */
  .section-white:has(.cards){padding-bottom:38px;}
  .section-white:has(.meet){padding-top:40px;}

  /* "Meet Gerry" button -> closing CTA: was 116px. */
  .section-white:has(.meet){padding-bottom:44px;}
  .section-black.callcta{padding-top:48px;padding-bottom:48px;}

  /* "Book a call" -> 12 weeks: was 117px. */
  .section-black:has(.prog){padding-top:44px;padding-bottom:44px;}

  /* Programme cover -> book: was 108px. */
  .section-white:has(.book){padding-top:40px;padding-bottom:44px;}

  /* Book -> footer: was 80px. */
  .site-footer{padding-top:48px;}
}

/* :has() fallback, so older Safari still gets a sane rhythm. */
@supports not selector(:has(*)){
  @media (max-width:767px){
    section,.section-white,.section-black,.section-cream{padding:44px 0;}
    .fw-section{padding-top:44px;padding-bottom:0;}
    .fw-panels-wrap{padding-bottom:38px;}
  }
}

/* ---------- TABLET RHYTHM ----------
   Same treatment as mobile, scaled up. Target ~96px between sections. */
@media (min-width:768px) and (max-width:1024px){
  .section-white.value{padding-bottom:52px;}
  .section-black.stats{padding:56px 0;}
  .stats + .section-white{padding-top:56px;}
  .logos{padding-top:0;padding-bottom:52px;}
  .fw-section{padding-top:56px;}
  .fw-panels-wrap{padding-bottom:52px;}
  .section-white:has(.bottleneck){padding-top:56px;}
  .section-white:has(.cards){padding-bottom:50px;}
  .section-white:has(.meet){padding-top:52px;padding-bottom:56px;}
  .section-black.callcta{padding-top:60px;padding-bottom:60px;}
  .section-black:has(.prog){padding-top:56px;padding-bottom:56px;}
  .section-white:has(.book){padding-top:52px;padding-bottom:56px;}
  .site-footer{padding-top:60px;}
}

/* Two outliers from the measured pass: the logos rail and the framework
   panels were each adding their own margin on top of section padding. */
@media (max-width:767px){
  .logos-rail{margin-top:18px;}
  .logos{padding-bottom:30px;}
  .fw-section{padding-top:38px;}
}
@media (min-width:768px) and (max-width:1024px){
  .logos-rail{margin-top:24px;}
  .logos{padding-bottom:42px;}
  .fw-section{padding-top:46px;}
  .fw-panels-wrap{padding-bottom:40px;}
  .section-white:has(.bottleneck){padding-top:50px;}
}

/* =====================================================================
   DESKTOP RHYTHM PASS  (>= 1025px)
   The mobile and tablet work was scoped inside max-width media queries,
   so desktop was left on the original 140px + 140px stacking, giving
   260-370px voids between sections. Same treatment, scaled up.

   Target ~150px between sections. Spacing does not scale linearly with
   viewport width: matching mobile's ratio would put desktop at 310px,
   which is exactly the problem being fixed here.
   ===================================================================== */
@media (min-width:1025px){

  section,.section-white,.section-black,.section-cream{padding:78px 0;}

  /* Value prop -> stats. */
  .section-white.value{padding-bottom:72px;}
  .section-black.stats{padding:80px 0;}

  /* Stats -> testimonials. */
  .stats + .section-white{padding-top:76px;}
  .testi-head{margin-bottom:58px;}
  .progress{margin-top:52px;}

  /* Testimonials -> logos -> framework. The logos band sits directly
     under the testimonials, so it carries no top padding of its own. */
  .logos{padding-top:0;padding-bottom:72px;}
  .logos p{margin-bottom:52px;}
  .logos-rail{margin-top:34px;}

  /* Framework: these were inline styles on the section until this pass,
     which is why no stylesheet could touch them. */
  .fw-section{padding-top:78px;}
  .fw-panels-wrap{padding-bottom:76px;}
  .fw-head{margin-bottom:0;padding-top:0;}

  /* Framework -> services. */
  .section-white:has(.bottleneck){padding-top:78px;}
  .bottleneck{margin-bottom:34px;}
  .bottleneck .big{margin-bottom:56px;}
  .pains{margin-bottom:82px;}
  .svc-head{margin-bottom:58px;}

  /* Services -> Meet Gerry. */
  .section-white:has(.cards){padding-bottom:74px;}
  .section-white:has(.meet){padding-top:76px;padding-bottom:78px;}

  /* Closing CTA bands. */
  .section-black.callcta{padding-top:84px;padding-bottom:84px;}
  .section-black:has(.prog){padding-top:78px;padding-bottom:78px;}

  /* Book -> footer. */
  .section-white:has(.book){padding-top:74px;padding-bottom:78px;}
  .site-footer{padding-top:80px;}

  /* Service, local and standalone page templates get the same rhythm,
     so an interior page never reads looser than the homepage. */
  .svc-hero{padding:180px 0 96px;}
  .svc-sec-head{margin-bottom:58px;}
  .book-hero{padding:170px 0 92px;}
}

/* :has() fallback for older Safari. Keeps desktop close enough that
   nothing reads as broken, without the per-section tuning. */
@supports not selector(:has(*)){
  @media (min-width:1025px){
    section,.section-white,.section-black,.section-cream{padding:78px 0;}
    .fw-section{padding-top:78px;padding-bottom:0;}
    .fw-panels-wrap{padding-bottom:76px;}
  }
}

/* =====================================================================
   RHYTHM CORRECTIONS
   Two faults found by measuring the rendered page rather than reading
   the stylesheet.
   ===================================================================== */

/* 1. The framework section carries padding-bottom:0 on purpose, because
      .fw-panels-wrap supplies that spacing. The generic
      `section,.section-white,.section-black` rules are declared later in
      this file and were re-adding a full section's worth on top, so the
      gap ran to 260px on desktop. Compound selector so it wins wherever
      it sits in the cascade. */
.section-black.fw-section{padding-bottom:0;}

/* 2. .meet centres a 4:5 portrait against a taller text column, which
      leaves ~90px of empty white above the photograph and reads as a
      void rather than as alignment. Top-aligning the columns removes it
      without changing the design anywhere the image is the taller
      element (.prog and .book keep their centring). */
@media (min-width:1025px){
  .meet{align-items:start;}
  .fw-panels-wrap{padding-bottom:58px;}
  .section-white:has(.bottleneck){padding-top:70px;}
  .section-white:has(.book){padding-bottom:70px;}
  .site-footer{padding-top:72px;}
}

/* Logos band -> The Framework was still 185px: the band's own padding,
   the rail margin, and the framework's top padding stacking up. */
@media (min-width:1025px){
  .logos{padding-bottom:56px;}
  .logos-rail{margin-top:28px;}
  .fw-section{padding-top:66px;}
}

/* =====================================================================
   MOBILE PASS 2
   ===================================================================== */

/* ---------- FRAMEWORK TILE LABELS ----------
   The label was clamp(22px,3vw,38px). At 390px the 3vw term collapses to
   11px so the 22px floor won. A tile is only (min(560px,80vw)/2 - 9px)
   = 147px wide there, and "4. Processes" at 22px needs about 178px, so
   the longest two labels ran straight out of their squares.

   Sizing now tracks the quadbox rather than sitting on a fixed floor, and
   nowrap plus inner padding guarantees the text can never touch an edge. */
.qtile{padding:0 10px;text-align:center;}
.qtile .lbl{
  font-size:clamp(14px,5.4vw,38px);
  white-space:nowrap;
  display:inline-flex;align-items:baseline;justify-content:center;
  max-width:100%;
}
.qtile .lbl .n{margin-right:8px;flex:none;}
.fw-static-tile .lbl{white-space:nowrap;}

@media (min-width:768px){
  /* Above 700px the quadbox is capped at 560px, so the label stops
     scaling with the viewport and takes a fixed size instead. */
  .qtile .lbl{font-size:34px;}
  .qtile .lbl .n{margin-right:10px;}
}
@media (min-width:768px) and (max-width:1024px){
  .qtile .lbl{font-size:30px;}
}

@media (max-width:767px){

  /* ---------- TYPE SCALE ---------- */
  /* Hero: 37px -> 30px (-20%) */
  .hero h1{font-size:30px;line-height:1.1;margin-bottom:22px;}
  /* Value h2: 38px -> 30px (-20%) */
  .value h2{font-size:30px;line-height:1.12;margin-bottom:26px;}
  /* Value h3: 27px -> 23px (-15%) */
  .value h3{font-size:23px;line-height:1.26;margin-bottom:24px;}
  /* Value h4: 23px -> 21px (-10%) */
  .value h4{font-size:21px;line-height:1.4;}

  /* ---------- HERO CROP ----------
     The subject's face sits at roughly 49% across and 26% down in the
     source photograph. "center right" put the crop on the far right edge,
     which on a portrait viewport showed the back of the second figure
     instead of the speaker. */
  .hero-img{background-position:55% 22%;}

  /* ---------- LOGOS BAND ----------
     The band's top border was landing directly on the heading. */
  .logos{padding-top:30px;}
  .logos p{margin-bottom:24px;}

  /* ---------- FRAMEWORK STAGE ----------
     A full 100vh sticky stage around a 312px quadbox left roughly 200px
     of empty black above and below it. Shorter stage, larger quadbox. */
  .fw-stage{height:74svh;min-height:400px;}
  .quadbox{width:min(560px,88vw);height:min(560px,88vw);}
  .fw-head p{margin-top:14px;}
}

/* ---------- LOGOS BAND, SPECIFICITY FIX ----------
   `.section-white + .logos.section-white{padding-top:0}` (two classes plus
   a sibling combinator) was outranking the plain `.logos{padding-top:30px}`
   added above, so the band's top border kept landing on the heading.
   Matching specificity, declared later. */
@media (max-width:767px){
  .section-white + .logos.section-white{padding-top:28px;}
}
@media (min-width:768px) and (max-width:1024px){
  .section-white + .logos.section-white{padding-top:32px;}
}
@media (min-width:1025px){
  .section-white + .logos.section-white{padding-top:38px;}
}

/* ---------- FRAMEWORK STAGE, TIGHTER ----------
   A 74svh stage around a 343px quadbox still left 141px of empty black
   top and bottom. Shorter stage and a larger quadbox close that to about
   70px a side, so the tiles fill the frame instead of floating in it. */
@media (max-width:767px){
  .fw-stage{height:62svh;min-height:376px;}
  .quadbox{width:min(560px,90vw);height:min(560px,90vw);}
}
@media (min-width:768px) and (max-width:1024px){
  .fw-stage{height:78svh;min-height:520px;}
  .quadbox{width:min(560px,66vw);height:min(560px,66vw);}
}

/* =====================================================================
   FINAL PASS
   ===================================================================== */

/* ---------- MEET GERRY: uniform body colour ----------
   The copy was mixing a grey paragraph colour with black <strong> spans,
   so it read as three different greys down the column. Everything in this
   block is now one weight and one colour; the emphasis tags stay in the
   markup so they can be re-enabled later without rewriting the content. */
.meet-txt p,
.meet-txt p strong,
.meet-txt p b{
  color:var(--soft-black);
  font-weight:400;
}

@media (max-width:767px){

  /* ---------- LOGOS BAND: 50px clear above and below ---------- */
  .section-white + .logos.section-white{padding-top:50px;padding-bottom:50px;}
  .logos-rail{margin-top:22px;}

  /* ---------- FRAMEWORK STAGE: back to a full-height stage ----------
     62svh pushed the quad up against the fixed header and left the tiles
     sitting high in the frame. A full-height stage centres them again.
     The padding-top matches the header, because the stage is pinned to
     the top of the viewport and the header sits over it: without this the
     "centre" is the centre of the whole viewport, not of what you can
     actually see. */
  .fw-stage{height:100svh;min-height:520px;padding-top:54px;}
  .quadbox{width:min(560px,86vw);height:min(560px,86vw);}
}

/* ---------- DESKTOP AND TABLET ---------- */
@media (min-width:768px){

  /* Value prop headline down 20%.
     Was clamp(48px,6.4vw,94px) -> now clamp(38px,5.1vw,75px). */
  .value h2{font-size:clamp(38px,5.1vw,75px);}

  /* Hero CTA: 17px was undersized against a 100px headline. */
  .hero .btn-white{font-size:20px;padding:21px 50px;}
}

@media (min-width:1025px){
  /* Header was 76px and clipping the top of the subject's head in the
     hero. 62px keeps the logo and menu comfortable and gives the
     photograph back its hairline. */
  .nav-inner{height:62px;}
  .nav-links a{padding:21px 0;}
  .nav-cta{padding:10px 24px!important;font-size:14px;}
  .logo{font-size:18px;}
  .dropdown{left:-20px;}
}

@media (min-width:768px) and (max-width:1024px){
  .nav-inner{height:56px;}
  .nav-mobile{top:56px;}
  .hero .btn-white{font-size:18px;padding:19px 44px;}
}

/* Hero headline up 15% on mobile: 30px -> 34.5px. */
@media (max-width:767px){
  .hero h1{font-size:34.5px;line-height:1.08;}
}

/* "That is what Gerry does" is the payoff line of the section, so it
   carries more weight than the paragraphs above it.
   Tablet 24px -> 26.4px (+10%). Desktop 24px -> 28.8px (+20%). */
@media (min-width:768px) and (max-width:1024px){
  .meet-txt p.last{font-size:26.4px;line-height:1.3;}
}
@media (min-width:1025px){
  .meet-txt p.last{font-size:28.8px;line-height:1.28;}
}

/* =====================================================================
   FRAMEWORK: PROPORTIONAL GEOMETRY
   The tile gap, corner radius, inner padding and ball diameter were all
   fixed pixel values inside a quadbox that changes size with the
   viewport. At 560px they gave a 3.2% gap, a 9.3% radius and a ball at
   26.7% of the box. At 335px the same pixels became a 5.4% gap, a 15.5%
   radius and a ball at 40.6%, so the composition read differently on a
   phone even though nothing had "broken".

   Everything below is now a percentage of the quadbox, locked to the
   desktop ratios, so every screen renders the same composition at a
   different scale. Do not reintroduce px here.
   ===================================================================== */

/* Gap: 2 x 1.6% = 3.2% of the quadbox, matching desktop exactly. */
.qtile{
  width:calc(50% - 1.6%);
  height:calc(50% - 1.6%);
  border-radius:9.5%;
  padding:0 3.6%;
}

/* Ball: sized at its FINAL diameter, 26.7% of the quadbox, and scaled
   DOWN at the start of the animation rather than up at the end.

   Scaling a 21px element up by 4.4 means the browser rasterises the circle
   at 21px and stretches the bitmap, so the edge goes soft and its apparent
   centre can drift by a pixel or two. Small on a 560px desktop box, very
   visible on a 351px phone, which is why the circle looked off-centre
   there and crisp on desktop. Rasterising at full size fixes both. */
.ball{
  width:26.7%;
  height:26.7%;
  margin-left:-13.35%;
  margin-top:-13.35%;
}

/* Static (reduced-motion) grid follows the same ratios. */
.fw-static-grid{gap:3.2%;}
.fw-static-tile{border-radius:9.5%;}

/* =====================================================================
   LEAD CAPTURE — CORNER BUTTON
   A 56px gold disc anchored bottom-right. It occupies no layout space,
   never covers content, and stays put when the panel is closed. The
   earlier full-width bar was black-on-black and disappeared into the
   design; gold on a dark site is the one colour that cannot be missed.
   ===================================================================== */

.sme-lead{position:fixed;right:24px;bottom:24px;z-index:130;}
.sme-lead[hidden]{display:none;}

/* ---- The button ---- */
.sme-lead-fab{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(145deg,var(--gold-hover),var(--gold) 55%,#a8873a);
  color:var(--black);
  box-shadow:0 8px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.14) inset;
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s;
}
.sme-lead-fab:hover{transform:scale(1.07);box-shadow:0 12px 34px rgba(201,168,76,.4);}
.sme-lead-fab:active{transform:scale(.97);}
.sme-lead-glyph{width:24px;height:24px;display:block;position:relative;z-index:2;}
.sme-lead-glyph svg{width:100%;height:100%;display:block;}

/* Pulse: a gold ring expanding outward. Runs three times, then stops, so
   it reads as a prompt rather than a permanently blinking distraction. */
.sme-lead-ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--gold);opacity:0;pointer-events:none;
}
.sme-lead.is-pulsing .sme-lead-ring{animation:smeLeadPulse 2.1s ease-out 3;}
@keyframes smeLeadPulse{
  0%{transform:scale(1);opacity:.65;}
  70%{transform:scale(1.85);opacity:0;}
  100%{transform:scale(1.85);opacity:0;}
}

/* ---- Teaser bubble ---- */
.sme-lead-nudge{
  position:absolute;right:70px;bottom:6px;
  width:max-content;max-width:min(300px,calc(100vw - 116px));
  background:var(--black);color:#fff;
  border:1px solid rgba(201,168,76,.4);border-radius:14px;
  padding:14px 40px 14px 18px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  opacity:0;transform:translateX(10px);pointer-events:none;
  transition:opacity .34s ease,transform .34s cubic-bezier(.22,1,.36,1);
}
.sme-lead-nudge[hidden]{display:none;}
.sme-lead.is-nudging .sme-lead-nudge{opacity:1;transform:translateX(0);pointer-events:auto;}
.sme-lead-nudge-eyebrow{
  display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:5px;
}
.sme-lead-nudge-text{
  display:block;font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:15px;line-height:1.32;letter-spacing:-.01em;
}
.sme-lead-nudge-close{
  position:absolute;top:5px;right:5px;width:30px;height:30px;
  background:none;border:0;color:rgba(255,255,255,.4);
  font-size:17px;line-height:1;cursor:pointer;
}
.sme-lead-nudge-close:hover{color:#fff;}

/* ---- The panel ---- */
/* White panel. A dark form floating over a mostly-white page read as an
   overlay rather than as part of the site, and dark input fields are
   measurably harder to fill in. */
.sme-lead-panel{
  position:absolute;right:0;bottom:70px;
  width:min(392px,calc(100vw - 40px));
  max-height:min(74vh,640px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--white);
  border:1px solid var(--line);border-radius:20px;
  padding:30px 26px 26px;
  box-shadow:0 26px 70px rgba(0,0,0,.22);
  transform-origin:bottom right;
}
.sme-lead-panel[hidden]{display:none;}
.sme-lead-panel:focus{outline:none;}
.sme-lead.is-open .sme-lead-panel{animation:smeLeadIn .34s cubic-bezier(.22,1,.36,1);}
@keyframes smeLeadIn{from{opacity:0;transform:scale(.94) translateY(10px);}to{opacity:1;transform:none;}}

.sme-lead-close{
  position:absolute;top:12px;right:12px;width:36px;height:36px;
  background:none;border:0;color:var(--grey);
  font-size:24px;line-height:1;cursor:pointer;
}
.sme-lead-close:hover{color:var(--soft-black);}

.sme-lead-tag{
  display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#8a6f23;border:1px solid rgba(201,168,76,.6);background:rgba(201,168,76,.09);
  border-radius:100px;padding:4px 11px;margin-bottom:14px;
}
.sme-lead-copy h2{
  font-family:"NHG Display",sans-serif;font-weight:500;color:var(--soft-black);
  font-size:23px;line-height:1.14;letter-spacing:-.02em;margin-bottom:11px;
}
.sme-lead-copy p{font-size:14.5px;line-height:1.55;color:#4a4a4a;}
.sme-lead-proof{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  font-size:13px;color:var(--grey);
}
.sme-lead-copy{margin-bottom:20px;}

/* Form fields, scoped to the panel. */
.sme-lead-panel .lead-field{margin-bottom:13px;}
.sme-lead-panel .lead-field label{
  display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:#8a6f23;margin-bottom:7px;
}
.sme-lead-panel .lead-field input{
  width:100%;padding:13px 16px;border-radius:11px;
  background:var(--cream);border:1px solid var(--line);
  color:var(--soft-black);font-family:"NHG Text",sans-serif;font-size:16px;
  transition:border-color .2s,background .2s;
}
.sme-lead-panel .lead-field input::placeholder{color:#a8a8a8;}
.sme-lead-panel .lead-field input:focus{outline:none;border-color:var(--gold);background:var(--white);}
.sme-lead-panel .lead-field input[aria-invalid="true"]{border-color:#e2705f;}

.lead-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.sme-lead-panel .lead-consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px;cursor:pointer;}
.sme-lead-panel .lead-consent input{margin-top:2px;width:16px;height:16px;accent-color:var(--gold);flex:none;}
.sme-lead-panel .lead-consent span{font-size:12.5px;line-height:1.45;color:#5a5a5a;}

.sme-lead-panel .lead-submit{
  width:100%;background:var(--soft-black);color:var(--white);border:0;
  padding:15px 24px;border-radius:100px;cursor:pointer;
  font-family:"NHG Display",sans-serif;font-weight:500;font-size:16px;
  transition:background .2s,transform .2s;
}
.sme-lead-panel .lead-submit:hover{background:var(--gold);color:var(--black);transform:translateY(-1px);}
.sme-lead-panel .lead-submit[disabled]{opacity:.55;cursor:default;transform:none;}

/* Darker than --grey: at 11.5px this sat at 3.45:1 on white, under
   the 4.5:1 minimum. Small text needs more contrast, not less. */
.sme-lead-panel .lead-smallprint{margin-top:12px;font-size:12px;line-height:1.5;color:#666;}
.sme-lead-panel .lead-smallprint a{color:#4a4a4a;text-decoration:underline;text-underline-offset:3px;}
.lead-message{margin-top:11px;font-size:13.5px;line-height:1.45;}
.lead-message.is-error{color:#c0392b;}
.lead-message.is-ok{color:#8a6f23;}

.lead-done{padding:4px 0;}
.lead-done h3{
  font-family:"NHG Display",sans-serif;font-weight:500;color:var(--soft-black);
  font-size:21px;letter-spacing:-.02em;line-height:1.16;margin-bottom:10px;
}
.lead-done p{font-size:14.5px;line-height:1.55;color:#4a4a4a;}

@media (max-width:767px){
  .sme-lead{right:16px;bottom:16px;}
  .sme-lead-fab{width:52px;height:52px;}
  .sme-lead-glyph{width:22px;height:22px;}
  .sme-lead-nudge{right:62px;max-width:calc(100vw - 100px);padding:12px 34px 12px 14px;}
  .sme-lead-nudge-text{font-size:14px;}
  .sme-lead-panel{
    right:-4px;bottom:64px;
    width:calc(100vw - 24px);max-height:76svh;padding:26px 20px 22px;
  }
  .sme-lead-copy h2{font-size:21px;}
}

@media (prefers-reduced-motion: reduce){
  .sme-lead.is-pulsing .sme-lead-ring{animation:none;}
  .sme-lead.is-open .sme-lead-panel{animation:none;}
}

/* =====================================================================
   SERVICE PAGES — VIDEO, RESULTS, TESTIMONIAL WALL, PRICING
   ===================================================================== */

/* ---------- VIDEO ---------- */
.svc-video-frame{
  position:relative;max-width:960px;margin:0 auto;
  aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  background:#111 center/cover no-repeat;
  border:1px solid var(--line-dark);
  cursor:pointer;
}
/* Dim over the poster, lifted while the preview plays so the footage
   reads clearly. */
.svc-video-frame::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.12));
  transition:background .35s;
}
.svc-video-frame.is-previewing::after{background:linear-gradient(0deg,rgba(0,0,0,.32),rgba(0,0,0,0));}
.svc-video-frame.is-playing::after{display:none;}

.svc-video-frame iframe,
.svc-video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;}
.svc-video-frame video{object-fit:cover;}
.svc-video-frame video.svc-video-main{object-fit:contain;z-index:4;}

/* The muted preview sits under the pill and fades in on hover. */
.svc-video-preview{
  z-index:1;opacity:0;transition:opacity .45s ease;pointer-events:none;
}
.svc-video-frame.is-previewing .svc-video-preview{opacity:1;}
.svc-video-frame.is-playing .svc-video-preview{opacity:1;pointer-events:auto;}

/* Quiet grey pill rather than a large gold disc: the video should invite,
   not demand. It brightens on hover, which is the only cue needed once the
   footage behind it has already started moving. */
.svc-video-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3;display:inline-flex;align-items:center;gap:12px;
  padding:15px 30px 15px 24px;border:0;border-radius:100px;cursor:pointer;
  background:rgba(238,238,238,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--soft-black);
  font-family:"NHG Display",sans-serif;font-weight:500;font-size:17px;letter-spacing:-.01em;
  transition:background .25s,transform .25s cubic-bezier(.22,1,.36,1);
}
.svc-video-frame:hover .svc-video-play{background:rgba(255,255,255,.94);transform:translate(-50%,-50%) scale(1.04);}
.svc-video-play:active{transform:translate(-50%,-50%) scale(.98);}
.svc-video-icon{
  width:0;height:0;flex:none;
  border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--soft-black);
}

/* ---------- RESULTS ---------- */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1060px;margin:0 auto;}
.res-grid.res-2{grid-template-columns:repeat(2,1fr);max-width:760px;}
.res-grid.res-4{grid-template-columns:repeat(4,1fr);}
.res-card{text-align:center;padding:0 14px;}
.res-num{
  font-family:"NHG Display",sans-serif;font-weight:400;
  font-size:clamp(52px,6vw,88px);line-height:1;letter-spacing:-.04em;color:#fff;
  margin-bottom:22px;
}
.res-num em{color:var(--gold);font-style:normal;}
.res-card p{font-size:clamp(16px,1.4vw,18px);line-height:1.55;color:rgba(255,255,255,.62);max-width:30ch;margin:0 auto;}

/* ---------- TESTIMONIAL WALL ---------- */
.svc-wall{overflow:hidden;}
.wall-head{margin-bottom:56px;}
.wall-head p{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:#4a4a4a;max-width:60ch;margin:22px auto 0;}

.wall-viewport{
  position:relative;width:100%;overflow:hidden;
  /* Fade the edges so cards enter and leave rather than being cut off. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.wall-track{
  display:flex;gap:26px;width:max-content;
  animation:wallScroll 68s linear infinite;
  will-change:transform;
}
/* The set is rendered twice and the track travels exactly half its own
   width, so the second copy lands where the first began and the loop has
   no visible seam. */
@keyframes wallScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.wall-viewport:hover .wall-track,
.wall-viewport:focus-within .wall-track,
.wall-viewport.is-held .wall-track,
.wall-viewport.is-offscreen .wall-track{animation-play-state:paused;}

.wall-card{
  flex:none;width:min(420px,84vw);
  background:var(--white);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 12px 34px rgba(0,0,0,.06);
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.wall-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.1);}

/* The photograph IS the card. 7:5 landscape, full bleed, no crop into a
   circle: the point of this section is faces at a size you actually read
   as a person rather than as stock decoration. */
.wall-photo-wrap{position:relative;aspect-ratio:7/5;background:#e9e6df;overflow:hidden;}
.wall-photo{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;}
.wall-photo-fallback{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-hover));
  color:var(--black);font-family:"NHG Display",sans-serif;font-size:64px;
}

.wall-bubble{
  position:relative;margin:-26px 18px 18px;
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px 24px;flex:1;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.wall-who{display:flex;flex-direction:column;gap:3px;margin-bottom:14px;}
.wall-name{font-family:"NHG Display",sans-serif;font-weight:500;font-size:19px;color:var(--black);letter-spacing:-.015em;}
.wall-company{font-size:14px;color:var(--grey);line-height:1.35;}
.wall-quote p{font-size:16px;line-height:1.6;color:var(--soft-black);}

@media (prefers-reduced-motion: reduce){
  .wall-track{animation:none;}
  .wall-viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
}

/* ---------- PRICING ---------- */
/* White pricing section: at the point of asking for four figures, a soft
   light panel reads as safe and considered where black reads as pressure. */
.svc-pricing{background:var(--cream);}
.svc-pricing .svc-sec-head h2{color:var(--soft-black);}
.svc-pricing .svc-sec-head h2 em{color:var(--gold);font-style:normal;}
.svc-pricing .svc-sec-head p{color:#4a4a4a;}
.price-card{
  max-width:720px;margin:0 auto;
  background:var(--white);
  border:1px solid var(--line);border-radius:26px;
  padding:52px 54px 46px;
  box-shadow:0 22px 60px rgba(0,0,0,.07);
}
.price-head{text-align:center;padding-bottom:34px;border-bottom:1px solid var(--line);margin-bottom:34px;}
.price-head h3{
  font-family:"NHG Display",sans-serif;font-weight:500;color:var(--soft-black);
  font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;line-height:1.14;margin-bottom:20px;
}
.price-figure{display:flex;align-items:baseline;justify-content:center;gap:18px;flex-wrap:wrap;}
.price-was{
  font-family:"NHG Display",sans-serif;font-size:clamp(24px,2.4vw,34px);
  color:var(--grey);text-decoration:line-through;letter-spacing:-.02em;
}
.price-now{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(48px,6vw,84px);line-height:1;letter-spacing:-.04em;color:var(--soft-black);
}
.price-note{margin-top:18px;font-size:15px;color:var(--grey);line-height:1.55;}

.price-list{list-style:none;margin-bottom:38px;}
.price-list li{
  display:flex;align-items:flex-start;gap:15px;
  padding:13px 0;font-size:clamp(16px,1.4vw,18px);line-height:1.5;color:#2e2e2e;
}
.price-tick{
  flex:none;width:21px;height:21px;border-radius:50%;margin-top:2px;
  background:rgba(201,168,76,.16);border:1px solid rgba(201,168,76,.5);
  position:relative;
}
.price-tick::after{
  content:"";position:absolute;left:6px;top:4px;width:6px;height:10px;
  border:solid var(--gold);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.price-buy{
  display:block;width:100%;text-align:center;
  background:var(--soft-black);color:var(--white);
  padding:21px 34px;border-radius:100px;font-size:18px;
  transition:background .2s,transform .2s;
}
.price-buy:hover{background:var(--gold);color:var(--black);transform:translateY(-2px);}
.price-soldout{margin-top:16px;text-align:center;font-size:15px;color:var(--grey);line-height:1.55;}

.price-alt{max-width:720px;margin:38px auto 0;text-align:center;}
.price-alt h3{
  font-family:"NHG Display",sans-serif;font-weight:500;color:var(--soft-black);
  font-size:clamp(21px,2vw,27px);letter-spacing:-.02em;margin-bottom:12px;
}
.price-alt p{font-size:16px;line-height:1.6;color:#4a4a4a;max-width:52ch;margin:0 auto 26px;}
.price-alt-actions{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;}
.price-email{color:#4a4a4a;font-size:16px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(201,168,76,.5);}
.price-email:hover{color:var(--soft-black);}

@media (max-width:1024px){
  .res-grid,.res-grid.res-4{grid-template-columns:repeat(2,1fr);gap:40px 24px;}
  .price-card{padding:42px 34px 38px;}
}

@media (max-width:767px){
  .svc-video-play{font-size:15px;gap:10px;padding:13px 24px 13px 20px;}
  .svc-video-icon{border-width:7px 0 7px 11px;}
  .svc-video-frame{border-radius:14px;}

  .res-grid,.res-grid.res-2,.res-grid.res-4{grid-template-columns:1fr;gap:38px;}
  .res-num{font-size:52px;margin-bottom:14px;}
  .res-card p{font-size:16px;}

  .wall-head{margin-bottom:34px;}
  /* Superseded by the portrait-led card below. The padding here was
     insetting the full-bleed photograph by 22px a side on phones. */
  .wall-card{width:min(320px,84vw);padding:0;}
  .wall-track{gap:16px;animation-duration:52s;}
  .wall-quote p{font-size:15px;}
  /* Removed: a leftover 50px rule from the original avatar design was
     shrinking the full-bleed portrait to a thumbnail on phones. */

  .price-card{padding:32px 22px 30px;border-radius:20px;}
  .price-head{padding-bottom:26px;margin-bottom:26px;}
  .price-figure{gap:12px;}
  .price-now{font-size:46px;}
  .price-list{margin-bottom:28px;}
  .price-list li{padding:11px 0;font-size:16px;}
  .price-buy{padding:18px 26px;font-size:17px;}
  .price-alt-actions{flex-direction:column;gap:18px;}
}

/* Second buy point, under the "what you get" list. */
.inc-buy{max-width:420px;margin:44px auto 0;}
.inc-buy .price-buy{background:var(--gold);color:var(--black);}
.inc-buy .price-buy:hover{background:var(--gold-hover);}

@media (max-width:767px){
  .wall-card{width:min(320px,84vw);}
  .wall-bubble{margin:-22px 14px 14px;padding:18px 18px 20px;}
  .wall-name{font-size:17px;}
  .wall-quote p{font-size:15px;}
  .inc-buy{margin-top:32px;}
}

/* =====================================================================
   WOOCOMMERCE — CART, CHECKOUT, ORDER RECEIVED
   WooCommerce's own stylesheets are dequeued, so everything the customer
   sees from basket to confirmation is styled here.
   ===================================================================== */

.wc-page{padding-top:150px;}
.wc-page .container{max-width:1240px;}

/* Checkout is single-purpose: the nav is a row of ways to leave without
   paying. The logo stays so people know whose checkout they are on. */
body.sme-checkout .nav-links,
body.sme-checkout .nav-mobile,
body.sme-checkout .nav-toggle,
body.sme-checkout .nav-login,
body.sme-checkout .nav-right .nav-cta,
body.sme-checkout .sme-lead{display:none;}
body.sme-checkout .site-footer .foot-grid{display:none;}
body.sme-checkout .site-footer{padding-top:34px;}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error{
  list-style:none;background:var(--cream);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:12px;
  padding:16px 20px;margin-bottom:24px;font-size:16px;line-height:1.55;
}
.woocommerce-notices-wrapper .woocommerce-error{border-left-color:#c0392b;}

/* ---- Two columns: form left, order summary right ---- */
.woocommerce-checkout form.checkout{
  display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:start;
}
.woocommerce-checkout #customer_details{min-width:0;}
.woocommerce-checkout h3,
.wc-col-title{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(24px,2.4vw,32px);letter-spacing:-.025em;line-height:1.14;
  color:var(--soft-black);margin-bottom:24px;
}
.woocommerce-checkout h3#order_review_heading{display:none;}

/* Sticky summary: at four figures people scroll back up to re-check the
   number, and a summary that stays put removes that trip entirely. */
.woocommerce-checkout #order_review,
.woocommerce-checkout .wc-col-title{position:sticky;top:96px;}
.woocommerce-checkout #order_review{
  background:var(--cream);border:1px solid var(--line);border-radius:20px;
  padding:32px 30px;
}

/* ---- Fields ---- */
.woocommerce form .form-row{display:flex;flex-direction:column;margin-bottom:18px;}
.woocommerce form .form-row label{
  font-size:14px;letter-spacing:.02em;color:#3a3a3a;margin-bottom:8px;font-weight:400;
}
.woocommerce form .form-row .required{color:var(--gold);text-decoration:none;}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  width:100%;padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  font-family:"NHG Text",sans-serif;font-size:16px;color:var(--soft-black);
  background:var(--white);height:auto;line-height:1.4;
}
.woocommerce form .form-row textarea{min-height:120px;resize:vertical;}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{outline:none;border-color:var(--gold);}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered{padding:0;line-height:1.4;color:var(--soft-black);}
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow{top:16px;right:12px;}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last{width:calc(50% - 9px);display:inline-flex;vertical-align:top;}
.woocommerce form .form-row-first{margin-right:18px;}

/* ---- Order table ---- */
.woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse;margin-bottom:22px;}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{
  padding:14px 0;text-align:left;font-size:16px;line-height:1.5;
  border-bottom:1px solid var(--line);
}
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child{text-align:right;white-space:nowrap;}
.woocommerce-checkout-review-order-table thead th{
  font-family:"NHG Text",sans-serif;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);padding-bottom:10px;
}
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td{
  border-bottom:0;padding-top:20px;
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;color:var(--soft-black);
}
.woocommerce-checkout-review-order-table .product-name{color:var(--soft-black);}

/* ---- Payment ---- */
.woocommerce-checkout #payment{background:none;border-radius:0;}
.woocommerce-checkout #payment ul.payment_methods{
  list-style:none;padding:0;margin:0 0 20px;border-bottom:1px solid var(--line);padding-bottom:18px;
}
.woocommerce-checkout #payment ul.payment_methods li{margin-bottom:12px;font-size:16px;}
.woocommerce-checkout #payment ul.payment_methods li label{display:inline;color:var(--soft-black);}
.woocommerce-checkout #payment div.payment_box{
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin-top:12px;font-size:15px;line-height:1.55;color:#4a4a4a;
}
.woocommerce-checkout #payment div.payment_box::before{display:none;}

.woocommerce #payment #place_order,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background:var(--soft-black);color:var(--white);border:0;
  font-family:"NHG Display",sans-serif;font-weight:500;font-size:17px;
  padding:19px 34px;border-radius:100px;cursor:pointer;width:100%;
  transition:background .2s,transform .2s,color .2s;
}
.woocommerce #payment #place_order:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{background:var(--gold);color:var(--black);transform:translateY(-2px);}
.woocommerce a.button{display:inline-block;width:auto;text-decoration:none;text-align:center;}

.wc-trust{list-style:none;margin:22px 0 0;padding:0;}
.wc-trust li{
  position:relative;padding-left:26px;margin-bottom:11px;
  font-size:14px;line-height:1.55;color:#5a5a5a;
}
.wc-trust li::before{
  content:"";position:absolute;left:0;top:6px;width:13px;height:13px;
  border-radius:50%;background:rgba(201,168,76,.18);border:1px solid rgba(201,168,76,.55);
}
.wc-trust a{color:var(--soft-black);text-decoration:underline;text-underline-offset:3px;}

/* ---- Coupon ---- */
.woocommerce-form-coupon-toggle .woocommerce-info{font-size:15px;}
.woocommerce form.checkout_coupon{
  border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:26px;
}

/* ---- Cart and order received ---- */
.wc-empty{text-align:center;padding:40px 0 20px;}
.wc-empty h2{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(28px,3vw,42px);letter-spacing:-.03em;margin-bottom:14px;
}
.wc-empty p{font-size:18px;color:#4a4a4a;margin-bottom:28px;}

.woocommerce-order{max-width:760px;margin:0 auto;}
.woocommerce-thankyou-order-received{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(30px,3.4vw,48px);letter-spacing:-.03em;line-height:1.1;
  color:var(--soft-black);margin-bottom:28px;
}
.woocommerce-order ul.order_details{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px;padding:26px 0;margin:0 0 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.woocommerce-order ul.order_details li{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);}
.woocommerce-order ul.order_details li strong{
  display:block;margin-top:7px;font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:19px;letter-spacing:-.01em;text-transform:none;color:var(--soft-black);
}

@media (max-width:1024px){
  .wc-page{padding-top:120px;}
  .woocommerce-checkout form.checkout{grid-template-columns:1fr;gap:40px;}
  .woocommerce-checkout #order_review,
  .woocommerce-checkout .wc-col-title{position:static;}
}

@media (max-width:767px){
  .wc-page{padding-top:96px;}
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last{width:100%;margin-right:0;}
  .woocommerce-checkout #order_review{padding:24px 20px;border-radius:16px;}
  .woocommerce #payment #place_order{padding:17px 26px;font-size:16px;}
}

/* =====================================================================
   TESTIMONIAL QUOTATION MARKS
   Added in CSS rather than typed into the copy. Two reasons: an editor
   pasting a quote can never forget them or double them up, and the marks
   stay outside the text itself so they are not read aloud by a screen
   reader as part of the sentence.
   ===================================================================== */

.svc-proof blockquote p::before,
.wall-quote p::before,
.testi .quote::before{content:"\201C";}

.svc-proof blockquote p::after,
.wall-quote p::after,
.testi .quote::after{content:"\201D";}

/* The opening mark is pulled left so the first letter still sits on the
   text's optical margin. Without this the whole quote looks indented. */
.svc-proof blockquote p::before{margin-left:-0.42em;}
.wall-quote p::before,
.testi .quote::before{margin-left:-0.3em;}

/* =====================================================================
   SERVICE PAGE REFINEMENT
   ===================================================================== */

/* ---- HERO: half-size headline, content sitting low ----
   The h1 element is kept for SEO (a page needs exactly one) but sized as
   an h2. Dropping to an actual <h2> would leave the page with no h1 at
   all, which works against the ranking this page is built for. */
.svc-hero{
  display:flex;align-items:flex-end;
  min-height:78vh;
  padding:220px 0 84px;
}
.svc-hero-inner{width:100%;}
.svc-hero h1{
  font-size:clamp(26px,3.1vw,46px);   /* was clamp(42px,6.2vw,92px) */
  line-height:1.1;letter-spacing:-.025em;
  max-width:22ch;margin-bottom:22px;
}
.svc-hero .eyebrow{margin-bottom:20px;}
.svc-hero-sub{font-size:clamp(17px,1.4vw,21px);max-width:56ch;margin-bottom:34px;}

/* ---- Tighten after the last pain point ---- */
.svc-pains .pains{margin-bottom:0;}
.svc-pains{padding-bottom:56px;}

/* ---- "HOW IT WORKS" eyebrow, doubled ---- */
.svc-how .svc-sec-head .eyebrow,
.svc-sec-head .eyebrow{font-size:30px;letter-spacing:.14em;}

/* ---- Outcome cards: larger, with larger body copy ---- */
.out-grid{gap:32px;}
.out-card{padding:54px 46px;}
.out-card h3{font-size:clamp(26px,2.4vw,36px);margin-bottom:22px;}
.out-card p{font-size:clamp(18px,1.5vw,21px);line-height:1.6;}

/* ---- "Is this right for you" list ---- */
.fit-col li{font-size:clamp(19px,1.6vw,22px);line-height:1.55;padding-bottom:22px;}
.fit-col h3{font-size:clamp(24px,2.2vw,31px);}

/* ---- Testimonial body copy across the page ---- */
.wall-quote p{font-size:18px;line-height:1.6;}
.wall-name{font-size:20px;}
.wall-company{font-size:15px;}

/* ---- Core testimonial attribution, doubled ---- */
.svc-proof .pq-name{font-size:36px;letter-spacing:-.02em;line-height:1.15;}
.svc-proof .pq-role{font-size:24px;margin-top:4px;}

/* ---- Payment marks and what-happens-next, under the price card ---- */
.price-pay{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-top:20px;
}
.price-pay span{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#5a5a5a;
  border:1px solid var(--line);border-radius:6px;padding:7px 11px;background:var(--white);
}
.price-pay .price-pay-secure{
  border-color:rgba(201,168,76,.55);color:#8a6f23;background:rgba(201,168,76,.08);
}
.price-next{list-style:none;margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line);}
.price-next li{
  position:relative;padding-left:26px;margin-bottom:11px;
  font-size:15px;line-height:1.55;color:#4a4a4a;
}
.price-next li::before{
  content:"";position:absolute;left:0;top:6px;width:13px;height:13px;border-radius:50%;
  background:rgba(201,168,76,.18);border:1px solid rgba(201,168,76,.55);
}

@media (max-width:1024px){
  .svc-hero{min-height:66vh;padding:170px 0 66px;}
  .out-card{padding:42px 34px;}
}

@media (max-width:767px){
  .svc-hero{min-height:62vh;padding:132px 0 52px;}
  .svc-hero h1{font-size:26px;max-width:none;margin-bottom:16px;}
  .svc-hero .eyebrow{margin-bottom:14px;}
  .svc-hero-sub{font-size:17px;margin-bottom:26px;}

  /* Matching specificity: the desktop rule above uses .svc-how .svc-sec-head
     .eyebrow, which outranks a plain .svc-sec-head .eyebrow here. */
  .svc-how .svc-sec-head .eyebrow,
  .svc-sec-head .eyebrow{font-size:20px;letter-spacing:.12em;}
  .svc-pains{padding-bottom:40px;}

  .out-card{padding:30px 24px;}
  .out-card h3{font-size:25px;margin-bottom:14px;}
  .out-card p{font-size:18px;}

  .fit-col li{font-size:18px;padding-bottom:18px;}
  .fit-col h3{font-size:23px;}

  .wall-quote p{font-size:17px;}
  .wall-name{font-size:18px;}

  .svc-proof .pq-name{font-size:26px;}
  .svc-proof .pq-role{font-size:19px;}

  .price-pay span{font-size:11px;padding:6px 9px;}
}

/* Checkout: payment marks and the what-happens-next list. */
.wc-pay{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:20px;}
.wc-pay span{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5a5a5a;
  border:1px solid var(--line);border-radius:6px;padding:6px 10px;background:var(--white);
}
.wc-pay .wc-pay-secure{border-color:rgba(201,168,76,.55);color:#8a6f23;background:rgba(201,168,76,.08);}
.wc-next-title{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:19px !important;letter-spacing:-.01em;color:var(--soft-black);
  margin:26px 0 12px !important;
}

/* =====================================================================
   DEFAULT PAGE TEMPLATE
   Cart, checkout, my account, privacy, terms, and any page Gerry creates.
   ===================================================================== */
.page-default{padding-top:170px;}
.page-head{max-width:900px;margin:0 auto 46px;}
.page-head h1{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(34px,4.4vw,64px);line-height:1.05;letter-spacing:-.035em;
  color:var(--soft-black);
}
.page-default .prose{max-width:760px;margin:0 auto;}

/* Commerce pages set their own two-column layout, so they run wider and
   skip the reading measure. */
.page-default.is-commerce .container{max-width:1240px;}
.page-commerce{width:100%;}

/* Checkout is single-purpose. The heading duplicates WooCommerce's own,
   and every nav link is a way to leave without paying. */
body.sme-checkout .page-head{display:none;}
body.sme-checkout .page-default{padding-top:140px;}

@media (max-width:1024px){
  .page-default{padding-top:130px;}
  body.sme-checkout .page-default{padding-top:110px;}
}
@media (max-width:767px){
  .page-default{padding-top:104px;}
  body.sme-checkout .page-default{padding-top:92px;}
  .page-head{margin-bottom:30px;}
}

/* Whole service card is a hit area. The anchor is stretched over the card
   rather than wrapping it, which keeps the markup valid and leaves the
   link text readable to a screen reader. */
.card.is-linked{position:relative;}
.card .more.stretched::after{content:"";position:absolute;inset:0;z-index:1;}
.card.is-linked:hover{cursor:pointer;}

/* Buy point under the how-it-works steps. */
.how-buy{max-width:420px;margin:52px auto 0;}
.how-buy .price-buy{background:var(--gold);color:var(--black);}
.how-buy .price-buy:hover{background:var(--gold-hover);}
@media (max-width:767px){ .how-buy{margin-top:36px;} }

/* =====================================================================
   CHECKOUT — PREMIUM PASS
   The default sizes read as an admin form. At four figures the checkout
   should feel like the rest of the site, not like a utility page.
   ===================================================================== */

.woocommerce-checkout form.checkout{gap:80px;}
.woocommerce-checkout h3,
.wc-col-title{font-size:clamp(28px,2.8vw,38px) !important;margin-bottom:28px !important;}

.wc-col-intro{
  font-size:17px;line-height:1.6;color:#4a4a4a;
  margin:-14px 0 22px;max-width:44ch;
}

/* Fields: larger text, more room, warmer resting state. */
.woocommerce form .form-row{margin-bottom:22px;}
.woocommerce form .form-row label{font-size:15px;margin-bottom:10px;color:#3a3a3a;}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  padding:19px 22px;font-size:17px;border-radius:14px;background:var(--cream);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{background:var(--white);}

/* Order summary: a card with a picture in it, not a bare table. */
.woocommerce-checkout #order_review{
  padding:36px 34px;border-radius:24px;background:var(--white);
  border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.07);
}
.wc-item-thumb{
  width:78px;height:78px;object-fit:cover;border-radius:12px;
  display:block;border:1px solid var(--line);
}
.woocommerce-checkout-review-order-table td.product-name{
  display:flex;align-items:flex-start;gap:16px;
  font-size:17px;line-height:1.45;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{padding:18px 0;font-size:17px;}
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td{
  font-size:clamp(26px,2.4vw,34px);padding-top:24px;
}
.woocommerce #payment #place_order{padding:22px 34px;font-size:19px;}
.wc-trust li{font-size:15px;}

@media (max-width:1024px){
  .woocommerce-checkout form.checkout{gap:48px;}
}
@media (max-width:767px){
  .woocommerce-checkout h3,.wc-col-title{font-size:26px !important;}
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select{padding:17px 18px;font-size:16px;}
  .woocommerce-checkout #order_review{padding:26px 22px;}
  .wc-item-thumb{width:60px;height:60px;}
}

/* =====================================================================
   CONFIRMATION PAGE
   ===================================================================== */
body.sme-confirm .nav-links,
body.sme-confirm .nav-mobile,
body.sme-confirm .nav-toggle,
body.sme-confirm .nav-right .nav-cta{display:none;}

.wc-confirm{max-width:820px;margin:0 auto;}
.wc-confirm .eyebrow{display:block;margin-bottom:22px;}
.wc-confirm h1{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(34px,4.4vw,64px);line-height:1.05;letter-spacing:-.035em;
  color:var(--soft-black);margin-bottom:22px;
}
.wc-confirm-lead{font-size:clamp(18px,1.6vw,22px);line-height:1.6;color:#4a4a4a;margin-bottom:56px;}

.wc-confirm-steps{list-style:none;counter-reset:step;margin:0 0 56px;padding:0;}
.wc-confirm-steps li{
  counter-increment:step;position:relative;
  padding:30px 0 30px 68px;border-top:1px solid var(--line);
}
.wc-confirm-steps li:last-child{border-bottom:1px solid var(--line);}
.wc-confirm-steps li::before{
  content:counter(step);position:absolute;left:0;top:30px;
  width:42px;height:42px;border-radius:50%;
  background:rgba(201,168,76,.13);border:1px solid rgba(201,168,76,.5);
  color:#8a6f23;display:flex;align-items:center;justify-content:center;
  font-family:"NHG Display",sans-serif;font-weight:500;font-size:18px;
}
.wc-confirm-steps h2{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(21px,2vw,27px);letter-spacing:-.02em;line-height:1.2;
  color:var(--soft-black);margin-bottom:9px;
}
.wc-confirm-steps p{font-size:17px;line-height:1.6;color:#4a4a4a;}

.wc-confirm-meanwhile{padding-top:8px;}
.wc-confirm-meanwhile h2{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(23px,2.2vw,30px);letter-spacing:-.02em;margin-bottom:12px;
}
.wc-confirm-meanwhile p{font-size:17px;line-height:1.6;color:#4a4a4a;margin-bottom:30px;}
.wc-confirm-meanwhile a{color:var(--soft-black);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold);}
.wc-confirm-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.wc-confirm-link{font-size:16px;color:#4a4a4a;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(201,168,76,.5);}
.wc-confirm-link:hover{color:var(--soft-black);}

/* WooCommerce's own order tables sit below ours; keep them, quieter. */
body.sme-confirm .woocommerce-order-details,
body.sme-confirm .woocommerce-customer-details{
  max-width:820px;margin:56px auto 0;padding-top:44px;border-top:1px solid var(--line);
}
body.sme-confirm .woocommerce-order ul.order_details{display:none;}

@media (max-width:767px){
  .wc-confirm-lead{margin-bottom:36px;}
  .wc-confirm-steps li{padding:24px 0 24px 56px;}
  .wc-confirm-steps li::before{width:36px;height:36px;top:24px;font-size:16px;}
  .wc-confirm-actions{flex-direction:column;align-items:flex-start;gap:18px;}
}

/* =====================================================================
   NAVIGATION DROPDOWN
   The default had no breathing room, so the items read as one block.
   ===================================================================== */
.dropdown{
  min-width:290px;padding:12px;left:-18px;
  border-radius:16px;box-shadow:0 28px 70px rgba(0,0,0,.26);
  border:1px solid rgba(0,0,0,.06);
}
.dropdown a{
  padding:14px 18px;border-radius:10px;
  font-size:16px;line-height:1.35;
  transition:background .18s,color .18s;
}
.dropdown li + li{margin-top:2px;}
.dropdown a:hover,
.dropdown a:focus-visible{background:var(--cream);color:var(--gold);}
.dropdown .current-menu-item > a{color:var(--gold);background:var(--cream);}

/* =====================================================================
   LOGO MARQUEE
   Was a static row that only scrolled by hand. Now the same continuous
   loop as the testimonial wall, on every device, pausing on hover.
   ===================================================================== */
.logos-viewport{
  position:relative;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logos-track{
  display:flex;align-items:center;gap:70px;width:max-content;
  animation:logoScroll 40s linear infinite;will-change:transform;
}
@keyframes logoScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.logos-viewport:hover .logos-track,
.logos-viewport:focus-within .logos-track,
.logos-viewport.is-held .logos-track,
.logos-viewport.is-offscreen .logos-track{animation-play-state:paused;}
.logos-track > *{flex:none;}
.logos-track span{
  font-family:"NHG Display",sans-serif;font-size:clamp(26px,3.2vw,48px);
  color:#cfcfcf;letter-spacing:-.015em;white-space:nowrap;
}
.logos-track img{max-height:54px;width:auto;filter:grayscale(1);opacity:.6;}
@media (prefers-reduced-motion: reduce){
  .logos-track{animation:none;}
  .logos-viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
}
@media (max-width:767px){
  .logos-track{gap:40px;animation-duration:28s;}
}

/* "or email gerry@..." doubled. */
.price-email{font-size:32px !important;letter-spacing:-.01em;}
@media (max-width:767px){ .price-email{font-size:22px !important;} }

/* Checkout: the product name was rendering at heading scale in the block
   checkout and wrapping mid-word. Halved and allowed to break properly. */
.wc-block-components-product-name,
.wc-block-cart-item__wrap .wc-block-components-product-name{
  font-family:"NHG Display",sans-serif !important;
  font-weight:500 !important;
  font-size:19px !important;
  line-height:1.28 !important;
  letter-spacing:-.01em !important;
  color:var(--soft-black) !important;
  overflow-wrap:anywhere;hyphens:auto;
}
.wc-block-components-order-summary-item__image img,
.wc-block-cart-item__image img{
  width:72px !important;height:72px !important;object-fit:cover;
  border-radius:12px;border:1px solid var(--line);
}
.wc-block-components-order-summary-item__description{max-width:none;}

/* Block-checkout pay button, matched to the rest of the site. */
.wc-block-components-checkout-place-order-button{
  background:var(--soft-black) !important;color:var(--white) !important;
  font-family:"NHG Display",sans-serif !important;font-weight:500 !important;
  font-size:19px !important;padding:22px 34px !important;border-radius:100px !important;
}
.wc-block-components-checkout-place-order-button:hover{background:var(--gold) !important;color:var(--black) !important;}

@media (max-width:767px){
  .wc-block-components-product-name{font-size:17px !important;}
  .wc-block-components-order-summary-item__image img{width:60px !important;height:60px !important;}
}

/* =====================================================================
   SHOP
   ===================================================================== */
.shop-head{max-width:820px;margin:0 auto 66px;text-align:center;}
.shop-head .eyebrow{display:block;margin-bottom:20px;}
.shop-head h1{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(34px,4.6vw,66px);line-height:1.04;letter-spacing:-.035em;
  color:var(--soft-black);margin-bottom:22px;
}
.shop-head p{font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:#4a4a4a;}

.woocommerce ul.products{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:0;padding:0;
}
.woocommerce ul.products li.product{
  background:var(--cream);border:1px solid transparent;border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .25s,transform .25s;
}
.woocommerce ul.products li.product:hover{border-color:var(--gold);transform:translateY(-3px);}
.woocommerce ul.products li.product a img{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;margin:0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(21px,1.9vw,26px);letter-spacing:-.02em;line-height:1.18;
  color:var(--soft-black);padding:28px 28px 0;margin:0;
}
.woocommerce ul.products li.product .price{
  display:block;padding:14px 28px 0;
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(24px,2.2vw,32px);letter-spacing:-.02em;color:var(--soft-black);
}
.woocommerce ul.products li.product .price del{
  color:var(--grey);font-size:.62em;margin-right:10px;font-weight:400;
}
.woocommerce ul.products li.product .price ins{text-decoration:none;}
.woocommerce ul.products li.product .shop-enrol{
  margin:24px 28px 28px;background:var(--soft-black);color:var(--white);
  padding:16px 26px;border-radius:100px;text-align:center;
  font-family:"NHG Display",sans-serif;font-weight:500;font-size:16px;
  width:auto;margin-top:auto;
}
.woocommerce ul.products li.product .shop-enrol:hover{background:var(--gold);color:var(--black);}
.woocommerce ul.products li.product .onsale{display:none;}

.shop-foot{
  max-width:680px;margin:80px auto 0;text-align:center;
  padding-top:56px;border-top:1px solid var(--line);
}
.shop-foot h2{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(26px,2.6vw,36px);letter-spacing:-.025em;margin-bottom:14px;
}
.shop-foot p{font-size:17px;line-height:1.6;color:#4a4a4a;margin-bottom:28px;}

@media (max-width:1024px){ .woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:22px;} }
@media (max-width:767px){
  .woocommerce ul.products{grid-template-columns:1fr;}
  .shop-head{margin-bottom:40px;}
}

/* =====================================================================
   BOOK GATE + BLOG HERO
   ===================================================================== */
.book-gate-fields{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;}
.book-gate input[type="text"],
.book-gate input[type="email"]{
  width:100%;padding:18px 22px;border-radius:100px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);color:#fff;
  font-family:"NHG Text",sans-serif;font-size:17px;
}
.book-gate input::placeholder{color:rgba(255,255,255,.4);}
.book-gate input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.1);}
.book-consent{display:flex;gap:11px;align-items:flex-start;margin-bottom:20px;cursor:pointer;}
.book-consent input{margin-top:3px;width:17px;height:17px;accent-color:var(--gold);flex:none;}
.book-consent span{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.55);}
.book-gate-submit{
  width:100%;background:var(--gold);color:var(--black);border:0;
  padding:19px 30px;border-radius:100px;cursor:pointer;font-size:17px;
}
.book-gate-submit:hover{background:var(--gold-hover);}
.book-gate-message{margin-top:12px;font-size:14px;line-height:1.5;}
.book-gate-message.is-error{color:#f0a89a;}
.bk-privacy{margin-top:14px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.4);}
.book-done h3{
  font-family:"NHG Display",sans-serif;font-weight:500;color:#fff;
  font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em;margin-bottom:12px;
}
.book-done p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.62);margin-bottom:26px;}
.book-download{
  display:inline-block;background:var(--gold);color:var(--black);
  padding:19px 40px;border-radius:100px;font-size:17px;
}
.book-download:hover{background:var(--gold-hover);}

/* Blog post: image first, heading under it. */
.post-lead-full{background:var(--black);}
.post-lead-full img{width:100%;height:auto;max-height:70vh;object-fit:cover;display:block;}
.post-head{background:var(--black);color:#fff;padding:64px 0 56px;}
.post-head.has-image{padding-top:56px;}
.post-head .eyebrow{display:block;margin-bottom:20px;}
.post-head h1{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(32px,4.2vw,62px);line-height:1.05;letter-spacing:-.035em;
  max-width:20ch;margin-bottom:20px;
}
.post-head .post-meta{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,.55);font-size:16px;}
.post-body{padding-top:76px;}
@media (max-width:767px){
  .post-lead-full img{max-height:42vh;}
  .post-head{padding:40px 0 36px;}
  .post-head h1{max-width:none;}
  .post-body{padding-top:48px;}
}
.book-missing{font-size:15px;line-height:1.55;color:#f0a89a;margin-top:4px;}

.book-missing{font-size:16px;line-height:1.6;color:#f0a89a;}

/* =====================================================================
   SINGLE PRODUCT
   WooCommerce's stylesheets are dequeued, so this template had no styling
   at all: a stack of unstyled links and a full-bleed image. Rebuilt to
   match the rest of the site.
   ===================================================================== */

.single-product .wc-page{padding-top:150px;}
.woocommerce div.product{
  display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;
  max-width:1180px;margin:0 auto;
}

/* Image */
.woocommerce div.product div.images{margin:0;}
.woocommerce div.product div.images img{
  width:100%;height:auto;display:block;border-radius:22px;
  border:1px solid var(--line);
}
.woocommerce div.product div.images .flex-control-thumbs{
  display:flex;gap:10px;list-style:none;margin:14px 0 0;padding:0;
}
.woocommerce div.product div.images .flex-control-thumbs li{width:76px;}
.woocommerce div.product div.images .flex-control-thumbs img{border-radius:10px;cursor:pointer;}

/* Summary */
.woocommerce div.product .summary{margin:0;padding-top:6px;}
.woocommerce div.product .product_title{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(28px,3.2vw,44px);line-height:1.08;letter-spacing:-.03em;
  color:var(--soft-black);margin:0 0 22px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(34px,3.6vw,52px);line-height:1;letter-spacing:-.035em;
  color:var(--soft-black);margin:0 0 26px;
}
.woocommerce div.product p.price del{
  color:var(--grey);font-size:.55em;font-weight:400;text-decoration:line-through;opacity:1;
}
.woocommerce div.product p.price ins{text-decoration:none;font-weight:500;}

.woocommerce div.product .woocommerce-product-details__short-description{
  font-size:clamp(17px,1.5vw,20px);line-height:1.62;color:#4a4a4a;
  margin-bottom:30px;max-width:52ch;
}

/* Add to cart */
.woocommerce div.product form.cart{margin:0 0 26px;display:block;}
.woocommerce div.product form.cart .quantity{display:none;}
.woocommerce div.product form.cart .button{
  width:100%;background:var(--gold) !important;color:var(--black) !important;
  font-family:"NHG Display",sans-serif;font-weight:500;font-size:18px;
  padding:21px 34px;border-radius:100px;border:0;cursor:pointer;
  transition:background .2s,transform .2s;
}
.woocommerce div.product form.cart .button:hover{background:var(--gold-hover) !important;transform:translateY(-2px);}
.woocommerce div.product .stock{font-size:15px;color:var(--grey);margin-bottom:14px;}
.woocommerce div.product .out-of-stock{color:#b32d2e;}

.product-full{
  display:inline-block;margin-bottom:26px;
  font-family:"NHG Display",sans-serif;font-weight:500;font-size:17px;
  color:var(--soft-black);text-decoration:none;
  border-bottom:1px solid rgba(201,168,76,.6);padding-bottom:3px;
}
.product-full span{color:var(--gold);margin-left:6px;transition:transform .2s;display:inline-block;}
.product-full:hover span{transform:translateX(4px);}

.product-next{margin-top:8px;padding-top:24px;border-top:1px solid var(--line);}
.product-next li{font-size:15px;line-height:1.55;color:#5a5a5a;}

/* Breadcrumb and clutter WooCommerce prints by default. */
.woocommerce .product_meta,
.woocommerce #reviews,
.woocommerce .woocommerce-tabs,
.woocommerce .related,
.woocommerce .up-sells{display:none !important;}

@media (max-width:1024px){
  .single-product .wc-page{padding-top:120px;}
  .woocommerce div.product{grid-template-columns:1fr;gap:36px;}
  .woocommerce div.product div.images img{border-radius:16px;}
}
@media (max-width:767px){
  .single-product .wc-page{padding-top:96px;}
  .woocommerce div.product{gap:28px;}
  .woocommerce div.product .product_title{font-size:27px;margin-bottom:16px;}
  .woocommerce div.product p.price{font-size:34px;gap:12px;margin-bottom:20px;}
  .woocommerce div.product .woocommerce-product-details__short-description{font-size:17px;margin-bottom:24px;}
  .woocommerce div.product form.cart .button{padding:18px 26px;font-size:17px;}
  .product-full{font-size:16px;}
}

/* =====================================================================
   NAV ICONS — SEARCH AND BASKET
   ===================================================================== */
.nav-icon{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:none;
  background:none;border:0;padding:0;cursor:pointer;
  color:#fff;text-decoration:none;
  border-radius:50%;transition:background .2s,color .2s;
}
.nav-icon svg{width:21px;height:21px;display:block;}
.nav-icon:hover{color:var(--gold);background:rgba(255,255,255,.07);}
.nav-cart-count{
  position:absolute;top:2px;right:0;
  min-width:18px;height:18px;padding:0 5px;border-radius:100px;
  background:var(--gold);color:var(--black);
  font-family:"NHG Display",sans-serif;font-weight:500;font-size:11px;
  display:flex;align-items:center;justify-content:center;line-height:1;
}

/* ---- Search panel ---- */
.nav-search{
  position:absolute;left:0;right:0;top:100%;
  background:var(--black);border-top:1px solid var(--line-dark);
  padding:22px 40px;z-index:5;
}
.nav-search[hidden]{display:none;}
.nav-search form{
  display:flex;align-items:center;gap:12px;
  max-width:1600px;margin:0 auto;
}
.nav-search input[type="search"]{
  flex:1;min-width:0;padding:17px 24px;border-radius:100px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-family:"NHG Text",sans-serif;font-size:17px;
  -webkit-appearance:none;appearance:none;
}
.nav-search input::placeholder{color:rgba(255,255,255,.38);}
.nav-search input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.1);}
.nav-search button[type="submit"]{
  flex:none;background:var(--white);color:var(--black);border:0;
  padding:17px 30px;border-radius:100px;cursor:pointer;
  font-family:"NHG Display",sans-serif;font-weight:500;font-size:16px;
  transition:background .2s;
}
.nav-search button[type="submit"]:hover{background:var(--gold);}
.nav-search-close{
  flex:none;background:none;border:0;color:rgba(255,255,255,.45);
  font-size:26px;line-height:1;width:42px;height:42px;cursor:pointer;
}
.nav-search-close:hover{color:#fff;}

@media (max-width:1024px){
  .nav-icon{width:38px;height:38px;}
  .nav-icon svg{width:20px;height:20px;}
  .nav-right{gap:2px;}
  .nav-search{padding:16px 20px;}
  .nav-search button[type="submit"]{padding:15px 22px;font-size:15px;}
}
@media (max-width:767px){
  .nav-icon{width:36px;height:36px;}
  .nav-icon svg{width:19px;height:19px;}
  .nav-search input[type="search"]{padding:15px 18px;font-size:16px;}
  .nav-search button[type="submit"]{padding:14px 18px;font-size:14px;}
  .nav-search-close{width:36px;font-size:22px;}
}

/* =====================================================================
   CART PAGE
   "Proceed to Checkout" was rendering as a bare blue link, which reads
   as broken next to everything else on the site.
   ===================================================================== */
.wc-block-cart__submit-button,
.wc-proceed-to-checkout .checkout-button,
.woocommerce .wc-proceed-to-checkout a.button{
  display:block !important;width:100% !important;text-align:center;
  background:var(--soft-black) !important;color:var(--white) !important;
  font-family:"NHG Display",sans-serif !important;font-weight:500 !important;
  font-size:18px !important;padding:21px 34px !important;
  border-radius:100px !important;border:0 !important;text-decoration:none !important;
  transition:background .2s,transform .2s;
}
.wc-block-cart__submit-button:hover,
.wc-proceed-to-checkout .checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.button:hover{
  background:var(--gold) !important;color:var(--black) !important;transform:translateY(-2px);
}
.wc-block-cart__totals-title,
.woocommerce .cart_totals h2{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:13px !important;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey) !important;
}
.wc-block-components-totals-item__label{font-size:17px;}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(26px,2.4vw,34px);letter-spacing:-.02em;
}
.wc-block-cart-items__row .wc-block-cart-item__image img{
  border-radius:12px;border:1px solid var(--line);
}

/* =====================================================================
   FLOATING BASKET
   Bottom-LEFT: the weekly-email button holds bottom-right, and two
   floating controls on the same corner collide on a phone.
   ===================================================================== */
.sme-basket{position:fixed;left:24px;bottom:24px;z-index:125;}

.sme-basket-btn{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:18px;border:1px solid var(--line);
  background:var(--white);color:var(--soft-black);cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;
}
.sme-basket-btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.24);}
.sme-basket-btn svg{width:24px;height:24px;}
.sme-basket-count{
  position:absolute;top:-8px;right:-8px;
  min-width:24px;height:24px;padding:0 7px;border-radius:100px;
  background:var(--gold);color:var(--black);
  font-family:"NHG Display",sans-serif;font-weight:500;font-size:13px;
  display:flex;align-items:center;justify-content:center;line-height:1;
  border:2px solid var(--white);
}

/* ---- Drawer ---- */
.sme-basket-scrim{
  position:fixed;inset:0;z-index:126;
  background:rgba(0,0,0,.45);opacity:0;transition:opacity .3s;
}
.sme-basket-scrim[hidden]{display:none;}
.sme-basket.is-open .sme-basket-scrim{opacity:1;}

.sme-basket-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:127;
  width:min(430px,92vw);
  background:var(--white);display:flex;flex-direction:column;
  box-shadow:-24px 0 70px rgba(0,0,0,.28);
  transform:translateX(100%);transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.sme-basket-drawer[hidden]{display:none;}
.sme-basket.is-open .sme-basket-drawer{transform:translateX(0);}

.basket-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 28px 20px;border-bottom:1px solid var(--line);
}
.basket-head h2{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:26px;letter-spacing:-.025em;color:var(--soft-black);margin:0;
}
.basket-close{
  background:none;border:0;color:var(--grey);font-size:30px;line-height:1;
  width:40px;height:40px;cursor:pointer;
}
.basket-close:hover{color:var(--soft-black);}

.basket-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;}
.basket-empty{padding:36px 28px;font-size:17px;color:var(--grey);}

.basket-item{
  display:grid;grid-template-columns:74px 1fr 32px;gap:16px;align-items:start;
  padding:24px 28px;border-bottom:1px solid var(--line);
}
.basket-thumb{
  width:74px;height:74px;object-fit:cover;border-radius:12px;
  border:1px solid var(--line);display:block;
}
.basket-item-body h3{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:17px;line-height:1.3;letter-spacing:-.01em;
  color:var(--soft-black);margin:0 0 8px;
}
.basket-price{
  font-family:"NHG Display",sans-serif;font-weight:500;font-size:19px;
  color:var(--soft-black);letter-spacing:-.01em;
}
.basket-price del{color:var(--grey);font-size:.72em;font-weight:400;margin-right:8px;}
.basket-price ins{text-decoration:none;}
.basket-remove{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  color:var(--grey);border-radius:8px;transition:color .2s,background .2s;
}
.basket-remove svg{width:18px;height:18px;}
.basket-remove:hover{color:#b32d2e;background:rgba(179,45,46,.07);}

.basket-foot{margin-top:auto;padding:24px 28px 28px;border-top:1px solid var(--line);background:var(--cream);}
.basket-total{
  display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;
}
.basket-total span{font-size:16px;color:#4a4a4a;}
.basket-total strong{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:30px;letter-spacing:-.025em;color:var(--soft-black);
}
.basket-checkout{
  display:block;width:100%;text-align:center;
  background:var(--soft-black);color:var(--white);
  padding:20px 30px;border-radius:100px;font-size:17px;
  transition:background .2s,transform .2s;
}
.basket-checkout:hover{background:var(--gold);color:var(--black);transform:translateY(-2px);}
.basket-view{
  display:block;text-align:center;margin-top:14px;font-size:15px;color:#4a4a4a;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(201,168,76,.5);
}
.basket-view:hover{color:var(--soft-black);}

body.sme-basket-open{overflow:hidden;}

@media (max-width:767px){
  .sme-basket{left:16px;bottom:16px;}
  .sme-basket-btn{width:52px;height:52px;border-radius:16px;}
  .sme-basket-btn svg{width:22px;height:22px;}
  .sme-basket-count{min-width:22px;height:22px;font-size:12px;top:-7px;right:-7px;}
  .sme-basket-drawer{width:100%;}
  .basket-head{padding:22px 20px 16px;}
  .basket-head h2{font-size:23px;}
  .basket-item{grid-template-columns:62px 1fr 30px;gap:12px;padding:18px 20px;}
  .basket-thumb{width:62px;height:62px;}
  .basket-foot{padding:20px;}
  .basket-total strong{font-size:26px;}
  .basket-checkout{padding:18px 24px;font-size:16px;}
}

@media (prefers-reduced-motion: reduce){
  .sme-basket-drawer{transition:none;}
  .sme-basket-scrim{transition:none;}
}

/* Homepage book gate sits on a white section, so the consent line and
   message need dark text rather than the Book page's light-on-dark. */
.book-gate-inline .book-consent-light span{color:#5a5a5a;}
.book-gate-inline .book-gate-message.is-error{color:#c0392b;}
.book-gate-inline .book-consent{margin:14px 0 0;}
.book-gate-inline .book-form{margin-top:8px;}
.book-gate-inline .book-gate-submit{
  width:auto;flex:none;background:var(--gold);color:var(--black);
  border:0;padding:19px 34px;border-radius:100px;cursor:pointer;
  font-family:"NHG Display",sans-serif;font-weight:500;font-size:17px;white-space:nowrap;
}
.book-gate-inline .book-gate-submit:hover{background:var(--gold-hover);}
.book-gate-inline + .book-done h3,
.section-white .book-done h3{color:var(--soft-black);}
.section-white .book-done p{color:#4a4a4a;}
@media (max-width:767px){
  .book-gate-inline .book-gate-submit{width:100%;}
}

/* =====================================================================
   MC4WP FORMS
   When a shortcode is set, MC4WP renders the real Mailchimp form and this
   dresses it in the theme's clothes. MC4WP's own markup is plain
   paragraphs and labels, so everything is targeted from the wrapper.
   ===================================================================== */
.sme-mc4wp p{margin:0 0 14px;}
.sme-mc4wp label{
  display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:8px;
}
.sme-mc4wp input[type="text"],
.sme-mc4wp input[type="email"]{
  width:100%;padding:16px 20px;border-radius:12px;
  font-family:"NHG Text",sans-serif;font-size:16px;
  border:1px solid var(--line);background:var(--cream);color:var(--soft-black);
  margin-top:6px;
}
.sme-mc4wp input:focus{outline:none;border-color:var(--gold);background:var(--white);}
.sme-mc4wp input[type="submit"]{
  width:100%;border:0;cursor:pointer;
  background:var(--soft-black);color:var(--white);
  font-family:"NHG Display",sans-serif;font-weight:500;font-size:17px;
  padding:18px 30px;border-radius:100px;
  transition:background .2s,transform .2s;
}
.sme-mc4wp input[type="submit"]:hover{background:var(--gold);color:var(--black);transform:translateY(-1px);}
.sme-mc4wp input[type="checkbox"]{width:auto;margin-right:9px;accent-color:var(--gold);}
.sme-mc4wp .mc4wp-alert{
  margin-top:14px;font-size:14.5px;line-height:1.55;padding:0;background:none;border:0;
}
.sme-mc4wp .mc4wp-success{color:#1a7f37;}
.sme-mc4wp .mc4wp-error{color:#c0392b;}
.sme-mc4wp .mc4wp-notice{color:#4a4a4a;}

/* In the gold corner panel, which is white with dark text. */
.sme-lead-panel .sme-mc4wp label{color:#8a6f23;}
.sme-lead-panel .sme-mc4wp input[type="checkbox"] + span,
.sme-lead-panel .sme-mc4wp label > span{
  font-size:12.5px;letter-spacing:0;text-transform:none;color:#5a5a5a;
}

/* On the dark Book sections. */
.sme-mc4wp-book label{color:var(--gold);}
.section-black .sme-mc4wp input[type="text"],
.section-black .sme-mc4wp input[type="email"],
.book-cover ~ * .sme-mc4wp input[type="email"]{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff;
}
.section-black .sme-mc4wp input::placeholder{color:rgba(255,255,255,.35);}
.section-black .sme-mc4wp input[type="submit"]{background:var(--gold);color:var(--black);}
.section-black .sme-mc4wp input[type="submit"]:hover{background:var(--gold-hover);}

/* MC4WP's confirmation, made prominent rather than a small grey line. */
.sme-lead-panel .mc4wp-alert,
.sme-mc4wp .mc4wp-alert{
  margin-top:18px;padding:16px 18px;border-radius:12px;
  font-size:15px;line-height:1.55;
}
.sme-lead-panel .mc4wp-success,
.sme-mc4wp .mc4wp-success{
  background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.5);color:#6b5518;
}
.sme-lead-panel .mc4wp-error,
.sme-mc4wp .mc4wp-error{
  background:rgba(192,57,43,.07);border:1px solid rgba(192,57,43,.35);color:#a3312a;
}
.section-black .sme-mc4wp .mc4wp-success{
  background:rgba(201,168,76,.14);border-color:rgba(201,168,76,.5);color:var(--gold-hover);
}
.section-black .sme-mc4wp .mc4wp-error{color:#f0a89a;}

/* =====================================================================
   MC4WP FIELDS — VISIBLE OUTLINES
   On the light book section the inputs were cream on near-white with a
   hairline border, so they read as empty space. There is no way to tell
   there is a form there at all until you get an error under it.
   ===================================================================== */
.sme-mc4wp input[type="text"],
.sme-mc4wp input[type="email"]{
  border:1.5px solid #d5d1c7;
  background:var(--white);
  box-shadow:0 1px 2px rgba(0,0,0,.03) inset;
}
.sme-mc4wp input[type="text"]::placeholder,
.sme-mc4wp input[type="email"]::placeholder{color:#9a9a9a;opacity:1;}
.sme-mc4wp input[type="text"]:focus,
.sme-mc4wp input[type="email"]:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.16);
}

/* On dark sections, a lighter outline for the same reason. */
.section-black .sme-mc4wp input[type="text"],
.section-black .sme-mc4wp input[type="email"],
.sme-lead-panel .sme-mc4wp input[type="text"],
.sme-lead-panel .sme-mc4wp input[type="email"]{
  border:1.5px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.05);
  box-shadow:none;
}
.section-black .sme-mc4wp input::placeholder{color:rgba(255,255,255,.45);}

/* The gold panel is white, so it takes the light treatment. */
.sme-lead-panel .sme-mc4wp input[type="text"],
.sme-lead-panel .sme-mc4wp input[type="email"]{
  border:1.5px solid #d5d1c7;background:var(--white);color:var(--soft-black);
}
.sme-lead-panel .sme-mc4wp input::placeholder{color:#9a9a9a;}

/* Consent line: sentence case, not the uppercase label treatment. */
.sme-mc4wp label > span,
.sme-mc4wp input[type="checkbox"] ~ span{
  font-size:13.5px;letter-spacing:0;text-transform:none;line-height:1.5;
}

/* =====================================================================
   BOOK DOWNLOAD PAGE
   ===================================================================== */
.book-dl{padding-top:170px;}
.book-dl-grid{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center;
  max-width:1080px;margin:0 auto;
}
.book-dl-cover img{width:100%;height:auto;border-radius:14px;display:block;}
.book-dl-body .eyebrow{display:block;margin-bottom:20px;}
.book-dl-body h1{
  font-family:"NHG Display",sans-serif;font-weight:500;color:#fff;
  font-size:clamp(34px,4.2vw,60px);line-height:1.04;letter-spacing:-.035em;margin-bottom:20px;
}
.book-dl-lead{font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:rgba(255,255,255,.65);margin-bottom:34px;max-width:46ch;}
.book-dl-btn{
  display:inline-block;background:var(--gold);color:var(--black);
  padding:22px 48px;border-radius:100px;font-size:19px;
  transition:background .2s,transform .2s;
}
.book-dl-btn:hover{background:var(--gold-hover);transform:translateY(-2px);}
.book-dl-note{margin-top:14px;font-size:14px;color:rgba(255,255,255,.4);}
.book-dl-missing{font-size:16px;line-height:1.6;color:#f0a89a;}

.book-dl-next{margin-top:52px;padding-top:38px;border-top:1px solid var(--line-dark);}
.book-dl-next h2{
  font-family:"NHG Display",sans-serif;font-weight:500;color:#fff;
  font-size:clamp(21px,2vw,28px);letter-spacing:-.02em;margin-bottom:12px;
}
.book-dl-next p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.6);margin-bottom:28px;max-width:52ch;}
.book-dl-links{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.book-dl-link{color:rgba(255,255,255,.6);font-size:16px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(201,168,76,.5);}
.book-dl-link:hover{color:var(--gold);}

@media (max-width:1024px){
  .book-dl{padding-top:130px;}
  .book-dl-grid{grid-template-columns:1fr;gap:38px;}
  .book-dl-cover{max-width:300px;}
}
@media (max-width:767px){
  .book-dl{padding-top:100px;}
  .book-dl-cover{max-width:220px;}
  .book-dl-btn{display:block;text-align:center;padding:19px 30px;font-size:17px;}
  .book-dl-next{margin-top:38px;padding-top:30px;}
  .book-dl-links{flex-direction:column;align-items:flex-start;gap:18px;}
}

/* ==========================================================================
   Framework page and services hub
   ========================================================================== */

/* --- Homepage: button under the four framework panels --- */
.fw-cta{margin-top:56px;text-align:center;}

/* --- Three pillars --- */
.fk-pillar-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:56px;
}
.fk-pillar{
  padding:38px 32px;background:var(--cream);border-radius:16px;
  border:1px solid var(--line);
}
.fk-pillar-n{
  display:block;font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:15px;letter-spacing:.14em;color:var(--gold);margin-bottom:20px;
}
.fk-pillar h3{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(21px,1.9vw,26px);letter-spacing:-.02em;line-height:1.2;
  margin-bottom:14px;color:var(--soft-black);
}
.fk-pillar p{font-size:16px;line-height:1.65;color:#4a4a4a;}

/* --- The eleven layers --- */
.fk-layers{padding-bottom:110px;}
.fk-hint{
  display:flex;align-items:center;gap:11px;justify-content:center;
  margin:0 0 34px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);
}
/* A small pointing chevron, drawn rather than shipped as an icon file, so
   the prompt above the stack has something visual attached to it. Text
   alone was read as a caption rather than an instruction. */
.fk-hint-icon{
  width:16px;height:16px;border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);transform:rotate(45deg) translate(-2px,-2px);
  animation:fkNudge 1.8s ease-in-out infinite;
}
@keyframes fkNudge{
  0%,100%{transform:rotate(45deg) translate(-2px,-2px);}
  50%{transform:rotate(45deg) translate(1px,1px);}
}
@media (prefers-reduced-motion:reduce){.fk-hint-icon{animation:none;}}

.fk-stack{max-width:900px;margin:0 auto;}
.fk-layer{border-bottom:1px solid var(--line-dark);}
.fk-layer:first-child{border-top:1px solid var(--line-dark);}
.fk-layer-head{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;
  padding:26px 4px;cursor:pointer;list-style:none;
  transition:color .2s;
}
.fk-layer-head::-webkit-details-marker{display:none;}
.fk-layer-head:hover .fk-layer-title{color:var(--gold);}
.fk-layer-head:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}
.fk-layer-n{
  font-family:"NHG Display",sans-serif;font-weight:500;font-size:15px;
  color:rgba(255,255,255,.32);letter-spacing:.08em;min-width:2.4ch;
}
.fk-layer-title{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(20px,2.1vw,29px);letter-spacing:-.02em;line-height:1.2;
  color:#fff;transition:color .2s;
}
.fk-layer-chev{
  position:relative;width:14px;height:14px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .25s;
}
.fk-layer[open] .fk-layer-chev{transform:rotate(-135deg);}
.fk-layer[open] .fk-layer-title{color:var(--gold);}
.fk-layer-body{padding:0 44px 30px 60px;}
.fk-layer-body p{
  font-size:clamp(16px,1.4vw,19px);line-height:1.65;
  color:rgba(255,255,255,.62);max-width:62ch;
}
.fk-foot{
  max-width:900px;margin:46px auto 0;text-align:center;
  font-size:16px;line-height:1.65;color:rgba(255,255,255,.45);
}

/* --- Framework teaser on the hub --- */
.fk-teaser-list{
  list-style:none;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  max-width:860px;margin:44px auto 0;
}
.fk-teaser-list li{
  padding:11px 20px;border:1px solid var(--line-dark);border-radius:100px;
  font-size:15px;color:rgba(255,255,255,.72);
}
.fk-teaser-action{margin-top:46px;text-align:center;}

/* --- Toolkits note --- */
.fk-kits{text-align:center;}
.fk-kits h2{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(26px,2.8vw,40px);letter-spacing:-.02em;line-height:1.15;
  margin-bottom:20px;
}
.fk-kits p{
  font-size:clamp(16px,1.4vw,19px);line-height:1.65;color:#4a4a4a;
  max-width:70ch;margin:0 auto;
}

/* --- Qualifier --- */
.fk-qual-list{
  list-style:none;max-width:760px;margin:46px auto 0;
}
.fk-qual-list li{
  display:flex;gap:16px;align-items:flex-start;padding:16px 0;
  border-bottom:1px solid var(--line);
  font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:#3a3a3a;
}
.fk-qual-note{
  max-width:760px;margin:30px auto 0;font-size:16px;line-height:1.65;
  color:var(--grey);
}

/* --- Two programme tiers --- */
/* minmax(0,1fr) rather than 1fr: a plain 1fr is minmax(auto,1fr), so the
   longer Platinum list was forcing that column 27px wider than Gold. Two
   price cards of visibly different widths read as a broken layout.
   Measured at 1440px: 573/600 before, 485/485 after. */
.fk-tier-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;
  max-width:1000px;margin:56px auto 0;align-items:stretch;
}
/* Flex column with the list flexing lets both Enrol buttons sit on the
   same baseline whatever the two lists weigh. */
.fk-tier{
  position:relative;display:flex;flex-direction:column;
  padding:44px 38px;border:1px solid var(--line);
  border-radius:18px;background:#fff;
}
.fk-tier .price-list{flex:1 1 auto;}
/* Platinum is the superset, so it carries the visual weight. Only one
   gold accent per card: the flag on Platinum, the tick marks elsewhere. */
.fk-tier.is-featured{
  border-color:var(--gold);box-shadow:0 18px 50px rgba(0,0,0,.07);
}
.fk-tier-flag{
  position:absolute;top:-13px;left:38px;
  background:var(--gold);color:var(--black);
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 16px;border-radius:100px;
}
.fk-tier h3{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:clamp(23px,2.1vw,30px);letter-spacing:-.02em;line-height:1.15;
  margin-bottom:12px;
}
.fk-tier-strap{font-size:16px;line-height:1.6;color:#4a4a4a;margin-bottom:28px;}
.fk-tier-figure{margin-bottom:8px;}
.fk-tier .price-note{margin-bottom:28px;}
.fk-tier .price-list{margin-bottom:32px;}
.fk-tier .price-buy{display:block;text-align:center;}

.fk-guarantee{
  display:flex;gap:14px;align-items:flex-start;
  max-width:1000px;margin:34px auto 0;padding:22px 26px;
  background:var(--cream);border-radius:14px;
  font-size:16px;line-height:1.6;color:#3a3a3a;
}
.fk-guarantee-mark{
  flex:0 0 auto;width:18px;height:18px;margin-top:3px;border-radius:50%;
  border:2px solid var(--gold);
}

/* --- Smaller services grid --- */
.fk-mini-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;
}
.fk-mini{
  display:block;padding:28px 26px;background:#fff;border:1px solid var(--line);
  border-radius:14px;text-decoration:none;color:inherit;
  transition:border-color .2s,transform .2s;
}
a.fk-mini:hover{border-color:var(--gold);transform:translateY(-2px);}
.fk-mini h3{
  font-family:"NHG Display",sans-serif;font-weight:500;
  font-size:19px;letter-spacing:-.01em;line-height:1.25;margin-bottom:10px;
}
.fk-mini p{font-size:15px;line-height:1.6;color:#5a5a5a;}
.fk-mini-go{
  display:inline-block;margin-top:16px;font-size:14px;color:var(--gold);
  letter-spacing:.06em;
}

/* --- Responsive --- */
@media (max-width:1024px){
  .fk-pillar-grid{grid-template-columns:1fr;gap:20px;}
  .fk-tier-grid{grid-template-columns:1fr;gap:38px;max-width:560px;}
  .fk-mini-grid{grid-template-columns:repeat(2,1fr);}
  .fk-layer-body{padding:0 8px 26px 52px;}
}
@media (max-width:767px){
  .fk-layers{padding-bottom:80px;}
  .fk-hint{font-size:12px;gap:9px;}
  .fk-layer-head{gap:14px;padding:20px 2px;}
  .fk-layer-body{padding:0 0 22px 40px;}
  .fk-mini-grid{grid-template-columns:1fr;}
  .fk-tier{padding:34px 24px;}
  .fk-tier-flag{left:24px;}
  .fk-guarantee{flex-direction:column;gap:12px;padding:20px;}
  .fk-teaser-list{gap:9px;}
  .fk-teaser-list li{padding:9px 15px;font-size:14px;}
  .fk-cta,.fw-cta{margin-top:40px;}
}

/* --------------------------------------------------------------------------
   Section header colour on light backgrounds

   .svc-sec-head was written for the dark service sections, so its intro
   paragraph is rgba(255,255,255,.5). Only .svc-pricing ever overrode it,
   which meant every light section reusing that header rendered white text
   on a white background: invisible unless you selected it.

   Scoped to the light section wrappers rather than patched per section, so
   any future light section inherits the correct colour. .svc-pricing already
   sets the same value, so nothing existing changes.
   -------------------------------------------------------------------------- */
.section-white .svc-sec-head p,
.section-cream .svc-sec-head p{color:#4a4a4a;}

.section-white .svc-sec-head h2,
.section-cream .svc-sec-head h2{color:var(--soft-black);}
.section-white .svc-sec-head h2 em,
.section-cream .svc-sec-head h2 em{color:var(--gold);font-style:normal;}

/* --------------------------------------------------------------------------
   Fixed navigation clearance

   Two faults were hiding the top of the WooCommerce pages.

   1. The admin bar. .site-nav is position:fixed at top:0, so it ignores the
      32px margin WordPress puts on <body> for the admin bar and slides
      underneath it, taking a 32px bite out of the page for any logged-in
      user. Only logged-in users saw this one.

   2. Anchor and restored-scroll landings. With a fixed header and no
      scroll-margin, any jump to an anchor, any browser-restored scroll
      position, and any in-page link puts the target flush against the top
      of the viewport, which is underneath the navigation. scroll-padding on
      the scroll container fixes every one of these at once rather than
      needing a per-anchor offset.
   -------------------------------------------------------------------------- */
:root{--nav-h:76px;}

html{scroll-padding-top:calc(var(--nav-h) + 24px);}

/* Any element that can be scrolled to keeps clear of the fixed nav. */
[id]{scroll-margin-top:calc(var(--nav-h) + 24px);}

/* The admin bar pushes the document down but not a fixed element, so the
   nav has to be pushed down to match. 46px is the admin bar height on
   narrow screens, 32px from 783px up: WordPress's own breakpoint. */
body.admin-bar .site-nav{top:46px;}
@media screen and (min-width:783px){
  body.admin-bar .site-nav{top:32px;}
}

/* --------------------------------------------------------------------------
   Logo image

   The lockup is a wide, short image, so it is sized by HEIGHT and left to
   find its own width. Sizing by width would make the mark grow and shrink
   with the viewport while the nav bar stayed the same height.

   width:auto is explicit because the <img> carries width and height
   attributes: those attributes are there to reserve space and stop the
   header shifting as the logo loads, but without width:auto they would also
   fight the height rule and squash the lockup.
   -------------------------------------------------------------------------- */
.logo.has-img{display:inline-flex;align-items:center;line-height:0;}
.logo-img{height:26px;width:auto;display:block;}

/* The footer lockup stays a step larger than the nav: it sits in open space
   rather than inside a fixed 76px bar. Scaled down with the nav so the two
   keep the same relationship. */
.site-foot .logo-img{height:34px;}

@media (max-width:1024px){
  .logo-img{height:24px;}
  .site-foot .logo-img{height:30px;}
}
@media (max-width:767px){
  /* Below this the lockup's wordmark stops being legible before it stops
     fitting, so the height comes down and the nav gives it room. */
  .logo-img{height:19px;}
  .site-foot .logo-img{height:26px;}
}