/* ============================================================
   hero.css — navy hero with rotating disciplines
   Loaded AFTER style.css, so these rules win where they overlap.
   Uses the same tokens as style.css. Prefixes: hb- and rot-.
   To remove the hero entirely: delete this file, delete js/hero.js,
   remove their two tags from index.html, and restore the old
   <header class="site-hero"> block.
   ============================================================ */

/* ---------- hero shell ---------- */
.hero-b{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:min(90vh,860px);
  padding:118px 0 96px;
  background:var(--navy);
  color:var(--paper);
}
.hero-b .wrap{position:relative;z-index:2}

/* ---------- ambient aurora ---------- */
.hero-b .hb-field{position:absolute;inset:-25% -12%;z-index:0;pointer-events:none}
.hero-b .hb-field span{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform}
.hero-b .hb-field .b1{
  width:70vw;height:62vw;max-width:1000px;max-height:900px;
  top:-18%;right:-12%;opacity:.9;
  background:radial-gradient(circle at 42% 42%,rgba(26,26,230,.85),rgba(26,26,230,0) 66%);
  animation:hbDriftA 26s ease-in-out infinite;
}
.hero-b .hb-field .b2{
  width:52vw;height:52vw;max-width:760px;max-height:760px;
  bottom:-26%;left:-14%;opacity:.8;
  background:radial-gradient(circle at 55% 45%,rgba(127,223,204,.55),rgba(127,223,204,0) 68%);
  animation:hbDriftB 34s ease-in-out infinite;
}
.hero-b .hb-field .b3{
  width:34vw;height:34vw;max-width:500px;max-height:500px;
  top:32%;left:36%;opacity:.55;
  background:radial-gradient(circle at 50% 50%,rgba(16,16,158,.75),rgba(16,16,158,0) 70%);
  animation:hbDriftC 30s ease-in-out infinite;
}
@keyframes hbDriftA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-4%,4%,0) scale(1.08)}}
@keyframes hbDriftB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5%,-3%,0) scale(1.1)}}
@keyframes hbDriftC{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6%,-5%,0) scale(1.14)}}

/* ---------- type ---------- */
.hero-b .hb-eyebrow{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mid);
  display:flex;align-items:center;gap:10px;margin-bottom:26px;
}
.hero-b .hb-dot{width:7px;height:7px;border-radius:50%;background:var(--mid);flex:none}

.hero-b h1{
  font-family:var(--disp);font-weight:850;font-stretch:118%;
  font-size:clamp(32px,4.5vw,58px);line-height:1.04;letter-spacing:-.025em;
  color:var(--paper);max-width:25ch;margin-bottom:30px;
}
/* the second sentence starts its own line, and "Ask me about" stays glued to
   the brackets so the rotating word can never fall to the line below */
.hero-b h1 .hb-break{display:none}
@media (min-width:901px){
  .hero-b h1 .hb-break{display:block}
  .hero-b h1 .hb-ask{white-space:nowrap}
}

/* teal emphasis, and no mint sweep behind it on the dark ground */
.hero-b h1 em{
  font-style:normal;color:var(--mid);
  background-image:none;background-size:0 0;
}

/* ---------- rotator: brackets and word, one teal ---------- */
.rot{display:inline-flex;align-items:baseline;white-space:nowrap}
.rot .brk{font-family:var(--mono);font-weight:400;color:var(--mid);opacity:.5}
.rot-track{
  position:relative;display:inline-block;
  height:1.04em;line-height:1.04;margin:0 .08em;
  transition:width .62s cubic-bezier(.22,1.16,.36,1);
  will-change:width;
}
.rot-track::before{content:"\200B"}   /* keeps a real text baseline for the brackets */
.rot-track::after{
  content:"";position:absolute;left:-.06em;right:-.06em;bottom:.06em;height:.2em;
  background:rgba(127,223,204,.22);border-radius:99px;z-index:-1;
  transform-origin:left center;animation:hbCushion 3s ease-in-out infinite;
}
@keyframes hbCushion{0%,100%{transform:scaleY(1);opacity:.85}50%{transform:scaleY(1.35);opacity:1}}
.rot-word{
  position:absolute;left:0;top:0;line-height:1.04;white-space:nowrap;
  color:var(--mid);opacity:0;
  transform:translate3d(0,.42em,0);filter:blur(5px);
  transition:opacity .42s ease,transform .52s cubic-bezier(.22,1.16,.36,1),filter .42s ease;
}
.rot-word.in{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
.rot-word.out{opacity:0;transform:translate3d(0,-.42em,0);filter:blur(5px)}
.rot-measure{position:absolute;visibility:hidden;white-space:nowrap;pointer-events:none;top:-9999px;left:-9999px}

/* ---------- areas row ---------- */
.hero-b .hb-areas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px;list-style:none}
.hero-b .hb-areas li{margin:0}
.hero-b .hb-areas a{
  display:inline-flex;align-items:center;gap:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  color:rgba(250,250,248,.86);text-decoration:none;background:transparent;
  border:1px solid rgba(250,250,248,.22);border-radius:100px;
  padding:9px 15px;cursor:pointer;
  transition:background .35s ease,border-color .35s ease,color .35s ease,transform .2s ease;
}
/* the arrow appears on hover, so the pills read as links rather than toggles */
.hero-b .hb-areas a::after{
  content:"\2192";margin-left:0;max-width:0;opacity:0;overflow:hidden;
  transition:max-width .3s ease,margin-left .3s ease,opacity .3s ease;
}
.hero-b .hb-areas a:hover,
.hero-b .hb-areas a:focus-visible{border-color:var(--mid);color:var(--mid);transform:translateY(-1px)}
.hero-b .hb-areas a:hover::after,
.hero-b .hb-areas a:focus-visible::after{max-width:1.2em;margin-left:7px;opacity:1}
.hero-b .hb-areas a[aria-current="true"]{
  background:rgba(127,223,204,.16);border-color:var(--mid);color:var(--paper);
}
.hero-b .hb-areas a:focus-visible,
.hero-b .hb-cta:focus-visible,
.hero-b .hb-ghost:focus-visible{outline:2px solid var(--mid);outline-offset:3px}

/* ---------- support copy and actions ---------- */
.hero-b .hb-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero-b .hb-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-weight:600;font-size:15px;
  background:var(--mid);color:var(--navy);text-decoration:none;
  padding:14px 24px;border-radius:14px;
  transition:background .25s ease,transform .25s ease;
}
.hero-b .hb-cta:hover{background:var(--tint-deep);transform:translateY(-2px)}
.hero-b .hb-cta .arw{transition:transform .25s ease}
.hero-b .hb-cta:hover .arw{transform:translateX(4px)}
.hero-b .hb-ghost{
  font-family:var(--body);font-weight:500;font-size:15px;
  color:var(--tint);text-decoration:none;
  border-bottom:1px solid rgba(227,246,242,.35);padding-bottom:2px;
}
.hero-b .hb-ghost:hover{color:var(--mid);border-color:var(--mid)}

/* ---------- entrance stagger ---------- */
.hero-b .hb-up{opacity:0;transform:translateY(18px);animation:hbUp .8s cubic-bezier(.2,.7,.3,1) forwards}
.hero-b .hb-d1{animation-delay:.06s}
.hero-b .hb-d2{animation-delay:.18s}
.hero-b .hb-d3{animation-delay:.30s}
.hero-b .hb-d4{animation-delay:.42s}
.hero-b .hb-d5{animation-delay:.54s}
@keyframes hbUp{to{opacity:1;transform:none}}

.hb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the stats strip is also navy: hairline keeps them distinct ---------- */
.hero-b + .strip{border-top:1px solid rgba(250,250,248,.14)}

/* ---------- nav inversion while the dark hero sits under the nav ---------- */
nav.on-dark{
  background:rgba(10,10,92,.72);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom-color:rgba(250,250,248,.16);
  box-shadow:none;
}
nav.on-dark .logo img{filter:brightness(0) invert(1)}
nav.on-dark .nav-links a{color:var(--paper)}
nav.on-dark .nav-links a:hover,
nav.on-dark .nav-links a:focus-visible{color:var(--mid)}
nav.on-dark .nav-cta{border-color:var(--mid);color:var(--mid)}
nav.on-dark .nav-cta:hover{background:var(--mid);color:var(--navy)!important}
nav.on-dark .nav-toggle span{background:var(--paper)}

/* mobile dropdown has a paper background by default, which would hide
   white links, so it goes navy while the nav is on dark */
@media (max-width:640px){
  nav.on-dark .nav-links{background:rgba(10,10,92,.98);border-bottom-color:rgba(250,250,248,.16)}
  nav.on-dark .nav-links a:not(.nav-cta){border-bottom-color:rgba(250,250,248,.16)}
}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .hero-b{min-height:auto;padding:96px 0 76px}
}
@media (max-width:640px){
  .hero-b{padding:72px 0 60px}
  .hero-b .wrap{padding-left:40px;padding-right:40px}
  .hero-b h1{max-width:none;font-size:clamp(28px,7.4vw,40px)}
  .hero-b .hb-areas a{font-size:11px;padding:8px 13px}
  .hero-b .hb-field span{filter:blur(50px)}
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-b .hb-field span,
  .rot-track::after{animation:none}
  .hero-b .hb-up{opacity:1;transform:none;animation:none}
  .rot-word{opacity:0;transform:none;filter:none}
  .rot-word.in{opacity:1}
  .rot-word.out{opacity:0}
}

/* ============================================================
   Section backgrounds
   The scroll-driven body background in motion.js sets --page-bg from
   each [data-bg] section. Its observer needs 35% of a section visible,
   which a section taller than the viewport can never reach, so #work
   never claimed the background and the navy from the hero stayed put
   behind black type. Painting the two body-dependent sections directly
   fixes it for good. The fade still runs underneath, it just no longer
   has anything to get wrong.
   ============================================================ */
#work{background:var(--paper)}
/* .about is intentionally left alone: it's short enough that motion.js's
   scroll observer always catches its data-bg in time, so the soft 1.1s
   cross-fade to teal works correctly and doesn't need a hardcoded background. */

/* ============================================================
   Flagship card: cover image instead of brand tiles
   ============================================================ */
.flag-vis-img{padding:0;display:block;overflow:hidden;background:var(--navy)}
.flag-vis-img img{
  width:100%;height:100%;display:block;
  object-fit:cover;border-radius:0;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.flag:hover .flag-vis-img,
.flag:focus-visible .flag-vis-img{background:var(--navy)}
.flag:hover .flag-vis-img img,
.flag:focus-visible .flag-vis-img img{transform:scale(1.04)}
@media(max-width:900px){
  .flag-vis-img img{aspect-ratio:2/1;height:auto}
}
@media (prefers-reduced-motion:reduce){
  .flag-vis-img img{transition:none}
  .flag:hover .flag-vis-img img{transform:none}
}