/* ============================================================
   MediaInsider — An Integrated Media Agency
   Fonts: Oswald (display, condensed bold — matches logo type) · Source Sans 3 (UI/body)
   Palette: #006AB6 · #0091D5 · #282829 (brand-locked, sampled from logo)
   Motion: transform/opacity only · scroll reveals · cursor
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --blue:       #006AB6;
  --blue-deep:  #004D85;
  --blue-glow:  rgba(0,106,182,0.35);
  --blue-dim:   rgba(0,106,182,0.1);
  --blue-light:      #0091D5;
  --blue-light-dim:  rgba(0,145,213,0.15);
  --blue-light-glow: rgba(0,145,213,0.4);
  --ink:       #101113;
  --ink-2:     #17181b;
  --ink-3:     #202226;
  --ink-4:     #2a2c31;
  --mid:       #5a5a5a;
  --muted:     #888;
  --border:    #e4e4e4;
  --border-dk: rgba(255,255,255,0.08);
  --surface:   #f4f6f8;
  --white:     #ffffff;
  --max-w:     1140px;
  --gap:       clamp(1rem,2.5vw,1.75rem);
  --space-1:   clamp(0.5rem, 1.2vw, 0.75rem);
  --space-2:   clamp(1rem, 2vw, 1.5rem);
  --space-3:   clamp(1.5rem, 3vw, 2.5rem);

  /* Brand logo (header + footer) — mediainsider-logo.png is a wide wordmark (~4.3:1), no tagline */
  --logo-nav-h:        45px;
  --logo-nav-bar:      80px;
  --logo-nav-h-mobile: 35px;
  --logo-nav-bar-mobile: 66px;
  --logo-footer-h:     42px;
  --logo-footer-h-mobile: 34px;
  --logo-max-w:        min(224px, 55vw);
  --logo-max-w-mobile: min(160px, 62vw);

  /* Layout helpers */
  --header-h: var(--logo-nav-bar);
  --focus-ring: 2px solid var(--blue-light);

  /* Motion */
  --ease-out:  cubic-bezier(0.16,1,0.3,1);
  --ease-back: cubic-bezier(0.34,1.56,0.64,1);
  --hero-ticker-h: 42px;
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  min-height:100%;
  scroll-padding-top:var(--header-h);
  overflow-x:hidden;
}
body{
  font-family:var(--font-body);
  font-size:1rem;line-height:1.65;
  font-weight:400;
  color:var(--ink);background:var(--white);
  overflow-x:visible;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.mi-custom-cursor{cursor:none}
@media(hover:none),(pointer:coarse){body.mi-custom-cursor{cursor:auto}}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:auto;
  z-index:10000;padding:.65rem 1rem;
  background:var(--blue);color:var(--white);
  font-weight:600;font-size:.88rem;border-radius:6px;
}
.skip-link:focus{
  left:1rem;top:1rem;
  outline:var(--focus-ring);outline-offset:3px;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ── Custom cursor ───────────────────────────────────────── */
#mi-cursor{
  position:fixed;width:12px;height:12px;
  border-radius:50%;background:var(--blue);
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s var(--ease-out),height .2s var(--ease-out),background .2s;
  mix-blend-mode:difference;
}
#mi-cursor-ring{
  position:fixed;width:40px;height:40px;
  border-radius:50%;border:1.5px solid var(--blue);
  pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);
  transition:transform .12s var(--ease-out),width .3s var(--ease-out),height .3s var(--ease-out),opacity .3s;
  opacity:.5;
}
body:has(a:hover) #mi-cursor,
body:has(button:hover) #mi-cursor{width:6px;height:6px}
body:has(a:hover) #mi-cursor-ring,
body:has(button:hover) #mi-cursor-ring{width:56px;height:56px;opacity:.8}

/* ── Scroll reveal base ──────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
.reveal.is-visible{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal-left.is-visible{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal-right.is-visible{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .6s var(--ease-out),transform .6s var(--ease-back)}
.reveal-scale.is-visible{opacity:1;transform:none}
/* stagger children */
.stagger>*{opacity:0;transform:translateY(24px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.stagger.is-visible>*{opacity:1;transform:none}
.stagger.is-visible>*:nth-child(1){transition-delay:.05s}
.stagger.is-visible>*:nth-child(2){transition-delay:.12s}
.stagger.is-visible>*:nth-child(3){transition-delay:.19s}
.stagger.is-visible>*:nth-child(4){transition-delay:.26s}

/* ── Layout ──────────────────────────────────────────────── */
.container{width:min(var(--max-w),92vw);margin-inline:auto}
.section{padding-block:clamp(4.5rem,9vw,7.5rem)}
.section--dark   {background:var(--ink);   color:var(--white)}
.section--ink2   {background:var(--ink-2); color:var(--white)}
.section--surface{background:var(--surface)}

/* ── Pages without a hero need a dark body bg so the nav stays legible ── */
/* !important required: wp_head prints an inline style (priority 99, after this
   sheet) that hardcodes body.mi-prototype to white for all MediaInsider pages. */
body.mi-prototype.mi-page-client-login{background:var(--ink) !important}

/* Portal pages have no hero image behind the nav — force a permanent dark bg
   so white nav link text is always readable (not white-on-white). */
body.mi-prototype.mi-page-client-login .nav,
body.mi-prototype.mi-page-client-dashboard .nav,
body.mi-prototype.mi-page-forgot-password .nav,
body.mi-prototype.mi-page-reset-password .nav {
  background: rgba(13,13,13,.96);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--border-dk);
}
/* Logo uses mix-blend-mode:lighten which makes it invisible on dark bgs that
   are still technically transparent. Reset it for always-dark navs. */
body.mi-prototype.mi-page-client-login .nav__logo-img,
body.mi-prototype.mi-page-client-dashboard .nav__logo-img,
body.mi-prototype.mi-page-forgot-password .nav__logo-img,
body.mi-prototype.mi-page-reset-password .nav__logo-img {
  mix-blend-mode: normal;
}

/* ── Section photo backgrounds ───────────────────────────── */
.section--has-bg{
  position:relative;
  isolation:isolate;
  background:var(--ink);
}
.section--has-bg.section--ink2{background:var(--ink-2)}
.section--has-bg > .container{
  position:relative;
  z-index:2;
}
.section__bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.section__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.06);
  filter:saturate(.85) contrast(1.05) brightness(.72);
}
.section__bg-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,rgba(13,13,13,.4) 0%,rgba(13,13,13,.65) 45%,rgba(13,13,13,.82) 100%),
    radial-gradient(ellipse 90% 70% at 50% 40%,transparent 25%,rgba(0,0,0,.35) 100%),
    radial-gradient(ellipse 55% 40% at 88% 8%,rgba(0,106,182,.12),transparent 55%),
    radial-gradient(ellipse 45% 35% at 8% 92%,rgba(0,145,213,.08),transparent 50%);
}
.stats-strip--has-bg{
  position:relative;
  isolation:isolate;
  background:var(--ink-2);
}
.stats-strip--has-bg .section__bg img{
  filter:saturate(.78) contrast(1.02) brightness(.65);
}
.stats-strip--has-bg > .container{
  position:relative;
  z-index:2;
}
@media(prefers-reduced-motion:no-preference){
  .section--has-bg .section__bg img,
  .stats-strip--has-bg .section__bg img{
    transition:transform 12s var(--ease-out);
  }
  .section--has-bg:hover .section__bg img,
  .stats-strip--has-bg:hover .section__bg img{
    transform:scale(1.09);
  }
}

/* ── Grid ────────────────────────────────────────────────── */
.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

/* ── Typography ──────────────────────────────────────────── */
.t-kicker{
  font-size:.75rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-light);display:inline-flex;align-items:center;gap:.5rem
}
.t-kicker::before{
  content:'';width:20px;height:2px;
  background:var(--blue-light);display:inline-block;flex-shrink:0
}
.t-kicker--blue{color:var(--blue)}
.t-kicker--blue::before{background:var(--blue)}
.t-kicker--white{color:rgba(255,255,255,.6)}
.t-kicker--white::before{background:rgba(255,255,255,.4)}
.t-lead{font-size:clamp(1rem,1.4vw,1.1rem);color:var(--mid);line-height:1.75;max-width:56ch}
.t-lead--white{color:rgba(255,255,255,.6)}

/* ── Navigation ──────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding-block:0;
  transition:background .35s,backdrop-filter .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(13,13,13,.92);
  backdrop-filter:blur(16px);
  border-color:var(--border-dk);
}
.nav__inner{
  display:flex;align-items:center;
  justify-content:space-between;
  height:var(--logo-nav-bar);
  width:min(var(--max-w),92vw);
  margin-inline:auto;
}
.nav__logo{
  display:flex;align-items:center;
  flex-shrink:0;
  position:relative;
  line-height:0;
}
.nav__logo-img{
  height:var(--logo-nav-h);
  width:auto;
  max-width:var(--logo-max-w);
  display:block;
  object-fit:contain;
  object-position:left center;
  transition:opacity .2s,transform .2s var(--ease-out);
}
@media (max-width:1100px){
  .nav__links{gap:1.35rem}
}
@media (max-width:900px){
  .nav__inner{height:var(--logo-nav-bar-mobile)}
  .nav__logo-img{
    height:var(--logo-nav-h-mobile);
    max-width:var(--logo-max-w-mobile);
  }
}
.nav__logo:hover .nav__logo-img{opacity:.85;transform:scale(1.03)}
.nav__links{display:flex;align-items:center;gap:2.25rem}
.nav__link{
  font-size:.88rem;font-weight:500;
  color:rgba(255,255,255,.65);
  position:relative;transition:color .2s;
  white-space:nowrap;
}
.nav__link::after{
  content:'';position:absolute;
  bottom:-4px;left:0;width:100%;height:1.5px;
  background:var(--blue-light);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .25s var(--ease-out);
}
.nav__link:hover{color:var(--white)}
.nav__link:hover::after{transform:scaleX(1)}
.nav__cta{
  background:var(--blue);color:var(--white);
  padding:.55rem 1.25rem;border-radius:6px;
  font-weight:600;font-size:.88rem;
  transition:background .2s,transform .2s,box-shadow .2s;
  box-shadow:0 4px 14px var(--blue-glow);
  white-space:nowrap;
}
.nav__cta:hover{
  background:var(--blue-deep);
  transform:translateY(-2px);
  box-shadow:0 8px 24px var(--blue-glow);
  color:var(--white);
}
.nav__link:focus-visible,
.nav__cta:focus-visible,
.nav__toggle:focus-visible{
  outline:var(--focus-ring);
  outline-offset:4px;
  border-radius:4px;
}
.nav__link[aria-current="page"],
.nav__cta[aria-current="page"]{
  color:var(--white);
}
.nav__link[aria-current="page"]::after{width:100%}
.nav__toggle{
  display:none;
  align-items:center;justify-content:center;
  width:48px;height:48px;
  border-radius:8px;
  border:1px solid var(--border-dk);
  background:rgba(255,255,255,.06);
  flex-shrink:0;
  transition:background .2s,border-color .2s;
}
.nav__toggle:hover{background:rgba(255,255,255,.12)}
.nav__toggle-bars{
  display:flex;flex-direction:column;gap:5px;width:22px;
}
.nav__toggle-bar{
  display:block;height:2px;width:100%;
  background:var(--white);border-radius:1px;
  transition:transform .25s var(--ease-out),opacity .2s;
}
body.nav-open .nav__toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav__toggle-bar:nth-child(2){opacity:0}
body.nav-open .nav__toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav__backdrop{
  display:none;
}
.nav__panel{
  display:flex;align-items:center;
}
@media (max-width:768px){
  .nav__toggle{display:flex}
  .nav__backdrop{
    display:block;
    position:fixed;inset:0;top:var(--logo-nav-bar-mobile);
    z-index:199;
    background:rgba(0,0,0,.55);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s var(--ease-out);
  }
  .nav__backdrop:not([hidden]){
    opacity:1;
    pointer-events:auto;
  }
  .nav__panel{
    position:fixed;top:var(--logo-nav-bar-mobile);right:0;bottom:0;
    z-index:201;
    width:min(320px,88vw);
    max-height:100vh;
    flex-direction:column;
    align-items:stretch;
    padding:1.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom,0px));
    background:rgba(13,13,13,.97);
    border-left:1px solid var(--border-dk);
    backdrop-filter:blur(20px);
    transform:translateX(100%);
    transition:transform .35s var(--ease-out);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.nav-open .nav__panel{transform:translateX(0)}
  .nav__links{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    width:100%;
  }
  .nav__links li{border-bottom:1px solid var(--border-dk)}
  .nav__links li:last-child{border-bottom:none;margin-top:.5rem}
  .nav__link,
  .nav__cta{
    display:block;
    padding:.6rem .25rem;
    font-size:1rem;
  }
  .nav__cta{
    text-align:center;
    border-radius:8px;
  }
  body.nav-open{overflow:hidden}
}

/* Client dashboard nav carries 2 extra items (My Dashboard, Logout) — switch
   to the mobile drawer earlier so labels never crowd onto one row. */
@media (max-width:1200px) and (min-width:769px){
  body.mi-page-client-dashboard .nav__toggle{display:flex}
  body.mi-page-client-dashboard .nav__backdrop{
    display:block;
    position:fixed;inset:0;top:var(--logo-nav-bar);
    z-index:199;
    background:rgba(0,0,0,.55);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s var(--ease-out);
  }
  body.mi-page-client-dashboard .nav__backdrop:not([hidden]){
    opacity:1;
    pointer-events:auto;
  }
  body.mi-page-client-dashboard .nav__panel{
    position:fixed;top:var(--logo-nav-bar);right:0;bottom:0;
    z-index:201;
    width:min(320px,88vw);
    max-height:100vh;
    flex-direction:column;
    align-items:stretch;
    padding:1.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom,0px));
    background:rgba(13,13,13,.97);
    border-left:1px solid var(--border-dk);
    backdrop-filter:blur(20px);
    transform:translateX(100%);
    transition:transform .35s var(--ease-out);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.mi-page-client-dashboard.nav-open .nav__panel{transform:translateX(0)}
  body.mi-page-client-dashboard .nav__links{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    width:100%;
  }
  body.mi-page-client-dashboard .nav__links li{border-bottom:1px solid var(--border-dk)}
  body.mi-page-client-dashboard .nav__links li:last-child{border-bottom:none;margin-top:.5rem}
  body.mi-page-client-dashboard .nav__link,
  body.mi-page-client-dashboard .nav__cta{
    display:block;
    padding:.6rem .25rem;
    font-size:1rem;
  }
  body.mi-page-client-dashboard .nav__cta{
    text-align:center;
    border-radius:8px;
  }
  body.mi-page-client-dashboard.nav-open{overflow:hidden}
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:700;font-size:.92rem;
  padding:.85rem 1.75rem;border-radius:8px;
  border:2px solid transparent;
  transition:transform .2s var(--ease-back),box-shadow .2s,background .2s,border-color .2s;
}
.btn:focus-visible{
  outline:2px solid var(--blue-light);
  outline-offset:3px;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn--primary{
  background:var(--blue);color:var(--white);
  box-shadow:0 4px 18px var(--blue-glow);
}
.btn--primary:hover{
  background:var(--blue-deep);color:var(--white);
  box-shadow:0 8px 28px var(--blue-glow);
}
.btn--blue-light{
  background:var(--blue-light);color:var(--ink);
  box-shadow:0 4px 18px var(--blue-light-glow);
}
.btn--blue-light:hover{box-shadow:0 8px 28px var(--blue-light-glow);color:var(--ink)}
.btn--outline{border-color:var(--border);color:var(--ink);background:transparent}
.btn--outline:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-dim)}
.btn--outline-white{border-color:rgba(255,255,255,.3);color:var(--white);background:transparent}
.btn--outline-white:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.btn--lg{padding:1.1rem 2.25rem;font-size:1rem}
.btn-arrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;color:var(--blue-light);transition:gap .2s var(--ease-out)}
.btn-arrow:hover{gap:.9rem;color:var(--blue-light)}

/* ── Section header ──────────────────────────────────────── */
.sh{margin-bottom:clamp(2.5rem,5vw,4rem)}
.sh--center{text-align:center}
.sh--center .t-lead{margin-inline:auto}
.sh--center .t-kicker{justify-content:center}
.sh__title{
  font-family:var(--font-display);font-weight:800;
  font-optical-sizing:auto;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.05;letter-spacing:-.04em;
  margin-top:.6rem;color:inherit;
}
.sh__title em{font-style:normal;color:var(--blue-light)}
.sh__title--mt{margin-top:.5rem}
.portfolio-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:1rem;margin-bottom:3rem;
}
/* Foil bar — magazine section opener */
.sh--foil .t-kicker::before{
  width:2.5rem;height:3px;
  background:linear-gradient(90deg,var(--blue-light),var(--blue));
  border-radius:1px;
}
.sh--foil .sh__title{
  position:relative;
  padding-left:1.35rem;
}
.sh--foil .sh__title::before{
  content:'';
  position:absolute;left:0;top:.12em;bottom:.12em;width:3px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--blue-light),var(--blue));
}

/* ── Hero ────────────────────────────────────────────────── */
.hero{
  min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;
  background:var(--ink);color:var(--white);
  position:relative;overflow:hidden;
  padding-block:clamp(7rem,14vw,10rem);
  /* Break out of any Blocksy container that constrains width */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.hero::after{
  content:'';
  position:absolute;inset:0;z-index:2;
  pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px;
  mix-blend-mode:overlay;
}

/* ── Cinematic video stage (hero) ──────────────────────────── */
.hero__video-stage{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.hero__bg-img{
  position:absolute;left:50%;top:50%;
  min-width:100%;min-height:100%;width:auto;height:auto;
  transform:translate(-50%,-50%) scale(1.15);
  object-fit:cover;
  opacity:.55;
  filter:saturate(.6) contrast(.92) brightness(.6) blur(1.5px);
}
.hero__cinema-grade{
  position:absolute;inset:0;z-index:1;
  background:
    /* heavy bottom fade — text always legible */
    linear-gradient(to bottom,rgba(13,13,13,.28) 0%,rgba(13,13,13,.55) 42%,rgba(13,13,13,.95) 100%),
    /* red glow — top-right corner like a city haze */
    radial-gradient(ellipse 80% 60% at 85% 0%,rgba(0,106,182,.38),transparent 55%),
    /* gold warmth — bottom-left */
    radial-gradient(ellipse 55% 40% at 5% 95%,rgba(0,145,213,.22),transparent 50%),
    /* dark vignette edges */
    radial-gradient(ellipse 100% 100% at 50% 50%,transparent 50%,rgba(0,0,0,.55) 100%);
}
.hero__cinema-sweep{
  position:absolute;inset:0;z-index:2;
  overflow:hidden;pointer-events:none;
}
.hero__cinema-sweep::before{
  content:'';
  position:absolute;top:-25%;bottom:-25%;width:38%;left:-25%;
  background:linear-gradient(102deg,transparent 35%,rgba(255,246,236,.065) 50%,transparent 65%);
  transform:translateX(-15%);
  animation:cinemaSweep 11s var(--ease-out) infinite;
}
@keyframes cinemaSweep{
  0%{transform:translateX(-12%) skewX(-2deg)}
  45%{transform:translateX(115%) skewX(-2deg)}
  55%{transform:translateX(115%) skewX(-2deg)}
  100%{transform:translateX(-12%) skewX(-2deg)}
}
.hero__cinema-grain{
  position:absolute;inset:0;z-index:3;
  pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.53'/%3E%3C/svg%3E");
  background-size:180px;
  opacity:.055;
  animation:cinemaGrainPulse 8s ease-in-out infinite alternate;
}
@keyframes cinemaGrainPulse{
  0%{opacity:.04}
  100%{opacity:.075}
}

/* ── YouTube Director's Cut player ───────────────────── */
.director-cut__yt-wrap{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
  background:var(--ink);
}
#yt-dc{
  width:100%;height:100%;
  position:absolute;inset:0;
  pointer-events:none;
  filter:saturate(1.05) contrast(1.08) brightness(.9);
  transition:filter .6s;
}
#yt-dc iframe{
  position:absolute;inset:0;
  width:100% !important;
  height:100% !important;
  pointer-events:none;
}
.director-cut__frame.is-playing #yt-dc{
  filter:saturate(1.08) contrast(1.05) brightness(1);
  pointer-events:auto;
}

/* ── Filmstrip thumbnail images ──────────────────────── */
.filmstrip__cell img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.75) contrast(1.1) brightness(.72);
  transition:filter .5s;
}
.filmstrip__cell:hover img{filter:saturate(1.05) brightness(.9)}

/* Dot-matrix data grid */
.hero__grid-bg{
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:32px 32px;
  z-index:1;
  animation:gridDrift 20s linear infinite;
}
@keyframes gridDrift{
  0%{background-position:0 0}
  100%{background-position:32px 32px}
}

/* Glowing orbs */
.hero__orb{position:absolute;border-radius:50%;filter:blur(80px);animation:orbPulse 6s ease-in-out infinite;z-index:1}
.hero__orb--1{
  width:500px;height:500px;
  top:-120px;right:-80px;
  background:radial-gradient(circle,var(--blue-glow) 0%,transparent 70%);
  animation-delay:0s;
}
.hero__orb--2{
  width:400px;height:400px;
  bottom:-100px;left:-60px;
  background:radial-gradient(circle,var(--blue-light-glow) 0%,transparent 70%);
  opacity:.4;animation-delay:-3s;
}
@keyframes orbPulse{
  0%,100%{opacity:.7;transform:scale(1)}
  50%{opacity:1;transform:scale(1.12)}
}

/* Conic mesh — broadcast control-room warmth */
.hero__mesh{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    conic-gradient(from 220deg at 75% 35%, rgba(0,145,213,0.1) 0deg, transparent 80deg, transparent 200deg, rgba(0,106,182,0.08) 300deg, transparent 360deg);
  mix-blend-mode:soft-light;
  opacity:.55;
  animation:meshShift 20s ease-in-out infinite alternate;
}
@keyframes meshShift{
  0%{opacity:.4}
  100%{opacity:.6}
}

/* Diagonal slash accent */
.hero__slash{
  position:absolute;
  top:0;right:0;bottom:0;
  width:42%;
  background:linear-gradient(to bottom left,rgba(0,106,182,.12) 0%,transparent 62%);
  clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);
  z-index:1;
}

/* Animated ticker line */
.hero__ticker{
  position:absolute;
  bottom:0;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:100%;
  max-width:100%;
  height:var(--hero-ticker-h);
  min-height:var(--hero-ticker-h);
  padding:0;
  background:var(--blue);
  display:flex;align-items:center;
  overflow:hidden;z-index:5;
  box-sizing:border-box;
}
.hero__ticker::after{
  content:'';
  position:absolute;
  left:0;right:0;
  bottom:-2px;
  height:2px;
  background:var(--blue);
  pointer-events:none;
}
.hero__ticker-track{
  display:flex;gap:3rem;
  align-items:center;
  height:100%;
  white-space:nowrap;
  animation:ticker 22s linear infinite;
  font-family:var(--font-body);font-weight:700;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.hero__ticker-track span{color:var(--blue-light)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Editorial shell: spine + main column */
.hero__shell{
  position:relative;z-index:3;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:end;
  gap:clamp(1.25rem,4vw,3.5rem);
  width:min(var(--max-w),92vw);
  margin-inline:auto;
  padding-inline:0;
}
.hero__spine{
  margin:0;padding:0;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(255,255,255,.2);
  white-space:nowrap;
  -webkit-user-select:none;user-select:none;
  border-left:1px solid rgba(0,145,213,.25);
  padding-left:1rem;
  align-self:stretch;
  display:flex;align-items:center;justify-content:center;
  max-height:min(60vh,420px);
}
.hero__main{min-width:0}
.hero__content{position:relative;z-index:3}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.75rem;
  background:rgba(10,11,13,.62);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:99px;padding:.35rem .9rem .35rem .5rem;
  margin-bottom:2rem;
}
.hero__eyebrow-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--blue-light);
  box-shadow:0 0 8px var(--blue-light-glow);
  animation:dotBlink 2s ease-in-out infinite;
}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.3}}
.hero__eyebrow-text{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}

.hero__title{
  font-family:var(--font-display);font-weight:800;
  font-optical-sizing:auto;
  font-size:clamp(3rem,7vw,5.75rem);
  line-height:.95;letter-spacing:-.05em;
  color:var(--white);margin-bottom:1.5rem;
  max-width:18ch;
}
.hero__title-line{display:block}
.hero__title-line--blue{
  color:transparent;
  -webkit-text-stroke:2px var(--blue);
  text-stroke:2px var(--blue);
  filter:drop-shadow(0 0 28px var(--blue-glow));
}
.hero__title-line--blue-light{color:var(--blue-light)}
.hero__title-line--outline{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.88);
  text-stroke:1.5px rgba(255,255,255,.88);
  margin-top:-.04em;
}

.hero__tagline{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.1rem,1.8vw,1.4rem);
  letter-spacing:-.01em;color:var(--blue-light);
  margin-top:-.5rem;margin-bottom:1.25rem;
}
.hero__lead{
  font-size:clamp(1rem,1.5vw,1.15rem);
  color:rgba(255,255,255,.6);
  line-height:1.75;max-width:50ch;
  margin-bottom:2.5rem;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:3.5rem}
.hero__actions--split{gap:.75rem 1rem}
@media(max-width:600px){
  .hero__actions--split .btn--lg{width:100%;justify-content:center}
}
.hero__proof{
  display:flex;align-items:center;gap:1.5rem;
  flex-wrap:wrap;
}
.hero__proof-item{
  display:flex;align-items:center;gap:.5rem;
  font-size:.82rem;color:rgba(255,255,255,.4);
}
.hero__proof-item::before{
  content:'✓';font-weight:700;color:var(--blue-light);font-size:.9rem;
}


/* ── Stats strip ─────────────────────────────────────────── */
.stats-strip{
  border-top:1px solid var(--border-dk);
  padding-block:2.5rem;
}
.stats-strip__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border-dk);
}
.stats-strip__item{
  background:rgba(22,22,22,.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  padding:1.75rem 2rem;
  position:relative;
  overflow:hidden;
}
.stats-strip__item::before{
  content:'';
  position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.stats-strip__item:hover::before{transform:scaleX(1)}
.stats-strip__num{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,3.5vw,2.8rem);
  letter-spacing:-.05em;line-height:1;
  color:var(--white);
}
.stats-strip__num .counter{color:var(--blue-light)}
.stats-strip__label{
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-top:.4rem;
}
/* Attribution for the figures above — these span the team's wider career, not
   MediaInsider's own trading history, and the strip must say so. */
.stats-strip__note{
  max-width:70ch;margin:clamp(1.5rem,3vw,2.25rem) auto 0;
  text-align:center;font-size:.82rem;line-height:1.7;
  color:rgba(255,255,255,.55);
}

/* ── Marquee / logo strip ────────────────────────────────── */
.marquee-section{
  background:var(--ink);padding-block:1.75rem;
  border-top:1px solid var(--border-dk);
  overflow:hidden;
}
.marquee-label{
  text-align:center;font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.25);margin-bottom:1.25rem;
}
.marquee-track{
  display:flex;gap:3.5rem;
  white-space:nowrap;
  animation:marquee 25s linear infinite;
}
.marquee-track--reverse{animation-direction:reverse}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{
  font-family:var(--font-body);font-weight:700;
  font-size:1rem;letter-spacing:-.01em;
  color:rgba(255,255,255,.2);
  transition:color .2s;flex-shrink:0;
}
.marquee-item:hover{color:rgba(255,255,255,.6)}

/* ── Service cards ───────────────────────────────────────── */
.svc-card{
  display:block;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:2px 18px 18px 18px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  padding:2rem 2rem 2.1rem;
  position:relative;overflow:hidden;
  transition:transform .3s var(--ease-back),box-shadow .3s,border-color .3s;
  box-shadow:0 2px 8px rgba(0,0,0,.04),0 0 0 0 rgba(0,145,213,0);
  text-decoration:none;color:inherit;
}
.svc-card::before{
  content:'';position:absolute;
  inset:0;
  background:linear-gradient(135deg,var(--blue-dim) 0%,transparent 60%);
  opacity:0;transition:opacity .35s;
  border-radius:inherit;
  pointer-events:none;
}
.svc-card::after{
  content:'';position:absolute;top:0;right:0;
  width:3.5rem;height:3.5rem;
  background:linear-gradient(135deg,transparent 50%,var(--blue-light-dim) 50%);
  opacity:0;transition:opacity .35s;
  pointer-events:none;
}
.svc-card:hover::after{opacity:1}
.svc-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 48px rgba(0,0,0,.1),0 4px 12px var(--blue-dim);
  border-color:rgba(0,106,182,.2);
}
.svc-card:hover::before{opacity:1}
.svc-card:focus-visible{
  outline:2px solid var(--blue-light);outline-offset:3px;
}
.svc-card:active{
  transform:translateY(-1px);
}
.svc-card__num{
  font-family:var(--font-display);font-weight:800;
  font-size:3.5rem;letter-spacing:-.06em;line-height:1;
  color:var(--border);margin-bottom:.5rem;
  transition:color .3s;
}
.svc-card:hover .svc-card__num{color:var(--blue-dim)}
.svc-card__icon{
  width:48px;height:48px;border-radius:10px;
  background:var(--blue-dim);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;margin-bottom:1.25rem;
  transition:background .3s,transform .3s var(--ease-back);
}
.svc-card:hover .svc-card__icon{background:var(--blue);transform:scale(1.1) rotate(-4deg)}
.svc-card__title{
  font-family:var(--font-display);font-weight:700;
  font-size:1.2rem;letter-spacing:-.02em;margin-bottom:.5rem;
}
.svc-card__body{color:var(--mid);font-size:.92rem;line-height:1.7}
.svc-card__list{
  list-style:none;margin-top:1rem;padding-top:1rem;
  border-top:1px solid var(--border);
  display:grid;gap:.55rem;
  position:relative;z-index:1;
}
.svc-card__list li{
  display:flex;align-items:flex-start;gap:.55rem;
  font-size:.85rem;line-height:1.6;color:var(--mid);
}
.svc-card__list li strong{
  color:var(--ink);font-weight:700;
}

/* ── Service detail breakdown (full-bleed, per service) ──── */
.svc-detail{
  position:relative;isolation:isolate;
  background:var(--ink);color:var(--white);
  padding-block:clamp(4.5rem,9vw,7.5rem);
  scroll-margin-top:0;
}
.svc-detail > .section__bg-overlay{z-index:0}
.svc-detail > .container{position:relative;z-index:2}
.svc-detail::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
}
.svc-detail__grid{max-width:800px;margin-inline:auto}
.svc-detail__item{
  background:rgba(31,31,31,.78);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--border-dk);
  border-radius:14px;padding:1.5rem;
  transition:border-color .3s,transform .3s var(--ease-back),box-shadow .3s;
}
.svc-detail__item:hover{
  border-color:rgba(0,145,213,.4);
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,.35),0 4px 12px var(--blue-light-glow);
}
.svc-detail__item-title{
  font-family:var(--font-display),Georgia,serif;font-weight:700;
  font-size:1rem;color:var(--white);margin-bottom:.5rem;
}
.svc-detail__item-body{
  color:rgba(255,255,255,.55);font-size:.9rem;line-height:1.65;
}
.svc-card__list li::before{
  content:'';flex-shrink:0;margin-top:.5rem;
  width:6px;height:6px;border-radius:50%;
  background:var(--blue-light);
}
.svc-card__link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.85rem;font-weight:700;color:var(--blue);
  margin-top:1.25rem;transition:gap .2s var(--ease-out);
  position:relative;z-index:1;
}
.svc-card:hover .svc-card__link{gap:.7rem}

/* ── Process section ─────────────────────────────────────── */
.process-step{
  display:grid;grid-template-columns:80px 1fr;
  gap:1.5rem;align-items:start;
  padding:2rem 0;
  border-bottom:1px solid var(--border-dk);
  position:relative;
}
.process-step:last-child{border-bottom:none}
.process-step__num{
  font-family:var(--font-display);font-weight:800;
  font-size:2.5rem;letter-spacing:-.06em;line-height:1;
  color:rgba(255,255,255,.1);
  transition:color .3s;
}
.process-step:hover .process-step__num{color:var(--blue-light)}
.process-step__title{
  font-family:var(--font-display);font-weight:700;
  font-size:1.1rem;color:var(--white);margin-bottom:.4rem;
}
.process-step__body{color:rgba(255,255,255,.5);font-size:.92rem;line-height:1.7}

/* ── Portfolio cards ─────────────────────────────────────── */
.p-card{
  display:block;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:16px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:transform .3s var(--ease-back),box-shadow .3s;
  text-decoration:none;color:inherit;
}
.p-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,.1);
}
.p-card:focus-visible{outline:var(--focus-ring);outline-offset:3px}
.p-card__thumb{
  aspect-ratio:16/10;background:var(--surface);
  overflow:hidden;position:relative;
}
.p-card__thumb-inner{
  width:100%;height:100%;
  background:linear-gradient(135deg,var(--ink-3),var(--ink-4));
  display:flex;align-items:center;justify-content:center;
  transition:transform .45s var(--ease-out);
}
.p-card:hover .p-card__thumb-inner{transform:scale(1.04)}
.p-card__thumb-label{
  font-family:var(--font-display);font-weight:700;
  font-size:3rem;letter-spacing:-.05em;
  color:rgba(255,255,255,.06);
}
.p-card__overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(13,13,13,.7) 0%,transparent 50%);
  opacity:0;transition:opacity .3s;
  display:flex;align-items:flex-end;padding:1rem;
}
.p-card:hover .p-card__overlay{opacity:1}
.p-card__overlay-cta{
  color:var(--white);font-weight:700;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--blue-light);padding-bottom:2px;
}
.p-card__body{padding:1.25rem 1.5rem 1.5rem}
.p-card__cat{margin-bottom:.5rem;display:flex;flex-wrap:wrap;gap:.4rem}
.p-card__title{
  font-family:var(--font-display);font-weight:700;
  font-size:1.05rem;line-height:1.25;
  margin-bottom:.4rem;color:var(--ink);
}
.p-card__excerpt{color:var(--mid);font-size:.88rem}

/* ── Testimonials ────────────────────────────────────────── */
.testi{
  background:var(--ink-3);
  border:1px solid var(--border-dk);
  border-radius:16px;padding:2rem;
  display:flex;flex-direction:column;gap:1.5rem;
  transition:border-color .3s,transform .3s var(--ease-back);
}
.testi:hover{border-color:rgba(0,145,213,.3);transform:translateY(-4px)}
.testi__stars{color:var(--blue-light);font-size:.85rem;letter-spacing:.15em}
.testi__quote{
  font-size:1rem;line-height:1.75;
  color:rgba(255,255,255,.8);flex:1;
  font-style:italic;
}
.testi__author{display:flex;align-items:center;gap:.75rem}
.testi__avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--ink-4);border:2px solid var(--border-dk);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;color:var(--blue-light);font-size:.78rem;
  letter-spacing:-.02em;
}
.testi__name{font-weight:600;font-size:.9rem;color:var(--white)}
.testi__role{font-size:.78rem;color:rgba(255,255,255,.4)}

/* ── CTA banner ──────────────────────────────────────────── */
.cta-banner{
  background:var(--blue);color:var(--white);
  padding-block:clamp(4rem,8vw,6rem);
  position:relative;overflow:hidden;
}
.cta-banner__noise{
  position:absolute;inset:0;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size:200px;
}
.cta-banner__geo{
  position:absolute;right:-120px;top:-120px;
  width:500px;height:500px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
}
.cta-banner__geo2{
  position:absolute;right:80px;bottom:-160px;
  width:300px;height:300px;border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
}
.cta-banner__inner{
  position:relative;z-index:1;
  display:flex;align-items:center;
  justify-content:space-between;
  gap:2.5rem;flex-wrap:wrap;
}
.cta-banner__title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  letter-spacing:-.04em;line-height:1.05;
  margin-bottom:.5rem;
}
.cta-banner__sub{color:rgba(255,255,255,.75);font-size:1rem}
.cta-banner--has-bg{isolation:isolate}
.cta-banner__bg{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
}
.cta-banner--has-bg .cta-banner__noise,
.cta-banner--has-bg .cta-banner__geo,
.cta-banner--has-bg .cta-banner__geo2{z-index:1}
.cta-banner--has-bg .cta-banner__inner{z-index:2}
.cta-banner__bg img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:saturate(.75) contrast(1.08) brightness(.5);
  transform:scale(1.05);
}
.cta-banner__bg-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(135deg,rgba(0,106,182,.84) 0%,rgba(0,42,74,.92) 55%,rgba(13,13,13,.88) 100%),
    radial-gradient(ellipse 70% 60% at 85% 15%,rgba(0,145,213,.18),transparent 55%),
    radial-gradient(ellipse 50% 45% at 10% 90%,rgba(0,0,0,.35),transparent 50%);
}
@media(prefers-reduced-motion:no-preference){
  .cta-banner--has-bg .cta-banner__bg img{
    transition:transform 14s var(--ease-out);
  }
  .cta-banner--has-bg:hover .cta-banner__bg img{
    transform:scale(1.08);
  }
}

/* ── Blog featured (magazine hero) ──────────────────────── */
.blog-featured{
  display:grid;grid-template-columns:1.1fr 1fr;
  background:var(--ink);border-radius:20px;overflow:hidden;
  border:1px solid var(--border-dk);
  text-decoration:none;
  transition:transform .3s var(--ease-back),box-shadow .3s;
}
.blog-featured:hover{transform:translateY(-4px);box-shadow:0 24px 48px rgba(0,0,0,.18)}
.blog-featured__visual{
  position:relative;overflow:hidden;
  background:var(--ink-3);min-height:320px;
}
.blog-featured__visual img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease-out);
}
.blog-featured:hover .blog-featured__visual img{transform:scale(1.05)}
.blog-featured__body{padding:2.5rem;display:flex;flex-direction:column;justify-content:center}
.blog-featured__meta{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.blog-featured__date{font-size:.75rem;color:rgba(255,255,255,.3)}
.blog-featured__title{
  font-family:var(--font-display),Georgia,serif;font-weight:800;
  font-size:clamp(1.3rem,2.5vw,1.8rem);letter-spacing:-.03em;
  margin-bottom:1rem;line-height:1.15;color:var(--white);
}
.blog-featured__excerpt{color:rgba(255,255,255,.5);line-height:1.7;margin-bottom:1.75rem;font-size:.93rem}
@media(max-width:767px){
  .blog-featured{grid-template-columns:1fr}
}

/* ── Newsletter dark panel ───────────────────────────────── */
.blog-newsletter--has-bg{
  position:relative;isolation:isolate;
  background:var(--ink);
  border-radius:20px;padding:3.5rem;text-align:center;
  overflow:hidden;
}
.blog-newsletter--has-bg > .container,
.blog-newsletter--has-bg > .section__bg + div{position:relative;z-index:2}
.blog-newsletter--has-bg > .section__bg{z-index:0}

/* ── Blog cards (magazine grid) ──────────────────────────── */
.blog-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;
  transition:transform .3s var(--ease-back),box-shadow .3s;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  text-decoration:none;display:block;
}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.08)}
.blog-card:focus-visible{outline:var(--focus-ring);outline-offset:3px}
.blog-card__thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--ink-3);
}
.blog-card__thumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .4s var(--ease-out);
}
.blog-card:hover .blog-card__thumb img{transform:scale(1.06)}
.blog-card__body{padding:1.25rem 1.5rem 1.5rem}
.blog-card__meta{font-size:.75rem;color:var(--muted);margin-bottom:.6rem;display:flex;gap:.6rem}
.blog-card__cat{
  display:inline-flex;align-items:center;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);margin-bottom:.5rem;
}
.blog-card__title{
  font-family:var(--font-display);font-weight:700;
  font-size:1rem;line-height:1.3;
  margin-bottom:.4rem;color:var(--ink);
}
.blog-card__excerpt{font-size:.88rem;color:var(--mid)}

/* ── Single article ──────────────────────────────────────── */
.article-header__title{max-width:24ch}
.article-header__meta{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin-top:1.5rem;font-size:.85rem;color:rgba(255,255,255,.5);
}
.article-header__author{display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.75);font-weight:600}
.article-header__avatar{border-radius:50%;display:block}

.article-layout{
  display:grid;
  grid-template-columns:64px minmax(0,68ch) 220px;
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
  justify-content:center;
}
@media(max-width:1100px){
  .article-layout{grid-template-columns:64px minmax(0,1fr)}
}
@media(max-width:800px){
  .article-layout{grid-template-columns:1fr}
}

.article-share{
  position:sticky;top:calc(var(--logo-nav-bar) + 1.5rem);
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
}
.article-share__label{
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);writing-mode:vertical-rl;margin-bottom:.25rem;
}
.article-share__btn{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--mid);
  border:1px solid var(--border);
  transition:transform .2s var(--ease-out),background .2s,color .2s,box-shadow .2s;
}
.article-share__btn:hover{
  background:var(--blue);color:var(--white);
  transform:translateY(-2px);
  box-shadow:0 8px 20px var(--blue-dim);
}
.article-share__btn:focus-visible{outline:var(--focus-ring);outline-offset:3px}
.article-share__btn--copy.is-copied{background:var(--blue);color:var(--white)}
@media(max-width:800px){
  .article-share{
    position:static;flex-direction:row;justify-content:center;
    margin-bottom:2rem;
  }
  .article-share__label{writing-mode:horizontal-tb}
}

.article-body{
  font-size:1.05rem;line-height:1.8;color:var(--ink-2);
}
.article-body h2{
  font-family:var(--font-display),Georgia,serif;font-weight:700;
  font-size:clamp(1.4rem,2.6vw,1.85rem);letter-spacing:-.02em;
  margin-top:2.5rem;margin-bottom:1rem;color:var(--ink);
}
.article-body h3{
  font-family:var(--font-display),Georgia,serif;font-weight:700;
  font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:-.01em;
  margin-top:2rem;margin-bottom:.85rem;color:var(--ink);
}
.article-body p{margin-bottom:1.3rem}
.article-body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.article-body a:hover{color:var(--blue-deep)}
.article-body ul,.article-body ol{margin:0 0 1.3rem 1.3rem}
.article-body li{margin-bottom:.5rem}
.article-body img{max-width:100%;height:auto;border-radius:12px;margin-block:1.5rem}
.article-body blockquote{
  border-left:3px solid var(--blue);
  padding-left:1.25rem;margin:1.75rem 0;
  font-style:italic;color:var(--mid);
}
.article-body code{
  background:var(--surface);padding:.15em .4em;border-radius:4px;
  font-size:.9em;
}

.article-toc{position:sticky;top:calc(var(--logo-nav-bar) + 1.5rem)}
.article-toc__label{
  font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.85rem;
}
.article-toc__nav{display:flex;flex-direction:column;gap:.6rem}
.article-toc__nav a{
  font-size:.85rem;color:var(--mid);line-height:1.4;
  border-left:2px solid var(--border);padding-left:.85rem;
  transition:color .2s,border-color .2s;
}
.article-toc__nav a:hover,.article-toc__nav a.is-active{color:var(--blue);border-color:var(--blue)}
@media(max-width:1100px){
  .article-toc{display:none}
}


/* ── Pricing ─────────────────────────────────────────────── */
.price-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:20px;padding:2.25rem 2rem;
  display:flex;flex-direction:column;gap:1.5rem;
  transition:transform .3s var(--ease-back),box-shadow .3s;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  position:relative;
}
.price-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(0,0,0,.1)}
.price-card--featured{
  background:var(--ink);color:var(--white);
  border-color:var(--blue-light);
  box-shadow:0 0 0 1px var(--blue-light),0 20px 48px rgba(0,0,0,.2);
}
.price-card__badge{
  position:absolute;top:-14px;left:50%;
  transform:translateX(-50%);
  background:var(--blue-light);color:var(--ink);
  font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem 1rem;border-radius:99px;white-space:nowrap;
  box-shadow:0 4px 12px var(--blue-light-glow);
}
.price-card__tier{
  font-size:.75rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.price-card--featured .price-card__tier{color:rgba(255,255,255,.4)}
.price-card__price{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.2rem,4vw,3rem);
  letter-spacing:-.05em;line-height:1;color:var(--ink);
}
.price-card--featured .price-card__price{color:var(--white)}
.price-card__price span{font-size:1rem;font-weight:500;color:var(--muted)}
.price-card--featured .price-card__price span{color:rgba(255,255,255,.4)}
.price-card__features{display:grid;gap:.6rem;flex:1}
.price-card__feature{
  font-size:.88rem;display:flex;align-items:flex-start;gap:.6rem;
  color:var(--mid);
}
.price-card--featured .price-card__feature{color:rgba(255,255,255,.65)}
.price-card__feature::before{
  content:'✓';font-weight:700;color:var(--blue);flex-shrink:0;margin-top:.05em;
}
.price-card--featured .price-card__feature::before{color:var(--blue-light)}
.price-card--starter{
  border-color:rgba(45,170,160,.45);
  box-shadow:0 0 0 1px rgba(45,170,160,.2),0 12px 32px rgba(45,170,160,.08);
}
.price-card--custom{
  border-color:rgba(0,145,213,.5);
  box-shadow:0 0 0 1px rgba(0,145,213,.25),0 12px 32px rgba(0,145,213,.1);
}
.price-card--custom .price-card__feature::before{color:var(--blue-light)}
.price-card__annual{
  margin-top:.35rem;font-size:.88rem;font-weight:600;color:var(--muted);
}
.price-card--featured .price-card__annual{color:rgba(255,255,255,.45)}
.price-card__price--custom{font-size:clamp(1.6rem,3vw,2.25rem)}
.price-card__note{
  margin-top:.65rem;font-size:.88rem;font-weight:600;line-height:1.45;
  color:var(--blue-light);font-style:italic;
}
.price-card--featured .price-card__note{color:rgba(0,145,213,.9)}
/* ── Pricing hero: split layout + 3-D plan stack ──────────── */
/* Depth comes from CSS transforms only — no WebGL, no library, no image
   payload. Everything animated is transform/opacity so it stays on the
   compositor and never triggers layout. */
.page-header__content--split{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(2rem,5vw,4rem);
}
.page-header__cta-row{
  display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem;
}

.plan-stack{
  position:relative;justify-self:center;
  width:min(340px,100%);height:400px;
  perspective:1100px;
}
.plan-stack__card{
  position:absolute;inset-inline:0;
  display:flex;flex-direction:column;gap:.5rem;
  padding:1.4rem 1.5rem;border-radius:16px;
  background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 2px 10px rgba(0,0,0,.25),0 26px 60px rgba(0,0,0,.38);
  transform-style:preserve-3d;
  animation:plan-float 9s var(--ease-out,cubic-bezier(.16,1,.3,1)) infinite;
  will-change:transform;
}
.plan-stack__card--back{
  top:0;transform:translate3d(46px,0,-150px) rotateY(-19deg) rotateX(7deg) scale(.9);
  opacity:.5;animation-delay:-.9s;
}
.plan-stack__card--mid{
  top:104px;transform:translate3d(23px,0,-75px) rotateY(-19deg) rotateX(7deg) scale(.95);
  opacity:.75;animation-delay:-.45s;
}
.plan-stack__card--front{
  top:208px;transform:translate3d(0,0,0) rotateY(-19deg) rotateX(7deg);
  border-color:rgba(0,145,213,.5);
  background:linear-gradient(150deg,rgba(0,106,182,.5),rgba(0,77,133,.34));
  box-shadow:0 2px 10px rgba(0,106,182,.3),0 30px 70px rgba(0,106,182,.36);
}
@keyframes plan-float{
  0%,100%{translate:0 0}
  50%    {translate:0 -12px}
}
.plan-stack__badge{
  position:absolute;top:-11px;right:16px;
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:var(--blue-light);
  padding:.3rem .6rem;border-radius:999px;
  box-shadow:0 4px 14px rgba(0,145,213,.45);
}
.plan-stack__tier{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.plan-stack__amount{
  font-family:var(--font-display),'Arial Narrow',sans-serif;
  font-size:1.85rem;font-weight:700;letter-spacing:-.02em;line-height:1;
  color:var(--white);
}
.plan-stack__amount small{font-size:.8rem;font-weight:500;color:rgba(255,255,255,.55)}
.plan-stack__bar{
  height:7px;border-radius:99px;background:rgba(255,255,255,.16);margin-top:.15rem;
}
.plan-stack__bar--short{width:58%}
/* Rear cards are partly overlapped by the one in front — show only the lines
   that stay visible, so nothing reads as clipped text. */
.plan-stack__card--back .plan-stack__bar,
.plan-stack__card--mid .plan-stack__bar{display:none}

@media (max-width:900px){
  .page-header__content--split{grid-template-columns:1fr}
  /* The stack is decorative; drop it rather than shrink it awkwardly on phones,
     where it would only cost paint time above the fold. */
  .plan-stack{display:none}
}
@media (prefers-reduced-motion:reduce){
  .plan-stack__card{animation:none}
}

/* ── Pricing: annual offer banner ─────────────────────────── */
.pricing-offer{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.25rem,3vw,2.5rem);flex-wrap:wrap;
  margin:0 auto clamp(2rem,4vw,3rem);max-width:min(960px,92vw);
  padding:clamp(1.25rem,2.4vw,1.65rem) clamp(1.5rem,3vw,2.25rem);
  background:linear-gradient(135deg,var(--ink) 0%,#0d2c47 55%,var(--blue-deep) 100%);
  border:1px solid rgba(0,145,213,.35);border-radius:16px;
  box-shadow:0 2px 10px rgba(0,106,182,.10),0 22px 50px rgba(0,106,182,.18);
}
.pricing-offer::after{
  content:'';position:absolute;right:-60px;top:-70px;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,145,213,.5),transparent 68%);
  filter:blur(46px);pointer-events:none;
}
.pricing-offer__main{position:relative;z-index:1;flex:1 1 320px;min-width:0}
.pricing-offer__tag{
  display:inline-block;margin-bottom:.5rem;
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:var(--blue-light);
  padding:.34rem .7rem;border-radius:999px;
}
.pricing-offer__text{
  margin:0;font-size:clamp(.95rem,1.4vw,1.05rem);line-height:1.6;
  color:rgba(255,255,255,.78);
}
.pricing-offer__lead{
  display:block;
  font-family:var(--font-display),'Arial Narrow',sans-serif;
  font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:700;letter-spacing:-.02em;
  line-height:1.15;color:var(--white);margin-bottom:.3rem;
}

/* 12 paid months + 1 free, shown rather than described */
.pricing-offer__meter{
  position:relative;z-index:1;flex:0 0 auto;
  display:flex;align-items:flex-end;gap:4px;
  margin:0;padding:0;list-style:none;
}
.pricing-offer__month{
  width:11px;height:26px;border-radius:3px;
  background:rgba(255,255,255,.22);
}
.pricing-offer__month--free{
  display:flex;align-items:center;justify-content:center;
  width:auto;height:34px;padding:0 .6rem;border-radius:6px;
  background:var(--blue-light);
  box-shadow:0 4px 16px rgba(0,145,213,.5);
}
.pricing-offer__month--free span{
  font-size:.6rem;font-weight:700;letter-spacing:.1em;color:var(--ink);
}
@media (max-width:720px){
  .pricing-offer{flex-direction:column;align-items:flex-start}
  .pricing-offer__meter{align-self:stretch;justify-content:space-between;gap:3px}
  .pricing-offer__month{flex:1 1 auto;width:auto}
  .pricing-offer__month--free{flex:0 0 auto}
}

/* Annual equivalent under each price */
.price-card__save{
  margin:.5rem 0 0;font-size:.9rem;line-height:1.5;color:var(--mid);
}
.price-card__save strong{color:var(--blue-deep);font-weight:700}
.price-card--featured .price-card__save{color:rgba(255,255,255,.6)}
.price-card--featured .price-card__save strong{color:var(--blue-light)}

/* Reassurance line under each CTA */
.price-card__reassure{
  margin:.75rem 0 0;text-align:center;font-size:.8rem;line-height:1.5;color:var(--mid);
}
.price-card__reassure a{
  color:var(--blue);text-decoration:none;font-weight:600;
  transition:color .2s var(--ease-out);
}
.price-card__reassure a:hover{color:var(--blue-deep);text-decoration:underline}
.price-card__reassure a:focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;border-radius:3px;
}
.price-card--featured .price-card__reassure{color:rgba(255,255,255,.55)}
.price-card--featured .price-card__reassure a{color:var(--blue-light)}

/* Flexibility note under the card grid */
.pricing-flex-note{
  max-width:64ch;margin:clamp(1.75rem,3.5vw,2.5rem) auto 0;
  text-align:center;font-size:.95rem;line-height:1.7;color:var(--mid);
}
.pricing-flex-note strong{color:var(--ink);font-weight:700}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-item{
  background:var(--white);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.faq-item:hover{border-color:rgba(0,106,182,.2);box-shadow:0 4px 16px rgba(0,106,182,.06)}
.faq-item[open]{border-color:rgba(0,106,182,.25)}
.faq-item summary{
  padding:1.25rem 1.5rem;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:.98rem;
  color:var(--ink);display:flex;justify-content:space-between;align-items:center;
  list-style:none;-webkit-user-select:none;user-select:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';font-size:1.4rem;font-weight:300;
  color:var(--blue);transition:transform .25s var(--ease-back);flex-shrink:0;margin-left:1rem;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item__body{
  padding:0 1.5rem 1.25rem;
  color:var(--mid);font-size:.93rem;line-height:1.75;
}

/* ── Contact ─────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:3.5rem;align-items:start}
.contact-form{display:grid;gap:1rem}
.contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.contact-form__row{grid-template-columns:1fr}}
.contact-form__title{
  font-family:var(--font-display);font-weight:700;
  font-size:1.4rem;margin-bottom:1.75rem;letter-spacing:-.02em;
}
.contact-form__helper{
  font-size:.82rem;color:var(--mid);line-height:1.55;margin-top:.35rem;
}
.contact-form__note{font-size:.78rem;color:var(--muted);text-align:center}
.contact-form-wrap{display:grid;gap:1rem}
.contact-form__submit{width:100%;justify-content:center;padding:1rem}
.contact-form__submit:disabled{opacity:.6;cursor:not-allowed}
.contact-form__feedback{
  font-size:.85rem;font-weight:600;text-align:center;
  padding:.75rem 1rem;border-radius:10px;
}
.contact-form__feedback--success{background:var(--blue-light-dim);color:#7a6010}
.contact-form__feedback--error{background:var(--blue-dim);color:var(--blue)}
.pricing-disclaimer{
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding-block:1.25rem;
}
.pricing-disclaimer__inner{
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;
  align-items:center;justify-content:center;
  font-size:.88rem;color:var(--mid);
  text-align:center;
}
.pricing-disclaimer__inner strong{color:var(--ink);font-weight:600}
.form-group{display:grid;gap:.4rem}
.form-label{font-size:.82rem;font-weight:600;color:var(--ink)}
.form-input,.form-textarea,.form-select{
  width:100%;padding:.8rem 1rem;
  border:1.5px solid var(--border);border-radius:8px;
  font-family:var(--font-body);font-size:.95rem;
  color:var(--ink);background:var(--white);
  transition:border-color .2s,box-shadow .2s;
}
.form-input:focus,.form-textarea:focus,.form-select:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-dim);
}
.form-input:invalid,.form-textarea:invalid,.form-select:invalid{box-shadow:none}
.form-textarea{min-height:140px;resize:vertical}
.form-select{
  appearance:none;-webkit-appearance:none;
  height:auto;
  padding-right:2.5rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235a5a5a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
}
.form-select option{color:var(--ink)}
.contact-sidebar{display:grid;gap:1.25rem}
.info-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:1.5rem;
}
.info-card--dark{background:var(--ink);border-color:var(--border-dk);color:var(--white)}
.info-card__label{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.4rem;
}
.info-card--dark .info-card__label{color:rgba(255,255,255,.35)}
.info-card__value{font-weight:600;font-size:.95rem}
.info-card--dark .info-card__value{color:var(--white)}

/* ── Tags ────────────────────────────────────────────────── */
.tag{
  display:inline-block;font-size:.7rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.25rem .65rem;border-radius:4px;
  background:var(--blue-dim);color:var(--blue);
}
.tag--dark{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6)}

/* ── Filter tabs ─────────────────────────────────────────── */
.filter-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.filter-tab{
  padding:.45rem 1.1rem;border-radius:99px;
  font-size:.82rem;font-weight:600;
  border:1.5px solid var(--border);background:var(--white);
  color:var(--mid);
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease-out);
}
.filter-tab:hover,.filter-tab--active{
  background:var(--ink);border-color:var(--ink);color:var(--white);
}
.filter-tab:focus-visible{outline:var(--focus-ring);outline-offset:3px}
.p-card.is-hidden{display:none}

/* ── Page header ─────────────────────────────────────────── */
.page-header{
  background:var(--ink);color:var(--white);
  padding-block:clamp(8rem,14vw,11rem) clamp(4rem,7vw,6rem);
  position:relative;overflow:hidden;
}
.page-header__grid-bg{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:28px 28px;z-index:0;
}
.page-header__orb{
  position:absolute;top:-100px;right:-100px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,var(--blue-glow) 0%,transparent 70%);
  filter:blur(60px);
}
.page-header__content{position:relative;z-index:1}
.page-header__title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.5rem,6vw,4rem);
  letter-spacing:-.05em;line-height:1.02;
  margin-top:.6rem;color:var(--white);
}
.page-header__lead{margin-top:1rem}

/* Anchor scroll offset (fixed header) */
#capabilities,
[id^="capability-"],
#strategic-planning-detail,
#digital-marketing-detail,
#social-media-detail,
#content-production-detail,
#event-marketing-detail{
  scroll-margin-top:6.5rem;
}
.page-header--has-bg{isolation:isolate}
.page-header__bg{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
}
.page-header--has-bg .page-header__grid-bg{z-index:1}
.page-header--has-bg .page-header__orb{z-index:1}
.page-header--has-bg .page-header__content{z-index:2}
.page-header__bg img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 35%;
  filter:saturate(.75) contrast(1.08) brightness(.48);
  transform:scale(1.05);
}
.page-header__bg-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(13,13,13,.45) 0%,rgba(13,13,13,.78) 50%,rgba(13,13,13,.92) 100%),
    radial-gradient(ellipse 80% 60% at 70% 20%,rgba(0,106,182,.15),transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 90%,rgba(0,145,213,.08),transparent 50%);
}
@media(prefers-reduced-motion:no-preference){
  .page-header--has-bg .page-header__bg img{
    transition:transform 14s var(--ease-out);
  }
  .page-header--has-bg:hover .page-header__bg img{
    transform:scale(1.08);
  }
}

/* ── Timeline ────────────────────────────────────────────── */
.timeline{padding-left:1.75rem;position:relative}
.timeline::before{
  content:'';position:absolute;
  left:0;top:8px;bottom:8px;
  width:1.5px;background:var(--border-dk);
}
.timeline-item{position:relative;padding-bottom:2.25rem;padding-left:1.5rem}
.timeline-item::before{
  content:'';position:absolute;
  left:-2.25rem;top:5px;
  width:11px;height:11px;border-radius:50%;
  background:var(--blue);border:2px solid var(--ink);
  box-shadow:0 0 0 2px var(--blue);
}
.timeline-item__year{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-light);margin-bottom:.2rem;
}
.timeline-item__title{
  font-family:var(--font-display);font-weight:700;
  font-size:.98rem;margin-bottom:.25rem;color:var(--white);
}
.timeline-item__body{color:rgba(255,255,255,.5);font-size:.88rem}


/* ── Footer ──────────────────────────────────────────────── */
.footer{
  background:var(--ink);color:rgba(255,255,255,.5);
  padding-block:4rem 2rem;
  border-top:1px solid var(--border-dk);
}
.footer__grid{
  display:grid;
  grid-template-columns:minmax(200px,1.2fr) repeat(5,minmax(0,1fr));
  gap:2.5rem 2rem;
  margin-bottom:3.5rem;
}
@media (max-width:1100px){
  .footer__grid{
    grid-template-columns:1fr 1fr;
    gap:2rem;
  }
  .footer__brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr}
}
.footer__logo{
  display:inline-flex;
  align-items:center;
  line-height:0;
  margin-bottom:.85rem;
}
.footer__logo-img{
  height:var(--logo-footer-h);
  width:auto;
  max-width:var(--logo-max-w);
  display:block;
  object-fit:contain;
  object-position:left center;
  transition:opacity .2s,transform .2s var(--ease-out);
}
.footer__logo:hover .footer__logo-img{
  opacity:.85;
  transform:scale(1.03);
}
@media (max-width:900px){
  .footer__logo-img{
    height:var(--logo-footer-h-mobile);
    max-width:var(--logo-max-w-mobile);
  }
}
.footer__brand-desc{font-size:.88rem;line-height:1.7;max-width:32ch}
.footer__heading{
  font-family:var(--font-display);font-weight:700;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--white);margin-bottom:1.1rem;
}
.footer__links{display:grid;gap:.55rem;margin:0;padding:0}
.footer__links li{margin:0;padding:0}
.footer__link{
  font-size:.88rem;color:rgba(255,255,255,.4);
  transition:color .2s var(--ease-out),transform .2s var(--ease-out);display:block;
}
.footer__link:hover{color:var(--white);transform:translateX(.35rem)}
.footer__bottom{
  border-top:1px solid var(--border-dk);
  padding-top:1.5rem;
  display:flex;justify-content:space-between;align-items:center;
  font-size:.8rem;flex-wrap:wrap;gap:.5rem;
}
.footer__legal{color:rgba(255,255,255,.25)}

/* ── Team card ───────────────────────────────────────────── */
.team-card{
  background:var(--ink-3);border:1px solid var(--border-dk);
  border-radius:16px;padding:1.75rem 1.5rem;text-align:center;
  transition:transform .3s var(--ease-back),border-color .3s;
}
.team-card:hover{transform:translateY(-4px);border-color:rgba(0,145,213,.3)}
.team-card__avatar{
  width:80px;height:80px;border-radius:50%;
  background:var(--ink-4);margin-inline:auto;margin-bottom:1rem;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1.3rem;
  color:var(--blue-light);border:2px solid var(--border-dk);
  overflow:hidden;
}
.team-card__avatar img{
  width:100%;height:100%;object-fit:cover;
}
.team-card__name{
  font-family:var(--font-display);font-weight:700;
  font-size:.98rem;color:var(--white);margin-bottom:.2rem;
}
.team-card__role{font-size:.8rem;color:var(--blue-light);font-weight:600;margin-bottom:.5rem}
.team-card__bio{font-size:.85rem;color:rgba(255,255,255,.4)}

/* ── Mission carousel (pill-nav + image card) ───────────── */
.mission-carousel{
  position:relative;overflow:hidden;
  border-radius:2.5rem;
  display:flex;flex-direction:column;
  min-height:520px;
  background:transparent;
  max-width:880px;margin-inline:auto;
}
@media(min-width:768px){
  .mission-carousel{flex-direction:row;min-height:480px}
}
.mission-carousel__nav{
  position:relative;
  background:var(--ink-2);
  padding:2.5rem 1.5rem;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  flex:0 0 auto;
  min-height:220px;
}
@media(min-width:768px){
  .mission-carousel__nav{
    flex:0 0 38%;padding:2rem;
    justify-content:flex-start;
  }
}
.mission-carousel__nav::before,
.mission-carousel__nav::after{
  content:'';position:absolute;inset-inline:0;z-index:2;pointer-events:none;
  height:3.5rem;
}
.mission-carousel__nav::before{
  top:0;background:linear-gradient(to bottom,var(--ink-2),transparent);
}
.mission-carousel__nav::after{
  bottom:0;background:linear-gradient(to top,var(--ink-2),transparent);
}
.mission-carousel__pills{
  position:relative;width:100%;height:230px;
}
.mission-carousel__pill{
  position:absolute;left:0;top:50%;
  display:inline-flex;align-items:center;gap:.65rem;
  padding:.85rem 1.5rem;border-radius:99px;
  border:1px solid var(--border-dk);
  background:transparent;color:rgba(255,255,255,.55);
  font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;cursor:pointer;
  transition:background .4s var(--ease-out),color .4s var(--ease-out),border-color .4s var(--ease-out);
}
.mission-carousel__pill-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.3);
  transition:background .4s var(--ease-out);
}
.mission-carousel__pill.is-active{
  background:var(--white);color:var(--ink);border-color:var(--white);
}
.mission-carousel__pill.is-active .mission-carousel__pill-dot{background:var(--blue-light)}
.mission-carousel__pill:hover:not(.is-active){
  border-color:rgba(0,145,213,.4);color:rgba(255,255,255,.85);
}
.mission-carousel__pill:focus-visible{outline:var(--focus-ring);outline-offset:3px}
.mission-carousel__stage{
  position:relative;flex:1;
  padding:2rem 1.5rem 2.5rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;
  background:transparent;
  min-height:300px;
}
.mission-carousel--solo{
  max-width:28rem;width:100%;margin-inline:auto;
  overflow:visible;border-radius:0;min-height:0;
}
.mission-split .reveal-right{overflow:visible}
.mission-carousel--solo .mission-carousel__stage{
  border-top:none;padding:0;overflow:visible;min-height:0;gap:0;
  align-items:stretch;
}
.mission-carousel__card-dots{
  display:flex;align-items:center;justify-content:center;gap:.375rem;
  position:relative;z-index:30;margin-top:2rem;
}
.mission-carousel__dot-btn{
  padding:.375rem;border:none;background:transparent;cursor:pointer;
  transition:transform .15s var(--ease-out);
}
.mission-carousel__dot-btn:active{transform:scale(.95)}
.mission-carousel__dot-btn:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-radius:99px}
.mission-carousel__card-dots .dot{
  display:block;width:6px;height:6px;border-radius:99px;
  background:rgba(26,26,26,.12);
  transition:width .3s ease,background-color .3s ease;
}
.mission-carousel__card-dots .dot.is-active{
  width:20px;background:#62B2FE;
}
@media(min-width:768px){
  .mission-carousel__stage{
    border-top:none;border-left:1px solid var(--border-dk);
    padding:2.5rem;
  }
  .mission-carousel--solo .mission-carousel__stage{border-left:none;padding:0}
}
.mission-carousel--solo .mission-carousel__card-wrap{
  position:relative;width:100%;max-width:28rem;margin-inline:auto;
  aspect-ratio:4/5;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
  padding-inline:clamp(1.25rem,8vw,2.75rem);
}
.mission-carousel--solo .mission-carousel__card{
  position:absolute;inset:0;
  border-radius:2.5rem;overflow:hidden;
  border:1px solid #1e293b;
  background:#0f172a;
  box-shadow:0 25px 50px -12px rgba(15,23,42,.35);
  opacity:0;transform:scale(.7) translateX(0) rotate(0deg);
  transform-origin:center center;
  will-change:transform,opacity;
  transition:
    opacity .5s cubic-bezier(0.34,1.2,0.64,1),
    transform .5s cubic-bezier(0.34,1.2,0.64,1),
    border-color .3s ease,
    box-shadow .5s ease;
  pointer-events:none;
}
.mission-carousel--solo .mission-carousel__card.is-active{
  opacity:1;transform:scale(1) translateX(0) rotate(0deg);
  pointer-events:auto;z-index:20;
  border-color:#1e293b;
  box-shadow:
    0 25px 50px -12px rgba(15,23,42,.45),
    0 12px 24px -8px rgba(15,23,42,.25);
}
.mission-carousel--solo .mission-carousel__card.is-prev{
  opacity:.45;transform:scale(.85) translateX(-90px) rotate(-4deg);
  pointer-events:auto;z-index:10;cursor:pointer;
  box-shadow:0 16px 32px -12px rgba(15,23,42,.3);
}
.mission-carousel--solo .mission-carousel__card.is-next{
  opacity:.45;transform:scale(.85) translateX(90px) rotate(4deg);
  pointer-events:auto;z-index:10;cursor:pointer;
  box-shadow:0 16px 32px -12px rgba(15,23,42,.3);
}
.mission-carousel--solo .mission-carousel__card.is-prev:hover,
.mission-carousel--solo .mission-carousel__card.is-next:hover{
  border-color:#334155;
}
.mission-carousel--solo .mission-carousel__card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:filter .7s ease;
}
.mission-carousel--solo .mission-carousel__card:not(.is-active) img{
  filter:grayscale(1) blur(1px) brightness(.75);
}
.mission-carousel--solo .mission-carousel__card-live{
  position:absolute;top:1.5rem;left:1.5rem;z-index:3;
  display:flex;align-items:center;gap:.75rem;
  height:3.5rem;
  background:rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:99px;padding:.5rem 1.25rem .5rem 1rem;
  opacity:0;transition:opacity .35s ease;
  pointer-events:none;
}
.mission-carousel--solo .mission-carousel__card.is-active .mission-carousel__card-live{opacity:1}
.mission-carousel--solo .mission-carousel__card-live-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--white);box-shadow:0 0 10px rgba(255,255,255,1);
  animation:dotBlink 2s ease-in-out infinite;
}
.mission-carousel--solo .mission-carousel__card-live-number{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;
  font-size:2rem;line-height:1;color:rgba(255,255,255,.95);
}
.mission-carousel--solo .mission-carousel__card-body{
  position:absolute;inset-inline:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:2rem;padding-top:6rem;
  background:linear-gradient(to top,#020617 0%,rgba(2,6,23,.4) 40%,transparent 100%);
  opacity:0;transform:translateY(12px);
  transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;
}
.mission-carousel--solo .mission-carousel__card.is-active .mission-carousel__card-body{
  opacity:1;transform:translateY(0);
}
.mission-carousel--solo .mission-carousel__card-tag{
  display:inline-flex;align-items:center;
  background:#62B2FE;color:var(--white);
  padding:.375rem .875rem;border-radius:99px;
  border:1px solid rgba(255,255,255,.1);
  font-family:var(--font-body),system-ui,sans-serif;
  font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:.75rem;width:fit-content;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.35);
}
.mission-carousel--solo .mission-carousel__card-desc{
  font-family:var(--font-body),system-ui,sans-serif;font-weight:500;
  font-size:1.125rem;line-height:1.35;color:var(--white);
  letter-spacing:-.015em;margin:0;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
@media(max-width:520px){
  .mission-carousel--solo .mission-carousel__card.is-prev{
    transform:scale(.85) translateX(-56px) rotate(-4deg);
  }
  .mission-carousel--solo .mission-carousel__card.is-next{
    transform:scale(.85) translateX(56px) rotate(4deg);
  }
}
.mission-carousel__card-wrap{
  position:relative;width:100%;aspect-ratio:4/5;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
}
.mission-carousel__card{
  position:absolute;inset:0;
  border-radius:2.5rem;overflow:hidden;
  border:1px solid #1e293b;
  background:#0f172a;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.55);
  opacity:0;transform:scale(.7) translateX(0) rotate(0deg);
  transform-origin:center center;
  transition:
    opacity .45s cubic-bezier(0.34,1.2,0.64,1),
    transform .45s cubic-bezier(0.34,1.2,0.64,1),
    border-color .3s ease;
  pointer-events:none;
}
.mission-carousel__card.is-active{
  opacity:1;transform:scale(1) translateX(0) rotate(0deg);
  pointer-events:auto;z-index:20;
}
.mission-carousel__card.is-prev{
  opacity:.45;transform:scale(.85) translateX(-90px) rotate(-4deg);
  pointer-events:auto;z-index:10;cursor:pointer;
}
.mission-carousel__card.is-next{
  opacity:.45;transform:scale(.85) translateX(90px) rotate(4deg);
  pointer-events:auto;z-index:10;cursor:pointer;
}
.mission-carousel__card.is-prev:hover,
.mission-carousel__card.is-next:hover{
  border-color:#334155;
}
.mission-carousel__card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:filter .7s ease,transform .7s ease;
}
.mission-carousel__card:not(.is-active) img{
  filter:grayscale(1) blur(1px) brightness(.75);
}
.mission-carousel__card-live{
  position:absolute;top:1.5rem;left:1.5rem;z-index:3;
  display:flex;align-items:center;gap:.75rem;
  height:3.5rem;
  background:rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:99px;padding:.5rem 1.25rem .5rem 1rem;
  opacity:0;transition:opacity .3s ease;
  pointer-events:none;
}
.mission-carousel__card.is-active .mission-carousel__card-live{opacity:1}
.mission-carousel__card-live-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--white);box-shadow:0 0 10px rgba(255,255,255,1);
  animation:dotBlink 2s ease-in-out infinite;
}
.mission-carousel__card-live-number{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;
  font-size:2rem;line-height:1;color:rgba(255,255,255,.95);
}
.mission-carousel__card-body{
  position:absolute;inset-inline:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:2rem;padding-top:6rem;
  background:linear-gradient(to top,#020617 0%,rgba(2,6,23,.4) 55%,transparent 100%);
  opacity:0;transform:translateY(10px);
  transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;
}
.mission-carousel__card.is-active .mission-carousel__card-body{
  opacity:1;transform:translateY(0);
}
.mission-carousel__card-tag{
  display:inline-flex;align-items:center;
  background:#62B2FE;color:var(--white);
  padding:.375rem .875rem;border-radius:99px;
  border:1px solid rgba(255,255,255,.1);
  font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:.75rem;width:fit-content;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.35);
}
.mission-carousel__card-desc{
  font-family:var(--font-body),system-ui,sans-serif;font-weight:500;
  font-size:1.125rem;line-height:1.375;color:var(--white);
  letter-spacing:-.01em;margin:0;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.mission-carousel__card-title{
  font-family:var(--font-display),Georgia,serif;font-weight:700;
  font-size:1.3rem;line-height:1.2;color:var(--white);letter-spacing:-.01em;
}
@media(prefers-reduced-motion:reduce){
  .mission-carousel__pill,
  .mission-carousel__card{transition:none}
  .mission-carousel__card-live-dot{animation:none}
}


/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:1024px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .stats-strip__grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .hero__shell{grid-template-columns:1fr;gap:1.5rem}
  .hero__spine{
    writing-mode:horizontal-tb;
    max-height:none;align-self:start;
    border-left:none;border-top:1px solid rgba(0,145,213,.25);
    padding:1rem 0 0;width:100%;
    justify-content:flex-start;
    letter-spacing:.2em;
  }
}
@media(max-width:768px){
  .grid--3,.grid--2{grid-template-columns:1fr}
  .mission-split{grid-template-columns:1fr !important;gap:2.5rem !important;overflow:visible}
  .how-it-works-grid{grid-template-columns:1fr !important;gap:2.5rem !important}
  .cta-banner__inner{flex-direction:column;align-items:flex-start}
  .hero__title{font-size:clamp(2.5rem,10vw,3.5rem);line-height:1.15;margin-bottom:1rem}
  .hero__title-line--outline{margin-top:0}
  .hero__tagline{margin-top:0}
  body.mi-custom-cursor{cursor:auto}
  #mi-cursor,#mi-cursor-ring{display:none}
}
@media(max-width:480px){
  .stats-strip__grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr}
}

/* ── Hero: scanline + timecode ──────────────────────── */
.hero__scanline{
  position:absolute;inset:0;z-index:3;
  pointer-events:none;overflow:hidden;
}
.hero__scanline::after{
  content:'';
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,145,213,.28),transparent);
  top:0;
  animation:scanLine 12s linear infinite;
}
@keyframes scanLine{
  0%{transform:translateY(-2px);opacity:0}
  4%{opacity:1}
  96%{opacity:1}
  100%{transform:translateY(100vh);opacity:0}
}
.hero__timecode{
  position:absolute;bottom:54px;right:1.5rem;z-index:4;
  font-family:ui-monospace,'SF Mono',monospace;
  font-size:.64rem;font-weight:400;
  letter-spacing:.07em;color:rgba(255,255,255,.22);
  pointer-events:none;-webkit-user-select:none;user-select:none;
}

/* ── Filmstrip ───────────────────────────────────────── */
.filmstrip-section{
  background:#070707;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.filmstrip__holes{
  height:26px;
  background-image:repeating-linear-gradient(
    90deg,
    transparent 0px,transparent 14px,
    rgba(255,255,255,.11) 14px,rgba(255,255,255,.11) 30px,
    transparent 30px,transparent 52px
  );
  background-size:52px 26px;
}
.filmstrip__track{
  display:flex;gap:10px;padding-block:10px;
  width:max-content;
  animation:filmRoll 50s linear infinite;
}
@keyframes filmRoll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.filmstrip__cell{
  flex-shrink:0;
  width:clamp(240px,26vw,360px);
  aspect-ratio:16/9;
  overflow:hidden;position:relative;
  border-radius:3px;
  border:1px solid rgba(255,255,255,.05);
}
.filmstrip__cell video{
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.75) contrast(1.1) brightness(.72);
  transition:filter .5s;
}
.filmstrip__cell:hover video{filter:saturate(1.05) brightness(.9)}
.filmstrip__cell::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 55%,rgba(0,0,0,.6));
  pointer-events:none;
}

/* ── Director's Cut ──────────────────────────────────── */
.director-cut__frame{
  position:relative;
  max-width:100%;margin-inline:auto;
  border-radius:20px;overflow:hidden;
  aspect-ratio:16/9;
  box-shadow:
    0 0 0 1px rgba(0,145,213,.2),
    0 60px 120px rgba(0,0,0,.7);
  transition:box-shadow .4s;
}
.director-cut__slider:hover .director-cut__frame{
  box-shadow:
    0 0 0 1px rgba(0,145,213,.4),
    0 60px 120px rgba(0,0,0,.8),
    0 0 80px rgba(0,106,182,.12);
}
.director-cut__slider{
  max-width:920px;
  margin-inline:auto;
  outline:none;
}
.director-cut__slider:focus-visible{
  outline:2px solid var(--blue-light);
  outline-offset:8px;
  border-radius:20px;
}
.director-cut__transition{
  position:absolute;inset:0;z-index:6;
  background:var(--ink);
  opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease-out);
}
.director-cut__transition.is-active{opacity:.92}
.director-cut__toolbar{
  position:absolute;top:1rem;right:1rem;z-index:8;
  display:flex;align-items:center;gap:.55rem;
}
.director-cut__live{
  display:flex;align-items:center;gap:.45rem;
  padding:.38rem .65rem;
  border-radius:999px;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  font-size:.62rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.director-cut__live-text{line-height:1}
.director-cut__sound{
  display:flex;align-items:center;gap:.5rem;
  padding:.45rem .85rem .45rem .65rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:rgba(255,255,255,.88);
  font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;
  transition:border-color .25s,background .25s,transform .25s var(--ease-back),box-shadow .25s;
}
.director-cut__sound:hover{
  border-color:rgba(0,145,213,.55);
  background:rgba(13,13,13,.72);
  transform:translateY(-1px);
}
.director-cut__sound.is-sound-on{
  border-color:rgba(0,145,213,.65);
  background:linear-gradient(135deg,rgba(0,106,182,.35),rgba(0,145,213,.22));
  box-shadow:0 0 24px rgba(0,106,182,.25);
  color:var(--white);
}
.director-cut__sound:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px}
.director-cut__sound:active{transform:translateY(0)}
.director-cut__sound-icon{
  display:flex;align-items:center;justify-content:center;
  width:1.25rem;height:1.25rem;
}
.director-cut__sound-svg{width:1.1rem;height:1.1rem}
.director-cut__sound-svg--on{display:none}
.director-cut__sound.is-sound-on .director-cut__sound-svg--off{display:none}
.director-cut__sound.is-sound-on .director-cut__sound-svg--on{display:block}
.director-cut__nav{
  position:absolute;top:50%;z-index:7;
  transform:translateY(-50%);
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  opacity:0;
  transition:opacity .3s,transform .25s var(--ease-back),background .25s,border-color .25s;
}
.director-cut__nav svg{width:1.15rem;height:1.15rem}
.director-cut__slider:hover .director-cut__nav,
.director-cut__nav:focus-visible{opacity:1}
@media(hover:none){
  .director-cut__nav{opacity:1}
}
.director-cut__nav--prev{left:.85rem}
.director-cut__nav--next{right:.85rem}
.director-cut__nav:hover{
  background:var(--blue);
  border-color:var(--blue);
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 8px 28px rgba(0,106,182,.45);
}
.director-cut__nav:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px}
.director-cut__nav:active{transform:translateY(-50%) scale(1)}
.director-cut__dock{
  margin-top:1.1rem;
  padding:1.15rem 1.25rem 1.25rem;
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.director-cut__dock-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:.65rem;
}
.director-cut__counter{
  font-family:ui-monospace,monospace;
  font-size:.78rem;font-weight:600;
  letter-spacing:.08em;
  color:rgba(255,255,255,.45);
}
.director-cut__counter-current{color:var(--blue-light)}
.director-cut__counter-sep{color:rgba(255,255,255,.22);margin:0 .15rem}
.director-cut__dots{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
}
.director-cut__dot{
  width:8px;height:8px;padding:0;
  border-radius:999px;
  border:none;
  background:rgba(255,255,255,.22);
  cursor:pointer;
  transition:width .3s var(--ease-out),background .25s,transform .25s var(--ease-back);
}
.director-cut__dot:hover{background:rgba(255,255,255,.5);transform:scale(1.15)}
.director-cut__dot.is-active{
  width:26px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  box-shadow:0 0 12px rgba(0,106,182,.45);
}
.director-cut__dot:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px}
.director-cut__slide-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  letter-spacing:-.02em;
  color:var(--white);
  line-height:1.25;
  transition:opacity .3s,transform .3s var(--ease-out);
}
.director-cut__slide-title.is-changing{
  opacity:0;
  transform:translateY(6px);
}
.director-cut__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.08) brightness(.92);
  transition:filter .6s;
}
.director-cut__frame.is-playing .director-cut__video{
  filter:saturate(1.08) contrast(1.05) brightness(1);
}
.director-cut__overlay{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(to bottom,rgba(0,0,0,.12) 0%,rgba(0,0,0,.55) 100%);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s;
}
.director-cut__frame.is-playing .director-cut__overlay{
  opacity:0;pointer-events:none;
}
.director-cut__frame.is-playing .director-cut__lbox{height:0}
.director-cut__grade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%,rgba(0,106,182,.14),transparent 60%),
    radial-gradient(ellipse 60% 30% at 50% 100%,rgba(0,0,0,.5),transparent 60%);
}
.director-cut__lbox{
  position:absolute;left:0;right:0;z-index:3;
  background:var(--ink);pointer-events:none;
  height:9%;
  transition:height .7s var(--ease-out);
}
.director-cut__lbox--top{top:0}
.director-cut__lbox--bottom{bottom:0}
.director-cut__frame::before{
  content:'';
  position:absolute;inset:0;z-index:4;
  pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  background-size:180px;
  opacity:.04;
  animation:cinemaGrainPulse 6s ease-in-out infinite alternate;
}
.director-cut__scrub{
  position:absolute;bottom:0;left:0;right:0;z-index:5;
  height:3px;background:rgba(255,255,255,.14);
  opacity:1;
}
.director-cut__scrub-fill{
  height:100%;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  width:0%;
  transition:width .35s linear;
}
/* section wrapper + copy helpers */
.section--dc{padding-block:clamp(5rem,9vw,7rem)}
.director-cut__lead{
  margin:1rem auto 0;text-align:center;
}
.director-cut__slider{margin-top:3rem}
.director-cut__rec{
  width:8px;height:8px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 8px var(--blue-glow);
  animation:cinemaRecBlink 2.8s ease-in-out infinite;
}
@media(max-width:768px){
  .director-cut__toolbar{top:.65rem;right:.65rem}
  .director-cut__sound-label{display:none}
  .director-cut__sound{padding:.5rem;border-radius:50%}
  .director-cut__nav{
    opacity:1;
    width:40px;height:40px;
    background:rgba(0,0,0,.55);
  }
  .director-cut__nav--prev{left:.5rem}
  .director-cut__nav--next{right:.5rem}
  .director-cut__dock{padding:1rem}
}

/* ── Bold section divider (dark-to-dark seam) ─────────── */
.section-divider{
  position:relative;
  height:3px;
  background:var(--ink);
  overflow:visible;
  z-index:2;
}
.section-divider__bar{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--blue) 15%,
    var(--blue-light) 50%,
    var(--blue) 85%,
    transparent 100%);
}
.section-divider__glow{
  position:absolute;
  left:50%;top:50%;
  width:min(560px,70%);height:70px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 50% 100% at 50% 50%,var(--blue-light) 0%,transparent 75%);
  filter:blur(28px);
  opacity:.6;
  animation:sectionDividerPulse 5s ease-in-out infinite;
}
@keyframes sectionDividerPulse{
  0%,100%{opacity:.45;transform:translate(-50%,-50%) scaleX(1)}
  50%{opacity:.75;transform:translate(-50%,-50%) scaleX(1.12)}
}
@media(prefers-reduced-motion:reduce){
  .section-divider__glow{animation:none}
}

/* ── Video Service Panels ────────────────────────────── */
.vservice-section{padding-block:0}
.vservice-grid{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:1280px){
  .vservice-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .vservice-grid{grid-template-columns:repeat(2,1fr)}
}
.vservice-panel{
  position:relative;aspect-ratio:4/5;
  overflow:hidden;cursor:pointer;
}
.vservice-panel__bg{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;
  background:var(--ink);
  object-fit:cover;object-position:center;
  filter:saturate(.65) brightness(.42);
  transform:scale(1.04);
  transition:filter .5s var(--ease-out),transform .7s var(--ease-out);
}
.vservice-panel:hover .vservice-panel__bg{
  filter:saturate(1) brightness(.58);
  transform:scale(1);
}
.vservice-panel__grade{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.15) 55%,transparent 100%);
  transition:background .5s;
}
.vservice-panel:hover .vservice-panel__grade{
  background:linear-gradient(to top,rgba(0,20,36,.94) 0%,rgba(0,20,36,.28) 55%,transparent 100%);
}
.vservice-panel__content{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:clamp(1.5rem,3vw,2.5rem);
  transform:translateY(6px);
  transition:transform .4s var(--ease-out);
}
.vservice-panel:hover .vservice-panel__content{transform:none}
.vservice-panel__num{
  font-family:var(--font-display);font-weight:800;
  font-size:3.5rem;letter-spacing:-.06em;line-height:1;
  color:rgba(255,255,255,.07);
  transition:color .35s;
}
.vservice-panel:hover .vservice-panel__num{color:rgba(0,106,182,.55)}
.vservice-panel__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,2.2vw,1.6rem);
  letter-spacing:-.03em;line-height:1.1;
  color:var(--white);margin-bottom:.75rem;
}
.vservice-panel__body{
  font-size:.9rem;line-height:1.7;
  color:rgba(255,255,255,.55);
  max-width:34ch;
  max-height:0;overflow:hidden;
  transition:max-height .45s var(--ease-out),opacity .4s;
  opacity:0;
}
.vservice-panel:hover .vservice-panel__body{max-height:120px;opacity:1}
.vservice-panel__link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.82rem;font-weight:700;color:var(--blue-light);
  margin-top:1rem;
  opacity:0;transform:translateY(4px);
  transition:opacity .35s .1s,transform .35s .1s var(--ease-out),gap .2s;
}
.vservice-panel:hover .vservice-panel__link{opacity:1;transform:none}
.vservice-panel__link:hover{gap:.7rem}
.vservice-panel__link:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px;border-radius:3px}
.vservice-panel__divider{
  position:absolute;top:0;bottom:0;right:0;width:1px;
  background:rgba(255,255,255,.08);z-index:2;
}
.vservice-panel:last-child .vservice-panel__divider{display:none}
.vservice-panel::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  z-index:3;
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.vservice-panel:hover::before{transform:scaleX(1)}
@media(max-width:900px){
  .vservice-grid{grid-template-columns:1fr}
  .vservice-panel{aspect-ratio:16/9}
  .vservice-panel__body{max-height:80px;opacity:.75}
  .vservice-panel__link{opacity:1;transform:none}
  .vservice-panel__divider{display:none}
  .vservice-panel::after{
    content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
    background:rgba(255,255,255,.08);z-index:2;
  }
}
@media(max-width:600px){
  .filmstrip__cell{width:200px}
}

@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}
  .hero__mesh,
  .hero__grid-bg,
  .hero__orb,
  .hero__ticker-track,
  .marquee-track,
  .hero__eyebrow-dot{animation:none}
  .hero__cinema-sweep::before,
  .hero__cinema-grain{animation:none}
  .hero__cinema-grain{opacity:.06}
  .hero__scanline::after{animation:none}
  .filmstrip__track{animation:none}
  .director-cut__lbox{height:0}
  .vservice-panel__bg{filter:saturate(.75) brightness(.5)}
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .stagger>*{opacity:1;transform:none;transition:none}
  .reveal.is-visible,
  .reveal-left.is-visible,
  .reveal-right.is-visible,
  .reveal-scale.is-visible,
  .stagger.is-visible>*{opacity:1;transform:none}
}

/* ── FAQ layout ─────────────────────────────────────── */
.faq-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:4.5rem;
  align-items:start;
}
.faq-nav__sticky{position:sticky;top:calc(var(--logo-nav-bar,108px) + 1rem)}
.faq-nav__label{
  font-family:var(--font-body);font-weight:700;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  margin-bottom:1rem;
}
.faq-nav__list{display:grid;gap:.3rem;list-style:none;margin:0;padding:0}
.faq-nav__link{
  font-size:.88rem;color:var(--mid);
  display:block;padding:.4rem .75rem;
  border-left:2px solid var(--border);
  transition:border-color .18s,color .18s;
  text-decoration:none;
}
.faq-nav__link:hover,
.faq-nav__link:focus-visible{
  border-color:var(--blue);color:var(--ink);
}
@media(max-width:900px){
  .faq-layout{grid-template-columns:1fr;gap:2rem}
  .faq-nav__sticky{position:static}
}

/* ── Client Login page ──────────────────────────────────────────────────── */

body.mi-prototype.mi-page-client-login,
body.mi-prototype.mi-page-client-dashboard{background:var(--ink) !important}

/* Hide Blocksy page hero/title area on portal pages — it has no content there */
body.mi-page-client-login .ct-page-hero,
body.mi-page-client-login .entry-header,
body.mi-page-client-login .page-title,
body.mi-page-client-dashboard .ct-page-hero,
body.mi-page-client-dashboard .entry-header,
body.mi-page-client-dashboard .page-title{display:none !important}

.client-login-wrap{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(var(--logo-nav-bar,80px) + 3rem) 1.5rem 4rem;
}
.client-login-wrap__bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.client-login-wrap__bg img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:saturate(.85) contrast(1.05) brightness(.55);
}
.client-login-wrap__overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(13,13,13,.5) 0%,rgba(13,13,13,.75) 45%,rgba(13,13,13,.92) 100%),
    radial-gradient(ellipse 55% 40% at 88% 8%,rgba(0,106,182,.12),transparent 55%),
    radial-gradient(ellipse 45% 35% at 8% 92%,rgba(0,145,213,.08),transparent 50%);
}

/* Login card */
.mi-login-card{
  position:relative;z-index:2;
  width:min(440px,92vw);
  background:var(--ink-3);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:clamp(2rem,5vw,3rem);
  box-shadow:
    0 0 0 1px rgba(0,145,213,.06),
    0 8px 32px rgba(0,0,0,.45),
    0 32px 80px rgba(0,0,0,.35),
    0 0 60px rgba(0,106,182,.08);
}
@media(prefers-reduced-motion:no-preference){
  .mi-login-card{animation:mi-card-rise .7s cubic-bezier(.16,1,.3,1) both}
  @keyframes mi-card-rise{
    from{opacity:0;transform:translateY(28px)}
    to{opacity:1;transform:none}
  }
}
.mi-login-card__logo{
  display:flex;justify-content:center;margin-bottom:1.75rem;
}
.mi-login-card__logo img{height:52px;width:auto;mix-blend-mode:lighten}
.mi-login-card__kicker{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-light);text-align:center;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-bottom:.75rem;
}
.mi-login-card__kicker::before,.mi-login-card__kicker::after{
  content:'';width:20px;height:1.5px;background:var(--blue-light);opacity:.6;
}
.mi-login-card__heading{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(1.6rem,3.5vw,2rem);color:#fff;text-align:center;margin-bottom:.5rem;
}
.mi-login-card__sub{
  font-size:.9rem;color:rgba(255,255,255,.45);text-align:center;margin-bottom:2rem;
}
.mi-login-card__error{
  background:rgba(0,106,182,.12);border:1px solid rgba(0,106,182,.3);border-radius:8px;
  padding:.75rem 1rem;font-size:.88rem;color:#ff8a8a;margin-bottom:1.25rem;
  display:flex;align-items:center;gap:.5rem;
}
.mi-login-card__error::before{content:'⚠';flex-shrink:0}
.mi-login-card .form-group{margin-bottom:1.1rem}
.mi-login-card .form-label{color:rgba(255,255,255,.7)}
.mi-login-card .form-input{
  background:rgba(13,13,13,.8);border-color:rgba(255,255,255,.1);color:#fff;
}
.mi-login-card .form-input::placeholder{color:rgba(255,255,255,.25)}
.mi-login-card .form-input:focus{
  border-color:var(--blue-light);
  outline:2px solid rgba(0,145,213,.25);outline-offset:0;
  background:var(--ink-3);
}
.mi-login-card__submit{
  width:100%;margin-top:.5rem;padding:.85rem;
  font-size:1rem;font-weight:600;letter-spacing:.02em;
  transition:background .2s,box-shadow .2s,transform .2s cubic-bezier(.16,1,.3,1);
}
.mi-login-card__submit:hover{
  background:#004D85;
  box-shadow:0 8px 28px rgba(0,106,182,.35);
  transform:translateY(-2px);
}
.mi-login-card__submit:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px}
.mi-login-card__submit:active{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,106,182,.35)}
.mi-login-card__forgot{
  display:block;text-align:center;margin-top:1.25rem;
  font-size:.82rem;color:rgba(255,255,255,.35);text-decoration:none;
  transition:color .2s;
}
.mi-login-card__forgot:hover{color:var(--blue-light)}
.mi-login-card__forgot:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px;border-radius:3px}
.mi-login-card__success{
  background:rgba(0,145,213,.12);border:1px solid rgba(0,145,213,.3);border-radius:8px;
  padding:.75rem 1rem;font-size:.88rem;color:#0091D5;margin-bottom:1.25rem;
}

/* ── Client Dashboard ───────────────────────────────────────────────────── */

.mi-dashboard{min-height:100vh;background:var(--ink);padding-top:var(--logo-nav-bar,80px)}

/* Welcome bar */
.mi-dashboard-welcome{
  background:var(--ink-2);border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;top:var(--logo-nav-bar,80px);z-index:10;
}
.mi-dashboard-welcome__inner{
  max-width:min(1140px,92vw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 0;
  font-size:.92rem;color:rgba(255,255,255,.6);
}
.mi-dashboard-welcome__greeting strong{color:#fff}
.mi-dashboard-welcome__logout{
  font-size:.82rem;color:rgba(255,255,255,.4);text-decoration:none;
  transition:color .2s;
}
.mi-dashboard-welcome__logout:hover{color:var(--blue-light)}
.mi-dashboard-welcome__logout:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px;border-radius:3px}

/* Sub-nav */
.mi-dashboard-subnav{
  background:var(--ink-2);border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;top:calc(var(--logo-nav-bar,80px) + 44px);z-index:9;
}
.mi-dashboard-subnav__inner{
  max-width:min(1140px,92vw);margin:0 auto;
  display:flex;gap:0;
}
.mi-dashboard-subnav__link{
  padding:.9rem 1.25rem;font-size:.88rem;font-weight:600;
  color:rgba(255,255,255,.45);text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
  white-space:nowrap;
}
.mi-dashboard-subnav__link:hover{color:#fff}
.mi-dashboard-subnav__link:focus-visible{outline:2px solid var(--blue-light);outline-offset:-2px}
.mi-dashboard-subnav__link.is-active{color:var(--blue-light);border-bottom-color:var(--blue-light)}

/* Dashboard sections */
.mi-dashboard-sections{max-width:min(1140px,92vw);margin:0 auto;padding:4rem 0 6rem}
.mi-dashboard-section{margin-bottom:5rem}
.mi-dashboard-section__header{margin-bottom:2rem}
.mi-dashboard-section__kicker{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-light);margin-bottom:.5rem;
}
.mi-dashboard-section__heading{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(1.6rem,3vw,2.2rem);color:#fff;margin:0;
}

/* Drive embed */
.mi-drive-embed{
  background:var(--ink-3);border-radius:12px;overflow:hidden;
  min-height:70vh;
  box-shadow:0 2px 8px rgba(0,0,0,.25),0 24px 64px rgba(0,0,0,.35);
}
.mi-drive-embed iframe{
  display:block;width:100%;height:70vh;border:none;
}
.mi-drive-embed--placeholder{
  display:flex;align-items:center;justify-content:center;
  min-height:30vh;
}
.mi-drive-embed--placeholder p{
  font-size:.95rem;color:rgba(255,255,255,.35);font-style:italic;
}

/* Media 2-col layout */
.mi-media-layout{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:start}
@media(max-width:1024px){.mi-media-layout{grid-template-columns:1fr}}

/* Dashboard notices */
.mi-dashboard-notice{
  padding:.75rem 1rem;border-radius:8px;font-size:.88rem;margin-bottom:1.25rem;
}
.mi-dashboard-notice--success{background:rgba(0,145,213,.12);border:1px solid rgba(0,145,213,.3);color:#0091D5}
.mi-dashboard-notice--error{background:rgba(0,106,182,.12);border:1px solid rgba(0,106,182,.3);color:#ff8a8a}

/* Suspended state */
.mi-dashboard-suspended{
  min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;
}
.mi-dashboard-suspended__inner{max-width:480px;padding:2rem}
.mi-dashboard-suspended__kicker{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-light);margin-bottom:.75rem;
}
.mi-dashboard-suspended__heading{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(1.6rem,3vw,2rem);color:#fff;margin:0 0 1rem;
}
.mi-dashboard-suspended__body{font-size:.95rem;color:rgba(255,255,255,.45);margin-bottom:2rem}

/* Nav logout link */
.nav__link--logout{font-size:.82em;opacity:.65}
.nav__link--logout:hover{opacity:1}

/* ── Dashboard file list ────────────────────────────────────────────────── */

.mi-file-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}

.mi-file-item{
  background:var(--ink-3);border:1px solid rgba(255,255,255,.07);border-radius:10px;
  padding:1rem 1.25rem;display:grid;
  grid-template-columns:40px 1fr auto;
  grid-template-rows:auto auto;
  gap:.5rem 1rem;align-items:center;
  transition:border-color .2s;
}
.mi-file-item:hover{border-color:rgba(255,255,255,.14)}
.mi-file-item--approve{border-left:3px solid var(--blue-light)}
.mi-file-item--request{border-left:3px solid #006AB6}

/* File icon */
.mi-file-item__icon{
  width:40px;height:40px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  grid-row:1/3;
}
.mi-file-item__icon svg{width:20px;height:20px}
.mi-file-icon--doc{background:rgba(66,133,244,.15);color:#4285f4}
.mi-file-icon--sheet{background:rgba(52,168,83,.15);color:#34a853}
.mi-file-icon--slides{background:rgba(251,188,5,.15);color:#fbbc05}
.mi-file-icon--folder{background:rgba(0,145,213,.15);color:var(--blue-light)}
.mi-file-icon--pdf{background:rgba(0,106,182,.15);color:#006AB6}
.mi-file-icon--image{background:rgba(0,145,213,.1);color:var(--blue-light)}
.mi-file-icon--video{background:rgba(0,106,182,.1);color:#006AB6}
.mi-file-icon--file{background:rgba(255,255,255,.06);color:rgba(255,255,255,.4)}

/* File body */
.mi-file-item__body{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;min-width:0}
.mi-file-item__name{
  color:#fff;font-weight:600;font-size:.95rem;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  transition:color .2s;
}
.mi-file-item__name:hover{color:var(--blue-light)}
.mi-file-item__name:focus-visible{outline:2px solid var(--blue-light);outline-offset:2px;border-radius:2px}
.mi-file-item__ext{
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.3);margin-left:.25rem;
}
.mi-file-item__meta{font-size:.78rem;color:rgba(255,255,255,.3)}
.mi-file-item__status{
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:4px;
}
.mi-file-item__status--approve{background:rgba(0,145,213,.15);color:var(--blue-light)}
.mi-file-item__status--request{background:rgba(0,106,182,.12);color:#ff8a8a}
.mi-file-item__comment{
  font-size:.82rem;color:rgba(255,255,255,.4);font-style:italic;
  width:100%;margin-top:.15rem;
}

/* File actions */
.mi-file-item__actions{display:flex;gap:.5rem;align-items:center;flex-shrink:0}
.mi-file-btn{
  font-size:.8rem;font-weight:600;letter-spacing:.04em;
  padding:.35rem .75rem;border-radius:6px;border:none;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:background .2s,color .2s,transform .15s;
}
.mi-file-btn:focus-visible{outline:2px solid var(--blue-light);outline-offset:2px}
.mi-file-btn:active{transform:scale(.97)}
.mi-file-btn--open{
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.7);
}
.mi-file-btn--open:hover{background:rgba(255,255,255,.12);color:#fff}
.mi-file-btn--review{
  background:rgba(0,106,182,.15);color:#ff8a8a;
}
.mi-file-btn--review:hover{background:rgba(0,106,182,.25);color:#fff}
.mi-file-btn--cancel{
  background:transparent;color:rgba(255,255,255,.35);font-size:.78rem;padding:.25rem .5rem;
}
.mi-file-btn--cancel:hover{color:rgba(255,255,255,.7)}

/* Empty / error states */
.mi-file-list-empty,.mi-file-list-error{
  background:var(--ink-3);border:1px dashed rgba(255,255,255,.1);border-radius:10px;
  padding:2rem;text-align:center;color:rgba(255,255,255,.3);font-style:italic;font-size:.9rem;
}
.mi-file-list-error{border-color:rgba(0,106,182,.2);color:#ff8a8a}

/* Toast notifications */
.mi-dashboard-toast{
  max-width:min(1140px,92vw);margin:1rem auto 0;
  padding:.75rem 1.25rem;border-radius:8px;font-size:.9rem;
}
.mi-dashboard-toast--success{background:rgba(0,145,213,.12);border:1px solid rgba(0,145,213,.3);color:var(--blue-light)}
.mi-dashboard-toast--error{background:rgba(0,106,182,.12);border:1px solid rgba(0,106,182,.3);color:#ff8a8a}

@media(max-width:640px){
  .mi-file-item{grid-template-columns:36px 1fr;grid-template-rows:auto auto auto}
  .mi-file-item__actions{grid-column:1/-1;justify-content:flex-start}
  .mi-file-item__icon{grid-row:1}
}

/* ── Folder inline expansion ────────────────────────────────────────────── */
.mi-folder-contents{
  grid-column:1/-1;
  background:rgba(0,0,0,.18);border-top:1px solid rgba(255,255,255,.06);
  margin:0 -1.25rem -1rem;padding:.75rem 1rem 1rem;border-radius:0 0 10px 10px;
}
.mi-file-list--nested{gap:.4rem}
.mi-file-list--nested .mi-file-item{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.05);
}
.mi-folder-empty,.mi-folder-error{
  font-size:.85rem;color:rgba(255,255,255,.3);font-style:italic;padding:.5rem 0;
}
.mi-folder-error{color:#ff8a8a}

/* ── View button (replaces old --open) ──────────────────────────────────── */
.mi-file-btn--view{
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.75);
}
.mi-file-btn--view:hover{background:rgba(255,255,255,.13);color:#fff}

/* Not-previewable placeholder */
.mi-file-btn--nopreview{
  font-size:.78rem;font-weight:600;letter-spacing:.03em;
  color:rgba(255,255,255,.25);cursor:default;padding:.35rem .75rem;display:inline-block;
}

/* ── "New" badge on file items ──────────────────────────────────────────── */
.mi-file-item__badge-new{
  display:inline-block;
  font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--blue-light);color:var(--ink);
  padding:.1rem .35rem;border-radius:4px;margin-left:.3rem;vertical-align:middle;
}

/* ── Sub-nav file count badge ────────────────────────────────────────────── */
.mi-dashboard-subnav__badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.4em;height:1.4em;padding:0 .3em;
  font-size:.7rem;font-weight:700;line-height:1;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.55);border-radius:99px;
  margin-left:.35rem;vertical-align:middle;
  transition:background .2s,color .2s;
}
.mi-dashboard-subnav__link.is-active .mi-dashboard-subnav__badge{
  background:var(--blue-light);color:var(--ink);
}

/* ── Welcome bar last-login line ─────────────────────────────────────────── */
.mi-dashboard-welcome__last-login{
  font-size:.78rem;color:rgba(255,255,255,.35);margin:.1rem 0 0;letter-spacing:.01em;
}

/* ── Collapsible section toggle ──────────────────────────────────────────── */
.mi-dashboard-section__toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:none;border-bottom:1px solid rgba(255,255,255,.07);
  padding:1.25rem clamp(1.25rem,4vw,2rem);cursor:pointer;text-align:left;
  transition:background .15s;
  border-radius:12px 12px 0 0;
}
.mi-dashboard-section:not(:first-child) .mi-dashboard-section__toggle{
  border-radius:12px;
}
.mi-dashboard-section__toggle:hover{background:rgba(255,255,255,.03)}
.mi-dashboard-section__toggle:focus-visible{outline:2px solid var(--blue-light);outline-offset:-2px;border-radius:12px}

.mi-dashboard-section__toggle-text{display:flex;flex-direction:column;gap:.15rem}

.mi-dashboard-section__kicker{
  font-size:.67rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-light);
}
.mi-dashboard-section__heading{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.1rem,2.2vw,1.35rem);color:#fff;
  transition:color .2s;
}
.mi-dashboard-section__toggle:hover .mi-dashboard-section__heading,
.mi-dashboard-section__toggle[aria-expanded="true"] .mi-dashboard-section__heading{
  color:var(--blue-light);
}

/* Chevron arrow */
.mi-dashboard-section__chevron{
  flex-shrink:0;
  width:20px;height:20px;position:relative;
}
.mi-dashboard-section__chevron::before,
.mi-dashboard-section__chevron::after{
  content:'';position:absolute;top:50%;
  width:10px;height:2px;background:rgba(255,255,255,.45);border-radius:2px;
  transition:transform .25s cubic-bezier(.16,1,.3,1),background .15s;
}
.mi-dashboard-section__chevron::before{
  right:50%;transform:translateY(-50%) rotate(45deg);transform-origin:right center;
}
.mi-dashboard-section__chevron::after{
  left:50%;transform:translateY(-50%) rotate(-45deg);transform-origin:left center;
}
/* Chevron rotates when expanded */
.mi-dashboard-section__toggle[aria-expanded="true"] .mi-dashboard-section__chevron::before{
  transform:translateY(-50%) rotate(-45deg);background:var(--blue-light);
}
.mi-dashboard-section__toggle[aria-expanded="true"] .mi-dashboard-section__chevron::after{
  transform:translateY(-50%) rotate(45deg);background:var(--blue-light);
}

/* Section body shown/hidden via hidden attr */
.mi-dashboard-section__body{
  padding:1.5rem clamp(1.25rem,4vw,2rem) 2rem;
}
.mi-dashboard-section[data-collapsible]{
  background:var(--ink-2);border:1px solid rgba(255,255,255,.06);border-radius:12px;
  overflow:hidden;margin-bottom:1rem;
}

/* ── File viewer modal ───────────────────────────────────────────────────── */
.mi-file-modal{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
}
.mi-file-modal[hidden]{display:none}

.mi-file-modal__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.88);
  animation:modal-fade-in .25s ease;
}

.mi-file-modal__inner{
  position:relative;z-index:1;
  width:96vw;height:92vh;max-width:1280px;
  display:flex;flex-direction:column;
  background:var(--ink-2);border:1px solid rgba(255,255,255,.1);border-radius:16px;
  overflow:hidden;
  animation:modal-slide-up .3s cubic-bezier(.16,1,.3,1);
}

.mi-file-modal__header{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.mi-file-modal__title{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:1rem;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mi-file-modal__close{
  flex-shrink:0;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);border:none;color:rgba(255,255,255,.65);
  font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s,transform .15s;
}
.mi-file-modal__close:hover{background:rgba(0,106,182,.25);color:#fff;transform:scale(1.1)}
.mi-file-modal__close:focus-visible{outline:2px solid var(--blue-light);outline-offset:2px}
.mi-file-modal__close:active{transform:scale(.95)}

.mi-file-modal__body{flex:1;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
.mi-file-modal__frame{width:100%;height:100%;border:none;display:block;background:#fff}
.mi-modal-video{
  width:100%;height:100%;max-height:100%;display:block;object-fit:contain;background:#000;
}
.mi-modal-image{
  max-width:100%;max-height:100%;object-fit:contain;display:block;user-select:none;
  -webkit-user-drag:none;pointer-events:none;
}

/* Modal footer — Open in Drive / Download */
.mi-modal-footer{
  display:flex;align-items:center;gap:.65rem;
  padding:.65rem 1.25rem;
  background:var(--ink-2);
  border-top:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
}
.mi-modal-btn--drive{background:rgba(66,133,244,.15);color:#7baaf7}
.mi-modal-btn--drive:hover{background:rgba(66,133,244,.28);color:#fff}
.mi-modal-btn--download{background:rgba(0,145,213,.12);color:var(--blue-light)}
.mi-modal-btn--download:hover{background:rgba(0,145,213,.25);color:#fff}
.mi-file-btn--download{background:rgba(255,255,255,.06);color:rgba(255,255,255,.55)}
.mi-file-btn--download:hover{background:rgba(255,255,255,.12);color:#fff}

/* PDF.js canvas viewer */
.mi-pdf-viewer{display:flex;flex-direction:column;width:100%;height:100%;background:#111}
.mi-pdf-viewer__canvas-wrap{flex:1;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:1.25rem}
.mi-pdf-viewer canvas{max-width:100%;box-shadow:0 4px 24px rgba(0,0,0,.5);border-radius:3px;display:block}
.mi-pdf-viewer__controls{display:flex;align-items:center;justify-content:center;gap:1.25rem;
  padding:.6rem 1.25rem;background:var(--ink-2);border-top:1px solid rgba(255,255,255,.07);flex-shrink:0}
.mi-pdf-viewer__page-info{font-size:.85rem;color:rgba(255,255,255,.5);min-width:8ch;text-align:center}
.mi-pdf-viewer__btn{background:rgba(255,255,255,.08);border:none;color:#fff;
  padding:.3rem .9rem;border-radius:6px;cursor:pointer;font-size:.85rem;
  transition:background .15s}
.mi-pdf-viewer__btn:hover{background:rgba(255,255,255,.16)}
.mi-pdf-viewer__btn:disabled{opacity:.3;cursor:default}
.mi-modal-no-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;height:100%;color:rgba(255,255,255,.4);text-align:center;padding:2rem}
.mi-modal-no-preview svg{opacity:.3}
.mi-modal-no-preview p{margin:0;font-size:.95rem}
.mi-modal-no-preview__sub{font-size:.8rem;opacity:.6}

@keyframes modal-fade-in{from{opacity:0}to{opacity:1}}
@keyframes modal-slide-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .mi-file-modal__backdrop,.mi-file-modal__inner{animation:none}
}

@media(max-width:640px){
  .mi-file-modal__inner{width:100vw;height:100dvh;border-radius:0;border:none}
  .mi-dashboard-section__toggle{padding:1rem}
  .mi-dashboard-section__body{padding:1rem}
}

/* ── Section web links ────────────────────────────────────────────────────── */
.mi-section-links{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.5rem;border-top:1px solid rgba(0,0,0,.06);
  margin-top:.5rem;
}
.mi-section-links__label{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#999;white-space:nowrap;
}
.mi-section-links__list{display:flex;flex-wrap:wrap;gap:.5rem}
.mi-section-link-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .85rem;border-radius:6px;
  background:rgba(0,145,213,.1);
  border:1px solid rgba(0,145,213,.35);
  color:#7a6020;
  font-size:.82rem;font-weight:600;
  text-decoration:none;
  transition:background .18s,border-color .18s,color .18s,transform .15s;
}
.mi-section-link-btn:hover{
  background:rgba(0,145,213,.2);border-color:rgba(0,145,213,.65);
  color:#5a4614;transform:translateY(-2px);
}
.mi-section-link-btn:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px}
.mi-section-link-btn:active{transform:translateY(-1px)}
.mi-section-link-btn__icon{flex-shrink:0;opacity:.7}

/* ── Checkout page ────────────────────────────────────────────────────────── */
.checkout-wrap{max-width:min(860px,94vw);margin:0 auto}

/* ── Step progress ───────────────────────────────────────────────────────── */
.checkout-steps{display:flex;align-items:center;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.checkout-steps__step{display:flex;align-items:center;gap:.65rem;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .3s var(--ease-out)}
.checkout-steps__step--active{color:var(--blue)}
.checkout-steps__step--done{color:var(--blue-light)}
.checkout-steps__num{width:32px;height:32px;border-radius:50%;background:var(--surface);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0;transition:background .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.checkout-steps__step--active .checkout-steps__num{background:var(--blue);border-color:var(--blue);color:var(--white);box-shadow:0 4px 14px var(--blue-glow)}
.checkout-steps__step--done .checkout-steps__num{background:var(--blue-light);border-color:var(--blue-light);color:var(--white);box-shadow:0 4px 14px var(--blue-light-glow)}
.checkout-steps__line{flex:1;height:2px;background:var(--border);margin:0 .75rem;transition:background .4s var(--ease-out)}
.checkout-steps__line.is-done{background:var(--blue-light)}
@media(max-width:480px){.checkout-steps__label{display:none}}

/* ── Panel headings ──────────────────────────────────────────────────────── */
.checkout-panel__title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3.5vw,2.1rem);letter-spacing:-.05em;margin-bottom:1.75rem;color:var(--ink)}

/* ── Package switcher tabs ───────────────────────────────────────────────── */
.checkout-pkg-tabs{display:flex;gap:.5rem;margin-bottom:1.75rem}
.checkout-pkg-tab{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.5rem;border-radius:999px;border:2px solid var(--border);background:var(--white);font-family:var(--font-body);font-size:.9rem;font-weight:700;color:var(--muted);cursor:pointer;transition:border-color .2s var(--ease-out),color .2s var(--ease-out),background .2s var(--ease-out),box-shadow .2s var(--ease-out),transform .15s var(--ease-out)}
.checkout-pkg-tab:hover{border-color:rgba(0,106,182,.4);color:var(--blue);transform:translateY(-2px)}
.checkout-pkg-tab:active{transform:translateY(-1px)}
.checkout-pkg-tab.is-active{border-color:var(--blue);background:var(--blue);color:var(--white);box-shadow:0 4px 18px var(--blue-glow)}
.checkout-pkg-tab:focus-visible{outline:var(--focus-ring);outline-offset:3px}
.checkout-pkg-tab__badge{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--blue-light);color:var(--ink);border-radius:3px;padding:1px 6px}
.checkout-pkg-tab.is-active .checkout-pkg-tab__badge{background:rgba(255,255,255,.2);color:var(--white)}

/* ── Single package detail panel ─────────────────────────────────────────── */
.checkout-plan-detail{border:2px solid var(--blue);border-radius:16px;overflow:hidden;margin-bottom:1.75rem;box-shadow:0 2px 8px rgba(0,0,0,.04),0 8px 32px rgba(0,106,182,.08)}
.checkout-plan-detail.is-hidden{display:none}
.checkout-plan-detail__inner{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:640px){.checkout-plan-detail__inner{grid-template-columns:1fr}}

/* Left: dark pricing column — same dark-card language as price-card--featured */
.checkout-plan-detail__left{padding:2rem;background:var(--ink);color:var(--white);border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:1.1rem}
@media(max-width:640px){.checkout-plan-detail__left{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}}
.checkout-plan-detail__name{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--white);letter-spacing:-.03em;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.checkout-plan-detail__popular{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--blue-light);color:var(--ink);border-radius:4px;padding:2px 7px}
.checkout-plan-detail__tagline{font-size:.85rem;color:rgba(255,255,255,.5);line-height:1.55;margin:0}
.checkout-plan-detail__price-block{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.1rem 1.25rem}
.checkout-plan-detail__price{font-family:var(--font-display);font-size:2.25rem;font-weight:700;color:var(--white);letter-spacing:-.05em;line-height:1}
.checkout-plan-detail__price-note{font-size:.78rem;color:rgba(255,255,255,.4);margin-top:.35rem}
.checkout-plan-detail__recurring{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-light);background:rgba(0,145,213,.12);border:1px solid rgba(0,145,213,.25);border-radius:5px;padding:4px 10px;align-self:flex-start}

/* Billing toggle — inside dark left column */
.checkout-billing-toggle{display:inline-flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:3px;gap:2px}
.checkout-billing-toggle__btn{padding:.4rem 1.1rem;border-radius:999px;border:none;background:transparent;font-family:var(--font-body);font-size:.82rem;font-weight:600;color:rgba(255,255,255,.5);cursor:pointer;transition:background .2s var(--ease-out),color .2s var(--ease-out)}
.checkout-billing-toggle__btn.is-active{background:var(--blue);color:var(--white);box-shadow:0 2px 8px var(--blue-glow)}
.checkout-billing-toggle__btn:focus-visible{outline:2px solid var(--blue-light);outline-offset:2px}
.checkout-billing-toggle__save{font-size:.65rem;font-weight:700;background:var(--blue-light);color:var(--ink);border-radius:3px;padding:1px 5px;margin-left:.3rem;vertical-align:middle}

/* Right: warm surface features column */
.checkout-plan-detail__right{padding:2rem;background:var(--surface)}
.checkout-plan-detail__features-label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.checkout-plan__features{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.checkout-plan__features li{font-size:.9rem;color:var(--mid);display:flex;align-items:baseline;gap:.7rem;line-height:1.5}
.checkout-plan__features li::before{content:'✓';color:var(--blue-light);font-weight:700;font-size:.82rem;flex-shrink:0}

/* ── Disclaimer ──────────────────────────────────────────────────────────── */
.checkout-disclaimer{font-size:.8rem;color:var(--muted);margin-bottom:2rem;text-align:center}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.checkout-fields{display:grid;gap:1rem;margin-bottom:1.75rem}
.form-input--error{border-color:var(--blue) !important;box-shadow:0 0 0 3px var(--blue-dim) !important}
.checkout-required{color:var(--blue);margin-left:1px}

/* ── Selected plan pill (steps 2 & 3) ───────────────────────────────────── */
.checkout-selected-plan{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;background:var(--ink);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:1rem 1.25rem;margin-bottom:1.75rem}
.checkout-selected-plan__left{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;flex:1}
.checkout-selected-plan__name{font-weight:700;font-size:.9rem;color:var(--white)}
.checkout-selected-plan__price{font-family:var(--font-display);font-weight:700;color:var(--blue);font-size:1rem}
.checkout-selected-plan__cycle{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(0,106,182,.25);color:#ff8080;border-radius:4px;padding:2px 7px}
.checkout-selected-plan__change{background:none;border:none;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.4);cursor:pointer;text-decoration:underline;padding:0;transition:color .2s;white-space:nowrap}
.checkout-selected-plan__change:hover{color:var(--blue-light)}
.checkout-selected-plan__change:focus-visible{outline:var(--focus-ring);outline-offset:2px}

/* ── Order summary ───────────────────────────────────────────────────────── */
.checkout-summary{margin-bottom:1.5rem}
.checkout-summary__line{display:flex;justify-content:space-between;align-items:center;font-size:.92rem;color:var(--mid);padding:.4rem 0}
.checkout-summary__line strong{color:var(--ink);font-weight:700}
.checkout-summary__line--note{font-size:.78rem;color:var(--muted);border-top:1px solid var(--border);padding-top:.6rem;margin-top:.3rem}

/* ── info-card gold variant ──────────────────────────────────────────────── */
.info-card--blue-light{background:var(--blue-light-dim);border-color:rgba(0,145,213,.35)}
.info-card--blue-light .info-card__label{color:#7a6010}

/* ── Payment method cards ────────────────────────────────────────────────── */
.checkout-method-card{border:1.5px solid var(--border);border-radius:16px;padding:1.75rem;margin-bottom:1.25rem;background:var(--white);transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),transform .2s var(--ease-out)}
.checkout-method-card:hover{border-color:rgba(0,106,182,.3);box-shadow:0 2px 8px rgba(0,0,0,.04),0 12px 36px rgba(0,0,0,.08);transform:translateY(-3px)}
.checkout-method-card__header{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.25rem}
.checkout-method-card__icon-wrap{width:44px;height:44px;border-radius:10px;background:var(--blue-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.checkout-method-card__icon-wrap--blue-light{background:var(--blue-light-dim)}
.checkout-method-card__icon{font-size:.95rem;font-weight:700;color:var(--blue)}
.checkout-method-card__icon--blue-light{color:#7a6010}
.checkout-method-card__title{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink);display:block;margin-bottom:.3rem;letter-spacing:-.02em}
.checkout-method-card__note{font-size:.83rem;color:var(--muted);margin:0;line-height:1.5}
.checkout-method-card__btn{margin-top:1.25rem}
.checkout-method-card--unconfigured{text-align:center;color:var(--mid)}

/* ── Zelle info rows ─────────────────────────────────────────────────────── */
.checkout-zelle-info{margin-bottom:1rem}
.checkout-zelle-info__row{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;padding:.45rem 0;border-bottom:1px solid rgba(0,145,213,.2);color:var(--mid)}
.checkout-zelle-info__row:last-child{border-bottom:none}
.checkout-zelle-info__row strong{color:var(--ink);font-weight:700}
.checkout-zelle-instruction{font-size:.82rem;color:var(--muted);margin-bottom:0;line-height:1.5}

/* ── Utilities ───────────────────────────────────────────────────────────── */
.btn--full{width:100%;justify-content:center}
.checkout-nav{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.checkout-nav--right{justify-content:flex-end}
.checkout-error-banner{background:var(--blue-dim);color:var(--blue);border:1px solid rgba(0,106,182,.25);border-radius:10px;padding:.9rem 1.1rem;font-size:.9rem;font-weight:600;margin-bottom:1.5rem}

/* ── Result states ───────────────────────────────────────────────────────── */
.checkout-result{text-align:center;padding:clamp(3rem,6vw,5rem) 1rem}
.checkout-result__icon{width:80px;height:80px;border-radius:50%;background:var(--blue);color:var(--white);font-size:1.85rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;box-shadow:0 6px 28px var(--blue-glow)}
.checkout-result__icon--blue-light{background:var(--blue-light);box-shadow:0 6px 28px var(--blue-light-glow)}
.checkout-result__icon--muted{background:var(--surface);color:var(--muted);box-shadow:none}
.checkout-result__title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,4vw,2.4rem);letter-spacing:-.05em;margin:.5rem 0 .75rem;color:var(--ink)}
.checkout-result__body{font-size:1rem;color:var(--mid);max-width:480px;margin:0 auto 2rem;line-height:1.65}
.checkout-result__sub{font-size:.88rem;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  .checkout-pkg-tab,.checkout-billing-toggle__btn,.checkout-steps__num,
  .checkout-method-card,.checkout-plan-detail{transition:none;transform:none}
}

/* ── Subscription & payment status panel ─────────────────────────── */
.mi-sub-panel{
  max-width:min(1140px,92vw);margin:2.5rem auto 0;
  background:var(--ink-3);border:1px solid rgba(255,255,255,.06);border-radius:14px;
  padding:clamp(1.25rem,3vw,2rem);
  box-shadow:0 2px 8px rgba(0,0,0,.25),0 24px 64px rgba(0,0,0,.35);
}
.mi-sub-panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:1.25rem;
}
.mi-sub-panel__head .mi-dashboard-section__kicker{margin-bottom:0}
.mi-sub-panel__empty{color:rgba(255,255,255,.55);margin:0;font-size:.95rem}
.mi-sub-panel__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(1rem,2.5vw,1.75rem);
}
.mi-sub-panel__cell{display:flex;flex-direction:column;gap:.35rem}
.mi-sub-panel__label{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.mi-sub-panel__value{
  color:#fff;font-weight:700;font-size:1.05rem;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
.mi-sub-panel__meta{color:rgba(255,255,255,.5);font-size:.85rem}
.mi-sub-panel .mi-dashboard-notice{margin-bottom:1.25rem}
.mi-sub-panel__notice-link{
  color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;
  margin-left:.4rem;transition:opacity .2s;
}
.mi-sub-panel__notice-link:hover{opacity:.8}
.mi-sub-panel__notice-link:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px}
.mi-sub-panel__notice-link:active{opacity:.65}
.mi-sub-panel__history{margin-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);padding-top:1rem}

/* ── Dashboard: cancellation ──────────────────────────────── */
.mi-sub-panel__cancel{margin-top:1.25rem;border-top:1px solid rgba(255,255,255,.08);padding-top:1rem}
.mi-sub-panel__cancel summary{
  cursor:pointer;font-size:.85rem;color:rgba(255,255,255,.5);
  list-style:none;display:inline-flex;align-items:center;gap:.4rem;
  transition:color .2s var(--ease-out);
}
.mi-sub-panel__cancel summary::-webkit-details-marker{display:none}
.mi-sub-panel__cancel summary::before{content:'\2039';display:inline-block;transition:transform .2s var(--ease-out)}
.mi-sub-panel__cancel[open] summary::before{transform:rotate(-90deg)}
.mi-sub-panel__cancel summary:hover{color:rgba(255,255,255,.8)}
.mi-sub-panel__cancel summary:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px;border-radius:3px}
.mi-sub-panel__cancel-body{padding-top:.9rem;max-width:56ch}
.mi-sub-panel__cancel-body p{
  margin:0 0 .9rem;font-size:.85rem;line-height:1.7;color:rgba(255,255,255,.55);
}
.mi-sub-panel__cancel-body label{
  display:block;margin-bottom:.4rem;font-size:.8rem;color:rgba(255,255,255,.5);
}
.mi-sub-panel__cancel-body textarea{
  width:100%;padding:.6rem .75rem;border-radius:8px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  color:var(--white);font:inherit;font-size:.85rem;resize:vertical;
  transition:border-color .2s var(--ease-out);
}
.mi-sub-panel__cancel-body textarea:focus{
  outline:none;border-color:var(--blue-light);
}
.mi-sub-panel__cancel-btn{
  margin-top:.75rem;padding:.55rem 1.1rem;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.75);font:inherit;font-size:.85rem;font-weight:600;
  transition:transform .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out);
}
.mi-sub-panel__cancel-btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.5);color:var(--white)}
.mi-sub-panel__cancel-btn:active{transform:translateY(-1px)}
.mi-sub-panel__cancel-btn:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px}
.mi-sub-panel__cancel-state{
  margin:1.25rem 0 0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08);
  font-size:.85rem;line-height:1.7;color:rgba(255,255,255,.55);
}
@media (prefers-reduced-motion:reduce){
  .mi-sub-panel__cancel summary::before,
  .mi-sub-panel__cancel-btn{transition:none}
  .mi-sub-panel__cancel-btn:hover,
  .mi-sub-panel__cancel-btn:active{transform:none}
}
.mi-sub-panel__history summary{
  cursor:pointer;color:var(--blue-light);font-size:.85rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
.mi-sub-panel__history summary:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px}
.mi-sub-panel__history ul{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.mi-sub-panel__history li{
  display:grid;grid-template-columns:1fr 1.4fr auto auto;gap:1rem;align-items:center;
  background:var(--ink-2);border:1px solid rgba(255,255,255,.05);border-radius:8px;
  padding:.7rem 1rem;color:rgba(255,255,255,.75);font-size:.88rem;
}
@media (max-width:640px){
  .mi-sub-panel__history li{grid-template-columns:1fr auto;row-gap:.25rem}
}

/* Invoice links in payment history */
.mi-sub-panel__history li{grid-template-columns:1fr 1.4fr auto auto auto}
.mi-sub-panel__invoice-link{
  color:var(--blue-light);font-weight:700;font-size:.82rem;text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap;transition:opacity .2s;
}
.mi-sub-panel__invoice-link:hover{opacity:.8}
.mi-sub-panel__invoice-link:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px}
.mi-sub-panel__invoice-link:active{opacity:.65}

/* ── "The Platform" nav dropdown ─────────────────────────── */
.nav__dropdown-wrap{position:relative}
.nav__dropdown-toggle{
  background:none;border:0;cursor:pointer;font:inherit;padding:0;
  display:inline-flex;align-items:center;gap:.4rem;
}
.nav__dropdown-caret{transition:transform .2s cubic-bezier(.16,1,.3,1)}
.nav__dropdown-wrap.is-open .nav__dropdown-caret{transform:rotate(180deg)}
.nav__dropdown{
  list-style:none;margin:0;
  position:absolute;top:calc(100% + 1rem);left:50%;
  min-width:220px;padding:.5rem;
  background:var(--ink-2);border:1px solid rgba(255,255,255,.08);border-radius:10px;
  box-shadow:0 4px 18px rgba(0,0,0,.45),0 24px 48px rgba(0,106,182,.12);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,8px);
  transition:opacity .2s,transform .2s cubic-bezier(.16,1,.3,1);
  z-index:210;
}
.nav__dropdown::before{ /* hover bridge so the gap doesn't close it */
  content:'';position:absolute;left:0;right:0;top:-1rem;height:1rem;
}
.nav__dropdown-wrap.is-open .nav__dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,0);
}
.nav__dropdown li{border-bottom:none}
.nav__dropdown-link{
  display:block;padding:.6rem .9rem;border-radius:6px;
  color:rgba(255,255,255,.7);font-size:.88rem;font-weight:500;text-decoration:none;
  transition:color .2s,background-color .2s;
}
.nav__dropdown-link:hover{color:var(--white);background:rgba(0,145,213,.1)}
.nav__dropdown-link:focus-visible{outline:2px solid var(--blue-light);outline-offset:-2px}
.nav__dropdown-link:active{background:rgba(0,145,213,.16)}
@media (max-width:768px){
  .nav__dropdown-toggle{width:100%;display:flex;justify-content:space-between;padding:.6rem .25rem;font-size:1rem}
  .nav__dropdown{
    position:static;transform:none;min-width:0;
    background:transparent;border:none;box-shadow:none;
    padding:0 0 .5rem .9rem;
    display:none;opacity:1;visibility:visible;pointer-events:auto;
  }
  .nav__dropdown::before{display:none}
  .nav__dropdown-wrap.is-open .nav__dropdown{display:block;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .nav__dropdown,.nav__dropdown-caret{transition:none}
}

/* ── Reduced motion: global backstop ──────────────────────────
   The per-component blocks below cover the deliberate animations, but any
   rule added later would animate for a user who has asked the OS not to.
   This catches everything; component blocks stay for the cases that need a
   specific static fallback rather than a near-instant one. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── Legal pages (privacy / terms / refund) ───────────────── */
.legal{
  max-width:min(76ch,92vw);margin-inline:auto;
  font-size:1rem;line-height:1.75;color:var(--mid);
}
.legal__updated{
  margin:0 0 2rem;padding-bottom:1rem;
  border-bottom:1px solid var(--border);
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mid);
}
.legal__intro{
  font-size:1.08rem;line-height:1.75;color:var(--ink);
  margin:0 0 2.5rem;
}
.legal h2{
  font-family:var(--font-display),'Arial Narrow',sans-serif;
  font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin:2.75rem 0 .9rem;
}
.legal h3{
  font-size:1.02rem;font-weight:700;color:var(--ink);
  margin:1.75rem 0 .6rem;
}
.legal p{margin:0 0 1.1rem}
.legal ul,.legal ol{margin:0 0 1.3rem;padding-left:1.35rem}
.legal li{margin-bottom:.55rem}
.legal strong{color:var(--ink);font-weight:700}
.legal a{
  color:var(--blue);text-decoration:underline;text-underline-offset:2px;
  transition:color .2s var(--ease-out);
}
.legal a:hover{color:var(--blue-deep)}
.legal a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

/* Key-terms callout */
.legal__callout{
  margin:0 0 2.5rem;padding:1.15rem 1.4rem;
  background:var(--blue-dim);
  border-left:3px solid var(--blue);border-radius:0 10px 10px 0;
  color:var(--ink);line-height:1.7;
}

/* Unfilled placeholder — deliberately conspicuous so an unfinished policy
   cannot ship unnoticed. Remove the markers, not this rule. */
.legal__ph{
  background:#fff3cd;color:#7a5b00;
  padding:.05em .4em;border-radius:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88em;font-weight:600;
}

/* Footer legal links */
.footer__legal-links{display:flex;gap:1.25rem;flex-wrap:wrap}
.footer__legal-links a{
  font-size:.82rem;color:rgba(255,255,255,.55);text-decoration:none;
  transition:color .2s var(--ease-out);
}
.footer__legal-links a:hover{color:var(--white);text-decoration:underline}
.footer__legal-links a:focus-visible{
  outline:2px solid var(--blue-light);outline-offset:3px;border-radius:2px;
}