/* Experimental - rzumarli Live — design system.
   Started from the sandeep.design hero language (oversized tight Inter,
   mono micro-labels), then pushed into its own system: Rahmat's brand
   orange #FF6600 as the through-line, outlined display words, giant
   UPRIGHT outlined section numerals, a neutral #FAFAFA ground, imagery
   in its natural colours, a dotted hero field with a neutral paper
   grain, and a light neutral About band so the page breathes
   paper -> tint -> ink. Selected Work is a stack of full-width
   alternating bands in one uniform system. Motion: Anime.js (assets/app.js) + Lenis smooth
   scroll. All hidden states are applied from JS only; with JS or the
   CDNs down, everything below renders fully visible. */

:root{
  --paper:#FAFAFA;
  --paper-deep:#EFEFEF;
  --panel:#F4F4F4;
  --char:rgba(14,14,15,.78);
  --ink:#0E0E0F;
  --ink-soft:rgba(14,14,15,.64);
  --ink-faint:rgba(14,14,15,.44);
  --hair:rgba(14,14,15,.16);
  --orange:#FF6600;
  --orange-deep:#D94F04;
  --paper-soft:rgba(250,250,250,.66);
  --hair-dark:rgba(250,250,250,.18);
  --pad:clamp(20px,4.5vw,64px);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Fragment Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%}
/* Lenis recommended base styles */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font);
  font-size:16px;line-height:1.55;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- scroll progress (JS-driven; gated on the js class) ---------- */
.progress{
  position:fixed;top:0;left:0;z-index:60;
  width:100%;height:3px;background:var(--orange);
  transform:scaleX(0);transform-origin:0 50%;
  opacity:0;pointer-events:none;
}
html.js .progress{opacity:1}

/* ---------- cursor follower (element created by JS; fine pointers only) ---------- */
.cursor-dot{
  position:fixed;top:0;left:0;z-index:200;
  width:10px;height:10px;border-radius:50%;
  background:var(--orange);
  pointer-events:none;opacity:0;
  transition:opacity .3s ease,width .25s ease,height .25s ease;
}
.cursor-dot.is-on{opacity:.9}
.cursor-dot.is-hover{width:30px;height:30px;opacity:.5}

/* Sparkle trail: four-point stars spawned by JS behind the cursor dot.
   The element's box is sized inline (6-10px) and centred on its spawn
   point with negative margins, so Anime.js owns the transform alone.
   No CSS transition: Anime writes every frame. z-index 199 sits just
   under the dot's 200, and body has overflow-x hidden, so a star near
   a viewport edge can never cause a scrollbar. */
.cursor-sparkle{
  position:fixed;top:0;left:0;z-index:199;
  pointer-events:none;opacity:0;
  background:var(--orange);
  clip-path:polygon(50% 0%,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0% 50%,37% 37%);
}
.cursor-sparkle.ink{background:var(--ink)}

/* ---------- micro labels ---------- */
.mono{
  font-family:var(--mono);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--hair);background:var(--paper)}
.head-inner{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:20px;padding-bottom:20px;
}
.wordmark{font-weight:600;font-size:17px;letter-spacing:-.01em;text-decoration:none}
.head-nav{display:flex;align-items:center;gap:10px}
/* Single menu icon at every width: the header bar holds only the
   wordmark, this toggle, and the Get in touch CTA; all navigation
   lives in the full-screen overlay below (mirrors the live site). */
.menu-btn{
  width:40px;height:40px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:2px;padding:0;
  color:var(--ink);cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.menu-btn:hover{background:var(--paper-deep)}
.menu-btn .ic-close{display:none}
.menu-btn[aria-expanded="true"] .ic-open{display:none}
.menu-btn[aria-expanded="true"] .ic-close{display:block}
/* Mobile: the Get in touch CTA is hidden, leaving logo + menu icon. */
@media (max-width:767px){
  .head-cta{display:none}
}
/* While the dark overlay is open the header pins above it and reads
   light: wordmark and toggle (now an x) switch to #FAFAFA, and the
   ink Get in touch CTA flips to the accent so it stays visible. */
body.menu-open .site-head{
  position:fixed;top:0;left:0;right:0;z-index:130;
  background:transparent;border-bottom-color:transparent;
}
body.menu-open .wordmark,
body.menu-open .menu-btn{color:var(--paper)}
body.menu-open .menu-btn:hover{background:rgba(250,250,250,.12)}
body.menu-open .head-cta{background:var(--orange);border-color:var(--orange);color:#fff}
body.menu-open .head-cta::before{background:var(--ink)}
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-size:14px;font-weight:500;line-height:1;
  padding:13px 20px;border-radius:2px;
  border:1px solid var(--ink);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover,.btn-solid:focus-visible{border-color:var(--orange);color:#fff}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange-deep)}
.btn-paper{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-paper:hover,.btn-paper:focus-visible{border-color:var(--orange);color:#fff}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
/* Filled (primary) buttons: a small disc rests at the button's centre
   (8px at rest) and, on hover/focus, expands until it fills the whole
   button while the label flips colour above it. The disc is a negative
   z-index child inside an isolated stacking context, so it paints
   above the button's own background but below its label. */
.btn-solid,.btn-dark,.btn-paper,.btn-on-terra{position:relative;overflow:hidden;isolation:isolate}
.btn-solid::before,.btn-dark::before,.btn-paper::before,.btn-on-terra::before{
  content:"";position:absolute;left:50%;top:50%;z-index:-1;pointer-events:none;
  width:400px;height:400px;border-radius:50%;background:var(--orange);
  transform:translate(-50%,-50%) scale(.02);
  transition:transform .42s cubic-bezier(.65,0,.25,1);
}
.btn-on-terra::before{background:var(--ink)}
.btn-solid:hover::before,.btn-solid:focus-visible::before,
.btn-dark:hover::before,.btn-dark:focus-visible::before,
.btn-paper:hover::before,.btn-paper:focus-visible::before,
.btn-on-terra:hover::before,.btn-on-terra:focus-visible::before{
  transform:translate(-50%,-50%) scale(1);
}
@media (prefers-reduced-motion: reduce){
  .btn-solid::before,.btn-dark::before,.btn-paper::before,.btn-on-terra::before{transition:none}
}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(26px,4vw,44px) 0 clamp(48px,6vw,84px);overflow:hidden}
.hero-grain{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(14,14,15,.13) 1px,transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 18% 0%,#000 30%,transparent 75%);
          mask-image:radial-gradient(ellipse 90% 70% at 18% 0%,#000 30%,transparent 75%);
  opacity:.5;
}
.hero-grain::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:multiply;
}
.hero-meta{
  position:relative;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  color:var(--ink-soft);
}
.avail{display:inline-flex;align-items:center;gap:9px}
.dot{position:relative;width:8px;height:8px;flex:none}
.dot::before{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--orange);
}
.dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--orange);background:transparent;
  animation:pulse 2s ease-out infinite;
}
html.has-anime .dot::after{animation:none;opacity:0}
@keyframes pulse{
  0%{transform:scale(1);opacity:1}
  100%{transform:scale(2.4);opacity:0}
}
.hero h1{
  position:relative;
  margin-top:clamp(30px,5vw,58px);
  font-size:clamp(52px,8.4vw,104px);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:.98;
  max-width:13em;
}
.hl-mask{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.hl{display:block;will-change:transform}
.hl.acc{color:var(--orange)}
/* description (left) and CTA group (right) share one row under the title */
.hero-row{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(22px,3.5vw,52px);flex-wrap:wrap;
  margin-top:clamp(24px,3.4vw,36px);
}
.hero-desc{
  position:relative;
  font-size:clamp(17px,1.6vw,20px);
  line-height:1.5;color:var(--ink-soft);
  max-width:56ch;
}
.hero-row .hero-desc{flex:1 1 340px}
.hero-row .hero-ctas{flex:none}
.hero-side{
  position:absolute;top:0;bottom:0;right:calc(var(--pad) * .45);width:0;
  border-right:1px dotted rgba(14,14,15,.28);pointer-events:none;
}
.hero-side::after{
  content:"";position:absolute;top:16%;right:-4.5px;width:8px;height:8px;border-radius:50%;
  background:var(--orange);
}
.hero-side-l{right:auto;left:calc(var(--pad) * .45);border-right:0;border-left:1px dotted rgba(14,14,15,.28)}
.hero-side-l::after{right:auto;left:-4.5px}
.hero-ctas{position:relative;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.fact-strip{
  position:relative;
  margin-top:clamp(36px,5vw,60px);
  border-top:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  padding-top:22px;
}
.fact .k{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.fact .v{margin-top:6px;font-size:16px;font-weight:500}

/* ---------- imagery: natural colours, only a subtle scale on hover ---------- */
.band .b-img img{transition:transform .5s ease}
.band:hover .b-img img,.band:focus-visible .b-img img{transform:scale(1.03)}

/* ---------- sections ---------- */
.section{padding:clamp(52px,7vw,96px) 0}
.section + .section{border-top:1px solid var(--hair)}
.sec-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;
  margin-bottom:clamp(28px,4vw,44px);
}
.sec-label{display:flex;align-items:center;gap:18px;color:var(--ink-soft)}
.sec-label .n{
  font-family:var(--font);
  font-size:clamp(46px,5.6vw,72px);font-weight:800;letter-spacing:-.03em;line-height:.78;
  color:transparent;
  -webkit-text-stroke:1.5px var(--ink);
}
.band-about .sec-label .n{-webkit-text-stroke-color:var(--ink)}
.sec-head h2{
  margin-top:14px;
  font-size:clamp(32px,4.4vw,52px);font-weight:600;letter-spacing:-.035em;line-height:1;
}
.w-out{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.dark-zone .w-out{-webkit-text-stroke-color:var(--paper)}
.text-link{font-size:14px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--ink)}
.text-link:hover{color:var(--orange-deep);border-color:var(--orange)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.step{background:var(--paper);padding:clamp(20px,2.4vw,28px)}
.step .s-num{
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--orange-deep);
  display:inline-block;
}
.step h3{margin-top:14px;font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.step p{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}

/* work: full-width alternating bands, one uniform system.
   Band 1 image left / text right, band 2 flipped, band 3 like band 1;
   identical structure, gap rhythm and 16/10 imagery on every band,
   a hairline above each band and one below the stack. */
.section-work{border-top:1px solid var(--hair)}
.work-bands{border-bottom:1px solid var(--hair)}
.band{
  display:flex;align-items:center;gap:clamp(28px,4.5vw,64px);
  padding:clamp(30px,4vw,48px) 0;
  border-top:1px solid var(--hair);
  text-decoration:none;
}
.band.flip{flex-direction:row-reverse}
.band .b-img{display:block;overflow:hidden;flex:1.08 1 0;min-width:0}
.band .b-img img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.band .b-body{display:block;flex:.92 1 0;min-width:0}
.band .b-top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  color:var(--ink-soft);
}
.band .b-top .mono{margin-top:clamp(6px,.7vw,10px)}
.band .b-num{
  font-size:clamp(50px,5.4vw,74px);font-weight:800;letter-spacing:-.03em;line-height:.78;
  color:transparent;-webkit-text-stroke:1.5px var(--ink);
  transition:-webkit-text-stroke-color .3s ease;
}
.band:hover .b-num,.band:focus-visible .b-num{-webkit-text-stroke-color:var(--orange)}
.band h3{margin-top:14px;font-size:clamp(25px,2.9vw,36px);font-weight:600;letter-spacing:-.02em;line-height:1.14}
.band:hover h3,.band:focus-visible h3{color:var(--orange-deep)}
.meta-pairs{display:flex;gap:26px;flex-wrap:wrap;margin-top:12px}
.meta-pairs>span{display:block}
.meta-pairs .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);display:block}
.meta-pairs .v{font-size:14px;font-weight:500;display:block;margin-top:3px}

/* about band (light warm) */
.band-about{
  background:linear-gradient(180deg,var(--paper-deep),var(--paper));
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.band-about .about-statement{
  font-size:clamp(26px,3.6vw,42px);font-weight:500;letter-spacing:-.025em;line-height:1.16;
  max-width:24em;
}
.band-about .about-body{margin-top:22px;max-width:62ch;color:var(--ink-soft);font-size:16px}
.band-about .about-cta{margin-top:28px}

/* writing rows */
.posts{border-bottom:1px solid var(--hair)}
.post{
  display:grid;grid-template-columns:120px 1fr auto;gap:clamp(16px,3vw,36px);align-items:baseline;
  text-decoration:none;border-top:1px solid var(--hair);padding:24px 0;
}
.post .p-date{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.post .p-main{display:block}
.post h3{font-size:clamp(21px,2.4vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.post:hover h3,.post:focus-visible h3{color:var(--orange-deep)}
.post p{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--ink-soft);max-width:62ch}
.post .t-cta{font-size:14px;font-weight:500;border-bottom:1px solid var(--ink);white-space:nowrap}
.post:hover .t-cta{color:var(--orange-deep);border-color:var(--orange)}

/* cta + footer (dark zone) */
.dark-zone{background:var(--ink);color:var(--paper)}
.cta-band{padding:clamp(56px,7vw,96px) 0;border-bottom:1px solid var(--hair-dark)}
.cta-band .inner{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(28px,4vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.cta-band p{margin-top:10px;color:var(--paper-soft)}
footer .foot-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:32px;
  padding:clamp(40px,5vw,60px) 0 34px;
}
.foot-col .label-sm{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-soft)}
.foot-col a{display:block;width:fit-content;margin-top:12px;text-decoration:none;font-size:15px;color:var(--paper)}
.foot-col a:hover{color:var(--orange)}
.foot-col nav a:first-child{margin-top:12px}
.foot-bottom{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--hair-dark);padding:20px 0 26px;
  font-size:13px;color:var(--paper-soft);
}
.foot-mark{overflow:hidden}
.foot-mark .giant{
  font-size:clamp(56px,12.6vw,178px);
  font-weight:700;letter-spacing:-.03em;line-height:.92;
  white-space:nowrap;
  color:#FAFAFA;
  transform:translateY(16%);
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  /* work bands stack: image above text, same order on every band */
  .band,.band.flip{flex-direction:column;align-items:stretch;gap:20px}
  .band .b-img,.band .b-body{flex:none}
  /* hero row stacks: description first, buttons below it, left-aligned */
  .hero-row{flex-direction:column;align-items:flex-start;gap:22px}
  .hero-row .hero-desc{flex:none}
  .hero-row .hero-ctas{justify-content:flex-start}
}
@media (max-width:960px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .post{grid-template-columns:1fr}
  .post .t-cta{justify-self:start}
}
@media (max-width:640px){
  .fact-strip{grid-template-columns:1fr;gap:16px}
  footer .foot-grid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(42px,13vw,54px)}
  .hero-side,.hero-side-l{display:none}
}
@media (prefers-reduced-motion: reduce){
  .dot::after{animation:none}
  .band .b-img img{transition:none}
  .band .b-num{transition:none}
}

/* =====================================================================
   Content pages (ported from the live site, experimental language).
   Case studies and Minds posts sit in a centered single column
   (main.pg-case / main.pg-post narrows every .wrap); body copy stays
   left-aligned inside the column. All other pages use the full wrap.
   ===================================================================== */
main.pg-case .wrap,main.pg-post .wrap{max-width:calc(70ch + 2 * var(--pad))}

/* ---------- content type ---------- */
.h1{font-size:clamp(36px,5vw,58px);font-weight:600;letter-spacing:-.035em;line-height:1.02}
.h2{font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.h3{font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.lede{font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.6;color:var(--ink-soft);max-width:68ch}
.body-txt{font-size:15.5px;line-height:1.65;color:var(--char)}
.body-txt + .body-txt{margin-top:16px}
.muted{color:var(--ink-faint)}
.eyebrow{
  display:inline-block;font-family:var(--mono);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep);
}
.label-sm{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.spec-line{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-faint);line-height:1.5}
.serif-quote{font-style:italic;font-weight:500;font-size:clamp(20px,2.6vw,26px);line-height:1.4;letter-spacing:-.01em}

/* ---------- content buttons ---------- */
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover,.btn-dark:focus-visible{border-color:var(--orange);color:#fff}
.btn-on-terra{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-on-terra:hover,.btn-on-terra:focus-visible{border-color:var(--ink);color:#fff}
.btn:not(.btn-solid):not(.btn-paper):not(.btn-dark):not(.btn-on-terra):hover{border-color:var(--orange);color:var(--orange-deep)}

/* ---------- page heads ---------- */
.page-head{padding:clamp(48px,6vw,84px) 0 clamp(44px,5vw,64px);border-bottom:1px solid var(--hair)}
.page-head .h1{margin-top:20px;max-width:16em}
.page-head .lede{margin-top:22px}
.post-head{padding:clamp(48px,6vw,84px) 0 0}
.post-meta-line{
  margin-top:20px;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- spec row (case meta) ---------- */
.spec-row{display:grid;border-top:1px solid var(--hair);border-left:1px solid var(--hair);margin-top:44px}
.spec-row .cell{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:16px 18px}
.spec-row .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.spec-row .v{font-size:14.5px;font-weight:600;margin-top:5px;line-height:1.45}
.spec-row.c6{grid-template-columns:repeat(6,1fr)}
.spec-row.c4{grid-template-columns:repeat(4,1fr)}
.spec-row.c3{grid-template-columns:repeat(3,1fr)}
main.pg-case .page-head{text-align:center}
main.pg-case .page-head .h1,main.pg-case .page-head .lede{margin-left:auto;margin-right:auto}
main.pg-case .spec-row .cell{text-align:center}

/* ---------- tiles (case studies + minds indexes) ---------- */
.tile-grid{display:grid;border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.tile-grid.c3{grid-template-columns:repeat(3,1fr)}
.tile-grid.c2{grid-template-columns:repeat(2,1fr)}
.tile-grid.c4{grid-template-columns:repeat(4,1fr)}
.tile{
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:26px;text-decoration:none;display:flex;flex-direction:column;background:var(--paper);
}
a.tile{transition:background .2s ease}
a.tile:hover{background:var(--panel)}
.tile .t-img{display:block;border:1px solid var(--hair);overflow:hidden;background:#fff;margin-bottom:20px}
.tile .t-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .35s ease}
a.tile:hover .t-img img{transform:scale(1.04)}
.tile .t-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tile .t-num{font-family:var(--mono);font-size:12px;color:var(--orange-deep)}
.tile h3{margin-top:12px}
.tile .t-desc{margin-top:10px}
.tile .t-meta{margin-top:auto;padding-top:20px}
.tile .t-cta{margin-top:18px}
.post-tile .p-date{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.post-tile h3{margin-top:12px;font-size:21px}
.post-tile p{margin-top:10px}

/* ---------- case pages: centered single column ---------- */
.case-toc{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:8px 26px;padding-top:30px;padding-bottom:6px;
}
.case-toc a{
  text-decoration:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;padding:8px 2px;border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.case-toc a:hover{color:var(--orange-deep);border-bottom-color:var(--orange)}
.case-toc a.all{color:var(--ink-faint)}
.case-toc a.all:hover{color:var(--orange-deep)}
.case-layout{display:block;padding:34px 0 clamp(64px,8vw,110px)}
.case-sec{scroll-margin-top:28px;padding:46px 0;border-top:1px solid var(--hair)}
.case-sec:first-child{border-top:none;padding-top:6px}
.case-sec .sec-label{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--orange-deep);text-align:center;
}
.case-sec h2{margin:14px auto 0;max-width:22em;text-align:center}
.case-sec .body-txt{max-width:68ch;margin-left:auto;margin-right:auto}
.case-sec h2 + .body-txt,.case-sec figure + .body-txt{margin-top:20px}
.case-sec h3.sub{font-size:19px;font-weight:600;margin-top:44px;text-align:center}
.case-sec h3.sub + .body-txt{margin-top:12px}
figure.fig{margin:34px 0 0;border:1px solid var(--hair);overflow:hidden;background:#fff}
figure.fig img{width:100%}
figure.fig figcaption{
  padding:11px 16px;font-size:13px;color:var(--ink-soft);
  border-top:1px solid var(--hair);background:var(--paper);text-align:center;
}
.img-gap{
  border:1px solid var(--hair);background:var(--panel);
  outline:1px solid var(--hair);outline-offset:-10px;
  min-height:260px;display:flex;align-items:center;justify-content:center;margin-top:34px;
  padding:32px;text-align:center;
}
.img-gap span{font-style:italic;color:var(--ink-faint);font-size:16px}
.pull{margin:44px 0 8px;padding:34px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);text-align:center}
.pull .attr{
  margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);font-style:normal;
}
.case-foot{
  display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:center;align-items:center;
  border-top:1px solid var(--hair);padding:30px 0 0;margin-top:16px;
}
.case-pager{
  display:flex;flex-wrap:wrap;gap:18px 28px;justify-content:space-between;
  border-top:1px solid var(--hair);padding:26px 0 0;margin-top:30px;
}
.case-pager .pg{
  display:flex;flex-direction:column;gap:7px;text-decoration:none;
  min-width:0;max-width:48%;
}
.case-pager .pg.next{margin-left:auto;text-align:right;align-items:flex-end}
.case-pager .pg-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);
  transition:color .2s ease;
}
.case-pager .pg-title{
  font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em;
  transition:color .2s ease;
}
.case-pager .pg:hover .pg-label,
.case-pager .pg:hover .pg-title,
.case-pager .pg:focus-visible .pg-label,
.case-pager .pg:focus-visible .pg-title{color:var(--orange-deep)}

/* ---------- token panel / swatches / type table / icons / demos ---------- */
.token-panel{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hair);margin-top:44px;overflow:hidden;text-align:left}
.token-panel .tp{padding:26px;border-left:1px solid var(--hair);background:var(--paper)}
.token-panel .tp:first-child{border-left:none}
.token-panel .tp .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.token-panel .dots{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.token-panel .dots i{width:26px;height:26px;border-radius:50%;border:1px solid var(--hair);display:block}
.token-panel .aa{font-size:56px;font-weight:700;line-height:1;margin-top:12px}
.token-panel .tp-lines{margin-top:14px;font-size:15px;line-height:1.7}
.token-panel .comp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{
  display:inline-block;border:1px solid var(--hair);padding:7px 12px;
  font-size:13px;font-weight:500;background:var(--paper);line-height:1.3;
}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-left:1px solid var(--hair);margin-top:26px}
.sw{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:16px}
.sw i{display:block;height:52px;border:1px solid var(--hair);margin-bottom:12px}
.sw .n{font-size:13px;font-weight:600}
.sw .s{font-size:13px;color:var(--ink-faint)}
.note-line{margin-top:16px;font-size:13px;color:var(--ink-faint)}
.case-sec .note-line{text-align:center}
.type-table{margin-top:26px;border-top:1px solid var(--hair)}
.type-table .tr{display:grid;grid-template-columns:170px 1fr 110px;gap:20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--hair)}
.type-table .tn{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.type-table .ts{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);text-align:right}
.icon-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-left:1px solid var(--hair);margin-top:26px}
.icon-cell{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:22px 16px;text-align:center}
.icon-cell svg{margin:0 auto 10px}
.icon-cell .il{font-size:13px;font-weight:600}
.demo-panel{border:1px solid var(--hair);padding:28px;margin-top:26px;background:var(--paper);text-align:left}
.demo-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.demo-row + .demo-row{margin-top:22px}
.demo-btn{
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  padding:12px 20px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
}
.demo-btn:hover{background:var(--orange);border-color:var(--orange)}
.demo-btn-ter{background:none;border:none;color:var(--ink);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:12px 6px;text-decoration:underline;text-underline-offset:4px;cursor:pointer;transition:color .2s ease}
.demo-btn-ter:hover{color:var(--orange-deep)}
.demo-badge{background:var(--orange);color:#fff;padding:5px 10px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.demo-tag{border:1px solid var(--hair);padding:5px 10px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.demo-field{display:flex;flex-direction:column;gap:8px;max-width:320px;flex:1 1 240px}
.demo-field label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.demo-field input{border:1px solid var(--hair);padding:12px 14px;font:inherit;font-size:15px;background:#fff;color:var(--ink)}
.demo-field input:focus{outline:2px solid var(--orange);outline-offset:1px}
.switch-row{display:flex;align-items:center;gap:12px;font-size:15px}
.switch{
  width:46px;height:26px;border-radius:999px;background:#D8D8D8;border:1px solid var(--hair);
  position:relative;padding:0;flex:none;cursor:pointer;
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#fff;border:1px solid var(--hair);transition:left .2s ease;
}
.switch[aria-checked="true"]{background:var(--orange);border-color:var(--orange)}
.switch[aria-checked="true"]::after{left:22px}
.motion-frame{border:1px solid var(--hair);overflow:hidden;margin-top:34px;background:var(--panel)}
.motion-frame iframe{width:100%;aspect-ratio:1000/460;border:0;display:block}

/* ---------- minds posts ---------- */
.post-body{max-width:780px;padding:clamp(36px,5vw,54px) 0 clamp(64px,8vw,96px)}
.post-body p{max-width:68ch}
.post-body .standfirst{font-size:18px;line-height:1.65;color:var(--char)}
.post-body figure.fig{margin-top:36px}
.orig-block{margin-top:56px;border-top:1px solid var(--hair);padding-top:28px}
.orig-block p{font-size:15px;color:var(--char)}
.orig-block .btn{margin-top:18px}
.post-nav{
  display:flex;flex-direction:column;gap:12px;align-items:stretch;
  border-top:1px solid var(--hair);padding:28px 0 0;margin-top:44px;
}
.post-nav > span{display:contents !important}
.post-nav a{
  display:flex;align-items:center;min-height:58px;padding:16px 20px;
  border:1px solid var(--hair);background:var(--paper);text-decoration:none;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.post-nav a:hover{background:var(--panel);border-color:var(--ink);color:var(--ink)}
.medium-card{
  margin-top:56px;border:1px solid var(--hair);padding:28px;
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;background:var(--panel);
}

/* ---------- resume ---------- */
.resume-head{padding:clamp(48px,6vw,84px) 0 clamp(40px,5vw,56px);border-bottom:1px solid var(--hair)}
.resume-head .role-line{margin-top:14px;font-size:17px;color:var(--char)}
.resume-contacts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;font-size:15px}
.resume-contacts a{text-decoration:none;font-weight:600}
.resume-contacts a:hover{color:var(--orange-deep)}
.resume-grid{display:grid;grid-template-columns:1fr 320px;gap:clamp(40px,5vw,64px);padding:clamp(48px,6vw,72px) 0 clamp(72px,8vw,110px);align-items:start}
.r-sec{margin-bottom:64px}
.r-sec > .eyebrow{margin-bottom:26px}
/* Experience as a descending vertical stepper (mirrors the live
   resume): numbered nodes step down a vertical rail, each entry's
   content beside its node. */
.exp-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.exp-step{
  position:relative;display:grid;grid-template-columns:40px 1fr;column-gap:22px;
  padding:26px 0 42px;
}
.exp-step:last-child{padding-bottom:4px}
.exp-step::before{
  content:"";position:absolute;left:19px;top:74px;bottom:0;
  width:2px;background:var(--hair);
}
.exp-step:last-child::before{display:none}
.exp-step-num{
  width:40px;height:40px;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;position:relative;z-index:1;
}
.exp-step:first-child .exp-step-num{background:var(--orange);color:#fff}
.exp-step-main{min-width:0}
.exp-head{display:grid;grid-template-columns:1fr 180px;gap:18px;align-items:baseline}
.exp-head h3{font-size:19px}
.exp-head .co{font-size:15px;color:var(--char);margin-top:3px}
.exp-head .per{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap;text-align:right;
}
.exp-step ul{list-style:none;margin-top:16px;padding:0}
.exp-step ul li{position:relative;padding-left:20px;margin-top:8px;color:var(--char);line-height:1.6}
.exp-step ul li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;background:var(--orange)}
.exp-step .exp-note{margin:14px 0 0;color:var(--char);line-height:1.65}
.cred{border:1px solid var(--hair);padding:26px 28px;margin-top:2px;background:var(--paper)}
.cred h3{font-size:19px}
.cred p{margin-top:6px;color:var(--char)}
.cred .btn{margin-top:18px}
.side-group{border-top:1px solid var(--hair);padding-top:24px;margin-bottom:40px}
.side-group .label-sm{color:var(--ink-faint);display:block;margin-bottom:16px}
.side-group .sub{font-size:15px;font-weight:600;margin:18px 0 10px}
.side-group .sub:first-of-type{margin-top:0}
.chip-wrap{display:flex;flex-wrap:wrap;gap:8px}
.side-list{list-style:none;padding:0}
.side-list li{padding:8px 0;border-bottom:1px solid var(--hair);color:var(--char)}
.side-kv{padding:10px 0;border-bottom:1px solid var(--hair)}
.side-kv .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.side-kv .v{font-size:15px;font-weight:600;margin-top:3px;line-height:1.45}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(40px,5vw,64px);padding:clamp(48px,6vw,72px) 0 clamp(72px,8vw,110px);align-items:start}
.about-grid .body-txt{font-size:16px}
.about-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.glance{border:1px solid var(--hair);padding:28px;background:var(--panel)}
.glance h3{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.glance .side-kv:last-child{border-bottom:none}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,4vw,48px);padding:clamp(48px,6vw,72px) 0 clamp(72px,8vw,110px);align-items:start}
.form-panel{background:var(--ink);padding:36px;color:var(--paper)}
.form-panel .f-field{margin-bottom:20px}
.form-panel label{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:9px;color:var(--paper);
}
.form-panel input,.form-panel textarea{
  width:100%;border:1px solid var(--paper);background:var(--paper);color:var(--ink);
  padding:13px 14px;font:inherit;font-size:15px;font-weight:500;
}
.form-panel input{height:48px}
.form-panel textarea{min-height:150px;resize:vertical}
.form-panel input:focus,.form-panel textarea:focus{outline:2px solid var(--orange);outline-offset:1px}
.form-panel .f-note{margin-top:18px;font-size:14px;color:var(--paper-soft);line-height:1.6}
.form-panel .f-note a{color:var(--paper);font-weight:600}
.form-panel a:focus-visible,.form-panel button:focus-visible{outline-color:var(--orange)}
.c-block{border-top:1px solid var(--hair);padding:28px 0}
.c-block:first-child{border-top:none;padding-top:0}
.c-block h2{font-size:24px}
.c-block .big-mail{display:inline-block;margin-top:14px;font-size:19px;font-weight:600;text-decoration:none;word-break:break-all}
.c-block .big-mail:hover{color:var(--orange-deep)}
.c-block .btn{margin-top:16px}
.elsewhere a{
  display:flex;justify-content:space-between;text-decoration:none;font-size:15px;font-weight:600;
  padding:11px 0;border-bottom:1px solid var(--hair);
}
.elsewhere a:hover{color:var(--orange-deep)}
.know-card{background:var(--panel);border:1px solid var(--hair);padding:26px 28px}
.know-card h3{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.know-card .side-kv:last-child{border-bottom:none}

/* ---------- content pages: responsive ---------- */
@media (max-width:1100px){
  .spec-row.c6{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .tile-grid.c3,.tile-grid.c2,.tile-grid.c4{grid-template-columns:1fr}
  .resume-grid{grid-template-columns:1fr;gap:8px}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .exp-step{grid-template-columns:34px 1fr;column-gap:16px}
  .exp-step::before{left:16px;top:68px}
  .exp-step-num{width:34px;height:34px;font-size:14px}
  .exp-head{grid-template-columns:1fr}
  .exp-head .per{text-align:left}
  .token-panel{grid-template-columns:1fr}
  .token-panel .tp{border-left:none;border-top:1px solid var(--hair)}
  .token-panel .tp:first-child{border-top:none}
  .spec-row.c4{grid-template-columns:repeat(2,1fr)}
  .swatches,.icon-grid{grid-template-columns:repeat(2,1fr)}
  .type-table .tr{grid-template-columns:1fr;gap:4px}
  .type-table .ts{text-align:left}
  .form-panel{padding:26px 22px}
}
@media (max-width:640px){
  .spec-row.c6,.spec-row.c4,.spec-row.c3{grid-template-columns:repeat(2,1fr)}
  .case-pager{flex-direction:column}
  .case-pager .pg{max-width:100%}
  .case-pager .pg.next{margin-left:0;text-align:left;align-items:flex-start}
}

/* ---------- full-screen menu ----------
   One toggle opens a dark overlay whose backdrop is FOUR vertical
   columns sweeping down with a per-column stagger (Anime.js drives
   the columns when its CDN is up; the html:not(.has-anime) rules
   below carry the identical stagger with CSS transitions, and
   closing reverses the column order). Content fades in over the
   completed backdrop, staggered per link like the live site. The
   overlay is visibility:hidden whenever closed, so its links are
   never focusable or clickable behind the page. */
body.menu-open{overflow:hidden}
.full-menu{
  position:fixed;inset:0;z-index:120;height:100dvh;
  visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .72s;
}
.full-menu.open{visibility:visible;pointer-events:auto;transition-delay:0s}
.fm-cols{position:absolute;inset:0;display:flex}
.fm-col{
  flex:1 1 25%;background:var(--ink);
  transform:scaleY(0);transform-origin:top center;
}
html:not(.has-anime) .fm-col{
  transition:transform .44s cubic-bezier(.76,0,.24,1);
}
html:not(.has-anime) .fm-col:nth-child(1){transition-delay:.21s}
html:not(.has-anime) .fm-col:nth-child(2){transition-delay:.14s}
html:not(.has-anime) .fm-col:nth-child(3){transition-delay:.07s}
html:not(.has-anime) .fm-col:nth-child(4){transition-delay:0s}
html:not(.has-anime) .full-menu.open .fm-col{transform:scaleY(1)}
html:not(.has-anime) .full-menu.open .fm-col:nth-child(1){transition-delay:0s}
html:not(.has-anime) .full-menu.open .fm-col:nth-child(2){transition-delay:.07s}
html:not(.has-anime) .full-menu.open .fm-col:nth-child(3){transition-delay:.14s}
html:not(.has-anime) .full-menu.open .fm-col:nth-child(4){transition-delay:.21s}
.fm-inner{
  position:relative;z-index:1;height:100%;
  display:flex;flex-direction:column;
  padding-top:clamp(104px,15vh,136px);padding-bottom:36px;
}
.fm-nav{display:flex;flex-direction:column}
.fm-nav a{
  position:relative;
  display:flex;align-items:baseline;gap:20px;
  padding:12px 2px;border-bottom:1px solid var(--hair-dark);
  color:var(--paper);text-decoration:none;
  font-size:clamp(2.25rem,6.5vw,4rem);font-weight:600;
  letter-spacing:-.04em;line-height:1.12;
  opacity:0;transform:translateY(26px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1),color .25s ease;
}
.full-menu.open .fm-nav a{
  opacity:1;transform:none;
  transition-delay:calc(var(--i,0) * 55ms + 280ms);
}
.fm-nav a:hover{color:var(--orange)}
.fm-nav a .fm-num{
  font-family:var(--mono);font-size:.875rem;font-weight:400;
  letter-spacing:.06em;color:var(--paper-soft);
  font-variant-numeric:tabular-nums;
  transition:color .25s ease;
}
.fm-nav a:hover .fm-num{color:var(--orange)}
/* Hover marker: an accent dot pinned to the right edge of the row,
   absolutely positioned so the text never shifts (mirrors live). */
.fm-nav a::after{
  content:"";position:absolute;right:4px;top:50%;
  width:.22em;height:.22em;border-radius:50%;
  background:var(--orange);pointer-events:none;
  opacity:0;transform:translateY(-50%) scale(.4);
  transition:opacity .25s ease,transform .35s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover){
  .fm-nav a:hover::after{opacity:1;transform:translateY(-50%) scale(1)}
}
.fm-nav a:focus-visible::after{opacity:1;transform:translateY(-50%) scale(1)}
.fm-nav a.active,.fm-nav a[aria-current="page"]{color:var(--orange)}
.fm-nav a.active .fm-num,.fm-nav a[aria-current="page"] .fm-num{color:var(--orange)}
.fm-foot{
  margin-top:auto;padding-top:28px;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 36px;
  opacity:0;transition:opacity .45s ease;
}
.full-menu.open .fm-foot{opacity:1;transition-delay:.56s}
.fm-mail{
  font-size:1.125rem;font-weight:500;letter-spacing:-.01em;color:var(--paper);
  text-decoration:none;border-bottom:1px solid var(--hair-dark);padding-bottom:3px;
  transition:color .2s ease,border-color .2s ease;
}
.fm-mail:hover{color:var(--orange);border-bottom-color:var(--orange)}
.fm-socials{display:inline-flex;flex-wrap:wrap;gap:6px 24px}
.fm-socials a{
  color:var(--paper-soft);text-decoration:none;font-weight:500;
  transition:color .2s ease;
}
.fm-socials a:hover{color:var(--orange)}
.fm-close{
  margin-left:auto;background:transparent;cursor:pointer;
  border:1px solid var(--hair-dark);border-radius:2px;
  color:var(--paper);font-family:var(--font);font-size:14px;font-weight:500;
  padding:11px 20px;line-height:1;
  transition:color .2s ease,border-color .2s ease;
}
.fm-close:hover,.fm-close:focus-visible{color:var(--orange);border-color:var(--orange)}
/* No-JS fallback: the <noscript> nav inside the header (plain inline
   links, styled like the header nav this section replaced). */
.nojs-nav{display:flex;flex-wrap:wrap;gap:10px 26px;padding-bottom:18px}
.nojs-nav a{
  text-decoration:none;font-size:14px;font-weight:500;color:var(--ink-soft);
}
.nojs-nav a:hover{color:var(--orange-deep)}
@media (max-width:640px){
  .fm-inner{padding-top:96px;padding-bottom:28px}
  .fm-nav a{gap:14px;padding:10px 2px}
  .fm-close{margin-left:0}
}
@media (prefers-reduced-motion: reduce){
  .full-menu,.fm-col,.fm-nav a,.fm-foot{transition:none}
}

/* ---------- case pages: live-content devices, experimental skin ----------
   Added for the case-content sync: the live pages' journey and
   editorial devices (chapter numerals, chaos stage, option diagrams,
   approach stepper, architecture stack, management diagram, brand
   stage; Cuelin problem rows, catalog, benchmark collage, foundation
   specimens, before/after compare, dark mockup band) recomposed in
   the experimental language. All static states render complete;
   page-scoped scripts only enhance. */
.case-sec{position:relative}
.case-toc a.on{color:var(--orange-deep);border-bottom-color:var(--orange)}
.ch-index{
  position:absolute;top:30px;right:0;pointer-events:none;
  font-size:clamp(44px,5vw,64px);font-weight:800;letter-spacing:-.03em;line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(14,14,15,.25);
}
.case-sec .lede{margin:22px auto 0;text-align:left}
.x-prog{height:2px;background:var(--hair);margin-top:22px}
.x-prog i{display:block;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:0 50%}

/* skeleton primitives (wireframe viz inside panels and tiles) */
.sk-line{display:block;height:8px;background:rgba(14,14,15,.16)}
.sk-line + .sk-line{margin-top:8px}
.sk-w40{width:40%}.sk-w55{width:55%}.sk-w70{width:70%}.sk-w85{width:85%}.sk-w100{width:100%}

/* hero token panel: live token-board labels, textless component shapes */
.tp-shapes{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}
.tp-btn{width:52px;height:30px;background:var(--ink);flex:none}
.tp-btn-o{width:52px;height:30px;border:1px solid var(--ink-faint);flex:none}
.tp-input{width:74px;height:30px;border:1px solid var(--hair);display:flex;align-items:center;padding:0 8px;flex:none}
.tp-input i{display:block;width:55%;height:7px;background:rgba(14,14,15,.2)}
.tp-tgl{width:34px;height:19px;border-radius:999px;position:relative;flex:none}
.tp-tgl::after{content:"";position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:#fff}
.tp-tgl.g{background:#0E7A4F}.tp-tgl.r{background:#B4232A}.tp-tgl.b{background:#2563EB}

/* panels + chaos stage (Banking ch. 01) */
.x-panel{border:1px solid var(--hair);background:#fff;margin-top:34px;text-align:left}
.x-panel-head{
  display:flex;justify-content:space-between;gap:14px;padding:14px 18px;
  border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
}
.x-panel-head .st{color:var(--orange-deep)}
.x-chaos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair)}
.x-chaos-card{background:var(--paper);padding:16px;min-height:104px}
.x-file{font-family:var(--mono);font-size:11px;color:var(--ink-soft);display:block;margin-bottom:12px;word-break:break-all}
.x-panel-cap{padding:14px 18px;border-top:1px solid var(--hair);font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.viz-pill{width:46px;height:15px;border-radius:999px;background:var(--ink)}
.viz-sw{display:flex;gap:6px}
.viz-sw i{width:18px;height:18px;border:1px solid var(--hair);display:block}
.viz-sw i:nth-child(1){background:#2563EB}.viz-sw i:nth-child(2){background:#0E7A4F}.viz-sw i:nth-child(3){background:#B4232A}
.viz-type{font-size:26px;font-weight:700;line-height:1}
.viz-input{height:26px;border:1px solid var(--ink-faint);background:#fff}
.viz-blocks{display:grid;grid-template-columns:1fr 1fr;gap:5px;width:64px}
.viz-blocks i{height:14px;background:rgba(14,14,15,.16);display:block}
.viz-radius{width:30px;height:30px;border:2px solid var(--ink-faint);border-radius:10px}
@media (max-width:640px){.x-chaos{grid-template-columns:repeat(2,1fr)}}

/* improvements list (Banking ch. 01) */
.x-imps{list-style:none;margin-top:10px;text-align:left}
.x-imp{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--hair)}
.x-imp-num{
  flex:none;width:34px;height:34px;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14.5px;
}
.x-imp h3{font-size:17px;font-weight:600}
.x-imp p{margin-top:5px;font-size:15.5px;line-height:1.65;color:var(--char)}

/* option cards + SVG diagrams (Banking ch. 02, 05) */
.x-opts{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px;text-align:left}
.x-opt{border:1px solid var(--hair);background:#fff;padding:24px}
.x-opt.chosen{border-color:var(--ink)}
.x-opt-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.x-opt-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.x-chosen{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--orange);color:#fff;padding:4px 8px;
}
.x-opt h3{font-size:19px;font-weight:600;margin-top:14px;line-height:1.25}
.x-opt p{margin-top:10px;font-size:15px;line-height:1.65;color:var(--char)}
.x-diagram{margin-top:22px}
.x-diagram svg{width:100%;height:auto;display:block}
.x-diagram .svg-label{font-family:var(--font);font-size:13px;font-weight:600;fill:var(--ink)}
.x-diagram .svg-small{font-family:var(--font);font-size:12px;font-weight:500;fill:var(--ink)}
.x-diagram .svg-sub{font-family:var(--mono);font-size:10.5px;fill:var(--ink-faint)}
.x-diagram .svg-big{font-family:var(--font);font-size:15px;font-weight:600;fill:var(--ink)}
.x-diagram .opt-line,.x-diagram .flow-line{fill:none;stroke:rgba(14,14,15,.4);stroke-width:1.5}
.x-diagram .opt-box{fill:#fff;stroke:rgba(14,14,15,.35)}
.x-diagram .hub-box{fill:var(--ink)}
.x-diagram .hub-text{fill:var(--paper)}
.x-diagram .sep-dot,.x-diagram .flow-dot,.x-diagram .origin-dot{fill:var(--orange)}
.x-diagram .mgmt-manual-line{fill:none;stroke:var(--orange-deep);stroke-width:1.5;stroke-dasharray:5 5}
.x-diagram .mgmt-arrow-head{fill:var(--orange-deep)}
.x-diagram .mgmt-manual-label{font-family:var(--mono);font-size:11px;fill:var(--orange-deep)}
.x-mgmt .ds-mgmt-svg-m{display:none}
@media (max-width:700px){
  .x-mgmt .ds-mgmt-svg-d{display:none}
  .x-mgmt .ds-mgmt-svg-m{display:block}
}
@media (max-width:640px){.x-opts{grid-template-columns:1fr}}

/* stepper with scrub rail (Banking ch. 03, Cuelin sec. 02) */
.x-steps{position:relative;margin-top:26px;text-align:left}
.x-track{position:absolute;left:19px;top:10px;bottom:10px;width:2px;background:var(--hair)}
.x-track i{position:absolute;inset:0;background:var(--orange);transform-origin:50% 0;transform:scaleY(1)}
.x-step{position:relative;display:grid;grid-template-columns:40px 1fr;column-gap:22px;padding:18px 0}
.x-node{
  width:40px;height:40px;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:15px;position:relative;z-index:1;
}
.x-step.on .x-node{background:var(--orange);color:#fff}
.x-step h3{font-size:18px;font-weight:600}
.x-step p{margin-top:6px;font-size:15.5px;line-height:1.65;color:var(--char)}
.x-step p:first-child{margin-top:2px}
.x-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* architecture stack (Banking ch. 04) */
.x-arch-vis{border:1px solid var(--hair);background:#fff;margin-top:30px;text-align:left}
.x-arch-head{
  display:flex;justify-content:space-between;gap:14px;padding:14px 18px;
  border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
}
.x-arch-head strong{color:var(--ink)}
.x-arch-stack{padding:18px;display:flex;flex-direction:column;gap:10px}
.x-layer{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  border:1px solid var(--hair);background:var(--paper);padding:14px 16px;
  margin-left:calc(var(--level,0) * 14px);transition:opacity .4s ease;
}
.x-layer-name{display:block;font-weight:600;font-size:15.5px}
.x-layer-note{display:block;font-size:13px;color:var(--ink-faint);margin-top:2px}
.x-layer-num{font-family:var(--mono);font-size:12px;color:var(--orange-deep)}
.x-arch.js-on .x-layer{opacity:.32}
.x-arch.js-on .x-layer.lit{opacity:1}
.x-arch-copies{text-align:left}
.x-arch-copy{border-top:1px solid var(--hair);padding:20px 0 4px}
.x-arch-num{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.x-arch-copy.on .x-arch-num{color:var(--orange-deep)}
.x-arch-copy h3{font-size:18px;font-weight:600;margin-top:8px}
.x-arch-copy p{margin-top:5px;font-size:15.5px;color:var(--char);line-height:1.65}

/* atomic strip (Banking ch. 04) */
.x-atomic{border:1px solid var(--hair);background:var(--panel);padding:24px;margin-top:30px}
.x-atomic p{font-size:15.5px;color:var(--char)}
.x-atomic-flow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:18px}
.x-atomic-arrow{color:var(--ink-faint)}

/* brand stage (Banking ch. 06) */
.x-brand{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:30px;text-align:left;align-items:start}
.x-brand-side h3{font-size:21px;font-weight:600;line-height:1.25;margin-top:12px}
.x-brand-side > p{margin-top:10px;font-size:15.5px;line-height:1.65;color:var(--char)}
.x-brand-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.x-brand-tab{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--hair);background:#fff;padding:9px 13px;
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink);
}
.x-brand-tab i{width:10px;height:10px;border-radius:50%;background:var(--ink-faint);flex:none}
.x-brand-tab[data-brand="a"] i{background:#2563EB}
.x-brand-tab[data-brand="b"] i{background:#0E7A4F}
.x-brand-tab[data-brand="c"] i{background:#B4232A}
.x-brand-tab[aria-pressed="true"]{border-color:var(--ink);background:var(--panel)}
.x-brand-readout{margin-top:18px;font-size:15px}
.x-brand-readout strong{margin-right:10px}
.x-brand-readout span{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.x-auto{
  display:block;margin-top:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
}
.x-brand-card{
  --brand:#2563EB;
  border:1px solid var(--hair);background:#fff;padding:24px;border-radius:6px;
  transition:border-radius .6s ease;
}
.x-brand-card[data-brand="b"]{--brand:#0E7A4F;border-radius:20px}
.x-brand-card[data-brand="c"]{--brand:#B4232A;border-radius:12px}
.x-demo-top{display:flex;align-items:center;gap:10px}
.x-demo-mark{width:22px;height:22px;background:var(--brand);flex:none;transition:background .4s ease}
.x-demo-brand{font-weight:600;font-size:15px}
.x-demo-pill{
  margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;border:1px solid var(--hair);padding:4px 8px;color:var(--ink-soft);
}
.x-brand-card h4{font-size:19px;font-weight:600;margin-top:18px}
.x-demo-lines{margin-top:12px}
.x-demo-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.x-demo-btn{
  background:var(--brand);border:1px solid var(--brand);color:#fff;
  padding:11px 16px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background .4s ease,border-color .4s ease;
}
.x-demo-btn2{
  background:#fff;border:1px solid var(--hair);color:var(--ink);
  padding:11px 16px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
}
.x-demo-field{margin-top:20px}
.x-demo-field > span{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);display:block;margin-bottom:8px;
}
.x-demo-input{border:1px solid var(--hair);padding:11px 13px;color:var(--ink-faint);font-size:14.5px;background:var(--paper)}
@media (max-width:760px){.x-brand{grid-template-columns:1fr}}

/* Cuelin problem rows */
.x-probs{text-align:left}
.x-prob{display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--hair)}
.x-prob:first-child{border-top:none;padding-top:6px}
.x-prob-num{font-family:var(--mono);font-size:12px;color:var(--orange-deep);padding-top:3px}
.x-prob p{font-size:15.5px;line-height:1.65;color:var(--char)}

/* Cuelin catalog + DS skeleton grids */
.x-cat{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair);margin-top:30px;
}
.x-tile{background:var(--paper);padding:18px;min-height:118px;display:flex;flex-direction:column;text-align:left}
.x-tile-viz{flex:1;display:flex;align-items:center;gap:8px}
.x-tile-name{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:14px;
}
@media (max-width:640px){.x-cat{grid-template-columns:repeat(2,1fr)}}
.sk-btn-fill{width:44px;height:26px;background:var(--ink);flex:none}
.sk-btn-line{width:44px;height:26px;border:1px solid var(--ink-faint);flex:none}
.sk-card{width:66px;border:1px solid var(--hair);background:#fff;padding:7px;flex:none}
.sk-card-img{display:block;height:22px;background:rgba(14,14,15,.16);margin-bottom:7px}
.sk-field{width:72px;flex:none}
.sk-input{display:block;height:24px;border:1px solid var(--ink-faint);background:#fff;margin-top:7px}
.sk-ico{width:20px;height:20px;border:1.5px solid var(--ink-faint);display:block;flex:none}
.sk-ico-dia{transform:rotate(45deg)}
.sk-stack{width:74px;flex:none}
.sk-cols{display:flex;gap:6px;width:74px;flex:none}
.sk-cols i{flex:1;height:44px;background:rgba(14,14,15,.16);display:block}
.sk-block{display:block;height:22px;background:rgba(14,14,15,.16);margin-bottom:8px}
.x-cap{margin-top:16px;font-size:14px;color:var(--ink-soft);text-align:center}

/* Cuelin benchmark collage: reference frames keep the red outline */
.x-collage{
  position:relative;border:1px solid var(--hair);background:var(--panel);
  min-height:330px;margin-top:30px;overflow:hidden;
}
.x-ref{position:absolute;border:2px solid #D92D20;background:#fff}
.x-ref-a{left:6%;top:10%;width:34%;height:52%}
.x-ref-b{right:8%;top:6%;width:26%;height:40%}
.x-ref-c{left:16%;bottom:8%;width:26%;height:34%}
.x-ref-d{right:6%;bottom:10%;width:38%;height:44%}
.x-ref i{position:absolute;left:12%;right:12%;height:7px;background:rgba(14,14,15,.14);display:block}

/* Cuelin foundation specimens */
.x-specimens{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair);margin-top:30px;text-align:left;
}
.x-spec{background:var(--paper);padding:20px}
.x-swatches{display:flex;gap:5px;flex-wrap:wrap}
.x-swatches i{width:22px;height:22px;border:1px solid var(--hair);display:block}
.x-type{display:flex;align-items:baseline;gap:12px}
.x-type-xl{font-size:40px;font-weight:700;line-height:1}
.x-type-md{font-size:26px;font-weight:600;line-height:1}
.x-type-sm{font-size:16px;line-height:1}
.x-spacing{display:flex;align-items:flex-end;gap:7px;height:34px}
.x-spacing i{background:var(--ink);height:12px;display:block}
.x-spec-label{
  display:block;margin-top:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);
}
@media (max-width:640px){.x-specimens{grid-template-columns:1fr}}

/* Cuelin before/after compare with slider cue */
.x-glabel{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);text-align:left;
}
.x-compare{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:18px}
.x-frame{border:1px solid var(--hair);background:#fff;text-align:left}
.x-frame figcaption{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);padding:12px 16px;border-bottom:1px solid var(--hair);
}
.x-frame-body{min-height:280px;background:var(--panel);position:relative}
.x-frame-body i{position:absolute;left:10%;right:10%;height:8px;background:rgba(14,14,15,.13);display:block}
.x-compare-div{
  position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:var(--ink-faint);transform:translateX(-.5px);pointer-events:none;
}
.x-compare-handle{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
@media (max-width:640px){
  .x-compare{grid-template-columns:1fr}
  .x-compare-div{display:none}
}

/* dark breakout band (Cuelin mockup, Skilvul pendekatan) */
.x-band{
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--ink);color:var(--paper);border-top:none;
}
.x-band-in{max-width:70ch;margin:0 auto;position:relative}
.x-band .sec-label{color:var(--orange)}
.x-band h2{color:var(--paper)}
.x-band .body-txt{color:rgba(250,250,250,.82)}
.x-band .x-glabel{color:var(--paper-soft)}
.x-band .ch-index{-webkit-text-stroke-color:rgba(250,250,250,.3)}
.x-band .pull{border-color:var(--hair-dark)}
.x-band .serif-quote{color:var(--paper)}
.x-band .pull .attr{color:var(--paper-soft)}
.x-mocks{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-top:18px}
.x-mock{border:1px solid var(--hair-dark);background:rgba(250,250,250,.05);min-height:300px}
.x-mock-col{display:grid;gap:18px}
.x-mock.sm{min-height:141px}
@media (max-width:640px){
  .x-mocks{grid-template-columns:1fr}
  .x-mock{min-height:220px}
}