/* ============================================================
   modus. — home.css
   Homepage sections: hero, problem, diagnostic,
   stages, method, contact. Shared components live in base.css.
   ============================================================ */

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:120px 0 60px;overflow:hidden}
/* width/height:100% is required — a <canvas> is a replaced element, so
   inset:0 alone sizes it to its intrinsic buffer width, not the hero. */
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.2s ease}
/* The veil has to protect the TEXT COLUMN, not the edges. The previous
   radial darkened the perimeter and left the centre — where both the type
   and the densest part of the particle band sit — fully transparent, so the
   h1 and the lead were read through the dots. Directional scrim first,
   perimeter vignette second. */
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(16,29,44,.94) 0%,
      rgba(16,29,44,.90) 46%,
      rgba(16,29,44,.62) 62%,
      rgba(16,29,44,.18) 79%,
      rgba(16,29,44,0) 100%),
    radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(16,29,44,.55) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);
  display:flex;align-items:center;gap:14px;margin-bottom:30px}
.hero-eyebrow::before{content:"";width:34px;height:1.5px;background:var(--green);flex:none}
.hero h1{letter-spacing:-.035em;line-height:.98;font-size:clamp(48px,9vw,124px);max-width:14ch}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .line>span{display:block}
.js-anim .hero h1 .line>span{transform:translateY(105%)}
.hero .lead{font-size:clamp(17px,1.55vw,21px);color:rgba(248,249,247,.74);max-width:56ch;margin-top:34px}
.hero-cta{margin-top:42px;display:flex;gap:16px;flex-wrap:wrap}
.js-anim .hero-cta{opacity:0}
.js-anim .hero-eyebrow{opacity:0}
.scrollcue{position:absolute;left:32px;bottom:34px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);display:flex;align-items:center;gap:12px}
.js-anim .scrollcue{opacity:0}
.scrollcue .rail{width:1px;height:40px;background:rgba(255,255,255,.16);position:relative;overflow:hidden}
.scrollcue .rail i{position:absolute;top:-40px;left:0;width:100%;height:40px;background:var(--green);animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0)}60%,100%{transform:translateY(80px)}}


/* ============ PROBLEM ============ */
.prob-top{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end}
.stat{text-align:right}
.stat .big{font-weight:700;letter-spacing:-.04em;line-height:1;font-size:clamp(64px,10vw,132px);color:var(--navy)}
.stat .big .u{color:var(--green)}
.stat .cap{font-family:var(--mono);font-size:13px;color:var(--slate-ink);margin-top:10px;letter-spacing:.02em}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:80px}
.card{background:var(--white);border:1px solid var(--light);border-radius:16px;padding:34px 30px;position:relative;overflow:hidden}
.card .num{font-family:var(--mono);font-size:12.5px;color:var(--slate-ink);letter-spacing:.1em}
.card h3{font-size:21px;letter-spacing:-.01em;margin:16px 0 12px;line-height:1.24;color:var(--navy)}
.card p{font-size:15.5px;color:var(--muted)}
.card .glow{position:absolute;top:0;left:0;width:100%;height:3px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card:hover .glow{transform:scaleX(1)}

/* ============ DIAGNOSTIC ============ */
.diag{overflow:hidden}
.diag .halo{position:absolute;width:640px;height:640px;border-radius:50%;right:-160px;top:-160px;
  background:radial-gradient(circle,rgba(29,158,117,.22),transparent 62%);filter:blur(20px);pointer-events:none}
.diag-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;position:relative;z-index:1}
.diag-card{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:44px 40px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.diag-card .tag{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.diag-card h3{font-size:28px;letter-spacing:-.02em;margin:14px 0 22px}
.diag-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.diag-list li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid rgba(255,255,255,.09);font-size:15.5px;color:rgba(248,249,247,.82)}
.diag-list li:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
.diag-list .k{font-family:var(--mono);font-size:12px;color:var(--green);flex:none;padding-top:3px}
.diag-note{margin-top:26px;font-family:var(--mono);font-size:13px;color:var(--slate)}

/* ============ SERVICES / STAGES ============ */
.stages-track{margin-top:70px;position:relative}
/* one continuous line that fills green across all three stages on scroll —
   no per-stage dots; the growing fill IS the transition between stages */
.stages-rail{position:absolute;left:0;top:24px;width:100%;height:3px;border-radius:3px;background:var(--light);overflow:hidden}
.stages-rail i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--green) 0%,var(--green) 78%,rgba(41,199,143,1) 100%)}
.stages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-top:52px}
.stage{position:relative}
/* each stage's number lights green as the fill reaches it */
.stage .step{font-family:var(--mono);font-size:12.5px;color:var(--slate-ink);letter-spacing:.06em;transition:color .45s var(--ease)}
.stage.on .step{color:var(--green-ink)}
.stage h3{font-size:26px;letter-spacing:-.02em;margin:8px 0 4px}
.stage p{font-size:15.5px;color:var(--muted);margin-top:16px}

/* ============ METHOD / PILLARS ============ */
.method-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.method-sticky{position:sticky;top:22vh}
.method-idx{font-family:var(--mono);font-size:13px;color:var(--slate);margin-top:26px;letter-spacing:.05em}
.method-idx b{color:var(--green-on-navy)}
/* opacity:.4 rendered the inactive pillars' body copy at 2.43:1 and their
   headings at 3.51:1 — 4 of the 5 principles were below AA at any scroll
   position, including the no-commission one. .72 clears AA (4.68 body /
   9.15 heading, 4.75 on the green .pnum) and the "active" signal moves off luminance onto the green
   marker, which reads as intent rather than as dimming. */
.pillar{padding:44px 0 44px 20px;border-top:1px solid rgba(255,255,255,.1);
  border-left:2px solid transparent;opacity:.78;
  transition:opacity .5s var(--ease),border-left-color .5s var(--ease)}
.pillar:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.pillar.active{opacity:1;border-left-color:var(--green)}
.pillar .pnum{font-family:var(--mono);font-size:12.5px;color:var(--green-on-navy);letter-spacing:.08em}
.pillar h3{font-size:clamp(24px,2.7vw,34px);letter-spacing:-.02em;margin:14px 0 12px;line-height:1.12}
.pillar p{font-size:16px;color:rgba(248,249,247,.7);max-width:48ch}

/* ============ CONTACT ============ */
.contact{text-align:center;overflow:hidden;border-top:1px solid rgba(255,255,255,.08)}
.contact .sec-eyebrow{justify-content:center}
.contact h2{max-width:none;margin:0 auto;font-size:clamp(38px,7vw,90px)}
.contact .lead{margin-left:auto;margin-right:auto}
.contact-actions{margin-top:40px;display:flex;justify-content:center}
/* phone first: the buyer's trade runs on the phone ringing, and for a firm
   that stays faceless a line that answers is the strongest existence signal
   available. Both reach the same weight. */
.contact .reach{margin-top:38px;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:baseline;gap:14px 40px}
.contact .mail{display:inline-block;font-weight:700;letter-spacing:-.02em;font-size:clamp(20px,3vw,34px);
  padding-bottom:8px;border-bottom:3px solid var(--green);transition:color .3s}
.contact .mail:hover{color:var(--green)}
/* The phone and email in the closing block measured 41px tall on touch — the
   last CTA on the page, 3px short. */
@media(pointer:coarse){
  .contact .mail{min-height:44px;display:inline-flex;align-items:center}
}
.contact .meta{margin-top:40px;font-family:var(--mono);font-size:13px;color:var(--slate);display:flex;gap:16px 34px;flex-wrap:wrap;justify-content:center}

/* ============ RESPONSIVE ============ */
@media(max-width:960px){
  .prob-top{grid-template-columns:1fr;gap:34px}
  .stat{text-align:left}
  .cards{grid-template-columns:1fr;margin-top:50px}
  .diag-grid{grid-template-columns:1fr;gap:40px}
  .stages-grid{grid-template-columns:1fr;gap:48px}
  .stages-rail{display:none}
  .method-grid{grid-template-columns:1fr;gap:20px}
  .method-sticky{position:static}
  .pad{padding:96px 0}
  .hero{padding:120px 0 90px}
}
@media(max-width:768px){
  /* portrait: the band crosses the lead, so the scrim runs top-down instead */
  .hero-veil{background:linear-gradient(180deg,
    rgba(16,29,44,.92) 0%,
    rgba(16,29,44,.88) 72%,
    rgba(16,29,44,.50) 100%)}
}
@media(max-width:560px){
  .scrollcue{display:none}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .diag-card{padding:32px 24px}
  .pillar{padding:32px 0}
}

/* reduced motion: hero content visible, canvas off */
@media(prefers-reduced-motion:reduce){
  #hero-canvas{display:none}
  /* no scroll-driven spotlight, so every pillar reads at full strength */
  .pillar{opacity:1}
  .js-anim .hero h1 .line>span{transform:none}
  .js-anim .hero .lead,.js-anim .hero-cta,.js-anim .hero-eyebrow,.js-anim .scrollcue{opacity:1}
  .scrollcue .rail i{animation:none}
}


/* ============================================================
   DIAGNOSTIC — merged in when /diagnostic was retired (2026-08-05).
   The page hero became a section: no second WebGL canvas, no second
   booking close. .cards/.card already live above and are reused as-is.
   ============================================================ */
.diag-intro{position:relative;overflow:hidden}
.diag-intro .halo{position:absolute;width:720px;height:720px;border-radius:50%;right:-220px;top:-180px;
  background:radial-gradient(circle,rgba(29,158,117,.16),transparent 62%);filter:blur(12px);pointer-events:none}
.diag-intro .wrap{position:relative;z-index:1}
.diag-intro .diag-h2{max-width:12ch;line-height:1.02;font-size:clamp(38px,6.4vw,84px)}
.diag-intro .lead{max-width:56ch}
.diag-intro .dhero-cta{margin-top:42px;display:flex;gap:16px;flex-wrap:wrap}
.diag-intro .dhero-note{margin-top:30px;font-family:var(--mono);font-size:12.5px;color:var(--slate);letter-spacing:.03em}
/* ------------------------------------------------------------
   The ladder (was #services) and the deliverables (was #livrables)
   were folded into this section on 2026-08-05, so the proof now sits
   above the button instead of 847px below it. Both were authored for
   --paper; everything below re-tones them for navy. Ratios noted.
   ------------------------------------------------------------ */
.diag-sub{font-size:clamp(23px,2.5vw,31px);letter-spacing:-.02em;line-height:1.16;
  max-width:30ch;margin-top:86px}
.diag-deliv{margin-top:4px}
.diag-intro .stages-track{margin-top:38px}
.diag-intro .stages-rail{background:rgba(248,249,247,.14)}
.diag-intro .stage .step{color:var(--slate)}              /* 6.35:1 on navy */
.diag-intro .stage.on .step{color:var(--green-on-navy)}   /* 6.89:1 on navy */
.diag-intro .stage p{color:rgba(248,249,247,.78)}
.diag-intro .cards{margin-top:38px}
.stage-more{color:var(--green-on-navy);border-bottom:1px solid rgba(41,199,143,.45);white-space:nowrap;transition:color .2s}
.stage-more:hover{color:var(--paper)}
.deliv-tail{margin-top:44px;font-weight:700;font-size:clamp(19px,2.2vw,26px);letter-spacing:-.02em;color:var(--paper)}
.deliv-tail b{color:var(--green-on-navy)}
.diag-intro .dhero-cta{margin-top:64px}
/* ============ THE LIVING FLOWS ============ */
.dflows{overflow:hidden;border-top:1px solid rgba(255,255,255,.08)}
.flow-legend{margin-top:38px;display:flex;gap:28px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:12.5px;color:rgba(248,249,247,.75);letter-spacing:.02em}
.flow-legend .lg{display:inline-flex;align-items:center;gap:9px}
.flow-legend .lg i{font-style:normal;color:var(--green-on-navy)}
.flow-legend .lg-note{color:var(--slate);margin-left:auto}

.flow{margin-top:30px;position:relative;border:1px solid rgba(255,255,255,.09);border-radius:22px;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  padding:24px 28px 20px;overflow:hidden}
.flow-head{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
  display:flex;align-items:center;gap:12px}
.flow-head::before{content:"";width:22px;height:1.5px;background:var(--green);flex:none}

.flow-stage{position:relative;margin-top:8px}
.flow-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.1s ease}
.flow-canvas.on{opacity:1}

/* ---- static composition (default, and the reduced-motion / no-JS version:
   a complete row of station chips — nothing missing, nothing moving) ---- */
.flow:not(.live) .flow-canvas{display:none}
.flow:not(.live) .flow-stage{display:flex;flex-wrap:wrap;align-items:center;gap:10px 6px;padding:26px 0 18px}
.flow:not(.live) .st{display:flex;align-items:center}
.flow:not(.live) .st:not(:last-of-type)::after{content:"→";color:var(--slate);font-size:14px;margin-left:8px}
/* static fallback: data sources add up (+) before the merge, then the flow runs (→) */
.flow:not(.live) .st--src::after{content:"+"!important;color:var(--slate);font-size:14px;margin-left:8px}
.flow:not(.live) .flow-learn{position:static;display:block;margin:2px 0 10px;text-align:left}

.stc{display:inline-flex;align-items:flex-start;gap:8px;font-family:var(--mono);font-size:12px;line-height:1.45;
  color:rgba(248,249,247,.85);background:rgba(16,29,44,.55);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:8px 12px}
.st .stm{font-style:normal;flex:none;padding-top:1px}
.st--in .stm,.st--out .stm{color:var(--slate)}
.st--ai .stm,.st--gate .stm{color:var(--green-on-navy)}
.st--ai .stc{border-color:rgba(29,158,117,.35);color:rgba(233,248,242,.92)}
.st--gate .stc{border-color:rgba(29,158,117,.55)}
.st--src .stc{font-size:11px;padding:5px 10px;color:rgba(248,249,247,.68);border-color:rgba(255,255,255,.08)}
.st--src .stm{font-size:9px;padding-top:2px}

/* ---- live composition: labels ride the stream ---- */
.flow.live .flow-stage{height:330px}
.flow.live .st{position:absolute;width:0;height:0;z-index:2}
.flow.live .stc{position:absolute;left:0;width:max-content;max-width:170px;text-align:center;
  justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.flow.live .st--below .stc{transform:translate(-50%,17px)}
.flow.live .st--above .stc{transform:translate(-50%,calc(-100% - 17px))}
.flow.live .st--gate .stm{animation:gatebeat 2.6s var(--ease) infinite}
/* The ◆ gate is the most important glyph on the page (the human decision
   moment) and it's 10px on a phone. The old .45 trough took it to 4.25:1 —
   the page's only AA failure, and it only existed for half of every 2.6s
   cycle. .72 keeps the beat and holds the floor above 4.5:1. */
@keyframes gatebeat{0%,100%{opacity:1}50%{opacity:.72}}

.flow-learn{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-on-navy);
  white-space:nowrap}
.flow:not(.live) .flow-learn{transform:none;color:var(--slate)}


@media(max-width:960px){
  .diag-intro .halo{width:460px;height:460px;right:-180px}
  .flow-legend .lg-note{margin-left:0;width:100%}
}
@media(max-width:560px){
  .flow{padding:18px 16px 14px}
  .stc{font-size:10px;padding:6px 8px;border-radius:8px}
  .flow.live .st--below .stc{transform:translate(-50%,13px)}
  .flow.live .st--above .stc{transform:translate(-50%,calc(-100% - 13px))}
  /* Portrait stream. The stage is 242px wide at a 320px viewport — eight chips
     will not fit across it at any readable size, so diag-flow.js transposes the
     current to run top → bottom (data-mx/data-my) and the chips move to the side
     of their node. Separation is then a matter of vertical rhythm: 90px of pitch
     between stations, 61px between the sources, against a worst-case chip of
     ~58px. Neighbours cannot touch, in either language. */
  .flow.live .flow-stage{height:640px}
  .flow.live .stc{max-width:140px}
  .flow.live .st--pright .stc{transform:translate(13px,-50%);
    justify-content:flex-start;text-align:left}
  .flow.live .st--pleft .stc{transform:translate(calc(-100% - 13px),-50%);
    justify-content:flex-start;text-align:left}
  .flow-learn{font-size:9.5px;letter-spacing:.1em}
  .diag-intro .dhero-cta .btn{flex:1 1 auto;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .flow.live .st--gate .stm{animation:none}
  .flow-canvas{display:none}
}


/* ============================================================
   MOBILE ACTION BAR
   ============================================================ */
/* Homepage only — it is the one page long enough to strand a visitor between
   CTAs. Hidden state is scoped under .js-anim per the site's hard rule 3, so
   if the app never boots the 4s watchdog strips the class and the bar simply
   stays visible: a duplicate CTA showing is a far better failure than a
   visitor with nothing to tap. */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:none;gap:10px;align-items:center;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(16,28,42,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.10);
}
@media(max-width:760px){
  .stickybar{display:flex}
  /* clear the bar so the legal line is never sitting under it */
  footer{padding-bottom:104px}
}
.stickybar .sb-book{flex:1 1 auto;justify-content:center;padding:14px 18px;font-size:14.5px}
.sb-tel{
  flex:0 0 auto;width:52px;height:52px;border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(255,255,255,.26);color:var(--paper);
  transition:border-color .25s,color .25s;
}
.sb-tel svg{width:21px;height:21px;fill:currentColor}
.sb-tel:hover,.sb-tel:focus-visible{border-color:var(--green-on-navy);color:var(--green-on-navy)}

.js-anim .stickybar{
  visibility:hidden;opacity:0;transform:translateY(115%);
  transition:opacity .28s var(--ease),transform .34s var(--ease),visibility .34s;
}
.js-anim .stickybar.is-on{visibility:visible;opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .js-anim .stickybar{transition:none}
}


/* ============================================================
   MOBILE RE-COMPOSITION
   Everything below is phone-only. The desktop compositions were sound;
   what shipped on a phone was those compositions stacked, which is not the
   same thing. Three specific casualties, fixed here.
   ============================================================ */
@media(max-width:640px){

  /* 1. The 3× stat. On desktop it anchors the right column and creates the
        asymmetry the whole section rests on. Stacked, it became a small
        number floating between two paragraphs, reading as an orphan rather
        than a statement. Full-width band: it gets its own moment instead of
        competing with the prose above it. */
  .prob-top{gap:0}
  .stat{
    text-align:left;
    margin-top:38px;padding:30px 24px;
    background:var(--white);border:1px solid var(--light);border-radius:16px;
    display:flex;align-items:center;gap:22px;
  }
  .stat .big{font-size:76px;line-height:.9;flex:none}
  /* Keep the authored <br>. Hiding it does not insert a space — the two
     lines butt together into "ressaisietrois", the same way the contact
     block's two flex lines ran into each other. Two short lines beside the
     numeral is the intended reading anyway. */
  .stat .cap{margin-top:0;text-align:left;font-size:12.5px;line-height:1.5}

  /* 2. The method pillars. The scroll-driven spotlight dims every pillar that
        is not active — on desktop that reads as focus, because you can see the
        neighbours it is drawing you away from. In a single column there is no
        "away", so it reads as four blocks of half-legible text and one
        readable one. The reduced-motion block already does exactly this;
        a narrow screen needs it for the same reason. */
  .pillar{opacity:1}
  .pillar.active{border-left-color:var(--green)}

  /* 3. Flow-diagram labels. 9px and 9.5px were sized to fit the live
        animated stage; at rest on a phone they are simply below the floor of
        what anyone reads. The stage is transposed and vertical here, so the
        room exists. */
  .st--src .stm{font-size:11px}
  .flow-learn{font-size:11.5px;letter-spacing:.08em}
  .flow-head{font-size:12.5px}
  .stc{font-size:11.5px}
}

/* ============ CLARITY BAND (2026-08-17: the five-second answers) ============ */
.clarity-band{padding-top:76px;padding-bottom:76px}
.clarity{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.ccell{padding:4px 40px 4px 34px;border-left:1px solid var(--light);position:relative}
.ccell:first-child{border-left:0;padding-left:0}
.ccell .ck{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink);display:block;margin-bottom:12px}
.ccell b{display:block;font-size:20px;letter-spacing:-.015em;line-height:1.25;color:var(--navy);margin-bottom:10px}
.ccell p{font-size:15px;color:var(--muted)}

/* ============ SERVICES / PACKAGES (2026-08-17) ============ */
.cards-quad{grid-template-columns:repeat(2,1fr);margin-top:64px}
.cards-quad .card{display:flex;flex-direction:column;padding:38px 34px}
.cards-quad .card .num{color:var(--green-ink)}
.cards-quad .card h3{font-size:24px;margin:14px 0 10px}
.card .pfor{font-size:14.5px;color:var(--slate-ink);margin:0 0 14px}
.card .pshape{margin-top:auto;padding-top:16px;border-top:1px solid var(--light);
  font-family:var(--mono);font-size:12px;color:var(--slate-ink);letter-spacing:.05em;text-transform:uppercase}
.cards-quad .card>p:not(.pfor):not(.pshape){margin-bottom:22px}
.pk-note{margin-top:36px;font-size:15.5px;color:var(--muted);max-width:70ch}
.pk-note b{color:var(--navy)}

/* ============ HOW AN ENGAGEMENT WORKS (navy, reuses diag-intro tones) ============ */
.how-fine{margin-top:64px;max-width:66ch;font-size:15.5px;color:rgba(248,249,247,.72);
  padding-top:26px;border-top:1px solid rgba(248,249,247,.14)}
.how-fine b{display:block;color:var(--paper);font-size:17px;letter-spacing:-.01em;margin-bottom:10px}

@media(max-width:960px){
  .clarity{grid-template-columns:1fr}
  .ccell{border-left:0;padding:22px 0;border-top:1px solid var(--light)}
  .ccell:first-child{border-top:0;padding-top:0}
  .cards-quad{grid-template-columns:1fr;margin-top:50px}
}

/* ============ FREE STARTING POINTS / LEAD MAGNETS (2026-08-20) ============
   Sits between the packages (paper) and "How an engagement works" (navy).
   Same paper as #services, separated by a hairline so it reads as its own beat.
   .starts-grid handles one or two .start cards: a lone card stays wide but capped. */
.starts{border-top:1px solid var(--light)}
.starts h2{max-width:18ch}
.starts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:22px;margin-top:56px}
.starts-grid:has(.start:only-child){grid-template-columns:minmax(0,760px)}
.start{background:var(--white);border:1px solid var(--light);border-radius:16px;padding:38px 34px;
  position:relative;overflow:hidden;display:flex;flex-direction:column}
.start .glow{position:absolute;top:0;left:0;width:100%;height:3px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.start:hover .glow{transform:scaleX(1)}
.start-kind{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink)}
.start-you{margin:18px 0 0;padding-left:16px;border-left:2px solid var(--green);
  font-size:17.5px;line-height:1.45;color:var(--navy);font-weight:500;letter-spacing:-.005em}
.start h3{font-size:24px;letter-spacing:-.015em;line-height:1.22;color:var(--navy);margin:26px 0 10px}
.start-body{font-size:15.5px;color:var(--muted);margin-bottom:26px}
.start-cta{margin-top:auto;padding-top:20px;border-top:1px solid var(--light);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.start-fine{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--slate-ink)}
.starts-note{margin-top:30px;font-size:15px;color:var(--muted)}
.starts-note a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--green)}
@media (max-width:860px){
  .starts-grid{margin-top:40px}
  .start{padding:30px 24px}
  .start-you{font-size:16.5px}
  .start-cta .btn{width:100%;justify-content:center}
}

/* ============ LATEST FROM THE BLOG (2026-08-20) ============
   Paper band after the contact close, before the footer. The newest post in the
   page's own language (FR and EN blogs are different articles). */
.latest.paper{border-top:1px solid var(--light)}
.latest-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.latest-head .sec-eyebrow{margin:0}
.latest-all{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-ink);text-decoration:none}
.latest-all:hover{text-decoration:underline;text-underline-offset:4px}
.latest-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px 48px;margin-top:34px;padding:44px 46px;
  border:1px solid var(--light);border-radius:16px;background:var(--white);color:var(--navy);text-decoration:none;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(22,40,60,.04);transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.latest-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.latest-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px -24px rgba(22,40,60,.35)}
.latest-card:hover::before{transform:scaleX(1)}
.latest-meta{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--slate-ink);margin:0}
.latest-body{min-width:0}
.latest-card h3{font-size:clamp(26px,2.8vw,38px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 14px;max-width:20ch;color:var(--navy)}
.latest-sum{font-size:16.5px;color:var(--muted);max-width:60ch;margin:0}
.latest-read{justify-self:end;white-space:nowrap;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding:15px 28px;border-radius:100px;
  background:var(--navy);color:var(--paper);transition:background .3s var(--ease)}
.latest-card:hover .latest-read{background:var(--green)}
@media (max-width:860px){.latest-card{grid-template-columns:1fr;padding:28px 22px;margin-top:26px}.latest-read{justify-self:start}}
@media (max-width:860px){.latest-card{grid-template-columns:1fr;padding:28px 22px;margin-top:26px}.latest-read{justify-self:start}}

/* ---------- services cards: link to the packages page (2026-08-20) */
.card .card-go{margin:14px 0 10px}
.card .card-go a{
  color:var(--green-ink,#177E5E);text-decoration:none;font-weight:600;font-size:.93rem;
}
.card .card-go a:hover{text-decoration:underline}