/* ============================================================
   YAZFORGE — brand board palette
   0B0F0C deep black · 111513 dark forest · 1D2420 slate green
   Palette 03/09/2026 - single purple theme: EFF0F5 page - FFFFFF surface - E7E4FF lilac - DDDEEC line - 5B4BC4 accent - 9284D9 glow - 1D1F58 ink
   Satoshi primary · DM Serif Display accent
   ============================================================ */
:root{
  --bg:#191C4D; --surf:#21255C; --surf2:#2E3372; --line:#2E3372;
  --accent:#5B4BC4; --ink:#FFFFFF; --muted:#A8ABD4; --soft:#DCDCF0;
  --sans:"Satoshi",system-ui,-apple-system,sans-serif;
  --serif:"DM Serif Display",Georgia,serif;
  --rail:352px; --sec:116px;
}
.yzf *{box-sizing:border-box}
html{scroll-behavior:smooth}
#services,#systems,#faq,#work,#process,#book,#about,#top{scroll-margin-top:86px}
html.lock,body.lock{overflow:hidden}
body.yzf{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:15.5px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.yzf h1,.yzf h2,.yzf h3,.yzf h4{font-family:var(--sans);font-weight:700;letter-spacing:-.022em;line-height:1.08;margin:0;color:#fff}
.yzf p{margin:0;color:var(--muted)}
.yzf a{color:inherit;text-decoration:none}
.yzf button{font:inherit;color:inherit}
::selection{background:var(--accent);color:#191C4D}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* the board's small lime labels */
.lab{
  display:inline-block;font-size:10.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);
}
.q{font-family:var(--serif);font-weight:400;letter-spacing:0}

/* ---------- buttons: sharp, bordered, arrowed ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  height:48px;padding:0 24px;border:1px solid var(--line);border-radius:0;background:transparent;
  color:var(--ink);font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:border-color .22s,background .22s,color .22s;will-change:transform;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn svg{width:15px;height:9px;stroke:currentColor;stroke-width:1.4;fill:none;transition:transform .3s}
.btn:hover svg{transform:translateX(4px)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:#191C4D}
.btn.solid:hover{filter:brightness(1.09);color:#191C4D}
.btn>span{pointer-events:none}

/* ============================================================
   PRELOADER — a page assembling itself
   ============================================================ */
#pre{
  position:fixed;inset:0;z-index:900;background:var(--bg);display:grid;place-items:center;
  clip-path:circle(150% at 50% 50%);
  transition:clip-path 1s cubic-bezier(.76,0,.24,1),opacity .5s ease .5s;
}
#pre.out{clip-path:circle(0% at 50% 50%);opacity:0;pointer-events:none}
.pre-wrap{width:min(520px,74vw)}
.pre-mark{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.pre-mark svg{width:34px;height:34px}
.pre-mark b{font-size:16px;font-weight:700;letter-spacing:.26em}
.pre-frame{position:relative;border:1px solid var(--line);overflow:hidden;aspect-ratio:16/10;background:#0D0F10}
.pre-bar{height:26px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 10px}
.pre-bar i{width:6px;height:6px;border-radius:50%;background:#23262A;display:block}
.pre-canvas{position:absolute;inset:26px 0 0;padding:14px;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:11px;gap:7px}
.pre-canvas b{
  display:block;background:#1A1C1D;transform:scaleX(0);transform-origin:left;opacity:0;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .3s,background .5s;
}
.pre-canvas b.on{transform:scaleX(1);opacity:1}
.pre-canvas b.type{background:#2A2D2E}
.pre-canvas b.hue{background:var(--accent)}
.pre-grid{
  position:absolute;inset:26px 0 0;pointer-events:none;opacity:0;transition:opacity .4s;
  background-image:repeating-linear-gradient(90deg,rgba(91,75,196,.18) 0 1px,transparent 1px 16.6667%);
}
.pre-grid.on{opacity:1}
.pre-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px}
.pre-meta .num{font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pre-line{height:1px;background:var(--line);margin-top:12px;position:relative;overflow:hidden}
.pre-line i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}

/* ============================================================
   CURSOR — a selection tool
   ============================================================ */
.cur{position:fixed;inset:0;z-index:800;pointer-events:none;opacity:0;transition:opacity .3s;display:none}
.cur.on{opacity:1}
@media(hover:hover) and (pointer:fine) and (min-width:1020px){
  .cur{display:block}
  body.fine,body.fine a,body.fine button,body.fine input,body.fine select,body.fine textarea{cursor:none}
}
/* registration mark: a drafting alignment cross, not a blob. Tracks 1:1 via
   transform (no lerp, no layout thrash) so it never trails the pointer. */
/* Registration mark. The outer .dot carries ONLY the position transform;
   the cross lives on an inner <i> which carries rotate/scale. Keeping them
   on one element made the browser rotate and scale the position vector
   itself, so the cursor flew away from the pointer on hover. */
.cur .dot{
  position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;
  border:0;border-radius:0;will-change:transform;
}
.cur .dot i{
  position:absolute;inset:0;display:block;transform-origin:50% 50%;
  transition:rotate .26s cubic-bezier(.2,.8,.2,1), scale .26s cubic-bezier(.2,.8,.2,1);
}
.cur .dot i::before,.cur .dot i::after{content:"";position:absolute;background:var(--neon,#9284D9)}
.cur .dot i::before{left:0;top:50%;width:8px;height:1.5px;margin-top:-.75px;box-shadow:18px 0 0 var(--neon,#9284D9)}
.cur .dot i::after{top:0;left:50%;width:1.5px;height:8px;margin-left:-.75px;box-shadow:0 18px 0 var(--neon,#9284D9)}
.cur.sel .dot i{rotate:45deg;scale:.82}
.cur.press .dot i{scale:.66}
.cur.sel.press .dot i{rotate:45deg;scale:.6}
.cur .sel-box,.cur .sel-box i{display:none!important}
.cur .tag{
  position:absolute;left:0;top:0;background:var(--neon,#9284D9);color:#191C4D;
  font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 7px;white-space:nowrap;opacity:0;will-change:transform;
  transition:opacity .16s ease;
}
.cur.sel .tag{opacity:1}

/* ---------- progress + grain ---------- */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:700}
.prog i{display:block;height:100%;width:0;background:var(--accent)}
.grain{
  position:fixed;inset:-120px;z-index:690;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation:gr 620ms steps(2) infinite;
}
@keyframes gr{0%{transform:translate(0,0)}25%{transform:translate(-14px,8px)}50%{transform:translate(9px,-11px)}75%{transform:translate(-6px,-6px)}100%{transform:translate(0,0)}}

/* ---------- top header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;
  justify-content:space-between;gap:28px;padding:13px 30px;
  background:rgba(25,28,77,.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.hdr .mark svg{width:30px;height:30px}
.hdr .mark b{font-size:13.5px;letter-spacing:.24em}
.hdr nav{display:flex;gap:32px}
.hdr nav a{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:color .22s}
.hdr nav a:hover{color:#fff}
.hdr .btn{height:40px;padding:0 20px}
.yzf .hdr>.langs{margin-inline-start:auto}
.yzf .hdr{gap:14px}
.yzf .hdr nav{margin-inline-end:auto}
@media(max-width:900px){
  .hdr{padding:11px 18px;gap:14px}
  .hdr nav{display:none}
  .hdr .mark b{font-size:12px}
}

/* ============================================================
   RAIL
   ============================================================ */
.rail{position:fixed;left:26px;top:88px;width:288px;z-index:60;background:var(--surf);border:1px solid var(--line);padding:26px}
.portrait{
  position:relative;aspect-ratio:1/1.08;border:1px dashed var(--line);background:#0E1011;
  display:grid;place-items:center;overflow:hidden;margin-bottom:22px;
}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait span{font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:.7}
.portrait.filled span{display:none}
.wordmark{display:block;height:22px;width:auto}
.hdr .wordmark{height:19px}
.rail .wordmark{height:24px}
.pre-mark .wordmark{height:20px}
/* ---------- discipline switch ---------- */
.modes{position:relative;display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);margin-top:20px;overflow:hidden}
.modes .pill{position:absolute;top:0;bottom:0;left:0;width:50%;background:var(--accent);z-index:1;
  transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.modes button{position:relative;z-index:2;background:none;border:0;padding:12px 6px;cursor:pointer;
  font-size:9.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.modes button.on{color:#191C4D}
.yzf main{transition:opacity .22s ease}
.yzf main.swap{opacity:0}

.mark{display:flex;align-items:center;gap:11px}
.mark svg{width:38px;height:38px;flex:0 0 auto}
.mark b{font-size:15.5px;font-weight:700;letter-spacing:.24em}
.tagline{margin-top:14px;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.8}
.tagline em{font-style:normal;color:var(--accent)}
.hr{height:1px;background:var(--line);margin:22px 0}
.ct{display:flex;flex-direction:column;gap:12px}
.ct a{font-size:13.5px;color:var(--muted);transition:color .18s}
.ct a:hover{color:var(--accent)}
.soc{display:flex;gap:8px;margin-top:22px}
.soc a{width:34px;height:34px;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:.18s}
.soc a:hover{color:var(--accent);border-color:var(--accent)}
.soc svg{width:15px;height:15px;fill:currentColor}
.rail .btn{width:100%;margin-top:24px;justify-content:space-between}

/* ============================================================
   LAYOUT
   ============================================================ */
.yzf main{padding-left:var(--rail);padding-right:44px;padding-top:62px}
.sec{padding:0 0 var(--sec)}
.lead{max-width:60ch}
.sec-h{font-size:clamp(30px,3.5vw,48px);margin-top:16px}
.sec-note{margin-top:18px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:110px 0 var(--sec);overflow:clip}
.wall{position:absolute;inset:-22% -12%;z-index:0;pointer-events:none;transform:rotate(-10deg);display:grid;grid-template-columns:repeat(4,1fr);gap:18px;opacity:.42}
.wall .col{display:grid;gap:18px;will-change:transform}
.wall .p{border:1px solid var(--line);aspect-ratio:4/3;display:grid;place-items:center;padding:10%}
.wall .p b{font-size:14px;font-weight:700;letter-spacing:.02em;color:rgba(220,220,240,.13);text-align:center}
/* hero wall panels keep the board's green tint (v2); the work grid stays neutral */
.wall .p.ph1{background:linear-gradient(140deg,#1F2354,#1A1D4E)}
.wall .p.ph2{background:linear-gradient(140deg,#242858,#1A1D4E)}
.wall .p.ph3{background:linear-gradient(140deg,#1F2355,#191C4D)}
.wall .p.ph4{background:linear-gradient(140deg,#181712,#0F0E0A)}
.wall .p.ph5{background:linear-gradient(140deg,#12181A,#0B0F10)}
.wall .p.ph6{background:linear-gradient(140deg,#22265A,#1A1D4E)}
.hero-in{position:relative;z-index:2}
.hero h1{font-size:clamp(40px,5.4vw,80px);max-width:14ch;font-weight:700;letter-spacing:-.03em;margin-top:20px;color:#fff}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.hero h1 .w i{display:inline-block;font-style:normal;transform:translateY(108%);transition:transform .95s cubic-bezier(.19,1,.22,1)}
.hero.go h1 .w i{transform:none}
.hero .sub{margin-top:26px;max-width:46ch;font-size:16.5px}
.cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:60px;max-width:720px;position:relative;z-index:2}
.stats div{background:var(--bg);padding:22px 20px}
.stats b{display:block;font-size:30px;font-weight:700;letter-spacing:-.03em}
.stats span{display:block;margin-top:8px}

/* ---------- intro band: the forged slab ---------- */
.intro{padding:0;margin:0}
.intro-band{
  position:relative;overflow:hidden;border:1px solid var(--line);border-bottom:0;
  background:#191C4D;min-height:min(620px,74vh);display:flex;align-items:center;
}
.slot{position:absolute;inset:0;background:#191C4D;overflow:hidden}
.slot img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;will-change:transform}
.slot.filled{background:#191C4D}
.intro-veil{
  position:absolute;inset:0;
  background:linear-gradient(90deg,#191C4D 0%,rgba(25,28,77,.9) 26%,rgba(25,28,77,.5) 52%,rgba(25,28,77,0) 84%);
}
.intro-copy{position:relative;z-index:2;max-width:min(620px,54%);padding:clamp(34px,4vw,60px)}
.intro-copy h2{font-size:clamp(30px,3.8vw,54px);margin-top:18px;line-height:1.06}
.intro-copy h2 em{font-style:normal;color:var(--accent)}
.intro-copy h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.intro-copy h2 .w i{display:inline-block;font-style:normal;transform:translateY(108%);transition:transform .9s cubic-bezier(.19,1,.22,1)}
.intro.in h2 .w i{transform:none}
.intro-copy p{margin-top:22px;max-width:42ch}
.intro-copy .btn{margin-top:32px}
@media(max-width:900px){
  .intro-band{display:block;min-height:0}
  .intro-veil{inset:0 0 auto 0;height:300px;background:linear-gradient(0deg,#191C4D 4%,rgba(25,28,77,.3) 70%,transparent 100%)}
  .slot{height:300px;bottom:auto}
  .intro-copy{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .intro-copy h2 .w i{transform:none}
}

/* ---------- marquee ---------- */
.mq{margin:0 0 var(--sec);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;overflow:hidden;white-space:nowrap}
.mq-in{display:inline-flex;gap:46px;will-change:transform}
.mq-in span{font-size:clamp(22px,2.9vw,38px);font-weight:700;letter-spacing:-.025em;color:#1C1E1F}
.mq-in span.hi{color:var(--accent)}

/* ---------- services stack ---------- */
.stack{position:relative;margin-top:44px}
.card{position:sticky;background:var(--surf);border:1px solid var(--line);padding:38px;margin-bottom:26px;overflow:hidden}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding-bottom:20px}
.card-title{display:flex;align-items:center;gap:16px}
.card-title svg{width:26px;height:26px;stroke:var(--accent);stroke-width:1.3;fill:none;flex:0 0 auto}
.card h3{font-size:clamp(23px,2.5vw,32px)}
.card-body{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;padding-top:28px}
.card-body p+p{margin-top:15px}
.card ul{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.card li{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted);display:flex;gap:13px}
.card li::before{content:"";flex:0 0 5px;height:5px;margin-top:9px;background:var(--accent)}
.demo{border:1px solid var(--line);background:#0D0F10;min-height:236px;position:relative;overflow:hidden}
.sw{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr)}
.sw i{display:block;transform:translateY(100%);transition:transform .75s cubic-bezier(.19,1,.22,1)}
.card.in .sw i{transform:none}
.card.in .sw i:nth-child(2){transition-delay:.06s}.card.in .sw i:nth-child(3){transition-delay:.12s}
.card.in .sw i:nth-child(4){transition-delay:.18s}.card.in .sw i:nth-child(5){transition-delay:.24s}
.card.in .sw i:nth-child(6){transition-delay:.3s}
.lay{position:absolute;inset:20px;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:14px;gap:8px}
.lay b{background:#1A1C1D;opacity:0;transform:translateY(8px);transition:.55s}
.card.in .lay b{opacity:1;transform:none}
.lay b.acc{background:var(--accent)}
.code{position:absolute;inset:24px;font-size:12px;line-height:2.2;color:#3E4245;letter-spacing:.02em}
.code em{font-style:normal;color:var(--accent)}
.code s{text-decoration:none;color:#767B7A}
.flow{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:26px}
.flow div{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);padding:12px 15px;font-size:12.5px;color:var(--muted)}
.flow div.paid{border-color:var(--accent);color:var(--accent)}
.spd{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:17px;padding:28px}
.spd div{display:grid;gap:8px}
.spd u{text-decoration:none;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.spd i{display:block;height:4px;background:#1A1C1D;overflow:hidden}
.spd i b{display:block;height:100%;width:0;background:var(--accent);transition:width 1.15s cubic-bezier(.2,.7,.2,1)}
.card.in .spd i b{width:var(--w)}

/* ---------- work ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:22px;margin-top:44px}
.tile{position:relative;display:block;text-align:left;background:none;border:1px solid var(--line);padding:0;cursor:pointer;overflow:hidden;aspect-ratio:16/10;transition:border-color .35s ease,box-shadow .35s ease,transform .5s cubic-bezier(.2,.7,.2,1)}


.shot{position:absolute;inset:0;overflow:hidden;background:var(--surf)}
.ph{position:absolute;inset:0;display:grid;place-items:center;padding:8%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tile:hover .ph{transform:scale(1.06)}
.ph b{font-size:clamp(17px,2.3vw,34px);font-weight:700;letter-spacing:-.03em;color:rgba(255,255,255,.14);text-align:center}
.ph1{background:linear-gradient(140deg,#171A1B,#0C0E0F)}
.ph2{background:linear-gradient(140deg,#1B1D1E,#0D0F10)}
.ph3{background:linear-gradient(140deg,#141718,#0B0D0E)}
.ph4{background:linear-gradient(140deg,#1E2021,#0F1112)}
.ph5{background:linear-gradient(140deg,#191B1C,#0C0E0F)}
.ph6{background:linear-gradient(140deg,#161819,#0A0C0D)}
.veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(25,28,77,.94) 0%,rgba(25,28,77,.42) 44%,rgba(25,28,77,0) 74%);transition:opacity .4s}
.idx{position:absolute;top:13px;left:15px;font-size:10px;font-weight:500;letter-spacing:.2em;color:var(--accent);opacity:0;transform:translateY(-5px);transition:.35s}
.tile:hover .idx{opacity:1;transform:none}
.cap{position:absolute;left:0;right:0;bottom:0;padding:16px 17px;display:flex;flex-direction:column;gap:4px}
.cap h3{font-size:17px}

.go{
  position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#191C4D;font-size:9.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;padding:7px 11px;opacity:0;transform:translateY(-6px);transition:.35s;
}
.tile:hover .go{opacity:1;transform:none}

/* ---------- process: a growing stem ---------- */
.grow{position:relative;padding-left:74px;margin-top:46px}
.stem{position:absolute;left:26px;top:4px;bottom:34px;width:2px;background:var(--line)}
.stem i{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(180deg,#5B4BC4,#3B3480)}
.step{position:relative;padding-bottom:clamp(44px,6.5vh,80px)}
.step:last-child{padding-bottom:0}
.node{
  position:absolute;left:-58px;top:2px;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;
  transition:border-color .45s;
}
.node i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .45s,transform .45s}
.step.on .node{border-color:var(--accent)}
.step.on .node i{background:var(--accent);transform:scale(1.3)}
.sprout{
  position:absolute;left:-64px;top:28px;width:34px;height:70px;
  opacity:0;transform:scale(.35) rotate(-14deg);transform-origin:top center;
  transition:opacity .7s ease .15s,transform .9s cubic-bezier(.19,1,.22,1) .15s;
}
.step.on .sprout{opacity:.95;transform:none}
.sprout svg{width:100%;height:100%;display:block}
.step .body{opacity:0;transform:translateY(20px);transition:opacity .75s cubic-bezier(.19,1,.22,1),transform .75s cubic-bezier(.19,1,.22,1)}
.step.on .body{opacity:1;transform:none}
.step h4{font-size:clamp(22px,2.4vw,30px);margin-top:14px}
.step p{margin-top:14px;max-width:56ch;font-size:14.5px}
@media(max-width:760px){
  .grow{padding-left:44px}
  .stem{left:11px}
  .node{left:-43px}
  .sprout{left:-46px;width:24px;height:50px}
}
@media(prefers-reduced-motion:reduce){
  .step .body,.sprout{opacity:1;transform:none}
}

/* ---------- booking ---------- */
.book{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;margin-top:44px}
.book-list{border-top:1px solid var(--line)}
.book-list div{padding:19px 0;border-bottom:1px solid var(--line)}
.book-list h4{font-size:17px}
.book-list p{margin-top:7px;font-size:14px}
.yzf form{background:var(--surf);border:1px solid var(--line);padding:32px}
.f{display:grid;gap:8px;margin-bottom:17px}
.f label{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.f input,.f select,.f textarea{
  background:#0D0F10;border:1px solid var(--line);color:var(--ink);border-radius:0;
  font-family:var(--sans);font-size:14.5px;padding:13px;width:100%;transition:border-color .2s;
}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--accent);outline:none}
.f textarea{min-height:98px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:17px}
form .btn{width:100%;justify-content:space-between;margin-top:8px}
.done{display:none;padding:14px 0}
.done.on{display:block}
.done h4{font-size:24px;color:var(--accent);font-family:var(--serif);font-weight:400;letter-spacing:0}
.done p{margin-top:12px}
form.sent .fields{display:none}

/* ---------- project builder ---------- */
.builder{border:1px solid var(--line);background:var(--surf);padding:34px;margin-top:44px}
.bq+.bq{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
.opts{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.opt{
  position:relative;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:transparent;padding:15px 19px;transition:border-color .22s,background .22s;
}
.opt svg{width:20px;height:20px;stroke:var(--muted);stroke-width:1.3;fill:none;flex:0 0 auto;transition:stroke .22s}
.opt b{font-size:14px;font-weight:500;color:#fff}
.opt.slim{padding:13px 17px}
.opt:hover{border-color:var(--muted)}
.opt.on{border-color:var(--accent);background:rgba(91,75,196,.10)}
.opt.on svg{stroke:var(--accent)}
.opt.on::after{content:"";position:absolute;top:-1px;right:-1px;border-left:15px solid transparent;border-top:15px solid var(--accent)}
.summary{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.summary p{font-family:var(--serif);font-size:clamp(20px,2.3vw,30px);line-height:1.36;color:#fff;letter-spacing:0}
.summary em{font-style:normal;color:var(--accent)}
.summary .blank{color:var(--muted);opacity:.5}
#doneBrief{font-family:var(--serif);font-size:19px;line-height:1.4;color:#fff;margin-bottom:14px}

/* ---------- overlay ---------- */
.ov{position:fixed;inset:0;z-index:850;visibility:hidden;opacity:0;transition:opacity .32s,visibility .32s}
.ov.on{visibility:visible;opacity:1}
.scrim{position:absolute;inset:0;background:rgba(22,24,70,.88);backdrop-filter:blur(9px)}
.panel{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain}
.panel-in{max-width:900px;margin:0 auto;padding:92px 28px 120px;transform:translateY(20px);transition:transform .45s cubic-bezier(.19,1,.22,1)}
.ov.on .panel-in{transform:none}
.panel-in h2{font-size:clamp(32px,4.3vw,56px);margin-top:14px}
.big-shot{position:relative;border:1px solid var(--line);overflow:hidden;aspect-ratio:16/9;margin:34px 0 36px;background:var(--surf)}
.panel-in p{max-width:64ch;margin-bottom:17px}
.meta{border-top:1px solid var(--line);margin-top:34px}
.meta div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.meta b{font-weight:500;font-size:13.5px;color:var(--ink)}
.close{
  position:fixed;top:24px;right:28px;z-index:860;height:40px;padding:0 20px;
  background:var(--surf);border:1px solid var(--line);cursor:pointer;
  font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
}
.close:hover{border-color:var(--accent);color:var(--accent)}

.yzf footer{border-top:1px solid var(--line);padding:var(--sec) 0 64px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.yzf footer span{font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px)}
.rv.in{opacity:1;transform:none;transition:opacity .85s cubic-bezier(.19,1,.22,1),transform .85s cubic-bezier(.19,1,.22,1)}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .rail{position:static;width:auto;margin:20px 24px 40px}
  .rail .btn{width:auto}
  .yzf main{padding:62px 24px 0}
  .hero{min-height:auto;padding:16px 0 80px}
  .wall{inset:-10% -30%}
  .card-body{grid-template-columns:1fr;gap:28px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .book{grid-template-columns:1fr;gap:38px}
}
@media(max-width:760px){
  :root{--sec:74px}
  .grid{grid-template-columns:1fr}

  .stats,.two{grid-template-columns:1fr}
  .card{padding:24px}
  .phase{flex:auto}
  .panel-in{padding:78px 20px 92px}
  .close{top:16px;right:16px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .grain{display:none}
  .hero h1 .w i{transform:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}


/* host resets (Astra + Elementor canvas) */
.yzf .elementor-element,.yzf .elementor-widget-container{margin:0;padding:0}
.yzf .e-con>.e-con-inner{max-width:none;padding:0;display:block}
.yzf .e-con{padding:0!important;max-width:none!important}
.yzf ul{list-style:none;margin:0;padding:0}
.yzf li{margin:0}
.yzf img{max-width:none;height:auto}
.yzf input,.yzf select,.yzf textarea{margin:0}
.yzf .done h4{color:var(--accent)}


/* ---------- project card images + case pill ---------- */
.yzf .shotimg{background-size:cover;background-position:center top;display:block}
.yzf .case{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--line);background:rgba(25,28,77,.66);backdrop-filter:blur(6px);font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);opacity:0;transform:translateY(6px);transition:.32s;cursor:pointer}
.yzf .tile:hover .case{opacity:1;transform:none}
.yzf .case:hover{border-color:var(--accent);color:var(--accent)}
/* theme switch sits under the consultation button */
.yzf .themes{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin-top:12px;overflow:hidden}
.yzf .themes .pill{position:absolute;top:0;bottom:0;left:0;width:50%;background:var(--accent);z-index:1;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
body.light .themes .pill{transform:translateX(100%)}
.yzf .themes button{position:relative;z-index:2;background:none;border:0;padding:11px 6px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;font-size:9.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.yzf .themes button.on{color:#191C4D}
.yzf .themes svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5}


/* ============================================================
   LIGHT MODE
   warm paper ground, forest ink, the lime darkened for contrast
   ============================================================ */
body.light{--bg:#EFF0F5;--surf:#FFFFFF;--surf2:#E7E4FF;--line:#DDDEEC;--accent:#5B4BC4;--ink:#1D1F58;--muted:#5A5E86;--soft:#2C2F6B}
body.light .yzf-root,body.light main{background:#EFF0F5}
body.light.yzf{background:#EFF0F5!important}
body.light h1,body.light h2,body.light h3,body.light h4{color:var(--ink)}
body.light .lab{color:var(--accent)}
body.light .stats b,body.light .cap h3,body.light .card h3,body.light .step h4,body.light .phase h4,body.light .book-list h4,body.light .panel-in h2,body.light .sec-h,body.light .hero h1{color:var(--ink)}
body.light .hero h1 em,body.light .intro-copy h2 em{color:var(--accent)}
body.light .opt b,body.light .summary p,body.light #doneBrief{color:var(--ink)}
body.light .btn.solid,body.light .go,body.light .modes button.on,body.light .themes button.on{color:#EFF0F5}
body.light .tag{color:#EFF0F5}
body.light .grain{opacity:.03;mix-blend-mode:multiply}
body.light .pre-frame,body.light .demo,body.light .f input,body.light .f select,body.light .f textarea,body.light .slot.filled{background:#F5F5FB}
body.light .pre-canvas b,body.light .lay b,body.light .spd i{background:#DDDEEC}
body.light .pre-canvas b.type{background:#C6C7DF}
body.light .pre-bar i{background:#D6D7E8}
body.light .mq-in span{color:#DFE0EE}
body.light .code{color:#9A9CBA}
body.light .code s{color:#6E719A}
body.light .veil{background:linear-gradient(to top,rgba(239,240,245,.94) 0%,rgba(239,240,245,.42) 44%,rgba(239,240,245,0) 74%)}
body.light .intro-veil{background:linear-gradient(90deg,#EFF0F5 0%,rgba(239,240,245,.9) 26%,rgba(239,240,245,.5) 52%,rgba(239,240,245,0) 84%)}
body.light .intro-copy h2,body.light .intro-copy .lab{mix-blend-mode:normal}
body.light .scrim{background:rgba(239,240,245,.9)}
body.light .close,body.light .go,body.light .case{background:rgba(239,240,245,.82)}
body.light .go{background:var(--accent)}
body.light .case{color:var(--ink)}
body.light .ph1{background:linear-gradient(140deg,#E6E5F7,#F4F3FC)}
body.light .ph2{background:linear-gradient(140deg,#E9E6F8,#F5F4FD)}
body.light .ph3{background:linear-gradient(140deg,#E4E7F6,#F2F4FB)}
body.light .ph4{background:linear-gradient(140deg,#EAE7F8,#F5F4FC)}
body.light .ph5{background:linear-gradient(140deg,#E5E8F2,#F2F4F9)}
body.light .ph6{background:linear-gradient(140deg,#E8EAF6,#F4F5FC)}
body.light .ph b{color:rgba(29,31,88,.13)}
body.light .wall .p.ph1,body.light .wall .p.ph2,body.light .wall .p.ph3,body.light .wall .p.ph4,body.light .wall .p.ph5,body.light .wall .p.ph6{background:linear-gradient(140deg,#EDEDF8,#F6F6FD)}
body.light .wall .p b{color:rgba(29,31,88,.14)}
body.light .wall{opacity:.85}
body.light .ava{background:radial-gradient(120% 100% at 20% 0%,#EBEAF7 0%,#F3F3FB 60%,#F6F6FC 100%)}
body.light .hdr{background:rgba(239,240,245,.82)}
body.light .wordmark{filter:brightness(0) saturate(100%) invert(11%) sepia(74%) saturate(3100%) hue-rotate(236deg) brightness(86%) contrast(102%)}
body.light .cur .sel-box i{background:#EFF0F5}
body.light .node{background:#EFF0F5}
body.light .sprout svg path[fill='#3B3480']{fill:#8578D0}

/* ---------- language switch ---------- */
.yzf .langs{display:flex;border:1px solid var(--line);overflow:hidden}
.yzf .langs button{background:none;border:0;padding:0 11px;height:40px;cursor:pointer;font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--muted);transition:background .25s,color .25s}
.yzf .langs button+button{border-inline-start:1px solid var(--line)}
.yzf .langs button:hover{color:var(--ink)}
.yzf .langs button.on{background:var(--accent);color:#191C4D}
body.light .langs button.on{color:#EFF0F5}
@media(max-width:900px){.yzf .langs button{padding:0 8px;height:36px;font-size:9px}}

/* ---------- Arabic, right to left ---------- */
body.rtl{--sans:"Tajawal","Satoshi",system-ui,sans-serif}
body.rtl .lab,body.rtl .btn,body.rtl .langs button,body.rtl .modes button,body.rtl .themes button,body.rtl .idx,body.rtl .go,body.rtl .case,body.rtl .close,body.rtl .f label,body.rtl footer span,body.rtl .hdr nav a{letter-spacing:0}
body.rtl h1,body.rtl h2,body.rtl h3,body.rtl h4{letter-spacing:0;line-height:1.25}
body.rtl .rail{left:auto;right:26px}
body.rtl main{padding-left:44px;padding-right:var(--rail)}
body.rtl .intro{margin:0}
body.rtl .intro-band{flex-direction:row-reverse}
body.rtl .intro-veil{background:linear-gradient(270deg,#191C4D 0%,rgba(25,28,77,.9) 26%,rgba(25,28,77,.5) 52%,rgba(25,28,77,0) 84%)}
body.rtl.light .intro-veil{background:linear-gradient(270deg,#EFF0F5 0%,rgba(239,240,245,.9) 26%,rgba(239,240,245,.5) 52%,rgba(239,240,245,0) 84%)}
body.rtl .mq,body.rtl .code,body.rtl .stats b,body.rtl .pre-meta .num{direction:ltr}
body.rtl .mq-in{direction:ltr}
body.rtl .grow{padding-left:0;padding-right:74px}
body.rtl .stem{left:auto;right:26px}
body.rtl .node{left:auto;right:-58px}
body.rtl .sprout{left:auto;right:-64px;transform-origin:top center}
body.rtl .idx{left:auto;right:15px}
body.rtl .go{right:auto;left:12px}
body.rtl .case{right:auto;left:12px}
body.rtl .close{right:auto;left:28px}
body.rtl .card li::before{margin-inline-end:0}
body.rtl .spd i b{margin-inline-start:auto}
@media(max-width:1180px){body.rtl main{padding-left:24px;padding-right:24px}body.rtl .rail{right:auto}}
@media(max-width:760px){body.rtl .grow{padding-right:44px}body.rtl .stem{right:11px}body.rtl .node{right:-43px}body.rtl .sprout{right:-46px}}

/* ========== 3-WAY SWITCH + SYSTEMS BAND + FAQ (20/08/2026) ========== */
body.mode-faq .modes .pill{transform:translateX(100%)}
.yzf .modes button{font-size:8.5px;letter-spacing:.1em;padding:12px 3px}
body:not(.mode-faq) #faq{display:none!important}
body.mode-faq .mq,body.mode-faq #about,body.mode-faq #services,body.mode-faq #systems,body.mode-faq #work,body.mode-faq #process{display:none!important}
.yzf .sys{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px}
.yzf .pan{background:var(--surf);border:1px solid var(--line);padding:30px 28px}
.yzf .pan.next{background:transparent;border-style:dashed}
.yzf .pan .tagp{display:inline-block;font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;margin-bottom:15px}
.yzf .pan .tagp.now{background:var(--accent);color:#191C4D}
.yzf .pan .tagp.soon{border:1px solid var(--line);color:var(--muted)}
.yzf .pan h4{margin:0 0 16px;font-size:15px}
.yzf .pan ul{margin:0;padding-left:18px}
.yzf .pan li{margin-bottom:9px;font-size:14.5px;color:var(--muted)}
.yzf .pan li::marker{color:var(--surf2)}
.yzf .pan .fine{margin-top:18px;font-size:12.5px;line-height:1.6;color:var(--muted);opacity:.8}
.yzf .qa{margin-top:38px;border-top:1px solid var(--line)}
.yzf .qa details{border-bottom:1px solid var(--line)}
.yzf .qa summary{cursor:pointer;list-style:none;position:relative;padding:21px 44px 21px 0;font-size:16.5px;font-weight:500;color:var(--ink)}
.yzf .qa summary::-webkit-details-marker{display:none}
.yzf .qa summary::after{content:'+';position:absolute;right:4px;top:19px;color:var(--accent);font-size:21px;line-height:1}
.yzf .qa details[open] summary::after{content:'–'}
.yzf .qa .ans{padding:0 44px 26px 0;max-width:74ch;font-size:14.5px;color:var(--muted)}
@media(max-width:900px){.yzf .sys{grid-template-columns:1fr}.yzf .qa summary{font-size:15px;padding-right:36px}}
@media(max-width:520px){.yzf .modes button{font-size:7.5px;letter-spacing:.06em}}
/* ---- FAQ REVEAL FIX (20/08/2026): .rv starts at opacity:0 and the observer never fires on display:none nodes ---- */
body.mode-faq #faq .rv{opacity:1!important;transform:none!important}
body.mode-faq #faq .rv.in{opacity:1!important;transform:none!important}

/* ---- SWAP SAFETY NET (20/08/2026) ---- */
body.mode-faq .yzf main.swap{opacity:1}
body.mode-faq main{opacity:1!important}



/* ========== PROJECT TILES: NEON EDGE + CLEANER CAPTION (20/08/2026) ========== */
.yzf .shotimg{padding:0;background-size:cover;background-position:top center;background-repeat:no-repeat}
.yzf .tile{border-color:rgba(91,75,196,.28)}
.yzf .tile:hover,.yzf .tile:focus-visible{border-color:#7F70D4;box-shadow:0 0 0 1px rgba(127,112,212,.55),0 0 22px rgba(91,75,196,.28),0 18px 40px rgba(0,0,0,.45);transform:translateY(-4px)}
.yzf .tile:focus-visible{outline:none}
.yzf .veil{background:linear-gradient(to top,rgba(25,28,77,.96) 0%,rgba(25,28,77,.72) 26%,rgba(25,28,77,.16) 58%,rgba(25,28,77,0) 80%)}
.yzf .cap{padding:20px 20px 18px;gap:6px}
.yzf .cap h3{font-size:clamp(16px,1.5vw,20px);letter-spacing:-.015em;line-height:1.2}
.yzf .cap .lab{font-size:9.5px;letter-spacing:.17em;color:var(--accent);opacity:.92}
.yzf .cap::before{content:'';position:absolute;left:20px;top:0;width:26px;height:2px;background:var(--accent);opacity:0;transform:scaleX(.3);transform-origin:left;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.yzf .tile:hover .cap::before{opacity:1;transform:none}
.yzf .tile:hover .shotimg{transform:scale(1.04)}
@media(max-width:760px){.yzf .grid{grid-template-columns:1fr;gap:18px}.yzf .cap{padding:16px 16px 14px}.yzf .cap::before{left:16px}}
@media(prefers-reduced-motion:reduce){.yzf .tile,.yzf .tile:hover{transform:none}}

/* ================= NEON PASS (20/08/2026) ================= */
.yzf .pan{transition:border-color .4s ease,box-shadow .4s ease,background-color .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.yzf .pan .tagp{transition:background-color .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease}
.yzf .pan:hover{border-color:#7F70D4;border-style:solid;background:var(--surf);transform:translateY(-3px);box-shadow:0 0 0 1px rgba(127,112,212,.45),0 0 26px rgba(91,75,196,.22),0 18px 40px rgba(0,0,0,.42)}
.yzf .pan:hover .tagp.soon{background:var(--accent);color:#191C4D;border-color:var(--accent);box-shadow:0 0 14px rgba(91,75,196,.55)}
.yzf .pan:hover .tagp.now{box-shadow:0 0 16px rgba(91,75,196,.6)}
.yzf .pan:hover li::marker{color:var(--accent)}
.yzf .lab{text-shadow:0 0 16px rgba(91,75,196,.35)}
.yzf h2 em,.yzf h1 em,.yzf .tagline em{text-shadow:0 0 22px rgba(91,75,196,.45)}
.yzf .btn{transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .3s ease}
.yzf .btn:hover{border-color:#7F70D4;box-shadow:0 0 0 1px rgba(127,112,212,.4),0 0 20px rgba(91,75,196,.3)}
.yzf .btn.solid{box-shadow:0 0 18px rgba(91,75,196,.28)}
.yzf .btn.solid:hover{box-shadow:0 0 26px rgba(91,75,196,.55),0 0 46px rgba(91,75,196,.22)}
.yzf .modes .pill{box-shadow:0 0 18px rgba(91,75,196,.4)}
.yzf .themes .pill{box-shadow:0 0 14px rgba(91,75,196,.35)}
.yzf .mq .hi{text-shadow:0 0 24px rgba(91,75,196,.4)}
.yzf .step.on .node{box-shadow:0 0 0 3px rgba(91,75,196,.14),0 0 18px rgba(91,75,196,.45)}
.yzf .stem i{box-shadow:0 0 12px rgba(91,75,196,.6)}
.yzf .go{box-shadow:0 0 18px rgba(91,75,196,.5)}
.yzf .ct a{transition:color .25s ease,text-shadow .25s ease}
.yzf .ct a:hover{color:var(--accent);text-shadow:0 0 14px rgba(91,75,196,.5)}
.yzf .hdr nav a{transition:color .25s ease,text-shadow .25s ease}
.yzf .hdr nav a:hover{color:var(--accent);text-shadow:0 0 14px rgba(91,75,196,.45)}
.yzf .qa summary{transition:color .25s ease}
.yzf .qa summary:hover{color:var(--accent);text-shadow:0 0 16px rgba(91,75,196,.4)}
.yzf .qa details[open] summary{color:var(--accent)}
.yzf .qa summary::after{text-shadow:0 0 14px rgba(91,75,196,.6)}
.yzf input:focus,.yzf textarea:focus{outline:none;border-color:#7F70D4!important;box-shadow:0 0 0 1px rgba(127,112,212,.4),0 0 18px rgba(91,75,196,.25)}
.yzf .opt{transition:border-color .25s ease,color .25s ease,box-shadow .25s ease}
.yzf .opt:hover{border-color:#7F70D4;box-shadow:0 0 14px rgba(91,75,196,.28)}
.yzf .opt.on{box-shadow:0 0 18px rgba(91,75,196,.45)}

/* light mode: glow reads as smudge on paper, so pull it right back */
body.light .lab,body.light h1 em,body.light h2 em,body.light .tagline em,body.light .mq .hi,body.light .qa summary::after{text-shadow:none}
body.light .btn.solid,body.light .modes .pill,body.light .themes .pill,body.light .go,body.light .stem i,body.light .opt.on{box-shadow:none}
body.light .pan:hover{box-shadow:0 10px 26px rgba(29,31,88,.12)}
body.light .tile:hover{box-shadow:0 0 0 1px rgba(91,75,196,.5),0 14px 30px rgba(29,31,88,.16)}
body.light .pan:hover .tagp.soon{background:var(--accent);color:#EFF0F5;box-shadow:none}
body.light .ct a:hover,body.light .hdr nav a:hover,body.light .qa summary:hover{text-shadow:none}

@media(prefers-reduced-motion:reduce){.yzf .pan,.yzf .pan:hover{transform:none}}

/* ================= NEON PASS v2 (20/08/2026)
   v1 put text-shadow on small letterspaced type, which blurs glyph edges and
   causes colour fringing instead of glowing. Glow now lives on EDGES and SHAPES;
   text gets colour only. A brighter --neon is used for light, never for body copy. */
:root{--neon:#9284D9;--neon-soft:rgba(146,132,217,.55);--neon-dim:rgba(146,132,217,.22)}

/* --- 1. strip every text glow from v1 --- */
.yzf .lab,
.yzf h1 em,.yzf h2 em,.yzf .tagline em,
.yzf .mq .hi,
.yzf .qa summary,.yzf .qa summary:hover,.yzf .qa summary::after,
.yzf .ct a:hover,.yzf .hdr nav a:hover{text-shadow:none}

/* --- 2. text reads by COLOUR, crisply --- */
.yzf .lab{color:var(--neon)}
.yzf h1 em,.yzf h2 em,.yzf .tagline em{color:var(--neon)}
.yzf .mq .hi{color:var(--neon)}
.yzf .cap .lab{color:var(--neon);opacity:1}
.yzf .ct a:hover,.yzf .hdr nav a:hover,.yzf .qa summary:hover,.yzf .qa details[open] summary{color:var(--neon)}
.yzf .qa summary::after{color:var(--neon)}

/* --- 3. glow on edges: tighter, brighter, single ring --- */
.yzf .tile{border-color:rgba(146,132,217,.22)}
.yzf .tile:hover,.yzf .tile:focus-visible{border-color:var(--neon);box-shadow:0 0 14px var(--neon-dim),0 16px 34px rgba(0,0,0,.5)}
.yzf .pan:hover{border-color:var(--neon);box-shadow:0 0 14px var(--neon-dim),0 16px 34px rgba(0,0,0,.45)}
.yzf .btn:hover{border-color:var(--neon);box-shadow:0 0 12px var(--neon-dim)}
.yzf .btn.solid{background:var(--neon);border-color:var(--neon);box-shadow:0 0 14px var(--neon-dim)}
.yzf .btn.solid:hover{box-shadow:0 0 20px var(--neon-soft)}
.yzf .modes .pill,.yzf .themes .pill{background:var(--neon);box-shadow:0 0 14px var(--neon-dim)}
.yzf .go{background:var(--neon);box-shadow:0 0 12px var(--neon-dim)}
.yzf .step.on .node{border-color:var(--neon);box-shadow:0 0 12px var(--neon-dim)}
.yzf .step.on .node i{background:var(--neon)}
.yzf .stem i{background:linear-gradient(180deg,var(--neon),#3B3480);box-shadow:0 0 10px var(--neon-dim)}
.yzf .pan:hover .tagp.soon,.yzf .pan .tagp.now{background:var(--neon);color:#191C4D;border-color:var(--neon);box-shadow:0 0 12px var(--neon-dim)}
.yzf .cap::before{background:var(--neon)}
.yzf input:focus,.yzf textarea:focus{border-color:var(--neon)!important;box-shadow:0 0 12px var(--neon-dim)}
.yzf .opt:hover{border-color:var(--neon);box-shadow:0 0 10px var(--neon-dim)}
.yzf .opt.on{border-color:var(--neon);box-shadow:0 0 12px var(--neon-dim)}

/* --- 4. light mode: no glow, darker green for contrast on paper --- */
body.light{--neon:#5B4BC4;--neon-soft:rgba(91,75,196,.4);--neon-dim:rgba(91,75,196,.16)}
body.light .lab,body.light h1 em,body.light h2 em,body.light .tagline em,body.light .mq .hi,body.light .cap .lab{color:var(--neon);text-shadow:none}
body.light .btn.solid,body.light .modes .pill,body.light .themes .pill,body.light .go,body.light .stem i,body.light .opt.on,body.light .pan .tagp.now{box-shadow:none}
body.light .tile:hover{box-shadow:0 12px 28px rgba(29,31,88,.16)}
body.light .pan:hover{box-shadow:0 12px 28px rgba(29,31,88,.12)}

/* ========== SYSTEMS SECTION v2 (20/08/2026) ========== */
.yzf .pullq{margin:30px 0 4px;padding:18px 0 18px 22px;border-left:2px solid var(--neon);max-width:56ch;font-size:clamp(17px,2vw,22px);line-height:1.4;color:var(--ink)}
.yzf .closing{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);max-width:74ch}
.yzf .closing .lab{display:block;margin-bottom:12px}
.yzf .closing p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.7}
@media(max-width:760px){.yzf .pullq{margin:24px 0 2px;padding-left:16px}.yzf .closing{margin-top:26px;padding-top:20px}}

/* ========== LANGUAGES HIDDEN (22/08/2026) ==========
   FR and AR are switched off at the surface only. The dictionaries,
   the i18n engine and every translated key remain in place, so this
   is reversed by deleting this block and the guard in i18n.js. */
.yzf .langs button[data-lang="fr"],
.yzf .langs button[data-lang="ar"]{display:none!important}
.yzf .langs{gap:0}

/* ================= LIGHT MODE FIXES (22/08/2026) ================= */

/* 1. project tiles keep their dark veil in light mode: the pale wash was
      bleaching the bottom of every screenshot. Caption goes light to suit. */

body.light .cap h3{color:var(--ink)}
body.light .cap .lab{color:var(--accent)}

/* 2. never let a UA accent (blue) reach a control */
.yzf .opt,.yzf .opt:focus,.yzf .opt:active,.yzf .opt:focus-visible,
.yzf button,.yzf button:focus,.yzf button:active{accent-color:var(--neon);-webkit-tap-highlight-color:rgba(146,132,217,.25)}
.yzf .opt:focus,.yzf .opt:focus-visible{outline:none;border-color:var(--neon);box-shadow:0 0 12px var(--neon-dim)}
.yzf .opt:active{border-color:var(--neon)}
.yzf .opt:hover,.yzf .opt:focus{background:rgba(146,132,217,.10)}
.yzf .opt:hover svg,.yzf .opt:focus svg{stroke:var(--neon)}
body.light .opt.on{background:rgba(91,75,196,.12);border-color:var(--neon)}
body.light .opt:hover,body.light .opt:focus{background:rgba(91,75,196,.09);border-color:var(--neon)}
body.light .opt.on svg,body.light .opt:hover svg{stroke:var(--neon)}
body.light .opt b{color:var(--ink)}

/* 3. same guard on the two solid CTAs */
.yzf .btn:focus,.yzf .btn:focus-visible{outline:none;border-color:var(--neon);box-shadow:0 0 12px var(--neon-dim)}
.yzf input:focus,.yzf textarea:focus,.yzf select:focus{accent-color:var(--neon)}

/* ========== INTRO BAND IN LIGHT MODE (22/08/2026) ==========
   Same treatment as the project tiles: the band keeps its dark veil so the
   monolith is not bleached out, and the copy sitting on it goes light. */
body.light .intro-band{background:var(--bg)}







body.light .intro-copy .btn:hover{color:#191C4D;background:#9284D9;border-color:#9284D9}
body.light .intro-copy .btn:hover svg{stroke:#191C4D}
/* the split-word spans the headline animation creates inherit the colour */
body.light #introH span,body.light #introH i,body.light #introH b{color:inherit}

/* ========== OUR PRODUCT TAB (23/08/2026) ========== */
body.yzf-has-product .modes{grid-template-columns:repeat(3,1fr)}
body.yzf-has-product .modes .pill{width:33.3333%}
body.yzf-has-product.mode-faq .modes .pill{transform:translateX(200%)}
body.yzf-has-product.mode-product .modes .pill{transform:translateX(100%)}
body:not(.mode-product) #product{display:none!important}
body.mode-product .mq,body.mode-product #about,body.mode-product #services,
body.mode-product #systems,body.mode-product #work,body.mode-product #process,
body.mode-product #faq,body.mode-product #book{display:none!important}
body.mode-product #product .rv{opacity:1!important;transform:none!important}
.yzf-prod{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;margin-top:38px;background:var(--surf);border:1px solid var(--line);padding:28px}
.yzf-prod-media img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.yzf-prod-tag{display:inline-block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#191C4D;background:var(--neon);padding:5px 10px;margin-bottom:16px}
.yzf-prod-body h3{color:var(--ink);font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em;margin:0 0 12px;line-height:1.2}
.yzf-prod-body p{color:var(--muted);margin:0 0 16px;font-size:15px}
.yzf-prod-price{color:var(--ink);font-size:26px;margin-bottom:18px}
.yzf-prod-price .amount,.yzf-prod-price bdi{color:var(--ink)}
.yzf-prod-bens{list-style:none;margin:0 0 22px;padding:0}
.yzf-prod-bens li{position:relative;padding-left:22px;margin-bottom:9px;color:var(--muted);font-size:14.5px}
.yzf-prod-bens li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border:1px solid var(--neon);border-radius:50%}
.yzf-prod-cta{display:flex;flex-wrap:wrap;gap:12px}
.yzf-btn-solid,.yzf-btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 24px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:background-color .22s,color .22s,box-shadow .28s,border-color .22s}
.yzf-btn-solid{background:var(--neon);color:#191C4D!important;border:1px solid var(--neon)}
.yzf-btn-solid:hover{background:#AFA2EE;box-shadow:0 0 18px rgba(146,132,217,.32)}
.yzf-btn-ghost{background:transparent;color:var(--ink)!important;border:1px solid var(--line)}
.yzf-btn-ghost:hover{border-color:var(--neon);color:var(--neon)!important;box-shadow:0 0 14px rgba(146,132,217,.22)}
.yzf-btn-solid:focus-visible,.yzf-btn-ghost:focus-visible{outline:2px solid #AFA2EE;outline-offset:3px}
.yzf-prod-note{margin-top:16px;font-size:12.5px;color:#8688B4;border-left:2px solid var(--line);padding-left:12px}
@media(max-width:820px){.yzf-prod{grid-template-columns:1fr;gap:24px;padding:20px}}
@media(max-width:480px){.yzf-prod-cta .yzf-btn-solid,.yzf-prod-cta .yzf-btn-ghost{width:100%}}

/* the hero stays in the flow at opacity 0 with pointer-events auto and its
   .cta overlaps the product button on desktop, swallowing the click (23/08/2026) */
body.mode-product #top{display:none!important;visibility:hidden!important;pointer-events:none!important}


/* ---- LANGUAGE SWITCHER HIDDEN (23/08/2026) ----
   FR and AR were switched off earlier, leaving a single EN button with
   nothing to switch to. The whole control is hidden rather than left as a
   dead toggle. The engine, the dictionaries and the buttons all remain in
   place: delete this block (and the guard in i18n.js) to bring them back. */
.yzf .langs,.yzf #langs{display:none!important}

/* ---- INSIGHTS ON HOME + floating button safety (31/08/2026) ---- */
.yzf .ins-home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:40px}
.yzf .ins-card{border:1px solid var(--line);background:var(--surf);display:flex;flex-direction:column;overflow:hidden;transition:border-color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.yzf .ins-card:hover{border-color:rgba(146,132,217,.45);transform:translateY(-3px)}
.yzf .ins-card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:#1B1E50}
.yzf .ins-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.yzf .ins-card-ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,#212457,#1B1E50)}
.yzf .ins-card-body{padding:22px 20px;display:flex;flex-direction:column;flex:1}
.yzf .ins-cat{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.yzf .ins-card-t{font-size:18px;margin:10px 0;line-height:1.25;color:var(--ink)}
.yzf .ins-card-t a{color:var(--ink);text-decoration:none}
.yzf .ins-card-t a:hover{color:var(--accent)}
.yzf .ins-card-x{color:var(--muted);font-size:14.5px;line-height:1.65;margin:0 0 18px}
.yzf .ins-card-meta{margin-top:auto;display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#8688B4;border-top:1px solid var(--line);padding-top:14px}
.yzf .ins-more{color:var(--accent);text-decoration:none}
.yzf .ins-home-cta{margin-top:32px}
@media(max-width:1020px){.yzf .ins-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.yzf .ins-home-grid{grid-template-columns:1fr}}
/* the Astra and Hostinger floating buttons were sitting on top of card text */
@media(max-width:900px){



}

.yzf footer .foot-nav{display:flex;gap:20px}
.yzf footer .foot-nav a{color:var(--muted);text-decoration:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase;transition:color .25s}
.yzf footer .foot-nav a:hover{color:var(--accent)}
@media(max-width:700px){.yzf footer .foot-nav{gap:14px}}

/* ---- NAV BREAKPOINT (31/08/2026) ----
   Six items crowd between 900 and 1080. Tighten spacing first, then hand over
   to the existing mobile treatment earlier rather than letting the row wrap. */
@media(min-width:901px) and (max-width:1180px){
  .yzf .hdr nav{gap:20px}
  .yzf .hdr nav a{font-size:10px;letter-spacing:.14em}
  .yzf .hdr .btn{padding:0 14px;font-size:10px}
}
@media(min-width:901px) and (max-width:1010px){
  .yzf .hdr nav{gap:14px}
  .yzf .hdr nav a{letter-spacing:.1em}
}
.yzf .hdr nav{flex-wrap:nowrap}
.yzf .hdr nav a{white-space:nowrap}

/* ---- PANEL 2x2 (01/09/2026) ----
   Four options: two mode buttons and two real links. The sliding pill cannot
   map onto a 2x2 with links, so the active state is painted on the cell. */
.yzf .modes.modes-4{grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);overflow:visible}
.yzf .modes.modes-4 .pill{display:none}
.yzf .modes.modes-4>button,.yzf .modes.modes-4>a{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--bg);border:0;margin:0;padding:13px 6px;min-height:46px;cursor:pointer;
  font-family:inherit;font-size:9.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;transition:background-color .28s,color .28s}
.yzf .modes.modes-4>button:hover,.yzf .modes.modes-4>a:hover{color:var(--ink);background:var(--surf)}
.yzf .modes.modes-4>button.on{background:var(--accent);color:#191C4D}
.yzf .modes.modes-4>button:focus-visible,.yzf .modes.modes-4>a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ================= INSIGHTS + RESOURCES MODES (01/09/2026) =================
   Behave exactly like FAQ: content swaps in place, rail, header and footer stay. */
body:not(.mode-insights) #ins-panel{display:none!important}
body:not(.mode-resources) #res-panel{display:none!important}
body.mode-insights .mq,body.mode-insights #about,body.mode-insights #services,
body.mode-insights #systems,body.mode-insights #work,body.mode-insights #process,
body.mode-insights #faq,body.mode-insights #insights,body.mode-insights #product,
body.mode-insights #book,body.mode-insights #res-panel{display:none!important}
body.mode-resources .mq,body.mode-resources #about,body.mode-resources #services,
body.mode-resources #systems,body.mode-resources #work,body.mode-resources #process,
body.mode-resources #faq,body.mode-resources #insights,body.mode-resources #product,
body.mode-resources #book,body.mode-resources #ins-panel{display:none!important}
body.mode-insights #ins-panel .rv,body.mode-resources #res-panel .rv{opacity:1!important;transform:none!important}

/* insight cards on the homepage */
.yzf .ins-home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:38px}
.yzf .panel-empty{margin-top:34px;padding:26px 0;border-top:1px solid var(--line);color:var(--muted);max-width:62ch}
.yzf .panel-cta{margin-top:32px}

/* resource mini-cards */
.yzf .res-home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:38px}
.yzf .res-mini{border:1px solid var(--line);background:var(--surf);padding:26px 24px;display:flex;flex-direction:column}
.yzf .res-mini.is-soon{border-style:dashed}
.yzf .res-mini-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.yzf .res-status{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px}
.yzf .res-status.paid{background:var(--accent);color:#191C4D}
.yzf .res-status.free{border:1px solid var(--accent);color:var(--accent)}
.yzf .res-status.soon{border:1px solid var(--line);color:var(--muted)}
.yzf .res-price{color:var(--ink);font-size:17px}
.yzf .res-mini h3{color:var(--ink);font-size:18px;line-height:1.25;margin:0 0 12px}
.yzf .res-mini p{color:var(--muted);font-size:14.5px;line-height:1.65;margin:0 0 20px}
.yzf .res-mini-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  border:1px solid var(--accent);color:var(--accent);text-decoration:none;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;transition:background-color .25s,color .25s}
.yzf .res-mini-cta:hover{background:var(--accent);color:#191C4D}
.yzf .res-mini-soon{margin-top:auto;display:block;padding:13px 0;text-align:center;border:1px dashed #5C5A94;
  color:#D6D8EC;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:1020px){.yzf .ins-home-grid,.yzf .res-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.yzf .ins-home-grid,.yzf .res-home-grid{grid-template-columns:1fr}}

/* ---- rail: the theme toggle was falling below the fold on short screens ---- */
@media(min-width:961px){
  .yzf .rail{max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .yzf .rail::-webkit-scrollbar{width:6px}
  .yzf .rail::-webkit-scrollbar-thumb{background:var(--line)}
}
@media(min-width:961px) and (max-height:900px){
  .yzf .rail{padding:20px}
  .yzf .portrait{margin-bottom:16px}
  .yzf .hr{margin:16px 0}
  .yzf .rail .btn{margin-top:16px}
}
@media(min-width:961px) and (max-height:800px){
  .yzf .portrait{aspect-ratio:1/0.82}
  .yzf .tagline{font-size:12px}
}

/* ---- portrait: the image was not filling its frame, leaving a strip ---- */
.yzf .portrait{overflow:hidden}
.yzf .portrait img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center 22%;display:block!important;max-width:none!important;margin:0!important}

/* ---- HEADER WITHOUT NAV (01/09/2026): nav removed pending a decision ---- */
.yzf .hdr{justify-content:space-between}
.yzf .hdr .mark{margin-right:auto}

/* ---- PANEL FILTERS + FOOTER SPACING (01/09/2026) ---- */
.yzf .ins-filter-wrap{position:relative;margin-top:34px}
.yzf .ins-filters{display:flex;flex-wrap:wrap;gap:8px}
.yzf .ins-filters a{font-size:11px;letter-spacing:.1em;color:var(--muted);text-decoration:none;
  border:1px solid var(--line);padding:9px 14px;transition:border-color .25s,color .25s;white-space:nowrap}
.yzf .ins-filters a:hover,.yzf .ins-filters a.on{border-color:var(--accent);color:var(--accent)}
.yzf .ins-filters a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.yzf .panel-empty{margin-top:30px;padding:24px 0 10px;border-top:1px solid var(--line)}
@media(max-width:820px){
  .yzf .ins-filters{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:8px;margin-right:-24px;padding-right:24px;scrollbar-width:none}
  .yzf .ins-filters::-webkit-scrollbar{display:none}
  .yzf .ins-filters a{flex:0 0 auto;scroll-snap-align:start}
  .yzf .ins-filter-wrap::after{content:"";position:absolute;right:0;top:0;bottom:8px;width:40px;
    pointer-events:none;background:linear-gradient(90deg,rgba(25,28,77,0),rgba(25,28,77,.96))}
}
/* footer had a large dead band under the last section */
.yzf footer{padding:26px 0 30px;margin-top:0}
.yzf .sec:last-of-type{padding-bottom:44px}
body.mode-insights .sec,body.mode-resources .sec,body.mode-faq .sec{padding-bottom:34px}
@media(max-width:700px){.yzf footer{padding:22px 0 26px}.yzf .sec:last-of-type{padding-bottom:34px}}

.yzf .ins-filters button{font-family:inherit;font-size:11px;letter-spacing:.1em;color:var(--muted);
  background:none;border:1px solid var(--line);padding:9px 14px;cursor:pointer;white-space:nowrap;
  transition:border-color .25s,color .25s}
.yzf .ins-filters button:hover,.yzf .ins-filters button.on{border-color:var(--accent);color:var(--accent)}
.yzf .ins-filters button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:820px){.yzf .ins-filters button{flex:0 0 auto;scroll-snap-align:start}}

/* ---- PANEL BAND (01/09/2026): resources promo inside the insights panel ---- */
.yzf .panel-band{margin-top:44px;padding:34px 30px;background:var(--surf);border:1px solid var(--line)}
.yzf .panel-band .lab{display:block;margin-bottom:14px}
.yzf .panel-band h3{color:var(--ink);font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;line-height:1.15;margin:0 0 12px}
.yzf .panel-band p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 24px;max-width:56ch}
.yzf .panel-band .btn{width:100%;max-width:420px;justify-content:center}
@media(max-width:700px){
  .yzf .panel-band{margin-top:34px;padding:26px 20px}
  .yzf .panel-band .btn{max-width:none}
}

/* ---- FOOTER TRIM (01/09/2026) ---- */
.yzf main{padding-bottom:0}
.yzf footer{padding:24px 0 26px;margin-top:0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between}
.yzf footer span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){
  .yzf footer{display:grid;gap:12px;padding:22px 0 24px;text-align:left}
  .yzf footer .foot-nav{gap:18px}
  .yzf footer span{font-size:10px;letter-spacing:.14em}
  .yzf .sec:last-of-type{padding-bottom:30px}
}

/* ================= LIGHT MODE GRADIENTS (01/09/2026) =================
   Every fade was painted with the dark background colour, so in light mode
   it read as a black or white smear. Each one now follows the theme. */
body.light .yzf .veil,body.light .veil{
  background:linear-gradient(to top,rgba(239,240,245,.96) 0%,rgba(239,240,245,.72) 26%,rgba(239,240,245,.16) 58%,rgba(239,240,245,0) 80%)}
body.light .cap h3{color:var(--ink)}
body.light .cap .lab{color:var(--accent)}
body.light .intro-veil{
  background:linear-gradient(90deg,#EFF0F5 0%,rgba(239,240,245,.9) 26%,rgba(239,240,245,.5) 52%,rgba(239,240,245,0) 84%)}
body.light.rtl .intro-veil{
  background:linear-gradient(270deg,#EFF0F5 0%,rgba(239,240,245,.9) 26%,rgba(239,240,245,.5) 52%,rgba(239,240,245,0) 84%)}
body.light .intro-copy .lab{color:var(--accent)}
body.light .intro-copy h2,body.light #introH{color:var(--ink)}
body.light #introH em,body.light .intro-copy h2 em{color:var(--accent)}
body.light .intro-copy p{color:var(--muted)}
body.light .intro-copy .btn{color:var(--ink);border-color:var(--line);background:transparent}
body.light .intro-copy .btn svg{stroke:var(--ink)}
body.light .intro-copy .btn:hover{color:#EFF0F5;background:var(--accent);border-color:var(--accent)}
body.light .intro-copy .btn:hover svg{stroke:#EFF0F5}
/* filter scroll cue */
.yzf .ins-filter-wrap::after{background:linear-gradient(90deg,rgba(25,28,77,0),rgba(25,28,77,.96))}
body.light .ins-filter-wrap::after{background:linear-gradient(90deg,rgba(239,240,245,0),rgba(239,240,245,.96))}

/* ================= INLINE ARTICLES IN INSIGHTS MODE (01/09/2026) =================
   Full article content renders inside the landing page. No cards, no media boxes. */
.yzf .ins-titles{display:flex;flex-wrap:wrap;gap:8px 22px;margin:26px 0 0}
.yzf .ins-titles a{color:var(--muted);text-decoration:none;font-size:14px;line-height:1.5;
  border-bottom:1px solid transparent;transition:color .22s,border-color .22s}
.yzf .ins-titles a:hover{color:var(--ink);border-color:var(--line)}
.yzf .ins-titles a.on{color:var(--accent);border-color:var(--accent)}
.yzf .ins-titles a[hidden]{display:none}
.yzf .ins-full{max-width:760px;margin:34px 0 0;animation:insIn .4s cubic-bezier(.2,.7,.2,1)}
.yzf .ins-full[hidden]{display:none}
@keyframes insIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.yzf .ins-full .ins-cat{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.yzf .ins-full-t{color:var(--ink);font-size:clamp(26px,3.6vw,42px);letter-spacing:-.02em;line-height:1.14;margin:0 0 16px}
.yzf .ins-full .ins-lede{color:var(--muted);font-size:clamp(15px,1.7vw,17px);line-height:1.65;margin:0 0 18px;max-width:62ch}
.yzf .ins-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;color:#8688B4;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;margin:0 0 30px}
.yzf .yzf-toc{border:1px solid var(--line);background:var(--surf);padding:20px 22px;margin:0 0 32px}
.yzf .yzf-toc-btn{display:none;width:100%;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.yzf .yzf-toc-t{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.yzf .yzf-toc-state{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.yzf .yzf-toc ol{margin:0;padding-left:18px;color:var(--muted)}
.yzf .yzf-toc li{margin-bottom:7px;font-size:14.5px}
.yzf .yzf-toc a{color:var(--muted);text-decoration:none}
.yzf .yzf-toc a:hover{color:var(--accent)}
.yzf .ins-body{font-size:16.5px;line-height:1.78;color:#C7CAE4}
.yzf .ins-body h2{color:var(--ink);font-size:clamp(20px,2.4vw,27px);margin:44px 0 14px;padding-top:26px;border-top:1px solid var(--line);letter-spacing:-.01em}
.yzf .ins-body h3{color:var(--ink);font-size:18px;margin:30px 0 10px}
.yzf .ins-body p{margin:0 0 18px}
.yzf .ins-body ul,.yzf .ins-body ol{margin:0 0 20px;padding-left:22px}
.yzf .ins-body li{margin-bottom:9px}
.yzf .ins-body li::marker{color:var(--accent)}
.yzf .ins-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.yzf .ins-body strong{color:var(--ink)}
.yzf .ins-body table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0 0 22px;font-size:14.5px}
.yzf .ins-body table thead,.yzf .ins-body table tbody{display:table;width:100%;min-width:520px}
.yzf .ins-body th,.yzf .ins-body td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.yzf .ins-body th{color:var(--ink);background:var(--surf)}
.yzf .ins-body h2[id],.yzf .ins-body h3[id]{scroll-margin-top:96px}
.yzf .ins-offer{border:1px solid var(--line);background:var(--surf);padding:28px 26px;margin:46px 0 0}
.yzf .ins-offer-kind{display:inline-block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;background:var(--accent);color:#191C4D;padding:4px 9px;margin-bottom:14px}
.yzf .ins-offer h3{color:var(--ink);font-size:21px;margin:0 0 12px}
.yzf .ins-offer p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 20px}
.yzf .ins-author{border-top:1px solid var(--line);padding-top:28px;margin-top:40px}
.yzf .ins-author h3{color:var(--ink);font-size:17px;margin:0 0 12px}
.yzf .ins-author p{color:var(--muted);font-size:15px;line-height:1.7;margin:0}
@media(max-width:820px){
  .yzf .yzf-toc-btn{display:flex}
  .yzf .yzf-toc ol[hidden]{display:none}
  .yzf .yzf-toc .yzf-toc-t{margin-bottom:0}
  .yzf .ins-full{margin-top:26px}
  .yzf .ins-titles{gap:10px 16px}
}


/* ---- single purple theme (03/09/2026): toggle retired ---- */
.themes{display:none!important}
body.light .slot.filled img,body.light .slot.filled{filter:hue-rotate(142deg) saturate(.82)}

/* pale accents that only worked on a dark ground */
body.light .yzf-btn-solid:hover{background:#4A3BB0;box-shadow:none}
body.light .yzf-btn-solid:focus-visible,body.light .yzf-btn-ghost:focus-visible{outline-color:#5B4BC4}
body.light .yzf .ins-card-media{background:#E7E4FF}
body.light .yzf .ins-card-ph{background:linear-gradient(135deg,#EBEAF7,#DDDEEC)}


/* ================= BATCH A (03/09/2026) ================= */
/* marquee: the non-highlighted words were pale enough to disappear */
body.light .mq-in span{color:#8B85BC}
body.light .mq-in span.hi{color:var(--accent)}

/* anything sitting on a purple fill reads white */
body.light .ins-flag,body.light .ins-offer-kind,body.light .res-status.paid,
body.light .yzf .ins-flag,body.light .yzf .ins-offer-kind{color:#FFFFFF!important}

/* process spine: leaves retired, a light runs the line and sparks at each node */
.sprout{display:none!important}
.stem{overflow:visible}
.stem::after{content:"";position:absolute;left:-3px;width:8px;height:70px;top:-70px;pointer-events:none;
  background:linear-gradient(180deg,rgba(146,132,217,0),rgba(146,132,217,.95) 55%,rgba(146,132,217,0));
  filter:blur(1.5px);animation:yzfRun 3.4s linear infinite}
@keyframes yzfRun{0%{top:-70px;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
.node{overflow:visible}
.node::after{content:"";position:absolute;inset:-10px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(146,132,217,.85),rgba(146,132,217,0) 66%)}
.step.on .node::after{animation:yzfZap .75s ease-out 1}
.node::before{content:"";position:absolute;width:9px;height:14px;pointer-events:none;opacity:0;
  background:#9284D9;clip-path:polygon(58% 0,18% 56%,45% 56%,36% 100%,82% 40%,52% 40%)}
.step.on .node::before{animation:yzfBolt .6s ease-out 1}
@keyframes yzfZap{0%{opacity:0;transform:scale(.35)}18%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2)}}
@keyframes yzfBolt{0%{opacity:0;transform:scale(.5)}25%{opacity:1;transform:scale(1.1)}60%{opacity:.9}100%{opacity:0;transform:scale(1.3)}}
@media(prefers-reduced-motion:reduce){.stem::after{animation:none;display:none}.step.on .node::after,.step.on .node::before{animation:none}}

/* selected work: the section was ending on a long empty run */
#work{padding-bottom:clamp(46px,5vw,84px)}


/* ================= SERVICE DEMO PANELS (03/09/2026) ================= */
body.light .demo{background:#FFFFFF;border-color:var(--line)}

/* ---- 1. Branding: brand board ---- */
.bboard{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto}
.bb-mark{display:flex;align-items:center;gap:10px;padding:16px 18px 0}
.bb-mark svg{width:26px;height:26px;stroke:var(--accent);stroke-width:1.6;fill:none;opacity:0;transform:translateY(-6px);transition:.6s cubic-bezier(.19,1,.22,1)}
.card.in .bb-mark svg{opacity:1;transform:none}
.bb-type{display:flex;align-items:center;gap:18px;padding:6px 18px 14px}
.bb-type b{font-size:54px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--ink);opacity:0;transform:scale(.82);transition:.75s cubic-bezier(.19,1,.22,1) .1s}
.card.in .bb-type b{opacity:1;transform:none}
.bb-type span{display:grid;gap:1px}
.bb-type u{text-decoration:none;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bb-type i{font-style:normal;font-size:12.5px;color:var(--ink);margin-bottom:6px}
.bb-sw{display:grid;grid-template-columns:repeat(6,1fr);height:96px}
.bb-sw i{position:relative;display:block;background:var(--c);transform:translateY(100%);transition:transform .8s cubic-bezier(.19,1,.22,1)}
.bb-sw i:last-child{box-shadow:inset 1px 0 0 var(--line)}
.card.in .bb-sw i{transform:none}
.card.in .bb-sw i:nth-child(2){transition-delay:.07s}
.card.in .bb-sw i:nth-child(3){transition-delay:.14s}
.card.in .bb-sw i:nth-child(4){transition-delay:.21s}
.card.in .bb-sw i:nth-child(5){transition-delay:.28s}
.card.in .bb-sw i:nth-child(6){transition-delay:.35s}
.bb-sw em{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-style:normal;font-size:8px;letter-spacing:.06em;color:rgba(255,255,255,.72)}
.bb-sw i:nth-child(5) em,.bb-sw i:nth-child(6) em{color:rgba(29,31,88,.6)}

/* ---- 2. Web design: the layout assembling ---- */
.demo.build{background:#FFFFFF}
.build .lay{inset:22px 22px 40px}
.lay b{background:#EDEDF6;border-radius:2px;opacity:0;transform:translateY(10px) scale(.96);animation:yzfBuild 7s cubic-bezier(.19,1,.22,1) infinite}
.lay b.acc{background:var(--accent)}
@keyframes yzfBuild{0%{opacity:0;transform:translateY(10px) scale(.96)}12%{opacity:1;transform:none}78%{opacity:1;transform:none}90%{opacity:0;transform:translateY(-6px) scale(.98)}100%{opacity:0;transform:translateY(10px) scale(.96)}}
.build-scan{position:absolute;left:0;right:0;height:2px;top:0;pointer-events:none;background:linear-gradient(90deg,rgba(146,132,217,0),rgba(146,132,217,.85),rgba(146,132,217,0));animation:yzfScan 7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes yzfScan{0%{top:8%;opacity:0}6%{opacity:1}62%{top:88%;opacity:1}72%{opacity:0}100%{top:8%;opacity:0}}
.build-tag{position:absolute;left:22px;bottom:14px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---- 3. Development: the terminal ---- */
.demo.term{background:#1D1F58;border-color:#2C2F6B}
body.light .demo.term{background:#1D1F58;border-color:#2C2F6B}
.term-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.term-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22)}
.term-bar i:first-child{background:#9284D9}
.term-bar span{margin-left:8px;font-size:10.5px;letter-spacing:.1em;color:rgba(255,255,255,.5)}
.term-code{margin:0;padding:16px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.95;color:#C9C3EE;white-space:pre-wrap;word-break:break-word}
.term-code .k{color:#9284D9}
.term-code .s{color:#8FE3C8}
.term-code .c{color:#6E71A8}
.term-code .cur{display:inline-block;width:7px;height:14px;vertical-align:-2px;background:#9284D9;animation:yzfCaret 1s steps(1) infinite}
@keyframes yzfCaret{50%{opacity:0}}

/* ---- 4. E-commerce: the numbers ---- */
.shopviz{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:18px 20px 14px;gap:12px}
.sv-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sv-kpi b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.sv-kpi u{text-decoration:none;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sv-chart{display:flex;align-items:flex-end;gap:5px;min-height:74px}
.sv-chart i{flex:1;display:block;height:0;background:#E0DCF6;border-radius:2px 2px 0 0;transition:height 1.1s cubic-bezier(.2,.7,.2,1)}
.sv-chart i:nth-child(n+8){background:var(--accent)}
.card.in .sv-chart i{height:var(--h)}
.card.in .sv-chart i:nth-child(2){transition-delay:.05s}
.card.in .sv-chart i:nth-child(3){transition-delay:.1s}
.card.in .sv-chart i:nth-child(4){transition-delay:.15s}
.card.in .sv-chart i:nth-child(5){transition-delay:.2s}
.card.in .sv-chart i:nth-child(6){transition-delay:.25s}
.card.in .sv-chart i:nth-child(7){transition-delay:.3s}
.card.in .sv-chart i:nth-child(8){transition-delay:.35s}
.card.in .sv-chart i:nth-child(9){transition-delay:.4s}
.card.in .sv-chart i:nth-child(10){transition-delay:.45s}
.sv-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:10px;font-size:11.5px;color:var(--muted)}
.sv-foot .up{color:var(--accent);font-weight:600}

/* ---- 5. Performance & SEO: the climb ---- */
.rank{position:absolute;inset:0;padding:16px 18px}
.rank-h{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.rk-row{position:absolute;left:18px;right:18px;top:38px;height:30px;display:flex;align-items:center;gap:11px;padding:0 11px;border:1px solid var(--line);background:#FFFFFF;font-size:12px;color:var(--muted);transform:translateY(calc(var(--i,0) * 32px));transition:transform .85s cubic-bezier(.19,1,.22,1),border-color .5s,color .5s,background .5s}
.rk-row b{font-style:normal;font-weight:700;min-width:14px;color:var(--ink);font-size:11.5px}
.rk-row em{font-style:normal;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-row s{text-decoration:none;font-size:10.5px;color:var(--accent);font-weight:600}
.rk-row[data-me]{border-color:var(--accent);color:var(--ink);background:#F3F1FD;font-weight:600}
.rk-row[data-me] b{color:var(--accent)}

@media(max-width:760px){
.bb-type b{font-size:42px}
.bb-sw{height:78px}
.sv-kpi b{font-size:20px}
.term-code{font-size:11px;line-height:1.85}
}
@media(prefers-reduced-motion:reduce){
.lay b,.build-scan{animation:none;opacity:1;transform:none}
.term-code .cur{animation:none}
}


/* ================= INSIGHTS: EDITORIAL REDESIGN (03/09/2026) =================
   Articles render inside the homepage shell, so everything here is .yzf-scoped
   and appended last to win over the original .yzf .ins-body block above. */

.yzf .ins-full{max-width:790px;margin:0 auto}
.yzf .ins-meta{display:none!important}

/* ---- title block ---- */
.yzf .ins-full h1{font-size:clamp(30px,4.4vw,50px);line-height:1.08;letter-spacing:-.028em;color:var(--ink);margin:0 0 20px}
.yzf .ins-full .ins-lede{color:var(--muted);font-size:clamp(16px,1.9vw,19px);line-height:1.6;max-width:64ch;margin:0 0 38px;padding-bottom:32px;border-bottom:1px solid var(--line)}

/* ---- contents ---- */
.yzf .yzf-toc{background:#FFFFFF;border:1px solid var(--line);border-left:2px solid var(--accent);padding:22px 26px;margin:0 0 48px}
.yzf .yzf-toc-t{color:var(--accent)}
.yzf .yzf-toc ol{counter-reset:yzftoc;list-style:none;padding-left:0;margin:0;color:inherit}
.yzf .yzf-toc li{counter-increment:yzftoc;position:relative;padding-left:32px;margin-bottom:10px;font-size:14.5px}
.yzf .yzf-toc li::before{content:counter(yzftoc,decimal-leading-zero);position:absolute;left:0;top:2px;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--accent)}
.yzf .yzf-toc li.lv3{padding-left:48px;font-size:13.5px;opacity:1}
.yzf .yzf-toc li.lv3::before{left:18px}
.yzf .yzf-toc a{color:var(--soft);text-decoration:none}
.yzf .yzf-toc a:hover{color:var(--accent)}

/* ---- body ---- */
.yzf .ins-body{font-size:17px;line-height:1.75;color:#3B3F72;max-width:68ch}
.yzf .ins-body p{margin:0 0 20px}
.yzf .ins-body>p:first-of-type{font-size:18.5px;line-height:1.68;color:#2C2F6B}
.yzf .ins-body strong{color:var(--ink);font-weight:600}
.yzf .ins-body em{color:var(--soft)}

.yzf .ins-body h2{color:var(--ink);font-size:clamp(22px,2.7vw,30px);line-height:1.2;letter-spacing:-.02em;margin:56px 0 18px;padding-top:0;border-top:0}
.yzf .ins-body h2::before{content:"";display:block;width:34px;height:2px;background:var(--accent);margin-bottom:18px}
.yzf .ins-body h3{color:var(--ink);font-size:19px;line-height:1.35;letter-spacing:-.01em;margin:36px 0 10px}

/* ---- lists: purple square bullets, hanging purple numerals ---- */
.yzf .ins-body ul,.yzf .ins-body ol{list-style:none;margin:0 0 26px;padding-left:0}
.yzf .ins-body li{position:relative;padding-left:28px;margin-bottom:12px}
.yzf .ins-body li::marker{color:transparent}
.yzf .ins-body ul>li::before{content:"";position:absolute;left:3px;top:11px;width:5px;height:5px;background:var(--accent)}
.yzf .ins-body ol{counter-reset:yzfol}
.yzf .ins-body ol>li{counter-increment:yzfol}
.yzf .ins-body ol>li::before{content:counter(yzfol);position:absolute;left:0;top:0;font-size:13px;font-weight:700;color:var(--accent);line-height:1.9}
.yzf .ins-body li>ul,.yzf .ins-body li>ol{margin:12px 0 0}

/* ---- quote ---- */
.yzf .ins-body blockquote{margin:36px 0;padding:24px 28px;background:#FFFFFF;border:1px solid var(--line);border-left:2px solid var(--accent);color:var(--ink);font-size:19px;line-height:1.6}
.yzf .ins-body blockquote p{margin:0 0 12px}
.yzf .ins-body blockquote p:last-child{margin:0}

/* ---- links ---- */
.yzf .ins-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.yzf .ins-body a:hover{color:#3B3480}

/* ---- table ---- */
.yzf .ins-body table{margin:0 0 28px;font-size:14.5px}
.yzf .ins-body th{background:#EDEAFB;color:var(--ink);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600}
.yzf .ins-body td{background:#FFFFFF;color:#3B3F72}

/* ---- code ---- */
.yzf .ins-body pre{background:#1D1F58;color:#C9C3EE;border:0;padding:18px 20px;font-size:13px;line-height:1.65;overflow-x:auto;margin:0 0 26px}
.yzf .ins-body code{background:#EDEAFB;color:#3B3480;padding:2px 6px;font-size:.9em;border-radius:2px}
.yzf .ins-body pre code{background:none;color:inherit;padding:0}

/* ---- media and rules ---- */
.yzf .ins-body img{border:1px solid var(--line);margin:10px 0;max-width:100%;height:auto}
.yzf .ins-body figure{margin:32px 0}
.yzf .ins-body figcaption{font-size:12.5px;color:var(--muted);margin-top:10px}
.yzf .ins-body hr{border:0;border-top:1px solid var(--line);margin:48px 0}

/* ---- closing blocks ---- */
.yzf .ins-offer,.yzf .ins-author,.yzf .ins-final,.yzf .ins-promo{background:#FFFFFF;border:1px solid var(--line);padding:28px 30px;margin:44px 0 0}
.yzf .ins-offer p,.yzf .ins-author p,.yzf .ins-final p,.yzf .ins-promo p,.yzf .ins-foot p{color:#4A4E80}
.yzf .ins-offer h2,.yzf .ins-author h2,.yzf .ins-final h2,.yzf .ins-promo h2{border-top:0;padding-top:0;margin-top:0}
.yzf .ins-offer h2::before,.yzf .ins-author h2::before,.yzf .ins-final h2::before,.yzf .ins-promo h2::before{display:none}

/* ---- reading progress ---- */
.yzf-read{position:fixed;left:0;top:0;height:2px;width:0;background:var(--accent);z-index:2147482000;pointer-events:none;transition:width .1s linear}

@media(max-width:760px){
.yzf .ins-full{max-width:100%}
.yzf .ins-body{font-size:16px;max-width:100%}
.yzf .ins-body>p:first-of-type{font-size:17px}
.yzf .yzf-toc{padding:18px 20px}
.yzf .ins-offer,.yzf .ins-author,.yzf .ins-final,.yzf .ins-promo{padding:22px 20px}
}


/* ================= INSIGHTS LANDING: HEADER, FILTERS, INDEX (03/09/2026) ================= */

/* ---- the panel header ---- */
.yzf #ins-panel .sec-h,.yzf #res-panel .sec-h{max-width:20ch}
.yzf #ins-panel .lead,.yzf #res-panel .lead{max-width:58ch;margin-bottom:0}
.yzf .ins-filter-wrap{margin-top:0;padding-top:30px;border-top:1px solid var(--line)}
.yzf #yzf-ins-panel{margin-top:34px}

/* ---- category filters: a real segmented control ---- */
.yzf .ins-filters{gap:10px}
.yzf .ins-filters button,.yzf .ins-filters a{
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);background:#FFFFFF;border:1px solid var(--line);border-radius:999px;
  padding:10px 20px;cursor:pointer;text-decoration:none;line-height:1;
  transition:color .22s,background .22s,border-color .22s,transform .22s}
.yzf .ins-filters button:hover,.yzf .ins-filters a:hover{
  color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.yzf .ins-filters button.on,.yzf .ins-filters a.on{
  color:#FFFFFF;background:var(--accent);border-color:var(--accent)}
.yzf .ins-filters button.on:hover,.yzf .ins-filters a.on:hover{background:#4A3BB0;border-color:#4A3BB0;color:#FFFFFF}

/* ---- article index: a numbered editorial list, not wrapped inline links ---- */
.yzf .ins-titles{display:block;margin:36px 0 0;counter-reset:yzfidx;border-top:1px solid var(--line)}
.yzf .ins-titles a{
  counter-increment:yzfidx;position:relative;display:flex;align-items:baseline;gap:18px;
  padding:20px 44px 20px 0;border-bottom:1px solid var(--line);border-top:0;
  font-size:clamp(16px,1.9vw,19px);line-height:1.35;letter-spacing:-.012em;
  color:var(--soft);text-decoration:none;transition:color .24s,padding-left .24s,background .24s}
.yzf .ins-titles a::before{
  content:counter(yzfidx,decimal-leading-zero);flex:0 0 auto;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--accent);
  position:relative;top:-2px}
.yzf .ins-titles a::after{
  content:"";position:absolute;right:14px;top:50%;width:16px;height:1px;background:var(--muted);
  transition:background .24s,transform .24s}
.yzf .ins-titles a:hover{color:var(--ink);padding-left:10px;border-color:var(--line)}
.yzf .ins-titles a:hover::after{background:var(--accent);transform:translateX(4px)}
.yzf .ins-titles a.on{color:var(--accent);border-color:var(--line);padding-left:10px}
.yzf .ins-titles a.on::after{background:var(--accent);transform:translateX(4px)}
.yzf .ins-titles a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- the opened article sits on a card, clearly separated from the index ---- */
.yzf .ins-full{max-width:790px;margin:46px auto 0;padding:40px 44px;background:#FFFFFF;border:1px solid var(--line)}
.yzf .ins-full .ins-cat{
  display:inline-block;margin-bottom:16px;padding:5px 12px;border-radius:999px;
  background:#EDEAFB;color:var(--accent);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.yzf .ins-full-t{color:var(--ink);font-size:clamp(27px,3.7vw,44px);letter-spacing:-.028em;line-height:1.08;margin:0 0 20px}
.yzf .ins-full .yzf-toc{background:#F7F6FD}

@media(max-width:760px){
.yzf .ins-filters button,.yzf .ins-filters a{padding:9px 16px;font-size:10.5px}
.yzf .ins-titles a{gap:14px;padding:17px 30px 17px 0;font-size:16px}
.yzf .ins-titles a::after{right:6px;width:12px}
.yzf .ins-full{padding:26px 20px;margin-top:34px}
}


/* ================= ASTRA CHROME SUPPRESSION (03/09/2026) =================
   Article URLs render the yzf shell but Astra still prints #masthead and wraps
   everything in ast-narrow-container, which crushed the layout. insights.css
   carried these rules but never loads here, so they belong in this file. */
body.yzf #masthead,body.yzf .site-header,body.yzf .main-header-bar,
body.yzf .ast-above-header,body.yzf .ast-below-header,body.yzf #ast-mobile-header,
body.yzf .site-footer,body.yzf .ast-small-footer,body.yzf .ast-primary-header-bar,
body.yzf .ast-single-post-order,body.yzf .entry-header{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important}
body.yzf #page,body.yzf #content,body.yzf .site-content,body.yzf .ast-container,
body.yzf .site-main,body.yzf .ast-article-single,body.yzf .entry-content,
body.yzf .ast-article-post,body.yzf article.post{max-width:none!important;width:auto!important;
  margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
body.yzf.ast-separate-container,body.yzf.ast-narrow-container{background:var(--bg)!important}
body.yzf .ast-separate-container .ast-article-single{padding:0!important;border-radius:0!important}


/* ================= SERVICE PANELS ON MOBILE (03/09/2026) =================
   Single column stacks the demo at the bottom of a sticky card taller than
   the viewport, so the next card covered it before it was ever reached. */
@media(max-width:1180px){
.stack .card{position:static!important;top:auto!important;margin-bottom:22px}
.card-body>div:first-child{order:1}
.card-body .demo{order:2;min-height:224px}
}
@media(max-width:560px){.card-body .demo{min-height:206px}}

/* each panel now animates from its own visibility, not only the card`s */
.demo.in .bb-mark svg{opacity:1;transform:none}
.demo.in .bb-type b{opacity:1;transform:none}
.demo.in .bb-sw i{transform:none}
.demo.in .bb-sw i:nth-child(2){transition-delay:.07s}
.demo.in .bb-sw i:nth-child(3){transition-delay:.14s}
.demo.in .bb-sw i:nth-child(4){transition-delay:.21s}
.demo.in .bb-sw i:nth-child(5){transition-delay:.28s}
.demo.in .bb-sw i:nth-child(6){transition-delay:.35s}
.demo.in .sv-chart i{height:var(--h)}
.demo.in .sv-chart i:nth-child(2){transition-delay:.05s}
.demo.in .sv-chart i:nth-child(3){transition-delay:.1s}
.demo.in .sv-chart i:nth-child(4){transition-delay:.15s}
.demo.in .sv-chart i:nth-child(5){transition-delay:.2s}
.demo.in .sv-chart i:nth-child(6){transition-delay:.25s}
.demo.in .sv-chart i:nth-child(7){transition-delay:.3s}
.demo.in .sv-chart i:nth-child(8){transition-delay:.35s}
.demo.in .sv-chart i:nth-child(9){transition-delay:.4s}
.demo.in .sv-chart i:nth-child(10){transition-delay:.45s}


/* ================= WEB DESIGN PANEL v2: RESPONSIVE REFLOW (03/09/2026) ================= */
.demo.wb{background:#FFFFFF;display:flex;flex-direction:column}
body.light .demo.wb{background:#FFFFFF}

.wb-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);flex:0 0 auto}
.wb-bar i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.wb-bar i:first-child{background:var(--accent)}
.wb-w{margin-left:auto;font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--muted);
  font-variant-numeric:tabular-nums}
.wb-w::after{content:" PX";font-size:8px;letter-spacing:.1em}

.wb-stage{flex:1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:7px;
  padding:16px;margin:0 auto;width:100%;transition:max-width .9s cubic-bezier(.65,0,.35,1)}
.wb-stage b{display:block;background:#E8E6F6;border-radius:2px;
  opacity:0;transform:translateY(8px);
  transition:width .9s cubic-bezier(.65,0,.35,1),height .9s cubic-bezier(.65,0,.35,1),
             opacity .5s ease,transform .5s cubic-bezier(.19,1,.22,1),outline-color .45s;
  outline:1px solid transparent;outline-offset:2px}
.demo.wb.in .wb-stage b{opacity:1;transform:none}
.demo.wb.in .wb-stage b:nth-child(1){transition-delay:0s,0s,.05s,.05s,0s}
.demo.wb.in .wb-stage b:nth-child(2){transition-delay:0s,0s,.14s,.14s,0s}
.demo.wb.in .wb-stage b:nth-child(3){transition-delay:0s,0s,.23s,.23s,0s}
.demo.wb.in .wb-stage b:nth-child(4){transition-delay:0s,0s,.30s,.30s,0s}
.demo.wb.in .wb-stage b:nth-child(5){transition-delay:0s,0s,.37s,.37s,0s}
.demo.wb.in .wb-stage b:nth-child(6){transition-delay:0s,0s,.44s,.44s,0s}
.demo.wb.in .wb-stage b:nth-child(7){transition-delay:0s,0s,.51s,.51s,0s}
.demo.wb.in .wb-stage b:nth-child(8){transition-delay:0s,0s,.58s,.58s,0s}

.wb-hd{width:100%;height:13px}
.wb-hero{width:100%;height:50px;background:var(--accent)}
.wb-c{width:calc(33.333% - 4.67px);height:38px}
.wb-t{width:calc(62% - 3.5px);height:15px}
.wb-t2{width:calc(38% - 3.5px);height:15px}
.wb-ft{width:100%;height:11px;background:#DFDCF2}

/* tablet: three across becomes two, the split row evens out */
.wb-stage.bp-md{max-width:66%}
.wb-stage.bp-md .wb-c{width:calc(50% - 3.5px)}
.wb-stage.bp-md .wb-hero{height:44px}

/* phone: everything stacks, which is the point being made */
.wb-stage.bp-sm{max-width:38%}
.wb-stage.bp-sm .wb-c{width:100%;height:26px}
.wb-stage.bp-sm .wb-t,.wb-stage.bp-sm .wb-t2{width:100%;height:13px}
.wb-stage.bp-sm .wb-hero{height:38px}

/* the block currently being re-laid gets a purple edge for a beat */
.wb-stage.snap b{outline-color:rgba(146,132,217,.85)}

.wb-tag{position:absolute;left:16px;bottom:10px;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}

@media(max-width:560px){
.wb-stage{padding:13px;gap:6px}
.wb-hero{height:42px}
.wb-c{height:32px}
}
@media(prefers-reduced-motion:reduce){
.wb-stage,.wb-stage b{transition:none}
.demo.wb .wb-stage b{opacity:1;transform:none}
}


/* ================= INSIGHTS: BOOK MODE (03/09/2026) =================
   The article body is flowed into CSS multi-column pages inside a fixed
   viewport and advanced one spread at a time. Content stays in the DOM;
   if the script never runs, the article simply reads as before. */

.yzf .bk{margin:0 0 8px}
.yzf .bk-paper{position:relative;background:#FFFFFF;border:1px solid var(--line);
  padding:44px 52px 30px;box-shadow:0 1px 0 var(--line),0 18px 40px -28px rgba(29,31,88,.45)}
.yzf .bk-head{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:22px;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.yzf .bk-head b{font-weight:600;color:var(--accent)}

.yzf .bk-view{position:relative;overflow:hidden}
.yzf .bk-flow{height:100%;column-fill:auto;
  transition:transform .62s cubic-bezier(.66,0,.24,1)}
.yzf .bk-spine{position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:linear-gradient(180deg,rgba(29,31,88,0),rgba(29,31,88,.13) 12%,rgba(29,31,88,.13) 88%,rgba(29,31,88,0));
  pointer-events:none}
.yzf .bk.one-up .bk-spine{display:none}

/* the turn: the leaf lifts, tilts and settles */
.yzf .bk-view.turn .bk-flow{transform-origin:left center}
.yzf .bk-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(29,31,88,.10),rgba(29,31,88,0) 22%,rgba(29,31,88,0) 78%,rgba(29,31,88,.07));
  transition:opacity .5s ease}
.yzf .bk-view.turn .bk-sheen{opacity:1}

/* ---- book typography ---- */
.yzf .bk .ins-body{max-width:none;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  font-size:16.5px;line-height:1.72;color:#33375F;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.yzf .bk .ins-body p{margin:0 0 15px;orphans:2;widows:2}
.yzf .bk .ins-body>p:first-of-type{font-size:16.5px;color:#33375F}
.yzf .bk .ins-body>p:first-of-type::first-letter{
  float:left;font-size:52px;line-height:.86;font-weight:700;color:var(--accent);
  padding:2px 10px 0 0;font-family:inherit}
.yzf .bk .ins-body h2{font-family:inherit;font-size:20px;margin:26px 0 12px;
  break-after:avoid;page-break-after:avoid;text-align:left;letter-spacing:-.01em}
.yzf .bk .ins-body h2::before{width:26px;margin-bottom:12px}
.yzf .bk .ins-body h3{font-family:inherit;font-size:17px;margin:20px 0 8px;break-after:avoid;text-align:left}
.yzf .bk .ins-body li{text-align:left;margin-bottom:9px;break-inside:avoid}
.yzf .bk .ins-body ul,.yzf .bk .ins-body ol{margin:0 0 18px}
.yzf .bk .ins-body blockquote{margin:22px 0;padding:16px 20px;font-size:16px;text-align:left;break-inside:avoid}
.yzf .bk .ins-body img,.yzf .bk .ins-body figure,.yzf .bk .ins-body table,
.yzf .bk .ins-body pre{break-inside:avoid;max-width:100%}
.yzf .bk .ins-body pre{font-size:12px;white-space:pre-wrap}
.yzf .bk .ins-body hr{margin:26px 0}

/* ---- controls ---- */
.yzf .bk-nav{display:flex;align-items:center;gap:14px;margin-top:18px}
.yzf .bk-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  background:#FFFFFF;border:1px solid var(--line);color:var(--ink);cursor:pointer;
  border-radius:999px;font-size:15px;line-height:1;transition:.22s}
.yzf .bk-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.yzf .bk-btn:disabled{opacity:.35;cursor:default}
.yzf .bk-num{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-variant-numeric:tabular-nums}
.yzf .bk-rail{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden}
.yzf .bk-rail i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);
  transition:width .45s cubic-bezier(.19,1,.22,1)}
.yzf .bk-mode{background:none;border:0;cursor:pointer;padding:6px 2px;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid transparent;transition:.22s}
.yzf .bk-mode:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* scroll mode falls back to the previous reading layout */
.yzf .bk.scrollmode .bk-view{height:auto!important;overflow:visible}
.yzf .bk.scrollmode .bk-flow{transform:none!important;columns:auto!important;width:auto!important;height:auto!important}
.yzf .bk.scrollmode .bk-spine,.yzf .bk.scrollmode .bk-sheen{display:none}
.yzf .bk.scrollmode .bk-num,.yzf .bk.scrollmode .bk-rail,
.yzf .bk.scrollmode .bk-btn{display:none}
.yzf .bk.scrollmode .ins-body{text-align:left;hyphens:manual}
.yzf .bk.scrollmode .ins-body>p:first-of-type::first-letter{float:none;font-size:inherit;
  line-height:inherit;font-weight:inherit;color:inherit;padding:0}

body.bookmode .yzf-read{display:none}

@media(max-width:900px){
.yzf .bk-paper{padding:26px 22px 20px}
.yzf .bk .ins-body{font-size:16px;text-align:left;hyphens:manual}
.yzf .bk .ins-body>p:first-of-type::first-letter{font-size:44px}
.yzf .bk-head{font-size:8.5px;letter-spacing:.16em}
.yzf .bk-nav{gap:10px}
.yzf .bk-btn{width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){
.yzf .bk-flow{transition:none}
.yzf .bk-sheen{display:none}
}