/* ============================================================
   Sterling Admissions — brand foundation
   Shared by the marketing site and the application.
   Colour, type and lockup rules follow Brand Sheet v1.
   ============================================================ */
:root{
  /* Colour */
  --navy:#14324F;        /* Meridian Navy — type, seals, dark grounds */
  --passage:#2E8FD6;     /* Passage Blue — the mark, links, active states */
  --daylight:#4FA9E8;    /* Daylight — secondary wing, tints, hovers */
  --paper:#F7F2E8;       /* Paper — ground: documents, cards, seals */
  --ink:#0F1F2E;         /* body copy on paper */
  --slate:#4A5762;       /* secondary text, captions */
  --rule:#DFD8CC;        /* hairlines and dividers */
  --mist:#C6DBEE;        /* body copy on navy */
  /* derived */
  --navy-2:#1C4166;
  --paper-2:#EFE7D8;
  --white:#FDFBF6;
  /* Passage at full strength is the MARK colour and is never altered.
     For small text and solid buttons it only reaches 3.1:1 on paper, so
     interface use gets this darkened member of the same hue family
     (4.5:1 on paper, 4.9:1 with white on it). The bird stays Passage. */
  --passage-ink:#24699E;
  --passage-08:rgba(46,143,214,.08);
  --passage-24:rgba(46,143,214,.24);
  --ok:#2F7D5B;
  --warn:#A8622A;
  --alert:#A8362A;

  --display:'Bodoni Moda',Didot,'Times New Roman',serif;
  --text:'Archivo',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;line-height:1.14;letter-spacing:-0.01em;}
p{margin:0;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--passage);outline-offset:3px;}

/* Bodoni's hairlines break below 18px — never set display type smaller. */
.display-sm{font-family:var(--display);font-size:1.15rem;}

.wrap{max-width:1140px;margin:0 auto;padding:0 28px;}
.kicker{
  font-family:var(--text);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.68rem;color:var(--passage-ink);
}

/* ---------- LOCKUPS ----------
   Clear space on all four sides = half the height of the mark. */
.lockup{display:inline-flex;text-decoration:none;color:inherit;}
.lockup .tern{display:block;flex:none;}
.lockup-stacked{flex-direction:column;align-items:center;gap:9px;}
.lockup-h{align-items:center;gap:11px;}
.lockup-type{display:flex;flex-direction:column;line-height:1;}
.wordmark{
  font-family:var(--display);font-weight:400;font-size:1.42rem;
  line-height:1;letter-spacing:-0.01em;color:var(--navy);
}
.wordmark-sub{
  font-family:var(--text);font-weight:600;text-transform:uppercase;
  font-size:.53rem;letter-spacing:.34em;   /* part of the logo, not a style choice */
  color:var(--slate);margin-top:5px;margin-right:-.34em;
}
.lockup-stacked .wordmark{font-size:1.85rem;}
.lockup-stacked .wordmark-sub{font-size:.6rem;margin-top:7px;}
.lockup.on-navy .wordmark{color:var(--paper);}
.lockup.on-navy .wordmark-sub{color:var(--mist);}

/* Avatar / favicon: mark alone on navy, never the lockup. */
.tern-avatar{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--navy);border-radius:50%;flex:none;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;text-decoration:none;text-align:center;border:none;
  border-radius:3px;padding:13px 26px;font-size:.93rem;font-weight:600;
  font-family:var(--text);transition:background .15s,border-color .15s,transform .08s;
}
.btn:active{transform:translateY(1px);}
.btn-navy{background:var(--navy);color:var(--paper);}
.btn-navy:hover{background:#0E2740;}
.btn-blue{background:var(--passage-ink);color:#fff;}
.btn-blue:hover{background:#1E5785;}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--rule);}
.btn-line:hover{border-color:var(--navy);}
.btn-line.on-navy{color:var(--paper);border-color:rgba(198,219,238,.35);}
.btn-line.on-navy:hover{border-color:var(--daylight);}
.btn-sm{padding:8px 16px;font-size:.83rem;}
.btn:disabled{opacity:.45;cursor:default;}
.btn-danger{background:transparent;color:var(--alert);border:1px solid rgba(168,54,42,.35);}
.btn-danger:hover{background:rgba(168,54,42,.06);}
.full{width:100%;}

/* ---------- FORM PRIMITIVES ---------- */
.field{margin-bottom:16px;}
.field label{
  display:block;font-size:.7rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--slate);margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%;background:var(--white);border:1px solid var(--rule);border-radius:4px;
  padding:11px 13px;font-family:var(--text);font-size:.94rem;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--passage-ink);outline:none;}
.field textarea{min-height:92px;resize:vertical;}
.field .help{font-size:.77rem;color:var(--slate);margin-top:5px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.row2{grid-template-columns:1fr;}}

/* ---------- MOTION ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in,.reveal.in-view{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ============================================================
   TOUCH & SMALL SCREENS
   Pointer-coarse devices get a 44px minimum tap target
   (WCAG 2.5.5 / Apple HIG). Desktop keeps the tighter rhythm.
   ============================================================ */
@media (pointer:coarse){
  .btn{padding-top:14px;padding-bottom:14px;min-height:44px;}
  .btn-sm{padding-top:12px;padding-bottom:12px;min-height:44px;}
  .navlinks a{min-height:44px;display:flex;align-items:center;}
}
@media (max-width:620px){
  .wordmark-sub{font-size:.58rem;}
  .lockup-stacked .wordmark-sub{font-size:.64rem;}
}

/* ---------- MOBILE DRAWER ---------- */
.nav-toggle{
  display:none;background:none;border:1px solid rgba(198,219,238,.3);
  border-radius:4px;width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;
}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--paper);position:relative;transition:.2s;}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--paper);transition:.2s;
}
.nav-toggle span::before{top:-6px;} .nav-toggle span::after{top:6px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

.drawer{
  position:fixed;inset:0 0 0 auto;width:min(310px,84vw);background:var(--navy);
  border-left:1px solid rgba(198,219,238,.16);z-index:80;padding:80px 26px 30px;
  transform:translateX(100%);transition:transform .28s ease;overflow-y:auto;
}
.drawer.open{transform:none;}
.drawer a{
  display:flex;align-items:center;min-height:48px;color:var(--mist);
  text-decoration:none;font-size:1rem;border-bottom:1px solid rgba(198,219,238,.12);
}
.drawer a:last-of-type{border-bottom:none;}
.drawer .btn{margin-top:22px;width:100%;}
.drawer-scrim{
  position:fixed;inset:0;background:rgba(15,31,46,.55);z-index:79;
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.drawer-scrim.open{opacity:1;pointer-events:auto;}
@media (prefers-reduced-motion:reduce){
  .drawer,.drawer-scrim{transition:none;}
}
@media(max-width:1000px){ .nav-toggle{display:flex;} }