/* ==========================================================================
   OPTION B — "SIGNAL"
   Same content, same magazine, a darker and more cinematic reading of it.
   Loads after styles.css and overrides where the direction differs.
   ========================================================================== */

:root{
  --b-bg:#03101F;
  --b-bg-2:#061A33;
  --b-line:rgba(255,255,255,.10);
  --b-text:#E6EDF6;
  --b-dim:#8AA0BC;
  --b-glow:rgba(232,92,20,.55);
}

body.b{background:var(--b-bg);color:var(--b-text)}

/* film grain + vignette over everything, very low opacity */
body.b::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.5;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* cursor spotlight — desktop, pointer devices only */
.spot{
  position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(232,92,20,.13) 0%,rgba(232,92,20,0) 65%);
  transform:translate(-50%,-50%);opacity:0;transition:opacity .5s var(--ease);
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){.spot.is-on{opacity:1}}

/* scroll progress hairline */
.bprog{position:fixed;top:0;left:0;height:2px;background:var(--orange);z-index:95;width:0}

/* ---------------- nav on dark ---------------- */
.b .nav{background:rgba(3,16,31,.72);border-bottom-color:transparent}
.b .nav.is-stuck{background:rgba(3,16,31,.94);border-bottom-color:var(--b-line);box-shadow:none}
.b .nav__brand{background:#fff;padding:8px 14px;border-radius:3px}
.b .menu__link{color:#D3DFEC}
.b .menu__link:hover,.b .menu__item.is-open > .menu__link{color:var(--orange)}
.b .nav__burger span{background:#fff}
@media (max-width:1180px){
  .b .menu{background:var(--b-bg)}
  .b .menu__list > li{border-bottom-color:var(--b-line)}
  .b .mega{background:var(--b-bg-2)}
}
.b .mega{background:#07182C;border-top-color:var(--b-line);box-shadow:0 40px 80px -40px #000}
.b .mega__lead,.b .mega__head{color:#fff}
.b .mega__leadtext,.b .mega__sub{color:var(--b-dim)}
.b .mega__sub{border-left-color:var(--b-line)}
.b .mega__sub:hover{color:#fff}
.b .mega__col--promo{border-left-color:var(--b-line)}
.b .mega__tag{border-color:var(--b-line);color:var(--b-dim)}
.b .linkarrow{color:#fff;border-bottom-color:var(--b-line)}
.b .linkarrow:hover{color:var(--orange);border-bottom-color:var(--orange)}

/* ---------------- hero ---------------- */
.bhero{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;padding:120px 0 80px}
.bhero__aurora{
  position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.55;
  background:
    radial-gradient(38% 42% at 22% 28%,rgba(232,92,20,.42),transparent 70%),
    radial-gradient(34% 40% at 76% 22%,rgba(43,86,168,.55),transparent 70%),
    radial-gradient(44% 46% at 62% 78%,rgba(12,44,84,.75),transparent 72%);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,2%,0) scale(1.07)}
  100%{transform:translate3d(3%,-2%,0) scale(1.03)}
}
.bhero__canvas{position:absolute;inset:0;z-index:0;opacity:.55}
.bhero__grid{
  position:relative;z-index:2;
  width:min(100% - 2*clamp(20px,5vw,48px),1360px);margin-inline:auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:center;
}
.bhero__eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--orange);margin:0 0 26px;display:flex;align-items:center;gap:14px;
}
.bhero__eyebrow::before{content:"";width:44px;height:1px;background:var(--orange)}
.bhero__title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(3rem,8vw,7.2rem);line-height:.88;letter-spacing:-.04em;margin:0 0 26px;color:#fff;
}
.bhero__title .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.bhero__title .w > span{display:inline-block;transform:translateY(105%);animation:rise .9s var(--ease) forwards}
.bhero__title .w:nth-child(2) > span{animation-delay:.09s}
.bhero__title .w:nth-child(3) > span{animation-delay:.18s}
@keyframes rise{to{transform:none}}
.bhero__title em{font-style:normal;background:linear-gradient(96deg,#F5A268,var(--orange) 45%,#D24E0B);-webkit-background-clip:text;background-clip:text;color:transparent}
.bhero__dek{
  font-family:var(--display);font-size:clamp(1.1rem,1.7vw,1.45rem);line-height:1.5;
  color:#B7C9DE;max-width:38ch;margin:0 0 38px;
}
.bhero__actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:46px}
.bhero__meta{display:flex;flex-wrap:wrap;gap:12px 34px;border-top:1px solid var(--b-line);padding-top:24px}
.bhero__meta div{display:flex;flex-direction:column;gap:5px}
.bhero__meta dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--b-dim)}
.bhero__meta dd{margin:0;font-size:14px;font-weight:600;color:#fff}

/* magnetic button */
.magnet{position:relative;will-change:transform;transition:transform .25s var(--ease)}
.b .btn--ghost{border-color:var(--b-line);color:#fff}
.b .btn--ghost:hover{background:#fff;color:var(--b-bg);border-color:#fff}
.b .btn--text{color:#fff;border-bottom-color:var(--b-line)}
.b .btn--text:hover{color:var(--orange);border-bottom-color:var(--orange)}
.b .btn--solid{box-shadow:0 12px 40px -14px var(--b-glow)}

/* tilting cover */
.tilt{perspective:1200px;display:flex;justify-content:center}
.tilt__inner{
  position:relative;width:min(100%,420px);transform-style:preserve-3d;
  transition:transform .4s var(--ease);will-change:transform;
}
.tilt__inner img{
  width:100%;border-radius:2px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06);
}
.tilt__glow{
  position:absolute;inset:-14%;z-index:-1;border-radius:50%;filter:blur(50px);
  background:radial-gradient(circle,rgba(232,92,20,.4),transparent 68%);
}
.tilt__badge{
  position:absolute;left:22px;bottom:-20px;transform:translateZ(60px);
  background:var(--orange);color:#fff;padding:12px 18px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 16px 40px -14px rgba(0,0,0,.9);
}

/* ---------------- ticker ---------------- */
.ticker{
  border-top:1px solid var(--b-line);border-bottom:1px solid var(--b-line);
  overflow:hidden;background:rgba(255,255,255,.02);position:relative;z-index:2;
}
.ticker__track{display:flex;gap:0;width:max-content;animation:slide 42s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker__item{
  display:flex;align-items:baseline;gap:14px;padding:20px clamp(24px,3vw,48px);
  border-right:1px solid var(--b-line);white-space:nowrap;
}
.ticker__n{font-family:var(--display);font-size:1.7rem;color:var(--orange)}
.ticker__l{font-size:13px;color:var(--b-dim)}

/* ---------------- pinned reel ---------------- */
.reel{position:relative;background:var(--b-bg);height:340vh}
.reel__pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.reel__head{
  width:min(100% - 2*clamp(20px,5vw,48px),1360px);margin:0 auto 34px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
}
.reel__title{font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,3vw,2.6rem);margin:0;letter-spacing:-.02em;color:#fff}
.reel__count{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--b-dim)}
.reel__track{display:flex;gap:22px;padding-left:clamp(20px,5vw,48px);will-change:transform}
.reel__card{flex:none;width:clamp(150px,17vw,230px);padding:0;text-align:left;position:relative}
.reel__card img{
  width:100%;border-radius:2px;opacity:.55;
  box-shadow:0 24px 50px -24px #000;
  transition:opacity .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.reel__card:hover img{opacity:1;transform:translateY(-10px) scale(1.02);box-shadow:0 34px 60px -22px #000,0 0 0 1px rgba(232,92,20,.5)}
.reel__folio{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--b-dim);margin:12px 0 0}
.reel__card:hover .reel__folio{color:var(--orange)}
.reel__hint{
  width:min(100% - 2*clamp(20px,5vw,48px),1360px);margin:30px auto 0;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--b-dim);
}
@media (max-width:860px){
  .reel{height:auto}
  .reel__pin{height:auto;position:static;padding:80px 0}
  .reel__track{overflow-x:auto;padding-bottom:20px;transform:none !important}
}

/* ---------------- generic dark sections ---------------- */
.bsec{position:relative;z-index:2;padding:clamp(80px,10vw,150px) 0}
.bsec--line{border-top:1px solid var(--b-line)}
.bhead{max-width:720px;margin:0 0 clamp(38px,5vw,66px)}
.bhead__eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin:0 0 18px}
.bhead__title{
  font-family:var(--display);font-weight:500;font-size:clamp(2rem,4.4vw,3.4rem);
  line-height:1.05;letter-spacing:-.025em;margin:0 0 18px;color:#fff;
}
.bhead__dek{color:var(--b-dim);margin:0;font-size:1.02rem}

/* reveal — transform/opacity only. clip-path here would zero the element's
   intersection rect and IntersectionObserver would never fire. */
.rev{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .9s var(--ease);
  will-change:opacity,transform;
}
.rev.on{opacity:1;transform:none}
.rev-2{transition-delay:.1s}
.rev-3{transition-delay:.2s}

/* ---------------- case study ---------------- */
.bcase{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.bcase__vis{position:relative;padding:0;display:block;border-radius:2px;overflow:hidden}
.bcase__vis img{width:100%;box-shadow:0 40px 90px -40px #000;transition:transform .8s var(--ease)}
.bcase__vis:hover img{transform:scale(1.04)}
.bcase__title{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px;color:#fff}
.bstats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0 0 34px;padding:26px 0;border-top:1px solid var(--b-line);border-bottom:1px solid var(--b-line)}
.bstats dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--b-dim);margin-bottom:8px}
.bstats dd{margin:0;font-family:var(--display);font-size:1.5rem;color:#fff;line-height:1}
.bstats dd small{font-size:.75em;color:var(--orange)}
.bpoints{display:grid;gap:20px;margin-bottom:34px}
.bpoint{display:grid;grid-template-columns:96px 1fr;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--b-line)}
.bpoint h3{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin:2px 0 0;font-weight:500}
.bpoint p{margin:0;color:#AEC0D6;font-size:15px}
@media (max-width:860px){.bcase{grid-template-columns:1fr}.bstats{grid-template-columns:repeat(2,1fr)}.bpoint{grid-template-columns:1fr;gap:8px}}

/* ---------------- people ---------------- */
.bpeople{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--b-line);border:1px solid var(--b-line)}
.bperson{background:var(--b-bg);padding:clamp(24px,2.6vw,34px);transition:background .35s var(--ease)}
.bperson:hover{background:#071A31}
.bperson img{
  width:72px;height:72px;border-radius:50%;object-fit:cover;margin-bottom:20px;
  filter:grayscale(1) contrast(1.05);opacity:.8;
  transition:filter .45s var(--ease),opacity .45s var(--ease),transform .45s var(--ease);
}
.bperson:hover img{filter:none;opacity:1;transform:scale(1.05)}
.bperson h3{font-family:var(--display);font-weight:500;font-size:1.2rem;margin:0 0 6px;color:#fff}
.bperson__role{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin:0 0 14px;line-height:1.7}
.bperson__bio{font-size:14.5px;color:var(--b-dim);margin:0 0 16px}
.bperson__link{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#fff;border-bottom:1px solid var(--b-line);padding-bottom:3px}
.bperson__link:hover{color:var(--orange);border-color:var(--orange)}
@media (max-width:980px){.bpeople{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.bpeople{grid-template-columns:1fr}}

/* founder */
.bfounder{display:grid;grid-template-columns:280px 1fr;gap:clamp(26px,4vw,60px);align-items:center;margin-bottom:clamp(36px,4vw,58px)}
.bfounder img{width:100%;border-radius:2px;box-shadow:0 30px 60px -30px #000}
.bfounder blockquote{margin:0 0 20px}
.bfounder blockquote p{font-family:var(--display);font-size:clamp(1.3rem,2.5vw,1.95rem);line-height:1.28;margin:0;color:#fff}
.bfounder blockquote p::before{content:"\201C";color:var(--orange)}
.bfounder blockquote p::after{content:"\201D";color:var(--orange)}
@media (max-width:760px){.bfounder{grid-template-columns:1fr}.bfounder img{max-width:220px}}

/* ---------------- about ---------------- */
.bcards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--b-line);border:1px solid var(--b-line)}
.bcard{
  background:var(--b-bg);padding:clamp(24px,2.6vw,36px);position:relative;overflow:hidden;
  transition:background .4s var(--ease);
}
.bcard::before{
  content:"";position:absolute;inset:auto -30% -60% -30%;height:150px;
  background:radial-gradient(circle,rgba(232,92,20,.28),transparent 70%);
  opacity:0;transition:opacity .5s var(--ease);
}
.bcard:hover::before{opacity:1}
.bcard h3{font-family:var(--display);font-weight:500;font-size:1.2rem;margin:0 0 12px;color:#fff;position:relative}
.bcard p{margin:0;font-size:14.5px;color:var(--b-dim);position:relative}
.bcard__n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--orange);margin:0 0 22px;display:block}
@media (max-width:980px){.bcards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.bcards{grid-template-columns:1fr}}

.bfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(36px,4vw,56px)}
.bfact span{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.8rem);color:var(--orange);display:block;line-height:1}
.bfact p{margin:8px 0 0;font-size:13.5px;color:var(--b-dim)}
@media (max-width:700px){.bfacts{grid-template-columns:repeat(2,1fr)}}

/* ---------------- closing ---------------- */
.bclose{position:relative;text-align:center;padding:clamp(90px,12vw,170px) 0;overflow:hidden;z-index:2}
.bclose__glow{
  position:absolute;left:50%;top:0;width:900px;height:520px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(232,92,20,.30),transparent 68%);filter:blur(50px);pointer-events:none;
}
.bclose__title{
  position:relative;font-family:var(--display);font-weight:500;
  font-size:clamp(2.1rem,5.4vw,4.2rem);line-height:1.03;letter-spacing:-.03em;margin:0 auto 22px;max-width:16ch;color:#fff;
}
.bclose__dek{position:relative;color:var(--b-dim);max-width:52ch;margin:0 auto 40px}
.bclose__actions{position:relative;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* footer on dark */
.b .foot{background:#020C18}

@media (prefers-reduced-motion:reduce){
  .bhero__aurora,.ticker__track{animation:none}
  .bhero__title .w > span{transform:none;animation:none}
  .rev{opacity:1;transform:none;transition:none}
  .spot{display:none}
}

/* ---------------- brand logo on dark ---------------- */
.b .nav__brand{background:none;padding:0}
.b .nav__logo{height:44px}
@media (max-width:1180px){.b .nav__logo{height:36px}}

/* ---------------- inline email capture ---------------- */
.cap{margin-top:38px;max-width:560px}
.cap--center{margin:44px auto 0;text-align:center}
.cap__label{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--b-dim);margin-bottom:14px;
}
.cap__row{display:flex;gap:10px;flex-wrap:wrap}
.cap__input{
  flex:1 1 260px;min-width:0;font:inherit;font-size:16px;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid var(--b-line);border-radius:2px;
  padding:16px 18px;transition:border-color .2s var(--ease),background .2s var(--ease);
}
.cap__input::placeholder{color:#6E829C}
.cap__input:focus{outline:none;border-color:var(--orange);background:rgba(255,255,255,.08)}
.cap__input.is-invalid{border-color:#E8654A;background:rgba(232,101,74,.08)}
.cap__btn{flex:none;padding:16px 26px;white-space:nowrap}
.cap__error{margin:12px 0 0;font-size:14px;color:#F09077}
.cap__error[hidden],.cap__ok[hidden]{display:none}
.cap__ok{margin:14px 0 0;font-size:15px;color:#fff}
.cap__again{
  font:inherit;font-size:14px;color:var(--orange);text-decoration:underline;
  text-underline-offset:3px;padding:0;
}
.cap__legal{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:#6E829C;max-width:52ch}
.cap--center .cap__legal{margin-inline:auto}
.cap__legal a{color:#8AA0BC}
.cap__legal a:hover{color:var(--orange)}
.cap.is-done .cap__row,.cap.is-done .cap__label{display:none}

/* ---------------- mission / vision ---------------- */
.bmission{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--b-line);
  border:1px solid var(--b-line);margin-bottom:clamp(30px,4vw,52px);
}
.bmission__col{background:var(--b-bg);padding:clamp(26px,3vw,40px)}
.bmission__label{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);margin:0 0 16px;
}
.bmission__col p:not(.bmission__label){margin:0;font-size:17px;line-height:1.62;color:#B7C9DE}
@media (max-width:760px){.bmission{grid-template-columns:1fr}}

.bpartner{
  margin:clamp(30px,4vw,48px) 0 0;padding-top:26px;border-top:1px solid var(--b-line);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--b-dim);
}

/* page ends on the closing block now — give it breathing room */
.bclose{padding-bottom:clamp(80px,10vw,140px)}

/* ---------------- headline: no clipped descenders, no collision ---------------- */
.bhero__title{line-height:1.0}
.bhero__title .w{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}

/* ---------------- leadership photos: colour, as supplied ---------------- */
.bperson img{filter:none;opacity:1}
.bperson:hover img{transform:scale(1.05)}

/* ---------------- slim footer strip ---------------- */
.bstrip{border-top:1px solid var(--b-line);padding:24px 0;position:relative;z-index:2}
.bstrip__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:#6E829C;
}
.bstrip__inner p{margin:0}
.bstrip__inner a{color:#8AA0BC;text-decoration:none}
.bstrip__inner a:hover{color:var(--orange)}

/* ==========================================================================
   ONE LIGHT SECTION — the success story lifts out of the dark on white.
   Everything else keeps the original palette.
   ========================================================================== */
.bsec--light{background:#FFFFFF;color:#0A1733;--ink:#0A1733;--ink-soft:#4A5568;--hair:#E2E7F0}
.bsec--light.bsec--line{border-top-color:transparent}
.bsec--light .bhead__title,
.bsec--light .bcase__title{color:var(--ink)}
.bsec--light .bhead__dek,
.bsec--light .bpoint p{color:var(--ink-soft)}
.bsec--light .bstats{border-color:var(--hair)}
.bsec--light .bstats dt{color:#8892B0}
.bsec--light .bstats dd{color:var(--ink)}
.bsec--light .bpoint{border-bottom-color:var(--hair)}
.bsec--light .btn--ghost{border-color:var(--hair);color:var(--ink)}
.bsec--light .btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.bsec--light .linkarrow{color:var(--ink);border-bottom-color:var(--hair)}
.bsec--light .linkarrow:hover{color:var(--orange);border-bottom-color:var(--orange)}
.bsec--light .bcase__vis img{box-shadow:0 40px 80px -44px rgba(10,23,51,.55),0 4px 14px rgba(10,23,51,.10)}

/* leadership portraits sit inside a circular mask — crops are face-centred */
.bperson img{object-fit:cover;object-position:center}

/* ==========================================================================
   TYPEFACE — matched to cloudzeninnovations.com
   Pluto Sans is the licensed brand face; Inter is the fallback named in the
   brand guidelines and renders near-identically at these sizes.
   Scoped to body.b so the editorial option is untouched.
   ========================================================================== */
body.b{
  --display:'Pluto Sans','Inter','Helvetica Neue',Arial,sans-serif;
  --ui:'Pluto Sans','Inter','Helvetica Neue',Arial,sans-serif;
  --mono:'Pluto Sans','Inter','Helvetica Neue',Arial,sans-serif;
}
/* the serif carried its own optical sizing — re-tune weight and tracking for a grotesque */
.b .bhero__title{font-weight:700;letter-spacing:-.035em;font-size:clamp(2.8rem,7.2vw,6.2rem);line-height:1.02}
.b .bhead__title,
.b .bcase__title,
.b .bclose__title,
.b .reel__title{font-weight:700;letter-spacing:-.03em}
.b .bclose__title{font-size:clamp(1.9rem,4.8vw,3.6rem);line-height:1.08}
.b .bhero__dek,
.b .bhead__dek,
.b .bcase__dek{font-weight:300}
.b .bhero__dek{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.6}
.b .bperson h3,
.b .bcard h3,
.b .dive__title,
.b .feat__title{font-weight:600;letter-spacing:-.02em}
.b .bfounder blockquote p{font-weight:500;letter-spacing:-.02em;line-height:1.34}
.b .bstats dd,
.b .bfact span,
.b .bcard__n{font-weight:700}
.b .bfact span{letter-spacing:-.03em}
/* small caps labels keep their tracking so they still read as technical */
.b .bhead__eyebrow,
.b .bhero__eyebrow,
.b .reel__count,
.b .reel__folio,
.b .cap__label,
.b .cap__legal,
.b .bperson__role,
.b .bmission__label,
.b .bpartner,
.b .bstats dt,
.b .bpoint h3,
.b .tag{font-weight:500}
.b .reader__title{font-weight:600;letter-spacing:-.01em}

/* ==========================================================================
   TYPE SCALE — Cloudzen brand scale
   Display 72 · H1 48 · H2 32 · H3 24 Medium · Body 16 Light · Label 12 Medium
   ========================================================================== */
.b .bhero__title{font-size:clamp(42px,6.4vw,72px);line-height:1.04}
.b .bhead__title,
.b .bcase__title,
.b .bclose__title,
.b .reel__title{font-size:clamp(30px,4.2vw,48px);line-height:1.12}
.b .bfounder blockquote p,
.b .bstats dd{font-size:clamp(24px,3vw,32px);line-height:1.3}
.b .bfact span{font-size:clamp(28px,3.4vw,40px);line-height:1}

/* H3 — card and person titles */
.b .bperson h3,
.b .bcard h3{font-size:24px;font-weight:500;line-height:1.3;letter-spacing:-.01em}

/* Body — 16 Light */
.b .bhero__dek{font-size:18px;line-height:1.65;font-weight:300}
.b .bhead__dek,
.b .bcase__dek,
.b .bclose__dek,
.b .bperson__bio,
.b .bcard p,
.b .bmission__col p:not(.bmission__label),
.b .bpoint p,
.b .cap__input,
.b .bfounder .founder__note{font-size:16px;line-height:1.65;font-weight:300}
.b .cap__input{font-weight:400}

/* Label — 12 Medium, tracking retained */
.b .bhero__eyebrow,
.b .bhead__eyebrow,
.b .bperson__role,
.b .bmission__label,
.b .bstats dt,
.b .bpoint h3,
.b .reel__count,
.b .reel__folio,
.b .cap__label,
.b .bpartner,
.b .bstrip__inner,
.b .bfact p,
.b .menu__link,
.b .reader__sub{font-size:12px;font-weight:500}
.b .bfact p{letter-spacing:0;font-weight:300;font-size:13px}
.b .menu__link{font-size:14px;font-weight:500;letter-spacing:0}
.b .cap__legal,
.b .bstrip__inner{font-size:12px;font-weight:300}

/* CTAs — bold, label-scale */
.b .btn{font-size:13px;font-weight:700;letter-spacing:.06em}
.b .btn--lg{font-size:13px;padding:17px 30px}
.b .linkarrow{font-size:12px;font-weight:700}
.b .mega__head{font-size:15px}
.b .mega__sub{font-size:14px}
.b .mega__lead{font-size:24px;font-weight:600}
.b .mega__leadtext{font-size:14px;font-weight:300}

/* ---------------- leadership cards: LinkedIn always sits on the same line ---------------- */
.bperson{display:flex;flex-direction:column}
.bperson__link{margin-top:auto;align-self:flex-start;padding-top:18px}
.bperson__bio{margin-bottom:0}

/* ---------------- mobile ---------------- */
@media (max-width:760px){
  .b .bhero{min-height:auto;padding:104px 0 64px}
  .b .bhero__grid{grid-template-columns:1fr;gap:38px}
  .b .tilt{order:-1}
  .b .tilt__inner{max-width:250px}
  .b .tilt__badge{left:12px;bottom:-14px;font-size:9px;padding:9px 13px}
  .b .bhero__actions{gap:12px}
  .b .bhero__actions .btn{width:100%;justify-content:center}
  .b .cap{max-width:100%}
  .b .cap__row{flex-direction:column}
  .b .cap__btn{width:100%;justify-content:center}
  .b .bhero__meta{gap:14px 26px}

  .b .ticker__item{padding:16px 22px}
  .b .ticker__n{font-size:1.4rem}
  .b .ticker__l{font-size:12px}

  .b .reel__head{margin-bottom:22px}
  .b .reel__card{width:132px}

  .b .bcase{gap:28px}
  .b .bcase__vis{order:-1}
  .b .bstats{grid-template-columns:1fr 1fr;gap:18px}
  .b .bpoint{grid-template-columns:1fr;gap:8px}

  .b .bfounder{grid-template-columns:1fr;gap:22px}
  .b .bfounder img{max-width:180px}
  .b .bperson{padding:26px 22px}
  .b .bperson img{width:64px;height:64px;margin-bottom:16px}

  .b .bmission__col{padding:24px 22px}
  .b .bcards,.b .bfacts{gap:1px}
  .b .bfacts{grid-template-columns:1fr 1fr;gap:20px}
  .b .bcard{padding:24px 22px}

  .b .bclose__actions{flex-direction:column;align-items:stretch}
  .b .bclose__actions .btn{width:100%;justify-content:center}
  .b .bstrip__inner{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:420px){
  .b .bhero__title{font-size:38px}
  .b .bhead__title,.b .bcase__title,.b .bclose__title,.b .reel__title{font-size:27px}
  .b .bperson h3,.b .bcard h3{font-size:21px}
}

/* the off-canvas drawer sits translated off-screen — stop it creating a horizontal scrollbar */
@media (max-width:1180px){
  .b .menu{visibility:hidden;transition:transform .35s var(--ease),visibility .35s}
  .b .nav.is-menuopen .menu{visibility:visible}
}

/* the drawer now fades in place instead of sliding in from off-canvas —
   an off-screen fixed panel was leaving the page horizontally scrollable */
@media (max-width:1180px){
  .b .menu{
    transform:none;opacity:0;visibility:hidden;
    transition:opacity .28s var(--ease),visibility .28s;
  }
  .b .nav.is-menuopen .menu{opacity:1;visibility:visible}
}
@media (max-width:760px){
  /* the badge duplicates the eyebrow on a narrow screen and crowds the cover */
  .b .tilt__badge{display:none}
  .b .tilt__inner{max-width:220px}
}

/* ---------------- mobile spacing: close the gaps around the reel and case ---------------- */
@media (max-width:860px){
  .b .reel__pin{padding:56px 0 36px}
  .b .reel__hint{display:none}          /* nothing is pinned at this width, so the cue is misleading */
  .b .reel__track{padding-bottom:8px}
}
@media (max-width:760px){
  .b .bsec{padding:clamp(52px,9vw,76px) 0}
  .b .bcase__vis{order:0}               /* lead with the headline, not the page image */
  .b .bhead{margin-bottom:28px}
  .b .bcase{gap:24px}
}

/* the field's flex-basis was sizing the MAIN axis — once the row stacks to a
   column that basis becomes height, which is why the input grew ~260px tall */
@media (max-width:760px){
  .b .cap__input{flex:0 0 auto;width:100%;height:54px;padding:0 16px}
  .b .cap__btn{flex:0 0 auto;width:100%;height:54px;padding:0 24px}
}

/* ---------------- mobile nav: no burger ----------------
   The site menu is dropped on phones and the magazine CTA takes its place.
   The logo still links to cloudzeninnovations.com, so the site stays reachable. */
@media (max-width:1180px){
  .b .nav__burger{display:none}
  .b .menu{display:none}
  .b .nav__cta{display:inline-flex;margin-left:auto;padding:11px 18px;font-size:12px}
}
@media (max-width:420px){
  .b .nav__cta{padding:10px 14px;font-size:11px;letter-spacing:.04em}
  .b .nav__logo{height:32px}
}