/* ef-spoke-s1.css: W71 Spoke round S1 (hub order W71, ts 1790347149.234249), the Spoke page blocks built to Lulu's
   file rtv4KS2Q8FsokQN6sGmTnp ("EFW Website - Spoke Templates V1", page 01) and her handover Doc
   1pAHPjDsy_cK3uuU_RxHhI_HeJ1jzF77-jAENWoitC04 (capture evidence/w71/handover-doc.md). Record: evidence/w71/s1/README.md.
   Enqueued BY POST ID ONLY on 6745 /lip-flip-phoenix/, 6720 /botox-mesa-az/, 12999 /lumpy-lip-filler/ and 13032
   /xeomin-daxxify-guide/ (inc/enqueue.php), and on the tokened W71 stage route from the head-pinned dir.
   INERTNESS LAW: every selector below carries the spk- prefix (the page wrapper section.ef-page.spk-page or a spk- block
   class); no bare element, no :root rule, no !important. Until a payload carrying .spk-page is written, nothing here
   matches any node on the four live pages (the selector audit, evidence/w71/s1/instruments/selector-audit-w71.py).
   Tokens only: Rosewood #A4606A, Dusty Rose #DDB6B5, Spiced Mocha #895D58, Graphite #2E2926, Ivory Silk #F9F7F3,
   Blush #F6E7E4, Nude #E8DED2, Clay #BE8B7C, White, 70% White over Ivory Silk, 75% Nude over White (the var(--*) names
   are wireframe.css line 3's token set). Fonts var(--display) Playfair Display and var(--body) DM Sans only.
   Breakpoints: desktop from 880.02px (the theme's), H2 42/52 at 1440 and below (the Treatment rule), mobile at 880px and
   below; spk-dbr is a desktop-only line break (880.02px up), spk-mbr a mobile-only break at the 390 reference (480px
   and below, the Doc's "allow natural wrapping at wider widths"). */

/* ===== THE FIVE S0 DEFAULTS (the order's item 3, a to e), as the hub's picture pass (ts 1790370489.336319) and HUB
   ORDER W72 Part 1 (Lulu's answers, ts 1790354749.487119) set them. Each is switched on ONE line here. =====
   a) (W72 a) in-text links without chevrons: their default colour, Graphite #2E2926 on hover (her handover); the
      chevron links keep the W66 D3 chevron movement; buttons DM Sans 600 (her word: keep the live refinement).
      Links over the Graphite bands keep Ivory Silk on hover (Graphite on Graphite would vanish: a flag row). The
      Graphite underlined links keep the underline on hover (W72 a names no change there: a flag row).
      FLIP back to the live D3 hover (links keep their colour): --spk-s0a-hover:initial;
      FLIP the Graphite underlined links to the Doc (underline off on hover): --spk-s0a-ul-hover:none;
      (an unset custom property, the value "initial", makes var() fall back to each link's own default colour.)
   b) eyebrows over Graphite: Clay (W66 B9; W72: they stay Clay and stay flagged). FLIP: --spk-s0b-eg-dark:var(--rose);
   c) (W72 c) section colours: Explore More Blush, An Honest Look Graphite, FAQ Ivory Silk, Meet Diane 70% White over
      Ivory Silk (every Diane band sits beside an Ivory Silk band, so the 70% White keeps them apart). FLIP any value.
   d) (W72 d) the guide's CTA: the hub variant (4273:17590, "Ready to talk it through with Diane?") is the guide's ONE
      Dusty Rose CTA, in xeomin-daxxify-guide.html; the "Get Started" option and its second stage route are retired.
   e) (picture pass P2) the lower "Proudly serving" callout sits between the FAQ and Explore More (the frame's
      position, still above the Dusty Rose CTA). FLIP to below Explore More: --spk-s0e-lift:0; */
.ef-page.spk-page{
  --spk-s0a-hover:var(--graphite);
  --spk-s0a-ul-hover:initial;
  --spk-s0a-btn-w:600;
  --spk-s0b-eg-dark:var(--clay);
  --spk-s0c-honest:var(--graphite);
  --spk-s0c-diane:rgba(255,255,255,.7);
  --spk-s0c-faq:var(--ivory);
  --spk-s0c-explore:var(--blush);
  --spk-s0e-lift:1;
  --spk-nude-white:linear-gradient(rgba(232,222,210,.75),rgba(232,222,210,.75)),#fff;
}

/* ===== Page flow: a flex column so default (e) can re-order one block by a custom property. The blocks carry no
   outer margins, so nothing collapses differently. Explore More is order 2, the Dusty Rose CTA order 4, the lower
   callout 1 by default (lifted: after the FAQ, the last order-0 band) and 3 when the lift is off. ===== */
.ef-page.spk-page[data-active]{display:flex;flex-direction:column}
.ef-page.spk-page[data-active]>*{min-width:0;width:100%;box-sizing:border-box}
.spk-page .spk-o-next{order:2}
.spk-page .spk-o-low{order:calc(3 - 2 * var(--spk-s0e-lift))}
.spk-page .spk-o-cta{order:4}

/* The appended modules the live page gains from the_content filters (config/mu-plugins/ef-geo-index-links.php,
   inc/harvest-wiring.php) print AFTER section.ef-page; their words sit inside the payload in the frame's position, so
   the trailing copies are not shown once a spk-page is present (FLAG rows F-APPEND in the record). */
.spk-page ~ .ef-geo-index,.spk-page ~ .ef-hubwire{display:none}

/* ===== Shared type and band kit (the W66 B2 frame band kit, measured again from the Spoke exports). ===== */
.spk-page .spk-in{max-width:80.5rem;margin:0 auto;padding:6.875rem 2.75rem}
.spk-page .spk-c{text-align:center}
.spk-page .spk-eg{font-family:var(--body);font-size:.875rem;line-height:1.5rem;letter-spacing:.1313rem;font-weight:700;text-transform:uppercase;color:var(--spiced-mocha);margin:0 0 .625rem}
.spk-page .spk-dark .spk-eg{color:var(--spk-s0b-eg-dark)}
.spk-page .spk-h2{font-family:var(--display);font-weight:400;font-style:normal;font-size:2.8125rem;line-height:3.4375rem;letter-spacing:-.5px;color:var(--graphite);margin:0}
.spk-page .spk-dark .spk-h2{color:var(--ivory)}
.spk-page .spk-bl{font-family:var(--body);font-size:1.25rem;line-height:2rem;font-weight:400;color:rgba(46,41,38,.8);margin:0}
.spk-page .spk-bs{font-family:var(--body);font-size:1rem;line-height:1.75rem;font-weight:400;color:rgba(46,41,38,.8);margin:0}
.spk-page .spk-dark .spk-bl,.spk-page .spk-dark .spk-bs{color:var(--ivory)}
.spk-page .spk-h3i{font-family:var(--display);font-weight:500;font-style:italic;font-size:1.375rem;line-height:2.125rem;color:var(--graphite);margin:0}
.spk-page .spk-h3{font-family:var(--display);font-weight:500;font-style:normal;font-size:1.375rem;line-height:2.125rem;color:var(--graphite);margin:0}
.spk-page .spk-head{margin:0 0 3.75rem}
.spk-page .spk-head .spk-bl{margin-top:1.875rem}
.spk-page .spk-c .spk-bl{max-width:65.25rem;margin-left:auto;margin-right:auto}
.spk-page .spk-ivory{background:var(--ivory)}
.spk-page .spk-white{background:rgba(255,255,255,.7)}
.spk-page .spk-blush{background:var(--blush)}
.spk-page .spk-dbr{display:inline}
.spk-page .spk-mbr{display:none}
.spk-page .spk-m{display:none}

/* In-text links over light bands: Spiced Mocha, underlined, 600 (the Links Body styles); hover per default (a). */
.spk-page .spk-lnk a,.spk-page a.spk-lnk{color:var(--spiced-mocha);font-weight:600;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:.1875rem}
@media (hover:hover){.spk-page .spk-lnk a:hover,.spk-page a.spk-lnk:hover{color:var(--spk-s0a-hover,var(--spiced-mocha))}}
.spk-page .spk-lnk a:active,.spk-page a.spk-lnk:active{color:var(--spk-s0a-hover,var(--spiced-mocha))}
.spk-page .spk-dark .spk-lnk a{color:var(--ivory)}
@media (hover:hover){.spk-page .spk-dark .spk-lnk a:hover{color:var(--ivory)}}
.spk-page .spk-dark .spk-lnk a:active{color:var(--ivory)}
/* Default (a) on every other in-text link of a Spoke block (the FAQ answers and any classless link in a paragraph or
   a list item): wireframe.css line 555's B4 hover keeps Spiced Mocha; the Spoke hover is default (a)'s. Links with a
   class (the Graphite underlined links, the chevron links, the buttons) keep their own rules. The Graphite bands keep
   Ivory Silk. */
@media (hover:hover){.ef-page.spk-page p a:not([class]):hover,.ef-page.spk-page li a:not([class]):hover{color:var(--spk-s0a-hover,var(--spiced-mocha))}}
.ef-page.spk-page p a:not([class]):active,.ef-page.spk-page li a:not([class]):active{color:var(--spk-s0a-hover,var(--spiced-mocha))}
@media (hover:hover){.ef-page.spk-page .spk-dark p a:not([class]):hover,.ef-page.spk-page .spk-dark li a:not([class]):hover{color:var(--ivory)}}
.ef-page.spk-page .spk-dark p a:not([class]):active,.ef-page.spk-page .spk-dark li a:not([class]):active{color:var(--ivory)}
/* Graphite underlined links (tables; the Dusty Rose CTA hub link): the Doc's hover removes the underline under
   default (a)'s flip; the live rule keeps it. */
.spk-page .spk-glnk a,.spk-page a.spk-glnk{color:var(--graphite);font-weight:inherit;text-decoration:underline;text-underline-offset:.1875rem}
@media (hover:hover){.spk-page .spk-glnk a:hover,.spk-page a.spk-glnk:hover{color:var(--graphite);text-decoration-line:var(--spk-s0a-ul-hover,underline)}}
.spk-page .spk-glnk a:active,.spk-page a.spk-glnk:active{color:var(--graphite);text-decoration-line:var(--spk-s0a-ul-hover,underline)}

/* Buttons: the Home primary (W56 pair: Dusty Rose fill, Graphite text on hover and press); ghost over Graphite = the
   Default Secondary Dusty Rose variant (Figma component 4259:1524). Weight per default (a). */
.spk-page .spk-btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.125rem;background:var(--rosewood);color:#fff;font-family:var(--body);font-weight:var(--spk-s0a-btn-w);font-size:.875rem;line-height:1.25rem;letter-spacing:.0938rem;text-transform:uppercase;padding:.125rem 1.875rem 0;border-radius:2.5rem;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
@media (hover:hover){.spk-page .spk-btn:hover{background:var(--rose);color:var(--graphite)}}
.spk-page .spk-btn:active{background:var(--rose);color:var(--graphite)}
.spk-page .spk-btn.spk-btn--rose{background:transparent;color:var(--rose);border-color:var(--rose)}
@media (hover:hover){.spk-page .spk-btn.spk-btn--rose:hover{background:var(--rose);color:var(--graphite)}}
.spk-page .spk-btn.spk-btn--rose:active{background:var(--rose);color:var(--graphite)}
.spk-page .spk-actions{margin-top:3rem}
.spk-page .spk-c .spk-actions{text-align:center}

@media (max-width:1440px){
  .spk-page .spk-h2{font-size:2.625rem;line-height:3.25rem}
}
@media (max-width:880px){
  .spk-page .spk-in{padding:80px 30px}
  .spk-page .spk-eg{margin-bottom:8px}
  .spk-page .spk-h2{font-size:36px;line-height:44px}
  .spk-page .spk-bl{font-size:18px;line-height:28px}
  .spk-page .spk-bs{font-size:15px;line-height:25px}
  .spk-page .spk-h3i,.spk-page .spk-h3{font-size:21px;line-height:33px}
  .spk-page .spk-head{margin-bottom:40px}
  .spk-page .spk-head .spk-bl{margin-top:20px}
  .spk-page .spk-dbr{display:none}
  .spk-page .spk-d{display:none}
  .spk-page .spk-m{display:inline}
  .spk-page .spk-btn{display:flex;width:100%;min-height:50px}
  .spk-page .spk-actions{margin-top:30px}
}
@media (max-width:480px){
  .spk-page .spk-mbr{display:inline}
}

/* ===== HERO (frames 4273:9283 / 4273:8630 hero; the Treatment-class hero efw-t-hero of wireframe.css lines 808 to
   822, the passed W66 K1 pattern). The display line is its own element (spk-hero-tag), not .hero-tag, so no legacy
   page-id rule (ef-legacy-w53.css line 225) reaches it. The seo-h1 stays the page H1, visually hidden. ===== */
.spk-page .efw-t-hero h1.seo-h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.spk-page .spk-hero-tag{font-family:var(--display);font-weight:400;font-size:4.375rem;line-height:4.6875rem;letter-spacing:-.055rem;color:var(--ivory);margin:0}
.spk-page .spk-hero-tag em{font-style:italic;color:var(--rose)}
.spk-page .spk-hero-tag em.spk-blk{display:block}
.spk-page .efw-t-hero .hero-sub{font-weight:500}
.spk-page .efw-t-hero .hero-credit{max-width:37.5rem;opacity:.85}
.spk-page .spk-hero .spk-btn{font-weight:var(--spk-s0a-btn-w)}
.spk-page .spk-hero .spk-btn.spk-btn--ghost{background:rgba(255,255,255,.2);border-color:#fff;color:#fff}
@media (hover:hover){.spk-page .spk-hero .spk-btn.spk-btn--ghost:hover{background:var(--rose);border-color:var(--rose);color:var(--graphite)}}
.spk-page .spk-hero .spk-btn.spk-btn--ghost:active{background:var(--rose);border-color:var(--rose);color:var(--graphite)}
/* The guide hero: the frame's 20% Graphite flat overlay by CSS (B16), 30% on the mobile frame (4280:20433). */
.spk-page .spk-hero--guide::before{content:"";position:absolute;inset:0;background:rgba(46,41,38,.2);pointer-events:none}
.spk-page .spk-hero--guide .hero-in{position:relative}
@media (max-width:880px){
  .ef-page.spk-page .efw-t-hero{padding:0;min-height:0}
  .ef-page.spk-page .efw-t-hero .hero-in{padding:80px 30px}
  .spk-page .efw-t-hero .eg{font-size:14px;line-height:24px;letter-spacing:2.1px;font-weight:700;color:var(--rose);margin-bottom:10px}
  .spk-page .spk-hero-tag{font-size:55px;line-height:57px;letter-spacing:0}
  .spk-page .efw-t-hero .hero-sub{display:block;font-size:18px;line-height:28px;font-weight:500;color:#fff;opacity:1;max-width:none;margin:20px 0 0}
  .spk-page .efw-t-hero .hero-cta{display:flex;flex-direction:column;align-items:stretch;gap:16px;margin-top:30px;max-width:none}
  .spk-page .efw-t-hero .hero-credit{font-size:16px;line-height:22.1px;letter-spacing:.26px;margin-top:30px;padding-right:5.5rem;max-width:none}
  .spk-page .spk-hero--guide::before{background:rgba(46,41,38,.3)}
}
/* W91 item 3 (HUB RULING W91, ts 1790803346.744209, item 3, option (b)): "Put the 40% Graphite layer the W66 pages
   use on the Spoke hero, in the Spoke sheet". The layer is the W66 photo-hero pages' own, carried as they carry it
   (ef-legacy-w53.css, the W72 Part 2 g overlay in the W75 shape): a flat Graphite #2E2926 at 40%, rgba(46,41,38,.4), on
   the hero's ::before, inset 0, z-index 1, pointer-events none, under the text, with .hero-in raised to z-index 2. It
   stands at every width: at 640 and below it takes the place of the theme's B16 .hero:before (Graphite 40% to 20%,
   wireframe.css) with the flat 40%, as the W72 g pages do, and on the guide hero (13032) it takes the place of the
   guide's 20% (30% at 880 and below) layer above. It moves no crop: no background property of the hero is set here. */
.spk-page .spk-hero::before{content:"";position:absolute;inset:0;background:rgba(46,41,38,.4);z-index:1;pointer-events:none}
.spk-page .spk-hero>.hero-in{position:relative;z-index:2}
/* W94 item 3 (HUB RULING W94, ts 1790816592.008069, item 3; EF OS crew packet WEB-02): "On /xeomin-daxxify-guide/
   (13032) keep the 20% (30% mobile) layer from Lulu's frame; the 40% layer skips that page." The guide hero is the only
   .spk-hero--guide (the W71 payload for 13032). One more class than the 40% layer above, so the guide's ::before reads
   the frame's 20% again, and 30% at 880 and below (4280:20433), exactly the guide rules above; the 40% layer's stacking
   (z-index 1 under .hero-in at 2) is kept. No other page and no crop moves. */
.spk-page .spk-hero.spk-hero--guide::before{background:rgba(46,41,38,.2)}
@media (max-width:880px){.spk-page .spk-hero.spk-hero--guide::before{background:rgba(46,41,38,.3)}}

/* ===== TRUST STRIP (frames 4273:9352 / 4273:8712): the internal-page strip (.trustbar.efw-t-trust, the W66 L1
   pattern) with the Spoke "New patients" note in Body Small Emphasis in place of the locations (the Doc). Desktop: 50px
   by 60px gaps, the stars 30px before the count, the 1px 42px Ivory Silk 20% divider. Mobile: stacked, centred, the
   count 21/33, a full-width hairline, the note 15/25 600. ===== */
.spk-page .spk-trust{gap:3.75rem;padding:3.125rem 2.75rem}
.spk-page .spk-trust .spk-trust-rev{display:inline-flex;align-items:center;gap:1.875rem}
.spk-page .spk-trust .spk-trust-note{font-family:var(--body);font-size:1rem;line-height:1.75rem;font-weight:600;color:#fff;opacity:.85;margin:0;white-space:normal;max-width:100%;min-width:0}
@media (max-width:880px){
  /* P1 (the hub's picture pass): the column centred in the 30px gutters as the mobile frames draw it. wireframe.css
     line 1849 gives .t-div a 30px side margin; with the 100% width it made the flex line 390 wide and pushed every
     item 30px right (the credit line at x 60 to 390). No side margin, no wrap: the divider and the note span x 30 to
     360. */
  .spk-page .spk-trust{flex-direction:column;flex-wrap:nowrap;gap:30px;padding:50px 30px;text-align:center}
  .spk-page .spk-trust .spk-trust-rev{flex-direction:column;gap:10px}
  .spk-page .spk-trust .t-count{font-size:21px;line-height:33px}
  .spk-page .spk-trust .t-div{display:block;width:100%;height:1px;margin:0}
  .spk-page .spk-trust .spk-trust-note{font-size:15px;line-height:25px;opacity:1}
}

/* ===== NUDE MINI-CALLOUT (frames 4273:12869, 4273:12894 / 4280:19766, 4280:19651): 75% Nude over White (the Doc,
   used for both callouts), 50px vertical padding, Body Small centred, the in-text link Spiced Mocha 600. ===== */
.spk-page .spk-callout{background:var(--spk-nude-white)}
.spk-page .spk-callout .spk-in{padding-top:3.125rem;padding-bottom:3.125rem}
.spk-page .spk-callout .spk-bs{text-align:center;max-width:58.125rem;margin:0 auto}
@media (max-width:880px){
  .spk-page .spk-callout .spk-in{padding:50px 30px}
}

/* ===== THE ESSENTIALS / INFORMATION CARDS (frames 4273:16214 / 4273:8725; three-card variant 4273:16254): Blush band,
   centred head, cards White 20% with a 1px White border, 13px radius, 30px padding, 24px gaps, top aligned; the card
   title H4 16/28 600 Spiced Mocha, 10px, the blurb Body Small. Mobile: no card, a left-aligned list with 1px White
   dividers, 20px either side. ===== */
.spk-page .spk-ess{background:var(--blush)}
.spk-page .spk-ess .spk-head{margin-bottom:3.5rem}
.spk-page .spk-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;align-items:start}
.spk-page .spk-cards.spk-cards--3{grid-template-columns:repeat(3,1fr)}
.spk-page .spk-card{align-self:stretch;background:rgba(255,255,255,.2);border:1px solid #fff;border-radius:13px;padding:1.875rem;text-align:center}
.spk-page .spk-card-t{font-family:var(--body);font-size:1rem;line-height:1.75rem;font-weight:600;color:var(--spiced-mocha);margin:0 0 .625rem}
@media (max-width:880px){
  .spk-page .spk-ess .spk-c{text-align:left}
  .spk-page .spk-ess .spk-head{margin-bottom:30px}
  .spk-page .spk-cards,.spk-page .spk-cards.spk-cards--3{grid-template-columns:1fr;gap:0}
  .spk-page .spk-card{background:none;border:0;border-radius:0;padding:20px 0;text-align:left}
  .spk-page .spk-card:first-child{padding-top:0}
  .spk-page .spk-card:last-child{padding-bottom:0}
  .spk-page .spk-card+.spk-card{border-top:1px solid #fff}
}

/* ===== TREATMENT DETAILS (frames 4273:13889 / 4273:8812): Ivory Silk, the shared eyebrow and H2 left aligned (centred
   where it is the first substantive section, the spk-details--c modifier, the Doc's lumpy rule), then the boxes: 1px 20%
   Graphite, 12px radius, 40px padding, 20px inside, 24px between; H3 italic 22/34; Body Small. Mobile: the head and the
   boxes centred, the box Ivory Silk filled, 30px padding, 13px radius, 22px between. The box eyebrow (spk-box-eg) is the
   live section eyebrow kept where no standard shared label exists (FLAG rows). ===== */
.spk-page .spk-boxes{display:flex;flex-direction:column;gap:1.5rem}
.spk-page .spk-box{border:1px solid rgba(46,41,38,.2);border-radius:12px;padding:2.5rem;text-align:left}
.spk-page .spk-box .spk-h3i{margin-bottom:1.25rem}
.spk-page .spk-box .spk-bs+.spk-bs{margin-top:.75rem}
.spk-page .spk-box-eg{margin-bottom:.625rem}
.spk-page .spk-details--c .spk-head{text-align:center}
@media (max-width:880px){
  .spk-page .spk-details .spk-head{text-align:center}
  .spk-page .spk-boxes{gap:22px}
  .spk-page .spk-box{background:var(--ivory);padding:30px;border-radius:13px;text-align:center}
  .spk-page .spk-box .spk-h3i{margin-bottom:10px}
}

/* ===== TRANSPARENT PRICING (frames 4273:13943 / 4280:19709): Blush, centred head, the body column 1044px, Body Large
   paragraphs 15px apart, the in-text bold as live carries it, the button 48px under. ===== */
.spk-page .spk-price{background:var(--blush)}
.spk-page .spk-price .spk-head{margin-bottom:1.875rem}
.spk-page .spk-price-body{max-width:65.25rem;margin:0 auto}
.spk-page .spk-price-body .spk-bl+.spk-bl{margin-top:.9375rem}
.spk-page .spk-price-body b{font-weight:600;color:var(--graphite)}
@media (max-width:880px){
  .spk-page .spk-price .spk-head{margin-bottom:20px}
  .spk-page .spk-price-body .spk-bl+.spk-bl{margin-top:16px}
}

/* ===== AN HONEST LOOK / TRUST AND SAFETY (frames 4273:9600 / 4273:8936; 4273:14757): Graphite band (default c), 110px
   top and 120px bottom; the head row with the Dusty Rose ghost at the right (one button, a grid cell); a 1px 20% White rule 60px under; two
   columns 50px apart with a 1px 20% White divider, the 35px icon circle (5% White, 1px 20% White) with the Dusty Rose
   tick or close, the H3 italic Dusty Rose 22/34; bullets 16/28 Ivory with the 6px Rosewood dot (E2); the supporting box
   5% White, 1px 20% White, 12px radius, 40px 30px. Mobile: stacked, the rule between the columns, the ghost full width
   at the bottom. ===== */
.spk-page .spk-honest{background:var(--spk-s0c-honest);color:var(--ivory)}
.spk-page .spk-honest .spk-in{padding-bottom:7.5rem}
.spk-page .spk-hon-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:3.75rem;align-items:start}
.spk-page .spk-hon-wrap>.spk-hon-cols,.spk-page .spk-hon-wrap>.spk-hon-box{grid-column:1 / -1}
.spk-page .spk-hon-head .spk-bl{margin-top:1.875rem}
.spk-page .spk-hon-cols{display:flex;margin-top:3.75rem;border-top:1px solid rgba(255,255,255,.2);padding-top:2.5rem}
.spk-page .spk-hon-col{flex:1}
.spk-page .spk-hon-col:first-child{padding-right:3.125rem}
.spk-page .spk-hon-col+.spk-hon-col{padding-left:3.125rem;border-left:1px solid rgba(255,255,255,.2)}
.spk-page .spk-hon-colh{display:flex;align-items:center;gap:.9375rem;margin-bottom:1.25rem}
.spk-page .spk-ico{flex:0 0 auto;width:35px;height:35px;border-radius:50%;background-color:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);background-position:center;background-repeat:no-repeat}
.spk-page .spk-ico--tick{background-image:url(../img/r1/svg/efw-t-ui-tick-dustyrose.svg);background-size:18px 14.4px}
.spk-page .spk-ico--close{background-image:url(../img/r1/svg/efw-t-ui-close-dustyrose.svg);background-size:14.4px 14.4px}
.spk-page .spk-dark .spk-h3i{color:var(--rose)}
.spk-page .spk-list{list-style:none;margin:0;padding:0}
.spk-page .spk-list li{position:relative;padding:0 0 0 1.3125rem;font-family:var(--body);font-size:1rem;line-height:1.75rem;color:rgba(46,41,38,.8)}
.spk-page .spk-dark .spk-list li{color:var(--ivory)}
.spk-page .spk-list li::before{content:"";position:absolute;left:0;top:.6875rem;width:6px;height:6px;border-radius:4px;background:var(--rosewood)}
.spk-page .spk-hon-box{margin-top:3rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:2.5rem 1.875rem}
.spk-page .spk-hon-box .spk-h3i{margin-bottom:1.25rem}
.spk-page .spk-hon-box .spk-list{margin-bottom:.625rem}
.spk-page .spk-safe .spk-hon-box{margin-top:3.75rem}
@media (max-width:880px){
  .spk-page .spk-honest .spk-in{padding-bottom:80px}
  .spk-page .spk-hon-wrap{display:flex;flex-direction:column}
  .spk-page .spk-hon-head .spk-bl{margin-top:20px}
  .spk-page .spk-hon-wrap>.spk-btn{order:9;margin-top:50px}
  .spk-page .spk-hon-cols{display:block;margin-top:40px;border-top:0;padding-top:0}
  .spk-page .spk-hon-col:first-child{padding-right:0}
  .spk-page .spk-hon-col+.spk-hon-col{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.2);margin-top:30px;padding-top:30px}
  .spk-page .spk-hon-colh h3{font-size:21px;line-height:33px}
  .spk-page .spk-list li{font-size:15px;line-height:25px;padding-left:21px}
  .spk-page .spk-list li::before{top:9.5px}
  .spk-page .spk-hon-box{margin-top:40px;padding:30px}
  .spk-page .spk-safe .spk-hon-box{margin-top:40px}
}

/* ===== MEET DIANE (frames 4273:14021 / 4273:8993): 70% White over Ivory Silk (default c; the Doc allows Ivory Silk),
   the photo 384 by 600 at 15px radius with the pillbox (Ivory Silk, 20px radius, 7px 14px, 12/17 at 80% Graphite) 20px
   in, 65px to the copy: eyebrow, H2, Body Large 30px under, the primary button 48px under. Mobile: the copy, the button,
   then the photo 330 by 450, 40px apart. ===== */
.spk-page .spk-founder{background:var(--spk-s0c-diane)}
.spk-page .spk-founder-grid{display:flex;align-items:center;gap:4.0625rem}
.spk-page .spk-founder-photo{position:relative;flex:0 0 24rem;width:24rem;height:37.5rem;border-radius:15px;overflow:hidden;background-size:cover;background-position:center}
.spk-page .spk-founder-photo img{display:block;width:100%;height:100%;object-fit:cover}
.spk-page .spk-pill{position:absolute;left:20px;bottom:20px;background:var(--ivory);border-radius:20px;padding:7px 14px;font-family:var(--body);font-size:12px;line-height:17px;font-weight:400;color:rgba(46,41,38,.8);white-space:nowrap}
.spk-page .spk-founder-txt{flex:1;min-width:0}
.spk-page .spk-founder-txt .spk-bl{margin-top:1.875rem}
@media (max-width:880px){
  .spk-page .spk-founder-grid{flex-direction:column;align-items:stretch;gap:40px}
  .spk-page .spk-founder-photo{order:2;flex:0 0 auto;width:100%;height:450px}
  .spk-page .spk-founder-txt .spk-bl{margin-top:20px}
}

/* ===== SPLIT FAQ (frames 4273:9747 / 4273:9111): Ivory Silk (default c), the head column 384px with 30px right padding
   (the Doc), 24px to the list; the list 40px down, rows 30px either side of a 1px 20% Graphite rule, the question H3
   italic 22/34 with the 45px chevron circle (wireframe.css lines 616 to 638, the Home accordion that ef-chrome.js
   builds from the live <b> markup: the W66 FAQ reused, no new script). The disclaimer 60px under the list, Body Small,
   no rule above (the Doc). Mobile: stacked, the questions 21/33. ===== */
.spk-page .spk-faq{background:var(--spk-s0c-faq)}
.spk-page .spk-faq-grid{display:flex;gap:1.5rem;align-items:flex-start}
.spk-page .spk-faq-head{flex:0 0 24rem;padding-right:1.875rem;box-sizing:border-box}
.spk-page .spk-faq-main{flex:1;min-width:0;padding-top:2.5rem}
.spk-page .spk-faq .faq-list{max-width:none;margin:0}
.spk-page .spk-faq .faq-item{border-bottom:1px solid rgba(46,41,38,.2);padding:0}
.spk-page .spk-faq .faq-item:last-child{border-bottom:0}
.spk-page .spk-faq .faq-q{font-family:var(--display);font-style:normal;font-weight:500;font-size:1.375rem;line-height:2.125rem;color:var(--graphite);padding:1.875rem 0}
.spk-page .spk-faq .faq-item:first-child .faq-q{padding-top:0}
.spk-page .spk-faq .faq-a p{color:rgba(46,41,38,.8);font-size:1rem;line-height:1.75rem}
.spk-page .spk-faq .faq-a p+p{margin-top:.75rem}
.spk-page .spk-faq-disc{margin-top:3.75rem}
.spk-page .spk-faq-disc b{font-weight:600}
@media (max-width:880px){
  .spk-page .spk-faq-grid{display:block}
  .spk-page .spk-faq-head{padding-right:0}
  .spk-page .spk-faq-main{padding-top:40px}
  .spk-page .spk-faq .faq-q{font-size:21px;line-height:33px;gap:20px;padding:30px 0}
  .spk-page .spk-faq .faq-a p{font-size:15px;line-height:25px}
  .spk-page .spk-faq-disc{margin-top:40px}
}

/* ===== EXPLORE MORE / WHERE TO GO NEXT (frames 4273:9730 / 4273:9087): the theme's efw-t-next (wireframe.css lines
   1219 to 1258, 1383, 1580 to 1583, 1861, 1880; the passed W66 K7 pattern: two per row, the final single card at half
   width, the B14 card height, the Read More link with the Spiced Mocha chevron). Background per default (c). Mobile:
   80px 30px, one column, cards 30px 30px 35px, three shown and the View More control (a label on a visually hidden
   checkbox, the W66 B2 About pattern, no script) when a fourth exists. ===== */
/* The band colour of default (c): wireframe.css paints .efw-t-next Blush with !important (lines 1236 and 1580), so the
   switchable colour is a layer under the content (a ::before of the section), not the section's own background. */
.ef-page.spk-page .efw-t-next.spk-o-next{position:relative;isolation:isolate}
.ef-page.spk-page .efw-t-next.spk-o-next::before{content:"";position:absolute;inset:0;background:var(--spk-s0c-explore);z-index:-1;pointer-events:none}
.spk-page .efw-t-next .next-grid{text-align:left}
.spk-page .efw-t-next .gcard{background:rgba(255,255,255,.2);border:1px solid #fff}
.spk-page .efw-t-next .gcard .area-links{margin-top:auto}
.spk-page .spk-vm-cb,.spk-page .spk-vm{display:none}
/* The legacy four-card centring (ef-legacy-w53.css, the .grid:has(> .gcard:nth-child(4)) pair) is overridden here: two
   per row across the 1200px column, the final single card at half width, left aligned (the Doc; W66 B2 M2). */
@media (min-width:880.02px){
  .ef-page.spk-page .efw-t-next.spk-o-next .next-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3.5rem;max-width:none;justify-content:initial}
  .ef-page.spk-page .efw-t-next.spk-o-next .next-grid>.gcard{flex:none;max-width:none}
}
@media (max-width:880px){
  .ef-page.spk-page .efw-t-next.section{padding:80px 30px}
  .spk-page .efw-t-next>.eg{font-size:14px;line-height:24px;letter-spacing:2.1px;font-weight:700;margin-bottom:8px}
  .spk-page .efw-t-next h2.sec{font-size:36px;line-height:44px;letter-spacing:-.5px;font-weight:400}
  .spk-page .efw-t-next .next-grid{margin-top:40px;gap:22px}
  .spk-page .efw-t-next .gcard{padding:30px 30px 35px}
  .spk-page .efw-t-next .gcard h3{font-size:22px;line-height:34px;margin-bottom:10px}
  .spk-page .efw-t-next .gcard p{font-size:15px;line-height:25px;margin-bottom:20px}
  .spk-page .spk-vm-cb{display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0}
  .spk-page .spk-vm{display:flex;justify-content:center;margin-top:30px}
  .spk-page .spk-vm span{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:var(--body);font-size:14px;line-height:20px;font-weight:600;color:var(--spiced-mocha);text-decoration:underline;text-underline-offset:3px}
  .spk-page .spk-vm span::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--spiced-mocha);border-bottom:1.5px solid var(--spiced-mocha);transform:rotate(45deg) translateY(-2px)}
  .spk-page .spk-vm-cb:focus-visible~.spk-vm span{outline:2px solid var(--spiced-mocha);outline-offset:3px}
  .spk-page .spk-vm-cb:checked~.next-grid .gcard{display:flex}
  .spk-page .spk-vm-cb:checked~.spk-vm{display:none}
}

/* ===== HUB PILL ROW (frames 4273:14844 lower half / 4280:20369; 4273:17639 / 4281:20667): Blush; a 1px 20% Graphite
   rule with 90px either side where it follows Explore More; the intro Body Large, 30px above the pills; the pill
   component "Hub Links on Blush" (4273:15931): Ivory Silk, 1px 20% Graphite, full radius, 10px 20px, 14/23.8 600 +0.56px
   Graphite; Hover state 4273:15934: 75% White fill, Rosewood outline and text; 10px gaps. Mobile: 20px side padding (the
   Doc's Blush pill rule), 8px 16px pills, 8px gaps. ===== */
.spk-page .spk-hub{background:var(--blush)}
.spk-page .spk-hub .spk-in{padding-top:3.75rem;padding-bottom:3.75rem}
.spk-page .spk-hub--after .spk-in{padding-top:0;padding-bottom:6.875rem}
.spk-page .spk-hub-rule{border:0;border-top:1px solid rgba(46,41,38,.2);margin:0 0 5.625rem}
.spk-page .spk-hub .spk-bl{text-align:center}
.spk-page .spk-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.625rem;margin-top:1.875rem}
.spk-page .spk-pills a{display:inline-flex;align-items:center;justify-content:center;background:var(--ivory);border:1px solid rgba(46,41,38,.2);border-radius:999px;padding:.625rem 1.25rem;font-family:var(--body);font-size:.875rem;line-height:1.4875rem;font-weight:600;letter-spacing:.035rem;color:var(--graphite);text-decoration:none;text-align:center;transition:background .2s,border-color .2s,color .2s}
@media (hover:hover){.spk-page .spk-pills a:hover{background:rgba(255,255,255,.75);border-color:var(--rosewood);color:var(--rosewood)}}
.spk-page .spk-pills a:active{background:rgba(255,255,255,.75);border-color:var(--rosewood);color:var(--rosewood)}
@media (max-width:880px){
  .spk-page .spk-hub .spk-in{padding:80px 20px}
  .spk-page .spk-hub--after .spk-in{padding:0 20px 80px}
  .spk-page .spk-hub-rule{margin-bottom:80px}
  .spk-page .spk-pills{gap:8px;margin-top:30px}
  .spk-page .spk-pills a{padding:8px 16px}
}

/* ===== BEFORE AND AFTERS (frames 4273:14130 / 4280:19655): the Treatment template's efw-t-ba card (wireframe.css lines
   1269 to 1307 desktop, 1482 to 1526 mobile) on the live carousel markup (ba-carousel.js, untouched); the band's own
   hairline and 0 top padding switched off here (the frame opens straight under the hero). The arrow rule of W66 B18:
   desktop arrows only over three results, mobile controls only over one result (ef-spoke-s1.js sets data-spk-count).
   Mobile: the Book Now full width, the gallery action as an in-text link (the Doc). ===== */
.ef-page.spk-page .efw-t-ba.section{max-width:80.5rem;margin:0 auto;padding:6.875rem 2.75rem}
.spk-page .efw-t-ba::before{display:none}
/* the frame's result photo is 2:3 (165 by 252 desktop), 138 by 252 on the mobile frame; the live files are 3:4, cover crops them */
.spk-page .efw-t-ba .ba3-imgs .ba3-ph{aspect-ratio:2/3}
.spk-page .efw-t-ba .ba3-imgs img{aspect-ratio:auto;height:100%;object-fit:cover}
.spk-page .efw-t-ba .ba3.fit .ba3-imgs img{object-fit:contain}
/* The result title and the Before / After labels in Spiced Mocha, the title 16/28 600 (the frame, 4273:14144 and
   I4273:14149;4011:5977: Desktop/H4 #895D58; W66 D2). The Treatment card's Rosewood on Blush reads 3.92 in the census. */
.spk-page .efw-t-ba .ba3-tag,.spk-page .efw-t-ba figcaption.ba3-tag,.spk-page .efw-t-ba .ba3-pill{color:var(--spiced-mocha)}
@media (min-width:880.02px){.spk-page .efw-t-ba .ba3-tag,.spk-page .efw-t-ba figcaption.ba3-tag{font-size:1rem;line-height:1.75rem}}
.spk-page .efw-t-ba .ba-carousel[data-spk-count="1"] .bac-arrow,.spk-page .efw-t-ba .ba-carousel[data-spk-count="2"] .bac-arrow,.spk-page .efw-t-ba .ba-carousel[data-spk-count="3"] .bac-arrow{visibility:hidden}
.spk-page .efw-t-ba .ba-ctas .spk-ba-note{display:none}
@media (max-width:880px){
  .ef-page.spk-page .efw-t-ba.section{padding:80px 30px}
  .spk-page .efw-t-ba>.eg{font-size:14px;line-height:24px;letter-spacing:2.1px;font-weight:700;color:var(--spiced-mocha);margin-bottom:8px}
  .spk-page .efw-t-ba h2.sec{font-size:36px;line-height:44px;letter-spacing:-.5px;font-weight:400}
  .spk-page .efw-t-ba>.sub{font-size:18px;line-height:28px;color:rgba(46,41,38,.8);margin-top:20px}
  .spk-page .efw-t-ba .ba-carousel[data-spk-count="2"] .bac-arrow,.spk-page .efw-t-ba .ba-carousel[data-spk-count="3"] .bac-arrow{visibility:visible}
  .spk-page .efw-t-ba .ba-carousel[data-spk-count="1"] .bac-arrow,.spk-page .efw-t-ba .ba-carousel[data-spk-count="1"] .mba-controls{display:none}
  /* W72 Part 1 e (Lulu's correction): the mobile B&A images 220px high (some frames still draw the old 252) */
  .spk-page .efw-t-ba .ba3-imgs .ba3-ph{aspect-ratio:auto;height:220px}
  /* S9 (W1): the mobile frame's supporting line (4280:19687, Body Small centred), 15px above the More Results in-text
     link (the frame's 4280:19686 spacing) */
  .spk-page .efw-t-ba .ba-ctas .spk-ba-note{display:block;width:100%;text-align:center;color:rgba(46,41,38,.8);margin:0 0 calc(15px - .875rem)}
}

/* ===== VIDEO BAND (frames 4273:16326 / 4273:16726): 70% White over Ivory Silk; the copy column 600px centred beside
   the video at 520 by 925, 60px apart; the live .vwrap player and overlay kept (wireframe.css lines 581 to 586: the
   White play icon on the Rosewood circle); the video covers the portrait slot. Mobile: stacked, the player 330 by 586
   inside the standard 30px padding (the Doc). ===== */
.spk-page .spk-video{background:rgba(255,255,255,.7)}
.spk-page .spk-video-grid{display:flex;align-items:center;justify-content:center;gap:3.75rem}
.spk-page .spk-video-txt{flex:0 1 37.5rem;text-align:center}
.spk-page .spk-video-txt .spk-bl{margin-top:1.875rem;padding:0 1.875rem}
.spk-page .spk-video .vwrap{flex:0 0 32.5rem;width:32.5rem;max-width:none;margin:0;aspect-ratio:520/925}
.spk-page .spk-video .vwrap video{width:100%;height:100%;object-fit:cover;border-radius:12px}
@media (max-width:880px){
  .spk-page .spk-video-grid{flex-direction:column;gap:40px}
  .spk-page .spk-video-txt{flex:0 0 auto}
  .spk-page .spk-video-txt .spk-bl{margin-top:20px;padding:0}
  .spk-page .spk-video .vwrap{flex:0 0 auto;width:100%;aspect-ratio:330/586}
}

/* ===== NUMBERED TIPS (frames 4273:16276 / 4273:16481; the Treatment "Why" row family): Ivory Silk; rows 30px either
   side of a 1px 20% Graphite rule; the lower-case numeral Rosewood 24/36 600 (a CSS counter: a structural marker, not
   copy), 12px to the title H3 italic 22/34; the blurb Body Small right aligned. Mobile: the blurb under the title, left
   aligned, 8px. ===== */
.spk-page .spk-tips-rows{counter-reset:spk-tip}
.spk-page .spk-tip{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.875rem 0;border-bottom:1px solid rgba(46,41,38,.2);counter-increment:spk-tip}
.spk-page .spk-tip:first-child{padding-top:0}
.spk-page .spk-tip:last-child{padding-bottom:0;border-bottom:0}
.spk-page .spk-tip-l{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}
.spk-page .spk-tip-l::before{content:counter(spk-tip,lower-roman);font-family:var(--body);font-weight:600;font-size:1.5rem;line-height:2.25rem;color:var(--rosewood)}
.spk-page .spk-tip .spk-bs{text-align:right}
@media (max-width:880px){
  .spk-page .spk-tips .spk-head{text-align:left}
  .spk-page .spk-tip{flex-direction:column;align-items:flex-start;gap:8px;padding:20px 0}
  .spk-page .spk-tip-l::before{font-size:23px}
  .spk-page .spk-tip .spk-bs{text-align:left}
}

/* ===== TABLES (frames 4276:18824 lumpy, 4276:18615 and 4276:18655 guide; mobile 4280:20183, 4281:20734, 4281:20799):
   the global table rules of the Doc: the table 1px 20% Graphite at 12px radius, on the opposite surface to its section
   (spk-tbl--white on Ivory Silk, spk-tbl--ivory on 70% White); the head row Graphite with Ivory Silk eyebrow text,
   15px; rows sized by the tallest cell, every cell vertically centred, 15px 10px; the anchor column narrowed and
   centred, H4 16/28 600 Graphite; data cells left aligned Body Small. Mobile: two columns visible, the anchor sticky,
   the data columns scrolled one at a time by the controls beneath when there are more than two (ef-spoke-s1.js). ===== */
.spk-page .spk-tbl{border:1px solid rgba(46,41,38,.2);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.7)}
.spk-page .spk-tbl.spk-tbl--ivory{background:var(--ivory)}
.spk-page .spk-tbl-scroll{overflow:hidden}
.spk-page .spk-tbl table{width:100%;border-collapse:collapse;table-layout:fixed;margin:0;background:none;border-radius:0}
.spk-page .spk-tbl th{background:var(--graphite);color:var(--ivory);font-family:var(--body);font-size:.875rem;line-height:1.5rem;letter-spacing:.1313rem;font-weight:700;text-transform:uppercase;text-align:left;vertical-align:middle;padding:.9375rem .625rem}
.spk-page .spk-tbl td{font-family:var(--body);font-size:1rem;line-height:1.75rem;color:rgba(46,41,38,.8);text-align:left;vertical-align:middle;padding:.9375rem .625rem;border-top:1px solid rgba(46,41,38,.2)}
.spk-page .spk-tbl tr:nth-child(2) td{border-top:0}
.spk-page .spk-tbl th:first-child,.spk-page .spk-tbl td:first-child{text-align:center;padding-left:1.875rem;padding-right:1.875rem}
.spk-page .spk-tbl td:first-child{font-weight:600;color:var(--graphite)}
.spk-page .spk-tbl td:first-child strong{font-weight:600}
.spk-page .spk-tbl[data-spk-anchor="260"] th:first-child{width:21.7%}
.spk-page .spk-tbl[data-spk-anchor="320"] th:first-child{width:26.7%}
.spk-page .spk-tbl[data-spk-anchor="350"] th:first-child{width:29.2%}
.spk-page .spk-tbl-ctl{display:none}
.spk-page .spk-tbl-wrap{margin-top:3.75rem}
.spk-page .spk-tbl-wrap+.spk-actions{margin-top:3rem}
@media (max-width:880px){
  .spk-page .spk-tbl-wrap{margin-top:40px}
  .spk-page .spk-tbl-scroll{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .spk-page .spk-tbl-scroll::-webkit-scrollbar{display:none}
  .spk-page .spk-tbl table{table-layout:fixed}
  .spk-page .spk-tbl[data-spk-cols="2"] table{width:100%}
  .spk-page .spk-tbl[data-spk-cols="3"] table{width:150%}
  .spk-page .spk-tbl[data-spk-cols="4"] table{width:200%}
  .spk-page .spk-tbl th,.spk-page .spk-tbl td{text-align:center;padding:15px 10px;scroll-snap-align:end}
  .spk-page .spk-tbl th:first-child,.spk-page .spk-tbl td:first-child{position:sticky;left:0;z-index:1;padding:15px 10px}
  .spk-page .spk-tbl[data-spk-anchor] th:first-child{width:auto}
  .spk-page .spk-tbl td:first-child{background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),var(--ivory)}
  .spk-page .spk-tbl.spk-tbl--ivory td:first-child{background:var(--ivory)}
  .spk-page .spk-tbl th{padding-left:20px;padding-right:20px}
  .spk-page .spk-tbl td{font-size:15px;line-height:25px}
  .spk-page .spk-tbl-ctl{display:flex;align-items:center;gap:16px;margin-top:30px}
  .spk-page .spk-tbl-ctl[hidden]{display:none}
  .spk-page .spk-tbl-btn{flex:0 0 auto;width:45px;height:45px;border-radius:22.5px;border:1px solid rgba(46,41,38,.2);background:rgba(255,255,255,.05) center/12px no-repeat;cursor:pointer;padding:0}
  .spk-page .spk-tbl-prev{background-image:url(../img/r1/svg/efw-r1-ui-chevron-back-rosewood.svg)}
  .spk-page .spk-tbl-next{background-image:url(../img/r1/svg/efw-r1-ui-chevron-next-rosewood.svg)}
  .spk-page .spk-tbl-btn+.spk-tbl-btn{margin-left:-8px}
  @media (hover:hover){.spk-page .spk-tbl-btn:hover{background-color:var(--rose);border-color:transparent}.spk-page .spk-tbl-prev:hover{background-image:url(../img/r1/svg/efw-r1-ui-chevron-back-graphite.svg)}.spk-page .spk-tbl-next:hover{background-image:url(../img/r1/svg/efw-r1-ui-chevron-next-graphite.svg)}}
  .spk-page .spk-tbl-prog{flex:1;height:1px;background:rgba(46,41,38,.2);position:relative}
  .spk-page .spk-tbl-bar{position:absolute;left:0;top:0;height:1px;background:var(--rosewood);width:33.3%;transition:left .3s}
  .spk-page .spk-tbl-count{font-family:var(--body);font-size:14px;line-height:14px;font-weight:600;color:var(--rosewood);white-space:nowrap}
}

/* ===== TWO-COLUMN COMPARE BOX (frame 4274:18335 / 4279:19075): 70% White band; the centred head, the lead-in H3
   italic centred 48px under the intro, the box Ivory Silk with 1px 20% Graphite at 13px radius, 30px 40px, two halves
   50px either side of a 1px 20% Graphite divider, the text centred Body Small; the closing Body Small centred 48px under.
   Mobile: the halves stacked with a hairline between. ===== */
.spk-page .spk-cmp-lead{text-align:center;margin:3rem 0 0}
.spk-page .spk-cmp-box{display:flex;margin-top:3rem;background:var(--ivory);border:1px solid rgba(46,41,38,.2);border-radius:13px;padding:1.875rem 2.5rem}
.spk-page .spk-cmp-half{flex:1;text-align:center}
.spk-page .spk-cmp-half:first-child{padding-right:3.125rem}
.spk-page .spk-cmp-half+.spk-cmp-half{padding-left:3.125rem;border-left:1px solid rgba(46,41,38,.2)}
.spk-page .spk-cmp-half strong{font-weight:600;color:var(--graphite)}
/* S19 (W1): the frame's box H3 (Desktop/H3 22/34 500, 4274:18348), 10px above its body */
.spk-page .spk-cmp-half .spk-cmp-h{margin:0 0 .625rem}
.spk-page .spk-cmp-after{text-align:center;margin-top:3rem}
@media (max-width:880px){
  .spk-page .spk-cmp-lead{margin-top:40px}
  .spk-page .spk-cmp-box{display:block;margin-top:30px;padding:30px}
  .spk-page .spk-cmp-half:first-child{padding-right:0}
  .spk-page .spk-cmp-half+.spk-cmp-half{padding-left:0;border-left:0;border-top:1px solid rgba(46,41,38,.2);margin-top:20px;padding-top:20px}
  .spk-page .spk-cmp-after{margin-top:30px}
}

/* ===== CENTRED STATEMENT (frames 4274:18314, 4275:18438, 4275:18455 / 4280:20421, 4281:20487, 4281:20502): the band
   carries centred Body Large paragraphs 15px apart in the 1044px column and, where live has one, the button 48px under.
   Surface per the band (Blush, Ivory Silk). ===== */
.spk-page .spk-stmt-body{max-width:65.25rem;margin:0 auto;text-align:center}
.spk-page .spk-stmt-body .spk-bl+.spk-bl{margin-top:.9375rem}
@media (max-width:880px){
  .spk-page .spk-stmt-body .spk-bl+.spk-bl{margin-top:16px}
}

/* ===== DARK FHM APPROACH (frame 4275:18532 / 4279:19064): Graphite; the copy column 700px, the eyebrow Clay (default
   b), H2 Ivory Silk, Body Large paragraphs 15px apart, 30px under the head; the button 48px under; the supporting image
   384 by 650 at 15px radius, 65px to the right, at least 20px clear above and below the copy (the Doc). Mobile:
   stacked, the image under the copy. ===== */
.spk-page .spk-fhm{background:var(--graphite);color:var(--ivory)}
.spk-page .spk-fhm-grid{display:flex;align-items:center;gap:4.0625rem}
.spk-page .spk-fhm-txt{flex:0 1 43.75rem}
.spk-page .spk-fhm-txt .spk-bl{margin-top:.9375rem}
.spk-page .spk-fhm-txt .spk-h2+.spk-bl{margin-top:1.875rem}
.spk-page .spk-fhm-img{flex:0 0 24rem;width:24rem;height:40.625rem;border-radius:15px;object-fit:cover;display:block;margin-left:auto}
@media (max-width:880px){
  .spk-page .spk-fhm-grid{flex-direction:column;align-items:stretch;gap:40px}
  .spk-page .spk-fhm-txt{flex:0 0 auto}
  .spk-page .spk-fhm-txt .spk-h2+.spk-bl{margin-top:20px}
  .spk-page .spk-fhm-img{flex:0 0 auto;width:100%;height:450px;margin-left:0}
}

/* ===== THE DUSTY ROSE CTA (frames 4273:9769 / 4273:9165 and 9178; Spoke hub variant 4273:14857 and 4273:17590; guide
   Get Started option 4276:18575): the Home split CTA, the passed W66 K2 port (the w66b2-cta rules of the B1 and B2
   payloads under this prefix): Dusty Rose, 90px 56px; the copy then the 486 by 600 image; the eyebrow Spiced Mocha
   (E3); the italic H2; Body Large; the button 40px under; the 1px 20% Graphite rule 48px under; the closing line 48px
   under: the W66 Body Small note, or in the Spoke variant the hub as a Graphite underlined Links Body Small line (the
   Doc). The current Diane consultation image (spec F). Mobile: 80px 30px 40px, the image 30px in from the left with
   the right edge bleeding, 450px tall, 80px under. ===== */
.spk-page .spk-cta{background:var(--rose);padding:5.625rem 3.5rem}
.spk-page .spk-cta-in{max-width:75rem;margin:0 auto;display:grid;grid-template-columns:1fr 30.375rem;gap:4.0625rem;align-items:center}
.spk-page .spk-cta-eg{font-family:var(--body);font-weight:700;font-size:.875rem;line-height:1.5rem;letter-spacing:.1313rem;text-transform:uppercase;color:var(--spiced-mocha);margin:0 0 .625rem}
.spk-page .spk-cta-h2{font-family:var(--display);font-weight:400;font-style:italic;font-size:2.8125rem;line-height:3.4375rem;letter-spacing:-.5px;color:var(--graphite);margin:0 0 1.25rem}
.spk-page .spk-cta-copy .spk-bl{color:var(--graphite);max-width:40.5625rem}
.spk-page .spk-cta-copy .spk-bl+.spk-bl{margin-top:.75rem}
.spk-page .spk-cta-copy .spk-bl a{color:var(--graphite)}
.spk-page .spk-cta .spk-btn{margin-top:2.5rem}
@media (hover:hover){.spk-page .spk-cta .spk-btn:hover{border-color:#fff}}
.spk-page .spk-cta .spk-btn:active{border-color:#fff}
.spk-page .spk-cta-div{border:0;border-top:1px solid rgba(46,41,38,.2);margin:3rem 0 0;max-width:40.5625rem}
.spk-page .spk-cta-note{font-family:var(--body);font-size:1rem;line-height:1.75rem;color:var(--graphite);max-width:40.5625rem;margin:3rem 0 0}
.spk-page .spk-cta-hub{font-weight:600}
.spk-page .spk-cta-img{display:block;width:30.375rem;height:37.5rem;object-fit:cover;border-radius:15px}
@media (max-width:1440px){
  .spk-page .spk-cta-h2{font-size:2.625rem;line-height:3.25rem}
}
@media (max-width:956px){
  .spk-page .spk-cta-in{grid-template-columns:1fr}
}
@media (max-width:880px){
  .spk-page .spk-cta{padding:80px 0 0}
  .spk-page .spk-cta-in{display:flex;flex-direction:column;gap:0}
  .spk-page .spk-cta-copy{padding:0 30px 40px}
  .spk-page .spk-cta-eg{margin-bottom:8px}
  .spk-page .spk-cta-h2{font-size:36px;line-height:44px;margin-bottom:20px}
  .spk-page .spk-cta .spk-btn{margin-top:30px}
  .spk-page .spk-cta-div{margin:40px 0 0;max-width:none}
  .spk-page .spk-cta-note{font-size:15px;line-height:25px;margin-top:40px}
  .spk-page .spk-cta-img{width:calc(100% - 30px);height:450px;margin:0 0 80px 30px;border-radius:15px 0 0 15px}
}