/* ============================================================
   JES CONNECT — site.css  v3
   Editorial, industrial-premium. Typography and composition
   over containers. One accent. Square geometry. Hairline rules.
   ============================================================ */

@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('../fonts/manrope-var.woff2') format('woff2');
}

:root{
  --paper:#fafaf7;
  --paper-2:#f2f2ee;
  --ink:#0b0d10;
  --ink-2:#111419;
  --muted:#6b7077;
  --muted-dark:#9aa0a8;
  --line:rgba(11,13,16,.14);
  --line-soft:rgba(11,13,16,.08);
  --line-dark:rgba(255,255,255,.16);
  --line-dark-soft:rgba(255,255,255,.09);
  --accent:#1273d4;
  --accent-dark:#4d9be8;
  --font:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  --w:min(1280px,calc(100vw - clamp(2.5rem,6vw,7rem)));
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  font-weight:430;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(18,115,212,.15)}

html.zh body{letter-spacing:0}
html.zh h1,html.zh h2,html.zh h3,html.zh .display{letter-spacing:0!important}

/* ---------------- layout primitives ---------------- */
.w{width:var(--w);margin-left:auto;margin-right:auto}
section{position:relative}
.dark{background:var(--ink);color:var(--paper)}
.dark ::selection{background:rgba(77,155,232,.25)}

/* spacing rhythm — sections manage their own top/bottom */
.pad-t{padding-top:clamp(5rem,10vw,10rem)}
.pad-b{padding-bottom:clamp(5rem,10vw,10rem)}
.pad-t-s{padding-top:clamp(3rem,6vw,5.5rem)}
.pad-b-s{padding-bottom:clamp(3rem,6vw,5.5rem)}

/* ---------------- type system ---------------- */
h1,h2,h3,h4{font-weight:400;line-height:1.08}

.k{
  display:flex;align-items:baseline;gap:1rem;
  font-size:.69rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);
}
.dark .k{color:var(--muted-dark)}
.k .no{color:var(--accent);font-weight:700;letter-spacing:.05em}
.dark .k .no{color:var(--accent-dark)}

.display{
  font-size:clamp(2.7rem,5.8vw,5.4rem);
  font-weight:330;
  letter-spacing:-.028em;
  line-height:1.04;
  text-wrap:balance;
}
.h2{
  font-size:clamp(2rem,4.2vw,3.4rem);
  font-weight:340;
  letter-spacing:-.025em;
  line-height:1.06;
  text-wrap:balance;
}
.h3{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:550;letter-spacing:-.015em}
.em{font-weight:640}
.em-a{font-weight:640;color:var(--accent)}
.dark .em-a{color:var(--accent-dark)}

.lede{
  font-size:clamp(1.02rem,1.3vw,1.2rem);
  line-height:1.7;
  color:var(--muted);
  max-width:34em;
}
.dark .lede{color:var(--muted-dark)}
.small{font-size:.85rem;color:var(--muted)}
.dark .small{color:var(--muted-dark)}

.measure{max-width:34em}
.tm{font-size:.42em;vertical-align:super;font-weight:600;letter-spacing:0}

/* hairline */
.rule{border:none;height:1px;background:var(--line);width:100%}
.dark .rule{background:var(--line-dark)}

/* ---------------- buttons & links ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.95rem 1.9rem;
  background:var(--ink);color:var(--paper);
  font-size:.9rem;font-weight:600;letter-spacing:.01em;
  border:1px solid var(--ink);border-radius:2px;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{background:transparent;color:var(--ink)}
.dark .btn,.on-photo .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.dark .btn:hover,.on-photo .btn:hover{background:transparent;color:var(--paper)}
.btn svg{width:14px;height:14px;transition:transform .25s ease}
.btn:hover svg{transform:translateX(4px)}

.lnk{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.92rem;font-weight:600;
  padding-bottom:.2rem;
  border-bottom:1px solid var(--line);
  transition:border-color .25s ease,gap .25s ease;
}
.lnk:hover{border-color:var(--ink);gap:.85rem}
.dark .lnk,.on-photo .lnk{border-color:var(--line-dark);color:var(--paper)}
.dark .lnk:hover,.on-photo .lnk:hover{border-color:var(--paper)}
.lnk svg{width:13px;height:13px}

/* ---------------- nav ---------------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(11,13,16,.9);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom-color:var(--line-dark-soft);
}
.nav-inner{
  width:var(--w);margin:0 auto;height:86px;
  display:flex;align-items:center;gap:2.4rem;
}
.nav-logo{display:flex;flex-direction:column;gap:.42rem;align-items:flex-start}
.nav-logo img{height:33px;width:auto;align-self:flex-start}
.nav-tag{
  font-size:.55rem;font-weight:650;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.55);white-space:nowrap;
}
@media(max-width:600px){.nav-tag{display:none}.nav-logo img{height:28px}}
.nav-links{display:flex;gap:2.2rem;margin-left:auto;align-items:center}
.nav-links a{
  color:rgba(255,255,255,.7);font-size:.95rem;font-weight:550;
  transition:color .2s ease;white-space:nowrap;letter-spacing:.01em;
}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-contact{
  border:1px solid rgba(255,255,255,.35);border-radius:2px;
  padding:.5rem 1.15rem;color:#fff!important;font-weight:600!important;
  transition:background .25s ease,border-color .25s ease;
}
.nav-contact:hover{background:#fff;color:var(--ink)!important;border-color:#fff}
.lang-btn{
  background:none;border:none;color:rgba(255,255,255,.68);
  font-size:.8rem;font-weight:650;letter-spacing:.06em;
  transition:color .2s ease;padding:.3rem 0;
}
.lang-btn:hover{color:#fff}
.nav-burger{display:none;background:none;border:none;margin-left:auto}
.nav-burger span{display:block;width:22px;height:1.5px;background:#fff;margin:6px 0;transition:.25s}

@media(max-width:960px){
  .nav-links{
    position:fixed;top:86px;left:0;right:0;
    background:rgba(11,13,16,.97);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    flex-direction:column;align-items:flex-start;
    padding:2rem clamp(1.25rem,3vw,3.5rem) 2.4rem;gap:1.4rem;
    transform:translateY(-130%);transition:transform .35s ease;
    border-bottom:1px solid var(--line-dark-soft);
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a{font-size:1.05rem}
  .nav-burger{display:block}
  .nav-burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-burger.open span:nth-child(2){opacity:0}
  .nav-burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* ---------------- cinematic hero ---------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;
  background:var(--ink);
  overflow:hidden;
  padding-top:150px;
  padding-bottom:clamp(3rem,7vh,5.5rem);
}
.hero.short{min-height:76svh}
.hero.short.compact{min-height:62svh}
.hero.short .display{font-size:clamp(2.3rem,4.3vw,4.2rem)}
.hero-photo{
  position:absolute;inset:0;
  background-size:cover;background-position:var(--hp,50% 50%);
  transform:scale(1.035);
  animation:heroSettle 12s ease-out forwards;
}
@keyframes heroSettle{to{transform:scale(1)}}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(75deg,rgba(8,10,14,.88) 0%,rgba(8,10,14,.55) 42%,rgba(8,10,14,.1) 75%),
    linear-gradient(0deg,rgba(8,10,14,.92) 0%,rgba(8,10,14,.25) 38%,rgba(8,10,14,.12) 100%);
}
.hero-inner{position:relative;z-index:2}
.hero-meta{
  display:flex;align-items:center;gap:1.2rem;
  font-size:.69rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.66);
  margin-bottom:clamp(1.6rem,3vh,2.6rem);
}
.hero-meta::before{content:"";width:2.6rem;height:1px;background:var(--accent-dark)}
.hero h1{color:#fff;max-width:11.5em}
.hero-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:3rem;
  margin-top:clamp(2rem,4vh,3.2rem);flex-wrap:wrap;
}
.hero-foot .lede{color:rgba(255,255,255,.75);max-width:30em}
.hero-copy{max-width:32em}
.hero-strap{
  margin:1.15rem 0 0;
  font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.hero-strap i{font-style:normal;color:var(--accent-dark);margin:0 .55rem;font-weight:400}
@media(max-width:640px){.hero-strap{font-size:.7rem;letter-spacing:.16em}}
.hero-actions{display:flex;gap:1.6rem;align-items:center;flex-shrink:0;flex-wrap:wrap}

/* ---------------- stat ledger ---------------- */
.ledger-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.ledger-stats>div{
  padding:clamp(1.8rem,3vw,2.8rem) clamp(1.2rem,2vw,2.2rem) clamp(1.8rem,3vw,2.6rem) 0;
  border-left:1px solid var(--line);
  padding-left:clamp(1.2rem,2vw,2.2rem);
}
.ledger-stats>div:first-child{border-left:none;padding-left:0}
.ledger-stats b{
  display:block;
  font-size:clamp(2.6rem,4.6vw,4.4rem);
  font-weight:230;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;
  margin-bottom:.7rem;
}
.ledger-stats b sup{font-size:.45em;font-weight:400;color:var(--accent);vertical-align:.55em}
.ledger-stats span{
  display:block;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);max-width:16em;line-height:1.5;
}
@media(max-width:860px){
  .ledger-stats{grid-template-columns:1fr 1fr}
  .ledger-stats>div:nth-child(3){border-left:none;padding-left:0}
  .ledger-stats>div:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ---------------- split opposition ---------------- */
.oppose{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
}
.oppose>div{
  padding:clamp(2.2rem,4vw,3.8rem) 0 clamp(2.4rem,4vw,4rem);
}
.oppose>div:first-child{padding-right:clamp(2rem,4.5vw,5rem);border-right:1px solid var(--line)}
.oppose>div:last-child{padding-left:clamp(2rem,4.5vw,5rem)}
.oppose .side-label{
  font-size:.69rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.2rem;
}
.oppose h3{font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:360;letter-spacing:-.02em;margin-bottom:1.6rem;max-width:14em}
.oppose h3 .em{font-weight:640}
@media(max-width:820px){
  .oppose{grid-template-columns:1fr}
  .oppose>div:first-child{border-right:none;padding-right:0;border-bottom:1px solid var(--line)}
  .oppose>div:last-child{padding-left:0}
}

/* plain typographic list — thin rules, no bullets */
.tlist li{
  padding:.85rem 0;
  border-top:1px solid var(--line-soft);
  font-size:.98rem;color:#2c3038;
  display:flex;gap:1.1rem;align-items:baseline;
}
.tlist li:first-child{border-top:none}
.tlist li::before{
  content:"—";color:var(--accent);font-weight:400;flex-shrink:0;
}
.tlist.neg li::before{content:"×";color:#b0403c;font-weight:600}
.dark .tlist li{color:rgba(255,255,255,.82);border-top-color:var(--line-dark-soft)}
.dark .tlist li::before{color:var(--accent-dark)}

/* ---------------- grand statement ---------------- */
.statement{
  font-size:clamp(1.9rem,4.6vw,3.9rem);
  font-weight:300;letter-spacing:-.028em;line-height:1.14;
  max-width:22em;text-wrap:balance;
}
.statement .em{font-weight:620}
.statement .em-a{font-weight:620}

/* ---------------- platform diagram ---------------- */
.diagram{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(1.5rem,4vw,4rem);
  align-items:stretch;
}
.diagram-side{display:flex;flex-direction:column}
.diagram-side .side-head{
  font-size:.69rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-dark);margin-bottom:1.6rem;
}
.diagram-side.right{text-align:right}
.diagram-side.right .m-row{flex-direction:row-reverse;text-align:right}
.m-row{
  display:flex;align-items:baseline;gap:1rem;justify-content:space-between;
  padding:1.15rem 0;border-top:1px solid var(--line-dark-soft);
}
.m-row:last-child{border-bottom:1px solid var(--line-dark-soft)}
.m-row b{font-size:clamp(1rem,1.5vw,1.25rem);font-weight:600;white-space:nowrap}
.m-row span{font-size:.82rem;color:var(--muted-dark);font-weight:450}
.diagram-core{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(1.5rem,3vw,2.5rem) clamp(1.6rem,3vw,3rem);
  border-left:1px solid var(--line-dark);border-right:1px solid var(--line-dark);
  text-align:center;gap:.9rem;min-width:min(300px,40vw);
}
.diagram-core img{height:44px;width:auto;margin-bottom:.4rem}
.diagram-core .core-sub{
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-dark);
}
.diagram-core .core-words{
  font-size:.95rem;font-weight:300;letter-spacing:.04em;color:rgba(255,255,255,.85);
}
.diagram-links{display:flex;gap:2rem;justify-content:center;margin-top:clamp(2.5rem,5vw,4rem);flex-wrap:wrap}
@media(max-width:900px){
  .diagram{grid-template-columns:1fr}
  .diagram-core{border-left:none;border-right:none;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:2rem 0;order:-1}
  .diagram-side.right{text-align:left}
  .diagram-side.right .m-row{flex-direction:row;text-align:left}
}

/* ---------------- index list (methodologies) ---------------- */
.index{border-top:1px solid var(--line)}
.index a{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:clamp(1.2rem,3vw,3rem);
  align-items:baseline;
  padding:clamp(1.5rem,2.6vw,2.2rem) 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .3s ease;
}
.index a:hover{padding-left:1.2rem}
.index .no{font-size:.75rem;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:.05em}
.index .name{
  font-size:clamp(1.5rem,3vw,2.5rem);font-weight:330;letter-spacing:-.02em;white-space:nowrap;
}
.index .name .tm{font-weight:500}
.index .desc{font-size:.9rem;color:var(--muted);max-width:26em;text-align:right}
.index .arr{
  font-size:1.1rem;color:var(--muted);
  transition:transform .3s ease,color .3s ease;
}
.index a:hover .arr{transform:translateX(6px);color:var(--ink)}
.dark .index{border-color:var(--line-dark)}
.dark .index a{border-color:var(--line-dark)}
.dark .index .desc{color:var(--muted-dark)}
.dark .index a:hover .arr{color:#fff}
@media(max-width:760px){
  .index a{grid-template-columns:auto 1fr auto;gap:1rem}
  .index .desc{display:none}
  .index .name{white-space:normal}
}

/* ---------------- comparison table ---------------- */
.cmp-table{
  display:grid;
  grid-template-columns:1.05fr 1fr 1fr 1.25fr;
  border-top:1px solid var(--line-dark);
}
.cmp-table>div{
  padding:1.35rem clamp(1rem,2vw,1.8rem);
  border-bottom:1px solid var(--line-dark-soft);
  font-size:.94rem;
  display:flex;align-items:center;
}
.cmp-table .c-attr{color:var(--muted-dark);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding-left:0}
.cmp-table .c-head{
  font-weight:600;font-size:1rem;padding-top:1.8rem;padding-bottom:1.8rem;
  border-bottom:1px solid var(--line-dark);align-items:flex-end;
}
.cmp-table .c-head small{display:block;font-size:.72rem;font-weight:500;color:var(--muted-dark);margin-top:.3rem;letter-spacing:.04em}
.cmp-table .c-dim{color:var(--muted-dark)}
.cmp-table .c-jes{
  background:rgba(255,255,255,.055);
  border-left:1px solid var(--line-dark);border-right:1px solid var(--line-dark);
  color:#fff;font-weight:550;
}
.cmp-table .c-jes.c-head{border-top:2px solid var(--accent-dark)}
.cmp-table .c-jes .jes-name{display:flex;flex-direction:column}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp-scroll::-webkit-scrollbar{height:4px}
.cmp-scroll::-webkit-scrollbar-thumb{background:var(--line-dark);border-radius:0}
@media(max-width:880px){
  .cmp-table{min-width:780px}
}

/* ---------------- ledger framework (CTQDR / PROVE) ---------------- */
.framework{
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);
}
.framework>div{
  padding:clamp(1.6rem,2.6vw,2.4rem) clamp(1rem,1.8vw,1.8rem) clamp(1.8rem,3vw,2.6rem) 0;
  border-left:1px solid var(--line);
  padding-left:clamp(1rem,1.8vw,1.8rem);
}
.framework>div:first-child{border-left:none;padding-left:0}
.framework .letter{
  font-size:clamp(3.2rem,5.5vw,5.2rem);
  font-weight:210;letter-spacing:-.02em;line-height:1;
  color:var(--ink);
  margin-bottom:1.3rem;
}
.framework .letter::after{
  content:"";display:block;width:1.6rem;height:2px;background:var(--accent);margin-top:1rem;
}
.framework h4{font-size:.95rem;font-weight:700;letter-spacing:.04em;margin-bottom:.55rem}
.framework .q{font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.5;display:block;margin-bottom:.35rem}
.framework p{font-size:.85rem;color:var(--muted);line-height:1.6}
@media(max-width:1000px){
  .framework{grid-template-columns:1fr 1fr}
  .framework>div:nth-child(odd){border-left:none;padding-left:0}
  .framework>div:nth-child(n+3){border-top:1px solid var(--line-soft)}
}
@media(max-width:540px){
  .framework{grid-template-columns:1fr}
  .framework>div{border-left:none;padding-left:0}
  .framework>div:nth-child(n+2){border-top:1px solid var(--line-soft)}
}

/* ---------------- connected process timeline ---------------- */
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1.2rem,2.5vw,2.4rem)}
.timeline::before{
  content:"";position:absolute;top:5px;left:0;right:0;height:1px;background:var(--line);
}
.t-step{position:relative;padding-top:2.2rem}
.t-step::before{
  content:"";position:absolute;top:0;left:0;
  width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:2px solid var(--accent);
}
.t-step .no{
  font-size:.72rem;font-weight:700;color:var(--accent);letter-spacing:.1em;
  font-variant-numeric:tabular-nums;display:block;margin-bottom:.6rem;
}
.t-step h4{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.3rem}
.t-step .goal{font-size:.84rem;font-weight:600;color:var(--muted);margin-bottom:1rem;font-style:normal}
.t-step ul li{
  font-size:.84rem;color:var(--muted);padding:.24rem 0;
}
.dark .timeline::before{background:var(--line-dark)}
.dark .t-step::before{background:var(--ink);border-color:var(--accent-dark)}
.dark .t-step .goal,.dark .t-step ul li{color:var(--muted-dark)}
@media(max-width:900px){
  .timeline{grid-template-columns:1fr;gap:0}
  .timeline::before{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto}
  .t-step{padding:0 0 2.4rem 2.4rem}
  .t-step:last-child{padding-bottom:.5rem}
  .t-step::before{top:.35rem;left:0}
}

/* ---------------- numbered editorial list ---------------- */
.numlist{counter-reset:nl}
.numlist>li{
  counter-increment:nl;
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,3vw,2.8rem);
  padding:clamp(1.6rem,2.8vw,2.4rem) 0;
  border-top:1px solid var(--line);
  align-items:baseline;
}
.numlist>li:last-child{border-bottom:1px solid var(--line)}
.numlist>li::before{
  content:"0" counter(nl);
  font-size:.78rem;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:.08em;
}
.numlist h4{font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:600;letter-spacing:-.015em;margin-bottom:.35rem}
.numlist p{font-size:.95rem;color:var(--muted);max-width:36em}
.dark .numlist>li{border-color:var(--line-dark-soft)}
.dark .numlist p{color:var(--muted-dark)}
.dark .numlist>li::before{color:var(--accent-dark)}

/* two-col variant */
.numlist.cols{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2.5rem,5vw,5rem)}
.numlist.cols>li:nth-child(2){border-top:1px solid var(--line)}
.numlist.cols>li:nth-last-child(2){border-bottom:1px solid var(--line)}
.dark .numlist.cols>li:nth-last-child(2){border-bottom-color:var(--line-dark-soft)}
@media(max-width:820px){
  .numlist.cols{grid-template-columns:1fr}
  .numlist.cols>li:nth-child(2){border-top:none}
  .numlist.cols>li:first-child + li{border-top:1px solid var(--line)}
  .numlist.cols>li:nth-last-child(2){border-bottom:none}
}

/* ---------------- value words (focus vs value) ---------------- */
.words-oppose{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.words-oppose>div{padding:clamp(2rem,3.5vw,3rem) 0}
.words-oppose>div:first-child{border-right:1px solid var(--line);padding-right:clamp(2rem,4vw,4.5rem)}
.words-oppose>div:last-child{padding-left:clamp(2rem,4vw,4.5rem)}
.words-oppose .wo-label{
  font-size:.69rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.6rem;
}
.words-oppose .word{
  font-size:clamp(1.5rem,2.8vw,2.2rem);
  line-height:1.5;letter-spacing:-.02em;
  display:block;
}
.words-oppose .dim .word{font-weight:250;color:var(--muted)}
.words-oppose .strong .wo-label{color:var(--accent)}
.words-oppose .strong .word{font-weight:560;color:var(--ink)}
@media(max-width:760px){
  .words-oppose{grid-template-columns:1fr}
  .words-oppose>div:first-child{border-right:none;border-bottom:1px solid var(--line);padding-right:0}
  .words-oppose>div:last-child{padding-left:0}
}

/* ---------------- imagery ---------------- */
.bleed{position:relative}
.bleed img{width:100%;height:100%;object-fit:cover}
.figure-cap{
  display:flex;gap:1rem;align-items:baseline;
  padding-top:1rem;
  font-size:.78rem;color:var(--muted);letter-spacing:.04em;
}
.figure-cap::before{content:"";width:1.8rem;height:1px;background:var(--accent);align-self:center;flex-shrink:0}
.dark .figure-cap{color:var(--muted-dark)}

/* photo split — image bleeds to viewport edge */
.photo-split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,5vw,6rem);
  align-items:center;
}
.photo-split .img-bleed-left{
  margin-left:calc((100vw - var(--w)) / -2);
  height:100%;min-height:420px;
}
.photo-split .img-bleed-left img{width:100%;height:100%;object-fit:cover}
@media(max-width:880px){
  .photo-split{grid-template-columns:1fr}
  .photo-split .img-bleed-left{margin-left:calc((100vw - var(--w)) / -2);margin-right:calc((100vw - var(--w)) / -2);min-height:0;height:auto}
  .photo-split .img-bleed-left img{aspect-ratio:16/10;height:auto}
}

/* cutout figure on flat tone */
.cutout{
  position:relative;
  background:var(--paper-2);
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;
}
.cutout img{width:88%;max-width:620px;object-fit:contain;object-position:bottom}
.dark .cutout{background:var(--ink-2)}

/* ---------------- quote / quiet moment ---------------- */
.quiet{
  padding:clamp(6rem,13vw,12rem) 0;
}
.quiet .statement{margin:0 auto;text-align:left}

/* ---------------- CTA final ---------------- */
.cta-final .h2{max-width:14em}
.cta-actions{display:flex;gap:2rem;align-items:center;margin-top:clamp(2rem,4vw,3rem);flex-wrap:wrap}
.cta-mail{font-size:.95rem;color:var(--muted-dark);font-weight:500}
.cta-mail b{color:#fff;font-weight:600}

/* ---------------- footer ---------------- */
footer{background:var(--ink);color:var(--paper);padding:clamp(3.5rem,6vw,5rem) 0 2.2rem;border-top:1px solid var(--line-dark-soft)}
.foot-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.foot-brand img{height:34px;width:auto;margin-bottom:1.3rem}
.foot-brand p{color:var(--muted-dark);font-size:.86rem;max-width:24em;line-height:1.7}
.foot-col h5{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-dark);margin-bottom:1.2rem;font-weight:700;
}
.foot-col a{
  display:block;color:rgba(255,255,255,.72);font-size:.9rem;padding:.34rem 0;
  transition:color .2s;font-weight:450;
}
.foot-col a:hover{color:#fff}
.foot-base{
  border-top:1px solid var(--line-dark-soft);padding-top:1.7rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  color:var(--muted-dark);font-size:.78rem;letter-spacing:.03em;
}
.foot-tagline{color:rgba(255,255,255,.85);font-weight:600;letter-spacing:.06em}
@media(max-width:860px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.foot-top{grid-template-columns:1fr}}

/* ---------------- contact form ---------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem 2.5rem}
@media(max-width:680px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.5rem}
.field.full{grid-column:1/-1}
.field label{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);font-weight:450;
  background:transparent;
  border:none;border-bottom:1px solid var(--line);
  border-radius:0;
  padding:.55rem 0 .7rem;
  outline:none;transition:border-color .25s;
  -webkit-appearance:none;appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236b7077' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .2rem center;
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.form-note{font-size:.78rem;color:var(--muted);margin-top:1.6rem;letter-spacing:.02em}
.form-ok{display:none;padding:3rem 0}
.form-ok.show{display:block}
.form-ok h3{font-size:1.6rem;font-weight:400;margin-bottom:.6rem}
.form-ok h3::before{content:"";display:block;width:2.2rem;height:2px;background:var(--accent);margin-bottom:1.4rem}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

.c-meta{display:flex;flex-direction:column;gap:0}
.c-meta>div{padding:1.3rem 0;border-top:1px solid var(--line)}
.c-meta>div:last-child{border-bottom:1px solid var(--line)}
.c-meta b{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.35rem;
}
.c-meta span{font-size:1.02rem;font-weight:500}

/* ---------------- reveal motion ---------------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity 1s cubic-bezier(.16,.6,.3,1),transform 1s cubic-bezier(.16,.6,.3,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}
.rv-d2{transition-delay:.2s}
.rv-d3{transition-delay:.3s}
.rv-d4{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero-photo{animation:none;transform:none}
  html{scroll-behavior:auto}
}

/* ---------------- helpers ---------------- */
.mt-05{margin-top:.75rem}
.mt-1{margin-top:1.25rem}
.mt-2{margin-top:2rem}
.mt-3{margin-top:3rem}
.mt-4{margin-top:4rem}
.mb-1{margin-bottom:1.25rem}
.mb-2{margin-bottom:2rem}
.mb-3{margin-bottom:3rem}
.sec-head-row{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,6vw,7rem);
  align-items:baseline;margin-bottom:clamp(2.8rem,5.5vw,4.8rem);
}
.sec-head-row .k{white-space:nowrap}
@media(max-width:700px){.sec-head-row{grid-template-columns:1fr;gap:1.2rem}}
/* Methodology sections: kicker sits above the title so the copy aligns to the
   same left edge as the framework columns below, instead of leaving the head
   with an empty left column. */
.sec-head-row.stack{grid-template-columns:1fr;gap:.85rem}
/* Items are separated by the flex gap, not by punctuation — a trailing
   separator used to dangle at the end of a wrapped line. */
.deliver-row{
  display:flex;flex-wrap:wrap;gap:.6rem 1.7rem;align-items:baseline;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.2rem 0;
}
/* The label takes its own line so the items below wrap as a balanced block
   instead of stranding the last one on a line of its own. */
.deliver-row .dl{
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  flex:0 0 100%;margin:0 0 .1rem;
}
.deliver-row span:not(.dl){font-size:.94rem;font-weight:550}
.dark .deliver-row{border-color:var(--line-dark-soft)}
.dark .deliver-row .dl{color:var(--muted-dark)}

/* ---------------- objective fork (choose your path) ---------------- */
.fork{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fork a{
  display:block;position:relative;
  padding:clamp(2.6rem,5vw,4.4rem) clamp(1.8rem,3.5vw,3.8rem);
  transition:background .3s ease;
}
.fork a:first-child{border-right:1px solid var(--line)}
.fork a:hover{background:var(--paper-2)}
.fork .fk-k{
  font-size:.69rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
}
.fork h3{font-size:clamp(1.6rem,2.9vw,2.4rem);font-weight:340;letter-spacing:-.025em;margin-bottom:.7rem}
.fork h3 .em{font-weight:640}
.fork p{font-size:.95rem;color:var(--muted);max-width:24em;margin-bottom:1.4rem}
.fork .lnk{border-color:var(--line);color:var(--ink)}
.fork a:hover .lnk{border-color:var(--ink);gap:.85rem}
@media(max-width:760px){
  .fork{grid-template-columns:1fr}
  .fork a{padding-left:0;padding-right:0}
  .fork a:first-child{border-right:none;border-bottom:1px solid var(--line)}
}

/* ---------------- flywheel (how JES Connect works) ---------------- */
.fw-wrap{
  display:grid;grid-template-columns:1fr minmax(300px,440px) 1fr;
  gap:clamp(1.6rem,3.5vw,3.5rem);align-items:center;
}
.flywheel{display:flex;flex-direction:column;align-items:stretch;text-align:center}
.fw-node{border:1px solid var(--line-dark);padding:1.25rem 1.5rem}
.fw-node b{display:block;font-size:.92rem;font-weight:750;letter-spacing:.16em;text-transform:uppercase}
.fw-node span{display:block;font-size:.8rem;color:var(--muted-dark);margin-top:.3rem}
.fw-link{display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:1.15rem 0}
.fw-line{position:relative;width:1px;height:2rem;background:var(--accent-dark)}
.fw-down .fw-line::after{
  content:"";position:absolute;bottom:-1px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:7px;height:7px;border-right:1.5px solid var(--accent-dark);border-bottom:1.5px solid var(--accent-dark);
}
.fw-up .fw-line::after{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%) rotate(-135deg);
  width:7px;height:7px;border-right:1.5px solid var(--accent-dark);border-bottom:1.5px solid var(--accent-dark);
}
.fw-verbs{font-size:.7rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-dark)}
.fw-meths{font-size:.88rem;color:rgba(255,255,255,.85)}
.fw-meths a{border-bottom:1px solid var(--line-dark);font-weight:600;transition:border-color .25s,color .25s}
.fw-meths a:hover{color:#fff;border-color:#fff}
.fw-core{
  border:1px solid var(--line-dark);background:rgba(255,255,255,.055);
  padding:1.8rem 1.6rem;
}
.fw-core img{height:36px;width:auto;margin:0 auto .9rem}
.fw-core span{display:block;font-size:.78rem;letter-spacing:.05em;color:rgba(255,255,255,.82);line-height:1.7}
.fw-note{font-size:.88rem;color:var(--muted-dark);max-width:17em;line-height:1.65}
.fw-note b{display:block;color:#fff;font-weight:650;margin-bottom:.35rem;font-size:.92rem}
.fw-note.left{justify-self:end;text-align:right}
.fw-note.left b::after{content:" ⟶";color:var(--accent-dark)}
.fw-note.right b::before{content:"⟵ ";color:var(--accent-dark)}
.fw-strength{
  text-align:center;margin-top:clamp(2.2rem,4vw,3.2rem);
  font-size:clamp(1.1rem,1.7vw,1.4rem);font-weight:650;letter-spacing:-.01em;
}
@media(max-width:940px){
  .fw-wrap{grid-template-columns:1fr}
  .fw-note.left,.fw-note.right{justify-self:start;text-align:left;max-width:34em;order:2}
  .fw-note.left b::after{content:""}
  .fw-note.right b::before{content:""}
  .flywheel{order:1}
}

/* ---------------- 6-step timeline variant ---------------- */
.timeline.t6{grid-template-columns:repeat(6,1fr);gap:clamp(1rem,2vw,1.8rem)}
.t-step .desc{font-size:.85rem;color:var(--muted);line-height:1.6;margin-top:.2rem}
@media(max-width:1080px){
  .timeline.t6{grid-template-columns:1fr;gap:0}
  .timeline.t6::before{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto}
  .timeline.t6 .t-step{padding:0 0 2.4rem 2.4rem}
  .timeline.t6 .t-step:last-child{padding-bottom:.5rem}
  .timeline.t6 .t-step::before{top:.35rem;left:0}
}

/* ---------------- full-screen promise + value icons ---------------- */
.promise-full{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.promise-full .framework>div{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:clamp(2.2rem,4vw,3.5rem);padding-bottom:clamp(2.2rem,4vw,3.5rem);
}
.promise-full .letter{
  color:#fff!important;
  font-size:clamp(2.4rem,4.4vw,3.9rem)!important;
  font-weight:250;
}
.promise-full .letter::after{margin:1.1rem auto 0}
.promise-full .framework p{max-width:24em;margin:0 auto}
.pv-icon{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:96px;height:96px;flex:0 0 auto;
  border:1.5px solid rgba(255,255,255,.28);border-radius:50%;
  margin:0 auto 1.8rem;
  transition:border-color .4s ease,background .4s ease,transform .4s ease,box-shadow .4s ease;
}
.pv-icon svg{width:38px;height:38px;stroke:#c6ccd6;fill:none;transition:stroke .4s ease}
.pv-icon::after{
  content:"";position:absolute;inset:-1.5px;border-radius:50%;
  border:1.5px solid var(--accent-dark);
  opacity:0;pointer-events:none;
  animation:pvPulse 3.6s ease-out infinite;
}
.promise-full .framework>div:nth-child(2) .pv-icon::after{animation-delay:1.2s}
.promise-full .framework>div:nth-child(3) .pv-icon::after{animation-delay:2.4s}
@keyframes pvPulse{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}
.promise-full .framework>div:hover .pv-icon{
  background:var(--accent);border-color:var(--accent);
  transform:translateY(-6px);
  box-shadow:0 18px 50px rgba(18,115,212,.4);
}
.promise-full .framework>div:hover .pv-icon svg{stroke:#fff}
.promise-full .framework>div:hover .pv-icon::after{animation:none}
@media(prefers-reduced-motion:reduce){.pv-icon::after{animation:none}}

/* ---------------- numlist icons (icon replaces the number) ---------------- */
.numlist h4{display:flex;align-items:center;gap:.9rem}
.nli{width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.nli svg{width:30px;height:30px;stroke:var(--accent);fill:none}
.dark .nli svg{stroke:var(--accent-dark)}
.numlist.nonum>li{grid-template-columns:1fr}
.numlist.nonum>li::before{content:none}

/* ---------------- model infographic figure ---------------- */
.model-fig{margin-top:clamp(1.5rem,3vw,2.5rem)}
.model-fig img{width:100%;height:auto;display:block}

/* ---------------- footer slogan ---------------- */
.foot-slogan{
  font-size:.72rem;font-weight:750;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-dark);margin-top:1rem;
}

/* ============================================================
   V2 feedback round — mobile fixes + new components
   ============================================================ */

/* ---- mobile: hero actions were overflowing the viewport ---- */
@media(max-width:820px){
  .hero-foot{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .hero-copy{max-width:none}
  .hero-actions{width:100%;flex-shrink:1;gap:1rem 1.4rem}
  .hero-actions .btn{flex:1 1 auto;justify-content:center;text-align:center}
}
@media(max-width:480px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .lnk{align-self:flex-start}
}

/* ---- hero logo lockup (larger mark above the meta line) ---- */

/* ---- comparison table v2: real table, stacks cleanly on mobile ---- */
.cmp2{width:100%;border-collapse:collapse;font-size:.95rem}
.cmp2 th,.cmp2 td{text-align:left;vertical-align:top;padding:1rem 1.1rem;border-bottom:1px solid var(--line-dark-soft)}
.cmp2 thead th{
  font-size:.98rem;font-weight:600;color:#fff;
  border-bottom:1px solid var(--line-dark);padding-top:0;
}
.cmp2 thead th small{display:block;font-size:.72rem;font-weight:500;color:var(--muted-dark);margin-top:.25rem;letter-spacing:.03em}
.cmp2 tbody th{
  font-family:var(--font);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-dark);padding-left:0;white-space:nowrap;
}
.cmp2 td{color:var(--muted-dark)}
.cmp2 .jes{
  background:rgba(255,255,255,.055);color:#fff;font-weight:550;
  border-left:1px solid var(--line-dark);border-right:1px solid var(--line-dark);
}
.cmp2 thead .jes{border-top:2px solid var(--accent-dark)}
.cmp2 .none{color:rgba(255,255,255,.28)}
@media(max-width:860px){
  .cmp2,.cmp2 tbody,.cmp2 tr,.cmp2 td,.cmp2 th{display:block;width:auto}
  .cmp2 thead{display:none}
  .cmp2 tbody tr{border-top:1px solid var(--line-dark);padding:1.1rem 0 .4rem}
  .cmp2 tbody tr:first-child{border-top:none}
  .cmp2 tbody th{padding:0 0 .55rem;border:none}
  .cmp2 td{
    padding:.42rem 0 .42rem 0;border:none;
    display:grid;grid-template-columns:minmax(9.5rem,42%) 1fr;gap:.9rem;align-items:baseline;
  }
  .cmp2 td::before{
    content:attr(data-label);
    font-size:.76rem;font-weight:600;color:var(--muted-dark);
  }
  .cmp2 .jes{background:none;border:none;color:#fff}
  .cmp2 .jes::before{color:var(--accent-dark)}
}

/* ---- three-box next-step ---- */
.cta-boxes{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-dark);margin-top:clamp(2rem,4vw,3rem)}
.cta-boxes a{
  display:flex;flex-direction:column;gap:.5rem;
  padding:clamp(1.5rem,2.6vw,2.1rem) clamp(1.2rem,2vw,1.7rem);
  border-left:1px solid var(--line-dark);transition:background .3s ease;
}
.cta-boxes a:first-child{border-left:none}
.cta-boxes a:hover{background:rgba(255,255,255,.06)}
.cta-boxes b{font-size:clamp(1.05rem,1.7vw,1.28rem);font-weight:600;letter-spacing:-.015em;color:#fff}
.cta-boxes span{font-size:.88rem;color:var(--muted-dark)}
.cta-boxes .go{margin-top:auto;padding-top:.7rem;font-size:.82rem;font-weight:600;color:var(--accent-dark)}
@media(max-width:760px){
  .cta-boxes{grid-template-columns:1fr}
  .cta-boxes a{border-left:none;border-top:1px solid var(--line-dark)}
  .cta-boxes a:first-child{border-top:none}
}

/* ---- fee structures ---- */
.fees{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:clamp(1.6rem,3vw,2.4rem)}
.fees>div{background:var(--paper);padding:clamp(1.4rem,2.4vw,2rem)}
.dark .fees{background:var(--line-dark)}
.dark .fees>div{background:var(--ink)}
.fee-k{font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
.dark .fee-k{color:var(--accent-dark)}
.fees h4{font-size:1.12rem;font-weight:600;letter-spacing:-.015em;margin:0 0 .6rem}
.fees p{font-size:.93rem;color:var(--muted);line-height:1.6;margin:0}
.dark .fees p{color:var(--muted-dark)}
.fee-note{margin-top:1.4rem;font-size:.9rem;color:var(--muted);max-width:60em}
.dark .fee-note{color:var(--muted-dark)}
@media(max-width:820px){.fees{grid-template-columns:1fr}}

/* ---- about page ---- */
.about-lede{font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.6;color:var(--ink);max-width:44em}
.about-block{max-width:52em}
.about-block p{color:var(--muted);margin-bottom:.9rem}
.cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);margin-top:1.6rem}
.cap-grid>div{background:var(--paper);padding:1.3rem 1.4rem}
.cap-grid h4{font-size:1rem;font-weight:600;margin:0 0 .4rem}
.cap-grid p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.6}
.people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);margin-top:1.8rem}
@media(max-width:820px){.people{grid-template-columns:1fr}}
.person h3{font-size:1.35rem;font-weight:600;letter-spacing:-.02em;margin:0}
.person .role{font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:.3rem 0 1rem}
.person p{font-size:.94rem;color:var(--muted);line-height:1.65;margin-bottom:.8rem}
.dark .about-block p{color:var(--muted-dark)}

/* --- V2 mobile corrections (audited at 390px) --- */
/* three-up framework: was an inline grid-template that beat every media query */
.framework.fw3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.framework.fw3{grid-template-columns:1fr}}
/* long kickers must wrap once the head stacks, or they force the page wide */
@media(max-width:860px){.sec-head-row .k{white-space:normal}}
.sec-head-row.stack .k{white-space:normal}
/* contact page: two-column layout was an inline style with no mobile rule */
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(3rem,7vw,7rem);align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:3rem}}
.c-meta span{overflow-wrap:anywhere}
/* inputs default to an intrinsic ~350px floor (min-width:auto on grid/flex items),
   which forced the contact page wider than a 320px viewport */
.field input,.field select,.field textarea{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.field,.form-grid,.contact-grid>*{min-width:0}
.dark .ledger-stats>div{border-left-color:var(--line-dark)}

/* mobile key visuals: re-aim the crop at the subject, not the frame centre */
/* NOTE: the image itself stays an inline background-image. A relative url() inside a
   custom property resolves against the STYLESHEET, not the document, so --hpi:url(assets/x.jpg)
   would 404 as /JES/css/assets/x.jpg. Where a page needs a different photo on mobile it adds
   a second .hero-photo.hp-mob layer instead. */
.hp-mob{display:none}
@media(max-width:820px){
  .hero-photo{background-position:var(--hp-m,var(--hp,50% 50%))}
  .hp-desk{display:none}
  .hp-mob{display:block}
}

/* ---------------- diagram zoom (mobile only) ---------------- */
/* The operating-model diagram is 1760×730 — inline on a phone its labels land
   around 2.5px. This opens it full screen where it can be panned and zoomed. */
.fig-zoom{display:none}
@media(max-width:820px){
  .fig-zoom{
    display:inline-flex;align-items:center;gap:.65rem;
    margin-top:1.1rem;padding:.8rem 1.15rem;
    background:none;border:1px solid var(--line-dark);border-radius:0;
    color:var(--paper);font-family:inherit;
    font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .fig-zoom:active{background:rgba(255,255,255,.06)}
  .fig-zoom svg{width:16px;height:16px;flex-shrink:0;stroke:var(--accent-dark);fill:none;stroke-width:1.7}
}
#dz{position:fixed;inset:0;z-index:9999;background:var(--ink);display:none}
#dz.on{display:block}
.dz-bar{
  position:absolute;top:0;left:0;right:0;height:56px;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 .5rem 0 1.15rem;
  background:var(--ink);border-bottom:1px solid var(--line-dark-soft);
}
.dz-bar b{
  font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-dark);
}
.dz-tools{display:flex;align-items:center;gap:.25rem}
.dz-tools button{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--paper);cursor:pointer;font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.dz-tools button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.dz-tools button:disabled{opacity:.3}
.dz-tools .dz-x{border-left:1px solid var(--line-dark-soft);margin-left:.35rem}
.dz-scroll{
  position:absolute;top:56px;right:0;bottom:0;left:0;
  overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  display:grid;place-items:center;place-items:safe center;
}
/* Sizes are viewport-relative, NOT percentages: a % height inside the
   auto-sized scroll track resolves cyclically and the steps compound. */
#dz{--dzh:calc(100vh - 56px)}
@supports (height:100dvh){#dz{--dzh:calc(100dvh - 56px)}}
.dz-scroll img{display:block;width:auto;max-width:100%;height:auto;max-height:var(--dzh)}
/* 0 = whole diagram on screen, 1 = fills the screen height, 2-3 = closer inspection */
#dz[data-z="1"] .dz-scroll img,
#dz[data-z="2"] .dz-scroll img,
#dz[data-z="3"] .dz-scroll img{width:auto;max-width:none;max-height:none}
#dz[data-z="1"] .dz-scroll img{height:var(--dzh)}
#dz[data-z="2"] .dz-scroll img{height:calc(var(--dzh) * 1.6)}
#dz[data-z="3"] .dz-scroll img{height:calc(var(--dzh) * 2.4)}
.dz-hint{
  position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:.9rem 1.15rem 1.1rem;text-align:center;
  font-size:.68rem;letter-spacing:.06em;color:var(--muted-dark);
  background:linear-gradient(to top,var(--ink),transparent);
  transition:opacity .4s ease;
}
#dz.moved .dz-hint{opacity:0}
html.dz-open,html.dz-open body{overflow:hidden}

/* ============================================================
   V3 feedback round — mobile nav language switch + hero scale
   ============================================================ */

/* ---- language switch sits in the bar, not inside the burger panel.
   .nav-links goes position:fixed below 960px, so the button is reordered
   around the burger rather than following DOM order. ---- */
@media(max-width:960px){
  .nav-inner{gap:1.15rem}
  .lang-btn{order:1;margin-left:auto;padding:.45rem .1rem;font-size:.85rem}
  .nav-burger{order:2;margin-left:0}
}

/* ---- hero on phones: the clamp floor (2.7rem) ignored viewport width, and
   the bottom-anchored copy landed straight on the subjects' faces ---- */
@media(max-width:640px){
  .display{font-size:clamp(1.9rem,8vw,2.6rem)}
  .hero.short .display{font-size:clamp(1.75rem,7.2vw,2.3rem)}
  .hero{padding-top:118px}
  .hero-meta{font-size:.62rem;letter-spacing:.2em;margin-bottom:1rem}
  .hero-foot{margin-top:1.25rem;gap:1.15rem}
  .hero-foot .lede{font-size:.95rem;line-height:1.58}

  /* background-size:cover on a landscape photo in a portrait frame leaves no
     vertical slack, so the subject always sits mid-frame. The only way to keep
     faces clear of the copy is to lengthen the hero and push the copy down. */
  .hero.short,.hero.short.compact{min-height:92svh}

  /* the 75deg scrim washes out nearly the whole frame at phone widths —
     vertical-only keeps the photo readable up top, copy legible at the base */
  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(8,10,14,.24) 0%,
      rgba(8,10,14,.12) 24%,
      rgba(8,10,14,.36) 46%,
      rgba(8,10,14,.76) 65%,
      rgba(8,10,14,.93) 83%,
      rgba(8,10,14,.97) 100%);
  }
}