/* ============================================================
   laothiane.com · shared stylesheet
   ============================================================ */

/* ============ SELF-HOSTED FONTS (no Google Fonts, no render-block) ============ */
/* Titles: Fraunces (serif display). UI chrome: system sans. Narrative: Newsreader. Data: JetBrains Mono. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/fraunces-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/fraunces-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/newsreader-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;
  src:url("/assets/fonts/newsreader-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2")}

/* ============ TOKENS ============ */
:root{
  --ink:#0B0B0B; --paper:#FFFFFF;
  --accent:#A6430E; --accent-hover:#8A3808;
  --bg:#FFFFFF; --fg:#0B0B0B; --muted:#555555;
  --hairline:rgba(11,11,11,.15); --hairline-onink:rgba(255,255,255,.18);
  --display:"Fraunces",Georgia,serif;
  --sans:"Helvetica Neue",Arial,system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"JetBrains Mono","SF Mono",Consolas,monospace;
  --container:72rem; --measure:42rem;
  --pad:clamp(1.25rem,5vw,3rem);
  --sec:clamp(4rem,9vw,9rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0B0B; --fg:#FFFFFF; --muted:#9A9A9A; --hairline:rgba(255,255,255,.18);
  }
}
:root[data-theme="dark"]{
  --bg:#0B0B0B; --fg:#FFFFFF; --muted:#9A9A9A; --hairline:rgba(255,255,255,.18);
}

*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--accent);color:#FFFFFF}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--serif); font-size:1.1875rem; line-height:1.65;
  transition:background-color .2s ease-out,color .2s ease-out;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--container);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:inherit}
.noscroll{overflow:hidden}

.skip{
  position:absolute;left:-999rem;top:0;z-index:100;
  font-family:var(--sans);font-weight:500;font-size:.9375rem;
  background:var(--bg);color:var(--fg);padding:.75rem 1.25rem;border:1px solid var(--fg);border-radius:2px;
}
.skip:focus-visible{left:var(--pad);top:.75rem}

/* ============ TYPE ============ */
.kicker{
  font-family:var(--mono);font-weight:400;font-size:.8125rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;
}
.display{font-family:var(--display);font-weight:700;font-size:clamp(2.5rem,6.2vw,4.5rem);line-height:1.05;letter-spacing:-.02em}
h1.pt{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1.1;letter-spacing:-.015em}
h2{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.2;letter-spacing:-.01em}
h3{font-family:var(--display);font-weight:600;font-size:clamp(1.1875rem,1.8vw,1.375rem);line-height:1.3}
.lead{font-family:var(--serif);font-size:clamp(1.1875rem,1.7vw,1.375rem);line-height:1.5;max-width:var(--measure)}
.body{max-width:var(--measure);font-size:clamp(1.0625rem,1.5vw,1.1875rem)}
.bsans{font-family:var(--sans);font-weight:500;font-size:clamp(.9375rem,1.2vw,1rem);line-height:1.5}
.caption{font-family:var(--sans);font-weight:500;font-size:.875rem;line-height:1.45;letter-spacing:.01em}

.prose{max-width:var(--measure)}
.prose p{font-size:clamp(1.0625rem,1.5vw,1.1875rem)}
.prose p+p{margin-top:1.5rem}
.prose h2{margin:2.75rem 0 .85rem;line-height:1.2}
.prose h2:first-child{margin-top:0}
.prose h2+p{margin-top:0}
section .kicker+h2{margin:.75rem 0 2rem}
section .kicker+h1{margin:.75rem 0 1.25rem}

/* Links, body copy */
.tlink{
  color:var(--fg);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--hairline);
  transition:text-decoration-color .15s ease-out;
}
.tlink:hover{text-decoration-color:var(--accent)}
:root[data-theme="dark"] .tlink:hover{text-decoration-color:var(--fg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tlink:hover{text-decoration-color:var(--fg)}}

/* Arrow links : arrow is a character, never an SVG */
.alink{
  font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1.5;
  color:var(--fg);text-decoration:none;display:inline-block;padding:.375rem 0;
}
.alink:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.alink .arr{display:inline-block;transition:transform .2s ease-out}
.alink:hover .arr{transform:translateX(4px)}

/* Buttons */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:700;font-size:1rem;
  letter-spacing:.01em;padding:.875rem 1.75rem;border-radius:2px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;min-height:48px;text-align:center;
  transition:background-color .15s ease-out,color .15s ease-out,transform .15s ease-out;
}
.btn-primary{background:var(--accent);color:#FFFFFF}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--fg);border-color:currentColor;font-weight:500}
.btn-ghost:hover{background:var(--fg);color:var(--bg)}

/* Micro-bloc "The first call" */
.firstcall{
  font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.6;
  color:var(--muted);margin-top:1rem;max-width:38rem;
}
.firstcall .fc-k{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-right:.875rem;
}

/* ============ LOGO MARK ============ */
.mark{display:inline-block;flex:none}
.wordmark .mark{margin-right:.625rem}

/* ============ HEADER ============ */
header{
  position:sticky;top:0;z-index:50;height:4rem;
  background:var(--bg);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease-out,background-color .2s ease-out;
}
header.scrolled{border-bottom-color:var(--hairline)}
.hbar{height:4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.wordmark{
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;color:var(--fg);white-space:nowrap;
  padding:.625rem 0;display:inline-flex;align-items:center;
}
@media (max-width:400px){.wordmark .wm-first{display:none}}
.hnav{display:flex;align-items:center;gap:1.5rem}
.hnav a.nlink{
  font-family:var(--sans);font-weight:500;font-size:1rem;color:var(--muted);
  text-decoration:none;padding:.625rem 0;transition:color .15s ease-out;white-space:nowrap;
}
.hnav a.nlink:hover{color:var(--fg);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.hnav a.nlink[aria-current="page"]{color:var(--fg);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.hright{display:flex;align-items:center;gap:1rem}
.btn-hdr{padding:.5rem 1.125rem;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.lang{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;display:inline-flex;align-items:center}
.lang a{text-decoration:none;padding:.75rem .375rem}
.lang .on{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lang .off{color:var(--muted);transition:color .15s ease-out}
.lang .off:hover{color:var(--fg)}
.lang .sep{color:var(--hairline)}
.themeBtn{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:1px solid var(--hairline);border-radius:2px;color:var(--fg);
  padding:.625rem .875rem;min-height:44px;cursor:pointer;transition:border-color .15s ease-out;
}
.themeBtn:hover{border-color:var(--fg)}

/* Burger : 2 strokes, 1.5px */
.burger{
  display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;
  position:relative;border-radius:2px;
}
.burger span{
  position:absolute;left:12px;width:20px;height:1.5px;background:var(--fg);
  transition:transform .2s ease-out;
}
.burger span:first-child{top:18px}
.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.panel{position:fixed;inset:0;z-index:40;background:var(--bg);padding-top:4rem;overflow-y:auto}
.panel[hidden]{display:none}
.panel nav{display:flex;flex-direction:column;gap:.5rem;padding-top:2rem}
.panel nav a{
  font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.01em;
  color:var(--fg);text-decoration:none;padding:.75rem 0;border-bottom:1px solid var(--hairline);
}
.panel .pmeta{display:flex;align-items:center;gap:1.5rem;margin-top:2.5rem;padding-bottom:3rem}

/* Nav compression band: 5 items fit on one line on small laptops before the burger takes over */
@media (min-width:1080px) and (max-width:1240px){
  .hnav{gap:1.1rem}
  .hnav a.nlink{font-size:.9375rem}
  .hright{gap:.75rem}
  .btn-hdr{padding:.45rem .85rem;font-size:.9375rem}
  .wordmark{font-size:.9375rem}
}

@media (max-width:1079px){
  .hnav,.hright .lang,.hright .themeBtn{display:none}
  .burger{display:block}
  .btn-hdr{padding:.4rem .8rem;min-height:34px;font-size:.8125rem;white-space:nowrap}
}
@media (min-width:1080px){.panel{display:none}}

/* ============ SECTIONS / REVEALS ============ */
main section{padding-top:var(--sec)}
main section:last-of-type{padding-bottom:var(--sec)}
main section[id]{scroll-margin-top:5rem}
/* .rv is set by JS only : no-JS and reduced-motion get the full page instantly */
.rv{opacity:.01;transform:translateY(12px);transition:opacity .3s ease-out,transform .3s ease-out}
.rv.in{opacity:1;transform:none}

/* ============ HERO : the only load animation ============ */
.hero{
  min-height:min(calc(100svh - 4rem),50rem);
  display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(3rem,8vh,5rem);padding-bottom:clamp(3rem,8vh,5rem);
}
.hero .kicker{margin-bottom:.75rem}
.hero .display{max-width:56rem;margin-bottom:2rem}
.hero .cred{
  font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1.7;
  color:var(--muted);margin-bottom:2.5rem;
}
/* Two-beat opening: kicker+title, then proof+CTA. 500 ms total, 12 px, opacity+translateY only. */
.js .h-1{animation:rise .3s cubic-bezier(.25,.6,.35,1) both}
.js .h-2{animation:rise .3s cubic-bezier(.25,.6,.35,1) .2s both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Inner page hero : H1 + Lead, one beat, no CTA */
.phero{padding-top:clamp(3.5rem,9vh,6rem)}
.phero h1{max-width:56rem}
.phero .lead{margin-top:1.25rem}
.js .phero.h-1{animation:rise .25s cubic-bezier(.25,.6,.35,1) both}

/* ============ PROOF BAND ============ */
.band{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.cell{border-top:1px solid var(--hairline);padding-top:1.5rem}
.cell .num{
  font-family:var(--mono);font-weight:700;font-size:clamp(2.25rem,4.5vw,3.5rem);
  line-height:1.1;letter-spacing:-.01em;color:var(--fg);
}
.cell .num .sign{color:var(--accent)}
.cell .desc{font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.55;color:var(--muted);margin-top:.75rem;max-width:22rem}
.cell .src{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.75rem}
@media (max-width:719px){.band{grid-template-columns:1fr;gap:2.5rem}}

/* ============ LOGO WALL (typographic wordmarks) ============ */
/* Full working width: kicker and rule span the container, the six wordmarks
   spread across the whole row (space-between), vertically centred.
   Vertical rhythm tightened by a third versus standard sections. */
.logos{padding-top:calc(clamp(3rem,6vw,5rem)*.67)}
.logos+section{padding-top:calc(var(--sec)*.67)}
.logos .kicker{margin-bottom:1.25rem}
.logowall{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;width:100%;
  gap:1rem 2rem;border-top:1px solid var(--hairline);padding-top:1.5rem;
}
@media (max-width:719px){.logowall{justify-content:flex-start;gap:1rem 2.5rem}}
.logowall li{
  font-family:var(--sans);font-weight:700;color:var(--muted);opacity:.7;
  font-size:clamp(.9375rem,1.3vw,1.0625rem);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;transition:color .15s ease-out,opacity .15s ease-out;
}
.logowall li:hover{color:var(--fg);opacity:1}
.logowall .plus{letter-spacing:0}
/* Wordmark characters : evoke each identity typographically, never copy the logos. Monochrome grey, ink on hover. */
.logowall .lw-bboxx{font-family:var(--sans);font-weight:700;font-size:clamp(1rem,1.4vw,1.125rem);letter-spacing:.02em}
.logowall .lw-wb{font-family:var(--sans);font-weight:500;font-size:clamp(.875rem,1.2vw,.9375rem);letter-spacing:.18em}
.logowall .lw-saatchi{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.0625rem,1.5vw,1.1875rem);letter-spacing:0;text-transform:none}
.logowall .lw-canal{font-family:var(--sans);font-weight:700;font-size:clamp(1rem,1.4vw,1.125rem);letter-spacing:-.02em}
.logowall .lw-hachette{font-family:var(--sans);font-weight:500;font-size:clamp(.75rem,1.1vw,.8125rem);letter-spacing:.25em}
.logowall .lw-lagardere{font-family:var(--sans);font-weight:700;font-size:clamp(.9375rem,1.3vw,1rem);letter-spacing:.06em}

/* ============ FULL-BLEED ILLUSTRATION BANDS ============ */
/* .divider : dedicated panoramic artwork (monochrome + discreet Laterite line
   baked in the asset), nothing written on it, no hover play, no filter. */
.divider{padding-left:0;padding-right:0}
.divider img{display:block;width:100%;height:auto;aspect-ratio:21/9;max-height:26rem;object-fit:cover}

/* ============ MANDATE ============ */
.mandate{border:1px solid var(--fg);border-radius:2px;padding:clamp(1.5rem,4vw,3rem);max-width:52rem}
.mandate .kicker{margin-bottom:1.5rem}
.mandate p{font-family:var(--sans);font-weight:500;font-size:clamp(.9375rem,1.2vw,1rem);line-height:1.6;color:var(--muted);padding:.875rem 0}
.mandate p+p{border-top:1px solid var(--hairline)}
.mandate p:first-of-type{padding-top:0}
.mandate p:last-of-type{padding-bottom:0}
.mandate p strong{color:var(--fg);font-weight:500}

/* ============ BIO (GEO) ============ */
.bio h2{margin-bottom:2rem}
.bio-grid{display:grid;grid-template-columns:minmax(0,42rem) minmax(15rem,20rem);gap:3rem 5rem;align-items:start}
.bio p{max-width:var(--measure);font-size:clamp(1.0625rem,1.5vw,1.1875rem)}
.bio p+p{margin-top:1.5rem}
.portrait{
  aspect-ratio:4/5;background:var(--accent);border-radius:2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
}
.portrait .mark{color:var(--paper)}
.portrait .plabel{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
@media (max-width:839px){
  .bio-grid{grid-template-columns:1fr}
  .bio-grid .pcol{order:-1;max-width:18rem}
}

/* ============ TWO DOORS ============ */
.doors{display:grid;grid-template-columns:7fr 4fr;gap:3rem 4rem;align-items:start}
.door{border-top:1px solid var(--fg);padding-top:1.5rem}
.door-b{border-top:1px solid var(--hairline)}
.door h2,.door h3{margin-bottom:.875rem}
.door .dtxt{font-family:var(--serif);color:var(--muted);max-width:34rem;margin-bottom:1.25rem}
.door-b .dtxt{font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1.6}
.door .dlinks{display:flex;gap:2rem;flex-wrap:wrap}
@media (max-width:959px){.doors{grid-template-columns:1fr}}

/* ============ CASE CARDS ============ */
.cases h2{margin-bottom:3rem}
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-bottom:3rem}
.cardgrid.two{grid-template-columns:repeat(2,1fr);gap:3rem 2rem}
@media (max-width:959px){.cardgrid,.cardgrid.two{grid-template-columns:1fr;gap:3rem}}
.card{
  display:block;text-decoration:none;color:var(--fg);
  border-top:1px solid var(--fg);padding-top:1.5rem;position:relative;
}
.card::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:3px;
  background:var(--accent);opacity:0;transition:opacity .2s ease-out;
}
.card:hover::before,.card:focus-visible::before{opacity:1}
.card .cimg{margin:0 0 1.25rem;overflow:hidden;border-radius:2px}
.card .cimg img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  filter:grayscale(1) contrast(1.05);transition:filter .25s ease-out;
}
.card:hover .cimg img,.card:focus-visible .cimg img{filter:none}
.card .num{font-family:var(--mono);font-weight:700;font-size:clamp(1.75rem,2.5vw,2.25rem);line-height:1.1}
.card h3{margin:.625rem 0 .625rem}
.card .meta{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.card .cst{font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.55;color:var(--muted);margin:.875rem 0 1.125rem}
.card .go{font-family:var(--sans);font-weight:500;font-size:1rem}
.card .go .arr{display:inline-block;transition:transform .2s ease-out}
.card:hover .go .arr{transform:translateX(4px)}

/* ============ METHOD TEASER ============ */
.teaser .kicker{margin-bottom:1.25rem}
.teaser p{font-family:var(--serif);font-size:clamp(1.1875rem,1.7vw,1.375rem);line-height:1.5;max-width:var(--measure)}
.teaser p+p{margin-top:.5rem}
.teaser .alink{margin-top:1.5rem}

/* ============ FINAL CTA ============ */
.final h2{margin-bottom:.875rem}
.final .sub{font-family:var(--sans);font-weight:500;font-size:1rem;color:var(--muted);margin-bottom:2.5rem}
.final .firstcall{margin:0 0 2rem}
@media (max-width:639px){.final .btn-primary{display:inline-block;width:auto;max-width:100%;padding:.7rem 1.4rem;font-size:.9375rem;min-height:44px}}

/* ============ CASE STUDY : result block ============ */
.csres{padding-top:clamp(2.5rem,7vh,4.5rem)}
.csres h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1.1;letter-spacing:-.015em;max-width:56rem;margin-top:.75rem}
.csres h1 .dnum{
  display:block;font-family:var(--mono);font-weight:700;color:var(--accent);
  font-size:clamp(3.5rem,9vw,7.5rem);line-height:1;letter-spacing:-.02em;margin-bottom:.75rem;
}
.csres .cmeta{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.7;margin-top:1.25rem;max-width:56rem}
.js .csres.h-1{animation:rise .25s cubic-bezier(.25,.6,.35,1) both}

/* Sticky result band : desktop only, visible or not, never animated */
.sband{
  position:sticky;top:4rem;z-index:30;height:3rem;background:var(--bg);
  border-bottom:1px solid var(--hairline);visibility:hidden;
}
.sband.on{visibility:visible}
.sbrow{height:3rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;overflow:hidden}
.sbleft{display:flex;align-items:baseline;gap:.75rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbnum{font-family:var(--mono);font-weight:700;font-size:1.125rem;color:var(--fg)}
.sbtxt{font-family:var(--sans);font-weight:500;font-size:.875rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.sbcta{font-family:var(--sans);font-weight:500;font-size:.875rem;color:var(--fg);text-decoration:none;white-space:nowrap;padding:.625rem 0}
.sbcta:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:959px){.sband{display:none}}

/* Case hero illustration : grayscale at rest, colour on hover */
.casehero{margin:0;max-width:56rem}
.casehero img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:2px;
  filter:grayscale(1) contrast(1.05);transition:filter .25s ease-out;
}
.casehero:hover img{filter:none}
section.cshero{padding-top:clamp(2.5rem,6vw,4rem)}

/* Panoramic case hero : band-format artwork (native ratio), full width like the dividers */
section.pano-hero{padding-left:0;padding-right:0}
.casehero.pano{max-width:none}
.casehero.pano img{aspect-ratio:auto;object-fit:fill}

/* Column figure (Method) */
.figcol{margin:2.5rem 0 0;max-width:var(--measure)}
.figcol img{
  display:block;width:100%;height:auto;border-radius:2px;
  filter:grayscale(1) contrast(1.05);transition:filter .25s ease-out;
}
.figcol:hover img{filter:none}

/* Executive summary : Lead paragraphs */
.execsum .lead+.lead{margin-top:1.5rem}

/* Constraint block : the signature block, one per page */
.constraint{
  background:var(--fg);color:var(--bg);
  border-left:4px solid var(--accent);border-radius:0;
  padding:clamp(1.5rem,4.5vw,3rem);
}
.constraint .kicker{color:var(--accent);margin-bottom:1.25rem}
.constraint p{font-family:var(--serif);max-width:var(--measure);font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.6}

/* System steps */
.step{max-width:var(--measure)}
.step+.step{margin-top:2.5rem}
.step h3{margin-bottom:.5rem}
.step p{font-size:clamp(1.0625rem,1.5vw,1.1875rem)}
.step .produces{font-family:var(--sans);font-weight:500;font-size:.9375rem;color:var(--muted);margin-top:.75rem}
.step .proof{font-family:var(--sans);font-weight:500;font-size:.9375rem;color:var(--muted);margin-top:.375rem}

/* Results list */
.resnote{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.results{list-style:none;max-width:var(--measure)}
.results li{
  border-top:1px solid var(--hairline);padding:.875rem 0;
  font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1.55;color:var(--fg);
}

/* "What it proves" */
.proves{border-top:1px solid var(--fg);padding-top:1.5rem;max-width:var(--measure)}
.proves p{font-style:italic;font-size:clamp(1.1875rem,1.7vw,1.375rem);line-height:1.5}

/* ============ METHOD : 90 days + FAQ ============ */
.days{list-style:none;max-width:var(--measure);margin-top:1.25rem}
.days li{border-top:1px solid var(--hairline);padding:1rem 0;display:grid;grid-template-columns:8.5rem 1fr;gap:1.5rem}
.days .dd{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:.3rem}
.days p{font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.6;color:var(--fg)}
@media (max-width:639px){.days li{grid-template-columns:1fr;gap:.25rem}}

.how .hblock{max-width:var(--measure)}
.how .hblock+.hblock{margin-top:3rem}
.how .hblock h3{margin-bottom:.75rem}
.how .hblock>p{font-size:clamp(1.0625rem,1.5vw,1.1875rem)}

.qa{max-width:var(--measure)}
.qa+.qa{margin-top:2.5rem}
.qa h3{margin-bottom:.625rem}
.qa p{font-size:clamp(1.0625rem,1.5vw,1.1875rem)}

/* ============ ABOUT ============ */
.metazone{
  border:1px solid var(--hairline);border-radius:2px;padding:1.5rem;
  font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.8;color:var(--muted);
}
.metazone .cvlink{color:var(--fg)}
.aboutgrid{display:grid;grid-template-columns:minmax(0,42rem) minmax(16rem,22rem);gap:3rem 5rem;align-items:start}
@media (max-width:839px){.aboutgrid{grid-template-columns:1fr}}

/* About hero (hero-fix) : name + role + portrait together at the top.
   Desktop = 2 columns, portrait top-aligned with the name (never falls below it).
   Mobile (<=839px) = 1 column, source order name+lead, then portrait, then prose+meta. */
.abouthero{padding-top:clamp(3.5rem,9vh,6rem)}
.abouthero .aboutlead-top .lead{margin-top:1.25rem}
@media (min-width:840px){
  .abouthero .aboutgrid{grid-template-columns:minmax(0,42rem) minmax(16rem,22rem)}
  .abouthero .aboutlead-top{grid-column:1;grid-row:1;min-width:0}
  .abouthero .aboutlead-rest{grid-column:1;grid-row:2;min-width:0}
  .abouthero .pframe{grid-column:2;grid-row:1 / span 2;align-self:start}
}
.aportrait{margin:0}
.aportrait img{
  display:block;width:100%;height:auto;border-radius:2px;
  filter:grayscale(1) contrast(1.05);transition:filter .25s ease-out;
}
.aportrait:hover img{filter:none}

.tl{list-style:none;max-width:52rem}
.tl li{border-top:1px solid var(--hairline);padding:1.25rem 0;display:grid;grid-template-columns:9.5rem 1fr;gap:1.5rem}
.tl .tld{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;color:var(--muted);padding-top:.3rem}
.tl h3{font-size:1.0625rem;font-weight:500;line-height:1.4}
.tl p{font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.55;color:var(--muted);margin-top:.375rem}
@media (max-width:639px){.tl li{grid-template-columns:1fr;gap:.25rem}}

.plainlist{list-style:none;max-width:var(--measure)}
.plainlist li{
  border-top:1px solid var(--hairline);padding:.75rem 0;
  font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.55;color:var(--fg);
}

/* ============ CALENDLY : split module, widget in a deliberate paper card ============ */
/* Left 2/5 : styled content. Right 3/5 : the widget in a Paper card,
   kept Paper in dark mode by design. */
.bookgrid{display:grid;grid-template-columns:2fr 3fr;gap:3rem 4rem;align-items:start}
@media (max-width:959px){.bookgrid{grid-template-columns:1fr;gap:2.5rem}}
.bookleft .firstcall{margin-top:1.25rem}
.bookleft .avail{font-family:var(--sans);font-weight:500;font-size:.9375rem;color:var(--muted);margin-top:1.5rem}
.bookleft .calfallback{margin-top:.5rem}
.bookcard{
  position:relative;background:var(--paper);
  border:1px solid rgba(11,11,11,.15);border-radius:2px;
  padding:clamp(1.25rem,2.5vw,2.25rem);
}
.bookcard .bc-mark{position:absolute;top:1rem;right:1rem;color:var(--ink);line-height:0;z-index:2}
.bookcard .calload{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:#555555;
}
.bookcard .calendly-inline-widget{position:relative;z-index:1}
.calfallback{font-family:var(--sans);font-weight:500;font-size:.875rem;color:var(--muted);margin-top:1rem}

/* ============ CONTACT FORM (Formspree, honeypot, no captcha) ============ */
.cform{max-width:34rem;margin-top:2.5rem}
.cform label{display:block;font-family:var(--sans);font-weight:500;font-size:.9375rem;margin-bottom:.375rem}
.cform input,.cform textarea{
  width:100%;font-family:var(--serif);font-size:1.0625rem;color:var(--fg);
  background:transparent;border:1px solid var(--hairline);border-radius:2px;
  padding:.75rem .875rem;margin-bottom:1.25rem;
}
.cform textarea{min-height:9rem;resize:vertical}
.cform .ferr{
  display:none;font-family:var(--sans);font-weight:500;font-size:.9375rem;color:var(--fg);
  border-left:2px solid var(--accent);padding-left:.75rem;margin-bottom:1.25rem;
}
.cform.error .ferr{display:block}
.fsuccess{font-family:var(--serif);font-size:clamp(1.1875rem,1.7vw,1.375rem);max-width:var(--measure)}
.hp{position:absolute;left:-999rem;width:1px;height:1px;overflow:hidden}
.contactli{font-family:var(--sans);font-weight:500;font-size:1rem;margin-top:2.5rem}

/* ============ CV (print-first) ============ */
.actbar{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;padding-top:2.5rem}
.cvdoc{max-width:52rem;padding-top:clamp(2.5rem,6vw,4rem)}
.cvhead h1{font-family:var(--display);font-weight:700;font-size:clamp(1.75rem,3.4vw,2.5rem);letter-spacing:.01em;text-transform:none;line-height:1.1}
.cvhead .cvrole{font-family:var(--sans);font-weight:500;font-size:1.125rem;margin-top:.5rem}
.cvhead .cvmeta{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.75rem;line-height:1.8}
.cvsec{margin-top:3rem}
.cvsec>.kicker{margin-bottom:1.25rem}
.cvsum{font-size:clamp(1.0625rem,1.5vw,1.1875rem);max-width:var(--measure)}
.keynums{list-style:none}
.keynums li{border-top:1px solid var(--hairline);padding:.75rem 0;font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.55}
.keynums .kn{font-family:var(--mono);font-weight:700;font-size:1.125rem;margin-right:.75rem}
.cventry{border-top:1px solid var(--hairline);padding:1.5rem 0}
.cventry h3{font-size:1.125rem;font-weight:500;line-height:1.35}
.cventry .cvd{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.25rem;margin-bottom:.875rem}
.cventry .intro{font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.6;color:var(--muted);margin-bottom:.75rem;max-width:var(--measure)}
.cventry ul{list-style:none;max-width:var(--measure)}
.cventry li{padding:.375rem 0 .375rem 1.125rem;position:relative;font-size:1.0625rem;line-height:1.55}
.cventry li::before{content:"";position:absolute;left:0;top:.85em;width:.5rem;height:1px;background:var(--fg)}
.cventry .clients{font-family:var(--sans);font-weight:500;font-size:.9375rem;color:var(--muted);margin-top:.75rem}
.cvfoot{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:3.5rem;border-top:1px solid var(--hairline);padding-top:1.25rem}

@media print{
  @page{size:A4;margin:14mm 16mm}
  html{scroll-behavior:auto}
  body{background:#FFFFFF;color:#0B0B0B;font-size:10.5pt;line-height:1.5}
  header,.sband,.actbar,footer,.skip,.panel{display:none !important}
  .wrap{max-width:none;padding:0}
  main section{padding-top:0}
  .cvdoc{max-width:none;padding-top:0}
  .cvhead h1{font-size:20pt}
  .cvhead .cvrole{font-size:12pt}
  .cvsec{margin-top:14pt}
  .cventry{padding:9pt 0;break-inside:avoid}
  .cventry li{font-size:10pt}
  .cvsum,.keynums li{font-size:10pt}
  .cvfoot{margin-top:14pt}
  a{text-decoration:none;color:inherit}
}

/* ============ 404 ============ */
.nf{min-height:min(calc(100svh - 4rem),36rem);display:flex;flex-direction:column;justify-content:center}
.nf p.big{font-family:var(--serif);font-size:clamp(1.375rem,2.4vw,1.75rem);max-width:var(--measure)}
.nf .dlinks{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1.5rem}
.nf+.nf{min-height:0;padding-bottom:6rem}

/* ============ FOOTER : inverted slab, no Laterite ============ */
footer{background:var(--ink);color:var(--paper)}
:root[data-theme="dark"] footer{border-top:1px solid var(--hairline-onink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) footer{border-top:1px solid var(--hairline-onink)}}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem;padding-top:4rem;padding-bottom:3rem}
@media (max-width:719px){.fgrid{grid-template-columns:1fr;gap:2.5rem}}
footer .fid strong{font-family:var(--sans);font-weight:700;font-size:.9375rem;letter-spacing:.01em;display:block;margin-bottom:.5rem}
footer .fid p{font-family:var(--sans);font-weight:500;font-size:.875rem;line-height:1.6;color:#9A9A9A}
footer nav{display:flex;flex-direction:column;gap:.125rem}
footer nav a,footer .fdo a{
  font-family:var(--sans);font-weight:500;font-size:.875rem;color:#9A9A9A;
  text-decoration:none;padding:.375rem 0;display:inline-block;transition:color .15s ease-out;
}
footer nav a:hover,footer .fdo a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
footer .fdo{display:flex;flex-direction:column;gap:.125rem;align-items:flex-start}
footer .fdo .cv{
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:var(--hairline-onink);
}
.fbottom{
  border-top:1px solid var(--hairline-onink);
  padding-top:1.5rem;padding-bottom:2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.fbottom p{font-family:var(--sans);font-weight:500;font-size:.875rem;color:#9A9A9A}
.fbottom .lang a{padding:.75rem .375rem}
.fbottom .lang .on{color:var(--paper)}
.fbottom .lang .off{color:#9A9A9A}
.fbottom .lang .off:hover{color:var(--paper)}
.fmark{color:#9A9A9A;display:inline-flex;align-items:center}

/* Real portrait (v1.1.1) : warm-paper passe-partout mat inside a hairline frame.
   The C tile (44px) sits astride the photo's bottom-right corner, over the mat.
   The C IS the marker: no extra Laterite rule, no Laterite box. */
.pframe{margin:0;border:1px solid var(--hairline);border-radius:0;background:#FAF8F4;padding:clamp(1.25rem,2vw,1.5rem);position:relative}
.pframe .pinner{display:block;position:relative;line-height:0}
.pframe img{display:block;width:100%;height:auto}
.pframe .cbadge{position:absolute;right:-22px;bottom:-22px;width:44px;height:44px;line-height:0}
.pframe .cbadge svg{display:block;width:44px;height:44px}

/* WhatsApp : discreet mono line under the Calendly modules */
.waline{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.5rem}
.waline a{color:var(--fg);text-decoration:none;display:inline-block;padding:.75rem 0}
.waline a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.waline .arr{display:inline-block;transition:transform .2s ease-out}
.waline a:hover .arr{transform:translateX(4px)}

/* WhatsApp block under the contact form */
.wablock{margin-top:3rem;max-width:34rem}
.wablock p{font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1.6;color:var(--muted);margin-bottom:1.25rem}

/* Brands served : plain text line, About */
.brandline{font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;line-height:2.1;color:var(--muted);max-width:52rem;margin-top:1.25rem}

/* Journey band at the head of the About timeline */
.tlband{margin:0 0 2.5rem;max-width:52rem}
.tlband img{display:block;width:100%;height:auto;border-radius:2px;filter:grayscale(1) contrast(1.05);transition:filter .25s ease-out}
.tlband:hover img{filter:none}

/* ============ TAP TARGETS (QA 23/08) : >=44px on touch layouts.
   Invisible spacing only, desktop rhythm untouched. ============ */
@media (max-width:959px){
  .alink{padding:.625rem 0}
  footer nav a,footer .fdo a{padding:.6875rem 0}
}

/* ============ REDUCED MOTION : everything instant and complete ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .rv{opacity:1;transform:none}
}

/* Footer : C mark beside the identity wordmark */
footer .fid .mark{vertical-align:-3px;margin-right:.5rem}

/* ============ COOKIE BANNER (consent mode v2, one analytics cookie) ============ */
.cbanner{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--bg);border-top:1px solid var(--hairline);
}
.cbanner[hidden]{display:none}
.cbrow{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-top:.875rem;padding-bottom:.875rem;flex-wrap:wrap;
}
.cbtxt{font-family:var(--sans);font-weight:500;font-size:.9375rem;line-height:1.5;color:var(--fg)}
.cbtns{display:flex;gap:.75rem}
.cbtn{padding:.5rem 1.125rem;min-height:44px}
.cbtn-no{border-color:var(--hairline);color:var(--muted)}
.cbtn-no:hover{border-color:currentColor}
@media (max-width:639px){.cbrow{align-items:flex-start;flex-direction:column;gap:.75rem}}
@media print{.cbanner{display:none !important}}

/* ============================================================
   OPTION B (validated by Chris) : use the empty right half on
   genuinely wide screens only. Gate: >= 1400px. Nothing changes
   at or below 1400px, so laptop and mobile stay exactly as-is.
   The right-column elements are not rendered below the gate.
   ============================================================ */
.m2-side,.split-aside{display:none}

@media (min-width:1400px){

  /* 1 · MANDATE (home) : reading measure left, brand signature right */
  .mandate-2col{
    max-width:none;
    display:grid;grid-template-columns:minmax(0,42rem) 1fr;
    column-gap:4rem;align-items:center;
  }
  .mandate-2col .m2-body{min-width:0}
  .mandate-2col .m2-side{
    display:block;border-left:1px solid var(--hairline);padding-left:3rem;
  }
  .mandate-2col .m2-num{
    font-family:var(--mono);font-weight:700;font-size:clamp(3rem,4.2vw,4.25rem);
    line-height:1;letter-spacing:-.02em;color:var(--fg);
  }
  .mandate-2col .m2-lab{
    font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);margin-top:1rem;line-height:1.7;
  }

  /* 2 · FINAL CTA : title + button left, "The first call" panel right */
  .final:not([data-cal]){
    display:grid;grid-template-columns:1fr minmax(17rem,20rem);
    column-gap:4rem;align-items:start;
  }
  .final:not([data-cal])>*{grid-column:1}
  .final:not([data-cal])>.firstcall{
    grid-column:2;grid-row:1 / span 6;align-self:start;margin:0;
    border-left:1px solid var(--hairline);padding-left:2rem;
  }
  /* NB: the home #book Calendly section (.final[data-cal]) is deliberately left
     untouched : it is a fixed-width widget block, not a mono-column text block. */

  /* 3 · ABOUT mono-column sections : content left, quiet stat aside right */
  .split{display:grid;grid-template-columns:1fr minmax(15rem,18rem);column-gap:4rem;align-items:start}
  .split .split-main{min-width:0}
  .split .split-aside{
    display:block;margin-top:0;border-left:1px solid var(--hairline);padding-left:2rem;
  }
}

/* Stat aside (shared by About split blocks) */
.stat{list-style:none}
.stat li{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:.75rem 0;border-top:1px solid var(--hairline);line-height:1.5;
}
.stat li:first-child{border-top:0;padding-top:0}
.stat .statbig{
  display:block;font-family:var(--mono);font-weight:700;font-size:clamp(2rem,2.8vw,2.75rem);
  line-height:1;letter-spacing:-.01em;color:var(--fg);margin-bottom:.375rem;
}

/* ============================================================
   OPTION C (case study pages) : same wide-screen discipline as
   Option B, extended to the long-read case pages. Gate: >= 1400px.
   Nothing changes at or below 1400px (laptop and mobile untouched).
   The empty right half is removed by moving each section's mono
   kicker into a narrow left rail and setting the prose in a
   reading column beside it; the constraint box hugs that same
   column instead of stretching full-width. Hero image, sticky
   result band, cards and the CTA (handled by Option B) stay as-is.
   ============================================================ */
@media (min-width:1400px){
  /* prose sections with a kicker (context, the system, results, what it proves).
     The next-cases section is excluded (it carries the card grid, kept full width). */
  .casepage section.wrap:has(> .kicker):not(:has(.cardgrid)){
    display:grid;
    grid-template-columns:14rem minmax(0,var(--measure));
    column-gap:3rem;
    align-items:start;
  }
  .casepage section.wrap:has(> .kicker):not(:has(.cardgrid)) > .kicker{
    grid-column:1;grid-row:1;margin:.3rem 0 0;
  }
  .casepage section.wrap:has(> .kicker):not(:has(.cardgrid)) > *:not(.kicker){
    grid-column:2;
  }
  /* executive summary : no kicker, align its paragraphs to the reading column */
  .casepage .execsum > *{margin-left:17rem;max-width:var(--measure)}
  /* the constraint box : hug the reading column, never full-width */
  .casepage section.wrap > .constraint{
    margin-left:17rem;
    max-width:calc(var(--measure) + 6rem);
  }
}
@media (max-width:639px){.btn-primary{padding:.7rem 1.4rem;font-size:.9375rem;min-height:44px}}
@media (max-width:639px){.btn-hdr{padding:.4rem .75rem;min-height:36px;font-size:.8125rem;white-space:nowrap;line-height:1}}

/* Correctif 13/09/2026 (recette Chris, relayee par Cortex) : dans un bloc inverse,
   .tlink et .alink forcaient color:var(--fg) en dur, donc noir sur noir. */
.constraint .tlink,.constraint .alink{color:inherit;text-decoration-color:var(--accent)}
.constraint .tlink:hover,.constraint .alink:hover{text-decoration-color:currentColor}
/* Meme famille de defaut, trouve par le nouveau controle de contraste le 13/09 :
   .lang .sep utilise --hairline, noir a 15 pourcent, donc invisible dans le pied de page
   et dans tout bloc inverse. Le token --hairline-onink existe pour ce cas. */
footer .lang .sep,.constraint .lang .sep{color:var(--hairline-onink)}