/* home.css - the homepage design (applied 2026-10-13 from design-demos/page/r3-fr, option F). Scoped to .home. */
/* ================= Y · Words full of life (r9 hero) on the r6 base: the system ================= */
.home{
  /* colour roles: the values live in the palette blocks below (one per data-pal on this root);
     every colour on the page is one of these variables (exceptions: black/white overlays on photos, the Google mark).
     canvas   = hero and every second section          field = alternate sections, soft cards on canvas
     well     = deeper surface: avatars, photo wells   paper = raised cards, bubbles, inputs, the lab panel
     ink      = headings, names, prices, key words     text  = body copy          muted = captions, notes
     action / action-h / on-action = buttons and text links only
     gold     = review stars only                      line  = hairlines and borders
     band / band-ink / band-text = the who band (its field, its heading, its body text)
     wash     = soft accent behind hero photos         t1..t6 + t1i..t6i = tint wash / ink pairs (icons, cards, labels) */
  /* type: DM Sans for all text (it matches the header nav and the logo's "coaching").
     Newsreader ONLY at display sizes (hero 75 · h2 56 · featured review 28 · big prices 50), always the clean
     display cut (optical sizing off, opsz 72). Every smaller title is DM Sans 600, 19-24px, -0.01em. No third family. */
  --k-sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --k-serif:'Newsreader',Georgia,'Times New Roman',serif;
  /* shape + depth: photos 24, cards 20, tiles 16, buttons 14, portraits round; shadows are tinted with the palette's ink */
  --k-r:24px;--k-rc:20px;--k-rt:16px;--k-rb:14px;
  --k-shadow:0 1px 2px color-mix(in srgb,var(--k-ink) 6%,transparent),0 16px 34px -14px color-mix(in srgb,var(--k-ink) 28%,transparent);
  --k-shadow-s:0 4px 10px -4px color-mix(in srgb,var(--k-ink) 35%,transparent);
  --k-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.95 6.1 6.65.85-4.9 4.6 1.25 6.6L12 17.3l-5.95 3.25 1.25-6.6-4.9-4.6 6.65-.85z'/%3E%3C/svg%3E");
  --k-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  position:relative;background:var(--k-canvas);color:var(--k-text);font-family:var(--k-sans);font-size:16.5px;line-height:1.6;letter-spacing:-.004em;-webkit-font-smoothing:antialiased;overflow:hidden;overflow:clip;font-optical-sizing:auto;transition:background-color .35s}

  
  
  
  
  
  
  /* Stone & charcoal: the most minimal: cool stone, charcoal buttons, logo green band */

.home *,.home *::before,.home *::after{box-sizing:border-box}
.home a{color:inherit;text-decoration:none}
.home img{display:block;max-width:none}
.home button{font-family:inherit;cursor:pointer}
.home ul,.home ol{list-style:none;margin:0;padding:0}
.home h1,.home h2,.home h3,.home p,.home figure,.home blockquote{margin:0}
.home [id]{scroll-margin-top:96px}
.home .k-ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.home .k-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- type: display (Newsreader, clean opsz-72 cut) and small titles (DM Sans 600) ---------- */
.home .k-h2{font-family:var(--k-serif);font-weight:400;font-optical-sizing:none;font-variation-settings:"opsz" 72}
.home .k-h2{font-size:56px;line-height:1.06;letter-spacing:-.016em;color:var(--k-ink);text-wrap:balance}

/* ---------- shared pieces ---------- */
.home .k-sec{position:relative;padding:128px 64px}
.home .k-alt{background:var(--k-field)}
@media (max-width:1100px){.home .k-sec{padding:112px 40px}} /* mobile pass: tablets */
@media (max-width:760px){.home .k-sec{padding:88px 20px}} /* mobile pass: phones */
.home .k-wrap{max-width:1200px;margin:0 auto;position:relative}
/* section head: one refined split head for every section but the hero. The h2 sits on the 1200 grid's left edge;
   on the right, sitting on the h2's last baseline, one supporting line plus a text link or a tiny proof element. */
.home .k-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);column-gap:80px;align-items:end;align-items:last baseline;margin:0 0 64px}
.home .k-head .k-h2{max-width:12.5em}
/* the right column is a caption block: a short hairline in the palette's line colour opens it */
.home .k-head-r{min-width:0;padding-top:18px;border-top:1px solid var(--k-line)}
.home .k-head-t{font-size:17.5px;line-height:1.55;color:var(--k-text);text-wrap:pretty}
.home .k-note{font-size:14px;line-height:1.4;color:var(--k-muted)}
.home .k-well{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--k-field);color:var(--k-ink);flex:none}
.home .k-stars{display:inline-block;flex:none;width:62px;height:12px;background:var(--k-gold);-webkit-mask:var(--k-star) 0 50%/12.4px 12px repeat-x;mask:var(--k-star) 0 50%/12.4px 12px repeat-x}
.home .k-g{width:13px;height:13px;flex:none}

/* buttons: the palette's action colour, 14px corners, sentence case */
.home .k-btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 28px;border-radius:var(--k-rb);border:1px solid var(--k-action);background:var(--k-action);color:var(--k-on-action);font:500 16px/1 var(--k-sans);letter-spacing:-.005em;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s}
.home .k-btn:hover{background:var(--k-action-h);border-color:var(--k-action-h)}
.home .k-btn--lg{height:60px;padding:0 32px;font-size:17px}
.home .k-btn--full{width:100%}
.home .k-link{font-size:16px;font-weight:500;color:var(--k-action);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:color-mix(in srgb,var(--k-action) 40%,transparent);transition:text-decoration-color .2s}
.home .k-link:hover{text-decoration-color:var(--k-action)}
.home .k-btn:focus-visible,.home .k-link:focus-visible,.home button:focus-visible,.home summary:focus-visible{outline:2px solid var(--k-action);outline-offset:3px}

/* carved corner caption (cut into a photo's corner) */
.home .k-strip{position:absolute;left:0;bottom:0;z-index:3;display:flex;align-items:center;gap:9px;margin:0;padding:15px 26px 0 48px;background:var(--k-paper);border-top-right-radius:22px;font-size:14.5px;font-weight:500;line-height:1.3;color:var(--k-ink)}
.home .k-strip::before,.home .k-strip::after{content:"";position:absolute;width:22px;height:22px;background:radial-gradient(circle at 100% 0,transparent 21.5px,var(--k-paper) 22px)}
.home .k-strip::before{left:0;bottom:100%}
.home .k-strip::after{left:100%;bottom:0}
.home .k-strip .k-ic{width:17px;height:17px}

/* her signature (used by the hero's trust line and the About letter) */
.home .k-sig{display:block;width:150px;height:auto;margin:-4px 0 4px -3px;transform:rotate(-2.5deg);transform-origin:0 60%}

/* ---------- hero "Coaching setup" (round 10): the online coaching page's hero (E30) with the homepage's goals and photos ----------
   E30's values, as rendered: text left on a dark field, "I want to" over a goal that flips in, a tall photo panel on the right that
   fades into the field, a square button + underlined link, fine print, a hairline and one line of proof with her portrait.
   Settings live on .ch: data-look (dark = E30, green = E30's green look, sage = this page's palette) and data-type
   (playfair = E30's display face, news = this page's Newsreader, thick). E30's own colours are hard-coded on purpose (dark/green looks). */
.home .ch{position:relative;height:100svh;min-height:760px;max-height:1100px;overflow:hidden;overflow:clip;isolation:isolate;
  --sp:1; /* the lab's flip speed (2 = half speed) */
  --ch-bg:#0e1d17;--tx:#fff;--tx2:rgba(255,255,255,.76);--tx3:rgba(255,255,255,.56);--rule:rgba(255,255,255,.18);
  --acc:#d4a832;--dot:var(--acc);--btn-bg:#fff;--btn-tx:#24493a;--btn-bg-h:#f5f3ef;--btn-r:4px;--link-line:rgba(255,255,255,.45);
  --ch-font:'Playfair Display',Georgia,serif;--ch-w:700;--ch-fs:clamp(48px,min(6.3vw,10.2vh),112px);--ch-lh:1.02;--ch-ls:-.028em;
  background:var(--ch-bg);color:var(--tx)}
/* the next section rises over the hero with rounded corners, as on E30 */
.home .ch::after{content:"";position:absolute;z-index:6;left:0;right:0;bottom:-1px;height:30px;background:var(--k-canvas);border-radius:30px 30px 0 0}

/* the photo panel: one photo per goal, crossfading, drifting slowly; E30's two fades melt it into the field */
.home .ch-pic{position:absolute;z-index:0;top:0;right:0;bottom:0;width:clamp(440px,42vw,780px);overflow:hidden;background:var(--ch-bg)}
.home .ch-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.home .ch-pic img.is-prev{opacity:1;z-index:1;transition:none}
.home .ch-pic img.is-on{opacity:1;z-index:2}
.home .ch-pic img.is-on,.home .ch-pic img.is-prev{animation:home-ch-drift 7s cubic-bezier(.25,.6,.3,1) both}
@keyframes home-ch-drift{from{transform:scale(1.07)}to{transform:scale(1)}}
.home .ch-pic::after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;background:
  linear-gradient(90deg,var(--ch-bg) 0%,color-mix(in srgb,var(--ch-bg) 98.4%,transparent) 5%,color-mix(in srgb,var(--ch-bg) 94%,transparent) 11%,color-mix(in srgb,var(--ch-bg) 86%,transparent) 18%,color-mix(in srgb,var(--ch-bg) 74%,transparent) 26%,color-mix(in srgb,var(--ch-bg) 59%,transparent) 35%,color-mix(in srgb,var(--ch-bg) 44%,transparent) 45%,color-mix(in srgb,var(--ch-bg) 31%,transparent) 57%,color-mix(in srgb,var(--ch-bg) 21%,transparent) 71%,color-mix(in srgb,var(--ch-bg) 15%,transparent) 86%,color-mix(in srgb,var(--ch-bg) 13%,transparent) 100%),
  linear-gradient(180deg,color-mix(in srgb,var(--ch-bg) 50%,transparent) 0%,color-mix(in srgb,var(--ch-bg) 22%,transparent) 13%,transparent 28%,transparent 58%,color-mix(in srgb,var(--ch-bg) 28%,transparent) 78%,color-mix(in srgb,var(--ch-bg) 62%,transparent) 100%)}

/* the words */
.home .ch-wrap{position:relative;z-index:4;height:100%;max-width:1344px;margin:0 auto;padding:112px 56px 64px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.home .ch-h1{margin:0;font-family:var(--ch-font);font-weight:var(--ch-w);font-size:var(--ch-fs);line-height:var(--ch-lh);letter-spacing:var(--ch-ls);color:var(--tx)}
.home .ch-iw{display:block}
.home .ch-rot{display:grid;justify-items:start;color:var(--acc);padding-bottom:.04em;perspective:900px}
.home .ch-g{grid-area:1/1;display:block;opacity:0;transform:rotateX(-86deg);transform-origin:50% 60%;backface-visibility:hidden;
  transition:transform calc(.3s * var(--sp)) cubic-bezier(.2,.8,.25,1),opacity calc(.14s * var(--sp))}
.home .ch-g.is-on{opacity:1;transform:none;transition-delay:calc(.05s * var(--sp)),calc(.05s * var(--sp))}
.home .ch-g.is-out{opacity:0;transform:rotateX(86deg);transition:transform calc(.2s * var(--sp)) cubic-bezier(.55,0,.8,.2),opacity calc(.16s * var(--sp))}
.home .ch-l{display:block;white-space:nowrap}
.home .ch-dot{color:var(--dot)}
.home .ch-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:40px}
.home .ch-btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 26px;border-radius:var(--btn-r);background:var(--btn-bg);color:var(--btn-tx);font:600 15px/1 var(--k-sans);letter-spacing:0;white-space:nowrap;transition:background-color .2s}
.home .ch-btn:hover{background:var(--btn-bg-h)}
.home .ch-tlink{display:inline-flex;align-items:center;min-height:44px;font:600 15px/1.2 var(--k-sans);color:var(--tx);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--link-line);transition:text-decoration-color .2s}
.home .ch-tlink:hover{text-decoration-color:currentColor}
.home .ch-btn:focus-visible,.home .ch-tlink:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.home .ch-sig{display:flex;align-items:center;gap:14px;margin-top:30px;padding-top:22px;border-top:1px solid var(--rule);width:min(560px,100%)}
.home .ch-sig img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:none}
.home .ch-sig p{margin:0;font-size:14.5px;line-height:1.45;color:var(--tx2)}
.home .ch-sig b{font-weight:600;color:var(--tx)}

/* intro, as on E30: the block rises in steps */
@keyframes home-ch-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.home .ch.is-play .ch-rise{animation:home-ch-rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
.home .ch.is-still *{animation-play-state:paused}

/* tablet and phone: the photo goes behind the words under a heavy veil (E30's phone treatment) */
@media (max-width:1100px){
  .home .ch{height:auto;max-height:none;min-height:100svh}
  .home .ch-wrap{height:auto;min-height:100svh;padding:132px 32px 88px}
  .home .ch-pic{width:100%}
  .home .ch-pic::after{background:linear-gradient(180deg,color-mix(in srgb,var(--ch-bg) 76%,transparent) 0%,color-mix(in srgb,var(--ch-bg) 84%,transparent) 45%,color-mix(in srgb,var(--ch-bg) 95%,transparent) 100%)}
  .home .ch{--ch-fs:clamp(44px,8.6vw,88px)}
}
@media (max-width:760px){
  .home .ch-wrap{padding:116px 20px 72px}
  .home .ch{--ch-fs:clamp(38px,11.4vw,64px)}
  .home .ch-l{white-space:normal;text-wrap:balance}
  .home .ch-ctas{margin-top:30px}
}
@media (prefers-reduced-motion:reduce){
  .home .ch *{animation:none!important;transition:none!important}
}

/* ---------- the hero's system for every section (Julian, 2026-10-11: "match the hero") ----------
   The online coaching page's palette and type (E30): Playfair Display headings (600) + DM Sans text, light cream / white
   sections, logo green for actions (square 4px corners like the hero's button), gold for stars and small accents. */
.home[data-pal="coach"]{--k-canvas:#fafaf8;--k-field:#f5f3ef;--k-well:#e8f2ed;--k-paper:#ffffff;--k-ink:#1a1a1a;--k-text:#4a4a4a;--k-muted:#6b6b6b;--k-action:#2d5a47;--k-action-h:#24493a;--k-on-action:#ffffff;--k-gold:#ab8317;--k-line:#e6e2da;--k-band:#24493a;--k-band-ink:#ffffff;--k-band-text:#dfe9e3;--k-wash:#e8f2ed;--k-t1:#e2ede6;--k-t1i:#2d5a47;--k-t2:#f3ead3;--k-t2i:#7a5c12;--k-t3:#f1e1d8;--k-t3i:#8a523d;--k-t4:#dbe6ea;--k-t4i:#395c6e;--k-t5:#ece7cf;--k-t5i:#665e1c;--k-t6:#d1e3db;--k-t6i:#24493a}  /* Coaching (E30): cream, ink, logo green, gold */
.home{--k-serif:'Playfair Display',Georgia,'Times New Roman',serif;--k-rb:4px}
.home .k-h2{font-weight:600;letter-spacing:-.01em;font-variation-settings:normal}
.home .k-h2{line-height:1.08}

/* ---------- about: OPTION BUILDS HERE (scoped .opt-X, its own classes, e.g. .ab-*) ---------- */
/* B2 · B's words, A's photo size. Julian (2026-10-11): "we like option B, but the image itself should be the size of option A.
   You can use the option B image, it just needs to be retouched." The 1200 grid as 12 columns (78px + 24px gutters): B's text
   column in columns 1-6, hanging from the grid's left edge; her portrait at A's size in columns 8-12 (486 x 780, the page's
   photo corners). The heading's cap line sits level with the photo's top, the button's base level with the photo's base. */
.home .ab{padding:120px 64px 136px}
.home .ab-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:stretch}
.home .ab-txt{grid-column:1 / span 6;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.home .ab-h{font-size:108px;line-height:.94;letter-spacing:-.022em;margin:-.18em 0 0 -.03em}
.home .ab-h span{display:block}
.home .ab-lead{margin-top:30px;max-width:520px;font-size:20px;line-height:1.55;color:var(--k-ink);text-wrap:pretty}
/* her signature signs the two paragraphs like a feature's byline */
.home .ab-sig{width:200px;margin:26px 0 0 -5px;transform:rotate(-2deg)}
/* the three facts: a quiet ruled row, each opened by the page's hairline */
.home .ab-facts{max-width:560px}
.home .ab-facts li{min-width:0}
.home .ab-ic{display:grid;place-items:center;flex:none;color:var(--k-action)}
.home .ab-ic .k-ic{width:22px;height:22px;stroke-width:1.6}
.home .ab-ft b{display:block;font-weight:600;color:var(--k-ink)}
.home .ab-ft small{display:block;color:var(--k-muted)}
/* ledger (default): three ruled rows, icon · fact · its detail on the right, like a credentials sheet */
.home .ab[data-facts="ledger"] .ab-facts{border-top:1px solid var(--k-line)}
.home .ab[data-facts="ledger"] .ab-facts li{display:flex;align-items:center;gap:16px;padding:12px 2px;border-bottom:1px solid var(--k-line)}
.home .ab[data-facts="ledger"] .ab-ft{flex:1;display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.home .ab[data-facts="ledger"] .ab-ft b{font-size:16.5px;letter-spacing:-.005em}
.home .ab[data-facts="ledger"] .ab-ft small{font-size:14.5px;text-align:right}

.home .ab-btn{margin-top:30px}
.home .ab-low{padding-top:32px} /* air between her signature and the facts */
/* her portrait (B's photo, IMG_9544, re-cropped tall from the original and retouched): a plain tall rectangle, no frame */
.home .ab-pic{grid-column:8 / span 5;position:relative;margin:0;aspect-ratio:486/780;border-radius:var(--k-r);overflow:hidden;background:var(--k-field)}
.home .ab-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% 30%}
@media (max-width:1100px){
  .home .ab-txt{grid-column:1 / span 7}
  .home .ab-h{font-size:80px}
  .home .ab-pic{grid-column:9 / span 4}
}
@media (max-width:760px){
  .home .ab{padding:88px 20px 96px}
  .home .ab-grid{display:flex;flex-direction:column-reverse;gap:44px}
  .home .ab-h{font-size:clamp(56px,15vw,80px);margin-top:0}
  .home .ab-low{margin-top:40px}
}

/* ---------- reviews: OPTION BUILDS HERE (scoped .opt-X, its own classes) ---------- */
/* B · Score and stream (Airbnb reviews modal): the 1200 grid as 12 columns (78px + 24px gutters, as in Meet Mivania).
   The verdict in columns 1-4, sticky under the header while the stream in columns 6-12 scrolls past; it can't leave
   its grid, so it never reaches the who band. The section rises over Meet Mivania with the hero's 30px sheet corners. */
.home .rv{--rv-line:color-mix(in srgb,var(--k-line) 90%,var(--k-ink));border-radius:30px 30px 0 0}
.home .rv-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.home .rv-side{grid-column:1 / span 4;position:sticky;top:120px;min-width:0}
.home .rv-h{max-width:none}
/* the verdict: five gold stars set large, then where they come from */
.home .rv-score{margin-top:42px}
.home .rv-stars{display:block;width:265px;height:50px;margin-left:-5px;background:var(--k-gold);-webkit-mask:var(--k-star) 0 50%/53px 50px repeat-x;mask:var(--k-star) 0 50%/53px 50px repeat-x}
.home .rv-on{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:19px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--k-ink)}
.home .rv-on .k-g{width:19px;height:19px}
.home .rv-glink{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:15.5px}
.home .rv-glink .k-ic{width:16px;height:16px;stroke-width:1.7}
/* the action, opened by the page's hairline like the facts ledger */
.home .rv-act{margin-top:44px;padding-top:32px;border-top:1px solid var(--rv-line)}
.home .rv-note{margin-top:14px}
/* the stream: one review per ruled row, avatar hanging in its own column so every line of text shares one edge */
.home .rv-stream{grid-column:6 / span 7;min-width:0}
.home .rv-row{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:20px;align-items:center;padding:30px 0 32px;border-top:1px solid var(--rv-line)}
.home .rv-row:first-child{padding-top:6px;border-top:0}
.home .rv-row:focus{outline:none}
.home .rv-av{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font:600 18px/1 var(--k-sans);font-style:normal}
.home .rv-av.a1{background:var(--k-t1);color:var(--k-t1i)}.home .rv-av.a2{background:var(--k-t2);color:var(--k-t2i)}
.home .rv-av.a3{background:var(--k-t3);color:var(--k-t3i)}.home .rv-av.a4{background:var(--k-t4);color:var(--k-t4i)}
.home .rv-name{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.005em;color:var(--k-ink)}
.home .rv-meta{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:14px;line-height:1.2;color:var(--k-muted)}
.home .rv-meta .k-stars{margin-right:6px}
.home .rv-q{grid-column:2;margin-top:14px;max-width:35em;font-size:17px;line-height:1.68;color:var(--k-text);text-wrap:pretty}
/* one phrase per review, verbatim, in ink: glance down the stream and read only those */
.home .rv-k{font-weight:500;color:var(--k-ink)}
/* three at a time: pages stacked in one grid cell, so the stream keeps the height of its tallest page and nothing jumps */
.home .rv-pages{display:grid}
.home .rv-page{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1),visibility 0s .8s}
.home .rv-page.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .7s ease .15s,transform .9s cubic-bezier(.2,.7,.2,1) .15s,visibility 0s}
.home .rv-page.is-out{opacity:0;transform:translateY(-10px)}
/* the pager: a ruled row like the facts ledger, its controls in the avatar column, the count on the names' edge */
.home .rv-pager{display:grid;grid-template-columns:48px auto 1fr;column-gap:20px;align-items:center;padding-top:26px;border-top:1px solid var(--rv-line)}
.home .rv-pbs{display:flex;gap:8px;grid-column:1 / span 2}
.home .rv-pb{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--rv-line);background:var(--k-paper);color:var(--k-ink);transition:border-color .2s}
.home .rv-pb:hover{border-color:var(--k-ink)}
.home .rv-pb .k-ic{width:17px;height:17px;stroke-width:1.7}
.home .rv-count{grid-column:3;justify-self:end;font-size:14.5px;font-weight:500;color:var(--k-muted);font-variant-numeric:tabular-nums}
@media (max-width:1100px){
  .home .rv-side{grid-column:1 / span 5}
  .home .rv-stream{grid-column:7 / span 6}
}
@media (max-width:760px){
  .home .rv{padding:88px 20px 96px}
  .home .rv-grid{display:block}
  .home .rv-side{position:static}
  .home .rv-stream{margin-top:56px}
  .home .rv-row{grid-template-columns:40px minmax(0,1fr);column-gap:14px}
  .home .rv-av{width:40px;height:40px;font-size:16px}
  .home .rv-q{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  .home .rv-page{transition:none!important}
}

/* ---------- who: picked option C (Big type) ---------- */
/* C · Big type (Adcker's scale and rhythm): the hero's field (#0e1d17) and display face (Playfair 700) come back once.
   The six audiences are set as one sentence that wraps across the 1200 grid in four even lines, gold separators
   between them and the hero's gold full stop at the end; each word carries its one-liner, small, hung beneath it.
   The band rises over the reviews with the hero's 30px sheet corners and hands over to the method section with the
   hero's lip. The hero's two colours are hard-coded on purpose (they are the hero's, not the palette's). */
.home .wc{--wc-bg:#0e1d17;--wc-gold:#d4a832;--wc-tx2:rgba(255,255,255,.7);--wc-rule:rgba(255,255,255,.17);
  position:relative;z-index:2;margin-top:-30px;padding:118px 64px 156px;border-radius:30px 30px 0 0;background:var(--wc-bg);color:#fff}
.home .wc::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:30px;background:var(--k-field);border-radius:30px 30px 0 0}
/* the question: small, on the grid's left edge, opening a hairline that runs to the right edge */
.home .wc-head{display:flex;align-items:center;gap:28px;margin-bottom:46px}
.home .wc-head::after{content:"";flex:1;height:1px;background:var(--wc-rule)}
.home .wc-h{flex:none;font:600 32px/1.1 var(--k-serif);letter-spacing:-.01em;color:#fff}
/* the sentence: one flex flow, items never break inside, so it wraps only between audiences */
.home .wc-list{display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:30px}
.home .wc-it{display:flex;flex-direction:column;min-width:0}
.home .wc-w{display:block;overflow:hidden;overflow:clip;padding:0 0 .16em;margin-bottom:-.16em;
  font:700 clamp(44px,6.53vw,94px)/1.04 var(--k-serif);letter-spacing:-.028em;color:#fff;white-space:nowrap}
.home .wc-in{display:block}
.home .wc-sep{display:inline-block;padding:0 .26em 0 .24em;color:var(--wc-gold);letter-spacing:0}
.home .wc-dot{color:var(--wc-gold);letter-spacing:0}
/* its one-liner, hung on the word's left edge */
.home .wc-d{margin-top:15px;padding-right:1.2em;font-size:15.5px;font-weight:500;line-height:1.4;letter-spacing:0;color:var(--wc-tx2);transition:color .25s}
.home .wc-it:hover .wc-d{color:#fff}
/* the close: one ledger row, the welcome on the left, the hero's white square button on the right */
.home .wc-foot{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:78px;padding-top:34px;border-top:1px solid var(--wc-rule)}
.home .wc-all{font:600 34px/1.15 var(--k-serif);letter-spacing:-.01em;color:#fff}
.home .wc-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 30px;border-radius:4px;background:#fff;color:var(--k-band);font:600 16px/1 var(--k-sans);white-space:nowrap;transition:background-color .2s}
.home .wc-btn:hover{background:var(--k-field)}
.home .wc-btn:focus-visible{outline:2px solid var(--wc-gold);outline-offset:3px}
/* the words settle in, one after another, as the band arrives (armed by the script; reduced motion shows them still) */
.home .wc.is-armed .wc-in{transform:translateY(122%)}
.home .wc.is-armed .wc-d{opacity:0;transform:translateY(10px)}
.home .wc.is-armed.is-in .wc-in{transform:none;transition:transform 1s cubic-bezier(.2,.75,.2,1) calc(var(--i,0) * 90ms)}
.home .wc.is-armed.is-in .wc-d{opacity:1;transform:none;transition:opacity .7s ease calc(var(--i,0) * 90ms + .4s),transform .9s cubic-bezier(.2,.75,.2,1) calc(var(--i,0) * 90ms + .4s),color .25s}
@media (max-width:1100px){
  .home .wc{padding:104px 40px 140px}
}
@media (max-width:760px){
  .home .wc{padding:88px 20px 124px}
  .home .wc-h{font-size:26px}
  .home .wc-w{white-space:normal}
  .home .wc-list{row-gap:22px}
  .home .wc-foot{flex-direction:column;align-items:flex-start;gap:24px}
  .home .wc-all{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  .home .wc .wc-in,.home .wc .wc-d{transform:none!important;opacity:1!important;transition:none!important}
}

/* ---------- method: picked option A (Ledger photo cards) ---------- */
/* A · Ledger photo cards (Awwwards Jury cards): three paper cards on the field, 4 of the 12 grid columns each (384px).
   Her coaching photo runs flush to the card's top and sides and meets the body on a straight edge; the body is ruled rows
   running edge to edge: title + quiet label, one line, then the fact with its green icon. The cards share their rows
   (subgrid), so the three facts sit on one hairline across the grid like the Meet Mivania ledger. */
.home .mt{--mt-line:color-mix(in srgb,var(--k-line) 88%,var(--k-ink))}
.home .mt-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto 1fr auto;column-gap:24px}
.home .mt-card{grid-row:1 / span 4;display:grid;grid-template-rows:subgrid;row-gap:0;min-width:0;border-radius:var(--k-rc);overflow:clip;background:var(--k-paper)} /* clip, not hidden: a hidden card would become the facts' scroll container and freeze their view timelines */
.home .mt-card:nth-child(1){grid-column:1}.home .mt-card:nth-child(2){grid-column:2}.home .mt-card:nth-child(3){grid-column:3}
/* the Move: one rule on the facts' row, running through all three cards and across the gutters between them */
.home .mt-grid::after{content:"";grid-column:1 / -1;grid-row:4;align-self:start;position:relative;z-index:1;height:1px;background:color-mix(in srgb,var(--k-line) 70%,var(--k-ink));transform-origin:0 50%;pointer-events:none}
/* scroll-driven, a scroll that walks through the method: as the cards rise into view the rule writes itself left to right,
   and each fact switches on (ink text, green icon) the moment the rule reaches it: Structure, then Confidence, then Results.
   Static and fully on where unsupported or with reduced motion. */
.home .mt-card:nth-child(1){--mt-on:cover 5% cover 9%}
.home .mt-card:nth-child(2){--mt-on:cover 15% cover 19%}
.home .mt-card:nth-child(3){--mt-on:cover 26% cover 30%}
@supports (animation-timeline:view()){
  .home .mt-grid::after{animation:home-mt-draw linear both;animation-timeline:view();animation-range:cover 6% cover 40%}
    }
@keyframes home-mt-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes home-mt-on{from{color:var(--k-muted)}to{color:var(--k-ink)}}
@keyframes home-mt-ic{from{color:color-mix(in srgb,var(--k-muted) 60%,transparent);transform:scale(.8)}to{color:var(--k-action);transform:none}}
.home .mt-ph{position:relative;margin:0;aspect-ratio:5/6;overflow:hidden;background:var(--k-well)}
.home .mt-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1));transform-origin:var(--zo,50% 50%);transition:transform 1.1s cubic-bezier(.22,.7,.2,1)}
.home .mt-card:hover .mt-ph img{transform:scale(calc(var(--z,1) * 1.035))}
/* row 1: the title, its quiet label pushed to the right edge like a ledger value */
.home .mt-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:24px 28px 20px;border-bottom:1px solid var(--mt-line)}
.home .mt-t{font:600 21px/1.25 var(--k-sans);letter-spacing:-.01em;color:var(--k-ink)}
.home .mt-k{flex:none;font-size:14.5px;font-weight:500;line-height:1.25;color:var(--k-muted)}
/* row 2: one line of copy */
.home .mt-d{padding:18px 28px 24px;font-size:16px;line-height:1.6;color:var(--k-text);text-wrap:pretty}

/* the close hangs from the left grid edge, like Meet Mivania's button: the button, then the free call beside it */
.home .mt-act{display:flex;align-items:center;gap:24px;margin-top:56px}
.home .mt-note{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:500;line-height:1.35;color:var(--k-ink)}
.home .mt-note .k-ic{width:19px;height:19px;stroke-width:1.6;color:var(--k-action)}
@media (max-width:1100px){
  .home .mt-top{flex-direction:column;gap:4px}
}
@media (max-width:760px){
  .home .mt-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:20px}
  .home .mt-grid::after{display:none}
  .home .mt-card,.home .mt-card:nth-child(n){grid-column:auto;grid-row:auto;grid-template-rows:auto}
    .home .mt-act{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .home .mt-ph img{transition:none}
  .home .mt-grid::after{animation:none!important;transform:none}
}

/* ---------- start: picked option C (Dark band) ---------- */
/* C · Dark band (ref: Liron Moran Interiors). The hero returns to close the deal: a sheet in the hero's own dark green,
   inset 24px on the field like the who band, the 1200 grid inside it as 12 columns (78 + 24). "Your first step / is free."
   hangs from the grid's left edge at monumental size with the hero's gold full stop; the hero's white button follows on the
   same edge, as in the hero, the call details beside it. Below, the three steps as one path: a white
   hairline running from the free step's gold stop out past the band's right edge, each step hanging from its own stop
   (columns 1-4, 5-8, 9-12). The hero's colours are hard-coded here on purpose (as in the hero): field #0e1d17, gold #d4a832. */
.home .sb{--sb-bg:#0e1d17;--sb-tx:#fff;--sb-tx2:rgba(255,255,255,.76);--sb-tx3:rgba(255,255,255,.58);--sb-rule:rgba(255,255,255,.2);--sb-acc:#d4a832;
  padding:0 24px;background:var(--k-field)}
.home .sb-band{position:relative;overflow:hidden;overflow:clip;border-radius:40px;background:var(--sb-bg);color:var(--sb-tx);padding:100px 64px 108px}
/* the headline: Playfair 700 as in the hero, set larger than anything else on the page */
.home .sb-top{position:relative}
.home .sb-h{margin:0 0 0 -.045em;font:700 clamp(96px,11.7vw,176px)/.93 var(--k-serif);letter-spacing:-.032em;color:var(--sb-tx)}
.home .sb-l{display:block;white-space:nowrap}
.home .sb-dot{color:var(--sb-acc)}
/* the action, as in the hero: the square white button under the headline on the same left edge, its fine print
   hanging from the second step's column (5) */
.home .sb-act{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;margin-top:42px}
.home .sb-act .sb-btn{grid-column:1 / span 4;justify-self:start}
.home .sb-btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 28px;border-radius:4px;background:#fff;color:#24493a;font:600 15.5px/1 var(--k-sans);letter-spacing:0;white-space:nowrap;transition:background-color .2s}
.home .sb-btn:hover{background:#f5f3ef}
.home .sb-btn:focus-visible{outline:2px solid var(--sb-acc);outline-offset:3px}
/* the path: one hairline through the three stops, running on past the band's edge (the program carries on) */
.home .sb-path{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;margin-top:88px}
.home .sb-path::before{content:"";position:absolute;z-index:0;top:12px;left:0;right:-50vw;height:1px;background:var(--sb-rule);transform-origin:0 50%}
.home .sb-step{position:relative;z-index:1;min-width:0}
.home .sb-stop{display:inline-flex;align-items:center;gap:12px;height:24px;padding-right:18px;background:var(--sb-bg);font-size:14px;font-weight:500;line-height:1;color:var(--sb-tx3)}
.home .sb-node{flex:none;width:12px;height:12px;border-radius:50%;background:var(--sb-bg);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.home .sb-step.is-free .sb-node{background:var(--sb-acc);box-shadow:none}
.home .sb-free{margin-left:6px;color:var(--sb-acc)}
.home .sb-name{margin:30px 0 0;font:600 46px/1.04 var(--k-serif);letter-spacing:-.018em;color:var(--sb-tx)}
.home .sb-name span{display:block}
.home .sb-t{margin-top:16px;max-width:19.5em;font-size:16.5px;line-height:1.55;color:var(--sb-tx2)}
/* motion: the headline rises as the hero's does, the path draws out from the free stop and each step rises as it is reached.
   Armed by the script only (so the band is complete without it); reduced motion shows the finished state. */
@keyframes home-sb-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes home-sb-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.home .sb.is-armed .sb-h,.home .sb.is-armed .sb-act,.home .sb.is-armed .sb-step{opacity:0}
.home .sb.is-armed .sb-path::before{transform:scaleX(0)}
.home .sb.is-in .sb-h{animation:home-sb-rise .9s cubic-bezier(.2,.7,.2,1) both}
.home .sb.is-in .sb-act{animation:home-sb-rise .9s cubic-bezier(.2,.7,.2,1) .14s both}
.home .sb.is-in .sb-path::before{animation:home-sb-draw 1.6s cubic-bezier(.55,0,.2,1) .3s both}
.home .sb.is-in .sb-step{animation:home-sb-rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.34s + var(--i,0) * .3s)}
@media (max-width:900px){
  .home .sb{padding:0 12px}
  .home .sb-band{border-radius:28px;padding:88px 24px 96px}
  .home .sb-h{font-size:clamp(48px,13vw,96px)}
  .home .sb-l{white-space:normal}
  .home .sb-act{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:36px}
  .home .sb-path{grid-template-columns:1fr;row-gap:44px;margin-top:72px}
  .home .sb-path::before{display:none}
  .home .sb-name{margin-top:18px;font-size:36px}
}
@media (prefers-reduced-motion:reduce){
  .home .sb *,.home .sb-path::before{animation:none!important;opacity:1!important;transform:none!important}
}

/* ---------- benefits: OPTION BUILDS HERE (scoped .opt-X, its own classes) ---------- */
/* I · Photo and list (Christopher Ireland: one photograph beside a ruled list, the rows spread over the photo's height).
   The 1200 grid as 12 columns (78px + 24px gutters), Meet Mivania mirrored: one tall photo of a woman alone in golden
   light from the page's 24px inset to column 5 (582 x 840, the page's 24px photo corners); the heading, the six benefits
   as hairline ledger rows and the close in columns 7-12. The heading's cap line sits level with the photo's top, the button's base level with the
   photo's base, and the six rows share the height between them evenly. Colour sets the three levels: green line icons on
   soft green wells, ink titles, muted lines. Stock photo: Unsplash 2HTP6dkp7to, Baylee Gramling, Unsplash License. */
/* the photo hangs from the page's 24px inset, the same left edge as the dark "first step" band right above it, and runs
   to column 5's edge (24 + 72 + 24 + 5 columns = 582px wide): the grid is the 1200 grid with a flexible track either side */
.home .bi{--bi-line:color-mix(in srgb,var(--k-line) 82%,var(--k-ink));padding:128px 24px 158px}
.home .bi-grid{display:grid;grid-template-columns:minmax(0,1fr) repeat(12,minmax(0,78px)) minmax(0,1fr);column-gap:24px;align-items:stretch}
.home .bi-pic{grid-column:1 / span 6;position:relative;margin:0;min-height:840px;border-radius:var(--k-r);overflow:hidden;overflow:clip;background:var(--k-well)}
.home .bi-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 45%}
.home .bi-txt{grid-column:8 / span 6;display:flex;flex-direction:column;min-width:0}
/* the heading: two fixed lines, its cap line pulled up to the photo's top edge */
.home .bi-h{max-width:none;margin:-.247em 0 0 -.03em;font-size:64px;line-height:1.08;letter-spacing:-.016em;font-variant-numeric:lining-nums}
.home .bi-h span{display:block;white-space:nowrap}
/* the six benefits: Meet Mivania's ledger, grown up: a ruled row each, the rows dividing the height left between heading and close.
   The Move: every hairline starts at the photo's edge (it crosses the empty column 6), so the list reads as the photo's legend */
.home .bi-list{--bi-off:calc((100% - 120px) / 6 + 48px);flex:1;display:flex;flex-direction:column;margin:46px 0 42px calc(-1 * var(--bi-off));padding-left:var(--bi-off);border-top:1px solid var(--bi-line)}
.home .bi-row{flex:1 1 0;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:22px;align-items:center;padding:14px 0;border-bottom:1px solid var(--bi-line);position:relative}
.home .bi-row::before{content:"";position:absolute;right:100%;bottom:-1px;width:var(--bi-off);height:1px;background:var(--bi-line)}
.home .bi-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--k-t1);color:var(--k-t1i)}
.home .bi-t{font:600 19px/1.3 var(--k-sans);letter-spacing:-.01em;color:var(--k-ink)}
.home .bi-d{margin-top:3px;font-size:15px;line-height:1.5;color:var(--k-muted)}
/* the close: one row, the question on the column's left edge, the button on the grid's right edge, its base on the photo's base */
.home .bi-end{display:flex;align-items:center;justify-content:space-between;gap:32px}
.home .bi-end .k-btn{flex:none}
/* motion, armed by the script only (no script or reduced motion = the finished state): the photo settles out of a slight
   zoom as the section arrives, and the six rows rise in their reading order */
.home .bi.bi-arm .bi-pic img{transform:scale(1.07)}
.home .bi.bi-arm .bi-row{opacity:0;transform:translateY(12px)}
.home .bi.bi-go .bi-pic img{transform:none;transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.home .bi.bi-go .bi-row{opacity:1;transform:none;transition:opacity .6s ease calc(var(--i,0) * 90ms + .1s),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms + .1s)}
/* ---- I2: Julian's notes ---- */
/* separators: never across the gap into the photo */
.home .bi[data-sep] .bi-list{--bi-off:0px}
.home .bi[data-sep] .bi-row::before{display:none}
.home .bi[data-sep="space"] .bi-list{border-top:0;gap:6px}
.home .bi[data-sep="space"] .bi-row{border-bottom:0}
/* icons (Phosphor, MIT): the glyph in her green; four treatments */
.home .bi-ph{display:none;width:26px;height:26px}
.home .bi[data-icons="bare"] .bi-ph-d{display:block}
.home .bi-ic{width:52px;height:52px;background:var(--k-well);color:var(--k-action)}
.home .bi-row{grid-template-columns:52px minmax(0,1fr)}
.home .bi[data-icons="bare"] .bi-ic{background:none;width:52px;height:52px}
.home .bi[data-icons="bare"] .bi-ph{width:38px;height:38px}

@media (max-width:1100px){
  .home .bi[data-pic] .bi-pic{grid-column:1 / span 5;width:auto;justify-self:stretch}
}
@media (max-width:1100px){
  .home .bi{padding:120px 40px 150px}
  .home .bi-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .home .bi-pic{grid-column:1 / span 5;min-height:0}
  .home .bi-txt{grid-column:6 / span 7}
  .home .bi-h{font-size:52px}
  .home .bi-list{--bi-off:24px}
}
@media (max-width:760px){
  .home .bi{padding:88px 20px 110px}
  .home .bi-grid{display:flex;flex-direction:column}
  .home .bi-txt{display:contents}
  .home .bi-h{order:1;margin-top:0;font-size:clamp(40px,11vw,56px)}
  .home .bi-h span{white-space:normal}
  .home .bi-pic{order:2;margin-top:32px;aspect-ratio:4/5}
  .home .bi-list{--bi-off:0px;order:3;margin:36px 0 36px}
  .home .bi-end{order:4;flex-direction:column;align-items:flex-start;gap:18px}
}
@media (prefers-reduced-motion:reduce){
  .home .bi .bi-pic img,.home .bi .bi-row{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- services: picked option A (Three panels) ---------- */
/* A · Three panels (Column pricing). One panel template for the three services: photo header with the place cut into
   its bottom-left corner, then two columns: copy on the left (title, one line, quiet checks, actions at the foot) and a
   price menu on the right (caption, one ink rule, hairline rows: label left, Playfair figure right, the monthly line
   beneath). The menu column is 540px wide and ends 48px inside the panel; the section head's caption block uses the
   same column, so the head's hairline and the three menus share one left edge. Every panel closes on a ruled row. */
.home .sv{--sv-col:540px;--sv-gap:80px;--sv-pad:48px;
  /* the section rises over the benefits field like a sheet, with the hero's and the reviews' 30px corners */
  z-index:1;margin-top:-30px;border-radius:30px 30px 0 0;background:var(--k-canvas)}
.home .sv-sprite{position:absolute;width:0;height:0;overflow:hidden}
.home .sv-head{grid-template-columns:minmax(0,1fr) var(--sv-col);column-gap:var(--sv-gap);padding-right:var(--sv-pad)}
.home .sv-head .k-head-t{max-width:none}
.home .sv-list{display:grid;gap:32px}
.home .sv-panel{position:relative;background:var(--k-paper);border-radius:var(--k-r);box-shadow:0 0 0 1px var(--k-line);overflow:hidden;overflow:clip}
/* the photo header: her photos, cropped to a wide band; the place is carved into the corner with the page's strip */
.home .sv-ph{position:relative;height:320px;background:var(--k-well)}
.home .sv-ph > img{width:100%;height:100%;object-fit:cover}
.home .sv-ph > img.sv-p1{object-position:50% 37%}
.home .sv-ph > img.sv-p2{object-position:50% 55%}
.home .sv-ph > img.sv-p3{object-position:50% 16%}
.home .sv-ph .k-strip{padding-left:var(--sv-pad)}
.home .sv-ph .k-strip .k-ic{color:var(--k-action)}
/* the body: copy column + menu column */
.home .sv-body{display:grid;grid-template-columns:minmax(0,1fr) var(--sv-col);column-gap:var(--sv-gap);padding:30px var(--sv-pad) 44px}
.home .sv-copy{display:flex;flex-direction:column;min-width:0}
.home .sv-t{font:600 34px/1.12 var(--k-serif);letter-spacing:-.012em;color:var(--k-ink)}
.home .sv-d{margin-top:12px;max-width:27em;font-size:17px;line-height:1.6;color:var(--k-text);text-wrap:balance}
.home .sv-ticks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px}
.home .sv-ticks li{display:flex;align-items:center;gap:7px;font-size:15px;line-height:1.4;color:var(--k-text)}
.home .sv-ticks .k-ic{width:16px;height:16px;stroke-width:2;color:var(--k-action)}
.home .sv-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:30px}
/* the price menu */
.home .sv-cap{padding:6px 0 11px;border-bottom:1px solid var(--k-ink);font-size:14px;font-weight:500;line-height:1.3;color:var(--k-muted)}
.home .sv-menu{margin:0}
.home .sv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:first baseline;column-gap:24px;padding:15px 0 14px;border-bottom:1px solid var(--k-line)}
.home .sv-lab{font-size:17.5px;font-weight:500;line-height:1.3;letter-spacing:-.005em;color:var(--k-ink)}
.home .sv-lab small{display:block;margin-top:5px;font-size:14px;font-weight:400;letter-spacing:0;color:var(--k-muted)}
.home .sv-row dd{margin:0;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
/* the figures are set at the section heading's size (56px Playfair 600): the prices are the panel's signature, not a footnote */
.home .sv-amt{font:600 56px/.96 var(--k-serif);letter-spacing:-.02em;color:var(--k-ink);font-variant-numeric:lining-nums;white-space:nowrap}
.home .sv-amt small{font-size:.4em;margin-left:4px;letter-spacing:0;vertical-align:1.15em}
.home .sv-amt small.cur-pre{margin:0 3px 0 0}
.home .ab-ft b{white-space:nowrap}
.home .fc-opt{font-weight:400;color:var(--k-muted)}  /* "(optional)" in form labels */  /* the fact labels stay on one line; the detail beside them wraps (2026-10-14) */
html[lang^="fr"] .home .sv-amt .cur-pre,html[lang^="en"] .home .sv-amt .cur-post{display:none}  /* $75 in English, 75 $ in French: one markup for both (the FR/EN builds pair elements one to one) */
.home .sv-from{margin-right:8px;font:400 15px/1 var(--k-sans);letter-spacing:0;color:var(--k-muted)}
.home .sv-mo{margin-top:7px;font-size:14px;line-height:1.3;color:var(--k-text);white-space:nowrap}
.home .sv-cond{margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--k-muted)}
/* the ruled bottom row: "What's included" as a disclosure, its list on the body's two columns */
.home .sv-more{border-top:1px solid var(--k-line)}
.home .sv-more summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:19px var(--sv-pad);font-size:15.5px;font-weight:500;line-height:1.3;color:var(--k-ink);cursor:pointer;transition:background-color .2s}
.home .sv-more summary::-webkit-details-marker{display:none}
.home .sv-more summary:hover{background:color-mix(in srgb,var(--k-field) 50%,var(--k-paper))}
.home .sv-more summary .k-ic{width:20px;height:20px;transition:transform .3s}
.home .sv-more[open] summary .k-ic{transform:rotate(180deg)}
.home .sv-more-b{padding:4px var(--sv-pad) 30px}
.home .sv-incl{display:grid;grid-template-columns:minmax(0,1fr) var(--sv-col);column-gap:var(--sv-gap);row-gap:12px}
.home .sv-incl li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;line-height:1.5;color:var(--k-text)}
.home .sv-incl .k-ic{width:17px;height:17px;margin-top:3px;stroke-width:2;color:var(--k-action)}
.home .sv-best{margin-top:20px;max-width:46em;font-size:15px;line-height:1.6;color:var(--k-text)}
.home .sv-best b{font-weight:600;color:var(--k-ink)}
/* online coaching closes on the same ruled row, open: the four programs by name */
.home .sv-prog{display:grid;grid-template-columns:minmax(0,1fr) var(--sv-col);column-gap:var(--sv-gap);align-items:center;padding:19px var(--sv-pad);border-top:1px solid var(--k-line)}
.home .sv-prog-l{font-size:15.5px;font-weight:500;line-height:1.3;color:var(--k-ink)}
.home .sv-prog ul{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px}
.home .sv-prog li{font-size:15.5px;line-height:1.3;color:var(--k-text);white-space:nowrap}
.home .sv-prog li + li{margin-left:14px;padding-left:14px;border-left:1px solid var(--k-line)}
.home .sv-prog li small{margin-left:5px;font-size:13.5px;color:var(--k-muted)}

/* ---------- faq: picked option B (Question and answer) ---------- */
/* B "Question and answer": a ruled index of the ten questions (grid columns 1-5) beside one white answer page (columns 6-12);
   her note sits under the page. The page is sized to the longest answer, so choosing another question never moves anything. */
.home .qa-grid{display:grid;grid-template-columns:486px minmax(0,1fr);column-gap:24px;align-items:stretch}
/* the index: plain rows between hairlines; a 2px green marker glides to the chosen one */
.home .qa-index{position:relative;align-self:start;border-top:1px solid var(--k-line)}
.home .qa-q{display:block;width:100%;margin:0;padding:15px 12px 15px 26px;border:0;border-bottom:1px solid var(--k-line);border-radius:0;background:none;text-align:left;font:500 16.5px/1.4 var(--k-sans);letter-spacing:-.006em;color:var(--k-muted);transition:color .25s}
.home .qa-q:hover{color:var(--k-ink)}
.home .qa-q[aria-selected="true"]{color:var(--k-ink);font-weight:600}
.home .qa-q:focus-visible{outline-offset:-2px}
.home .qa-mark{position:absolute;left:0;top:0;width:2px;height:57px;background:var(--k-action);pointer-events:none;transform:translateY(0);transition:transform .55s cubic-bezier(.22,.75,.2,1),height .55s cubic-bezier(.22,.75,.2,1)}
/* the right column: the answer page grows to the index's height, her note closes it */
.home .qa-side{display:flex;flex-direction:column;gap:30px;min-width:0}
.home .qa-page{flex:1;display:grid;padding:50px 56px 40px;border-radius:var(--k-rc);background:var(--k-paper)}
.home .qa-a{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;min-width:0;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.home .qa-a.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .16s,transform .6s cubic-bezier(.22,.75,.2,1) .16s,visibility 0s}
.home .qa-a:focus-visible{outline:2px solid var(--k-action);outline-offset:12px;border-radius:6px}
.home .qa-h{max-width:14.5em;font-family:var(--k-serif);font-weight:600;font-size:38px;line-height:1.14;letter-spacing:-.012em;color:var(--k-ink);text-wrap:balance}
.home .qa-a p{max-width:31em;margin-top:22px;font-size:19px;line-height:1.66;color:var(--k-text);text-wrap:pretty}
/* read straight through: each answer ends on the next question */
.home .qa-a p{margin-bottom:32px}
.home .qa-next{display:flex;align-items:baseline;gap:14px;width:100%;margin:auto 0 0;padding:20px 0 0;border:0;border-top:1px solid var(--k-line);border-radius:0;background:none;text-align:left;font:500 16px/1.4 var(--k-sans);color:var(--k-ink);cursor:pointer}
.home .qa-next-k{flex:none;font-size:14.5px;font-weight:500;color:var(--k-muted)}
.home .qa-next-q{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:color-mix(in srgb,var(--k-ink) 30%,transparent);transition:text-decoration-color .2s}
.home .qa-next:hover .qa-next-q{text-decoration-color:currentColor}
/* her note, under the page: portrait, two lines, then the button and her number */
.home .qa-ask{display:flex;align-items:center;gap:18px}
.home .qa-ask img{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.home .qa-ask-t{flex:1;min-width:0}
.home .qa-ask-h{font:600 19px/1.3 var(--k-sans);letter-spacing:-.01em;color:var(--k-ink)}
.home .qa-ask-s{margin-top:2px;font-size:15px;line-height:1.45;color:var(--k-muted)}
.home .qa-ask-go{flex:none;display:flex;align-items:center;gap:24px}
.home .qa-ask-go .k-link{font-size:15.5px}
@media (max-width:1000px){
  .home .qa-grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .home .qa-page{padding:36px 28px 30px}
  .home .qa-h{font-size:30px}
  .home .qa-ask{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .home .qa-mark,.home .qa-a,.home .qa-a.is-on{transition:none}
}

/* ---------- contact: picked option B (Green finale) ---------- */
/* B · Green finale (Enode contact): the page closes the way it opened. The hero's dark green (#0e1d17, hard-coded on purpose,
   as in the hero) as one full-bleed sheet with the hero's 30px corners, lying on the field the FAQ and the footer share, so it
   meets both cleanly (the footer's own top hairline disappears under the sheet's base).
   The 1200 grid as 12 columns (78px + 24px gutters, as in Meet Mivania): the question and the facts ledger in columns 1-6,
   the white form card from her in columns 8-12. The heading's cap line sits level with the card's top, the ledger's last
   hairline level with the card's base. On the dark: white type, white hairlines, the hero's gold only on the "?". */
.home .fc{--fc-bg:#0e1d17;--fc-tx:#fff;--fc-tx2:rgba(255,255,255,.76);--fc-tx3:rgba(255,255,255,.58);--fc-rule:rgba(255,255,255,.17);--fc-line:rgba(255,255,255,.45);--fc-acc:#d4a832;
  position:relative;margin:0;padding:0;background:var(--k-field);color:var(--fc-tx2)}
.home .fc-sheet{padding:150px 64px;border-radius:30px;background:var(--fc-bg)}
.home .fc-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:stretch}
.home .fc-txt{grid-column:1 / span 6;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
/* the question, set like the hero's h1: Playfair 700, white, tight; its two lines are fixed so it never breaks badly */
.home .fc-h{width:max-content;margin:-.15em 0 0 -.04em;font:700 88px/1 var(--k-serif);letter-spacing:-.024em;color:var(--fc-tx)}
.home .fc-l{display:block;white-space:nowrap}
.home .fc-q{color:var(--fc-acc)}
.home .fc-lead{margin-top:30px;max-width:21em;font-size:20px;line-height:1.5;color:var(--fc-tx2);text-wrap:pretty}
/* the facts ledger: Meet Mivania's ruled rows, reversed: icon · label · the fact, every fact on one shared edge */
.home .fc-led{margin-top:64px;border-top:1px solid var(--fc-rule)}
.home .fc-led li{display:grid;grid-template-columns:20px 148px minmax(0,1fr);column-gap:18px;align-items:baseline;padding:19px 0 20px;border-bottom:1px solid var(--fc-rule)}
.home .fc-ic{position:relative;top:3px;width:20px;height:20px;color:var(--fc-tx3);stroke-width:1.6}
.home .fc-k{font-size:14.5px;line-height:1.4;color:var(--fc-tx3)}
.home .fc-v{min-width:0;font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.005em;color:var(--fc-tx)}
.home a.fc-v,.home .fc-soc a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:transparent;transition:text-decoration-color .2s}
.home a.fc-v:hover,.home .fc-soc a:hover{text-decoration-color:var(--fc-line)}
.home .fc-v small{display:block;margin-top:2px;font-size:15.5px;font-weight:400;line-height:1.45;color:var(--fc-tx2)}
/* "Get directions" is the hero's underlined white text link */
.home .fc-go{display:inline-block;margin-top:10px;font:600 15px/1.2 var(--k-sans);color:var(--fc-tx);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--fc-line);transition:text-decoration-color .2s}
.home .fc-go:hover{text-decoration-color:currentColor}
.home .fc-soc{display:flex;flex-wrap:wrap;gap:6px 30px}
.home .fc-soc a{display:inline-flex;align-items:center;gap:9px}
.home .fc-soc svg{width:17px;height:17px;fill:currentColor;flex:none}
.home .fc a:focus-visible{outline:2px solid var(--fc-acc);outline-offset:3px}
/* the form: a solid white card from her (Enode's card: soft filled inputs, no borders, small ink labels) */
.home .fc-card{grid-column:8 / span 5;align-self:start;min-width:0;padding:32px 36px 30px;border-radius:var(--k-rc);background:var(--k-paper);color:var(--k-text)}
.home .fc-to{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--k-line)}
.home .fc-to img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:none}
.home .fc-to b{display:block;font-size:16.5px;font-weight:600;line-height:1.3;color:var(--k-ink)}
.home .fc-to span{display:block;margin-top:2px;font-size:14px;line-height:1.35;color:var(--k-muted)}
.home .fc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.home .fc-f{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;min-width:0}
.home .fc-f label{font-size:14px;font-weight:500;line-height:1.3;color:var(--k-ink)}
.home .fc-f input,.home .fc-f select,.home .fc-f textarea{width:100%;height:50px;margin:0;padding:0 15px;border:1px solid transparent;border-radius:8px;background:var(--k-field);font:400 16px/1.2 var(--k-sans);color:var(--k-ink);outline:none;transition:border-color .2s,background-color .2s,box-shadow .2s}
.home .fc-f textarea{display:block;height:112px;padding:13px 15px;line-height:1.5;resize:vertical}
.home .fc-f select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
.home .fc-sel{position:relative}
.home .fc-sel::after{content:"";position:absolute;right:15px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--k-ink);-webkit-mask:var(--k-chev) center/18px 18px no-repeat;mask:var(--k-chev) center/18px 18px no-repeat;pointer-events:none}
.home .fc-f input::placeholder,.home .fc-f textarea::placeholder{color:color-mix(in srgb,var(--k-muted) 78%,var(--k-field))}
.home .fc-f input:hover,.home .fc-f select:hover,.home .fc-f textarea:hover{border-color:var(--k-line)}
.home .fc-f input:focus,.home .fc-f select:focus,.home .fc-f textarea:focus{background:var(--k-paper);border-color:var(--k-action);box-shadow:0 0 0 3px color-mix(in srgb,var(--k-action) 14%,transparent)}
/* the send button: the hero's square button, in logo green on the white card */
.home .fc-send{height:56px;margin-top:8px;font-weight:600;font-size:15.5px}
.home .fc-privacy{margin-top:14px;font-size:13px;line-height:1.5;color:var(--k-muted)}
.home .fc-ok{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:28px 0 18px;font-size:17px;line-height:1.55;color:var(--k-ink)}
.home .fc-ok[hidden]{display:none}
.home .fc-ok .k-well{background:var(--k-well);color:var(--k-action)}
@media (max-width:1100px){
  .home .fc-sheet{padding:120px 40px}
  .home .fc-grid{display:block}
  .home .fc-h{font-size:80px}
  .home .fc-led{margin-top:48px}
  .home .fc-card{max-width:600px;margin-top:56px}
}
@media (max-width:760px){
  .home .fc-sheet{padding:96px 20px;border-radius:24px}
  .home .fc-h{width:auto;margin-top:0;font-size:clamp(40px,11.5vw,64px)}
  .home .fc-l{display:inline;white-space:normal}
  .home .fc-lead{font-size:18px}
  .home .fc-led li{grid-template-columns:20px minmax(0,1fr);row-gap:2px}
  .home .fc-led .fc-k,.home .fc-led .fc-v{grid-column:2}
  .home .fc-card{padding:26px 22px 24px}
  .home .fc-row{grid-template-columns:minmax(0,1fr);gap:0}
}

/* ---------- round 2 (Julian's notes, 2026-10-11) ---------- */
/* section heads: one switch for the whole page (data-heads on the root). split = round 1 (title left, line right) */
.home[data-heads="stacked"] .k-head{display:block;margin-bottom:60px;padding-right:0}
.home[data-heads="stacked"] .k-head .k-h2{max-width:15em}
.home[data-heads="stacked"] .k-head-r{max-width:560px;margin-top:18px;padding-top:0;border-top:0}

/* contact runs straight into the footer (the page shell paints the footer the same dark green) */
.home .fc-sheet{border-radius:30px 30px 0 0;padding-bottom:120px}
@media (max-width:760px){.home .fc-sheet{border-radius:24px 24px 0 0}}
/* method A: no line drawing across on scroll (Julian); the facts simply sit finished */
.home .mt-grid::after{display:none!important}

/* ---------- section heads (Julian, 2026-10-12: "way too boring style wise and setup is bad"), data-hd on the root ---------- */
.home .hd-dot{display:none}
.home .k-head .hd-l{display:inline}
/* the bold family: Playfair 700 like the hero and the dark bands, two set lines, the hero's full stop in gold; the line under it
   bigger and closer, so heading and line read as one block */
.home[data-hd="bold"] .k-head .k-h2{
  max-width:none;font-weight:700;font-size:clamp(56px,6vw,84px);line-height:.98;letter-spacing:-.028em}
.home[data-hd="bold"] .k-head .hd-l{display:block}
.home:not([data-hd="stacked"]) .hd-dot{display:inline;color:var(--k-gold)}
.home:not([data-hd="stacked"]) .k-head{margin-bottom:68px}
.home:not([data-hd="stacked"]) .k-head-r{max-width:540px;margin-top:26px}
.home:not([data-hd="stacked"]) .k-head-t{font-size:19px;line-height:1.55;color:var(--k-text)}
/* the other headings join the same weight so the page reads as one voice */
.home:not([data-hd="stacked"]) .ab-h,.home:not([data-hd="stacked"]) .rv-h,.home:not([data-hd="stacked"]) .bi-h{font-weight:700;letter-spacing:-.026em}

@media (max-width:760px){
  .home:not([data-hd="stacked"]) .k-head .k-h2{font-size:clamp(42px,11vw,56px)}
}

/* copy notes (Julian, 2026-10-13): "per session" set beside each private training price; cards and rows without their removed lines */
.home .sv-per{margin-left:8px;font:500 14px/1 var(--k-sans);letter-spacing:0;color:var(--k-muted);vertical-align:.35em}
.home .mt-d{padding-bottom:28px}
.home .bi-end{justify-content:flex-start}

/* MOBILE:START — mobile pass (roadmap step 2, 2026-10-13): phones 390, tablets 768, small laptops 1024 */
/* services: a narrower price menu beside the copy, then one column */
@media (max-width:1100px){
  .home .sv{--sv-col:340px;--sv-gap:48px;--sv-pad:36px}
  .home .sv-head{padding-right:0}
  .home .sv-amt{font-size:46px}
  .home .sv-incl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:900px){
  .home .sv-body{grid-template-columns:minmax(0,1fr);row-gap:34px}
  .home .sv-price{max-width:560px}
  .home .sv-prog{grid-template-columns:minmax(0,1fr);row-gap:10px}
}
@media (max-width:760px){
  .home .sv{--sv-pad:22px}
  .home .sv-list{gap:24px}
  .home .sv-ph{height:216px}
  .home .sv-ph .k-strip{padding:13px 20px 0 var(--sv-pad);font-size:13.5px}
  .home .sv-body{padding:26px var(--sv-pad) 34px}
  .home .sv-t{font-size:29px}
  .home .sv-d{font-size:16px;text-wrap:pretty}
  .home .sv-ticks{flex-direction:column;gap:9px;margin-top:16px}
  .home .sv-acts{flex-direction:column;align-items:flex-start;gap:12px;margin-top:26px}
  .home .sv-amt{font-size:42px}
  .home .sv-lab{font-size:16.5px}
  .home .sv-row{column-gap:16px}
  .home .sv-incl{grid-template-columns:minmax(0,1fr)}
  .home .sv-prog ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
  .home .sv-prog li + li{margin-left:0;padding-left:0;border-left:0}
}
/* small laptops: About gets a wider photo column that fills the row (its tall ratio pushed it past the right edge); the FAQ index
   and answer page share the width, and her note wraps under its two lines (it was crushed to one word per line at 1024) */
@media (min-width:901px) and (max-width:1100px){
  .home .ab-txt{grid-column:1 / span 7}
  .home .ab-pic{grid-column:8 / span 5;aspect-ratio:auto;min-height:100%}
}
@media (min-width:1001px) and (max-width:1100px){
  .home .qa-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .home .qa-ask{flex-wrap:wrap}
  .home .qa-ask-go{width:100%;padding-left:74px}
}
/* tablets: About stacks as on phones, the photo first, cropped 5:4 to her head and shoulders (a full 4:5 ran 925px tall) */
@media (min-width:761px) and (max-width:900px){
  .home .ab{padding:104px 40px 112px}
  .home .ab-grid{display:flex;flex-direction:column-reverse;gap:48px}
  .home .ab-pic{aspect-ratio:5/4}
  .home .ab-pic img{object-position:48% 22%}
  .home .ab-low{margin-top:40px}
}
/* sheets: the dark who band only drifts (fading it greys its white button, which then reads as disabled) */
.home .wc > .mo-under{opacity:1}
/* FAQ, one column: the questions open in place (the script adds .qa-acc and moves each answer under its question) */
.home .qa.qa-acc .qa-page,.home .qa.qa-acc .qa-mark,.home .qa.qa-acc .qa-h,.home .qa.qa-acc .qa-next{display:none}
.home .qa.qa-acc .qa-q{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:58px;padding:16px 2px;color:var(--k-ink)}
.home .qa.qa-acc .qa-q::after{content:"";flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--k-chev) center/20px 20px no-repeat;mask:var(--k-chev) center/20px 20px no-repeat;transition:transform .3s}
.home .qa.qa-acc .qa-q[aria-expanded="true"]{font-weight:600;border-bottom-color:transparent}
.home .qa.qa-acc .qa-q[aria-expanded="true"]::after{transform:rotate(180deg)}
.home .qa.qa-acc .qa-a{display:none;opacity:1;visibility:visible;transform:none;transition:none;padding:0 2px 24px;border-bottom:1px solid var(--k-line)}
.home .qa.qa-acc .qa-a.is-open{display:block}
.home .qa.qa-acc .qa-a p{margin:0;font-size:17px;line-height:1.65}
@media (max-width:1000px){
  .home .qa-ask{gap:16px}
  .home .qa-ask-go{flex-wrap:wrap;gap:12px 24px}
}
@media (max-width:760px){
  /* hero: the words on the logo's edge */
  .home .ch-wrap{padding-left:0;padding-right:0}
  /* About: each fact, then its detail beneath (the right-hand detail squeezed the fact to three lines) */
  .home .ab[data-facts="ledger"] .ab-facts li{align-items:flex-start;padding:15px 2px}
  .home .ab[data-facts="ledger"] .ab-ic{margin-top:1px}
  .home .ab[data-facts="ledger"] .ab-ft{display:block}
  .home .ab[data-facts="ledger"] .ab-ft small{margin-top:3px;text-align:left}
  /* method: the photos a little shorter so each card reads in one screen */
  .home .mt-ph{aspect-ratio:5/4}
  /* long buttons ("Book my free phone consultation") never leave their column on small phones: less side padding, and they
     may wrap to two centred lines rather than overflow (they ran 7 to 15px out at 360) */
  .home .k-btn,.home .ch-btn,.home .sb-btn,.home .wc-btn{max-width:100%;height:auto;min-height:54px;padding-top:12px;padding-bottom:12px;white-space:normal;text-align:center;line-height:1.25}
  .home .k-btn--lg{min-height:58px;padding-left:24px;padding-right:24px;font-size:16.5px}
  .home .sb-btn{padding-left:18px;padding-right:18px}
}
/* touch: small text links get a 44px tall hit area without moving anything */
@media (hover:none){
  .home .k-link,.home .fc-go,.home a.fc-v{position:relative}
  .home .k-link::after,.home .fc-go::after,.home a.fc-v::after{content:"";position:absolute;inset:-10px -4px}
}
/* MOBILE:END */
/* French (make-fr.py): an audience wider than the whole line may wrap inside itself, in two balanced lines */
.home .wc-it{max-width:100%}
.home .wc-w{white-space:normal;text-wrap:balance}
/* "Votre premier pas" is longer than "Your first step": the start headline scales to stay inside the grid (it reached the
   band's edge at 1440) */
.home .sb-h{font-size:clamp(64px,9.8vw,160px)}
@media (max-width:760px){.home .sb-h{font-size:clamp(40px,11vw,96px)}}
/* MOTION:START — the page's motion language, locked 2026-10-13. Armed by script only (no JS = the finished page). */
/* reveals: each part rises in once, in reading order (--mo-d staggers it, half a second at most) */
.home.mo-armed .mo:not(.mo-done){transition:opacity .8s ease var(--mo-d,0s),transform 1s cubic-bezier(.2,.7,.2,1) var(--mo-d,0s)}
.home.mo-armed .mo:not(.mo-in){opacity:0;transform:translateY(28px)}
/* photos settle: a slow zoom out as they arrive */
.home.mo-armed .mo-ph img{transition:scale 1.7s cubic-bezier(.2,.7,.2,1)}
.home.mo-armed .mo-ph:not(.mo-in) img{scale:1.08}
/* hero exit: as you scroll away, the words lift and soften while the photo falls behind (no motion on load) */
.home .ch-wrap{opacity:calc(1 - var(--mo-hx,0) * var(--mo-hx,0) * .6);transform:translateY(calc(var(--mo-hx,0) * -56px))}
.home .ch-pic{translate:0 calc(var(--mo-hx,0) * 110px)}
/* sheets (Julian: "i also like the sheet scrolling effects"): each rounded sheet (reviews, who, the method's lip, services,
   contact) slides over the section before it, and that section falls behind as it arrives, the way the hero falls behind
   Meet Mivania. --mo-u runs 0 to 1 while the sheet's top edge crosses the screen. */
.home .mo-under{translate:0 calc(var(--mo-u,0) * 72px);opacity:calc(1 - var(--mo-u,0) * var(--mo-u,0) * .3)}
/* hover (pointer devices only): buttons lift a little, the method cards rise */
@media (hover:hover){
  .home .k-btn,.home .ch-btn,.home .wc-btn,.home .sb-btn,.home .fc-send{transition:background-color .2s,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
  .home .k-btn:hover,.home .ch-btn:hover,.home .wc-btn:hover,.home .sb-btn:hover,.home .fc-send:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px color-mix(in srgb,var(--k-ink) 55%,transparent)}
  .home .mt-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
  .home .mt-card:hover{transform:translateY(-5px);box-shadow:0 18px 34px -20px color-mix(in srgb,var(--k-ink) 45%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .home .mo,.home .mo-ph img,.home .ch-wrap,.home .ch-pic,.home .mo-under{opacity:1!important;transform:none!important;translate:none!important;scale:none!important;transition:none!important}
}
/* MOTION:END */

/* applied-site fixes (2026-10-13) */
/* the photo panel on whole pixels: at a fractional left edge (827.2px at 1440) the photo showed through the fade as a faint seam */
@media (min-width:1101px){.home .ch-pic{width:round(down,clamp(440px,42vw,780px),1px)}}