/* ============================================================
   TRANSWESTERN ONBOARDING MICROSITE — shared design system
   Brand hexes sampled from approved mockup artwork.
   ============================================================ */
@font-face{font-family:'Austin News Deck';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/austin-roman.woff2) format('woff2')}
@font-face{font-family:'Austin News Deck';font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/austin-italic.woff2) format('woff2')}
@font-face{font-family:'Austin News Deck';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/austin-semibold.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/archivo-regular.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/archivo-medium.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/archivo-semibold.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/archivo-bold.woff2) format('woff2')}

:root{
  --navy:#13182E; --navy-deep:#0F1425; --ink:#11182A;
  --cream:#F9F8F4; --mint:#D4E8E7; --mint-hi:#E2EEEE;
  --cyan:#83CFE1; --cyan-soft:#A9DDE2;
  --blue:#3A8BE4; --blue-link:#368BE7; --slate:#323850;
  --white:#FFFFFF; --body:#33415C;
  --serif:'Austin News Deck',Georgia,serif;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(24px,4.5vw,72px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--navy);color:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--cyan);color:var(--navy)}

/* ---------- motion primitives ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s);will-change:opacity,transform}
[data-reveal].in{opacity:1;transform:none}
[data-plx]{will-change:transform}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad);background:#0D1120;box-shadow:0 1px 0 rgba(131,207,225,.16);transition:background .4s,box-shadow .4s,padding .4s}
.nav.scrolled{background:rgba(11,15,28,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:14px var(--pad);box-shadow:0 1px 0 rgba(131,207,225,.18)}
.nav .brand img{height:38px;width:auto}
.nav ul{display:flex;gap:clamp(16px,2.6vw,42px);list-style:none;align-items:center}
.nav ul a{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);padding-bottom:8px;position:relative;transition:color .3s}
.nav ul a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.nav ul a:hover,.nav ul a.active{color:var(--cyan)}
.nav ul a:hover::after,.nav ul a.active::after{transform:scaleX(1)}
.nav .menu-btn{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav .menu-btn span{display:block;width:24px;height:2px;background:var(--white);margin:5px 0;transition:.3s}
@media(max-width:860px){
  .nav ul{position:fixed;inset:0;background:var(--navy-deep);flex-direction:column;justify-content:center;gap:34px;transform:translateY(-100%);transition:transform .45s cubic-bezier(.22,.61,.36,1)}
  .nav.open ul{transform:none}
  .nav ul a{font-size:16px}
  .nav .menu-btn{display:block;position:relative;z-index:5}
  .nav.open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.open .menu-btn span:nth-child(2){opacity:0}
  .nav.open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- shared blocks ---------- */
.section{padding:clamp(80px,10vw,140px) var(--pad)}
.wrap{max-width:1240px;margin:0 auto}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);margin-bottom:22px}
.light .eyebrow{color:var(--blue-link)}
h1,h2,h3{font-family:var(--serif);font-weight:400}
.display{font-size:clamp(64px,9.5vw,140px);line-height:.95;letter-spacing:-.01em;color:#FBF8F1}
.h2{font-size:clamp(34px,3.6vw,52px);line-height:1.15;color:#FBF8F1;margin-bottom:26px}
.light .h2{color:#132038}
.hl{background:linear-gradient(transparent 12%,var(--mint-hi) 12%,var(--mint-hi) 92%,transparent 92%);padding:0 .18em}
.sub{font-size:19px;font-weight:700;line-height:1.45;color:var(--cyan);max-width:34ch;margin-bottom:24px}
.light .sub{color:var(--blue-link)}
.body-copy{font-size:16.5px;line-height:1.8;color:rgba(255,255,255,.88);max-width:58ch}
.light .body-copy{color:var(--body)}
.light{background:var(--cream);color:var(--ink)}
.mint-bg{background:var(--mint);color:var(--ink)}
.slate-bg{background:var(--slate)}

/* ---------- photo placeholders ---------- */
.ph{position:relative;overflow:hidden;background:
  radial-gradient(560px 480px at 62% 42%,rgba(131,207,225,.25),transparent 62%),
  linear-gradient(210deg,#2A3554 0%,#1B2440 55%,var(--navy-deep) 100%)}
.ph .ph-tag{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;color:rgba(255,255,255,.5);text-align:center;padding:20px}
.ph .ph-tag svg{width:54px;opacity:.6}
.ph .ph-tag strong{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.ph .ph-tag em{font-style:normal;font-size:12px;max-width:34ch;color:rgba(255,255,255,.38)}
.ph.ph-light{background:radial-gradient(560px 480px at 62% 42%,rgba(58,139,228,.14),transparent 62%),linear-gradient(210deg,#E7E4DA 0%,#EFEDE5 60%,#E4E1D6 100%)}
.ph.ph-light .ph-tag{color:rgba(19,32,56,.45)}
.ph.ph-light .ph-tag em{color:rgba(19,32,56,.35)}

/* ---------- page hero (subpages) ---------- */
.page-hero{position:relative;padding:clamp(150px,19vw,240px) var(--pad) clamp(60px,7vw,100px);background:var(--navy);overflow:hidden}
.page-hero .display{font-size:clamp(52px,7.5vw,110px)}
.page-hero .lede{margin-top:28px;font-size:18px;line-height:1.75;color:rgba(255,255,255,.85);max-width:62ch}
.page-hero .rule{width:64px;height:3px;background:var(--cyan);margin-top:36px}

/* ---------- cards ---------- */
.grid{display:grid;gap:clamp(20px,2.4vw,32px)}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1020px){.grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}
.card{background:var(--white);padding:34px 30px;border-top:3px solid var(--cyan);box-shadow:0 2px 24px rgba(17,24,42,.06);transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(17,24,42,.12)}
.card h3{font-size:23px;color:#132038;margin-bottom:12px}
.card p{font-size:15px;line-height:1.7;color:var(--body)}
.card .num{font-family:var(--serif);font-size:44px;color:var(--blue-link);line-height:1;margin-bottom:14px}
.card.dark{background:#1A2140;border-top-color:var(--blue)}
.card.dark h3{color:#FBF8F1}
.card.dark p{color:rgba(255,255,255,.75)}

/* ---------- chips / stats ---------- */
.chip{display:inline-block;background:var(--ink);color:var(--cyan);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:8px 14px;margin-bottom:18px}
.stat .num{font-family:var(--serif);font-size:clamp(56px,6.2vw,96px);line-height:1;color:#11182A;letter-spacing:-.01em}
.stat .cap{font-family:var(--serif);font-size:clamp(20px,2vw,29px);color:#11182A;margin-top:8px}

/* ---------- quotes ---------- */
.quote{border-left:3px solid var(--cyan);padding-left:28px;max-width:60ch}
.quote p{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.2vw,28px);line-height:1.45;color:#FBF8F1}
.light .quote p{color:#132038}
.quote cite{display:block;font-style:normal;margin-top:18px;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--cyan)}
.light .quote cite{color:var(--blue-link)}
.quote cite span{display:block;font-weight:400;color:rgba(255,255,255,.6);margin-top:2px}
.light .quote cite span{color:var(--body)}

/* ---------- timeline ---------- */
.timeline{position:relative;margin-top:60px}
.timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--cyan),var(--blue))}
.t-item{position:relative;padding:0 0 46px 56px}
.t-item::before{content:"";position:absolute;left:3px;top:6px;width:18px;height:18px;border-radius:50%;background:var(--navy);border:3px solid var(--cyan)}
.t-item .year{font-family:var(--serif);font-size:30px;color:var(--cyan);line-height:1;margin-bottom:8px}
.t-item h3{font-size:21px;color:#FBF8F1;margin-bottom:8px}
.t-item p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.75);max-width:60ch}
@media(min-width:900px){
  .timeline::before{left:50%}
  .t-item{width:50%;padding:0 56px 64px 0;text-align:right}
  .t-item::before{left:auto;right:-9px}
  .t-item:nth-child(even){margin-left:50%;padding:0 0 64px 56px;text-align:left}
  .t-item:nth-child(even)::before{right:auto;left:-9px}
}

/* ---------- checklist ---------- */
.check{list-style:none;margin-top:8px}
.check li{position:relative;padding:14px 0 14px 44px;border-bottom:1px solid rgba(19,32,56,.1);font-size:16px;line-height:1.6;color:var(--body)}
.check li::before{content:"";position:absolute;left:0;top:18px;width:22px;height:22px;border-radius:50%;background:var(--mint);border:2px solid var(--blue-link)}
.check li::after{content:"";position:absolute;left:7px;top:24px;width:8px;height:5px;border-left:2px solid var(--blue-link);border-bottom:2px solid var(--blue-link);transform:rotate(-45deg)}
.check li strong{color:#132038}

/* ---------- map ---------- */
.map-wrap svg{width:100%;height:auto;overflow:visible}
.map-wrap .st{fill:var(--blue);stroke:var(--cream);stroke-width:1.6}
.office{fill:var(--cyan-soft);stroke:rgba(19,32,56,.28);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:dotpulse 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * .17s)}
@keyframes dotpulse{0%,100%{opacity:.95;transform:scale(1)}50%{opacity:.65;transform:scale(1.45)}}
@media (prefers-reduced-motion:reduce){.office{animation:none}}
.map-caption{margin-top:30px;font-size:15px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:#2A3A55;text-align:center}

/* ---------- CTA band ---------- */
.cta-band{background:var(--slate);text-align:center;padding:clamp(70px,8vw,110px) var(--pad)}
.cta-band h2{font-size:clamp(30px,3.4vw,48px);color:#F5F2E9;font-style:italic}
.cta-band .btns{margin-top:36px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:16px 30px;border:2px solid var(--cyan);color:var(--cyan);transition:background .3s,color .3s}
.btn:hover{background:var(--cyan);color:var(--navy)}
.btn.solid{background:var(--cyan);color:var(--navy)}
.btn.solid:hover{background:transparent;color:var(--cyan)}

/* ---------- footer ---------- */
footer{background:var(--navy-deep);padding:56px var(--pad) 40px}
footer .cols{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;align-items:flex-start}
footer .brand img{height:30px;width:auto}
footer .tag{font-size:14px;font-weight:600;color:var(--cyan);margin-top:16px}
footer nav ul{list-style:none;display:flex;gap:26px;flex-wrap:wrap}
footer nav a{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);transition:color .3s}
footer nav a:hover{color:var(--cyan)}
footer .fine{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:rgba(255,255,255,.45);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- motion pass 2 ---------- */
/* scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--cyan);transform:scaleX(0);transform-origin:left;z-index:60;pointer-events:none}

/* hero headline letter stagger */
[data-stagger]{white-space:nowrap}
[data-stagger] .ch{display:inline-block;opacity:0;transform:translateY(.55em) rotate(4deg);animation:chIn .7s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:calc(var(--ci) * 55ms)}
@keyframes chIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){[data-stagger]{white-space:nowrap}
[data-stagger] .ch{opacity:1;transform:none;animation:none}}

/* photo hover zoom (pillars) */
.pillar{overflow:hidden}
.pillar .ph{transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.pillar:hover .ph{transform:scale(1.05)}

/* map office dots: interactive */
.office{cursor:pointer;transition:r .2s}
.office:hover{fill:var(--cyan)}
.map-tip{position:fixed;z-index:70;background:var(--ink);color:var(--cyan);font-size:12px;font-weight:700;letter-spacing:.08em;padding:7px 12px;pointer-events:none;opacity:0;transform:translate(-50%,-140%) translateY(4px);transition:opacity .2s,transform .2s;white-space:nowrap}
.map-tip.show{opacity:1;transform:translate(-50%,-140%)}

/* skip link */
.skip{position:fixed;top:-60px;left:16px;z-index:99;background:var(--cyan);color:var(--navy);font-weight:700;font-size:13px;padding:10px 16px;transition:top .3s}
.skip:focus{top:12px}