@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300..800&display=swap");

:root{
  --navy:#010193;
  --cyan:#00a6ce;
  --magenta:#bd1c81;

  --bg:#07081a;
  --panel:rgba(255,255,255,.06);
  --panel-2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.14);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --muted-2:rgba(255,255,255,.60);

  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --radius-sm: 14px;
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    url("./assets/royal-background.png") center top / cover no-repeat,
    radial-gradient(1000px 700px at 15% 10%, rgba(0,166,206,.20), transparent 60%),
    radial-gradient(900px 700px at 85% 20%, rgba(189,28,129,.18), transparent 60%),
    radial-gradient(900px 700px at 50% 90%, rgba(1,1,147,.20), transparent 55%),
    linear-gradient(180deg, #06061a 0%, #06071c 40%, #050517 100%);
  font-family: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  line-height:1.5;
}

/* Decorative SheTech Elements overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.55;
  background-image:
    url("./assets/teal-sparkles.png"),
    url("./assets/royal-sparkles.png"),
    url("./assets/plus_signs.svg"),
    url("./assets/blue_dots_2.svg");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 480px auto, 520px auto, 520px auto, 520px auto;
  background-position:
    left -120px top 80px,
    right -160px top 240px,
    left -220px bottom -140px,
    right -220px bottom -120px;
  filter: saturate(1.05);
}

a{color:inherit}
img{max-width:100%; height:auto}

.container{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,.75);
  outline:2px solid rgba(255,255,255,.35);
  z-index:9999;
}

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

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.muted{color:var(--muted)}
.small{font-size:.92rem}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(6,6,26,.55);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.brand-mark{
  width:90px;
  height:90px;
  object-fit:contain;
}
.brand-text{
  font-weight:800;
  letter-spacing:.2px;
  font-size: 1.25rem;
}

@media (max-width: 560px){
  .brand-mark{width:42px; height:42px}
  .brand-text{font-size: 1.15rem}
}
.nav{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.nav a{
  text-decoration:none;
  color:var(--muted);
  padding:8px 10px;
  border-radius:12px;
}
.nav a:hover{color:var(--text); background:rgba(255,255,255,.06)}
.nav a:focus-visible{outline:2px solid rgba(0,166,206,.55); outline-offset:2px}

/* Hero */
.hero{
  padding: 54px 0 20px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items:stretch;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(0,166,206,.12);
  border:1px solid rgba(0,166,206,.25);
  color: rgba(255,255,255,.86);
  font-weight:600;
  margin: 0 0 14px;
}
h1{
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height:1.08;
  margin:0 0 14px;
}
.lead{
  color:var(--muted);
  font-size:1.05rem;
  margin:0 0 18px;
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 18px 0 18px;
}

.hero-config{margin-top:10px}
.config-card{
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
  box-shadow: var(--shadow);
}
.config-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-weight:700;
}
.config-help{
  margin:8px 0 10px;
  color:var(--muted);
  font-size:.95rem;
}
.config-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.config-note{margin:10px 0 0}

.hero-art{
  position:relative;
  min-height: 420px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 420px at 40% 20%, rgba(0,166,206,.18), transparent 55%),
    radial-gradient(560px 420px at 70% 70%, rgba(189,28,129,.16), transparent 55%),
    rgba(255,255,255,.03);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.hero-logo-wrap{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width: min(520px, calc(100% - 32px));
  display:flex;
  justify-content:center;
  z-index: 2;
  pointer-events:none;
}
.hero-logo-img{
  width: min(360px, 92%);
  height:auto;
  display:block;
}
.orb{
  position:absolute;
  border-radius:999px;
  filter: blur(2px);
  opacity:.9;
  z-index: 1;
}
.orb-1{
  width:260px; height:260px;
  left:-60px; top:-40px;
  background: radial-gradient(circle at 30% 30%, rgba(0,166,206,.85), rgba(0,166,206,.05) 68%, transparent 72%);
}
.orb-2{
  width:320px; height:320px;
  right:-110px; top:30px;
  background: radial-gradient(circle at 35% 35%, rgba(189,28,129,.75), rgba(189,28,129,.06) 70%, transparent 74%);
}
.orb-3{
  width:420px; height:420px;
  left:40px; bottom:-180px;
  background: radial-gradient(circle at 40% 40%, rgba(1,1,147,.65), rgba(1,1,147,.08) 70%, transparent 74%);
}
.hero-card{
  position:absolute;
  inset:auto 16px 16px 16px;
  z-index: 3;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(5,5,18,.50);
  backdrop-filter: blur(10px);
  overflow:hidden;
}
.hero-card--image .hero-card-body{padding:0}
.hero-card-logoRow{
  display:flex;
  justify-content:center;
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}
.hero-cover{
  display:block;
  width:100%;
  height: 260px;
  object-fit: cover;
  /* Bias slightly right toward the focal point; keep vertically centered in the hero panel. */
  object-position: 70% 50%;
}
.hero-card-top{
  display:flex;
  gap:8px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.dot{width:10px; height:10px; border-radius:999px}
.dot-magenta{background:rgba(189,28,129,.9)}
.dot-cyan{background:rgba(0,166,206,.9)}
.dot-navy{background:rgba(1,1,147,.9)}
.hero-card-body{padding:14px}
.kicker{
  margin:0 0 8px;
  color:var(--muted-2);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.8rem;
}
.big{
  margin:0 0 10px;
  font-weight:800;
  font-size:1.25rem;
}
.mini-list{
  margin:0;
  padding-left:18px;
  color:var(--muted);
}
.mini-list li{margin:6px 0}

/* Sections */
.section{padding: 46px 0}
.section-alt{
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
}
.section-head{margin-bottom:16px}
h2{margin:0 0 8px; font-size: clamp(1.5rem, 2.1vw, 2rem)}
h3{margin:0 0 8px; font-size:1.15rem}
p{margin:0 0 12px}

/* Inputs / Buttons */
.input, .select{
  width: min(520px, 100%);
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline:none;
}
.select{width:auto; min-width: 220px}
.input::placeholder{color: rgba(255,255,255,.55)}
.input:focus, .select:focus{border-color: rgba(0,166,206,.65); box-shadow: 0 0 0 4px rgba(0,166,206,.18)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 11px 14px;
  border-radius: 14px;
  border:1px solid transparent;
  text-decoration:none;
  font-weight:700;
  cursor:pointer;
  user-select:none;
}
.btn:focus-visible{outline:2px solid rgba(0,166,206,.60); outline-offset:2px}
.btn-primary{
  background: linear-gradient(135deg, rgba(0,166,206,.95), rgba(1,1,147,.90));
  border-color: rgba(0,166,206,.25);
}
.btn-primary:hover{filter: brightness(1.05)}
.btn-secondary{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}
.btn-secondary:hover{background: rgba(255,255,255,.14)}
.btn-tertiary{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
  color: var(--muted);
}
.btn-tertiary:hover{background: rgba(255,255,255,.08); color: var(--text)}
.btn-ghost{
  background: transparent;
  border-color: rgba(255,255,255,.18);
  color: var(--text);
}
.btn-ghost:hover{background: rgba(255,255,255,.06)}
.btn-sm{padding:9px 12px; border-radius: 12px; font-weight:750}

/* Career cards */
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin: 14px 0 18px;
}
.poster-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.poster-card{
  grid-column: span 4;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  background:
    url("./assets/background_3.png") center / cover no-repeat,
    linear-gradient(180deg, rgba(1,1,147,.78), rgba(6,6,26,.62));
}
.poster-head{
  padding: 18px 16px 12px;
  text-align:center;
}
.poster-head-small{
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: none;
  color: rgba(255,255,255,.90);
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
}
.poster-head-title{
  margin: 8px 0 0;
  font-weight: 1000;
  letter-spacing: .01em;
  text-transform: none;
  font-size: clamp(1.25rem, 1.9vw, 1.85rem);
  line-height: 1.06;
  text-shadow: 0 10px 35px rgba(0,0,0,.35);
  /* Keep tiles uniform even with long titles */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.poster-photo{
  margin: 0 16px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.poster-photo-img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  display:block;
}
.poster-desc{
  margin: 12px 18px 0;
  color: rgba(255,255,255,.88);
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
  line-height: 1.25;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.poster-path{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 14px 16px 0;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.poster-col{
  background: rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  min-height: 148px;
}
.poster-col + .poster-col{
  border-left: 1px solid rgba(255,255,255,.12);
}
.poster-col-head{
  padding: 12px 12px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align:center;
  background:
    url("./assets/tag_background.svg") center / cover no-repeat,
    linear-gradient(135deg, rgba(0,166,206,.95), rgba(1,1,147,.75));
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.poster-col:nth-child(3) .poster-col-head{
  background:
    url("./assets/tag_background.svg") center / cover no-repeat,
    linear-gradient(135deg, rgba(0,166,206,.70), rgba(189,28,129,.82));
}
.poster-list{
  margin: 0;
  padding: 12px 12px 14px;
  list-style: none;
  display:flex;
  flex-direction:column;
  gap: 8px;
  color: rgba(255,255,255,.92);
  text-align:center;
}
.poster-list li{line-height: 1.15}
.poster-bottom{
  display:grid;
  grid-template-columns: 210px 1fr auto;
  gap: 14px;
  align-items:center;
  padding: 16px;
}
.poster-qr{
  border-radius: 18px;
  background: white;
  padding: 12px;
  display:grid;
  place-items:center;
}
.poster-qr img{background:white; padding:0; border-radius:12px}
.poster-scan{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.poster-scan-text{display:none}
.poster-actions{display:flex; gap:10px; flex-wrap:wrap}
.poster-open, .poster-copy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: fit-content;
  text-decoration:none;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--text);
  cursor:pointer;
}
.poster-copy{font-family: inherit}
.poster-open:hover, .poster-copy:hover{background: rgba(255,255,255,.12)}
.poster-logo{
  width: 120px;
  height: auto;
  justify-self:end;
  opacity: .95;
}
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.card{
  grid-column: span 6;
  background: var(--panel);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
}
.card-media{
  position:relative;
  height: 170px;
  overflow:hidden;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 220px at 30% 20%, rgba(0,166,206,.22), transparent 55%),
    radial-gradient(540px 220px at 80% 60%, rgba(189,28,129,.18), transparent 55%),
    rgba(255,255,255,.03);
}
.card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.32) 72%, rgba(0,0,0,.46) 100%);
  pointer-events:none;
}
.card-media-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.02);
  transform: scale(1.02);
}
.card-top{padding:16px 16px 10px}
.tag-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.80);
  font-size:.85rem;
  font-weight:700;
}
.tag-cyan{border-color: rgba(0,166,206,.40); background: rgba(0,166,206,.10)}
.tag-magenta{border-color: rgba(189,28,129,.40); background: rgba(189,28,129,.10)}
.card-bottom{
  margin-top:auto;
  display:flex;
  gap:14px;
  align-items:stretch;
  justify-content:space-between;
  padding: 12px 16px 16px;
  border-top:1px solid rgba(255,255,255,.10);
}
.card-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:flex-start;
  min-width: 180px;
}
.qr{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.qr img{
  border-radius: 12px;
  background: white;
  padding:10px;
  border:1px solid rgba(255,255,255,.12);
}
.qr-caption{margin:0}
.no-results{margin:16px 0 0}

/* Steps */
.steps{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.step{
  grid-column: span 4;
  padding:16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.step-num{
  width:36px; height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:900;
  margin-bottom:10px;
  background: linear-gradient(135deg, rgba(189,28,129,.80), rgba(0,166,206,.72));
}

/* About / contact */
.about{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items:start;
}
.about-card{
  padding:16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.checklist{
  margin:10px 0 0;
  padding-left:18px;
  color: var(--muted);
}
.checklist li{margin:8px 0}
.contact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.contact-card{
  padding:16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  min-width: min(520px, 100%);
}
.contact-actions{display:flex; gap:12px; flex-wrap:wrap}

/* Footer */
.site-footer{
  padding: 26px 0;
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(6,6,26,.55);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.footer-left{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer-mark{
  width:56px;
  height:56px;
  object-fit:contain;
  flex-shrink:0;
}
.footer-title{margin:0; font-weight:900}
.footer-right{display:flex; align-items:center; gap:10px; color: var(--muted)}
.footer-right a{color: var(--muted); text-decoration:none}
.footer-right a:hover{color: var(--text)}
.sep{opacity:.6}

@media (max-width: 560px){
  .footer-mark{width:44px; height:44px}
}

/* Career pages */
.page{
  padding: 28px 0 54px;
}
.page-header{
  margin-top: 10px;
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.breadcrumbs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  color: var(--muted);
  margin: 0 0 10px;
}
.breadcrumbs a{color: var(--muted); text-decoration:none}
.breadcrumbs a:hover{color: var(--text)}
.page-title{
  margin: 0 0 8px;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height:1.1;
}
.page-subtitle{margin:0; color: var(--muted)}

.content-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr .45fr;
  gap: 14px;
  align-items:start;
}
.panel{
  padding: 16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.panel + .panel{margin-top:14px}
.panel h2{margin-top:0}
.timeline{
  display:grid;
  gap:12px;
}

/* Google Docs imported content (career detail pages) */
.gdoc{
  color: rgba(255,255,255,.88);
}
.gdoc h1, .gdoc h2, .gdoc h3{
  margin: 16px 0 8px;
  line-height: 1.15;
}
.gdoc p{
  margin: 0 0 12px;
}
.gdoc ul, .gdoc ol{
  margin: 0 0 12px;
  padding-left: 18px;
  color: rgba(255,255,255,.86);
}
.gdoc li{margin: 6px 0}
.gdoc img{
  max-width: 100%;
  height: auto;
  display:block;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  margin: 12px 0 16px;
}
.gdoc a{
  color: rgba(0,166,206,.95);
}
.gdoc a:hover{color: rgba(0,166,206,1)}
.gdoc table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  margin: 14px 0 18px;
}
.gdoc th, .gdoc td{
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 10px 10px;
  vertical-align: top;
}
.gdoc th{
  text-align:left;
  background: rgba(255,255,255,.06);
}

/* Blue/Pink SheTech tables */
.sht-table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.02);
}
.sht-table th, .sht-table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  vertical-align: top;
}
.sht-table thead th{
  color: rgba(255,255,255,.96);
  font-weight: 1000;
  letter-spacing: .04em;
}

/* Pathway snapshot: High School/College in blue, Career in pink */
.sht-table-pathway thead th:nth-child(1),
.sht-table-pathway thead th:nth-child(2){
  background: linear-gradient(135deg, rgba(0,166,206,.95), rgba(1,1,147,.75));
}
.sht-table-pathway thead th:nth-child(3){
  background: linear-gradient(135deg, rgba(189,28,129,.92), rgba(1,1,147,.70));
}
.sht-table-pathway td{
  color: rgba(255,255,255,.90);
}

/* If a Google Doc table doesn't have <thead>, treat the first row as the header row */
.sht-table-pathway thead:empty + tbody tr:first-child td,
.sht-table-pathway:not(:has(thead)) tr:first-child td{
  font-weight: 1000;
  color: rgba(255,255,255,.96);
}
.sht-table-pathway:not(:has(thead)) tr:first-child td:nth-child(1),
.sht-table-pathway:not(:has(thead)) tr:first-child td:nth-child(2){
  background: linear-gradient(135deg, rgba(0,166,206,.95), rgba(1,1,147,.75));
}
.sht-table-pathway:not(:has(thead)) tr:first-child td:nth-child(3){
  background: linear-gradient(135deg, rgba(189,28,129,.92), rgba(1,1,147,.70));
}

/* Day in the Life: alternate blue/pink headers */
.sht-table-day thead th:nth-child(odd){
  background: linear-gradient(135deg, rgba(0,166,206,.95), rgba(1,1,147,.72));
}
.sht-table-day thead th:nth-child(even){
  background: linear-gradient(135deg, rgba(189,28,129,.92), rgba(1,1,147,.70));
}

.sht-table-day:not(:has(thead)) tr:first-child td{
  font-weight: 1000;
  color: rgba(255,255,255,.96);
}
.sht-table-day:not(:has(thead)) tr:first-child td:nth-child(odd){
  background: linear-gradient(135deg, rgba(0,166,206,.95), rgba(1,1,147,.72));
}
.sht-table-day:not(:has(thead)) tr:first-child td:nth-child(even){
  background: linear-gradient(135deg, rgba(189,28,129,.92), rgba(1,1,147,.70));
}

/* Career page hero image */
.career-hero{
  margin-top: 14px;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadow);
}
.career-hero-img{
  width: 100%;
  height: clamp(220px, 28vw, 360px);
  object-fit: cover;
  display:block;
}
.timeline-item{
  padding:14px;
  border-radius: var(--radius-sm);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.timeline-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 8px;
}
.badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.2px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
}
.badge-navy{border-color: rgba(1,1,147,.45); background: rgba(1,1,147,.18)}
.badge-cyan{border-color: rgba(0,166,206,.45); background: rgba(0,166,206,.18)}
.badge-magenta{border-color: rgba(189,28,129,.45); background: rgba(189,28,129,.18)}
.bullets{margin:0; padding-left:18px; color: var(--muted)}
.bullets li{margin:7px 0}
.side-stack{position:sticky; top:76px}
.qr-box{
  display:grid;
  place-items:center;
  gap:10px;
}
.qr-box img{
  border-radius: 14px;
  background:white;
  padding:10px;
}
.side-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* Print styles (high-resolution assets) */
@media print{
  *{ -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  @page{ margin: 0.35in; }

  /* Keep the same theme colors, images, and fonts as the on-screen site. */
  .site-header{position:static!important}
  .side-stack{position:static!important}

  /* Hide interactive controls that don't make sense on paper. */
  .skip-link, .toolbar, .hero-actions, .hero-config, .btn, button, input, select, .no-print{display:none!important}

  /* Print-friendly layout (detail pages). */
  .content-grid{grid-template-columns:1fr!important}
  .side-stack{display:none!important}

  /* Reduce ink-heavy shadows while preserving the same colors/backgrounds. */
  .card, .panel, .page-header, .poster-card{box-shadow:none!important}

  a{color:inherit!important; text-decoration:none!important}
  .poster-card, .panel, .page-header{break-inside:avoid; page-break-inside:avoid}
}



/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr}
  .hero-art{min-height:320px}
  .poster-card{grid-column: span 12}
  .card{grid-column: span 12}
  .step{grid-column: span 12}
  .about{grid-template-columns: 1fr}
  .content-grid{grid-template-columns: 1fr}
  .side-stack{position:static}
}

@media (max-width: 1200px){
  .poster-card{grid-column: span 6}
  .poster-head-title{font-size: 1.7rem}
}

/* QR sheet (Excel-driven) */
.qr-sheet-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.qr-sheet-item{
  grid-column: span 3;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background:
    url("./assets/background_5.png") center / cover no-repeat,
    rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  box-shadow: var(--shadow);
}
.qr-sheet-title{
  text-align:center;
  font-weight: 900;
}
.qr-sheet-qr{
  border-radius: 16px;
  background: white;
  padding: 10px;
}
.qr-sheet-open{
  text-decoration:none;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}
.qr-sheet-open:hover{background: rgba(255,255,255,.12)}

@media (max-width: 980px){
  .qr-sheet-item{grid-column: span 6}
}
@media (max-width: 560px){
  .qr-sheet-item{grid-column: span 12}
  .poster-bottom{grid-template-columns: 1fr}
  .poster-logo{justify-self:start}
}