/* TACC refresh (13 Sep 2026): the cover, "the access corridor". Loaded after refresh-identity.css. Owner: hero agent.
   Landscape: the text lockup on the left, the globe on the right. Portrait: the globe above, the lockup below, the
   lower limb of the globe sinking into the night behind the eyebrow. hero.js fits the globe to .hero__globe
   using the --g-* properties below: --g-fw / --g-fh cap the radius as a fraction of the slot width / height; --g-x is
   the centre across the slot; --g-mode 0 centres it at --g-y, --g-mode 1 hangs it from the slot top with --g-head of
   the radius left clear above for the arcs. */

/* ---------- scene ---------- */
.hero--corridor{justify-content:flex-start}
/* poster (no JS, and the moment before the first frame): the scene rendered at 393x660 (800, portrait) and at
   1280x800 / 1920x1080 (landscape); hero.js fades the live canvas in over it */
.hero--corridor .hero__art{background-color:var(--abyss);background-position:center top}
@media (min-width:701px){.hero--corridor .hero__art{background-position:center}}
/* portrait tablets take the landscape poster; show its empty half (the preloaded file is used, no mis-scaled globe) */
@media (min-width:701px) and (orientation:portrait){.hero--corridor .hero__art{background-position:0 0}}
.hero__cv{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s ease}
.hero__cv.is-live{opacity:1}
.hero--corridor .hero__shade{background:linear-gradient(0deg,rgba(10,16,23,.92) 0%,rgba(10,16,23,0) 15%)}

/* office labels (created by hero.js; positioned per frame) */
.hero__pin{position:absolute;left:0;top:0;opacity:0;pointer-events:none;will-change:transform}
.hero__pin-in{display:flex;flex-direction:column;align-items:flex-start;gap:5px;transform:translateY(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:.62rem;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark);
  text-shadow:0 0 2px var(--abyss),0 0 5px var(--abyss),0 0 10px var(--abyss),0 0 18px rgba(10,16,23,.9)}
.hero__pin.is-l .hero__pin-in{align-items:flex-end;transform:translate(-100%,-50%)}
.hero__pin-t{color:var(--sand-lt);letter-spacing:.14em}
.hero__pin-t:empty{display:none}

/* ---------- composition: portrait first ---------- */
.hero__stage{position:relative;flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(120px,1fr) auto;grid-template-rows:minmax(min(150px,20svh),1fr) auto;padding-top:var(--hdr-h)}
.hero__globe{grid-row:1;min-height:0;--g-mode:1;--g-fw:.54;--g-fh:.62;--g-x:.5;--g-head:.2;--g-fade:1}
@media (min-width:600px){.hero__globe{--g-fw:.5;--g-fh:.54}}
.hero--corridor .hero__body{grid-row:2;align-self:end;padding:0;max-width:44rem;isolation:isolate}
/* a soft night scrim behind the lockup, so the lower limb of the globe never competes with the type */
.hero--corridor .hero__body::before{content:"";position:absolute;z-index:-1;inset:-16% -14% -8% -14%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(10,16,23,.86),rgba(10,16,23,.62) 55%,rgba(10,16,23,0))}

@media (orientation:landscape) and (min-width:640px){
  .hero__stage{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);grid-template-rows:minmax(0,1fr)}
  .hero--corridor .hero__body{grid-column:1;grid-row:1;align-self:center;padding-block:clamp(20px,5vh,56px) clamp(12px,3vh,32px)}
  .hero__globe{grid-column:2;grid-row:1;align-self:stretch;--g-mode:0;--g-fw:.6;--g-fh:.52;--g-x:.54;--g-y:.56;--g-fade:0}
  .hero--corridor .hero__body::before{inset:-6% -10% -6% -30%}
  .hero--corridor .hero__shade{background:linear-gradient(90deg,rgba(10,16,23,.6) 0%,rgba(10,16,23,0) 40%),linear-gradient(0deg,rgba(10,16,23,.9) 0%,rgba(10,16,23,0) 14%)}
}
/* narrower landscape (small laptops, iPad landscape): the globe stays whole so both offices keep their labels */
@media (orientation:landscape) and (min-width:640px) and (max-width:1199px){
  .hero__globe{--g-fw:.53;--g-x:.5}
}

/* ---------- lockup ---------- */
/* the eyebrow is led by a gold rule (the TACC kicker), not the diamond */
.hero--corridor .eyebrow{gap:14px;margin-bottom:clamp(14px,2.4vh,28px)}
.hero--corridor .eyebrow__mark{width:34px;height:1px;border:0;transform:none;background:var(--sand-lt)}

/* weight, tracking and the italic's colour come from refresh-identity.css; the cover sets size and the step */
.hero--corridor .hero__title{font-size:clamp(2.45rem,10.2vw,4.6rem);line-height:1;margin-left:-.04em}
/* the second line steps in: the lockup leans toward the corridor */
.hero--corridor .hl--it{padding-left:.9em}

.hero--corridor .hero__lead{max-width:40ch;margin-top:clamp(14px,2.4vh,28px);font-size:clamp(.95rem,1.1vw,1.1rem);line-height:1.6;color:#C2CFDC}

/* the three strategies as an index between hairlines, not pills */
.hero--corridor .hero__areas ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(18px,3.2vh,38px);max-width:35rem;
  border-top:1px solid rgba(215,225,236,.2);border-bottom:1px solid rgba(215,225,236,.08)}
.hero--corridor .hero__areas li{min-width:0;display:flex}
.hero--corridor .chip{position:relative;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:14px 26px 14px 0;
  border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  font-size:.92rem;line-height:1.25;letter-spacing:0;white-space:normal;color:var(--on-dark);transition:color .4s}
.hero--corridor li + li .chip{padding-left:16px;border-left:1px solid rgba(215,225,236,.12)}
.hero--corridor .chip::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--sand-lt);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.hero--corridor .chip::after{content:"";position:absolute;right:10px;top:16px;width:9px;height:9px;background-color:var(--on-dark-3);
  -webkit-mask:var(--arrow-ne) center/contain no-repeat;mask:var(--arrow-ne) center/contain no-repeat;transform:rotate(90deg);transition:background-color .4s,transform .5s var(--ease)}
.hero--corridor .chip:hover,.hero--corridor .chip:focus-visible{border-color:rgba(215,225,236,.12);background:none;color:#fff}
.hero--corridor .chip:hover::before,.hero--corridor .chip:focus-visible::before{transform:scaleX(1)}
.hero--corridor .chip:hover::after,.hero--corridor .chip:focus-visible::after{background-color:var(--sand-lt);transform:translateY(3px) rotate(90deg)}
.hero--corridor .chip__n,.hero--corridor .chip:hover .chip__n,.hero--corridor .chip:focus-visible .chip__n{display:block;width:auto;height:auto;border:0;border-radius:0;background:none;
  font-family:var(--mono);font-size:.62rem;line-height:1;letter-spacing:.16em;color:var(--sand-lt)}
.hero--corridor .chip__t{display:block}

/* foot: the scroll cue and the bearing */
.hero--corridor .hero__foot{padding-bottom:clamp(12px,2.4vh,22px)}
.hero--corridor .scrollcue__track{height:clamp(28px,4.6vh,44px)}

/* ---------- phones ---------- */
@media (max-width:640px){
  .hero--corridor .hero__areas li{flex:1}
  .hero--corridor .chip{padding:12px 18px 12px 0;font-size:.84rem;gap:7px}
  .hero--corridor li + li .chip{padding-left:12px}
  .hero--corridor .chip::after{right:6px;top:13px;width:8px;height:8px}
  .hero--corridor .chip__n{font-size:.58rem}
}
/* phones: the eyebrow stays on one line at 390 (operator, 12 Sep 2026); below that "New York · Seoul" wraps as a unit */
@media (max-width:440px){
  .hero--corridor .eyebrow{gap:9px;letter-spacing:.085em}
  .hero--corridor .eyebrow__mark{width:15px}
  .hero--corridor .hl--it{padding-left:.55em}
  .hero--corridor .hero__lead{font-size:.93rem;line-height:1.56}
}
@media (max-width:380px){.hero--corridor .eyebrow{letter-spacing:.068em;gap:8px}.hero--corridor .eyebrow__mark{width:13px}}
@media (max-width:360px){
  .hero--corridor .hero__title{font-size:2.2rem}
  .hero--corridor .hl--it{padding-left:.35em}
  .hero--corridor .chip{font-size:.78rem;padding-right:14px}
  .hero--corridor li + li .chip{padding-left:9px}
  .hero--corridor .chip::after{display:none}
}

/* landscape type scale */
@media (orientation:landscape) and (min-width:640px){
  .hero--corridor .hero__title{font-size:clamp(2.3rem,5.2vw,6.3rem)}
  .hero--corridor .hero__lead{max-width:44ch}
}
/* landscape phones: a wider text column and a tighter scale so the lockup fits the short screen */
@media (orientation:landscape) and (min-width:640px) and (max-height:500px){
  .hero__stage{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .hero__globe{--g-fh:.5}
  .hero--corridor .hero__body{padding-block:6px}
  .hero--corridor .eyebrow{margin-bottom:10px}
  .hero--corridor .hero__title{font-size:clamp(1.9rem,4.4vw,2.5rem)}
  .hero--corridor .hero__lead{margin-top:10px;font-size:.86rem;line-height:1.5;max-width:50ch}
  .hero--corridor .hero__areas ul{margin-top:12px}
  .hero--corridor .chip{padding-block:9px;gap:5px}
  .hero--corridor .scrollcue__track{height:22px}
}