/* Shared base for all three renderings */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

/* =========================================================
   WORDPRESS WRAPPER OVERRIDES
   Neutralize theme padding, max-width, block-gap, and the
   ivory page background that shows between our sections.
   ========================================================= */
body.page,
body.home{ background:#0D0D0D !important; }

.wp-site-blocks,
.wp-site-blocks main,
.wp-block-post-content,
.wp-block-group,
.entry-content,
.is-layout-constrained,
.is-layout-flow,
.wp-block-html{
  margin:0 !important;
  padding:0 !important;
  max-width:none !important;
  width:100% !important;
}
/* Kill the vertical gap WP inserts between sibling blocks */
.wp-block-post-content > *,
.entry-content > *,
.is-layout-constrained > *,
.is-layout-flow > *,
.wp-block-group > *{
  margin-block-start:0 !important;
  margin-block-end:0 !important;
  max-width:none !important;
}
/* Hide theme header/footer if it pokes through (we ship our own footer) */
.wp-block-template-part[data-type="wp_template_part"][data-slug="footer"],
body.page footer.wp-block-template-part:not(.site-footer),
body.home footer.wp-block-template-part:not(.site-footer){
  display:none !important;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Avenir Next','Avenir','Nunito Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-feature-settings:"ss01","ss02","kern";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
  font-weight:450;
}
/* Bump body-copy weight site-wide for WP rendering (theme was inheriting too thin) */
p, li, blockquote, .sub, .reel-blurb, .speaker-side p, .opex-side p,
.thesis .copy, .work-card .body p, .article-card p, .archive p,
.metric .lbl, .footer-brand p{
  font-weight:500;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}

/* Tiny preview-only top bar */
.preview-bar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 20px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
}
.preview-bar a{text-decoration:none;opacity:.7}
.preview-bar a:hover{opacity:1}

/* Reveal on intersection */
.reveal{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition:none!important}
}
  :root{
    --ivory:#F2F2F2;
    --mist:#D9D9D9;
    --navy:#0F1B27;
    --taupe:#BFAFAF;
    --ink:#0D0D0D;
  }
  body{background:var(--ivory);color:var(--navy)}
  .preview-bar{background:rgba(242,242,242,.7);color:var(--navy);border-bottom:1px solid rgba(15,27,39,.08)}

  /* =========================================================
     HERO — light, centered wordmark + portrait floating on top
     ========================================================= */
  .hero{
    position:relative;
    min-height:clamp(460px, 58svh, 640px);
    padding:18px clamp(16px,5vw,80px) 0;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr;
    align-items:end;
    justify-items:center;
    text-align:center;
    background:
      radial-gradient(1100px 700px at 80% 25%, rgba(191,175,175,.28), transparent 60%),
      radial-gradient(900px 600px at 10% 90%, rgba(15,27,39,.06), transparent 60%),
      linear-gradient(180deg, #F7F5F2 0%, var(--ivory) 60%, #ECEAE5 100%);
  }
  .hero-stage{
    position:relative;
    width:100%;
    max-width:1280px;
    margin-inline:auto;
    display:grid;
    grid-template-columns:1fr;
    align-items:end;
    justify-items:center;
    isolation:isolate;
  }

  /* Luminous gradient wordmark — tall condensed display face */
  .wordmark{
    position:relative;
    grid-area:1/1;
    justify-self:center;
    width:100%;
    text-align:center;
    font-family:'Urbanist','Avenir Next','Avenir',ui-sans-serif,system-ui,sans-serif;
    line-height:.88;
    letter-spacing:-.03em;
    font-weight:100;
    font-size:clamp(72px,15.5vw,225px);
    margin:0;
    user-select:none;pointer-events:none;
    background:
      linear-gradient(
        110deg,
        rgba(15,27,39,.55) 0%,
        rgba(15,27,39,.32) 18%,
        rgba(191,175,175,.95) 38%,
        rgba(217,217,217,.85) 50%,
        rgba(191,175,175,.95) 62%,
        rgba(15,27,39,.32) 82%,
        rgba(15,27,39,.55) 100%
      );
    background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.4));
    animation:sheen 14s ease-in-out infinite;
  }
  .wordmark span{display:block}
  @keyframes sheen{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
  }

  /* Portrait floats centered over the wordmark */
  .hero-portrait{
    grid-area:1/1;
    justify-self:center;
    position:relative;
    z-index:2;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    pointer-events:none;
  }
  .hero-portrait img{
    width:min(68%, 680px);
    margin-inline:auto;
    display:block;
    filter:drop-shadow(0 40px 60px rgba(15,27,39,.22)) drop-shadow(0 2px 0 rgba(255,255,255,.4));
  }
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

  .hero-eyebrow{
    position:absolute;top:8px;left:50%;transform:translateX(-50%);
    font-size:11px;letter-spacing:.36em;text-transform:uppercase;
    color:var(--navy);opacity:.6;white-space:nowrap;
  }

  .scroll-cue{
    position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
    font-size:11px;letter-spacing:.3em;text-transform:uppercase;
    color:var(--navy);opacity:.55;display:flex;flex-direction:column;align-items:center;gap:10px;
  }
  .scroll-cue .line{width:1px;height:36px;background:linear-gradient(180deg,rgba(15,27,39,.5),transparent);animation:cue 2.2s ease-in-out infinite}
  @keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.01%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

  /* =========================================================
     INTRO BLOCK — DARK, sits flush against hero (hard cut)
     ========================================================= */
  .intro{
    padding:clamp(60px,8vw,120px) clamp(20px,5vw,80px) clamp(60px,8vw,120px);
    background:
      radial-gradient(900px 500px at 50% -10%, rgba(191,175,175,.18), transparent 60%),
      linear-gradient(180deg,#0a0f15 0%, #0D0D0D 100%);
    color:var(--ivory);
  }
  .intro-inner{
    max-width:1180px;margin:0 auto;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:clamp(30px,5vw,80px);
    align-items:center;
  }
  .intro-copy{display:flex;flex-direction:column;gap:14px}
  .intro-copy .sub{margin:6px 0 0}

  /* ---------- INTRO CAMERA ---------- */
  .intro-camera{
    position:relative;width:100%;
    aspect-ratio:7/5;
    display:flex;align-items:center;justify-content:center;
    perspective:1600px;
    perspective-origin:50% 55%;
    --p:0; /* scroll progress 0…1, set by JS */
  }
  /* Soft taupe halo behind camera */
  .intro-camera::before{
    content:"";position:absolute;inset:6% 8% auto 8%;height:70%;
    background:radial-gradient(closest-side, rgba(191,175,175,.32), transparent 70%);
    filter:blur(40px);
    opacity:calc(.7 + var(--p) * .2);
    pointer-events:none;
  }
  /* Ground shadow tightens as camera lifts */
  .intro-camera::after{
    content:"";position:absolute;left:18%;right:18%;bottom:10%;height:22px;
    background:radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 70%);
    filter:blur(12px);
    opacity:calc(.55 - var(--p) * .3);
    transform:scale(calc(1 - var(--p) * .25));
    pointer-events:none;
  }
  .camera-img{
    position:relative;
    z-index:1;
    width:min(100%, 660px);
    height:auto;
    transform-origin:50% 54%;
    will-change:transform, filter;
    filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
    transform:
      translate3d(calc((1 - var(--p)) * -42px), calc((1 - var(--p)) * 18px), 0)
      rotate(calc((1 - var(--p)) * -8deg))
      rotateX(calc((1 - var(--p)) * 5deg))
      scale(calc(1.04 - var(--p) * .04));
    transition:transform .12s linear;
  }
  /* Lens sheen — subtle highlight that travels across as you scroll */
  .lens-sheen{
    position:absolute;inset:0;pointer-events:none;z-index:2;
    background:radial-gradient(circle at calc(32% + var(--p) * 18%) 48%, rgba(191,175,175,.32), rgba(191,175,175,0) 18%);
    mix-blend-mode:screen;opacity:.55;
    transition:background .2s linear;
  }
  @media (prefers-reduced-motion: reduce){
    .camera-img{transform:none!important;transition:none!important}
    .intro-camera::after{transform:none!important;opacity:.5!important}
    .lens-sheen{opacity:.4}
  }

  .eyebrow{
    font-size:11px;letter-spacing:.34em;text-transform:uppercase;
    color:var(--taupe);opacity:.95;
    display:inline-block;
  }
  h1.display{
    font-size:clamp(32px,4.4vw,60px);
    line-height:1.06;letter-spacing:-.02em;
    font-weight:500;margin:18px 0 0;max-width:20ch;color:var(--ivory);
  }
  .sub{
    font-size:clamp(16px,1.25vw,19px);line-height:1.65;
    color:var(--ivory);opacity:.82;max-width:48ch;
  }
  .cta-row{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 22px;border-radius:999px;text-decoration:none;
    font-size:13px;letter-spacing:.08em;text-transform:uppercase;
    transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .btn-primary{background:var(--ivory);color:var(--ink)}
  .btn-primary:hover{background:#fff;transform:translateY(-1px);box-shadow:0 14px 30px rgba(191,175,175,.25)}
  .btn-ghost{background:transparent;color:var(--ivory);border:1px solid rgba(242,242,242,.3)}
  .btn-ghost:hover{border-color:var(--taupe);color:var(--taupe);transform:translateY(-1px);background:rgba(191,175,175,.08)}
  .arrow{transition:transform .25s ease}
  .btn:hover .arrow{transform:translateX(3px)}

  /* =========================================================
     METRICS — Cinematic Dark (Option B)
     ========================================================= */
  .metrics{
    padding:clamp(70px,9vw,130px) clamp(20px,5vw,80px);
    background:
      radial-gradient(1200px 380px at 50% -10%, rgba(191,175,175,.34), transparent 64%),
      linear-gradient(180deg, #f4f1ec 0%, #ece7df 100%);
    color:var(--ink);
    border-top:1px solid rgba(191,175,175,.28);
  }
  .metrics-grid{
    max-width:1280px;margin:0 auto;
    display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
  }
  .metric{
    padding:26px 22px;
    border:1px solid rgba(191,175,175,.36);
    background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.38));
    border-radius:14px;
    display:flex;flex-direction:column;align-items:center;
    text-align:center;
    box-shadow:0 10px 28px rgba(32,34,38,.08);
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .metric:hover{border-color:rgba(191,175,175,.72);transform:translateY(-3px);box-shadow:0 16px 34px rgba(32,34,38,.12)}
  .metric .num{
    width:100%;
    text-align:center;
    font-size:clamp(34px,3.6vw,54px);
    font-weight:500;letter-spacing:-.02em;line-height:1;
    font-variant-numeric:tabular-nums;
    background:linear-gradient(180deg,#2a2d33,#BFAFAF);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .metric .lbl{
    width:100%;
    margin-top:14px;font-size:12px;letter-spacing:.1em;
    color:#4f5560;opacity:.88;text-transform:uppercase;
    text-align:center;
  }

  /* =========================================================
     SPEAKER — dark stage with light beams
     ========================================================= */
  .speaker{
    position:relative;overflow:hidden;color:var(--ivory);
    padding:clamp(80px,11vw,180px) clamp(20px,5vw,80px);
    background:radial-gradient(900px 500px at 50% -10%, rgba(191,175,175,.25), transparent 60%), #0a0f15;
  }
  .beam{
    position:absolute;top:-20%;width:55%;height:140%;
    background:linear-gradient(180deg, rgba(191,175,175,.22), transparent 70%);
    filter:blur(34px);pointer-events:none;transform-origin:top center;opacity:0;
    transition:opacity 1.4s ease;
  }
  .beam.l{left:-15%;transform:rotate(15deg)}
  .beam.r{right:-15%;transform:rotate(-15deg)}
  .speaker.in .beam{opacity:1}
  .speaker-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}
  .speaker .eyebrow{color:var(--taupe);opacity:1}
  .speaker h2{font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.02em;margin:14px 0 18px;font-weight:500;max-width:18ch}
  .speaker p{font-size:17px;line-height:1.7;opacity:.82}
  .speaker .btn-ghost{color:var(--ivory);border-color:rgba(242,242,242,.3)}
  .speaker .btn-ghost:hover{border-color:var(--taupe);background:rgba(191,175,175,.12)}
  .speaker .card{
    aspect-ratio:16/11;border-radius:18px;position:relative;overflow:hidden;
    background:
      linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45)),
      radial-gradient(circle at 50% 40%, rgba(191,175,175,.32), transparent 60%),
      #131c26;
    border:1px solid rgba(242,242,242,.08);
    box-shadow:0 50px 80px rgba(0,0,0,.45);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
  }
  .speaker .card iframe{
    position:absolute;inset:0;border:0;width:100%;height:100%;z-index:5;
  }
  .speaker .card img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .8s ease,filter .8s ease,opacity .2s ease;
  }
  .speaker .card:hover img{transform:scale(1.03);filter:brightness(.95)}
  .speaker .card .glow{
    position:absolute;inset:-30%;
    background:radial-gradient(closest-side, rgba(191,175,175,.4), transparent 70%);
    opacity:.92;transition:opacity .8s ease;pointer-events:none;z-index:1;
  }
  .speaker .card .play-big{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
    width:84px;height:84px;border-radius:50%;
    background:rgba(255,255,255,.92);color:var(--ink);
    display:flex;align-items:center;justify-content:center;font-size:24px;
    box-shadow:0 22px 60px rgba(0,0,0,.45);
    transition:transform .3s ease, background .3s ease, opacity .2s ease;
    border:0;cursor:pointer;
  }
  .speaker .card:hover .play-big{transform:translate(-50%,-50%) scale(1.06);background:#fff}
  .speaker .card .close-lg{
    position:absolute;top:18px;right:18px;z-index:6;
    width:42px;height:42px;border-radius:50%;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(0,0,0,.56);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;line-height:1;cursor:pointer;
    opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, background .2s ease;
  }
  .speaker .card.is-playing .close-lg{opacity:1;pointer-events:auto}
  .speaker .card .close-lg:hover{transform:scale(1.06);background:rgba(0,0,0,.72)}
  .speaker .card .badge{
    position:absolute;left:18px;bottom:18px;z-index:4;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#fff;opacity:.85;
    background:rgba(0,0,0,.35);backdrop-filter:blur(8px);
    padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.15);
    pointer-events:none;
  }
  .speaker .card.is-playing img,
  .speaker .card.is-playing .play-big,
  .speaker .card.is-playing::after,
  .speaker .card.is-playing .badge,
  .speaker .card.is-playing .glow{opacity:0;pointer-events:none}
  .speaker .card::after{
    content:"NAED 2026 Mainstage";
    font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,242,242,.55);
    position:absolute;bottom:18px;left:22px;
    transition:opacity .2s ease;
  }

  /* =========================================================
     THESIS — Why my background matters in the AI era (DARK)
     ========================================================= */
  .thesis{
    padding:clamp(80px,10vw,160px) clamp(20px,5vw,80px);
    background:linear-gradient(180deg, #0F1B27 0%, #0A1520 100%);
    color:var(--ivory);
    border-top:1px solid rgba(242,242,242,.06);
  }
  .thesis-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,100px);align-items:start}
  .thesis h2{
    font-size:clamp(34px,4.4vw,62px);line-height:1.04;letter-spacing:-.02em;
    font-weight:500;margin:14px 0 0;max-width:16ch;color:var(--ivory);
  }
  .thesis .copy{margin-top:22px}
  .thesis-awards{
    position:relative;
    margin-top:-18px;
    margin-left:-18px;
    width:min(100%, 420px);
    z-index:2;
  }
  .thesis-awards::before{
    content:"";
    position:absolute;
    inset:-12% -10%;
    border-radius:24px;
    background:radial-gradient(circle at 50% 40%, rgba(255,216,130,.42), rgba(255,216,130,0) 72%);
    filter:blur(18px);
    opacity:.5;
    animation:trophyGlow 6.8s ease-in-out infinite;
    pointer-events:none;
  }
  .thesis-awards img{
    position:relative;
    z-index:1;
    width:100%;
    border-radius:0;
    border:none;
    box-shadow:none;
    filter:drop-shadow(0 18px 26px rgba(0,0,0,.34));
  }
  @keyframes trophyGlow{
    0%,100%{opacity:.38;transform:scale(1)}
    50%{opacity:.68;transform:scale(1.03)}
  }
  .thesis .copy p{font-size:17px;line-height:1.75;color:var(--ivory);opacity:.82;margin:0 0 18px;max-width:58ch}
  .thesis .copy em{color:var(--taupe);font-style:normal;font-weight:600;letter-spacing:.01em}
  .chain{
    margin:60px auto 0;max-width:1180px;
    display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:start;
    position:relative;
  }
  .chain::before{
    content:"";position:absolute;top:14px;left:6%;right:6%;height:1px;
    background:linear-gradient(90deg,transparent 0%,rgba(191,175,175,.6) 12%,rgba(191,175,175,.6) 88%,transparent 100%);
    transform:scaleX(1);transform-origin:left center;
    transition:transform 1.6s cubic-bezier(.2,.7,.2,1) .15s;
  }
  .thesis.in .chain::before{transform:scaleX(1)}
  .chain .node{position:relative;text-align:center;padding-top:34px;opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
  .thesis.in .chain .node{opacity:1;transform:none}
  .thesis.in .chain .node:nth-child(1){transition-delay:.30s}
  .thesis.in .chain .node:nth-child(2){transition-delay:.55s}
  .thesis.in .chain .node:nth-child(3){transition-delay:.80s}
  .thesis.in .chain .node:nth-child(4){transition-delay:1.05s}
  .thesis.in .chain .node:nth-child(5){transition-delay:1.30s}
  .chain .dot{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#fff 0%,#BFAFAF 65%,#0a0f15 100%);box-shadow:0 0 24px rgba(191,175,175,.55)}
  .chain .lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#f2f2f2;opacity:1;line-height:1.4;text-shadow:0 0 14px rgba(191,175,175,.28)}

  /* =========================================================
     REEL — See the Work in Motion (LIGHT)
     ========================================================= */
  .reel{
    padding:clamp(80px,10vw,160px) clamp(20px,5vw,80px);
    background:linear-gradient(180deg,#F7F5F2 0%,#ECEAE5 100%);
    color:var(--ink);
    position:relative;
  }
  .reel-head{max-width:1180px;margin:0 auto 48px;display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
  .reel .eyebrow{color:var(--navy);opacity:.85}
  .reel h2{font-size:clamp(34px,4.4vw,62px);line-height:1.04;letter-spacing:-.02em;font-weight:500;margin:14px 0 0;max-width:18ch}
  .reel .lede{font-size:16px;line-height:1.7;color:#3a3a3a;max-width:38ch;margin:0}
  .reel-card{
    position:relative;max-width:1180px;margin:0 auto;
    aspect-ratio:16/9;border-radius:22px;overflow:hidden;
    background:#111;
    box-shadow:0 50px 110px rgba(15,27,39,.25), 0 0 0 1px rgba(15,27,39,.04);
    cursor:pointer;
  }
  .reel-card iframe{
    position:absolute;inset:0;border:0;width:100%;height:100%;
  }
  .reel-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease,filter .8s ease}
  .reel-card:hover img{transform:scale(1.03);filter:brightness(.95)}
  .reel-card .glow{position:absolute;inset:-30%;background:radial-gradient(closest-side, rgba(191,175,175,.4), transparent 70%);opacity:0;transition:opacity .8s ease;pointer-events:none}
  .reel.in .reel-card .glow{opacity:1}
  .reel-card .play-big{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:96px;height:96px;border-radius:50%;
    background:rgba(255,255,255,.92);color:var(--ink);
    display:flex;align-items:center;justify-content:center;font-size:24px;
    box-shadow:0 22px 60px rgba(0,0,0,.45);
    transition:transform .3s ease, background .3s ease, opacity .2s ease;
    border:0;cursor:pointer;
  }
  .reel-card:hover .play-big{transform:translate(-50%,-50%) scale(1.06);background:#fff}
  .reel-card .close-lg{
    position:absolute;top:22px;right:22px;z-index:4;
    width:46px;height:46px;border-radius:50%;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(0,0,0,.56);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;line-height:1;cursor:pointer;
    opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, background .2s ease;
  }
  .reel-card.is-playing .close-lg{opacity:1;pointer-events:auto}
  .reel-card .close-lg:hover{transform:scale(1.06);background:rgba(0,0,0,.72)}
  .reel-card .badge{
    position:absolute;left:22px;bottom:22px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#fff;opacity:.85;
    background:rgba(0,0,0,.35);backdrop-filter:blur(8px);padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.15);
    pointer-events:none;
  }
  .reel-card.is-playing img,
  .reel-card.is-playing .play-big{opacity:0;pointer-events:none}

  /* =========================================================
     FEATURED WORK (LIGHT) — 4-card grid
     ========================================================= */
  .work{
    padding:clamp(80px,10vw,160px) clamp(20px,5vw,80px);
    background:var(--ivory);
    color:var(--ink);
  }
  .work-head{max-width:1180px;margin:0 auto 56px}
  .work .eyebrow{color:var(--navy);opacity:.85}
  .work h2{font-size:clamp(34px,4.4vw,62px);line-height:1.04;letter-spacing:-.02em;font-weight:500;margin:14px 0 0;max-width:20ch}
  .work-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
  .work-card{
    background:#fff;border-radius:18px;overflow:hidden;
    border:1px solid rgba(15,27,39,.08);
    box-shadow:0 4px 30px rgba(15,27,39,.04);
    transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
    display:flex;flex-direction:column;
  }
  .work-card:hover{transform:translateY(-4px);box-shadow:0 30px 80px rgba(15,27,39,.12);border-color:rgba(191,175,175,.5)}
  .work-card .thumb{
    aspect-ratio:16/10;position:relative;overflow:hidden;
    background:linear-gradient(135deg,#1a2433,#0a0f15);
  }
  .work-card .thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
  .work-card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .work-card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.45))}
  .work-card.is-playing .thumb img,
  .work-card.is-playing .thumb::after,
  .work-card.is-playing .play-sm{opacity:0;pointer-events:none}
  .work-card .close-sm{
    position:absolute;top:16px;right:16px;z-index:4;
    width:42px;height:42px;border-radius:50%;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(0,0,0,.56);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:18px;line-height:1;cursor:pointer;
    opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, background .2s ease;
  }
  .work-card.is-playing .close-sm{opacity:1;pointer-events:auto}
  .work-card .close-sm:hover{transform:scale(1.06);background:rgba(0,0,0,.72)}
  .work-card .label{
    position:absolute;top:16px;left:16px;z-index:2;
    font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#fff;opacity:.92;
    background:rgba(0,0,0,.4);backdrop-filter:blur(6px);padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  }
  .work-card .play-sm{
    position:absolute;bottom:16px;right:16px;z-index:2;
    width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--ink);
    display:flex;align-items:center;justify-content:center;font-size:14px;
    box-shadow:0 12px 30px rgba(0,0,0,.4);
    transition:transform .3s ease, opacity .2s ease;
    border:0;cursor:pointer;
  }
  .work-card:hover .play-sm{transform:scale(1.08)}
  .work-card .body{padding:26px 28px 30px}
  .work-card h3{font-size:clamp(20px,1.6vw,24px);line-height:1.25;letter-spacing:-.005em;font-weight:600;margin:0 0 12px;max-width:24ch}
  .work-card p{font-size:14.5px;line-height:1.65;color:#4a4a4a;margin:0 0 18px;max-width:60ch}
  .work-card .more{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-weight:600;background:none;border:0;padding:0;cursor:pointer}
  .work-card .more:hover{color:var(--taupe)}
  .work-card .more .arrow{transition:transform .25s ease}
  .work-card .more:hover .arrow{transform:translateX(3px)}

  /* Background social motif (decorative) */
  .work{position:relative;overflow:hidden}
  .work .social-drift{position:absolute;inset:0;pointer-events:none;opacity:.06;z-index:0}
  .work .social-drift svg{position:absolute;width:46px;height:46px}
  .work .social-drift svg:nth-child(1){top:8%;left:6%;animation:drift1 22s ease-in-out infinite}
  .work .social-drift svg:nth-child(2){top:18%;right:8%;animation:drift2 26s ease-in-out infinite}
  .work .social-drift svg:nth-child(3){bottom:14%;left:10%;animation:drift3 30s ease-in-out infinite}
  .work .social-drift svg:nth-child(4){bottom:22%;right:14%;animation:drift1 28s ease-in-out infinite reverse}
  @keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-25px)}}
  @keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-22px,18px)}}
  @keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(15px,22px)}}
  .work-head,.work-grid{position:relative;z-index:1}

  /* =========================================================
     OPERATING EXPERIENCE — dark block with right softbox
     ========================================================= */
  .opex{
    padding:clamp(80px,10vw,160px) clamp(20px,5vw,80px);
    background:
      radial-gradient(1100px 540px at 68% 0%, rgba(49,71,106,.34), transparent 62%),
      linear-gradient(180deg, #111927 0%, #0b111b 100%);
    color:var(--ivory);
  }
  .opex-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,90px);align-items:start}
  .opex .eyebrow{color:var(--taupe);opacity:.9}
  .opex h2{font-size:clamp(32px,4vw,54px);line-height:1.05;letter-spacing:-.02em;font-weight:500;margin:14px 0 22px;max-width:14ch;color:var(--ivory)}
  .opex p.lede{font-size:16.5px;line-height:1.7;color:rgba(242,242,242,.78);max-width:42ch;margin:0}
  .opex-side{position:relative;min-height:clamp(420px,42vw,640px);padding-right:clamp(184px,20vw,320px)}
  .softbox-visual{
    position:absolute;top:-220px;right:-232px;height:clamp(520px,62vw,900px);width:auto;aspect-ratio:auto;
    pointer-events:none;z-index:2;
    opacity:.34;
    transform:translateY(12px) scale(.99);
    transition:opacity .95s cubic-bezier(.22,.61,.36,1), transform .95s cubic-bezier(.22,.61,.36,1);
  }
  .softbox-visual::before{
    content:"";position:absolute;top:-18%;bottom:-14%;left:-72%;right:46%;
    background:radial-gradient(ellipse at 95% 50%, rgba(255,245,202,.62) 0%, rgba(255,245,202,.24) 40%, rgba(255,245,202,0) 80%);
    filter:blur(12px);
    opacity:.16;
    transition:opacity 1.15s ease .18s;
  }
  .softbox-visual img{
    width:auto;height:100%;object-fit:contain;display:block;position:relative;z-index:3;
    filter:brightness(.72) saturate(.92) drop-shadow(-10px 0 10px rgba(255,245,202,.14)) drop-shadow(-20px 0 24px rgba(255,245,202,.1));
    opacity:.74;
    transition:filter 1.1s ease, opacity 1.1s ease;
  }
  .opex.in .softbox-visual{opacity:1;transform:translateY(0) scale(1)}
  .opex.in .softbox-visual::before{opacity:.74}
  .opex.in .softbox-visual img{
    filter:brightness(1) saturate(1) drop-shadow(-18px 0 22px rgba(255,245,202,.58)) drop-shadow(-42px 0 56px rgba(255,245,202,.36));
    opacity:.95;
  }
  /* =========================================================
     REVIEWS — What Leaders and Learners Say (LIGHT)
     ========================================================= */
  .reviews{
    padding:clamp(80px,10vw,160px) clamp(20px,5vw,80px);
    background:var(--ivory);
    color:var(--ink);
  }
  .reviews-head{max-width:1180px;margin:0 auto 56px;text-align:center}
  .reviews .eyebrow{color:var(--navy);opacity:.85;justify-content:center}
  .reviews h2{font-size:clamp(34px,4.4vw,62px);line-height:1.04;letter-spacing:-.02em;font-weight:500;margin:14px auto 0;max-width:none;white-space:nowrap}
  .reviews-stars{
    margin:16px auto 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    position:relative;
  }
  .reviews-stars svg{
    width:22px;
    height:22px;
    stroke:#bfa58a;
    stroke-width:1.7;
    fill:rgba(191,165,138,.16);
    opacity:.45;
    transform:translateY(4px) scale(.92);
    filter:drop-shadow(0 0 0 rgba(255,220,160,0));
  }
  .reviews.in .reviews-stars svg{
    animation-name:reviewsStarOn,reviewsStarTwinkle;
    animation-duration:.85s,3.2s;
    animation-timing-function:cubic-bezier(.2,.7,.2,1),ease-in-out;
    animation-fill-mode:forwards,both;
    animation-iteration-count:1,infinite;
  }
  .reviews.in .reviews-stars svg:nth-child(1){animation-delay:.06s,1.04s}
  .reviews.in .reviews-stars svg:nth-child(2){animation-delay:.14s,1.12s}
  .reviews.in .reviews-stars svg:nth-child(3){animation-delay:.22s,1.20s}
  .reviews.in .reviews-stars svg:nth-child(4){animation-delay:.30s,1.28s}
  .reviews.in .reviews-stars svg:nth-child(5){animation-delay:.38s,1.36s}
  .reviews-stars .sparkle{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(245,222,166,.95);
    opacity:0;
    filter:drop-shadow(0 0 6px rgba(245,222,166,.9));
    transform:scale(.3);
    pointer-events:none;
  }
  .reviews-stars .sparkle.s1{top:-8px;left:8%}
  .reviews-stars .sparkle.s2{top:2px;right:14%}
  .reviews-stars .sparkle.s3{bottom:-5px;left:48%}
  .reviews.in .reviews-stars .sparkle{
    animation:reviewsSparkle 2.4s ease-in-out infinite;
  }
  .reviews.in .reviews-stars .sparkle.s1{animation-delay:1.1s}
  .reviews.in .reviews-stars .sparkle.s2{animation-delay:1.55s}
  .reviews.in .reviews-stars .sparkle.s3{animation-delay:2s}
  @keyframes reviewsStarOn{
    0%{
      opacity:.35;
      transform:translateY(4px) scale(.9);
      fill:rgba(191,165,138,.12);
      filter:drop-shadow(0 0 0 rgba(255,220,160,0));
    }
    68%{
      opacity:1;
      transform:translateY(-1px) scale(1.08);
      fill:rgba(255,231,169,.98);
      filter:drop-shadow(0 0 14px rgba(255,221,149,.78));
    }
    100%{
      opacity:1;
      transform:none;
      fill:rgba(244,214,139,.92);
      filter:drop-shadow(0 0 8px rgba(244,214,139,.55));
    }
  }
  @keyframes reviewsStarTwinkle{
    0%,100%{filter:drop-shadow(0 0 8px rgba(244,214,139,.52))}
    50%{filter:drop-shadow(0 0 14px rgba(255,229,171,.72))}
  }
  @keyframes reviewsSparkle{
    0%,100%{opacity:0;transform:scale(.2)}
    45%{opacity:.95;transform:scale(1)}
    70%{opacity:.32;transform:scale(.7)}
  }
  .reviews-wrap{max-width:1180px;margin:0 auto}
  .review-featured{
    background:linear-gradient(180deg,#fff,#fafaf8);
    border:1px solid rgba(15,27,39,.08);border-radius:22px;
    padding:clamp(36px,5vw,64px) clamp(28px,5vw,68px);
    box-shadow:0 30px 80px rgba(15,27,39,.06);
    margin-bottom:28px;position:relative;overflow:hidden;
  }
  .review-featured::before{
    content:"";font-family:'Italiana',serif;font-size:280px;line-height:1;
    position:absolute;top:-50px;left:24px;color:var(--taupe);opacity:.14;pointer-events:none;
  }
  .review-featured .tag{display:inline-block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--navy);background:rgba(15,27,39,.06);padding:7px 14px;border-radius:999px;margin-bottom:22px;font-weight:600}
  .review-featured blockquote{font-size:clamp(20px,2.2vw,30px);line-height:1.45;letter-spacing:-.005em;color:var(--ink);font-weight:500;margin:0 0 22px;max-width:60ch;position:relative}
  .review-featured cite{font-style:normal;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#666;font-weight:600}
  .review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .review-card{
    background:#fff;border:1px solid rgba(15,27,39,.08);border-radius:16px;
    padding:24px 24px 22px;
    display:flex;flex-direction:column;gap:14px;
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  .review-card:hover{transform:translateY(-3px);border-color:rgba(191,175,175,.5);box-shadow:0 22px 50px rgba(15,27,39,.08)}
  .review-card .tag{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--navy);opacity:.8;font-weight:600}
  .review-card blockquote{font-size:14.5px;line-height:1.6;color:#2a2a2a;margin:0;flex:1}
  .review-card cite{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#777;font-weight:600}
  .reviews .cta-row{justify-content:center;margin-top:44px}
  .reviews .btn-ghost{color:var(--navy);border:1px solid rgba(15,27,39,.18)}
  .reviews .btn-ghost:hover{border-color:var(--taupe);color:var(--taupe);background:rgba(191,175,175,.08)}

  /* =========================================================
     ARTICLES — Feature articles (LIGHT)
     ========================================================= */
  .articles{
    padding:clamp(80px,10vw,160px) clamp(20px,5vw,80px);
    background:#ECEAE5;
    color:var(--ink);
  }
  .articles-head{max-width:1180px;margin:0 auto 56px}
  .articles .eyebrow{color:var(--navy);opacity:.85}
  .articles h2{font-size:clamp(34px,4.4vw,62px);line-height:1.04;letter-spacing:-.02em;font-weight:500;margin:14px 0 18px;max-width:20ch}
  .articles .lede{font-size:16px;line-height:1.7;color:#3a3a3a;max-width:62ch;margin:0}
  .article-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
  .article-card{
    background:#fff;border:1px solid rgba(15,27,39,.08);border-radius:16px;
    padding:30px 28px 28px;
    display:flex;flex-direction:column;gap:18px;
    height:100%;
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    text-decoration:none;color:var(--ink);
  }
  .article-card:hover{transform:translateY(-3px);border-color:rgba(191,175,175,.5);box-shadow:0 22px 50px rgba(15,27,39,.08)}
  .article-card .meta{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--taupe);font-weight:700}
  .article-card h3{font-size:clamp(19px,1.5vw,22px);line-height:1.3;letter-spacing:-.005em;font-weight:600;margin:0;flex:1;min-height:4.1em}
  .article-card .read{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);font-weight:600;display:inline-flex;align-items:center;gap:8px}
  .article-card .read .arrow{transition:transform .25s ease}
  .article-card:hover .read .arrow{transform:translateX(3px)}
  .article-card:hover .read{color:var(--taupe)}

  /* =========================================================
     ARCHIVE — Final CTA (DARK gradient)
     ========================================================= */
  .archive{
    position:relative;overflow:hidden;
    padding:clamp(90px,12vw,180px) clamp(20px,5vw,80px);
    background:
      radial-gradient(1000px 600px at 50% 110%, rgba(191,175,175,.22), transparent 60%),
      linear-gradient(180deg,#0a0f15 0%, #0D0D0D 100%);
    color:var(--ivory);text-align:center;
  }
  .archive .eyebrow{color:var(--taupe);justify-content:center}
  .archive h2{font-size:clamp(36px,5vw,72px);line-height:1.04;letter-spacing:-.02em;font-weight:500;margin:18px auto 0;max-width:18ch}
  .archive p{font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:var(--ivory);opacity:.82;max-width:60ch;margin:22px auto 0}
  .archive .cta-row{justify-content:center;margin-top:40px}
  .archive .btn-primary{background:var(--ivory);color:var(--ink)}
  .archive .btn-primary:hover{background:#fff}
  .archive .btn-ghost{color:var(--ivory);border:1px solid rgba(242,242,242,.3)}
  .archive .btn-ghost:hover{border-color:var(--taupe);background:rgba(191,175,175,.1)}
  .archive .constellation{position:absolute;inset:0;pointer-events:none;opacity:.12}
  .archive .constellation svg{position:absolute}
  .archive .constellation svg:nth-child(1){top:18%;left:12%;width:36px;height:36px;animation:drift1 20s ease-in-out infinite}
  .archive .constellation svg:nth-child(2){top:24%;right:14%;width:32px;height:32px;animation:drift2 24s ease-in-out infinite}
  .archive .constellation svg:nth-child(3){bottom:22%;left:18%;width:30px;height:30px;animation:drift3 26s ease-in-out infinite}
  .archive .constellation svg:nth-child(4){bottom:28%;right:20%;width:34px;height:34px;animation:drift1 22s ease-in-out infinite reverse}

  /* =========================================================
     SITE FOOTER
     ========================================================= */
  .site-footer{
    background:#070A0F;color:var(--ivory);
    padding:clamp(50px,6vw,80px) clamp(20px,5vw,80px) 30px;
    border-top:1px solid rgba(242,242,242,.05);
  }
  .footer-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}
  .footer-brand .mark{font-family:'Urbanist',sans-serif;font-weight:200;font-size:28px;letter-spacing:-.02em;line-height:1}
  .footer-brand .tag{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);margin-top:14px}
  .footer-brand p{font-size:14px;line-height:1.65;color:var(--ivory);opacity:.6;max-width:42ch;margin:18px 0 0}
  .footer-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 36px;align-content:start}
  .footer-nav a{
    text-decoration:none;color:var(--ivory);opacity:.78;
    font-size:13px;letter-spacing:.04em;
    transition:color .25s ease, opacity .25s ease;
  }
  .footer-nav a:hover{opacity:1;color:var(--taupe)}
  .footer-bottom{max-width:1180px;margin:60px auto 0;padding-top:24px;border-top:1px solid rgba(242,242,242,.08);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
  .footer-bottom .copy{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory);opacity:.5}
  .footer-socials{display:flex;gap:12px}
  .footer-socials a{
    width:40px;height:40px;border-radius:50%;
    border:1px solid rgba(242,242,242,.15);
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--ivory);opacity:.75;text-decoration:none;
    transition:border-color .25s ease, color .25s ease, opacity .25s ease, background .25s ease;
  }
  .footer-socials a:hover{border-color:var(--taupe);color:var(--taupe);opacity:1;background:rgba(191,175,175,.08)}

  /* ============== RESPONSIVE ============== */
  @media (max-width: 1100px){
    .metrics-grid{grid-template-columns:repeat(3,1fr)}
    .work-grid{grid-template-columns:1fr}
    .review-grid{grid-template-columns:repeat(2,1fr)}
    .article-grid{grid-template-columns:1fr}
    .chain{grid-template-columns:repeat(5,1fr);gap:10px}
    .chain .lbl{font-size:10px;letter-spacing:.16em}
  }
  @media (max-width: 900px){
    .opex{padding:64px 16px 42px}
    .hero{padding:56px 10px 0}
    .hero{min-height:clamp(350px, 48svh, 510px);padding-top:4px;position:relative;z-index:1}
    .hero-stage{max-width:100%;place-items:end center}
    .wordmark{width:min(100%,96vw);text-align:center;justify-self:center;margin-inline:auto;font-size:clamp(50px,14.2vw,172px);letter-spacing:-.03em;line-height:.9;transform:none}
    .wordmark span{white-space:nowrap}
    .hero-portrait{justify-self:center;display:flex;justify-content:center;align-items:end;transform:none}
    .hero-portrait img{width:clamp(250px,68vw,620px);margin-inline:auto;transform:none}
    .intro{position:relative;z-index:2;margin-top:0}
    .intro-inner{grid-template-columns:1fr;gap:28px;align-items:start;text-align:left}
    .intro-camera{max-width:420px;margin:0 auto;order:2}
    .intro-copy{order:1}
    .speaker-inner{grid-template-columns:1fr}
    .hero-eyebrow{font-size:10px;letter-spacing:.28em;padding:0 12px;max-width:100%;white-space:normal;text-align:center}
    .thesis-inner,.opex-inner{grid-template-columns:1fr;gap:24px}
    .thesis .copy{margin-top:12px}
    .thesis-awards{width:min(100%, 460px);margin-top:-6px;margin-left:-8px}
    .opex-side{min-height:0;padding-right:0;padding-top:8px}
    .softbox-visual{position:relative;left:auto;bottom:auto;top:0;right:-34px;margin:0 0 18px auto;height:min(46vw,320px);max-height:320px;width:auto;z-index:0}
    .softbox-visual::before{top:-10%;bottom:-8%;left:-78%;right:58%;filter:blur(10px)}
    .opex.in .softbox-visual::before{opacity:.58}
    .chain{grid-template-columns:repeat(2,1fr);gap:24px}
    .chain::before{display:none}
    .chain .node{padding-top:8px}
    .chain .dot{position:static;display:block;margin:0 auto 10px}
    .reel-head{align-items:start}
  }
  @media (max-width: 640px){
    .opex{padding:56px 16px 34px}
    .metrics-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .hero{padding-bottom:0}
    .hero{min-height:clamp(260px, 34svh, 360px)}
    .wordmark{width:min(100%,97vw);font-size:clamp(42px,13.5vw,120px)}
    .intro{margin-top:0}
    .btn{padding:13px 18px;font-size:12px}
    .cta-row{width:100%}
    .cta-row .btn{flex:1 1 auto;justify-content:center}
    .review-grid{grid-template-columns:1fr}
    .reviews h2{white-space:normal;max-width:20ch}
    .softbox-visual{top:0;right:-22px;height:min(54vw,270px);max-height:270px;margin:0 0 14px auto}
    .footer-inner{grid-template-columns:1fr;gap:32px}
    .footer-nav{grid-template-columns:1fr}
    .review-featured blockquote{font-size:clamp(18px,4.6vw,22px)}
  }
  @media (max-width: 420px){
    .hero{min-height:240px}
    .wordmark{width:min(100%,98vw);font-size:clamp(36px,12.8vw,72px)}
    .hero-eyebrow{font-size:9px;letter-spacing:.22em}
  }