/* ==========================================================================
   KIO METHOD — funnel page stylesheet
   Built to THE BUILD SPEC v2 (corrected 25 August).
   Used by index.html ONLY. The held-back pages still use style.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,600;1,700&family=Fraunces:ital,opsz,wght@1,9..144,500&display=swap');

/* --------------------------------------------------------------------------
   GOODLY — commercial webfont, licensed separately.
   Drop the webfont kit (.woff2 / .woff) into /public/fonts/ using the
   filenames below and the headings pick it up with no further change.
   Until then the fallback stack below is what renders.
   -------------------------------------------------------------------------- */
@font-face { font-family:'Goodly'; src:url('../fonts/Goodly-Light.woff2') format('woff2'), url('../fonts/Goodly-Light.woff') format('woff'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Goodly'; src:url('../fonts/Goodly-Regular.woff2') format('woff2'), url('../fonts/Goodly-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Goodly'; src:url('../fonts/Goodly-Medium.woff2') format('woff2'), url('../fonts/Goodly-Medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; }

:root{
  --kio-indigo:#312874;
  --kio-purple:#7A62DE;
  --kio-light-purple:#978EE1;
  --kio-pale-blue:#87DFFF;
  --kio-white:#FFFFFF;
  --kio-lilac:#F4F2FA;
  --kio-pale-blue-bg:#EFFAFF;
  --kio-body-ink:#1C1730;
  --kio-gradient:linear-gradient(90deg, rgb(92,225,235) 0%, rgb(112,201,242) 34%, rgb(140,82,255) 100%);
  --font-head:'Goodly','Nunito',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
  --font-accent:'Fraunces',Georgia,serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:hidden;}
body{margin:0;font-family:var(--font-body);color:var(--kio-body-ink);background:var(--kio-white);line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:500;color:var(--kio-indigo);margin:0;line-height:1.1;}
p{margin:0 0 1em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul,ol{margin:0;padding:0;list-style:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ---------- Accent word treatment (Fraunces italic + squiggle) ---------- */
.accent{font-family:var(--font-accent);font-style:italic;font-weight:500;color:var(--kio-pale-blue);position:relative;display:inline-block;}
.squiggle{position:absolute;left:0;bottom:-.30em;width:100%;height:.44em;overflow:visible;pointer-events:none;}
.squiggle path{fill:none;stroke:#87dfff;stroke-linecap:round;}

/* ---------- Asset placeholders ---------- */
.ph{display:flex;align-items:center;justify-content:center;text-align:center;background:rgba(49,40,116,.06);border:2px dashed rgba(49,40,116,.38);color:var(--kio-indigo);font-family:var(--font-body);font-size:11px;font-weight:800;line-height:1.45;padding:10px;letter-spacing:.02em;}
.ph-dark{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.5);color:#fff;}
.tbc{outline:2px dashed #d2003c;outline-offset:2px;}

/* ---------- CTA glow (exactly four buttons) ---------- */
@keyframes glowPulse{
  0%,100%{box-shadow:rgba(122,98,222,.34) 0 8px 26px, rgba(135,223,255,.4) 0 0 0 0;}
  50%{box-shadow:rgba(122,98,222,.5) 0 12px 34px, rgba(135,223,255,.28) 0 0 26px 7px;}
}
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:13px;font-weight:900;background:var(--kio-purple);color:#fff;border:1px solid var(--kio-purple);border-radius:999px;padding:15px 26px;cursor:pointer;text-align:center;transition:transform .18s, box-shadow .18s, background .18s, color .18s;}
.btn-glow{box-shadow:rgba(122,98,222,.34) 0 8px 26px;animation:glowPulse 3.4s ease-in-out infinite;}
.btn:hover{transform:translateY(-2px);background:#87dfff;border-color:#87dfff;color:#312874;box-shadow:rgba(135,223,255,.45) 0 12px 30px;}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:100;background:#fff;height:74px;display:flex;align-items:center;}
.site-header .shell{width:100%;max-width:1240px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;width:186px;flex-shrink:0;}
.brand svg{width:100%;height:auto;}
.main-nav ul{display:flex;gap:26px;align-items:center;}
.main-nav a{font-family:var(--font-body);font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--kio-indigo);transition:color .18s;}
.main-nav a:hover{color:var(--kio-purple);}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--kio-indigo);margin:5px 0;transition:transform .2s, opacity .2s;}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--kio-indigo);padding:64px 0 96px;color:#fff;}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 3px, transparent 3px 40px);}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
/* Filter over the hero video, added 5 Sept 2026. Layer 2 was missing: the
   stripe sits at 0, the video at 1, the text at 3.
   These values are lifted exactly from the Manus site's .kio4-hero-tint,
   at Mel's request, so the two heroes match. Note it runs LEFT TO RIGHT,
   not top to bottom: dark where the copy sits, nearly clear on the right
   so the footage actually shows through.
   NOTE: the diagonal stripe belongs to the fallback background ONLY. Do not
   layer it over the video, it was tried on 5 Sept and rejected. */
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg, rgba(25,19,75,.88) 0%, rgba(25,19,75,.88) 32%, rgba(49,40,116,.68) 64%, rgba(49,40,116,.34) 100%);}
.hero .shell{position:relative;z-index:3;max-width:1240px;margin:0 auto;padding:0 24px;}
.hero-videoslot{position:absolute;inset:0;z-index:1;border:2px dashed rgba(255,255,255,.22);}
.videoslot-tag{position:absolute;top:14px;left:16px;font-family:var(--font-body);font-size:9.5px;font-weight:800;letter-spacing:.04em;color:rgba(255,255,255,.6);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:5px 9px;}
.video-pause{position:absolute;top:20px;right:24px;z-index:5;background:rgba(49,40,116,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.44);border-radius:999px;padding:9px 13px;font-family:var(--font-body);font-size:11px;font-weight:900;color:#fff;cursor:pointer;}

/* Hero text moved left and reduced to match the Manus hero, 6 Sept 2026.
   Manus runs its headline at 48px, left-aligned, line-height 0.98, in an
   800px column. Values read off .kio4-hero-opening, not estimated. */
.hero-eyebrow{font-family:var(--font-body);font-weight:800;font-size:13px;letter-spacing:.2em;color:var(--kio-pale-blue);text-align:center;margin-bottom:20px;text-transform:uppercase;}
/* width:fit-content sizes the h1 to its longest line, which is line one
   ("You've created your new body.", 629px measured). Lines two and three
   then centre inside that width, under line one. 6 Sept 2026. */
.hero-headline{text-align:left;color:#fff;font-size:44px;line-height:1.04;width:fit-content;max-width:800px;margin:0 0 48px;}
.hero-headline .l2{display:block;text-align:center;}
.hero-headline .accent{font-size:1.14em;}
/* Eyebrow-sized, upright, words pulled back together and centred inside
   the 629px width of the headline's first line. 6 Sept 2026. */
.hero-strapline{display:flex;justify-content:center;align-items:baseline;gap:18px;width:629px;max-width:100%;font-family:var(--font-body);font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--kio-pale-blue);margin:0 0 20px;}
.hero-strapline .sep{font-size:1.9em;font-weight:900;line-height:0;opacity:.8;}
/* 36px, the largest that keeps both lines on one line each inside the
   732px column. Measured: line one 562px, line two 717px. Was 30px when
   the column was only 616px wide. 6 Sept 2026. */
.hero-closing{text-align:left;font-size:44px;line-height:1.26;color:#fff;margin:0 0 34px;width:fit-content;max-width:100%;}
/* Line one sits left; lines two and three centre beneath it, the same
   way the main headline works. 6 Sept 2026. */
.hero-closing .l2{display:block;text-align:center;font-family:var(--font-accent);font-style:italic;font-weight:500;color:var(--kio-pale-blue);}
.hero-closing .hilite{color:#fff;font-size:1.14em;position:relative;display:inline-block;}

/* Photos now span both rows on the right, so they sit level with the
   headings rather than starting below them. Matches the Manus hero. */
/* Photo column narrowed to 420px, which is exactly what the two photos
   occupy at full size, and the gap tightened to 40px. That hands 116px
   back to the left column (616px -> 732px) so the second header fits at
   36px instead of 30px. Photos are unchanged in size and now sit flush
   to the right edge. To revert: 520px column, 56px gap, and put the 80px
   left offsets back on .photo-then / .photo-now. 6 Sept 2026. */
.hero-body{display:grid;grid-template-columns:minmax(0,1fr) 420px;grid-template-areas:"closing photos" "copy photos";column-gap:40px;align-items:start;}
.hero-closing{grid-area:closing;}
.hero-copy{grid-area:copy;}
.hero-right{grid-area:photos;align-self:stretch;display:flex;flex-direction:column;}
.hero-copy p{font-family:var(--font-body);font-size:17px;line-height:1.75;color:rgba(255,255,255,.93);margin:0 0 20px;}
.hero-copy strong{font-weight:800;color:#fff;}
.hero-subheading{font-family:var(--font-body);font-size:19px;font-weight:700;line-height:1.6;color:var(--kio-pale-blue);margin:28px 0 34px;}

/* 20px, matching the gap above the button (.hero-copy p margin-bottom),
   so paragraph-to-button and note-to-box are equal. 6 Sept 2026. */
.cta-pair{display:flex;gap:60px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;}
.cta-group{width:316px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.cta-group .btn{width:100%;}
.hero-copy .cta-note{font-family:var(--font-body);font-size:13px;font-weight:900;color:rgba(255,255,255,.78);white-space:nowrap;margin:0;}

/* Rolling single-line marquee, 6 Sept 2026. The text is duplicated in the
   markup and the track slides exactly -50%, so it loops seamlessly. Box is
   now one line deep instead of two, and the wash is a heavier indigo
   rather than the pale blue, which was reading as light blue. */
.stat76{position:relative;z-index:3;margin:56px 0 -96px;background:rgba(25,19,75,.86);border-top:1px solid rgba(135,223,255,.34);border-bottom:1px solid rgba(135,223,255,.34);padding:15px 0;font-family:var(--font-body);font-size:21px;font-weight:700;color:#fff;line-height:1.4;overflow:hidden;white-space:nowrap;}
.stat76-track{display:inline-flex;width:max-content;animation:stat76roll 34s linear infinite;}
.stat76-item{padding-right:90px;}
.stat76:hover .stat76-track{animation-play-state:paused;}
@keyframes stat76roll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* 6 identical copies. -50% = exactly 3 of them, so it re-enters seamlessly. */
@media (prefers-reduced-motion:reduce){
  .stat76-track{animation:none;}
  .stat76{white-space:normal;padding:20px 24px;text-align:center;}
  .stat76-item ~ .stat76-item{display:none;}
}

/* Pulled up to sit level with the headline, and pushed right, 6 Sept 2026.
   The photos live in the lower grid row, so the negative margin is what
   lifts them alongside "You've created your new body." */
/* -139px centres the photo block between the top of the headline and the top of the CTA. */
.hero-photos{position:relative;height:560px;margin-top:-139px;flex-shrink:0;}
/* Sits in the space under the photos. The padding accounts for .stat76's 56px top margin
   and the 9px between the lowest photo edge and the bottom of its column box, so the block
   centres on the gap you can actually see - photo edge to band - not on the grid row. */
.hero-press{flex:1;padding-top:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
.hero-press-title{font-family:var(--font-head);font-size:20px;color:#fff;margin:0;text-align:center;}
.hero-press-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 16px;}
/* Heights set per logo, not uniformly: YOU is stacked (1.8:1) and the Mail is a long
   wordmark (6:1), so equal heights would make one tiny and the other enormous. */
.hero-press-logos img{width:auto;display:block;opacity:.92;}
.hero-press-logos .pl-you{height:32px;}
.hero-press-logos .pl-bbc{height:23px;}
.hero-press-logos .pl-mail{height:19px;}
.hero-press-logos .pl-mirror{height:23px;}
.photo-then{position:absolute;top:0;left:0;width:236px;height:478px;background:#fff;border-radius:26px;padding:8px;transform:rotate(-3deg);box-shadow:rgba(26,18,77,.35) 0 24px 62px;}
.photo-now{position:absolute;top:170px;left:196px;width:224px;height:375px;background:#fff;border-radius:26px;padding:8px;transform:rotate(3deg);box-shadow:rgba(26,18,77,.35) 0 24px 62px;}
.photo-then img,.photo-now img{width:100%;height:100%;border-radius:19px;object-fit:contain;}
.photo-then .ph,.photo-now .ph{width:100%;height:100%;border-radius:19px;}

/* Floating CTA */
.floating-cta{position:fixed;right:22px;bottom:22px;z-index:120;display:flex;align-items:center;gap:12px;background:var(--kio-purple);color:#fff;border:0;border-radius:999px;padding:14px 18px;font-family:var(--font-body);font-size:13.3px;font-weight:400;cursor:pointer;box-shadow:rgba(49,40,116,.3) 0 14px 34px;transition:transform .18s;}
.floating-cta:hover{transform:translateY(-2px);}
.floating-cta .fc-icon{width:34px;height:34px;border-radius:50%;background:var(--kio-pale-blue);flex-shrink:0;}
.floating-cta .fc-text{text-align:left;line-height:1.3;}
.floating-cta .fc-text b{display:block;font-weight:800;}
.floating-cta .fc-arrow{font-size:17px;}

/* ==========================================================================
   2. 4 WAYS IN
   ========================================================================== */
.ways{background:transparent;padding:72px 0;}
.ways .shell{max-width:1112px;margin:0 auto;padding:0 24px;}
.ways-eyebrow{font-family:var(--font-body);font-size:12px;font-weight:800;letter-spacing:.96px;color:var(--kio-indigo);text-align:center;margin-bottom:14px;text-transform:uppercase;}
.ways h2{font-size:42px;color:var(--kio-indigo);text-align:center;margin-bottom:18px;}
.ways-intro{font-family:var(--font-body);font-size:16px;color:var(--kio-body-ink);text-align:center;max-width:860px;margin:0 auto 44px;}
.ways-grid{display:grid;grid-template-columns:repeat(4,260px);gap:24px;justify-content:center;}
.way-card{position:relative;width:260px;min-height:400px;background:transparent;border:2px solid #E5E1F2;border-radius:14px;padding:28px 22px;display:flex;flex-direction:column;transition:transform .2s, box-shadow .2s;}
.way-card:hover{transform:translateY(-4px);box-shadow:rgba(49,40,116,.14) 0 16px 36px;}
.way-label{font-family:var(--font-body);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6B6680;margin-bottom:8px;min-height:16px;}
.way-name{font-family:var(--font-head);font-weight:500;font-size:23px;color:var(--kio-indigo);margin-bottom:10px;line-height:1.15;}
.way-price{font-family:var(--font-head);font-weight:500;font-size:30px;color:var(--kio-indigo);line-height:1.1;}
.way-price .was{font-family:var(--font-body);font-size:14px;font-weight:600;color:#6B6680;text-decoration:line-through;margin-left:8px;}
.way-avail{font-family:var(--font-body);font-size:12px;font-weight:700;color:var(--kio-purple);margin:8px 0 12px;line-height:1.4;min-height:32px;}
.way-desc{font-family:var(--font-body);font-size:14px;color:#6B6680;line-height:1.6;flex-grow:1;margin-bottom:16px;}
.way-btn{position:relative;display:block;width:100%;text-align:center;background:var(--kio-purple);color:#fff;border-radius:999px;padding:12px 14px;font-family:var(--font-body);font-size:13px;font-weight:900;}
.way-btn::after{content:"";position:absolute;inset:0;z-index:2;}
.way-card:hover .way-btn{background:#87dfff;color:#312874;}
.ways-vat{font-family:var(--font-body);font-size:14px;color:#6B6680;text-align:center;margin-top:28px;}
.ways-closing{font-family:var(--font-head);font-weight:500;font-size:58px;line-height:60.32px;letter-spacing:-2.03px;color:var(--kio-indigo);max-width:950px;margin:56px auto 0;text-align:center;}

/* ==========================================================================
   3. WHO THIS IS FOR
   ========================================================================== */
.whofor{background:var(--kio-lilac);padding:64px 0;}
.whofor .shell{max-width:820px;margin:0 auto;padding:0 24px;text-align:left;}
.whofor h2{font-size:42px;color:var(--kio-indigo);margin-bottom:26px;}
.whofor li{position:relative;padding:9px 0 9px 30px;font-family:var(--font-body);font-size:16px;color:var(--kio-body-ink);}
.whofor li::before{content:"→";position:absolute;left:0;color:var(--kio-pale-blue);font-weight:800;}
.whofor-closing{font-family:var(--font-body);font-size:16px;color:var(--kio-body-ink);margin-top:26px;}

/* ==========================================================================
   8. QUOTE (positioned between Who this is for and DISCOVER)
   ========================================================================== */
.quote{position:relative;width:100%;min-height:760px;padding:96px 24px;display:flex;align-items:center;justify-content:center;background:linear-gradient(110deg, rgba(49,40,116,.82), rgba(49,40,116,.34)), url("../images/quote-bg.webp"), #2b2360;background-size:cover;background-position:center;}
.quote .inner{max-width:1080px;text-align:center;position:relative;z-index:2;}
.quote blockquote{font-family:var(--font-head);font-weight:500;font-size:56px;line-height:1.2;color:#fff;margin:0 0 46px;}
.quote-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;}
.quote-bgnote{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;}

/* ==========================================================================
   4. DISCOVER…
   ========================================================================== */
.discover{background:var(--kio-pale-blue);padding:90px 0;}
.discover-box{width:1180px;max-width:calc(100% - 48px);margin:0 auto;background:var(--kio-gradient);border:8px solid #fff;border-radius:34px;padding:72px;box-shadow:rgba(49,40,116,.2) 0 26px 64px;}
.discover h2{font-size:80px;line-height:76px;color:var(--kio-indigo);text-align:center;margin-bottom:44px;}
.discover-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.discover-grid li{position:relative;background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.48);border-radius:18px;padding:20px 20px 20px 48px;font-family:var(--font-body);font-weight:900;font-size:15.5px;color:var(--kio-indigo);line-height:1.5;}
.discover-grid li::before{content:"✓";position:absolute;left:20px;top:20px;color:var(--kio-purple);font-weight:900;}

/* ==========================================================================
   5. MEL
   ========================================================================== */
.mel{background:#fff;padding:168px 0;}
.mel .shell{max-width:1180px;margin:0 auto;padding:0 24px;}
.mel h2{font-size:82px;color:var(--kio-indigo);text-align:center;margin:0 125px 58px;line-height:1.05;}
.mel-photos{display:grid;grid-template-columns:426px 426px;gap:28px;justify-content:center;margin-bottom:110px;}
.mel-photos figure{margin:0;width:444px;height:547px;background:#fff;border:8px solid #fff;border-radius:26px;box-shadow:rgba(26,18,77,.35) 0 24px 62px;overflow:hidden;}
.mel-photos figure:first-child{transform:rotate(-2deg);}
.mel-photos figure:last-child{transform:rotate(2deg);}
.mel-photos img,.mel-photos .ph{width:100%;height:100%;object-fit:cover;border-radius:19px;}
/* Real images replaced the last 25 placeholders, 6 Sept 2026. These two
   wrappers used .ph for their sizing, so the images need it instead. */
.faq-photos .fp img{width:100%;height:100%;object-fit:cover;display:block;}
.tstm-photostack .sq{object-fit:cover;}

.timeline{position:relative;width:960px;max-width:100%;margin:0 auto;display:grid;row-gap:24px;}
.timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,#87DFFF,#7A62DE,#87DFFF);}
.tl-card{position:relative;width:438px;background:#fff;border:1px solid rgba(49,40,116,.18);border-radius:20px;padding:22px;font-family:var(--font-body);font-size:16px;color:var(--kio-indigo);line-height:1.6;box-shadow:rgba(49,40,116,.08) 0 12px 32px;}
.tl-card.l{justify-self:start;}
.tl-card.r{justify-self:end;}
.tl-card::after{content:"";position:absolute;top:26px;width:13px;height:13px;border-radius:50%;background:var(--kio-purple);box-shadow:0 0 0 2px var(--kio-pale-blue);}
.tl-card.l::after{left:calc(100% + 35.5px);}
.tl-card.r::after{right:calc(100% + 35.5px);}
.tl-card.punch{border:1px solid rgba(122,98,222,.3);font-family:var(--font-head);font-weight:500;font-size:22px;line-height:1.25;}

.proof{background:var(--kio-indigo);border-radius:30px;padding:70px;width:980px;max-width:100%;margin:146px auto 0;}
.proof h3{font-size:52px;color:#fff;text-align:left;margin-bottom:38px;line-height:1.1;}
.proof li{position:relative;padding:14px 0 14px 34px;font-family:var(--font-body);font-size:17px;color:rgba(255,255,255,.94);line-height:1.6;}
.proof li::before{content:"→";position:absolute;left:0;color:var(--kio-pale-blue);font-weight:800;}

/* ==========================================================================
   6. MEDIA
   ========================================================================== */
.media{background:var(--kio-gradient);padding:136px 0;}
.media .shell{max-width:1180px;margin:0 auto;padding:0 24px;}
.media h2{font-size:82px;color:var(--kio-indigo);line-height:80.36px;letter-spacing:-3.28px;text-align:center;margin-bottom:54px;}
.press-strip{width:760px;max-width:100%;height:150px;margin:0 auto 74px;object-fit:contain;}
.media-grid{display:grid;grid-template-columns:558px 372px;gap:70px;justify-content:center;}
.media-article{width:558px;height:1245px;border:8px solid rgba(255,255,255,.94);border-radius:22px;box-shadow:rgba(49,40,116,.2) 0 22px 54px;object-fit:contain;background:#fff;}
.media-talk{width:372px;height:253px;border:8px solid #fff;border-radius:24px;box-shadow:rgba(49,40,116,.23) 0 20px 48px;object-fit:cover;margin-bottom:26px;}
.media-pairrow{display:flex;gap:16px;}
.media-small{width:178px;height:223px;border:6px solid #fff;border-radius:18px;box-shadow:rgba(49,40,116,.19) 0 16px 34px;object-fit:cover;}

/* ==========================================================================
   7. PODCAST
   ========================================================================== */
.podcast{background:var(--kio-indigo);padding:76px 0;}
.podcast .shell{max-width:1180px;margin:0 auto;padding:0 24px;}
.podcast-grid{display:grid;grid-template-columns:429.773px 672.227px;gap:78px;align-items:center;}
.pod-icon{width:54px;height:54px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:22px;}
.pod-icon svg{width:28px;height:28px;stroke:var(--kio-indigo);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.podcast p{font-family:var(--font-body);font-size:18px;color:rgba(255,255,255,.88);line-height:1.7;margin:0;}
.podcast p b{font-weight:900;color:#fff;}
.pod-images{display:flex;gap:18px;align-items:flex-start;}
.pod-chart{width:477px;height:200px;border:5px solid rgba(255,255,255,.93);border-radius:19px;box-shadow:rgba(14,10,47,.34) 0 16px 38px;object-fit:contain;background:#fff;}
.pod-photo{width:177px;height:221px;border:5px solid rgba(255,255,255,.93);border-radius:19px;box-shadow:rgba(14,10,47,.34) 0 16px 38px;object-fit:cover;}
.pod-buttons{display:flex;gap:14px;justify-content:center;margin-top:46px;}
.pod-buttons .btn{width:210.156px;background:var(--kio-pale-blue);border-color:var(--kio-pale-blue);color:var(--kio-indigo);}

/* ==========================================================================
   9. AN HONEST FILTER
   ========================================================================== */
.filter{background:var(--kio-gradient);padding:154px 0;}
.filter .shell{max-width:1180px;margin:0 auto;padding:0 24px;}
.filter-head{text-align:left;margin:0 0 94px;}
.filter-eyebrow{font-family:var(--font-body);font-size:12px;font-weight:900;letter-spacing:1.92px;color:var(--kio-indigo);margin-bottom:18px;text-transform:uppercase;}
.filter h2{font-size:50px;line-height:60px;color:var(--kio-indigo);max-width:892px;}
.filter-cards{display:grid;grid-template-columns:576px 576px;gap:28px;align-items:stretch;justify-content:center;}
.filter-card{background:rgba(255,255,255,.83);border:1px solid rgba(255,255,255,.62);border-radius:28px;padding:52px;box-shadow:rgba(49,40,116,.17) 0 20px 52px;height:487px;display:flex;flex-direction:column;}
.filter-card h3{font-size:49px;color:var(--kio-indigo);margin-bottom:26px;}
.filter-card ul{display:flex;flex-direction:column;flex-grow:1;}
.filter-card.in ul{gap:15px;}
.filter-card.out ul{justify-content:space-between;}
.filter-card li{position:relative;padding-left:30px;font-family:var(--font-body);font-size:14.5px;color:var(--kio-indigo);line-height:1.55;}
.filter-card li svg{position:absolute;left:0;top:3px;width:18px;height:18px;stroke:var(--kio-indigo);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* ==========================================================================
   10. TESTIMONIALS
   ========================================================================== */
.tstm{background:var(--kio-indigo);padding:140px 0;text-align:center;}
.tstm .shell{max-width:1180px;margin:0 auto;padding:0 24px;}
.tstm-eyebrow{font-family:var(--font-body);font-weight:700;letter-spacing:2.28px;color:var(--kio-pale-blue);font-size:13px;text-transform:uppercase;margin-bottom:20px;}
.tstm-headrow{display:flex;align-items:center;justify-content:center;gap:48px;margin-bottom:34px;flex-wrap:wrap;}
.tstm h2{font-size:56px;color:#fff;}
.tstm-photostack{position:relative;width:200px;height:180px;flex-shrink:0;}
.tstm-photostack .sq{position:absolute;width:130px;height:130px;border:6px solid #fff;border-radius:16px;box-shadow:rgba(0,0,0,.3) 0 14px 34px;}
.tstm-photostack .sq1{top:0;left:0;transform:rotate(-4deg);}
.tstm-photostack .sq2{bottom:0;right:0;transform:rotate(4deg);}
.tstm-sub{font-family:var(--font-head);font-weight:500;font-size:30px;color:#fff;margin-bottom:34px;}
.tstm-honesty{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:36px 40px;text-align:left;font-family:var(--font-body);font-size:16.5px;color:rgba(255,255,255,.93);line-height:1.75;max-width:980px;margin:0 auto 58px;}
.proof-panel{background:var(--kio-pale-blue);border-radius:28px;padding:32px;margin-bottom:64px;}
.proof-label{font-family:var(--font-body);font-weight:900;letter-spacing:2px;font-size:13px;color:var(--kio-indigo);text-align:center;margin-bottom:24px;}
.proof-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.proof-card{background:#fff;border-radius:20px;padding:30px 28px;box-shadow:rgba(49,40,116,.1) 0 8px 22px;text-align:left;}
.proof-card h4{font-family:var(--font-body);font-size:12px;font-weight:900;letter-spacing:1.6px;color:var(--kio-purple);margin-bottom:14px;text-transform:uppercase;}
.proof-card p{font-family:var(--font-body);font-size:15px;color:var(--kio-indigo);line-height:1.65;margin:0 0 12px;}
.proof-card .tail{font-family:var(--font-body);font-style:italic;font-size:13.5px;color:#6B6680;margin:0;}
.tstm-bridge{font-family:var(--font-body);font-size:17px;color:rgba(255,255,255,.93);margin-bottom:34px;}
.gallery-panel{background:var(--kio-pale-blue);border-radius:28px;padding:32px;}
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 44px)/3);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;}
.gallery::-webkit-scrollbar{display:none;}
.g-card{background:#fff;border-radius:20px;padding:30px 28px;box-shadow:rgba(49,40,116,.1) 0 8px 22px;text-align:left;scroll-snap-align:start;}
.g-card h4{font-family:var(--font-body);font-size:12px;font-weight:900;letter-spacing:1.6px;color:var(--kio-purple);margin-bottom:14px;text-transform:uppercase;}
.g-card p{font-family:var(--font-body);font-size:14.5px;color:var(--kio-indigo);line-height:1.65;margin:0 0 14px;}
.g-card .who{font-family:var(--font-body);font-size:13px;font-weight:800;color:#6B6680;margin:0;}
.dots{display:flex;gap:7px;justify-content:center;margin-top:24px;}
.dots button{height:7px;width:7px;border-radius:999px;border:0;background:rgba(49,40,116,.28);cursor:pointer;padding:0;transition:width .2s, background .2s;}
.dots button[aria-current="true"]{width:24px;background:var(--kio-indigo);}

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.faq{background:var(--kio-gradient);padding:158px 0;}
.faq .shell{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:385.914px 686.086px;gap:108px;align-items:start;}
.faq h2{font-size:82px;color:var(--kio-indigo);margin-bottom:14px;}
.faq-sub{font-family:var(--font-head);font-weight:500;font-size:34px;color:var(--kio-indigo);line-height:1.2;margin-bottom:40px;}
.faq-photos{position:relative;width:340px;height:350px;}
.faq-photos .fp{position:absolute;width:210px;height:262px;background:#fff;border:7px solid #fff;border-radius:22px;box-shadow:rgba(49,40,116,.2) 0 18px 42px;overflow:hidden;}
.faq-photos .fp1{top:0;left:0;transform:rotate(-3deg);}
.faq-photos .fp2{bottom:0;right:0;transform:rotate(3deg);}
.faq-photos .ph{width:100%;height:100%;}
.faq details{border-bottom:1px solid rgba(49,40,116,.3);padding:22px 0;}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;font-family:var(--font-head);font-weight:400;font-size:29px;color:var(--kio-indigo);line-height:1.25;min-height:44px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .mk{flex-shrink:0;font-family:var(--font-body);font-weight:700;font-size:28px;line-height:1;}
.faq details[open] summary .mk::before{content:"−";}
.faq summary .mk::before{content:"+";}
.faq .answer{font-family:var(--font-body);font-size:17px;color:var(--kio-indigo);line-height:1.75;padding-top:16px;}
.faq .answer p{margin:0 0 12px;}
.faq .answer p:last-child{margin:0;}
.faq .answer a{color:var(--kio-purple);font-weight:800;text-decoration:underline;}
.signposts{display:grid;grid-template-columns:333px 333px;gap:20px;margin-top:44px;}
.signpost{position:relative;width:333px;height:168px;background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.58);border-radius:22px;padding:28px;display:flex;align-items:center;font-family:var(--font-head);font-weight:500;font-size:24px;color:var(--kio-indigo);transition:transform .2s, box-shadow .2s;}
.signpost:hover{transform:translateY(-3px);box-shadow:rgba(49,40,116,.16) 0 14px 32px;}
.signpost a::after{content:"";position:absolute;inset:0;}

/* ==========================================================================
   12. NEWSLETTER
   ========================================================================== */
.news{background:#fff;padding:142px 0;}
.news .shell{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:442.102px 220px 397.891px;gap:60px;align-items:center;}
.news-eyebrow{font-family:var(--font-body);font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--kio-purple);margin-bottom:16px;text-transform:uppercase;}
.news h2{font-size:82px;color:var(--kio-indigo);line-height:1.02;margin-bottom:24px;}
.news p{font-family:var(--font-body);font-size:16px;color:var(--kio-body-ink);line-height:1.75;margin:0;}
.news-photo{width:206px;height:320px;object-fit:cover;}
.news-form{background:var(--kio-gradient);border:1px solid rgba(255,255,255,.58);border-radius:28px;padding:42px;width:398px;max-width:100%;}
.news-form label{display:block;font-family:var(--font-body);font-size:13px;font-weight:800;color:var(--kio-indigo);margin-bottom:7px;}
.news-form input[type=text],.news-form input[type=email]{width:100%;background:rgba(255,255,255,.96);border:0;border-radius:13px;padding:14px 16px;font-family:var(--font-body);font-size:15px;margin-bottom:18px;min-height:44px;}
.consent{display:flex;gap:10px;align-items:flex-start;font-family:var(--font-body);font-size:12.5px;color:var(--kio-indigo);line-height:1.5;margin-bottom:20px;}
.consent input{margin-top:3px;width:18px;height:18px;flex-shrink:0;}
.news-form .btn{width:100%;}

/* ==========================================================================
   13. SOCIAL
   ========================================================================== */
.social{background:#fff;padding:120px 0;}
.social .shell{max-width:1180px;margin:0 auto;padding:0 24px;}
.social h2{font-size:52px;letter-spacing:-2.1px;color:var(--kio-indigo);text-align:center;margin-bottom:44px;}
.social-icons{display:flex;gap:34px;justify-content:center;align-items:center;margin-bottom:76px;flex-wrap:wrap;}
.social-icons a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;transition:transform .18s;}
.social-icons a:hover{transform:translateY(-3px);}
.social-icons svg{width:34px;height:34px;}
.tiktok-grid{display:grid;grid-template-columns:repeat(3,260px);gap:20px;justify-content:center;}
.tt-card{position:relative;width:260px;height:325px;background:var(--kio-indigo);border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .2s;}
.tt-card:hover{transform:translateY(-4px);}
.tt-card img{width:100%;height:100%;object-fit:contain;}
.tt-card .ph{width:100%;height:100%;}
.tt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;}
.tt-play::after{content:"";border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px;}
.tt-card a::after{content:"";position:absolute;inset:0;z-index:3;}

/* ==========================================================================
   14. CONTACT
   ========================================================================== */
.contact{background:var(--kio-gradient);padding:146px 24px;}
.contact .shell{max-width:760px;margin:0 auto;}
.contact h2{font-size:82px;color:var(--kio-indigo);margin-bottom:18px;}
.contact-sub{font-family:var(--font-body);font-size:15px;color:#54507A;margin-bottom:36px;}
.contact form{width:100%;}
.field-row{display:flex;gap:20px;margin-bottom:18px;}
.field-row .field{width:255px;}
.field{margin-bottom:18px;}
.contact label{display:block;font-family:var(--font-body);font-size:13px;font-weight:800;color:var(--kio-indigo);margin-bottom:7px;}
.contact input,.contact textarea{width:100%;background:#fff;border:1px solid rgba(49,40,116,.24);border-radius:13px;padding:15px 16px;font-family:var(--font-body);font-size:15px;min-height:55px;}
.contact textarea{min-height:140px;resize:vertical;}
.contact .btn{margin-top:8px;}
.contact-email{font-family:var(--font-body);font-size:18px;font-weight:800;color:var(--kio-indigo);margin-top:32px;}
.contact-email a{color:var(--kio-purple);font-weight:900;}
.contact-note{font-family:var(--font-body);font-size:14px;color:var(--kio-indigo);margin-top:14px;}

/* ==========================================================================
   15. FINAL CLOSING
   ========================================================================== */
.closing{position:relative;background:var(--kio-indigo);padding:150px 24px;overflow:hidden;text-align:center;}
.closing::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:900px;height:900px;background:radial-gradient(circle, rgba(135,223,255,.20) 0%, rgba(135,223,255,0) 62%);pointer-events:none;}
.closing .inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;}
.closing-eyebrow{font-family:var(--font-body);font-weight:700;letter-spacing:2.28px;font-size:13px;color:var(--kio-pale-blue);margin-bottom:26px;text-transform:uppercase;}
.closing h2{font-size:38px;color:#fff;line-height:1.42;margin-bottom:32px;}
.closing h2 .accent{white-space:nowrap;}
.closing p{font-family:var(--font-body);font-size:17px;color:rgba(255,255,255,.9);line-height:1.8;max-width:900px;margin:0 auto 40px;}
.closing-ctas{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:22px;}
.closing-ctas .btn{min-width:240px;}
.closing-strap{font-family:var(--font-body);font-size:13px;font-weight:800;color:rgba(255,255,255,.78);margin:0;}

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer{background:var(--kio-indigo);color:rgba(255,255,255,.86);padding:64px 24px 48px;}
.site-footer .shell{max-width:1180px;margin:0 auto;}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;margin-bottom:36px;}
.footer-name{font-family:var(--font-head);font-weight:500;font-size:18px;color:#fff;}
.footer-name .co{font-family:var(--font-body);font-weight:600;font-size:15px;color:rgba(255,255,255,.86);}
.footer-links{display:flex;gap:26px;flex-wrap:wrap;}
.footer-links a{font-family:var(--font-body);font-size:14px;font-weight:700;color:#fff;}
.footer-links a:hover{color:var(--kio-pale-blue);}
.footer-love{font-family:var(--font-accent);font-style:italic;font-weight:500;font-size:18px;color:var(--kio-pale-blue);margin-bottom:26px;}
.footer-small{font-family:var(--font-body);font-size:12.5px;color:rgba(255,255,255,.66);line-height:1.7;margin:0;}

/* ==========================================================================
   TABLET — below 1024px use the mobile layout, sized up.
   Three exceptions: 4 Ways In 2x2, Testimonials 2 across, DISCOVER keeps 2 cols.
   ========================================================================== */
@media (max-width:1023px){
  .main-nav{display:none;}
  .nav-toggle{display:block;}
  .main-nav.open{display:block;position:absolute;top:74px;left:0;right:0;background:#fff;box-shadow:rgba(49,40,116,.16) 0 18px 40px;padding:14px 24px 22px;}
  .main-nav.open ul{flex-direction:column;gap:0;align-items:stretch;}
  .main-nav.open li{border-top:1px solid rgba(49,40,116,.12);}
  .main-nav.open a{display:block;padding:15px 0;font-family:var(--font-head);font-size:15px;}
  .nav-cta{display:block;margin-top:16px;}

  .hero-body{display:flex;flex-direction:column;gap:0;}
  .hero-right{order:1;}
  .hero-photos{margin-top:0;margin-bottom:26px;}
  .hero-press{flex:none;padding-top:0;margin-bottom:34px;}
  .hero-closing{order:2;}
  .hero-copy{order:3;}
  .hero-photos{height:auto;display:flex;justify-content:center;gap:14px;}
  .photo-then,.photo-now{position:static;transform:none;width:46%;height:auto;aspect-ratio:236/478;}
  .photo-now{aspect-ratio:224/375;}
  .cta-pair{flex-direction:column;align-items:stretch;gap:22px;}
  .cta-group{width:100%;}

  .ways-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .way-card{width:100%;}
  .media-grid{grid-template-columns:1fr;gap:34px;}
  .media-article{width:100%;height:auto;}
  .media-talk{width:100%;height:auto;}
  .podcast-grid{grid-template-columns:1fr;gap:40px;}
  .pod-chart{width:100%;height:auto;}
  .filter-cards{grid-template-columns:1fr;}
  .filter-card{height:auto;}
  .faq .shell{grid-template-columns:1fr;gap:50px;}
  .signposts{grid-template-columns:1fr 1fr;}
  .signpost{width:100%;}
  .news .shell{grid-template-columns:1fr;gap:40px;}
  .news-form{width:100%;}
  .proof-cards{grid-template-columns:1fr 1fr;}
  .gallery{grid-auto-columns:calc((100% - 22px)/2);}
  .tiktok-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .tt-card{width:100%;}
  .timeline{width:100%;}
  .timeline::before{left:16px;}
  .tl-card{width:calc(100% - 46px);justify-self:end !important;}
  .tl-card::after{left:-38px !important;right:auto !important;}
  .mel h2{margin:0 0 44px;font-size:56px;}
  .mel-photos{grid-template-columns:1fr 1fr;gap:18px;}
  .mel-photos figure{width:100%;height:auto;aspect-ratio:444/547;}
  .proof{padding:44px;margin-top:80px;}
}

/* ==========================================================================
   MOBILE — reference width 390px
   ========================================================================== */
@media (max-width:767px){
  html{scroll-padding-top:80px;}
  body{padding-bottom:0;}

  /* M1 header + floating CTA */
  .floating-cta{left:0;right:0;bottom:0;border-radius:0;justify-content:center;padding:11px 16px;box-shadow:rgba(49,40,116,.3) 0 -6px 20px;}

  /* M2 hero */
  .hero{padding:34px 0 54px;}
  .hero-headline{font-size:26px;margin-bottom:34px;}
  .hero-strapline{font-size:12px;margin-bottom:24px;}
  .hero-closing{font-size:26px;margin-bottom:26px;}
  .hero-copy p{font-size:12px;line-height:1.8;}
  .hero-subheading{font-size:14px;}
  .stat76{font-size:17px;padding:14px 0;margin:34px 0 -64px;}
  .stat76-item{padding-right:50px;}
  .hero-photos{gap:10px;margin-bottom:26px;}
  .photo-then,.photo-now{width:63%;padding:6px;border-radius:19px;}
  .hero-order{display:flex;flex-direction:column;}
  .hero-copy .cta-note{white-space:normal;text-align:center;}

  /* M4 */
  .ways{padding:44px 0;}
  .ways-grid{grid-template-columns:1fr;gap:11px;}
  .ways h2{font-size:26px;}
  .ways-closing{font-size:26px;line-height:1.2;letter-spacing:-.6px;margin-top:36px;}
  .way-card{min-height:0;}

  /* M5 DISCOVER, no box */
  .discover{padding:24px 16px;background:var(--kio-gradient);}
  .discover-box{width:100%;max-width:100%;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;}
  .discover h2{font-size:32px;line-height:1.06;margin-bottom:24px;}
  .discover-grid{grid-template-columns:1fr;gap:12px;}

  /* M6 */
  .whofor{padding:40px 0;}
  .whofor h2{font-size:19px;}
  .whofor li,.whofor-closing{font-size:11.5px;}

  /* Quote */
  .quote{min-height:0;padding:64px 20px;}
  .quote blockquote{font-size:24px;margin-bottom:30px;}
  .quote-buttons{flex-direction:column;}
  .quote-buttons .btn{width:100%;}

  /* M7 media */
  .media{padding:56px 0;}
  .media h2{font-size:22px;line-height:1.2;letter-spacing:-.6px;margin-bottom:26px;}
  .press-strip{height:auto;margin-bottom:34px;}
  .media-article-wrap{position:relative;cursor:zoom-in;}
  .media-article{height:158px;object-fit:cover;object-position:top;border-width:5px;}
  .media-article-fade{display:flex !important;position:absolute;left:0;right:0;bottom:0;height:64px;border-radius:0 0 16px 16px;background:linear-gradient(180deg, rgba(49,40,116,0), rgba(49,40,116,.92));align-items:flex-end;justify-content:center;padding-bottom:10px;font-family:var(--font-body);font-size:12px;font-weight:800;color:#fff;}
  .media-talk{height:112px;border-width:5px;}
  .media-pairrow{gap:10px;}
  .media-small{width:50%;height:auto;aspect-ratio:178/223;}

  /* M8 podcast */
  .podcast{padding:48px 0;}
  .podcast-grid{gap:26px;}
  .pod-lead{display:flex;gap:14px;align-items:flex-start;}
  .pod-icon{width:38px;height:38px;border-radius:13px;margin-bottom:0;flex-shrink:0;}
  .pod-icon svg{width:20px;height:20px;}
  .podcast p{font-size:13px;}
  .pod-images{flex-direction:column;align-items:center;gap:14px;}
  .pod-chart{width:100%;height:105px;border-width:4px;}
  .pod-photo{width:50%;height:auto;aspect-ratio:177/221;border-width:4px;}
  .pod-buttons{flex-direction:column;margin-top:26px;}
  .pod-buttons .btn{width:100%;min-height:44px;}

  /* M9 Mel */
  .mel{padding:56px 0;}
  .mel h2{font-size:26px;margin:0 0 26px;}
  .mel-photos{grid-template-columns:1fr;gap:14px;margin-bottom:44px;}
  .mel-photos figure{width:100%;border-width:6px;border-radius:19px;}
  .timeline{row-gap:10px;}
  .timeline::before{display:none;}
  .tl-card{width:100% !important;justify-self:stretch !important;font-size:9.5px;padding:14px;border-radius:14px;}
  .tl-card::after{display:none;}
  .tl-card.punch{font-size:13px;}
  .proof{padding:20px;border-radius:20px;margin-top:44px;}
  .proof h3{font-size:19px;margin-bottom:18px;}
  .proof li{font-size:10px;padding:8px 0 8px 22px;}

  /* M10 filter */
  .filter{padding:56px 0;background:linear-gradient(150deg, rgb(92,225,235) 0%, rgb(112,201,242) 34%, rgb(140,82,255) 100%);}
  .filter-head{margin-bottom:34px;}
  .filter h2{font-size:21px;line-height:1.3;max-width:none;}
  .filter h2 .accent{color:#fff;}
  .filter h2 .squiggle path{stroke:#fff;}
  .filter-cards{gap:14px;}
  .filter-card{padding:24px;border-radius:18px;}
  .filter-card h3{font-size:20px;margin-bottom:16px;}
  .filter-card li{font-size:9.5px;padding-left:22px;}
  .filter-card li svg{width:12px;height:12px;}

  /* M11 testimonials */
  .tstm{padding:56px 0;}
  .tstm h2{font-size:26px;}
  .tstm-headrow{gap:20px;margin-bottom:22px;}
  .tstm-photostack{width:150px;height:135px;}
  .tstm-photostack .sq{width:96px;height:96px;border-width:5px;}
  .tstm-sub{font-size:17px;}
  .tstm-honesty{font-size:12px;padding:20px 22px;border-radius:18px;margin-bottom:34px;}
  .proof-panel,.gallery-panel{padding:18px;border-radius:20px;}
  .proof-cards{grid-template-columns:1fr;gap:14px;}
  .proof-card,.g-card{padding:20px 18px;border-radius:16px;}
  .proof-card p,.g-card p{font-size:12.5px;}
  .gallery{grid-auto-columns:88%;gap:14px;}
  .tstm-bridge{font-size:13px;}

  /* M12 FAQ */
  .faq{padding:56px 0;}
  .faq .shell{gap:34px;}
  .faq h2{font-size:34px;}
  .faq-sub{font-size:19px;margin-bottom:26px;}
  .faq-photos{width:100%;height:230px;margin:0 auto;}
  .faq-photos .fp{width:44%;height:190px;border-width:5px;}
  .faq summary{font-size:18px;}
  .faq .answer{font-size:13.5px;}
  .signposts{grid-template-columns:1fr;}
  .signpost{height:auto;min-height:88px;font-size:18px;padding:20px;}

  /* M13 newsletter */
  .news{padding:56px 0;}
  .news .shell{gap:26px;}
  .news h2{font-size:32px;}
  .news p{font-size:13px;}
  .news-photo{width:100%;height:150px;border-radius:16px;order:5;}
  .news-form{padding:24px;border-radius:20px;order:4;}
  .news-col1{order:1;}

  /* Social */
  .social{padding:56px 0;}
  .social h2{font-size:26px;letter-spacing:-.6px;}
  .social-icons{gap:18px;margin-bottom:40px;}
  .tiktok-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .tt-card{height:240px;}

  /* M14 contact */
  .contact{padding:56px 20px;}
  .contact h2{font-size:32px;}
  .field-row{flex-direction:column;gap:0;}
  .field-row .field{width:100%;}
  .contact input,.contact textarea{min-height:44px;}

  /* Closing */
  .closing{padding:64px 20px;}
  .closing h2{font-size:24px;line-height:1.4;}
  .closing p{font-size:13.5px;}
  .closing-ctas{flex-direction:column;}
  .closing-ctas .btn{width:100%;}

  /* M15 footer, must clear the floating bar */
  .site-footer{padding:44px 20px 96px;}
  .footer-top{flex-direction:column;align-items:flex-start;gap:22px;}
  .footer-name{display:flex;flex-direction:column;gap:2px;}
  .footer-links{flex-direction:column;gap:0;width:100%;}
  .footer-links a{display:block;padding:14px 0;border-top:1px solid rgba(255,255,255,.16);width:100%;}
  .footer-small{font-size:11.5px;}
}

/* Full screen article overlay (mobile M7) */
.overlay{position:fixed;inset:0;z-index:300;background:rgba(20,15,50,.96);display:none;overflow:auto;padding:60px 16px 40px;}
.overlay.open{display:block;}
.overlay img,.overlay .ph{max-width:100%;margin:0 auto;}
.overlay-close{position:fixed;top:14px;right:14px;z-index:310;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:50%;width:44px;height:44px;font-size:22px;cursor:pointer;line-height:1;}