/* ============================================================
   RANGBLAZE MEDIA: 04 · SECTIONS
   Larger structural pieces: nav, mega menu, hero, footer, etc.
   ============================================================ */

/* ---------- HEADER + NAV ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;
  transition:background var(--t) var(--ease),border-color var(--t),backdrop-filter var(--t),transform .5s var(--ease)}
.site-header.stuck{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);
  border-bottom-color:var(--line);box-shadow:0 1px 16px rgba(10,20,48,.05)}
.site-header.hidden{transform:translateY(-105%)}
/* A transformed, filtered, or backdrop-filtered ancestor becomes the
   containing block for its position:fixed descendants. Because .mainnav (the
   mobile menu) lives inside .site-header, ANY such property on the header traps
   the menu inside the small header box instead of the viewport. While the menu
   is open we strip every one of those properties so the fixed menu is sized
   against the viewport and fills the screen. */
.nav-open .site-header{
  transform:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
  perspective:none!important;
  will-change:auto!important;
  transition:none!important;
}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1rem}
.brand{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;z-index:110}
.brand img{height:26px;width:auto}
.brand .brand-light{display:block}
.brand .brand-dark{display:none}
.stuck .brand .brand-light,.nav-open .brand .brand-light{display:none}
.stuck .brand .brand-dark,.nav-open .brand .brand-dark{display:block}

.mainnav{display:flex;align-items:center;gap:.1rem}
.mainnav > li{position:relative}
.mainnav > li > a,.mainnav > li > button{display:flex;align-items:center;gap:.4rem;
  padding:.6rem .85rem;border-radius:8px;
  font-family:var(--f-num);font-size:.82rem;letter-spacing:.02em;
  color:rgba(255,255,255,.85);transition:color var(--t-fast),background var(--t-fast)}
.stuck .mainnav > li > a,.stuck .mainnav > li > button{color:var(--body)}
.mainnav > li > a:hover,.mainnav > li > button:hover,
.mainnav > li.open > button{color:#fff;background:rgba(255,255,255,.1)}
.stuck .mainnav > li > a:hover,.stuck .mainnav > li > button:hover,
.stuck .mainnav > li.open > button{color:var(--blaze);background:var(--paper)}
.mainnav .caret{width:9px;height:9px;transition:transform var(--t) var(--ease)}
.mainnav li.open .caret{transform:rotate(180deg)}

.hdr-cta{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}

/* ---------- MEGA MENU ---------- */
.mega{position:fixed;inset:var(--nav-h) 0 auto;z-index:99;
  background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-lg);
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega-in{display:grid;grid-template-columns:.85fr 2.15fr;gap:clamp(1.5rem,4vw,3.5rem);
  padding-block:clamp(1.8rem,3vw,2.6rem)}
@media(max-width:900px){.mega{display:none}}
.mega-intro h3{font-size:1.4rem;margin-bottom:.6rem}
.mega-intro p{font-size:.92rem;color:var(--body);margin-bottom:1.2rem;max-width:30ch}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;align-content:start}
@media(max-width:1080px){.mega-grid{grid-template-columns:repeat(2,1fr)}}
.mega-item{display:flex;gap:.75rem;align-items:flex-start;padding:.8rem .9rem;border-radius:10px;
  transition:background var(--t-fast)}
.mega-item:hover{background:var(--paper)}
.mega-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 34px;line-height:0;
  background:color-mix(in srgb,var(--accent,var(--blaze)) 12%,var(--paper));
  color:var(--accent,var(--blaze));transition:background var(--t-fast),color var(--t-fast)}
.mega-ico svg{width:17px;height:17px;display:block;margin:auto}
.mega-item:hover .mega-ico{background:var(--accent,var(--blaze));color:#fff}
.mega-item b{display:block;font-family:var(--f-dis);font-weight:700;font-size:.92rem;color:var(--ink);
  letter-spacing:-.01em;line-height:1.25}
.mega-item span:not(.mega-ico){display:block;font-size:.78rem;color:var(--mute);margin-top:.15rem;line-height:1.4}
.mega-backdrop{position:fixed;inset:0;z-index:98;background:rgba(10,20,48,.28);
  opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t)}
.mega-backdrop.open{opacity:1;visibility:visible}

/* ---------- MOBILE NAV ---------- */
.burger{display:none;width:44px;height:44px;border-radius:10px;position:relative;z-index:110}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:#fff;border-radius:2px;
  transition:transform var(--t) var(--ease),opacity var(--t-fast)}
.stuck .burger span{background:var(--ink)}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:28px}
.nav-open .burger span{background:#fff}
.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-open .burger span:nth-child(2){opacity:0}
.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
  .burger{display:block}
  /* Old top-slide .mainnav is hidden on mobile; the drawer replaces it. */
  .mainnav{display:none}
  .hdr-cta .btn{display:none}
}
@media(min-width:901px){.m-sub{display:none}}

/* ---------- MOBILE DRAWER (right-slide, outside the header) ---------- */
.drawer{position:fixed;inset:0;z-index:120;background:rgba(10,20,48,.55);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease);backdrop-filter:blur(2px)}
.drawer.open{opacity:1;visibility:visible}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);
  background:var(--ink);color:#fff;padding:1.6rem 1.4rem 2.5rem;overflow-y:auto;
  transform:translateX(100%);transition:transform .32s var(--ease);
  box-shadow:-8px 0 40px rgba(0,0,0,.4)}
.drawer.open .drawer-panel{transform:none}
.drawer-panel .dp-close{position:absolute;top:1.2rem;right:1.2rem;width:40px;height:40px;
  border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;
  color:#fff;border:0;cursor:pointer}
.drawer-panel .dp-close svg{width:20px;height:20px;display:block}
.drawer-brand{display:inline-block;font-family:var(--f-dis);font-weight:800;font-size:1.2rem;
  color:#fff;letter-spacing:-.02em;margin-bottom:1.1rem}
.drawer-panel .dp-cta{display:inline-flex;margin-bottom:.5rem}
.dp-head{font-family:var(--f-mono,monospace);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blaze);margin:1.5rem 0 .5rem}
.drawer-panel a.dp-link{display:block;padding:.62rem .2rem;border-bottom:1px solid rgba(255,255,255,.09);
  font-size:.95rem;color:rgba(255,255,255,.85);transition:color var(--t-fast)}
.drawer-panel a.dp-link:hover{color:#fff}

/* ---------- HERO ---------- */
.hero{min-height:min(92vh,900px);display:flex;align-items:center;
  padding-block:calc(var(--nav-h) + clamp(3rem,8vh,6rem)) clamp(3.5rem,7vh,5rem);
  background:var(--ink);color:var(--text-d);overflow:hidden;isolation:isolate}
.hero video,.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.3;z-index:-3}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(56% 62% at 84% 12%,rgba(228,28,60,.26),transparent 62%),
    radial-gradient(60% 66% at 6% 94%,rgba(24,39,79,.9),transparent 66%),
    linear-gradient(172deg,#0C1734,var(--ink));
  animation:drift 24s var(--ease) infinite alternate}
@keyframes drift{to{transform:scale(1.06) translate(-1.5%,1%)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.15;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;width:100%}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:2.5rem}}
.hero h1{font-size:var(--fs-hero);color:#fff;letter-spacing:-.042em;margin-bottom:1.35rem}

/* the word-cycler, motion + colour + positioning in one element */
.cycler{display:inline-grid;vertical-align:bottom}
.cycler .slot{grid-area:1/1;display:inline-flex;position:relative;
  opacity:0;transform:translateY(.35em);color:#fff;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.cycler .slot.on{opacity:1;transform:none}
.cycler .slot.off{opacity:0;transform:translateY(-.35em)}
.cycler .slot::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.09em;
  border-radius:2px;background:var(--slot-accent,var(--blaze));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-o) .15s}
.cycler .slot.on::after{transform:scaleX(1)}

.hero .lead{margin-bottom:2rem;max-width:54ch}
.hero-promise{display:flex;align-items:center;gap:.6rem;margin-top:1.4rem;
  font-family:var(--f-num);font-size:.76rem;color:var(--text-d2);letter-spacing:.02em}
.hero-promise i{width:6px;height:6px;border-radius:50%;background:var(--pos-hi);flex:0 0 6px;
  box-shadow:0 0 0 3px rgba(53,199,126,.2);animation:beat 2.6s infinite}
@keyframes beat{50%{box-shadow:0 0 0 7px rgba(53,199,126,.03)}}

/* hero panel: aggregate figures only */
.hpanel{background:rgba(255,255,255,.045);border:1px solid var(--rule-d);border-radius:16px;
  backdrop-filter:blur(14px);overflow:hidden}
.hpanel-h{padding:.95rem 1.3rem;border-bottom:1px solid var(--rule-d);
  font-family:var(--f-num);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-d2)}
.hpanel-b{display:grid;grid-template-columns:1fr 1fr}
.hpanel-b div{padding:1.25rem 1.3rem;border-bottom:1px solid var(--rule-d)}
.hpanel-b div:nth-child(odd){border-right:1px solid var(--rule-d)}
.hpanel-b div:nth-last-child(-n+2){border-bottom:0}
.hpanel-b b{display:block;font-family:var(--f-num);font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,2.6vw,1.95rem);font-weight:600;color:#fff;line-height:1;letter-spacing:-.03em}
.hpanel-b span{display:block;font-size:.76rem;color:var(--text-d2);margin-top:.4rem;line-height:1.4}

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{background:var(--ink);color:var(--text-d);position:relative;overflow:hidden;isolation:isolate;
  padding-block:calc(var(--nav-h) + clamp(2.5rem,6vw,4rem)) clamp(3rem,6vw,4.5rem)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(56% 74% at 84% 12%,color-mix(in srgb,var(--accent,var(--blaze)) 24%,transparent),transparent 62%)}
.page-hero h1{color:#fff;max-width:20ch;margin-bottom:1rem}
.page-hero .lead{max-width:60ch}

/* ---------- LOGO TABS (trust) ---------- */
.trust-top{text-align:center;margin-bottom:2rem}
.trust-top p{font-family:var(--f-num);font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mute)}
.trust-top strong{color:var(--ink)}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem;
  border-bottom:1px solid var(--line);margin-bottom:2.2rem}
.tabs button{padding:.8rem 1.15rem;position:relative;
  font-family:var(--f-dis);font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  color:var(--mute);transition:color var(--t)}
.tabs button::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:-1px;height:2px;
  background:var(--blaze);transform:scaleX(0);transition:transform .35s var(--ease-o)}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.logos div{background:#fff;aspect-ratio:5/2;display:grid;place-items:center;padding:1rem;
  transition:background var(--t)}
.logos div:hover{background:var(--paper)}
.logos img{max-height:40px;width:auto;filter:grayscale(1);opacity:.55;
  transition:filter var(--t),opacity var(--t)}
.logos div:hover img{filter:none;opacity:1}
.logos b{font-family:var(--f-dis);font-weight:700;font-size:.9rem;color:var(--ink);
  letter-spacing:-.02em;opacity:.45;text-align:center;line-height:1.25;transition:opacity var(--t)}
.logos div:hover b{opacity:1}

/* ---------- STACKING CARDS (problem-led, matches current site) ---------- */
.stack{display:flex;flex-direction:column;gap:.9rem}
.stack-item{position:sticky;top:calc(var(--nav-h) + 16px + var(--i) * 13px)}
.stack-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);
  padding:clamp(1.6rem,3.4vw,3rem);display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.4rem,3.5vw,3rem);align-items:center;overflow:hidden}
@media(max-width:760px){.stack-card{grid-template-columns:1fr;gap:1.2rem}}
.stack-item:nth-child(even) .stack-card{background:var(--paper)}
.stack-card .badge{margin-bottom:1rem}
.stack-card h3{font-size:clamp(1.35rem,2.4vw,1.95rem);margin-bottom:.75rem}
.stack-card p{font-size:1rem;margin-bottom:1.3rem}
.stack-visual{aspect-ratio:4/3;border-radius:var(--r);background:
  linear-gradient(135deg,var(--accent-tint,var(--paper-2)),#fff);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--accent,var(--mute));
  position:relative;overflow:hidden}
.stack-visual svg{width:34%;height:34%;opacity:.5}
.stack-visual::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 70% 20%,color-mix(in srgb,var(--accent,var(--blaze)) 14%,transparent),transparent 55%)}

/* ---------- RESULTS / CASE ROWS (no client names) ---------- */
.res{display:grid;gap:1.1rem}
.res article{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
  transition:box-shadow .45s var(--ease)}
.res article:hover{box-shadow:var(--sh)}
.res-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 1.2rem;
  padding:1.1rem 1.4rem;border-bottom:1px solid var(--line);background:var(--paper)}
.res-h h3{font-size:1.06rem}
.res-h .when{font-family:var(--f-num);font-size:.7rem;color:var(--mute);letter-spacing:.06em}
.res-b{padding:1.1rem 1.4rem;font-size:.92rem;line-height:1.65}
.res-m{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line)}
@media(max-width:600px){.res-m{grid-template-columns:1fr}}
.res-m div{background:#fff;padding:1rem 1.4rem}
.res-m b{display:block;font-family:var(--f-num);font-variant-numeric:tabular-nums;
  font-size:1.32rem;font-weight:600;color:var(--ink);letter-spacing:-.025em}
.res-m b.up{color:var(--pos)}
.res-m small{display:block;font-family:var(--f-num);font-size:.63rem;color:var(--mute);
  letter-spacing:.08em;text-transform:uppercase;margin-top:.28rem}

/* ---------- STRENGTHS GRID ---------- */
.str-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(max-width:900px){.str-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.str-grid{grid-template-columns:1fr}}
.str-item{background:#fff;padding:clamp(1.5rem,2.6vw,2rem);display:flex;flex-direction:column;gap:.55rem;
  position:relative;transition:background var(--t)}
.str-item::after{content:"";position:absolute;inset:auto 0 0 0;height:2.5px;background:var(--blaze);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-o)}
.str-item:hover{background:var(--paper)}
.str-item:hover::after{transform:scaleX(1)}
.str-item h3{font-size:1.04rem}
.str-item p{font-size:.86rem}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.cbox{background:rgba(255,255,255,.05);border:1px solid var(--rule-d);border-radius:16px;
  padding:clamp(1.5rem,3vw,2.2rem);backdrop-filter:blur(12px)}
.clist{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.8rem}
.clist > div{display:flex;gap:.9rem;align-items:flex-start}
.clist svg{width:19px;height:19px;color:var(--blaze-hi);flex:0 0 19px;margin-top:.22rem}
.clist b{display:block;color:#fff;font-family:var(--f-dis);font-weight:700;font-size:.95rem;margin-bottom:.15rem}
.clist span{font-size:.9rem;color:var(--text-d)}

/* ---------- CTA BAND ---------- */
.cta-band{background:var(--ink);color:#fff;text-align:center;position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(4rem,8vw,6rem)}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(48% 70% at 50% 0%,rgba(228,28,60,.26),transparent 66%)}
.cta-band h2{color:#fff;max-width:18ch;margin-inline:auto;margin-bottom:1.1rem}
.cta-band .lead{color:var(--text-d);max-width:56ch;margin-inline:auto;margin-bottom:2rem}
.cta-meta{margin-top:1.6rem;font-family:var(--f-num);font-size:.72rem;color:var(--text-d2)}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--ink-deep);color:var(--text-d2);padding-block:3.2rem 2rem;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:2rem;
  padding-bottom:2.4rem;border-bottom:1px solid var(--rule-d)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.site-footer .brand img{height:24px;margin-bottom:1rem}
.site-footer h4{font-family:var(--f-num);font-size:.67rem;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:#5F6E8C;margin-bottom:1rem}
.site-footer ul{display:flex;flex-direction:column;gap:.55rem}
.site-footer a:hover{color:var(--blaze-hi)}
.foot-socials{display:flex;gap:.5rem;margin-top:1.2rem}
.foot-socials a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--rule-d);transition:background var(--t),border-color var(--t),transform var(--t) var(--ease)}
.foot-socials a:hover{background:var(--blaze);border-color:var(--blaze);color:#fff;transform:translateY(-3px)}
.foot-socials svg{width:16px;height:16px}
.foot-meta{display:flex;flex-wrap:wrap;gap:.7rem 2rem;justify-content:space-between;
  padding-top:1.6rem;font-family:var(--f-num);font-size:.71rem;color:#5F6E8C;letter-spacing:.04em}

/* ============================================================
   SERVICE DETAIL PAGE: rich sections
   ============================================================ */

/* hero variants */
.svc-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:900px){.svc-hero-grid{grid-template-columns:1fr;gap:2.2rem}}
.svc-hero-center{text-align:center;max-width:760px;margin-inline:auto}
.svc-hero-center .badge{margin-inline:auto}
.svc-panel .svc-panel-b{display:grid;grid-template-columns:1fr}
.svc-panel-b div{padding:1.1rem 1.3rem;border-bottom:1px solid var(--rule-d);display:flex;
  align-items:baseline;justify-content:space-between;gap:1rem}
.svc-panel-b div:last-child{border-bottom:0}
.svc-panel-b b{font-family:var(--f-num);font-size:1.5rem;font-weight:600;color:#fff;letter-spacing:-.02em;
  flex:0 0 auto}
.svc-panel-b span{font-size:.82rem;color:var(--text-d2);text-align:right;line-height:1.4}
/* center-layout inline stats */
.svc-stats-row{display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem;margin-top:2.4rem;
  padding-top:2rem;border-top:1px solid var(--rule-d)}
.svc-stats-row div{text-align:center}
.svc-stats-row b{display:block;font-family:var(--f-num);font-size:1.7rem;font-weight:600;color:#fff;
  letter-spacing:-.02em;line-height:1}
.svc-stats-row span{display:block;font-size:.8rem;color:var(--text-d2);margin-top:.4rem}

/* what-is (answer-first) */
.whatis-q{font-size:clamp(1.7rem,3vw,2.4rem)}
.whatis-body{max-width:60ch}
.whatis-a{font-size:1.22rem;line-height:1.6;color:var(--ink);font-weight:400;
  padding-left:1.3rem;border-left:3px solid var(--accent,var(--blaze));margin-bottom:1.3rem}
.whatis-body p + p{margin-top:1.1rem;color:var(--body)}

/* why-it-matters band */
.why-inner{display:flex;gap:1.4rem;align-items:flex-start;max-width:900px}
.why-mark{flex:0 0 auto;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent,var(--blaze)) 16%,#fff);color:var(--accent-deep,var(--blaze))}
.why-mark svg{width:24px;height:24px}
.why-inner p{font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.55;color:var(--ink);font-weight:400}

/* process timeline */
.process{position:relative;max-width:900px;display:flex;flex-direction:column;gap:0}
.process::before{content:"";position:absolute;left:23px;top:20px;bottom:20px;width:2px;
  background:linear-gradient(var(--accent,var(--blaze)),color-mix(in srgb,var(--accent,var(--blaze)) 15%,transparent))}
.process li{position:relative;display:flex;gap:1.5rem;padding:1.1rem 0 2rem;align-items:flex-start}
.process li:last-child{padding-bottom:0}
.proc-n{flex:0 0 48px;width:48px;height:48px;border-radius:50%;z-index:1;
  display:grid;place-items:center;background:var(--accent,var(--blaze));color:#fff;
  font-family:var(--f-num);font-weight:600;font-size:.92rem;
  box-shadow:0 0 0 6px var(--white),0 6px 16px color-mix(in srgb,var(--accent,var(--blaze)) 40%,transparent)}
.on-paper .proc-n{box-shadow:0 0 0 6px var(--paper),0 6px 16px color-mix(in srgb,var(--accent,var(--blaze)) 40%,transparent)}
.proc-c{padding-top:.35rem}
.proc-c h3{font-size:1.12rem;margin-bottom:.3rem}
.proc-c p{font-size:.96rem;max-width:60ch}

/* deliverables */
.deliver{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 2.5rem}
@media(max-width:720px){.deliver{grid-template-columns:1fr}}
.deliver-i{display:flex;gap:1rem;align-items:flex-start}
.deliver-ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent,var(--blaze)) 12%,#fff);color:var(--accent-deep,var(--blaze))}
.deliver-ic svg{width:19px;height:19px}
.deliver-i h3{font-size:1.04rem;margin-bottom:.25rem}
.deliver-i p{font-size:.92rem}

/* pricing hint */
.pricing-hint{display:flex;gap:1.5rem;align-items:flex-start;padding:clamp(1.6rem,3vw,2.4rem);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);max-width:920px}
@media(max-width:640px){.pricing-hint{flex-direction:column;gap:1rem}}
.pricing-ic{flex:0 0 auto;width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:var(--accent,var(--blaze));color:#fff}
.pricing-ic svg{width:26px;height:26px}
.pricing-hint p{font-size:1.02rem;color:var(--body);max-width:62ch;margin-top:.3rem}

/* next-service link */
.next-svc{display:block;padding:1.6rem 1.9rem;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;transition:border-color var(--t),box-shadow var(--t)}
.next-svc:hover{border-color:transparent;box-shadow:var(--sh-lg)}
.next-svc-row{display:flex;align-items:center;gap:1rem;margin-top:.5rem}
.next-svc-ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;
  background:color-mix(in srgb,var(--accent,var(--blaze)) 10%,var(--paper));color:var(--accent,var(--blaze));
  transition:background var(--t),color var(--t)}
.next-svc:hover .next-svc-ic{background:var(--accent,var(--blaze));color:#fff}
.next-svc-ic svg{width:22px;height:22px}
.next-svc h3{flex:1;font-size:1.2rem}
.next-svc-arrow{color:var(--accent,var(--blaze));transition:transform var(--t) var(--ease)}
.next-svc:hover .next-svc-arrow{transform:translateX(6px)}
.next-svc-arrow svg{width:22px;height:22px}

/* ============================================================
   COMPARISONS (Tier 10)
   ============================================================ */
.cmp-vs{display:inline-flex;align-items:center;gap:.75rem;margin-bottom:1.4rem;
  font-family:var(--f-num);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.cmp-vs span{padding:.4rem .85rem;border-radius:99px;
  background:rgba(255,255,255,.09);border:1px solid var(--rule-d2);color:#fff}
.cmp-vs i{font-style:normal;color:var(--blaze-hi);font-size:.74rem}
/* card variant sits on light backgrounds */
.cmp-vs.sm{margin-bottom:.9rem;font-size:.7rem;gap:.5rem}
.cmp-vs.sm span{padding:.28rem .6rem;background:var(--accent-tint,var(--paper-2));
  border-color:transparent;color:var(--accent-deep,var(--ink))}
.cmp-vs.sm i{color:var(--mute)}

/* answer-first block */
.cmp-answer{max-width:78ch;margin-inline:auto;padding:clamp(1.6rem,3.4vw,2.6rem);
  border-radius:var(--r-lg);background:var(--accent-tint,var(--paper));
  border-left:4px solid var(--accent,var(--blaze))}
.cmp-answer .eyebrow{color:var(--accent-deep,var(--blaze));margin-bottom:.7rem}
.cmp-answer p{font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.62;color:var(--ink);font-weight:400}

/* decision table */
.cmp-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  -webkit-overflow-scrolling:touch}
.cmp-table{width:100%;border-collapse:collapse;min-width:660px;font-size:.94rem}
.cmp-table thead th{background:var(--ink);color:#fff;text-align:left;padding:.95rem 1.1rem;
  font-family:var(--f-dis);font-size:.84rem;font-weight:700;letter-spacing:.02em;position:sticky;top:0}
.cmp-table thead th:first-child{width:22%}
.cmp-table thead th:nth-child(2){box-shadow:inset 3px 0 0 var(--accent,var(--blaze))}
.cmp-table tbody th{text-align:left;padding:.9rem 1.1rem;vertical-align:top;
  font-family:var(--f-dis);font-size:.88rem;font-weight:700;color:var(--ink);
  background:var(--paper);border-bottom:1px solid var(--line);width:22%}
.cmp-table tbody td{padding:.9rem 1.1rem;vertical-align:top;color:var(--body);
  border-bottom:1px solid var(--line);border-left:1px solid var(--line);line-height:1.55}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:0}

/* pick-each cards */
.cmp-pick{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.2vw,1.6rem)}
@media(max-width:820px){.cmp-pick{grid-template-columns:1fr}}
.cmp-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.2rem);position:relative;overflow:hidden}
.cmp-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent,var(--blaze))}
.cmp-card.is-b::before{background:var(--ink)}
.cmp-card-tag{display:inline-block;margin-bottom:.9rem;padding:.32rem .75rem;border-radius:99px;
  font-family:var(--f-num);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--accent-tint,var(--paper-2));color:var(--accent-deep,var(--ink))}
.cmp-card.is-b .cmp-card-tag{background:var(--paper-2);color:var(--ink)}
.cmp-card h3{font-size:1.24rem;margin-bottom:1.1rem}
.cmp-card ul{display:flex;flex-direction:column;gap:.75rem}
.cmp-card li{display:flex;gap:.7rem;align-items:flex-start;font-size:.96rem;color:var(--body);line-height:1.55}
.cmp-card li svg{width:17px;height:17px;flex:0 0 17px;margin-top:.28rem;color:var(--accent,var(--blaze))}
.cmp-card.is-b li svg{color:var(--ink)}

/* "run both" band */
.cmp-both{display:flex;gap:1.3rem;align-items:flex-start;margin-top:clamp(1.4rem,3vw,2.2rem);
  padding:clamp(1.5rem,3vw,2.2rem);border-radius:var(--r-lg);
  background:var(--paper);border:1px dashed var(--line-2)}
@media(max-width:640px){.cmp-both{flex-direction:column;gap:.9rem}}
.cmp-both-ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent,var(--blaze));color:#fff}
.cmp-both-ic svg{width:22px;height:22px}
.cmp-both h3{font-size:1.1rem;margin-bottom:.4rem}
.cmp-both p{color:var(--body);max-width:76ch;line-height:1.68}

/* verdict */
.cmp-verdict{max-width:74ch}
.cmp-verdict h2{color:#fff;margin-bottom:1rem}
.cmp-verdict p{font-size:clamp(1.02rem,1.4vw,1.14rem);line-height:1.72;color:var(--text-d)}

/* ============================================================
   GLOSSARY (Tier 9)
   ============================================================ */
.gl-formula-hero{margin-top:1.2rem;display:inline-block;padding:.55rem .95rem;border-radius:var(--r-sm);
  font-family:var(--f-num);font-size:.9rem;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid var(--rule-d2)}

.gl-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(2rem,4.5vw,3.6rem);align-items:start}
@media(max-width:1000px){.gl-layout{grid-template-columns:1fr}}
.gl-side{display:flex;flex-direction:column;gap:1.2rem;position:sticky;top:calc(var(--nav-h) + 1.5rem)}
@media(max-width:1000px){.gl-side{position:static}}
.gl-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.2rem,2.2vw,1.6rem)}
.gl-box h3{font-size:.82rem;font-family:var(--f-num);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);margin-bottom:1rem}
.gl-rel{display:flex;flex-direction:column;gap:.2rem}
.gl-rel a{display:block;padding:.65rem .75rem;border-radius:var(--r-sm);
  transition:background var(--t-fast)}
.gl-rel a:hover{background:#fff}
.gl-rel b{display:block;font-family:var(--f-dis);font-size:.95rem;color:var(--ink);margin-bottom:.15rem}
.gl-rel span{display:block;font-size:.83rem;color:var(--mute);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.gl-svc{background:var(--accent-tint,var(--paper));border-color:transparent}
.gl-svc-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;margin-bottom:.9rem;
  background:var(--accent,var(--blaze));color:#fff}
.gl-svc-ic svg{width:21px;height:21px}
.gl-svc p{font-size:.92rem;color:var(--body);margin-bottom:.9rem;line-height:1.6}

/* formula callout inside prose */
.gl-formula{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;
  padding:1.05rem 1.25rem;border-radius:var(--r-sm);
  background:var(--ink);color:#fff;margin-block:1.5rem}
.gl-formula span{font-family:var(--f-num);font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-d2)}
.gl-formula code{font-family:var(--f-num);font-size:1rem;color:#fff;background:none;padding:0}

/* indicative benchmark callout, deliberately hedged, never a promise */
.gl-bench{display:flex;gap:1rem;align-items:flex-start;margin-block:1.6rem;
  padding:1.1rem 1.3rem;border-radius:var(--r-sm);
  background:var(--paper);border:1px dashed var(--line-2)}
.gl-bench-ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--accent,var(--blaze))}
.gl-bench-ic svg{width:17px;height:17px}
.gl-bench b{display:block;font-family:var(--f-num);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);margin-bottom:.3rem}
.gl-bench p{font-size:.95rem;color:var(--body);line-height:1.6;margin:0}

.gl-card-f{display:block;font-family:var(--f-num);font-size:.76rem;color:var(--mute);
  margin-bottom:.3rem}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.ct-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,3.6rem);align-items:start}
@media(max-width:960px){.ct-grid{grid-template-columns:1fr}}

.ct-alert{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.6rem;
  padding:1.1rem 1.25rem;border-radius:var(--r);border:1px solid var(--line)}
.ct-alert svg{width:20px;height:20px;flex:0 0 20px;margin-top:.15rem}
.ct-alert b{display:block;font-family:var(--f-dis);color:var(--ink);margin-bottom:.2rem}
.ct-alert p{font-size:.93rem;color:var(--body);margin:0;line-height:1.55}
.ct-alert.is-ok{background:color-mix(in srgb,var(--pos) 8%,#fff);border-color:color-mix(in srgb,var(--pos) 28%,#fff)}
.ct-alert.is-ok svg{color:var(--pos)}
.ct-alert.is-err{background:color-mix(in srgb,var(--blaze) 6%,#fff);border-color:color-mix(in srgb,var(--blaze) 26%,#fff)}
.ct-alert.is-err svg{color:var(--blaze);transform:rotate(45deg)}

.ct-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3.2vw,2.4rem);box-shadow:var(--sh)}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media(max-width:560px){.ct-row{grid-template-columns:1fr}}
.field .req{float:right;font-size:.62rem;letter-spacing:.08em;color:var(--blaze);text-transform:uppercase}
.ct-form .fnote{margin-top:1rem;font-size:.82rem;color:var(--mute);line-height:1.55}
.ct-form .fnote a{color:var(--blaze);text-decoration:underline;text-underline-offset:2px}

.ct-aside{display:flex;flex-direction:column;gap:1.1rem}
.ct-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.3rem,2.4vw,1.7rem)}
.ct-h{font-size:.82rem;font-family:var(--f-num);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);margin-bottom:1.1rem}
.ct-list{display:flex;flex-direction:column;gap:1.05rem}
.ct-list > div{display:flex;gap:.85rem;align-items:flex-start}
.ct-list svg{width:18px;height:18px;flex:0 0 18px;margin-top:.2rem;color:var(--blaze)}
.ct-list b{display:block;font-family:var(--f-dis);font-size:.92rem;color:var(--ink);margin-bottom:.15rem}
.ct-list span{font-size:.9rem;color:var(--body);line-height:1.55}
.ct-list a{color:var(--blaze);text-decoration:underline;text-underline-offset:2px}

.badge-row{display:flex;flex-wrap:wrap;gap:.7rem}
.badge-card{flex:1 1 140px;display:flex;flex-direction:column;gap:.5rem;
  padding:1rem;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);text-align:center;
  align-items:center}
.badge-card svg{width:24px;height:24px;color:var(--blaze)}
.badge-card b{font-family:var(--f-dis);font-size:.82rem;color:var(--ink);line-height:1.35}

.ct-creators{background:var(--accent-tint,var(--paper));border-color:transparent}
.ct-creators-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  margin-bottom:.9rem;background:var(--accent,var(--blaze));color:#fff}
.ct-creators-ic svg{width:21px;height:21px}
.ct-creators p{font-size:.93rem;color:var(--body);line-height:1.6;margin-bottom:1rem}

/* offices */
.off-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.6vw,1.8rem);align-items:start}
@media(max-width:900px){.off-grid{grid-template-columns:1fr}}
.off-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.1rem);height:100%}
.off-card.is-soon{background:var(--paper);border-style:dashed;border-color:var(--line-2)}
.off-head{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.2rem}
.off-pin{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent,var(--ink));color:#fff}
.off-card.is-soon .off-pin{background:var(--paper-2);color:var(--mute)}
.off-pin svg{width:20px;height:20px}
.off-head h3{font-size:1.3rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.off-tag{font-family:var(--f-num);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.26rem .6rem;border-radius:99px}
.off-tag.is-live{background:color-mix(in srgb,var(--pos) 12%,#fff);color:var(--pos)}
.off-tag.is-soon-tag{background:var(--paper-2);color:var(--mute)}
.off-since{font-size:.85rem;color:var(--mute);margin-top:.2rem}
.off-addr{font-style:normal;font-size:.98rem;color:var(--body);line-height:1.7;margin-bottom:.9rem}
.off-hours{display:flex;gap:.55rem;align-items:center;font-size:.9rem;color:var(--ink);
  font-family:var(--f-num);margin-bottom:1.2rem}
.off-hours svg{width:16px;height:16px;color:var(--accent,var(--blaze));flex:0 0 16px}
.off-map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin-bottom:1.2rem;
  aspect-ratio:16/10;background:var(--paper-2)}
.off-map iframe{width:100%;height:100%;border:0;display:block}
.off-soon-body{font-size:.97rem;color:var(--body);line-height:1.68;margin-bottom:1.1rem}
.off-soon-note{display:flex;gap:.7rem;align-items:flex-start;padding:.9rem 1rem;margin-bottom:1.2rem;
  border-radius:var(--r-sm);background:#fff;border:1px solid var(--line)}
.off-soon-note svg{width:16px;height:16px;flex:0 0 16px;margin-top:.2rem;color:var(--pos)}
.off-soon-note span{font-size:.88rem;color:var(--body);line-height:1.55}

/* ============================================================
   HOMEPAGE SHOWREEL: click to play, no autoplay, no third-party embed
   ============================================================ */
.reel{background:var(--ink);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.reel::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 70% at 78% 18%,rgba(228,28,60,.20),transparent 62%)}
.reel .head-mid h2{color:#fff}
.reel-frame{position:relative;max-width:1000px;margin:clamp(2rem,4vw,3rem) auto 0;
  aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--rule-d2);background:#05091a;box-shadow:var(--sh-lg)}
.reel-frame video,.reel-frame img{width:100%;height:100%;object-fit:cover;display:block}
.reel-poster{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;background:#05091a;color:#fff;
  transition:opacity var(--t) var(--ease)}
.reel-poster img{position:absolute;inset:0;opacity:.55;transition:opacity var(--t),transform var(--t-slow) var(--ease)}
.reel-poster:hover img{opacity:.7;transform:scale(1.03)}
.reel-poster.is-gone{opacity:0;pointer-events:none}
.reel-play{position:relative;z-index:1;display:grid;place-items:center;
  width:clamp(64px,8vw,84px);height:clamp(64px,8vw,84px);border-radius:50%;
  background:var(--blaze);color:#fff;box-shadow:0 10px 40px rgba(228,28,60,.4);
  transition:transform var(--t) var(--ease),background var(--t)}
.reel-poster:hover .reel-play{transform:scale(1.08);background:var(--blaze-hi)}
.reel-play svg{width:32px;height:32px;margin-left:3px}
.reel-label{position:relative;z-index:1;margin-top:1.1rem;font-family:var(--f-num);
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-d)}
.reel-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.6rem}
.reel-meta span{font-family:var(--f-num);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  padding:.4rem .85rem;border-radius:99px;background:rgba(255,255,255,.07);
  border:1px solid var(--rule-d);color:var(--text-d)}
@media(prefers-reduced-motion:reduce){
  .reel-poster img,.reel-play,.reel-poster{transition:none}
  .reel-poster:hover img{transform:none}
}

/* ============================================================
   SERVICE CHILD PAGES. "What the work covers"
   Numbered because scope items are a set, not a sequence; the number
   is an index for reference, and the process list below uses .process
   for anything where order genuinely matters.
   ============================================================ */
.covers{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.6vw,2rem)}
@media(max-width:820px){.covers{grid-template-columns:1fr}}
.cover-i{display:flex;gap:1.1rem;align-items:flex-start}
.cover-n{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  font-family:var(--f-num);font-size:.8rem;font-weight:600;
  background:color-mix(in srgb,var(--accent,var(--blaze)) 12%,#fff);
  color:var(--accent-deep,var(--blaze))}
.cover-i h3{font-size:1.06rem;margin-bottom:.4rem}
.cover-i p{font-size:.95rem;color:var(--body);line-height:1.68}

/* ============================================================
   INDUSTRY DEPTH: journey, economics, first 90 days, mistakes
   ============================================================ */
.journey{display:grid;gap:0;counter-reset:none;max-width:900px;margin-inline:auto}
.jrn-step{display:flex;gap:1.4rem;align-items:flex-start;padding:1.5rem 0;
  border-bottom:1px solid var(--line);position:relative}
.jrn-step:last-child{border-bottom:0}
.jrn-n{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-num);font-size:.82rem;font-weight:600;
  background:var(--accent,var(--blaze));color:#fff}
.jrn-step h3{font-size:1.1rem;margin-bottom:.4rem}
.jrn-step p{color:var(--body);line-height:1.72;font-size:.97rem}
@media(max-width:560px){.jrn-step{gap:1rem}.jrn-n{width:36px;height:36px;font-size:.74rem}}

.econ-box{display:flex;gap:1.5rem;align-items:flex-start;
  padding:clamp(1.6rem,3.4vw,2.6rem);border-radius:var(--r-lg);
  background:var(--accent-tint,var(--paper));border-left:4px solid var(--accent,var(--blaze))}
@media(max-width:640px){.econ-box{flex-direction:column;gap:1rem}}
.econ-ic{flex:0 0 auto;width:50px;height:50px;border-radius:13px;display:grid;place-items:center;
  background:var(--accent,var(--blaze));color:#fff}
.econ-ic svg{width:24px;height:24px}
.econ-box h2{font-size:clamp(1.3rem,2.2vw,1.6rem);margin-bottom:.7rem}
.econ-box p{color:var(--body);line-height:1.75;max-width:74ch;margin-bottom:1rem}

.f90{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.6rem)}
@media(max-width:860px){.f90{grid-template-columns:1fr}}
.f90-c{padding:clamp(1.4rem,2.8vw,2rem);border-radius:var(--r);
  background:rgba(255,255,255,.05);border:1px solid var(--rule-d2);position:relative}
.f90-n{display:block;font-family:var(--f-num);font-size:.74rem;letter-spacing:.12em;
  color:var(--blaze-hi);margin-bottom:.9rem}
.f90-c h3{font-size:1.06rem;color:#fff;margin-bottom:.5rem}
.f90-c p{font-size:.94rem;color:var(--text-d);line-height:1.7}

.mistakes{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:1000px;margin-inline:auto}
@media(max-width:760px){.mistakes{grid-template-columns:1fr}}
.mistakes li{display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 1.25rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:.95rem;color:var(--body);line-height:1.6}
.mis-x{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--blaze) 10%,#fff);color:var(--blaze);margin-top:.1rem}
.mis-x svg{width:13px;height:13px;transform:rotate(45deg)}

/* ============================================================
   BLOG ARTICLES
   ============================================================ */
.post-date{margin-top:1.1rem;font-family:var(--f-num);font-size:.82rem;
  letter-spacing:.06em;color:var(--text-d2)}
.takeaways{margin-top:2.6rem;padding:clamp(1.4rem,3vw,2rem);
  border-radius:var(--r);background:var(--paper);border:1px solid var(--line)}
.takeaways h2{font-size:1.12rem;margin-bottom:1rem;margin-top:0}
.takeaways ul{display:flex;flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none}
.takeaways li{display:flex;gap:.7rem;align-items:flex-start;font-size:.97rem;
  color:var(--body);line-height:1.6}
.takeaways li svg{width:17px;height:17px;flex:0 0 17px;margin-top:.25rem;color:var(--blaze)}
.post-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.6rem)}
@media(max-width:900px){.post-foot{grid-template-columns:1fr}}
.post-cat{display:block;font-family:var(--f-num);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);margin-bottom:.5rem}

/* playbook contents list on the gated landing page */
.pb-toc{counter-reset:pbt;list-style:none;padding:0;margin:1rem 0 1.4rem}
.pb-toc li{counter-increment:pbt;display:flex;gap:.9rem;align-items:flex-start;
  padding:.65rem 0;border-bottom:1px solid var(--line);font-size:.98rem;color:var(--body)}
.pb-toc li:last-child{border-bottom:0}
.pb-toc li::before{content:counter(pbt,decimal-leading-zero);flex:0 0 auto;
  font-family:var(--f-num);font-size:.78rem;color:var(--accent,var(--blaze));padding-top:.15rem}

/* ---------- STORY TIMELINE (/about/) ----------
   The year is the marker rather than a counter, because the sequence carries
   real information and an ordinal would only repeat what the year says.
   The rail warms toward the present so the eye reads direction without an
   arrow. Set in the numeral face at a size that lets the years scan on their
   own if someone skims the column. */
.story{position:relative;max-width:820px;margin:0 auto;list-style:none}
.story::before{content:"";position:absolute;left:0;top:.9rem;bottom:1.2rem;width:2px;
  background:linear-gradient(180deg,var(--line) 0%,var(--line-2) 55%,var(--blaze) 100%)}
.story li{position:relative;padding:0 0 2.6rem 5.75rem}
.story li:last-child{padding-bottom:0}
.story .st-y{position:absolute;left:0;top:0;width:4.5rem;
  font-family:var(--f-num);font-size:.92rem;font-weight:700;letter-spacing:.04em;
  color:var(--mute);text-align:left;padding-left:1.15rem}
.story li::after{content:"";position:absolute;left:-4px;top:.28rem;
  width:10px;height:10px;border-radius:50%;background:var(--line-2);
  box-shadow:0 0 0 4px var(--paper)}
.story li:last-child::after{background:var(--blaze);box-shadow:0 0 0 4px var(--paper)}
.story li:last-child .st-y{color:var(--blaze)}
.story h3{font-size:1.16rem;margin-bottom:.4rem;color:var(--ink)}
.story p{font-size:.98rem;max-width:60ch;margin:0}
.story .st-todo{border:1px dashed #c2410c;border-radius:7px;padding:.9rem 1rem;background:color-mix(in srgb,#c2410c 6%,transparent)}
.story .st-todo h3{color:#c2410c}
@media(max-width:640px){
  .story li{padding-left:0;padding-top:1.9rem}
  .story::before{left:0}
  .story .st-y{padding-left:1.15rem;top:0}
  .story li::after{top:.15rem}
}

/* ---------- NEWSLETTER SIGNUP BOX ---------- */
.nl-box{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:2rem}
.nl-fields{display:flex;gap:.6rem;flex-wrap:wrap}
.nl-fields input{flex:1;min-width:200px;padding:.7rem .9rem;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.nl-msg:empty{display:none}
.nl-msg.ok{color:var(--health-deep)}
.nl-msg.err{color:var(--blaze)}
@media(max-width:720px){ .nl-box{grid-template-columns:1fr;gap:1.2rem;padding:1.5rem} }

/* Hero tagline line ("built for India") sits on its own line, so the sector
   cycler above it never leaves an orphaned comma when the word wraps. */
.h1-tag{display:inline-block}