/* ============================================================================
   JustinTime Growth — clean, minimal, scroll-told.
   Typography matches the Motivant scroll build: Geist, 600, -.032em.
   Every chapter swaps the palette below; elements transition into it.
   ========================================================================== */

:root{
  /* live chapter palette. app.js overwrites these as you scroll. */
  --c-bg:     #FBFAF7;
  --c-ink:    #14161A;
  --c-muted:  #7C818A;
  --c-accent: #A8432C;
  --c-rule:   #E2DED6;
  --c-panel:  #F3F0EA;

  --sans: "Geist", system-ui, -apple-system, BlinkMacSystemFont,
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Geist Mono", Menlo, Consolas, monospace;

  --dtrack: -.032em;
  --dweight: 600;

  --gut: clamp(20px, 5vw, 76px);
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --morph: .75s var(--ease);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color var(--morph), color var(--morph);
}

/* the ground sits behind everything and carries the chapter color */
.ground{
  position:fixed; inset:0; z-index:-1;
  background:var(--c-bg);
  transition:background-color var(--morph);
}

h1,h2,h3,h4{ margin:0; font-weight:var(--dweight); letter-spacing:var(--dtrack); }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.shell{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); width:100%; }
.shell--narrow{ max-width:840px; }

::selection{ background:var(--c-accent); color:var(--c-bg); }

/* ------------------------------------------------------------------- type */
.eyebrow, .kicker{
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-accent); margin:0 0 24px;
  transition:color var(--morph);
}

.sectitle{
  font-size:clamp(2.1rem, 5vw, 4rem);
  line-height:1.02; max-width:18ch;
}
.sectitle--sm{ font-size:clamp(1.7rem, 3.2vw, 2.5rem); }

.lede{
  margin-top:22px; max-width:54ch;
  font-size:clamp(1rem, 1.3vw, 1.16rem);
  line-height:1.62; color:var(--c-muted); font-weight:400;
  transition:color var(--morph);
}
.lede--sm{ font-size:1rem; }

.sechead{ margin-bottom:clamp(44px, 6vw, 80px); }
.sechead--tight{ margin-bottom:42px; }

.section{ padding-block:clamp(90px, 12vw, 180px); position:relative; }
.section--flush{ padding-bottom:clamp(70px, 9vw, 130px); overflow:hidden; }

/* --------------------------------------------------------------- progress */
.progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:130; pointer-events:none; }
.progress span{
  display:block; height:100%; width:0%;
  background:var(--c-accent); transition:width .1s linear, background-color var(--morph);
}

/* -------------------------------------------------------------------- nav */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; gap:24px;
  padding:15px var(--gut);
  background:color-mix(in srgb, var(--c-bg) 78%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transform:translateY(-102%);
  transition:transform .55s var(--ease-out),
             background-color var(--morph), border-color var(--morph), color var(--morph);
}
.nav.is-on{ transform:none; border-bottom-color:var(--c-rule); }

.nav__mark{ display:flex; align-items:center; gap:11px; }
.nav__monogram{
  width:29px; height:29px; flex:none; display:grid; place-items:center;
  border:1px solid currentColor; border-radius:8px;
  font-size:10.5px; font-weight:600; letter-spacing:.04em;
}
.nav__name{ font-size:15px; font-weight:500; letter-spacing:-.01em; }

.nav__now{
  margin-left:auto; margin-right:auto;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-muted); transition:color var(--morph), opacity .35s linear;
}
@media (max-width:760px){ .nav__now{ display:none; } .nav__mark{ margin-right:auto; } }

.nav__cta{
  font-size:13.5px; font-weight:500; padding:9px 18px; border-radius:100px;
  background:var(--c-ink); color:var(--c-bg);
  transition:background-color var(--morph), color var(--morph), transform .25s var(--ease);
}
.nav__cta:hover{ background:var(--c-accent); transform:translateY(-1px); }

/* ------------------------------------------------------------------- rail */
.rail{
  position:fixed; right:22px; top:50%; transform:translateY(-50%);
  z-index:110; display:grid; gap:14px;
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease);
}
.rail.is-on{ opacity:1; pointer-events:auto; }
.rail a{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-muted);
}
.rail__dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:currentColor; opacity:.32;
  transition:opacity .3s var(--ease), transform .3s var(--ease), background-color var(--morph);
}
.rail__lbl{
  opacity:0; transform:translateX(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  white-space:nowrap;
}
.rail a:hover .rail__lbl{ opacity:.75; transform:none; }
.rail a.is-active{ color:var(--c-accent); }
.rail a.is-active .rail__dot{ opacity:1; transform:scale(1.45); }
.rail a.is-active .rail__lbl{ opacity:1; transform:none; }
@media (max-width:1080px){ .rail{ display:none; } }

/* ----------------------------------------------------------------- tracks */
.track{ position:relative; }
.pin{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}

/* ------------------------------------------------------------------- hero */
.track--hero{ height:230vh; }
.pin--hero{ justify-content:center; }

.hero__title{
  font-size:clamp(2.9rem, 8.2vw, 7rem);
  line-height:.98; margin:0; max-width:15ch;
}
.hero__title .ln{ display:block; overflow:hidden; }
.hero__title .wd{ display:inline-block; transform:translateY(106%); opacity:0; }

.hero__sub{
  margin-top:34px; max-width:58ch;
  font-size:clamp(1rem, 1.4vw, 1.2rem);
  line-height:1.62; color:var(--c-muted);
  transition:color var(--morph);
}

.cue{
  position:absolute; bottom:40px;
  left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--maxw); padding-inline:var(--gut);
  display:flex; align-items:center; gap:13px;
  font-size:10.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--c-muted);
}
.cue em{ font-style:normal; }
.cue span{
  width:52px; height:1px; background:currentColor; opacity:.5;
  transform-origin:left; animation:cue 2.3s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{ transform:scaleX(.3); } 50%{ transform:scaleX(1); } }

/* ---------------------------------------------------------- chapter index */
.ix{ border-top:1px solid var(--c-rule); transition:border-color var(--morph); }
.ix__row{
  display:grid; grid-template-columns:52px 240px 1fr 116px;
  gap:clamp(14px,2.4vw,36px); align-items:center;
  padding-block:clamp(18px,2.2vw,26px);
  border-bottom:1px solid var(--c-rule);
  position:relative; isolation:isolate;
  transition:border-color var(--morph);
}
.ix__row::before{
  content:""; position:absolute; z-index:-1;
  inset:0 calc(var(--gut) * -.4);
  background:var(--ix-bg, transparent); border-radius:8px;
  opacity:0; transition:opacity .4s var(--ease);
}
.ix__row:hover::before{ opacity:1; }
.ix__row:hover .ix__org,
.ix__row:hover .ix__line,
.ix__row:hover .ix__yr{ color:var(--ix-ink, inherit); }
.ix__row:hover .ix__n{ color:var(--ix-accent, inherit); }

.ix__n{ font-family:var(--mono); font-size:11px; color:var(--c-accent); transition:color .35s var(--ease); }
.ix__org{ font-size:clamp(1.05rem,1.6vw,1.32rem); font-weight:var(--dweight); letter-spacing:var(--dtrack); transition:color .35s var(--ease); }
.ix__line{ font-size:14.5px; color:var(--c-muted); transition:color .35s var(--ease); }
.ix__yr{ font-family:var(--mono); font-size:11.5px; color:var(--c-muted); text-align:right; transition:color .35s var(--ease); }
@media (max-width:860px){
  .ix__row{ grid-template-columns:38px 1fr; row-gap:4px; }
  .ix__line{ grid-column:2; }
  .ix__yr{ grid-column:2; text-align:left; }
}

/* -------------------------------------------------------- chapter opening */
.track--open{ height:150vh; }
.pin--open{ align-items:center; justify-content:center; text-align:center; }

.open__n{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:var(--c-accent); margin-bottom:38px;
  transition:color var(--morph);
}
.open__logo{
  display:flex; align-items:center; justify-content:center;
  min-height:120px; margin-bottom:36px;
}
.open__thesis{
  font-size:clamp(1.6rem, 4.2vw, 3.2rem);
  font-weight:var(--dweight); letter-spacing:var(--dtrack);
  line-height:1.1; max-width:19ch; margin-inline:auto;
}
.open__meta{
  margin-top:30px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  font-size:13px; color:var(--c-muted); transition:color var(--morph);
}
.open__meta span::after{ content:"·"; margin-left:10px; opacity:.5; }
.open__meta span:last-child::after{ content:""; }

/* ------------------------------------------------------------- logo marks */
.mark img{ width:auto; object-fit:contain; }

.mark--verizon{
  font-size:clamp(38px,6vw,72px); font-weight:700; letter-spacing:-.035em;
  line-height:1; display:inline-flex; align-items:flex-start; gap:.04em;
}
.mark--verizon i{
  font-style:normal; color:#EE0000; font-size:.62em;
  transform:translateY(-.06em) skewX(-8deg); font-weight:700;
}

.mark--crx{ text-align:center; }
.mark--crx b{
  display:block; font-size:clamp(46px,7.4vw,88px); font-weight:600;
  letter-spacing:.02em; line-height:.9;
}
.mark--crx em{
  display:block; margin-top:14px; font-style:normal;
  font-size:13px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--c-muted);
}

.mark--type{
  font-size:clamp(30px,4.6vw,56px); font-weight:var(--dweight);
  line-height:1;
}

/* --------------------------------------------------------- chapter story  */
.pin--story{ justify-content:center; }

.story{
  display:grid; grid-template-columns:270px 1fr;
  gap:clamp(24px,5vw,80px);
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  width:100%; padding-top:64px; align-items:center;
}
.story__side{ position:relative; }
.story__logo{ display:flex; align-items:center; min-height:56px; margin-bottom:22px; }
.story__logo .mark--verizon{ font-size:30px; }
.story__logo .mark--crx b{ font-size:34px; }
.story__logo .mark--crx em{ font-size:9.5px; margin-top:8px; letter-spacing:.2em; }
.story__logo .mark--type{ font-size:24px; }
.story__org{ font-size:13px; color:var(--c-muted); line-height:1.5; transition:color var(--morph); }
.story__prog{
  margin-top:26px; height:2px; background:var(--c-rule); position:relative;
  overflow:hidden; transition:background-color var(--morph);
}
.story__prog span{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:var(--c-accent); transition:width .18s linear, background-color var(--morph);
}
.story__count{
  margin-top:11px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; color:var(--c-muted); transition:color var(--morph);
}

/* the scenes viewport */
.scenes{ position:relative; min-height:clamp(340px, 52vh, 460px); }
.scene{
  position:absolute; inset:0;
  opacity:0; transform:translateY(26px);
  transition:opacity .5s var(--ease), transform .6s var(--ease-out);
  pointer-events:none;
}
.scene.is-on{ opacity:1; transform:none; pointer-events:auto; }

.scene__lab{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--c-accent); margin-bottom:20px;
  transition:color var(--morph);
}
.scene__h{
  font-size:clamp(1.5rem, 3vw, 2.35rem); line-height:1.12;
  max-width:20ch; margin-bottom:20px;
}
.scene__p{
  font-size:clamp(1.02rem, 1.45vw, 1.24rem); line-height:1.62;
  max-width:56ch; color:var(--c-muted); transition:color var(--morph);
}
.scene--move .scene__p{
  font-size:clamp(1.2rem, 2.1vw, 1.7rem); line-height:1.42;
  color:var(--c-ink); max-width:30ch; font-weight:500; letter-spacing:-.015em;
}

.scene__metrics{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--c-rule); border:1px solid var(--c-rule); max-width:640px;
  transition:background-color var(--morph), border-color var(--morph); }
.metric{ background:var(--c-bg); padding:22px 24px; transition:background-color var(--morph); }
.metric__v{
  font-size:clamp(1.8rem,3.2vw,2.6rem); font-weight:var(--dweight);
  letter-spacing:-.03em; line-height:1; color:var(--c-accent);
  font-variant-numeric:tabular-nums; transition:color var(--morph);
}
.metric__l{ margin-top:9px; font-size:12.5px; line-height:1.4; color:var(--c-muted); transition:color var(--morph); }
.scene__note{
  margin-top:24px; font-size:13.5px; color:var(--c-muted);
  max-width:52ch; transition:color var(--morph);
}
@media (max-width:520px){ .scene__metrics{ grid-template-columns:1fr; } }

@media (max-width:900px){
  .story{ grid-template-columns:1fr; padding-top:56px; align-items:start; }
  .story__side{ display:flex; align-items:center; gap:16px; margin-bottom:8px; }
  .story__logo{ margin-bottom:0; min-height:0; }
  .story__prog, .story__count, .story__org{ display:none; }
  .scenes{ min-height:clamp(400px, 60vh, 520px); }
}

/* ------------------------------------------------------------ capabilities */
.skills{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--c-rule); border-left:1px solid var(--c-rule);
  transition:border-color var(--morph);
}
.skillgrp{
  border-right:1px solid var(--c-rule); border-bottom:1px solid var(--c-rule);
  padding:clamp(24px,3vw,38px); transition:background-color .35s var(--ease), border-color var(--morph);
}
.skillgrp:hover{ background:var(--c-panel); }
.skillgrp__n{
  font-size:1.28rem; padding-bottom:17px;
  border-bottom:1px solid var(--c-rule); transition:border-color var(--morph);
}
.skillgrp__list{ margin-top:19px; display:grid; gap:11px; }
.skillgrp__list li{
  font-size:14.5px; line-height:1.5; color:var(--c-muted);
  display:grid; grid-template-columns:auto 1fr; gap:11px;
  transition:color var(--morph);
}
.skillgrp__list li::before{
  content:""; width:11px; height:1px; background:var(--c-accent);
  margin-top:.72em; opacity:.6; transition:background-color var(--morph);
}
@media (max-width:960px){ .skills{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .skills{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------------ stack */
.marquees{ display:grid; gap:14px; }
.mq{ display:flex; overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.mq__inner{ display:flex; gap:14px; padding-right:14px; flex:none; animation:slide 46s linear infinite; }
.mq--rev .mq__inner{ animation-direction:reverse; }
.mq:hover .mq__inner{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }
.tool{
  flex:none; border:1px solid var(--c-rule); border-radius:100px;
  padding:10px 21px; font-size:14px; color:var(--c-muted); white-space:nowrap;
  transition:border-color var(--morph), color var(--morph);
}

/* ----------------------------------------------------------------- offers */
.offers{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:1080px){ .offers{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .offers{ grid-template-columns:1fr; } }

.offer{
  border:1px solid var(--c-rule); border-radius:14px;
  padding:clamp(22px,2.3vw,30px); display:flex; flex-direction:column;
  transition:border-color .3s var(--ease), transform .35s var(--ease),
             box-shadow .35s var(--ease), background-color var(--morph);
}
.offer:hover{ border-color:var(--c-ink); transform:translateY(-4px);
  box-shadow:0 18px 44px color-mix(in srgb, var(--c-ink) 9%, transparent); }
.offer--featured{ border-color:var(--c-accent); background:var(--c-panel); }

.offer__flag{
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-accent); margin-bottom:13px; min-height:1em; transition:color var(--morph);
}
.offer__n{ font-size:1.3rem; min-height:2.3em; }
.offer__p{ margin-top:14px; font-size:2.05rem; font-weight:var(--dweight);
  letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums; }
.offer__u{ margin-top:8px; font-size:12.5px; color:var(--c-muted); line-height:1.4; transition:color var(--morph); }
.offer__len{
  margin-top:13px; padding-top:13px; border-top:1px solid var(--c-rule);
  font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--c-muted); min-height:2.6em; transition:border-color var(--morph), color var(--morph);
}
.offer__b{ margin-top:14px; font-size:14.5px; line-height:1.55; color:var(--c-muted); transition:color var(--morph); }
.offer__inc{ margin-top:18px; display:grid; gap:9px; }
.offer__inc li{
  font-size:13.5px; line-height:1.45; color:var(--c-muted);
  display:grid; grid-template-columns:auto 1fr; gap:10px; transition:color var(--morph);
}
.offer__inc li::before{ content:""; width:8px; height:1px; background:var(--c-accent);
  margin-top:.68em; transition:background-color var(--morph); }

/* -------------------------------------------------------------------- fit */
.fit{
  margin-top:clamp(52px,7vw,88px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,70px);
  padding-top:clamp(38px,5vw,58px); border-top:1px solid var(--c-rule);
  transition:border-color var(--morph);
}
@media (max-width:760px){ .fit{ grid-template-columns:1fr; } }
.fit__h{ font-size:1.4rem; }
.fit__list{ margin-top:20px; display:grid; gap:12px; }
.fit__list li{
  font-size:15px; line-height:1.55; color:var(--c-muted);
  display:grid; grid-template-columns:auto 1fr; gap:12px; transition:color var(--morph);
}
.fit__list li::before{ font-family:var(--mono); font-size:13px; padding-top:.06em; }
.fit__list--yes li::before{ content:"+"; color:var(--c-accent); }
.fit__list--no li::before{ content:"\2013"; opacity:.6; }
.fitnote{ margin-top:32px; font-size:13.5px; color:var(--c-muted); max-width:62ch; transition:color var(--morph); }

/* ------------------------------------------------------------------ final */
.final{
  padding-block:clamp(96px,13vw,180px); text-align:center;
  border-top:1px solid var(--c-rule); transition:border-color var(--morph);
}
.final__title{ font-size:clamp(2.1rem,5.4vw,4rem); line-height:1.04; }
.final__lede{ margin:24px auto 0; max-width:50ch; font-size:1.04rem;
  line-height:1.62; color:var(--c-muted); transition:color var(--morph); }
.final__actions{ margin-top:40px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.final__note{ margin:42px auto 0; max-width:58ch; font-size:12.5px;
  line-height:1.6; color:var(--c-muted); opacity:.8; transition:color var(--morph); }

.btn{
  display:inline-flex; align-items:center; padding:14px 28px; border-radius:100px;
  font-size:15px; font-weight:500; border:1px solid transparent;
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.btn--lg{ padding:16px 34px; font-size:16px; }
.btn--solid{ background:var(--c-ink); color:var(--c-bg); }
.btn--solid:hover{ background:var(--c-accent); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--c-rule); color:var(--c-ink); }
.btn--ghost:hover{ border-color:var(--c-ink); transform:translateY(-2px); }

/* ----------------------------------------------------------------- footer */
.foot{ padding-block:42px; border-top:1px solid var(--c-rule); transition:border-color var(--morph); }
.foot__inner{ display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap; align-items:center; }
.foot__brand{ font-size:1.05rem; font-weight:var(--dweight); letter-spacing:var(--dtrack); }
.foot__entity{ margin-top:4px; font-size:12.5px; color:var(--c-muted); transition:color var(--morph); }
.foot__links{ display:flex; gap:20px; flex-wrap:wrap; }
.foot__links a{ font-size:13.5px; color:var(--c-muted); transition:color .25s var(--ease); }
.foot__links a:hover{ color:var(--c-accent); }

/* ----------------------------------------------------------------- reveal */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__title .wd{ transform:none; opacity:1; }
  .scene{ position:relative; opacity:1; transform:none; margin-bottom:52px; }
  .scenes{ min-height:0; }
  .pin{ position:relative; height:auto; padding-block:15vh; }
  .track{ height:auto !important; }
  .mq__inner{ animation:none; }
}

/* --------------------------------------------------------------- printing */
@media print{
  .nav,.rail,.progress,.cue,.marquees,.ground{ display:none; }
  .pin{ position:relative; height:auto; }
  .track{ height:auto !important; }
  .scene{ position:relative; opacity:1; transform:none; margin-bottom:26px; }
  .scenes{ min-height:0; }
  body{ font-size:11pt; background:#fff; color:#000; }
}

/* ============================================================================
   Opening sequence: portrait hero, brand bar, highlights
   ========================================================================== */

/* ---------------------------------------------------------- portrait hero */
.hero__grid{
  display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(28px,5vw,76px); align-items:center;
}
.hero__photo{ position:relative; }
.hero__grid--nophoto{ grid-template-columns:minmax(0,1fr); }
.hero__img,
.hero__photo.is-empty{
  width:100%; aspect-ratio:4/5; border-radius:20px; display:block;
}
.hero__img{ object-fit:cover; object-position:center 22%; }
.hero__photo.is-empty{
  display:grid; place-items:center; text-align:center;
  background:var(--c-panel); border:1px dashed var(--c-rule);
  transition:background-color var(--morph), border-color var(--morph);
}
.hero__ph b{
  display:block; font-size:2.6rem; font-weight:var(--dweight);
  letter-spacing:-.02em; color:var(--c-ink); opacity:.5;
}
.hero__ph em{
  display:block; margin-top:14px; font-style:normal;
  font-size:11px; font-weight:500; letter-spacing:.06em;
  line-height:1.6; color:var(--c-muted);
}

.hero__grid .hero__title{ font-size:clamp(2.3rem, 4.4vw, 4.2rem); max-width:16ch; }
.hero__byline{
  margin-top:20px; font-size:13.5px; font-weight:500;
  letter-spacing:.02em; color:var(--c-muted); transition:color var(--morph);
}
.hero__grid .hero__sub{ margin-top:16px; font-size:clamp(.98rem,1.15vw,1.08rem); max-width:52ch; }

@media (max-width:880px){
  .hero__grid{ grid-template-columns:1fr; gap:26px; }
  .hero__photo{ max-width:190px; }
  .hero__img, .hero__photo.is-empty{ aspect-ratio:1/1; border-radius:16px; }
  .hero__ph b{ font-size:1.7rem; }
  .hero__ph em{ display:none; }
}

/* ---------------------------------------------------------------- brand bar */
.brandbar{
  background:#0C0C0D; color:#fff;
  padding-block:clamp(28px,3.4vw,44px);
  overflow:hidden; position:relative;
}
.brandbar__k{
  max-width:var(--maxw); margin:0 auto 22px; padding-inline:var(--gut);
  font-size:10.5px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.42);
}
.brandbar .mq__inner{ gap:clamp(44px,6vw,88px); padding-right:clamp(44px,6vw,88px); animation-duration:38s; }
.brandbar__item{
  flex:none; display:flex; align-items:center; height:52px;
  opacity:.82; transition:opacity .3s var(--ease);
}
.brandbar__item:hover{ opacity:1; }
.brandbar__item .mark--verizon{ font-size:26px; color:#fff; }
.brandbar__item img{ width:auto; }

/* ---------------------------------------------------------------- highlights */
.hl{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--c-rule); border:1px solid var(--c-rule);
  transition:background-color var(--morph), border-color var(--morph);
}
.hlcard{
  background:var(--c-bg); padding:clamp(20px,2.2vw,28px);
  display:flex; flex-direction:column;
  transition:background-color var(--morph);
}
.hlcard__v{
  font-size:clamp(1.7rem,2.9vw,2.5rem); font-weight:var(--dweight);
  letter-spacing:-.035em; line-height:1; color:var(--c-accent);
  font-variant-numeric:tabular-nums; transition:color var(--morph);
}
.hlcard__l{
  margin-top:11px; font-size:13.5px; line-height:1.45;
  color:var(--c-ink); flex:1; transition:color var(--morph);
}
.hlcard__o{
  margin-top:16px; font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--c-muted);
  transition:color var(--morph);
}
@media (max-width:1000px){ .hl{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .hl{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px){ .hl{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion: reduce){
  .brandbar .mq__inner{ animation:none; flex-wrap:wrap; }
}