/* Motion & Gain — shared stylesheet */
:root{
  --ink:#0B0B12;--ink-2:#141420;--paper:#FFFFFF;--mist:#F5F4F2;
  --line:rgba(11,11,18,.10);--muted:#5C5A63;
  --accent:#FF4A1C;--accent-2:#FF8A2B;
  --grad:linear-gradient(120deg,#FFB13D 0%,#FF6A2C 48%,#FF3D2E 100%);
  --disp:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img,svg{display:block}
h1,h2,h3,h4{font-family:var(--disp)}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--accent);font-family:var(--sans)}
/* The transparent border is load-bearing: without it a ghost button is 3px
   taller than a solid one and every mixed button row sits off-baseline. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:15px;line-height:1.2;padding:15px 26px;border-radius:100px;transition:.25s;cursor:pointer;border:1.5px solid transparent;font-family:var(--sans);text-align:center;white-space:nowrap}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--accent);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.3)}
.btn-ghost.on-dark:hover{border-color:#fff}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--ink);transform:translateY(-2px)}

/* HEADER — v2 (logo lockup + grouped language dropdown, fully responsive) */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);transition:background .25s,box-shadow .25s,border-color .25s}
header.stuck{background:rgba(255,255,255,.95);box-shadow:0 8px 28px rgba(11,11,18,.07)}
nav{display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,2vw,30px);height:clamp(72px,7.6vw,96px);transition:height .25s}
header.stuck nav{height:clamp(64px,6.2vw,78px)}

/* brand lockup */
.brand{display:flex;align-items:center;flex:none;line-height:0;border-radius:6px}
.brand img{height:clamp(36px,4.03vw,52px);width:auto;max-width:100%;display:block;transition:height .25s}
header.stuck .brand img{height:clamp(34px,3.4vw,44px)}
.brand:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

/* primary nav */
.navlinks{display:flex;align-items:center;gap:clamp(14px,1.9vw,26px);font-size:clamp(14px,1.05vw,15px);font-weight:500;white-space:nowrap}
.navlinks a{position:relative;color:#2A2A38;padding:6px 0;transition:color .2s}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--grad);border-radius:2px;transition:right .25s}
.navlinks a:hover,.navlinks a.active,.navlinks a[aria-current="page"]{color:var(--ink)}
.navlinks a:hover::after,.navlinks a.active::after,.navlinks a[aria-current="page"]::after{right:0}
.navlinks a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.navr{display:flex;align-items:center;gap:clamp(8px,1vw,14px);flex:none}

/* language dropdown (groups all locales into one control) */
.langsel{position:relative;flex:none}
.langbtn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:100px;background:transparent;color:#2A2A38;font-family:var(--sans);font-size:13px;font-weight:600;line-height:1;cursor:pointer;transition:.2s}
.langbtn:hover{border-color:rgba(11,11,18,.3);background:var(--mist)}
.langbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.langbtn[aria-expanded="true"]{border-color:rgba(11,11,18,.3);background:var(--mist)}
.langbtn .globe{width:16px;height:16px;flex:none;opacity:.7}
.langbtn .chev{width:10px;height:10px;flex:none;opacity:.5;transition:transform .2s}
.langbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.langmenu{position:absolute;top:calc(100% + 10px);right:0;min-width:180px;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 46px rgba(11,11,18,.15);z-index:80}
.langmenu[hidden]{display:none}
.langmenu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:14px;font-weight:500;color:#2A2A38;transition:.15s}
.langmenu a:hover,.langmenu a:focus-visible{background:var(--mist);color:var(--ink);outline:none}
.langmenu .code{min-width:22px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.langmenu a[aria-current="true"]{background:var(--ink);color:#fff}
.langmenu a[aria-current="true"] .code{color:rgba(255,255,255,.6)}
.navcta{white-space:nowrap;padding:13px 22px;font-size:14.5px}

/* hamburger */
.navtoggle{display:none;background:none;border:none;cursor:pointer;padding:9px;flex-direction:column;gap:5px;border-radius:8px}
.navtoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.navtoggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}

@media(max-width:1220px){.navlinks{gap:16px;font-size:14px}.navcta{padding:12px 18px}}
@media(max-width:1100px){.navlinks{display:none}.navtoggle{display:flex}}
@media(max-width:700px){.navcta{display:none}}
@media(max-width:430px){.langbtn .lc{display:none}.langbtn{padding:0 8px}header .wrap{padding:0 14px}nav{gap:10px}.navr{gap:6px}}
@media(max-width:560px){header .wrap{padding:0 18px}}
/* mobile / tablet brand +30% */
@media(max-width:1100px){
  .brand img,header.stuck .brand img{height:47px}
  nav{height:76px}header.stuck nav{height:68px}
}
@media(max-width:430px){.brand img,header.stuck .brand img{height:44px}}
@media(max-width:360px){.brand img,header.stuck .brand img{height:42px}}
@media(max-width:340px){.brand img,header.stuck .brand img{height:36px}}
@media(prefers-reduced-motion:reduce){header,nav,.brand img,.navlinks a::after,.langbtn .chev{transition:none}}

/* mobile drawer */
.mobilemenu{position:fixed;inset:0;z-index:70;background:var(--ink);color:#fff;transform:translateX(100%);transition:.3s;display:flex;flex-direction:column;padding:24px 32px;overflow-y:auto}
.mobilemenu.open{transform:translateX(0)}
.mobilemenu .mtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.mobilemenu .mbrand img{height:55px;width:auto;display:block}
.mobilemenu .mclose{background:none;border:none;color:#fff;font-size:30px;cursor:pointer;line-height:1}
.mobilemenu a.mlink{font-family:var(--disp);font-size:26px;font-weight:600;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.mobilemenu a.mlink:hover,.mobilemenu a.mlink[aria-current="page"]{color:var(--accent)}
.mobilemenu .mlang{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;font-weight:600;color:#A9A7B8}
.mobilemenu .mlang a{padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.14)}
.mobilemenu .mlang a.on{color:#fff;background:rgba(255,255,255,.1)}
.mobilemenu .btn{margin-top:28px;align-self:flex-start}

/* legacy brand lock (still used by the footer) */
.brandlock{display:flex;align-items:center;gap:16px;flex:none}
.brandlock .bt{display:inline-flex;flex-direction:column;line-height:1;white-space:nowrap}
.brandlock .bn{font-family:var(--disp);font-weight:700;font-size:34px;letter-spacing:-.01em;color:var(--ink)}
.lang{display:flex;gap:2px;font-size:13px;font-weight:600;color:var(--muted)}
.lang a{padding:5px 8px;border-radius:6px}
.lang a.on{background:var(--ink);color:#fff}
.lang a:hover{color:var(--ink)}

/* HERO */
.hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:96px 0 108px}
.hero.compact{padding:80px 0 88px}
.hero .blob{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5}
.hero .b1{width:520px;height:520px;background:var(--accent);top:-170px;right:-120px}
.hero .b2{width:440px;height:440px;background:var(--accent-2);bottom:-190px;left:-120px;opacity:.42}
.hero .gl{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(circle at 72% 22%,#000,transparent 70%);mask-image:radial-gradient(circle at 72% 22%,#000,transparent 70%)}
.hero .wrap{position:relative;z-index:2}
.hero .gl{display:none}
.hero canvas.flow{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.66}
@keyframes blobdrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(46px,34px) scale(1.09)}}
@keyframes blobdrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-52px,-22px) scale(1.11)}}
.hero:not(.compact) .b1{animation:blobdrift1 19s ease-in-out infinite}
.hero:not(.compact) .b2{animation:blobdrift2 24s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.hero:not(.compact) .b1,.hero:not(.compact) .b2{animation:none}}
.crumb{font-size:13px;color:#A9A7B8;margin-bottom:20px}
.crumb a:hover{color:#fff}
.hero-kick{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.hero-kick .loc{font-size:13px;color:#9A98A8;letter-spacing:.02em}
.hero h1{font-size:clamp(38px,6vw,78px);line-height:1.03;letter-spacing:-.02em;font-weight:700;max-width:17ch;margin-top:6px}
.hero.compact h1{font-size:clamp(34px,5vw,60px);max-width:18ch;margin-top:14px}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{margin-top:26px;font-size:clamp(17px,2vw,21px);color:#C9C7D2;max-width:58ch;line-height:1.55}
.hero .cta{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}
.stats{border-top:1px solid rgba(255,255,255,.12);margin-top:74px;padding-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:2}
.stat .n{font-family:var(--disp);font-size:clamp(30px,4vw,46px);font-weight:700;letter-spacing:-.02em}
.stat .n span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{color:#A9A7B8;font-size:14px;margin-top:6px;max-width:24ch}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr);gap:32px 20px}}

/* MARQUEE */
.marquee{background:var(--mist);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden}
.marquee .row{display:flex;gap:56px;align-items:center;white-space:nowrap;animation:scroll 28s linear infinite;font-weight:600;color:#8A8896;font-size:15px}
.marquee .row span{display:inline-flex;gap:56px}
.marquee .row b{color:var(--ink);font-weight:700}
@keyframes scroll{to{transform:translateX(-50%)}}

/* SECTION SHELL */
section.blk{padding:104px 0}
section.blk.tight{padding:92px 0}
.shead{max-width:680px;margin-bottom:52px}
.shead h2{font-size:clamp(30px,4vw,50px);letter-spacing:-.02em;line-height:1.07;font-weight:700;margin-top:16px}
.shead p{color:var(--muted);font-size:18px;margin-top:18px;line-height:1.6}

/* SERVICE CARDS (home) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border:1px solid var(--line);border-radius:20px;padding:34px 30px 30px;transition:.28s;background:#fff;position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(11,11,18,.26);border-color:transparent}
.card .ic{width:52px;height:52px;border-radius:13px;background:var(--mist);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:22px;transition:.28s}
.card:hover .ic{background:var(--grad)}
.card h3{font-size:22px;letter-spacing:-.01em;font-weight:600;margin-bottom:12px}
.card p{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:18px}
.card ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.card li{font-size:14px;font-weight:500;display:flex;gap:9px;align-items:flex-start}
.card li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:7px;flex:none}
.card .ai{margin-top:16px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.cards.five{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.cards.five{grid-template-columns:1fr}}
.card .pnum{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--accent);letter-spacing:.06em;margin-bottom:8px}
.enabler-strip{margin-top:22px;border-radius:20px;padding:28px 32px;background:var(--ink);color:#fff;display:flex;gap:24px;align-items:center;flex-wrap:wrap;position:relative;overflow:hidden}
.enabler-strip .eb{position:absolute;width:360px;height:360px;border-radius:50%;filter:blur(70px);opacity:.4;background:var(--accent);top:-160px;right:-60px}
.enabler-strip .lbl{position:relative;font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.01em}
.enabler-strip .lbl span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.enabler-strip p{position:relative;color:#C9C7D2;font-size:15px;flex:1;min-width:280px;line-height:1.6;margin:0}
/* Commercial value chain flow */
.vchain{margin-bottom:44px}
.vtrack{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;position:relative}
.vtrack::before{content:"";position:absolute;left:8%;right:8%;top:28px;height:3px;transform:translateY(-50%);background:var(--grad);border-radius:3px;opacity:.55;z-index:0}
.vstage{position:relative;z-index:1;text-align:center;padding:0 4px}
.vstage .num{width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--accent);color:var(--ink);font-family:var(--disp);font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;transition:.25s}
.vstage:hover .num{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-3px)}
.vstage .st{font-family:var(--disp);font-weight:600;font-size:14.5px;line-height:1.22;margin-bottom:6px}
.vstage .sd{font-size:12px;color:var(--muted);line-height:1.4}
@media(max-width:900px){.vtrack{grid-template-columns:1fr 1fr 1fr;gap:24px 14px}.vtrack::before{display:none}}
@media(max-width:520px){.vtrack{grid-template-columns:1fr 1fr}}

/* EXPERTISE domains */
.exp{background:var(--mist)}
.expwrap{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}
.exp .shead{margin-bottom:0}
.domains{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.domain{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px;transition:.25s}
.domain:hover{transform:translateY(-4px);border-color:var(--accent)}
.domain .ic{width:46px;height:46px;border-radius:12px;background:var(--mist);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.domain .dn,.domain h3{font-family:var(--disp);font-weight:600;font-size:17px;margin-bottom:6px}
.domain .dd,.domain p{font-size:13.5px;color:var(--muted);line-height:1.55}
@media(max-width:900px){.expwrap{grid-template-columns:1fr;gap:36px}.domains{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.domains{grid-template-columns:1fr}}

/* CASE STUDIES dark (home) */
.cases{background:var(--ink);color:#fff}
.cases .shead h2{color:#fff}
.cases .shead p{color:#B4B2C4}
.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ccard{border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:34px;transition:.28s;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0))}
.ccard:hover{border-color:var(--accent);transform:translateY(-5px)}
.ccard .tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ccard .metric{font-family:var(--disp);font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;margin:16px 0 6px}
.ccard h4{font-size:18px;font-weight:600;color:#E9E8F2;margin-bottom:10px;line-height:1.35}
.ccard p{color:#ABA9BA;font-size:14.5px;line-height:1.6}
.cases .foot{margin-top:34px;color:#8A8896;font-size:15px}
.cases .foot a{color:#fff;border-bottom:1px solid var(--accent);padding-bottom:2px}
@media(max-width:820px){.cgrid{grid-template-columns:1fr}}

/* APPROACH steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.step{padding:30px 24px;border-top:2px solid var(--ink);position:relative}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--disp);font-weight:700;font-size:15px;color:var(--accent);letter-spacing:.05em}
.step h4{font-size:19px;font-weight:600;margin:14px 0 10px}
.step p{color:var(--muted);font-size:14.5px;line-height:1.6}
@media(max-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}

/* CTA banner */
.cta-banner{position:relative;overflow:hidden;border-radius:28px;background:var(--ink);color:#fff;padding:72px 60px;text-align:center}
.cta-banner .blob{position:absolute;width:460px;height:460px;border-radius:50%;filter:blur(72px);opacity:.46}
.cta-banner .cb1{background:var(--accent);top:-200px;left:-80px}
.cta-banner .cb2{background:var(--accent-2);bottom:-220px;right:-60px}
.cta-banner h2{position:relative;font-size:clamp(28px,4vw,46px);font-weight:700;letter-spacing:-.02em;line-height:1.08;max-width:22ch;margin:0 auto}
.cta-banner p{position:relative;color:#C9C7D2;margin:20px auto 34px;max-width:54ch;font-size:18px}
.cta-banner .btn{position:relative}

/* FOOTER */
footer{background:var(--ink-2);color:#C9C7D2;padding:72px 0 34px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
footer h5{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;font-weight:700}
footer ul{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:15px}
footer a:hover{color:#fff}
footer .brandlock{margin-bottom:16px}
footer .brandlock .bn{color:#fff}
footer .brandlock .bs{color:var(--accent-2)}
footer .desc{font-size:15px;line-height:1.6;max-width:34ch}
.fbot{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:13.5px;color:#8A8896;flex-wrap:wrap;gap:12px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}

/* SERVICES page rows */
.srow{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.srow:nth-child(even) .txt{order:2}
.srow .art{border-radius:20px;height:280px;background:var(--ink);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:26px}
.srow .art .b{position:absolute;border-radius:50%;filter:blur(60px)}
.srow .art .n{position:relative;font-family:var(--disp);font-weight:700;color:#fff;font-size:20px}
.srow .art .ico{position:absolute;top:22px;left:24px;font-size:30px}
.srow h3{font-size:26px;font-weight:700;letter-spacing:-.01em;margin-bottom:12px}
.srow p{color:var(--muted);font-size:15.5px;line-height:1.65;margin-bottom:18px}
.srow ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.srow li{font-size:14px;font-weight:500;display:flex;gap:8px;align-items:flex-start}
.srow li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:7px;flex:none}
.srow .ai{margin-top:16px;font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent)}
@media(max-width:860px){.srow{grid-template-columns:1fr;gap:24px}.srow:nth-child(even) .txt{order:0}.srow ul{grid-template-columns:1fr}}
.aicall{background:var(--ink);color:#fff;border-radius:26px;padding:56px;position:relative;overflow:hidden;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.aicall .blob{position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(72px);opacity:.4}
.aicall .cb1{background:var(--accent);top:-180px;left:-60px}
.aicall .cb2{background:var(--accent-2);bottom:-200px;right:-40px}
.aicall h3{position:relative;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.12}
.aicall p{position:relative;color:#C9C7D2;margin-top:14px;font-size:16px;line-height:1.6}
.aicall .r{position:relative;text-align:right}
@media(max-width:860px){.aicall{grid-template-columns:1fr;padding:40px;text-align:left}.aicall .r{text-align:left}}
.book{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bcard{border:1px solid var(--line);border-radius:18px;padding:28px;transition:.25s}
.bcard:hover{transform:translateY(-5px);box-shadow:0 20px 44px -22px rgba(11,11,18,.22)}
.bcard .t{font-family:var(--disp);font-weight:700;font-size:19px;margin-bottom:6px}
.bcard .d{color:var(--muted);font-size:14px;margin-bottom:16px}
.bcard .dur{font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
@media(max-width:820px){.book{grid-template-columns:1fr}}

/* WORK page */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.filters .f{font-size:13px;font-weight:600;padding:9px 16px;border-radius:100px;border:1px solid rgba(255,255,255,.22);color:#D8D6E4;cursor:pointer;transition:.2s}
.filters .f.on,.filters .f:hover{background:#fff;color:var(--ink);border-color:#fff}
.wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.wcase{border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:.28s;background:#fff;display:flex;flex-direction:column}
.wcase:hover{transform:translateY(-6px);box-shadow:0 26px 54px -26px rgba(11,11,18,.26)}
.wcase .top{background:var(--ink);color:#fff;padding:30px 30px 26px;position:relative;overflow:hidden}
.wcase .top .b{position:absolute;width:220px;height:220px;border-radius:50%;filter:blur(60px);top:-90px;right:-70px;opacity:.5}
.wcase .tag{position:relative;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.wcase .metric{position:relative;font-family:var(--disp);font-size:clamp(26px,3.2vw,36px);font-weight:700;letter-spacing:-.02em;margin-top:12px}
.wcase .bottom{padding:26px 30px 30px}
.wcase h3{font-size:20px;font-weight:700;margin-bottom:10px;line-height:1.25}
.wcase p{color:var(--muted);font-size:14.5px;line-height:1.6}
.wcase .more{margin-top:16px;font-size:13.5px;font-weight:700;color:var(--accent)}
@media(max-width:820px){.wgrid{grid-template-columns:1fr}}
.strip{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.statgrid .n{font-family:var(--disp);font-size:clamp(28px,3.4vw,42px);font-weight:700;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.statgrid .l{color:var(--muted);font-size:14px;margin-top:6px;max-width:24ch}
@media(max-width:760px){.statgrid{grid-template-columns:repeat(2,1fr);gap:30px 20px}}

/* AI page: split + corridors */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split .big{font-family:var(--disp);font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.split .big b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.split p{color:var(--muted);font-size:16px;line-height:1.7;margin-top:18px}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:28px}}
.vc{background:var(--ink);color:#fff}
.vc .shead h2{color:#fff}.vc .shead p{color:#B4B2C4}
.draftbar{display:inline-flex;align-items:center;gap:8px;background:rgba(255,74,28,.14);border:1px solid rgba(255,74,28,.4);color:#FFC7A8;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:100px}
.corridor{margin-bottom:22px}
.corr-head{display:flex;align-items:center;gap:12px;padding:15px 22px;border-radius:14px;font-family:var(--disp);font-size:16px;font-weight:600;color:#fff;margin-bottom:12px;border:1px solid rgba(255,255,255,.14);flex-wrap:wrap}
.corr-head .kicker{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.85}
.corr-head.c1{background:linear-gradient(90deg,rgba(255,74,28,.24),rgba(255,74,28,.04))}
.corr-head.c2{background:linear-gradient(90deg,rgba(255,138,43,.24),rgba(255,138,43,.04))}
.pillars{display:grid;gap:12px}
.pillars.p1{grid-template-columns:2fr 2fr 3fr}
.pillars.p2{grid-template-columns:3fr 2fr 1.35fr 1.35fr}
.pillar{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:13px}
.pillar .ph{font-family:var(--sans);font-size:12px;font-weight:700;color:#fff;margin-bottom:11px;min-height:30px;display:flex;align-items:center;line-height:1.25}
.objs{display:grid;gap:8px}
.obj{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:11px 12px;transition:.25s}
.obj:hover{border-color:var(--accent);transform:translateY(-3px)}
.obj .on{font-family:var(--disp);font-size:11px;font-weight:700;color:var(--accent)}
.obj .ot{font-size:12.5px;color:#EDECF2;font-weight:600;line-height:1.3;margin:3px 0 6px}
.obj .oai{font-size:11px;color:#A9A7B8;line-height:1.4}
.obj .oai b{color:var(--accent-2);font-weight:700}
@media(max-width:980px){.pillars.p1,.pillars.p2{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pillars.p1,.pillars.p2{grid-template-columns:1fr}}
.vcaxis{display:flex;align-items:center;gap:14px;margin:26px 0 4px;color:#8A8896;font-size:13px}
.vcaxis .bar{flex:1;height:2px;background:linear-gradient(90deg,rgba(255,138,43,.25),var(--accent));border-radius:2px}
.enablers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.enabler{border:1px dashed rgba(255,255,255,.2);border-radius:14px;padding:16px 18px}
.enabler .en{font-family:var(--disp);font-weight:600;font-size:14px;margin-bottom:4px}
.enabler .ed{font-size:12.5px;color:#A9A7B8;line-height:1.5}
@media(max-width:640px){.enablers{grid-template-columns:1fr}}
.ocards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ocard{border:1px solid var(--line);border-radius:20px;padding:32px 28px;transition:.28s;background:#fff}
.ocard:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(11,11,18,.22)}
.ocard .m{font-family:var(--disp);font-size:34px;font-weight:700;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ocard h3{font-size:18px;font-weight:600;margin:8px 0 8px}
.ocard p{color:var(--muted);font-size:14.5px;line-height:1.6}
@media(max-width:860px){.ocards{grid-template-columns:1fr}}

/* WHY (expertise) */
.lead2{max-width:820px;font-size:clamp(20px,2.4vw,30px);font-family:var(--disp);font-weight:600;letter-spacing:-.01em;line-height:1.32}
.lead2 b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.why{background:var(--ink);color:#fff}
.why .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.why .shead h2{color:#fff}.why .shead p{color:#B4B2C4}
.whyc{border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:30px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0))}
.whyc .n{font-family:var(--disp);font-size:15px;font-weight:700;color:var(--accent);letter-spacing:.05em}
.whyc h3{font-size:19px;font-weight:700;margin:10px 0 8px}
.whyc p{color:#ABA9BA;font-size:14.5px;line-height:1.6}
@media(max-width:820px){.why .grid3{grid-template-columns:1fr}}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.val{border-top:2px solid var(--ink);padding:22px 18px}
.val h4{font-size:17px;font-weight:700;margin-bottom:8px}
.val p{color:var(--muted);font-size:13.5px;line-height:1.55}
@media(max-width:820px){.values{grid-template-columns:1fr 1fr}}

/* CONTACT */
.cwrap{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
@media(max-width:900px){.cwrap{grid-template-columns:1fr;gap:40px}}
.info h2{font-size:30px;letter-spacing:-.02em;margin-bottom:22px}
.infoblock{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.infoblock .ic{width:42px;height:42px;border-radius:11px;background:var(--mist);display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}
.infoblock .k{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700;margin-bottom:4px}
.infoblock .v{font-size:15.5px;line-height:1.55}
.infoblock a:hover{color:var(--accent)}
.socials{display:flex;gap:12px;margin-top:24px}
.socials a{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;transition:.2s}
.socials a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
form.cform{background:var(--mist);border:1px solid var(--line);border-radius:24px;padding:36px}
form.cform h3{font-size:22px;margin-bottom:6px}
form.cform .sub{color:var(--muted);font-size:14.5px;margin-bottom:24px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:12px;font-family:var(--sans);font-size:15px;background:#fff;transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,74,28,.12)}
.field textarea{min-height:120px;resize:vertical}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
.map{margin-top:8px;border-radius:24px;overflow:hidden;border:1px solid var(--line);height:340px;position:relative;background:linear-gradient(135deg,#e9e9ef,#f5f4f2)}
.map iframe{width:100%;height:100%;border:0;display:block}
.formnote{font-size:13px;color:var(--muted);margin-top:12px}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.faq summary{font-family:var(--disp);font-weight:600;font-size:16px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{color:var(--accent)}
.faq p{color:var(--muted);font-size:14.5px;line-height:1.6;margin-top:12px}
@media(max-width:760px){.faq{grid-template-columns:1fr}}

.note{background:#FFF4E0;border:1px dashed #E0A94A;color:#7A5300;font-size:12px;padding:2px 7px;border-radius:6px;font-weight:600;display:inline-block}

/* ==========================================================================
   SUBSCRIPTION SECTION (English only)
   subscribe.html · confirm.html · preferences.html · admin.html
   ========================================================================== */

.subwrap{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
@media(max-width:960px){.subwrap{grid-template-columns:1fr;gap:40px}}

/* value column */
.subvalue h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.02em;line-height:1.12;margin-bottom:18px}
.subvalue .vlead{color:var(--muted);font-size:16.5px;line-height:1.7;margin-bottom:30px;max-width:46ch}
.streamlist{display:flex;flex-direction:column;gap:14px}
.stream{display:flex;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff;transition:.25s}
.stream:hover{border-color:var(--accent);transform:translateY(-3px)}
.stream .sic{width:46px;height:46px;border-radius:12px;background:var(--mist);display:flex;align-items:center;justify-content:center;font-size:21px;flex:none}
.stream .stt{font-family:var(--disp);font-weight:600;font-size:17px;margin-bottom:5px}
.stream .std{font-size:14px;color:var(--muted);line-height:1.6}
.stream .cadence{display:inline-block;margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.subtrust{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.subtrust span{font-size:12.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:7px 14px}

/* card shell shared by all subscription panels */
.subcard{background:var(--mist);border:1px solid var(--line);border-radius:24px;padding:36px;position:relative}
@media(max-width:560px){.subcard{padding:26px 22px}}
.subcard h3{font-size:22px;letter-spacing:-.01em;margin-bottom:6px}
.subcard .sub{color:var(--muted);font-size:14.5px;margin-bottom:24px;line-height:1.6}

/* two-step progress */
.steps2{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.steps2 .s{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--muted)}
.steps2 .s .dot{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted);flex:none;transition:.25s}
.steps2 .s.on{color:var(--ink)}
.steps2 .s.on .dot{background:var(--ink);border-color:var(--ink);color:#fff}
.steps2 .s.done .dot{background:var(--accent);border-color:var(--accent);color:#fff}
.steps2 .bar{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.steps2 .bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .35s ease}
@media(max-width:480px){.steps2 .s span.lbl{display:none}}

/* required marker + errors */
.field .req{color:var(--accent);margin-left:2px}
.field .opt{color:var(--muted);font-weight:500;margin-left:4px;font-size:12px}
.field .err{display:none;font-size:12.5px;color:#C62A12;margin-top:6px;font-weight:500}
.field.bad input{border-color:#C62A12;background:#FFF7F5}
.field.bad .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.formerr{display:none;background:#FFF1ED;border:1px solid #F5C2B4;color:#8A2A12;font-size:13.5px;line-height:1.55;border-radius:12px;padding:12px 14px;margin-bottom:18px}
.formerr.show{display:block}
.formok{background:#EEF7EF;border:1px solid #BFE0C4;color:#1F5B2A;font-size:13.5px;line-height:1.55;border-radius:12px;padding:12px 14px;margin-bottom:18px}

/* preference option cards (step 2) */
.opts{display:flex;flex-direction:column;gap:14px;margin-bottom:8px}
.opt-card{position:relative;display:flex;gap:15px;padding:20px;border:1.5px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;transition:.22s}
.opt-card:hover{border-color:rgba(11,11,18,.3)}
.opt-card:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.opt-card input{position:absolute;opacity:0;width:1px;height:1px}
.opt-card .box{width:24px;height:24px;border-radius:8px;border:1.5px solid var(--line);background:#fff;flex:none;display:flex;align-items:center;justify-content:center;transition:.22s;margin-top:2px}
.opt-card .box svg{width:14px;height:14px;stroke:#fff;stroke-width:3;fill:none;opacity:0;transition:.18s}
.opt-card .ot{font-family:var(--disp);font-weight:600;font-size:16.5px;margin-bottom:5px;line-height:1.3}
.opt-card .od{font-size:13.5px;color:var(--muted);line-height:1.6}
.opt-card .oc{display:inline-block;margin-top:9px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.opt-card input:checked ~ .oi .box{background:var(--accent);border-color:var(--accent)}
.opt-card input:checked ~ .oi .box svg{opacity:1}
.opt-card.on{border-color:var(--accent);background:#FFFAF8}
.opt-card .oi{display:flex;gap:15px}

/* result / success panel */
.result{text-align:center;padding:14px 0 4px}
.result .rmark{width:64px;height:64px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.result .rmark svg{width:28px;height:28px;stroke:#fff;stroke-width:3;fill:none}
.result.err .rmark{background:#C62A12}
.result h3{font-size:23px;margin-bottom:10px}
.result p{color:var(--muted);font-size:15px;line-height:1.65;max-width:42ch;margin:0 auto 8px}
.result .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px 0 6px}
.result .chips b{font-size:12.5px;font-weight:600;background:#fff;border:1px solid var(--line);border-radius:100px;padding:8px 15px}
.result .ract{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* button busy state */
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none!important}
.btn .spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite;display:none}
.btn.busy .spin{display:block}
.btn.busy .lbl{opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.btn .spin{animation:none}}

.fineprint{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:16px}
.fineprint a{text-decoration:underline}

/* standalone narrow pages (confirm / preferences) */
.narrow{max-width:600px;margin:0 auto}

/* ---------------------------------------------------------------- admin */
.adminwrap{max-width:1180px;margin:0 auto}
.login{max-width:400px;margin:0 auto}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
@media(max-width:900px){.statrow{grid-template-columns:repeat(2,1fr)}}
.statbox{border:1px solid var(--line);border-radius:16px;padding:20px}
.statbox .n{font-family:var(--disp);font-size:30px;font-weight:700;letter-spacing:-.02em}
.statbox .l{font-size:12.5px;color:var(--muted);margin-top:4px}
.statbox.hl .n{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.segs{display:flex;gap:7px;flex-wrap:wrap}
.segs button{font-size:13px;font-weight:600;padding:9px 15px;border-radius:100px;border:1px solid var(--line);background:#fff;cursor:pointer;font-family:var(--sans);transition:.2s;color:#2A2A38}
.segs button:hover{border-color:rgba(11,11,18,.35)}
.segs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.toolbar .search{flex:1;min-width:200px;padding:11px 15px;border:1px solid var(--line);border-radius:12px;font-family:var(--sans);font-size:14.5px;background:#fff}
.toolbar .search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,74,28,.12)}

.tablewrap{border:1px solid var(--line);border-radius:18px;overflow:auto;background:#fff}
table.subs{width:100%;border-collapse:collapse;font-size:14px;min-width:820px}
table.subs th{text-align:left;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--mist);white-space:nowrap;position:sticky;top:0}
table.subs td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
table.subs tr:last-child td{border-bottom:none}
table.subs tr:hover td{background:#FBFAF9}
table.subs .nm{font-weight:600}
table.subs .em{color:var(--muted);font-size:13px}
.pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:100px}
.pill.active{background:#EEF7EF;color:#1F5B2A}
.pill.pending{background:#FFF4E0;color:#7A5300}
.pill.unsubscribed{background:#F1F0F2;color:#5C5A63}
.pill.bounced{background:#FFF1ED;color:#8A2A12}
.tick{display:inline-flex;width:20px;height:20px;border-radius:6px;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.tick.y{background:var(--accent);color:#fff}
.tick.n{background:#EFEEF0;color:#A9A7B8}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:13.5px;color:var(--muted);gap:12px;flex-wrap:wrap}
.pager .pbtns{display:flex;gap:8px}
.pager button{font-size:13px;font-weight:600;padding:9px 16px;border-radius:100px;border:1px solid var(--line);background:#fff;cursor:pointer;font-family:var(--sans)}
.pager button[disabled]{opacity:.45;cursor:not-allowed}
.empty{padding:56px 24px;text-align:center;color:var(--muted);font-size:15px}

/* ==========================================================================
   INSIGHTS — index, article, author pages
   ========================================================================== */

.itabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.itabs a{font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:100px;border:1px solid var(--line);color:#2A2A38;transition:.2s}
.itabs a:hover{border-color:rgba(11,11,18,.35)}
.itabs a.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:980px){.igrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.igrid{grid-template-columns:1fr}}

.icard{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;transition:.28s;display:flex}
.icard:hover{transform:translateY(-6px);box-shadow:0 26px 54px -26px rgba(11,11,18,.26);border-color:transparent}
.icard > a{display:flex;flex-direction:column;width:100%}
.icard-img{aspect-ratio:16/9;overflow:hidden;background:var(--mist)}
.icard-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.icard:hover .icard-img img{transform:scale(1.04)}
.icard-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.icard .tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.icard h3{font-size:19px;line-height:1.3;font-weight:700;letter-spacing:-.01em;margin:10px 0 10px}
.icard p{color:var(--muted);font-size:14.5px;line-height:1.6;flex:1}
.icard-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;font-size:12.5px;color:#8A8896}
.icard-meta span:not(:last-child)::after{content:"·";margin-left:12px;color:#C9C7D2}
.lockpill{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--mist);color:var(--muted);border-radius:100px;padding:4px 10px;vertical-align:middle}

/* article layout */
.hero.compact.ahead h1{max-width:22ch}
.ameta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;font-size:14px;color:#A9A7B8;align-items:center}
.ameta a{color:#fff;border-bottom:1px solid var(--accent);padding-bottom:1px}
.ameta .lockpill{background:rgba(255,255,255,.12);color:#E9E8F2}

.alayout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:56px;align-items:start}
@media(max-width:960px){.alayout{grid-template-columns:1fr;gap:40px}}

/* long-form typography — the part that decides whether people actually read */
.abody{max-width:70ch;font-size:18px;line-height:1.75;color:#23222B}
.abody > p{margin-bottom:24px}
.abody h2{font-size:clamp(24px,2.6vw,31px);line-height:1.2;letter-spacing:-.02em;margin:48px 0 16px;font-weight:700}
.abody h3{font-size:21px;line-height:1.3;margin:36px 0 12px;font-weight:600}
.abody h4{font-size:17px;margin:28px 0 10px;font-weight:700}
.abody a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.abody a:hover{color:var(--ink)}
.abody strong{font-weight:700;color:var(--ink)}
/* Was display:flex, which drops the ::marker in a couple of engines. */
.abody ul,.abody ol{margin:0 0 24px 22px}
.abody li{padding-left:4px;margin-bottom:10px}
.abody li:last-child{margin-bottom:0}
.abody blockquote{margin:34px 0;padding:4px 0 4px 26px;border-left:3px solid var(--accent);font-size:20px;line-height:1.55;font-style:italic;color:var(--ink)}
.abody hr{border:none;border-top:1px solid var(--line);margin:44px 0}
.abody img{max-width:100%;height:auto;border-radius:16px;margin:12px 0}
.abody figure{margin:34px 0}
.abody figcaption{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.5}
.abody table{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px}
.abody th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 14px;border-bottom:2px solid var(--line)}
.abody td{padding:12px 14px;border-bottom:1px solid var(--line)}
.abody code{background:var(--mist);border-radius:6px;padding:2px 6px;font-size:.9em}
.abody .pullquote{margin:40px 0;font-family:var(--disp);font-size:clamp(21px,2.4vw,27px);line-height:1.35;letter-spacing:-.01em;font-weight:600;color:var(--ink);border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);padding:26px 0}
.abody .callout{margin:32px 0;background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:24px 26px;font-size:16px;line-height:1.65}
.abody .callout p:last-child{margin-bottom:0}
.abody .stat{margin:32px 0;text-align:center;padding:28px;border-radius:18px;background:var(--ink);color:#fff}
.abody .stat .statnum{font-family:var(--disp);font-size:clamp(34px,5vw,52px);font-weight:700;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.abody .stat .statlabel{font-size:14px;color:#C9C7D2;margin-top:6px}

.ahero{margin:0 0 34px}
.ahero img{width:100%;height:auto;border-radius:20px;display:block}
.ahero figcaption{font-size:13px;color:var(--muted);margin-top:10px}

.atags{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.atags a{font-size:12.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:7px 14px;transition:.2s}
.atags a:hover{border-color:var(--ink);color:var(--ink)}

/* sidebar */
.aside{position:sticky;top:110px;display:flex;flex-direction:column;gap:20px}
@media(max-width:960px){.aside{position:static}}
.authorbox{display:flex;gap:16px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--mist)}
.apic img{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block}
.apic .initials{width:72px;height:72px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:28px;font-weight:700}
.apic.big img,.apic.big .initials{width:120px;height:120px;font-size:44px}
.authorbox .an{font-family:var(--disp);font-weight:700;font-size:16px}
.authorbox .an a:hover{color:var(--accent)}
.authorbox .ar{font-size:12.5px;color:var(--accent);font-weight:600;margin-top:2px}
.authorbox .ab{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:10px}
.authorbox .al{display:inline-block;margin-top:10px;font-size:13px;font-weight:600}
.authorbox .al:hover{color:var(--accent)}
.authorhead{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:10px}

.sharebox{border:1px solid var(--line);border-radius:18px;padding:20px 24px}
.sharebox .sb-k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:12px}
.sharebox a{display:block;font-size:14px;font-weight:600;padding:7px 0}
.sharebox a:hover{color:var(--accent)}

/* subscriber gate */
.gated-body{position:relative}
.gate{position:relative;margin-top:-70px}
.gate-fade{height:150px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 82%);pointer-events:none}
.gate-card{border:1px solid var(--line);border-radius:22px;background:var(--mist);padding:34px;text-align:center}
.gate-card h3{font-size:23px;margin:10px 0 12px;letter-spacing:-.01em}
.gate-card p{color:var(--muted);font-size:15.5px;line-height:1.65;max-width:46ch;margin:0 auto}
.gate-act{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}

/* inline subscribe CTA */
.inline-cta{margin-top:64px;border-radius:24px;background:var(--ink);color:#fff;padding:40px 44px;display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap;position:relative;overflow:hidden}
.inline-cta::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(72px);opacity:.42;background:var(--accent);top:-210px;right:-90px}
.inline-cta > *{position:relative}
.inline-cta .ic-k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent-2)}
.inline-cta h3{font-size:25px;letter-spacing:-.01em;margin:8px 0 8px;font-weight:700}
.inline-cta p{color:#C9C7D2;font-size:15px;line-height:1.6;max-width:52ch}
.related{margin-top:72px}

/* ==========================================================================
   ADMIN — tabs, editor, rich text
   ========================================================================== */

.tabbar{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:30px;flex-wrap:wrap}
.tabbar button{font-family:var(--sans);font-size:14.5px;font-weight:600;padding:13px 20px;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);cursor:pointer;transition:.2s;margin-bottom:-1px}
.tabbar button:hover{color:var(--ink)}
.tabbar button.on{color:var(--ink);border-bottom-color:var(--accent)}
.tabbar .count{display:inline-block;margin-left:7px;font-size:11.5px;background:var(--mist);border-radius:100px;padding:2px 8px;color:var(--muted)}

.listhead{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.listhead h2{font-size:24px;letter-spacing:-.01em}

table.subs td .sub2{font-size:12.5px;color:var(--muted);margin-top:3px}
.rowlink{font-weight:600;cursor:pointer}
.rowlink:hover{color:var(--accent)}

/* editor */
.edwrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
@media(max-width:1040px){.edwrap{grid-template-columns:1fr}}
.edmain{min-width:0}
.edside{display:flex;flex-direction:column;gap:18px;position:sticky;top:100px}
@media(max-width:1040px){.edside{position:static}}
.edpanel{border:1px solid var(--line);border-radius:18px;padding:22px}
.edpanel h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:16px}
.edbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.edbar .back{font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;background:none;border:none;font-family:var(--sans);padding:8px 0}
.edbar .back:hover{color:var(--ink)}
.edbar .acts{display:flex;gap:10px;flex-wrap:wrap}
.edbar .btn{padding:11px 20px;font-size:14px}

.tinput{width:100%;border:none;border-bottom:1px solid var(--line);font-family:var(--disp);font-size:30px;font-weight:700;letter-spacing:-.02em;padding:10px 0 14px;margin-bottom:14px;background:transparent}
.tinput:focus{outline:none;border-bottom-color:var(--accent)}
.tinput::placeholder{color:#C9C7D2}
.sinput{width:100%;border:none;font-size:17px;color:var(--muted);padding:6px 0 16px;background:transparent;line-height:1.5;font-family:var(--sans)}
.sinput:focus{outline:none}
.sinput::placeholder{color:#C9C7D2}

.rtebar{display:flex;gap:3px;flex-wrap:wrap;padding:9px;border:1px solid var(--line);border-radius:12px 12px 0 0;background:var(--mist);position:sticky;top:78px;z-index:20}
.rtebar button{width:34px;height:34px;border:none;background:none;border-radius:8px;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:700;color:#2A2A38;display:flex;align-items:center;justify-content:center;transition:.15s}
.rtebar button:hover{background:#fff}
.rtebar button.on{background:var(--ink);color:#fff}
.rtebar button.wide{width:auto;padding:0 11px;font-size:12px;font-weight:600}
.rtebar .sep{width:1px;background:var(--line);margin:5px 5px}
.rtebar svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.rte{border:1px solid var(--line);border-top:none;border-radius:0 0 12px 12px;padding:28px 30px;min-height:460px;font-size:17px;line-height:1.75;color:#23222B;background:#fff}
.rte:focus{outline:none;border-color:var(--accent)}
.rte:empty::before{content:attr(data-placeholder);color:#C9C7D2}
.rte > *:first-child{margin-top:0}
.rte p{margin:0 0 18px}
.rte h2{font-size:26px;line-height:1.25;letter-spacing:-.02em;margin:32px 0 12px;font-weight:700}
.rte h3{font-size:20px;margin:26px 0 10px;font-weight:600}
.rte h4{font-size:17px;margin:22px 0 8px;font-weight:700}
.rte ul,.rte ol{margin:0 0 18px 22px}
.rte li{margin-bottom:7px}
.rte blockquote{margin:24px 0;padding-left:22px;border-left:3px solid var(--accent);font-style:italic;color:var(--ink)}
.rte a{color:var(--accent);text-decoration:underline}
.rte img{max-width:100%;height:auto;border-radius:12px;margin:10px 0}
.rte hr{border:none;border-top:1px solid var(--line);margin:28px 0}
.rte .pullquote{margin:28px 0;font-family:var(--disp);font-size:22px;line-height:1.35;font-weight:600;border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);padding:20px 0}
.rte .callout{margin:24px 0;background:var(--mist);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.rte.drop{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,74,28,.12)}

.edstatus{font-size:12.5px;color:var(--muted);margin-top:12px;min-height:18px}
.edstatus.dirty{color:var(--accent);font-weight:600}

.minifield{margin-bottom:14px}
.minifield label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.minifield input,.minifield select,.minifield textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-family:var(--sans);font-size:14px;background:#fff}
.minifield input:focus,.minifield select:focus,.minifield textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,74,28,.1)}
.minifield textarea{min-height:80px;resize:vertical;line-height:1.55}
.minifield .hint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.45}
.counter{float:right;font-size:11px;color:var(--muted);font-weight:500}
.counter.over{color:#C62A12;font-weight:700}

.segbtns{display:flex;gap:6px}
.segbtns button{flex:1;font-family:var(--sans);font-size:13px;font-weight:600;padding:10px 8px;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;transition:.18s;color:#2A2A38}
.segbtns button.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.tagbox{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1px solid var(--line);border-radius:10px;background:#fff;min-height:42px;align-items:center}
.tagbox .chip{display:inline-flex;align-items:center;gap:6px;background:var(--mist);border-radius:100px;padding:5px 6px 5px 11px;font-size:12.5px;font-weight:600}
.tagbox .chip button{border:none;background:none;cursor:pointer;font-size:14px;line-height:1;color:var(--muted);padding:0 2px}
.tagbox .chip button:hover{color:#C62A12}
.tagbox input{border:none;flex:1;min-width:90px;font-family:var(--sans);font-size:13.5px;padding:5px}
.tagbox input:focus{outline:none}

.heropick{border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center;font-size:13px;color:var(--muted);cursor:pointer;transition:.2s}
.heropick:hover{border-color:var(--accent);color:var(--ink)}
.heropick img{width:100%;border-radius:10px;margin-bottom:10px}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.slugrow{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.slugrow input{flex:1}

/* modal */
.modal{position:fixed;inset:0;background:rgba(11,11,18,.55);display:flex;align-items:center;justify-content:center;padding:24px;z-index:200}
.modal[hidden]{display:none}
.modal-card{background:#fff;border-radius:20px;padding:32px;max-width:560px;width:100%;max-height:86vh;overflow:auto}
.modal-card h3{font-size:21px;margin-bottom:8px}
.modal-card p{color:var(--muted);font-size:14.5px;line-height:1.6;margin-bottom:18px}
.modal-act{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:22px}
.revlist{display:flex;flex-direction:column;gap:8px}
.revrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:13.5px}
.revrow button{font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:100px;border:1px solid var(--line);background:#fff;cursor:pointer;font-family:var(--sans)}
.revrow button:hover{border-color:var(--ink)}
.emailprev{border:1px solid var(--line);border-radius:12px;overflow:hidden;height:420px}
.emailprev iframe{width:100%;height:100%;border:0;background:#F5F4F2}

/* leaving options on the preferences page */
.leaving{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.leaving h4{font-family:var(--disp);font-size:17px;font-weight:600;margin-bottom:6px}
.leaving > p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:18px}
.leaveopt{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:18px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.leaveopt .lo-t{font-weight:600;font-size:15px;margin-bottom:5px}
.leaveopt .lo-d{font-size:13.5px;color:var(--muted);line-height:1.6;max-width:52ch}
.leaveopt .btn{padding:11px 20px;font-size:14px;white-space:nowrap;flex:none}
.btn-ghost.danger{color:#C62A12;border-color:#F5C2B4}
.btn-ghost.danger:hover{background:#C62A12;color:#fff;border-color:#C62A12}
.linkbtn{background:none;border:none;padding:0;font-family:var(--sans);font-size:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}
.linkbtn:hover{color:var(--accent)}
.erasebox{background:#FFF7F5;border:1px solid #F5C2B4;border-radius:14px;padding:20px 22px;margin:20px 0;font-size:14px;line-height:1.7}
.erasebox dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0}
.erasebox dt{color:var(--muted);font-size:13px}
.erasebox dd{margin:0;font-weight:600;word-break:break-word}
.rowact{font-family:var(--sans);font-size:12px;font-weight:600;padding:6px 12px;margin-left:6px;border-radius:100px;border:1px solid var(--line);background:#fff;cursor:pointer;color:#2A2A38;transition:.18s}
.rowact:hover{border-color:var(--ink)}
.rowact.danger{color:#C62A12;border-color:#F5C2B4}
.rowact.danger:hover{background:#C62A12;color:#fff;border-color:#C62A12}

/* ==========================================================================
   ARTICLE HEAD — split hero (headline beside image)
   A full-bleed image between the headline and the first paragraph pushed the
   opening of the piece roughly a screen and a half down. Pairing the image
   with the headline instead means the reader sees the picture and the start
   of the writing in the same viewport.
   ========================================================================== */

.aheadgrid{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:clamp(30px,4vw,58px);
  align-items:center;
}
@media(max-width:900px){.aheadgrid{grid-template-columns:1fr;gap:28px}}

.hero.compact.ahead{padding:68px 0 76px}
.hero.compact.ahead.withimg h1{
  font-size:clamp(30px,3.5vw,48px);
  max-width:17ch;
  margin-top:12px;
}
.hero.compact.ahead.withimg p.lead{
  font-size:clamp(16px,1.6vw,18.5px);
  margin-top:18px;
  max-width:44ch;
}
.hero.compact.ahead.withimg .ameta{margin-top:22px}

.aheadimg{margin:0}
.aheadimg img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:20px;
  display:block;
  box-shadow:0 34px 70px -34px rgba(0,0,0,.75);
}
.aheadimg figcaption{
  font-size:12.5px;
  color:#A9A7B8;
  margin-top:12px;
  line-height:1.5;
}
@media(max-width:900px){
  .aheadimg img{aspect-ratio:16/10}
  .hero.compact.ahead.withimg h1{max-width:20ch}
}

/* In-body images can't run away either — a tall portrait shot used to occupy
   the whole viewport on its own. */
.abody img{
  max-height:70vh;
  width:auto;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* Sidebar starts level with the first line of text rather than floating. */
.alayout{align-items:start}
.aside{padding-top:4px}

/* Reading progress — cheap, and makes a long read feel navigable. */
.readbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;pointer-events:none;background:transparent}
.readbar i{display:block;height:100%;width:0;background:var(--grad);transition:width .1s linear}
@media(prefers-reduced-motion:reduce){.readbar i{transition:none}}

/* editable status + stream toggles in the subscriber table */
.statussel{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 26px 5px 11px;border-radius:100px;
  border:1px solid transparent;cursor:pointer;appearance:none;
  background-repeat:no-repeat;background-position:right 9px center;background-size:8px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235C5A63' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  transition:.18s;
}
.statussel:hover{border-color:var(--line)}
.statussel:focus{outline:none;box-shadow:0 0 0 3px rgba(255,74,28,.16)}
.statussel:disabled{opacity:.5;cursor:wait}
.statussel.active{background-color:#EEF7EF;color:#1F5B2A}
.statussel.pending{background-color:#FFF4E0;color:#7A5300}
.statussel.unsubscribed{background-color:#F1F0F2;color:#5C5A63}
.statussel.bounced{background-color:#FFF1ED;color:#8A2A12}
.statussel option{background:#fff;color:var(--ink);font-weight:500;text-transform:none;letter-spacing:0}

button.tick{
  border:none;cursor:pointer;font-family:var(--sans);
  width:24px;height:24px;border-radius:7px;font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;transition:.18s;
}
button.tick.y{background:var(--accent);color:#fff}
button.tick.n{background:#EFEEF0;color:#A9A7B8}
button.tick:hover{transform:scale(1.12)}
button.tick:disabled{opacity:.5;cursor:wait;transform:none}
button.tick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ==========================================================================
   UX / UI PASS — alignment, affordance, accessibility
   Everything below is corrective: it fixes things that were misaligned,
   looked interactive but wasn't, or couldn't be reached from a keyboard.
   ========================================================================== */

/* --- 1. Focus is visible everywhere, not just on the few controls that
       happened to declare it. Keyboard users could previously lose the caret
       entirely on nav links, cards and footer links. -------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
/* Plain links get a softened focus ring. Zero specificity, so anything with
   its own shape (pill buttons, chips, round icons) keeps it — this rule used
   to turn every pill into a 6px rectangle on focus. */
:where(a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible){
  border-radius:6px;
}
.hero a:focus-visible,
.cases a:focus-visible,
.vc a:focus-visible,
footer a:focus-visible,
.mobilemenu a:focus-visible{outline-color:#FFB13D}

/* --- 2. Skip link — the nav is 7 items plus a language menu before any
       content; screen-reader and keyboard users needed a way past it. --- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--ink);color:#fff;padding:13px 20px;
  border-radius:0 0 12px 0;font-weight:600;font-size:14px;
}
.skip:focus{left:0}

/* --- 3. Anchor targets were landing underneath the sticky header. ----- */
[id]{scroll-margin-top:clamp(88px,10vw,116px)}

/* --- 4. Hero stat band, now five metrics. Five equal columns on desktop,
       degrading cleanly instead of leaving an orphan on its own row. --- */
.stat{display:flex;flex-direction:column}
.stats.five{grid-template-columns:repeat(5,1fr);gap:22px}
.stats.five .n{font-size:clamp(25px,2.35vw,34px);line-height:1.05}
.stats.five .l{font-size:13.5px;margin-top:8px;max-width:23ch}
@media(max-width:1100px){.stats.five{grid-template-columns:repeat(3,1fr);gap:32px 22px}}
@media(max-width:760px){.stats.five{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.stats.five{grid-template-columns:1fr;gap:26px}}

/* --- 5. Marquee: pauses on hover so a term can actually be read, and stops
       entirely for reduced-motion users. ------------------------------- */
.marquee:hover .row,
.marquee:focus-within .row{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.marquee .row{animation:none}}

/* --- 6. Card interiors align on a shared baseline instead of floating at
       whatever height their own copy happens to end. -------------------- */
.card{display:flex;flex-direction:column}
.card p:last-of-type{flex:1}
.card .ai{margin-top:auto;padding-top:16px}

.ccard{display:flex;flex-direction:column}
.ccard p{flex:1}

.ocard,.whyc,.domain,.bcard,.enabler,.step,.val{display:flex;flex-direction:column}
.ocard p,.whyc p,.bcard .d,.step p{flex:1}

/* --- 7. Value-chain "Enabled by" strip: the CTA drifted mid-row on wide
       screens. Pin it to the end and let it drop full-width when wrapped. */
.enabler-strip .btn{position:relative;margin-left:auto;flex:none}
@media(max-width:760px){.enabler-strip{gap:18px}.enabler-strip .btn{margin-left:0}}

/* --- 8. FAQ rows had no disclosure affordance at all — list-style was
       removed and nothing put back. ------------------------------------ */
.faq summary{position:relative;padding-right:36px;transition:color .2s}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";position:absolute;right:4px;top:50%;
  width:9px;height:9px;margin-top:-7px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .25s,margin-top .25s;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq details{transition:border-color .2s}
.faq details[open]{border-color:rgba(11,11,18,.22)}

/* --- 9. WORK page ---------------------------------------------------- */
/* Filter chips are buttons now, so they need button resets. */
.filters .f{
  font-family:var(--sans);background:transparent;
  line-height:1.2;appearance:none;
}
.filters .f:focus-visible{outline:2px solid #FFB13D;outline-offset:3px}

/* "Read case" was a dead <div>. It is a link now, and the whole card is the
   hit target — with the link text pinned to the bottom so the CTAs across a
   row sit on one line rather than stepping up and down with copy length. */
.wcase{position:relative}
.wcase .bottom{display:flex;flex-direction:column;flex:1}
.wcase p{flex:1}
.wcase .more{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:18px;font-size:13.5px;font-weight:700;color:var(--accent);
  align-self:flex-start;transition:gap .2s;
}
.wcase .more::after{content:"";position:absolute;inset:0;border-radius:22px}
.wcase:hover .more{gap:10px}
.wcase:focus-within{box-shadow:0 0 0 3px rgba(255,74,28,.28)}
.wcase .more:focus-visible{outline:none}
.wcase[hidden]{display:none}
.wempty{
  margin-top:26px;padding:34px 24px;text-align:center;
  border:1px dashed var(--line);border-radius:18px;
  color:var(--muted);font-size:15px;line-height:1.6;
}
.wempty a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* --- 10. AI framework: continuous 1..7 numbering across both corridors. */
.pillar .ph{display:flex;align-items:center;gap:9px;min-height:34px}
.pillar .pn{
  flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--grad);color:#fff;
  font-family:var(--disp);font-size:11.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1;
}
.pillar .pt{flex:1;min-width:0}
/* Objectives fill the card so pillar cards in a row end level. */
.pillar{display:flex;flex-direction:column}
.pillar .objs{flex:1;align-content:start}

/* --- 11. Uploaded article / challenge imagery sits at 80% opacity so it
       settles into the page instead of punching out of it. -------------- */
/* The 20% that shows through is the surface behind the image, so each context
   keeps its own backdrop: cards soften toward the light card, the article
   head settles into the dark hero. */
.icard-img{background:var(--mist)}
.icard-img img,
.aheadimg img,
.ahero img{opacity:.8}

/* --- 12. Mobile drawer was reachable by keyboard while closed — tabbing
       walked into an off-screen menu. ---------------------------------- */
.mobilemenu{visibility:hidden;transition:transform .3s,visibility .3s}
.mobilemenu.open{visibility:visible}
body.menu-open{overflow:hidden}

/* --- 13. Respect reduced-motion for the lift-on-hover treatments. ----- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:hover,.card:hover,.ccard:hover,.wcase:hover,.icard:hover,
  .ocard:hover,.domain:hover,.bcard:hover,.obj:hover,.stream:hover,
  .vstage:hover .num{transform:none}
  .icard:hover .icard-img img{transform:none}
}

/* --- 14. 404 now carries the site chrome, so its hero needs normal flow. */
.hero.notfound{min-height:0;padding:104px 0 116px}

/* Booking cards are flex columns now, so their CTA lands on a shared baseline
   across the row — but a flex child stretches by default, and a pill button
   stretched edge-to-edge is not the same button. */
.bcard > .btn{align-self:flex-start;margin-top:4px}

/* ==========================================================================
   SIGNATURE WORK — flip cards on /work
   The card is a link: a click anywhere opens the case. The back face is a
   preview, not a second destination, so it never traps a pointer or a tab.
   ========================================================================== */
.wgrid{align-items:stretch}
/* Motion timings, in one place.
   --flip-intent  a short pause before a hover turns into a flip. Without it,
                  dragging the pointer across the grid flips every card it
                  crosses, which reads as twitchy and hides the copy people
                  were actually reading.
   --flip-in      the flip itself. A card is a large surface making a 180°
                  turn, so it sits at the long end of the usual 200–500ms
                  band; anything quicker snaps rather than turns.
   --flip-out     the return, deliberately shorter — undoing something should
                  never take longer than doing it. */
.wgrid{--flip-intent:180ms;--flip-in:600ms;--flip-out:420ms;
  /* Ease-in-out, not ease-out. A card being turned has to start moving and
     then stop; an ease-out curve puts two thirds of the rotation into the
     first quarter of the time, which is what makes a flip feel snapped
     rather than turned. */
  --flip-ease:cubic-bezier(.52,.03,.32,1);--flip-ease-out:cubic-bezier(.4,0,.2,1)}

.wcase.flip{display:block;position:relative;height:100%;min-height:368px;background:transparent;border:0;border-radius:22px;overflow:visible;perspective:1600px;transition:transform .28s var(--flip-ease-out)}
/* the lift is immediate: instant feedback that the card is live, before the
   card commits to the more expensive flip */
.wcase.flip:hover{transform:translateY(-6px);box-shadow:none}
.wcase.flip:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:22px}

.flipin{position:relative;display:block;width:100%;height:100%;min-height:368px;transform-style:preserve-3d;will-change:transform;
  transition:transform var(--flip-out) var(--flip-ease-out);transition-delay:0ms}
/* hover: wait for intent, then turn */
.wcase.flip:hover .flipin{transform:rotateY(180deg);
  transition:transform var(--flip-in) var(--flip-ease);transition-delay:var(--flip-intent)}
/* a keyboard user tabbing to the card, or a tap on a touch screen, is an
   explicit request — those turn straight away */
.wcase.flip:focus-visible .flipin,.wcase.flip.flipped .flipin{transform:rotateY(180deg);
  transition:transform var(--flip-in) var(--flip-ease);transition-delay:0ms}

.wcase.flip .face{position:absolute;inset:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 18px 44px -30px rgba(11,11,18,.4)}

/* front */
.wcase.flip .face.front .top{display:block;background:var(--ink);color:#fff;padding:28px 28px 24px;position:relative;overflow:hidden}
.wcase.flip .face .b{position:absolute;display:block;width:220px;height:220px;border-radius:50%;filter:blur(60px);top:-90px;right:-70px;opacity:.5}
.wcase.flip .face .tag{position:relative;display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.wcase.flip .face .metric{position:relative;display:block;font-family:var(--disp);font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.02em;margin-top:10px;line-height:1.05}
.wcase.flip .face.front .bottom{display:flex;flex-direction:column;padding:24px 28px 26px;flex:1}
.wcase.flip .face .h3{display:block;font-family:var(--disp);font-size:20px;font-weight:700;margin-bottom:10px;line-height:1.25;letter-spacing:-.01em}
.wcase.flip .face .p{display:block;color:var(--muted);font-size:14.5px;line-height:1.6}
.wcase.flip .face.front .hintline{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.wcase.flip .face.front .fi{display:inline-block;font-size:14px;transform:translateY(-1px) rotate(0deg);transition:transform var(--flip-out) var(--flip-ease-out);transition-delay:0ms}
.wcase.flip:hover .face.front .fi{transform:translateY(-1px) rotate(180deg);transition:transform var(--flip-in) var(--flip-ease);transition-delay:var(--flip-intent)}

/* back */
.wcase.flip .face.back{transform:rotateY(180deg);background:var(--ink);color:#fff;border-color:transparent;padding:28px;justify-content:flex-start}
.wcase.flip .face.back .bk-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.wcase.flip .face.back .h3{color:#fff;font-size:19px;margin-bottom:10px}
.wcase.flip .face.back .p{color:#C9C7D2;font-size:14px}
.wcase.flip .face.back .lockpill{background:rgba(255,255,255,.12);color:#E9E8F2;margin-left:0}
.wcase.flip .face.back .pts{display:block;margin-top:14px}
.wcase.flip .face.back .pt{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:#E9E8F2;margin-bottom:7px}
.wcase.flip .face.back .pt::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:7px}
.wcase.flip .face.back .bk-cta{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:700;color:#fff;border-bottom:2px solid var(--accent);align-self:flex-start;padding-bottom:3px}

@media(max-width:820px){.wcase.flip,.flipin{min-height:400px}}
@media (prefers-reduced-motion:reduce){
  /* The pause stays — it is what stops cards changing under the pointer —
     but the turn becomes a cross-fade. */
  .flipin,.wcase.flip:hover .flipin,.wcase.flip:focus-visible .flipin,.wcase.flip.flipped .flipin{transform:none!important;transition:none}
  .wcase.flip:hover{transform:none}
  .wcase.flip .face.front .fi,.wcase.flip:hover .face.front .fi{transform:translateY(-1px);transition:none}
  .wcase.flip .face{-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity .2s}
  .wcase.flip .face.back{transform:none;opacity:0;pointer-events:none}
  .wcase.flip:hover .face.front,.wcase.flip:focus-visible .face.front,.wcase.flip.flipped .face.front{opacity:0;transition-delay:var(--flip-intent)}
  .wcase.flip:hover .face.back,.wcase.flip:focus-visible .face.back,.wcase.flip.flipped .face.back{opacity:1;transition-delay:var(--flip-intent)}
}

/* ------------------------------------------------ the dedicated case page */
.casebody .casefacts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:var(--mist);margin-bottom:34px}
.casebody .casefacts .k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.casebody .casefacts .v{font-size:15px;font-weight:600;line-height:1.4}
@media(max-width:720px){.casebody .casefacts{grid-template-columns:repeat(2,1fr)}}

.casesec{margin-bottom:34px}
.casesec h2{font-size:clamp(21px,2.4vw,26px);letter-spacing:-.015em;margin-bottom:14px}
.casebody .caseresults{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;padding:26px 24px;border-radius:18px;background:var(--ink);color:#fff;margin-bottom:34px}
.casebody .caseresults .n{font-family:var(--disp);font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.casebody .caseresults .l{color:#C9C7D2;font-size:13.5px;line-height:1.5;margin-top:6px}
.svclist{list-style:none;margin:0;padding:0}
.svclist li{font-size:13.5px;line-height:1.5;color:var(--muted);padding:6px 0;border-bottom:1px solid var(--line)}
.svclist li:last-child{border-bottom:0}
.okpill{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(80,200,120,.16);color:#2E7D4F;border-radius:100px;padding:4px 10px;vertical-align:middle}
.ameta .okpill{background:rgba(255,255,255,.14);color:#CFF3DC}
.ameta .hl{font-family:var(--disp);font-weight:700;letter-spacing:-.01em}

/* --------------------------------------- the subscription gate, on the page */
.gate-card form{max-width:460px;margin:26px auto 0;text-align:left}
.gate-card .gaterow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.gate-card .gaterow{grid-template-columns:1fr}}
.gate-card .field input{background:#fff}
.gateopts{border:0;padding:0;margin:4px 0 18px}
.gateopts legend{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.gateopts label{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;margin-bottom:9px;cursor:pointer}
.gateopts input[type=checkbox]{width:auto;margin-top:3px;accent-color:var(--accent)}
.gate-card .fineprint{text-align:center}
.gatealt{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted);display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--ink);font-weight:600;text-decoration:underline;cursor:pointer}
.linkbtn:hover{color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gate-card .formok{margin:16px 0 0;text-align:center}
.gate-card .btn.busy{opacity:.7;pointer-events:none}

/* ------------------------------------------------ console: signature work */
.paneltip{font-size:13.5px;color:var(--muted);line-height:1.6;margin:-8px 0 20px;max-width:70ch}
.paneltip a{text-decoration:underline}
.minirow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.minirow{grid-template-columns:1fr}}
.edmain .edpanel{margin-bottom:20px}
.edmain .edpanel h4{color:var(--ink);font-size:12px}
.catbox{display:flex;flex-wrap:wrap;gap:7px}
.catbox .cat{font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;font-family:var(--sans);transition:.18s}
.catbox .cat:hover{border-color:rgba(11,11,18,.3)}
.catbox .cat.on{background:var(--ink);border-color:var(--ink);color:#fff}
.resultrows{display:grid;gap:8px}
.resultrow{display:grid;grid-template-columns:110px 1fr;gap:8px}
.resultrow input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-family:var(--sans);font-size:14px;background:#fff}
.resultrow input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,74,28,.1)}
.resultrow .rv{font-weight:600}

/* ==========================================================================
   SIGNATURE WORK — card standard (v11)
   Cards created in the console now render exactly like the original six.
   1. The two faces share one grid cell instead of being absolutely placed, so
      a card grows to fit its text rather than clipping it, and every card in
      a row takes the row's height.
   2. The dark header band never shrinks. It was a flex item with
      overflow:hidden, so its minimum height was 0 and a long summary squeezed
      it to half height.
   3. Tag and metric are held to one line each; a metric too long for the card
      is set smaller inside the same line box, so the band height is identical.
   ========================================================================== */
.wcase.flip .flipin{display:grid;grid-template-columns:minmax(0,1fr)}
.wcase.flip .face{position:relative;inset:auto;grid-area:1/1;min-width:0}
.wcase.flip .face.front .top{flex:none;container-type:inline-size}
.wcase.flip .face.front .bottom{min-height:0}
.wcase.flip .face .tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcase.flip .face.front .metric{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  /* the usual size, unless the text is too long for the card: --ml is the character count
     and .56em is a generous average glyph width for Plus Jakarta Sans 700 */
  font-size:min(clamp(24px,3vw,34px),calc(100cqi / (var(--ml,12) * .56)));
  line-height:calc(clamp(24px,3vw,34px) * 1.05);
  /* overflow:hidden (needed for the ellipsis) would clip descenders — y, g, p —
     at this tight line height. Pad the box so the glyphs fit, and take the same
     amount back in the margins so the header band keeps its height. */
  padding:.16em 0;margin-top:calc(10px - .16em);margin-bottom:-.16em}
.wcase.flip .face.back .bk-top{flex:none;min-width:0}
.wcase.flip .face.back .bk-top .tag{min-width:0}
.wcase.flip .face.back .lockpill{flex:none}
.wcase.flip .face.back .bk-cta{flex:none}
/* last-resort guards; the renderer already trims to the card spec */
.wcase.flip .face .h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.wcase.flip .face.front .p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
.wcase.flip .face.back .p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}

/* ==========================================================================
   UI SHAPE PASS (v11)
   Hover and focus states follow the shape of the thing they belong to.
   ========================================================================== */

/* Commercialization — the six value-chain steps. The hover fill was the
   gradient painted on the circle itself with its border turned transparent;
   the gradient tiled into that ring and left flat, hard edges, and WebKit can
   drop the round clip while the circle lifts. The fill is now its own round
   layer that fades in over the border, so it is a clean disc at every frame. */
.vstage .num{position:relative;isolation:isolate;
  transition:transform .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
.vstage .num::before{content:"";position:absolute;inset:-2px;border-radius:50%;
  background:var(--grad);opacity:0;transition:opacity .25s ease;z-index:-1}
.vstage:hover .num{background:#fff;border-color:transparent;color:#fff;
  box-shadow:0 10px 22px -10px rgba(255,74,28,.55)}
.vstage:hover .num::before{opacity:1}

/* Touch screens: the browser's own tap flash is a rectangle, which showed as
   a square behind round and pill-shaped controls. Our :hover and :active
   states already give the feedback. */
a,button,summary,label,[role="button"],.vstage{-webkit-tap-highlight-color:transparent}

/* ==========================================================================
   CONSOLE — Journeys (email CRM)  v13
   Scoped to the admin console: every selector starts with .jx-, a console id
   or the wide modal, so nothing on the public site changes.
   ========================================================================== */
.modal-card.wide{max-width:980px}
.jx-headacts{display:flex;gap:10px;flex-wrap:wrap}
.jx-headacts .btn{padding:11px 20px;font-size:14px}

.jx-setup{display:flex;gap:16px;align-items:flex-start;background:#FFF4E0;border:1px solid #F1D39B;border-radius:16px;padding:18px 20px;margin-bottom:22px}
.jx-setup-i{flex:none;width:34px;height:34px;border-radius:50%;background:#E0A94A;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.jx-setup h4{font-size:15px;margin-bottom:4px}
.jx-setup p{font-size:13.5px;color:#5C4A20;line-height:1.55}

.jx-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}
@media(max-width:1000px){.jx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.jx-kpi{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:#fff}
.jx-kpi .n{font-family:var(--disp);font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.jx-kpi.hl{background:var(--ink);border-color:var(--ink);color:#fff}
.jx-kpi.hl .n{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.jx-kpi .l{font-size:12.5px;font-weight:600;margin-top:6px}
.jx-kpi .s{font-size:11.5px;color:var(--muted);margin-top:2px}
.jx-kpi.hl .s{color:#A9A7B8}

.jx-notice{font-size:13px;line-height:1.6;background:var(--mist);border-radius:14px;padding:12px 16px;margin-bottom:22px;color:#2A2A38}
.jx-notice code,.minifield .hint code,.jx-tokens code{font-size:11.5px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:1px 5px;word-break:break-all}

.jx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:28px}
.jx-card{position:relative;text-align:left;border:1px solid var(--line);border-radius:20px;padding:20px 20px 16px;background:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;font-family:var(--sans);overflow:hidden}
.jx-card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--grad);opacity:.9}
.jx-card:hover,.jx-card:focus-visible{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(11,11,18,.35);border-color:transparent;outline:none}
.jx-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.jx-card-steps{font-size:12px;color:var(--muted);font-weight:600}
.jx-card h3{font-size:18px;letter-spacing:-.01em;margin-bottom:6px}
.jx-card p{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:12px;min-height:39px}
.jx-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2FA84F;margin-right:6px;vertical-align:1px;box-shadow:0 0 0 0 rgba(47,168,79,.5);animation:jxpulse 2s infinite}
@keyframes jxpulse{0%{box-shadow:0 0 0 0 rgba(47,168,79,.45)}70%{box-shadow:0 0 0 7px rgba(47,168,79,0)}100%{box-shadow:0 0 0 0 rgba(47,168,79,0)}}
@media (prefers-reduced-motion:reduce){.jx-dot{animation:none}}
.jx-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 12px}
.jx-chip{font-size:11.5px;font-weight:600;background:var(--mist);border-radius:100px;padding:4px 10px;color:#2A2A38}
.jx-funnel{display:flex;height:6px;border-radius:6px;overflow:hidden;background:var(--mist);margin-bottom:12px}
.jx-funnel i{display:block;height:100%}
.jx-funnel .a{background:var(--accent)}
.jx-funnel .c{background:#2FA84F}
.jx-funnel .x{background:#C9C7D2}
.jx-card-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;border-top:1px solid var(--line);padding-top:12px}
.jx-card-stats div,.jx-title-stats div,.jx-c-stats div{display:flex;flex-direction:column}
.jx-card-stats b{font-family:var(--disp);font-size:16px}
.jx-card-stats span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.jx-new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-style:dashed;min-height:230px;color:var(--muted);text-align:center}
.jx-new::before{display:none}
.jx-new .plus{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;font-size:26px;line-height:44px;margin-bottom:6px}
.jx-new b{color:var(--ink);font-size:16px}
.jx-new span:last-child{font-size:13px}

.jx-panel{border:1px solid var(--line);border-radius:20px;padding:18px 20px}
.jx-panel-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.jx-panel-h h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.jx-feed{list-style:none;margin:0;padding:0}
.jx-feed li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.jx-feed li:first-child{border-top:0}
.jx-feed .ic,.jx-tl .ic{width:30px;height:30px;border-radius:50%;background:var(--mist);display:flex;align-items:center;justify-content:center;font-size:13px;color:#2A2A38}
.jx-feed .warm .ic,.jx-tl .warm .ic{background:#FFF1E6;color:#C8571A}
.jx-feed .hot .ic,.jx-tl .hot .ic{background:var(--accent);color:#fff}
.jx-feed .bad .ic,.jx-tl .bad .ic{background:#FFE3DC;color:#C62A12}
.jx-feed .t{min-width:0}
.jx-feed .t b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jx-feed .t span{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jx-feed .m{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.jx-feed .tag{font-size:11px;font-weight:600;border-radius:100px;padding:3px 8px;background:var(--mist)}
.jx-feed .tag.warm{background:#FFF1E6;color:#C8571A}
.jx-feed .tag.hot{background:var(--ink);color:#fff}
.jx-feed .tag.bad{background:#FFE3DC;color:#C62A12}
.jx-feed time{font-size:11.5px;color:var(--muted);min-width:70px;text-align:right}
@media(max-width:700px){.jx-feed li{grid-template-columns:30px minmax(0,1fr)}.jx-feed .m{grid-column:2;justify-content:flex-start}}

.jx-tpls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:860px){.jx-tpls{grid-template-columns:repeat(2,minmax(0,1fr))}}
.jx-tpl{text-align:left;border:1px solid var(--line);border-radius:16px;padding:10px 10px 14px;background:#fff;cursor:pointer;font-family:var(--sans);transition:.2s}
.jx-tpl:hover{border-color:var(--accent);box-shadow:0 12px 30px -20px rgba(11,11,18,.4);transform:translateY(-2px)}
.jx-tpl img{width:100%;aspect-ratio:15/7;object-fit:cover;border-radius:10px;margin-bottom:10px}
.jx-tpl b{display:block;font-size:14.5px;margin:0 4px 4px}
.jx-tpl span{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;margin:0 4px}
.jx-tpl:disabled{opacity:.5;cursor:wait}

/* builder */
.jx-title{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.jx-title-k{font-size:12.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.jx-title h2{font-size:28px;letter-spacing:-.02em}
.jx-title p{font-size:13.5px;color:var(--muted);margin-top:4px;max-width:60ch}
.jx-title-stats{display:flex;gap:22px}
.jx-title-stats b,.jx-c-stats b{font-family:var(--disp);font-size:20px}
.jx-title-stats span,.jx-c-stats span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

.jx-builder{display:grid;grid-template-columns:250px minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:start}
@media(max-width:1180px){.jx-builder{grid-template-columns:230px minmax(0,1fr)}.jx-preview{grid-column:1/-1}}
@media(max-width:760px){.jx-builder{grid-template-columns:1fr}}

.jx-flow{position:sticky;top:96px;display:flex;flex-direction:column;align-items:stretch}
@media(max-width:1180px){.jx-flow{position:static}}
.jx-node{border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:#fff;font-family:var(--sans)}
.jx-node .k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.jx-node b{font-size:14px}
.jx-node .d{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.jx-trigger{background:var(--ink);border-color:var(--ink);color:#fff}
.jx-trigger .d{color:#A9A7B8}
.jx-end{background:var(--mist);border-style:dashed;text-align:center}
.jx-wait{display:flex;justify-content:center;position:relative;height:38px}
.jx-wait::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:repeating-linear-gradient(to bottom,#D4D2CE 0 4px,transparent 4px 8px)}
.jx-wait span{position:relative;align-self:center;font-size:11px;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:100px;padding:3px 10px;color:#2A2A38}
.jx-step{position:relative;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.jx-step:hover{border-color:rgba(11,11,18,.3)}
.jx-step.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,74,28,.14)}
.jx-step.paused{opacity:.65}
.jx-step:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.jx-step-h{display:flex;align-items:center;gap:8px;padding-right:44px}
.jx-step-h b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jx-step .no{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;background:var(--ink)}
.jx-step .no.th-sunrise{background:var(--grad)}
.jx-step .no.th-paper{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.jx-step-s{font-size:12.5px;color:#2A2A38;margin:6px 0 6px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jx-step-m{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.jx-step-m .w{color:var(--accent);font-weight:700}
.jx-step-acts{position:absolute;top:8px;right:8px;display:flex;gap:2px}
.jx-step-acts button{width:20px;height:22px;border:0;background:none;border-radius:6px;cursor:pointer;color:var(--muted);font-size:13px}
.jx-step-acts button:hover:not(:disabled){background:var(--mist);color:var(--ink)}
.jx-step-acts button:disabled{opacity:.25;cursor:default}
.jx-add{border:1.5px dashed rgba(11,11,18,.25);border-radius:14px;background:none;padding:11px;font-family:var(--sans);font-weight:700;font-size:13.5px;cursor:pointer;color:var(--ink);transition:.2s;margin-bottom:0}
.jx-add:hover{border-color:var(--accent);color:var(--accent)}
.jx-add + .jx-node{margin-top:14px}

.jx-editor .edpanel{margin-bottom:14px}
.jx-ed-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.jx-ed-k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.jx-ed-name{font-family:var(--disp);font-size:22px;font-weight:700;border:0;border-bottom:1.5px dashed transparent;padding:2px 0;width:100%;min-width:220px;background:none;letter-spacing:-.01em}
.jx-ed-name:hover{border-bottom-color:var(--line)}
.jx-ed-name:focus{outline:none;border-bottom-color:var(--accent)}
.jx-ed-acts{display:flex;align-items:center;gap:4px}
.jx-switch{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;cursor:pointer;margin-right:6px}
.jx-switch input{position:absolute;opacity:0;width:1px;height:1px}
.jx-switch span{width:34px;height:20px;border-radius:20px;background:#D4D2CE;position:relative;transition:.2s}
.jx-switch span::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.jx-switch input:checked + span{background:#2FA84F}
.jx-switch input:checked + span::after{left:16px}
.jx-switch input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

.jx-timing{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.jx-timing input{width:80px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;font-family:var(--sans);font-size:14px}
.jx-timing select{padding:9px 10px;border:1px solid var(--line);border-radius:10px;font-family:var(--sans);font-size:14px;background:#fff}
.jx-timing + .hint{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.45}

.jx-tokens{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:-4px}
.jx-tokens button{font-family:var(--sans);font-size:11.5px;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:100px;padding:4px 10px;cursor:pointer}
.jx-tokens button:hover{border-color:var(--accent);color:var(--accent)}
.jx-tokens .hint{margin-left:4px}

.jx-themes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.jx-theme{border:1.5px solid var(--line);border-radius:14px;padding:8px;background:#fff;cursor:pointer;font-family:var(--sans);text-align:left;transition:.2s}
.jx-theme i{display:block;height:46px;border-radius:9px;margin-bottom:6px;position:relative;overflow:hidden}
.jx-theme i::after{content:"";position:absolute;left:10px;bottom:10px;width:46%;height:6px;border-radius:6px;background:currentColor;opacity:.85;box-shadow:0 -11px 0 -1px currentColor}
.jx-theme b{font-size:12.5px}
.jx-theme.th-midnight i{background:var(--ink);color:#fff}
.jx-theme.th-sunrise i{background:var(--grad);color:#fff}
.jx-theme.th-paper i{background:var(--mist);color:var(--ink);border:1px solid var(--line)}
.jx-theme.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,74,28,.14)}

.jx-imgpick{display:flex;flex-direction:column;gap:8px}
.jx-imgcur{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--mist)}
.jx-imgcur img{display:block;width:100%;max-height:170px;object-fit:cover}
.jx-imgcur.none{padding:18px;text-align:center;font-size:12.5px;color:var(--muted)}
.jx-presets{display:flex;gap:6px;flex-wrap:wrap}
.jx-preset{width:62px;height:38px;border-radius:8px;border:1.5px solid var(--line);padding:0;overflow:hidden;cursor:pointer;background:#fff;font-size:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-family:var(--sans);color:#2A2A38}
.jx-preset img{width:100%;height:100%;object-fit:cover}
.jx-preset.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,74,28,.25)}
.jx-preset span{font-size:9.5px;font-weight:600;margin-top:2px}
.jx-preset.up:hover{border-color:var(--ink)}

.jx-block{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:#fff;transition:box-shadow .3s}
.jx-block.flash{box-shadow:0 0 0 3px rgba(255,74,28,.25)}
.jx-block-h{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 12px;border-bottom:1px solid var(--line);background:#FBFAF9;border-radius:14px 14px 0 0}
.jx-block-h .ic,.jx-palette .ic{flex:none;width:24px;height:24px;border-radius:7px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800}
.jx-block-h b{flex:1;font-size:13px}
.jx-block-h .acts{display:flex;gap:2px}
.jx-block-h .acts button{width:26px;height:26px;border:0;background:none;border-radius:7px;cursor:pointer;font-size:13px;color:var(--muted)}
.jx-block-h .acts button:hover:not(:disabled){background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.jx-block-h .acts button.del:hover{color:#C62A12}
.jx-block-h .acts button:disabled{opacity:.25;cursor:default}
.jx-block-b{padding:12px 12px 2px}
.jx-block-b .minifield{margin-bottom:10px}
.jx-block-b > .hint{font-size:11.5px;color:var(--muted);margin:-2px 0 10px;line-height:1.45}
.jx-statrow{gap:10px}
.jx-addblock{width:100%;border:1.5px dashed rgba(11,11,18,.22);border-radius:12px;background:none;padding:10px;font-family:var(--sans);font-weight:700;font-size:13px;cursor:pointer}
.jx-addblock:hover{border-color:var(--accent);color:var(--accent)}
.jx-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.jx-palette[hidden]{display:none}
.jx-palette button{display:grid;grid-template-columns:24px 1fr;column-gap:10px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:12px;background:#fff;padding:9px 10px;cursor:pointer;font-family:var(--sans)}
.jx-palette button:hover{border-color:var(--accent)}
.jx-palette button .ic{grid-row:1/3}
.jx-palette button b{font-size:12.5px}
.jx-palette button span:last-child{font-size:11px;color:var(--muted)}

.jx-savebar{position:sticky;bottom:12px;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:16px;padding:10px 10px 10px 16px;box-shadow:0 16px 36px -24px rgba(11,11,18,.45)}
.jx-savebar .btn{padding:11px 22px;font-size:14px}
.jx-savestate{font-size:12.5px;color:var(--muted);font-weight:600}
.jx-savestate.dirty{color:#B7791F}
.jx-savestate.dirty::before{content:"●";margin-right:6px}

.jx-preview{position:sticky;top:96px;border:1px solid var(--line);border-radius:20px;background:#F3F2F0;padding:12px;min-width:0}
@media(max-width:1180px){.jx-preview{position:static}}
.jx-prev-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.jx-prev-bar .segs button{padding:6px 12px;font-size:12px}
.jx-prev-status{font-size:11.5px;color:var(--muted)}
.jx-inbox{display:flex;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:10px 12px;margin-bottom:10px;border:1px solid var(--line)}
.jx-inbox-av{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:var(--disp)}
.jx-inbox-t{min-width:0;flex:1}
.jx-inbox-from{font-size:13px;font-weight:700;display:flex;justify-content:space-between}
.jx-inbox-from span{font-size:11px;color:var(--muted);font-weight:500}
.jx-inbox-subj{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jx-inbox-pre{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jx-frame{background:#EDECEA;border-radius:14px;overflow:hidden;margin:0 auto;transition:max-width .3s;max-width:100%}
.jx-frame.mobile{max-width:390px;border:8px solid var(--ink);border-radius:30px}
.jx-frame iframe{display:block;width:100%;height:760px;border:0;background:#EDECEA}
.jx-test{display:flex;gap:8px;margin-top:10px}
.jx-test input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-family:var(--sans);font-size:14px}
.jx-test .btn{padding:10px 18px;font-size:14px}

.jx-check{display:flex;gap:8px;align-items:center;font-size:13.5px;margin:4px 0 16px;cursor:pointer}
.jx-danger{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);padding-top:14px;font-size:12px;color:var(--muted)}

.jx-prog{height:6px;border-radius:6px;background:var(--mist);overflow:hidden;width:110px;margin-bottom:4px}
.jx-prog i{display:block;height:100%;background:var(--grad)}

/* contact */
.jx-contact h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:22px 0 10px}
.jx-c-head{display:flex;gap:14px;align-items:center}
.jx-c-av{flex:none;width:52px;height:52px;border-radius:50%;background:var(--grad);color:#fff;font-family:var(--disp);font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center}
.jx-c-head .em a{color:var(--ink);text-decoration:underline}
.jx-c-head .jx-chips{margin:8px 0 0}
.jx-c-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px;background:var(--mist);border-radius:14px;padding:14px 16px}
.jx-c-j{list-style:none;margin:0;padding:0}
.jx-c-j li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.jx-c-j li:first-child{border-top:0}
.jx-tl{list-style:none;margin:0;padding:0;position:relative}
.jx-tl::before{content:"";position:absolute;left:14px;top:8px;bottom:8px;width:2px;background:var(--line)}
.jx-tl li{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:start;padding:7px 0}
.jx-tl .ic{position:relative;z-index:1;box-shadow:0 0 0 3px #fff}
.jx-tl .ev .ic{background:var(--ink);color:#fff}
.jx-tl b{display:block;font-size:13.5px}
.jx-tl li span{display:block;font-size:12px;color:var(--muted)}
.jx-tl time{font-size:11.5px;color:var(--muted);white-space:nowrap;padding-top:6px}
.modal-card .em{font-size:12.5px;color:var(--muted)}
#tab-journeys [hidden]{display:none!important}
#jxActivity{max-height:520px;overflow:auto}
.jx-danger .rowact{white-space:nowrap;margin-left:0}
.jx-tpl img{display:block;height:auto}
.jx-card-stats span{font-size:9.5px}
.jx-title-stats{flex-wrap:wrap;gap:14px 20px}

/* ==========================================================================
   v14 — Mobile layout pass (Oct 2026)
   Why pages drifted sideways on phones: a grid item's automatic minimum
   width is its longest unbreakable run (a long word, an e-mail address, a
   no-wrap button label). When that run is wider than the column, the grid
   grows past the screen and phone browsers widen the whole page to fit it,
   so it pans left and right. Expertise also forced three columns with an
   inline style that beat every breakpoint. Everything below is scoped to
   phone/tablet widths, so the desktop layout is untouched.
   ========================================================================== */

/* 1. Expertise domains: three-up on desktop as before, now responsive
      (was an inline style, which no media query could override). */
.domains.d3{grid-template-columns:repeat(3,1fr);margin-top:44px}
@media(max-width:900px){.domains.d3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.domains.d3{grid-template-columns:1fr}}

@media(max-width:900px){
  /* 2. Grid items may shrink to their column; a word that cannot fit on a
        line of its own breaks instead of pushing the page wider. Words that
        fit are never touched. */
  :is(.stats,.cards,.vtrack,.expwrap,.domains,.cgrid,.steps,.fgrid,.srow,.aicall,
      .book,.wgrid,.statgrid,.split,.pillars,.objs,.enablers,.ocards,.grid3,
      .values,.cwrap,.frow,.faq,.subwrap,.igrid,.casefacts,.caseresults,
      .gaterow,.minirow)>*{min-width:0;overflow-wrap:break-word}
  /* Contact details: the text column next to the icon may shrink, and a
     long e-mail address may break. */
  .infoblock>div:last-child{min-width:0}
  .infoblock .v a{overflow-wrap:anywhere}
}

@media(max-width:560px){
  /* 3. Phone columns. Four-step methods and the four values were kept
        two-up down to 320px, which left ~110px of text per column and
        overflowed in FR/DE/ES/TR. One column reads properly. */
  .steps{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}

  /* 4. Buttons may wrap to a second line rather than run off a card (FR
        "Demander une réunion →", "Envoyer la demande →"). A label that fits
        stays on one line. */
  .btn{white-space:normal}
  .enabler-strip .btn{flex:0 1 auto;max-width:100%}

  /* 5. The "Enabled by Commercial Data & AI" strip kept a 280px minimum on
        its paragraph, so on a 320px phone the text was cut off at the
        strip's rounded edge. */
  .enabler-strip p{min-width:0;flex-basis:100%}

  /* 6. Dark CTA panels kept their desktop side padding (60px on the banner),
        leaving 136-206px for the headline on a phone; the panels clip their
        overflow, so long FR/DE headlines were cut off. Phone padding now
        matches the subscribe card. */
  .cta-banner{padding:56px 24px}
  .aicall{padding:34px 24px}
  .inline-cta{padding:32px 24px}
  .enabler-strip{padding:24px 22px}

  /* 7. Long words in big type ("Geschwindigkeit", "Aproximadamente",
        "Wertschöpfungskette"): a slightly smaller outcome figure, headings
        that break a word only when it cannot fit a line on its own, and
        proper hyphenation of long words (12+ letters) in the translated
        pages. English is left as it is. */
  .ocard .m{font-size:clamp(26px,8vw,34px)}
  :is(h1,h2,h3,h4,h5,.lead,.lead2){overflow-wrap:break-word}
  :is(:lang(fr),:lang(de),:lang(es),:lang(tr)) :is(h1,h2,h3,h4,.lead2,.ocard .m,.ccard .metric,
      .vstage .st,.bcard .t){
    -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 5 5;
    -webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5}
}

/* 8. iOS Safari zooms into any form field under 16px on focus, and the page
      then pans sideways. Contact, Subscribe and the article gate use 15px. */
@media(max-width:760px){
  .field input,.field select,.field textarea{font-size:16px}
}

/* 9. Larger touch area for footer and breadcrumb links. Vertical padding on
      an inline link enlarges the hit area without moving anything. */
@media(pointer:coarse){
  footer ul a,.crumb a{padding:5px 0}
}

/* 10. Desktop header fit. Seven links, the language switch and the CTA need
       more room than the 1240px header column has in FR/DE/ES/TR, and in
       English below ~1250px, so the CTA ran off-screen and the page scrolled
       sideways on laptops. Slightly tighter link spacing from 1221px to
       1799px (from 1800px up the row has room and is unchanged), and when the
       row still can't fit, app.js adds .navfold: the links fold into the menu
       button, as they already do below 1100px. */
@media(min-width:1221px) and (max-width:1799px){.navlinks{gap:clamp(14px,1.45vw,22px)}}
header.navfold .navlinks{display:none}
header.navfold .navtoggle{display:flex}