/* The site's shared header and footer (brand v3, the join page's look), for every page, old or rebuilt.
   Markup: src/site-chrome/header.html and footer.html, put in by src/site-chrome.js. Script: tm-chrome.js.
   Self-contained on purpose: every rule is scoped to .tm-head or .tm-foot and every class is tm- prefixed, so it
   sits on an old page (site.css) without restyling the page, and the old page's styles can't reach in.
   Needs Inter (Google Fonts) on the page. Values come from TM_marketing/brand/tokens/brand.css (v3.0). */

.tm-head, .tm-foot {
  --tm-deep:#02271E; --tm-forest:#084F3C; --tm-paper:#FBFAF6; --tm-ink:#101613; --tm-muted:#56605A; --tm-white:#FFFFFF;
  --tm-body-ink:rgba(16,22,19,.80); --tm-line:rgba(16,22,19,.12);
  --tm-glow:0 0 0 1.5px rgba(242,158,31,.95), 0 0 0 5px rgba(242,158,31,.22), 0 0 22px 2px rgba(242,158,31,.45);
  --tm-font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-family:var(--tm-font); -webkit-font-smoothing:antialiased; font-variant-numeric:lining-nums; text-align:left;
}
.tm-head *, .tm-head *::before, .tm-head *::after, .tm-foot *, .tm-foot *::before, .tm-foot *::after { box-sizing:border-box; }
.tm-head [hidden], .tm-foot [hidden] { display:none !important; }
.tm-head ul, .tm-foot ul { list-style:none; margin:0; padding:0; }
.tm-head p, .tm-foot p { margin:0; }
.tm-head a, .tm-foot a { color:inherit; }
.tm-head svg, .tm-foot svg { display:block; fill:currentColor; }

/* How far a page's first section starts below the top, so the header never covers it: nothing on phones (the bar is
   in the page's flow), 104 px on laptops (the pill floats 20 px down, 64 px tall, then 20 px of air). */
:root { --tm-head-space:0px; }
@media (min-width: 960px) { :root { --tm-head-space:104px; } }

/* the one button the header and its menu use: forest, flat, a pill */
.tm-btn { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 28px; border-radius:999px; border:0;
  background:var(--tm-forest); color:var(--tm-white) !important; font:600 16px/1.2 var(--tm-font); letter-spacing:0; text-transform:none; text-decoration:none !important;
  cursor:pointer; transition:box-shadow .18s ease; -webkit-tap-highlight-color:transparent; white-space:nowrap; }
.tm-btn:hover, .tm-btn:focus-visible { outline:none; box-shadow:var(--tm-glow); }

/* ---------- header ----------
   Phones: a paper bar with the small logo and a Menu button; the menu drops down under it.
   Laptops: the floating paper pill, fixed while you scroll so the booking button stays in reach, turning to frosted
   glass once you scroll (the join page's nav). */
.tm-head { position:relative; z-index:1000; background:var(--tm-paper); color:var(--tm-ink); }
.tm-nav { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; max-width:1140px; margin:0 auto; padding:0 20px; }
.tm-head .tm-brand { display:block; color:var(--tm-forest); text-decoration:none; }
.tm-logo-small { height:36px; width:auto; aspect-ratio:3139/764; }
.tm-logo-full { display:none !important; width:190px; height:auto; aspect-ratio:3295/764; }
.tm-nav-links { display:none !important; }
.tm-nav-links a { text-decoration:none; font:500 15px/1 var(--tm-font); color:var(--tm-body-ink); }
.tm-nav-links a:hover { color:var(--tm-forest); }
.tm-nav-links a[aria-current="page"] { color:var(--tm-forest); font-weight:600; }
.tm-nav-cta { display:none !important; }
.tm-menu-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0 -10px 0 0; padding:0; border-radius:50%; border:0;
  background:transparent; color:var(--tm-forest); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.tm-menu-btn:focus-visible { outline:none; box-shadow:var(--tm-glow); }
/* the icon only, no word (owner, 16 Oct 2026): three 2 px lines that fold into an X while the menu is open */
.tm-bars { position:relative; display:block; width:22px; height:16px; }
.tm-bars i { position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor; transition:top .25s ease, transform .25s ease, opacity .2s ease, width .25s ease; }
.tm-bars i:nth-child(1) { top:0; } .tm-bars i:nth-child(2) { top:7px; } .tm-bars i:nth-child(3) { top:14px; }
.tm-menu-btn[aria-expanded="true"] .tm-bars i:nth-child(1) { top:7px; transform:rotate(45deg); }
.tm-menu-btn[aria-expanded="true"] .tm-bars i:nth-child(2) { opacity:0; }
.tm-menu-btn[aria-expanded="true"] .tm-bars i:nth-child(3) { top:7px; transform:rotate(-45deg); width:100%; }
.tm-menu { position:absolute; top:64px; left:0; right:0; padding:8px 20px 20px; background:var(--tm-paper); box-shadow:0 18px 30px rgba(2,39,30,.14); }
.tm-menu li a { display:block; padding:14px 0; border-bottom:1px solid var(--tm-line); font:600 18px/1.2 var(--tm-font); color:var(--tm-ink); text-decoration:none; }
.tm-menu li a[aria-current="page"] { color:var(--tm-forest); }
.tm-menu .tm-btn { width:100%; margin-top:18px; }
/* phones: the bar comes back (owner's pick, 16 Oct 2026: "familiar and clear"). It slides away as you scroll down to read
   and slides back the moment you scroll up, so the menu is always one flick away; tm-chrome.js sets the classes. */
@media (max-width: 959px) {
  .tm-head { position:sticky; top:0; transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
  html.tm-past-head .tm-head { box-shadow:0 1px 0 rgba(16,22,19,.08), 0 10px 24px rgba(2,39,30,.08); }
  html.tm-head-away .tm-head { transform:translateY(-100%); box-shadow:none; }
}
@media (min-width: 600px) { .tm-logo-small { display:none !important; } .tm-logo-full { display:block !important; } }
@media (min-width: 960px) {
  .tm-head { height:0; background:transparent; }
  .tm-menu-btn, .tm-menu { display:none !important; }
  .tm-nav { position:fixed; top:20px; left:50%; transform:translateX(-50%); width:min(1076px, calc(100vw - 64px)); max-width:none; height:64px; margin:0; padding:0 10px 0 28px;
    border-radius:999px; background:var(--tm-paper); box-shadow:0 12px 32px rgba(0,0,0,.20);
    transition:background-color .35s ease, box-shadow .35s ease, height .35s cubic-bezier(.22,.61,.36,1), top .35s cubic-bezier(.22,.61,.36,1), padding .35s ease; }
  .tm-logo-full { transition:width .35s cubic-bezier(.22,.61,.36,1); }
  .tm-nav-links { display:flex !important; gap:30px; margin-left:auto; margin-right:12px; }
  .tm-nav-cta { display:inline-flex !important; min-height:44px; padding:0 22px; font-size:15px; transition:min-height .35s ease, padding .35s ease, font-size .35s ease, box-shadow .18s ease; }
  html:has(.tm-nav) { scroll-padding-top:104px; }
  html.tm-scrolled .tm-nav { top:12px; height:52px; padding:0 8px 0 24px; background:rgba(251,250,246,.68);
    -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
    box-shadow:0 10px 30px rgba(2,39,30,.14), inset 0 0 0 1px rgba(255,255,255,.55); }
  html.tm-scrolled .tm-logo-full { width:164px; }
  html.tm-scrolled .tm-nav-cta { min-height:36px; padding:0 18px; font-size:14px; }
}
@media (prefers-reduced-motion: reduce) { .tm-nav, .tm-logo-full, .tm-nav-cta { transition:none !important; } }

/* ---------- footer: white under a hairline, ending on the booklet footer (the icon on a line, the name left, the campuses right) ---------- */
.tm-foot { position:relative; background:var(--tm-white); box-shadow:inset 0 1px 0 var(--tm-line); color:var(--tm-body-ink); font-size:14px; line-height:1.6; overflow:hidden; }
.tm-foot-wrap { max-width:1140px; margin:0 auto; padding:48px 20px calc(40px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { .tm-foot-wrap { padding:64px 32px 40px; } }
.tm-foot-grid { display:grid; gap:24px; }
@media (min-width: 600px) { .tm-foot-grid { grid-template-columns:1fr 1fr; } .tm-foot-line { grid-column:1 / -1; } }
@media (min-width: 960px) { .tm-foot-grid { grid-template-columns:repeat(4, max-content); column-gap:48px; align-items:start; } }
/* wide enough for the line to take the left column, as on the join page */
@media (min-width: 1100px) { .tm-foot-grid { grid-template-columns:minmax(200px, 1fr) repeat(4, max-content); column-gap:40px; } .tm-foot-line { grid-column:auto; } }
.tm-foot-line { font:600 24px/1.15 var(--tm-font); letter-spacing:-.025em; color:var(--tm-ink); }
.tm-foot b { display:block; margin-bottom:4px; color:var(--tm-ink); font-weight:600; }
/* each line is its own line: an address never wraps on its own (no spillage) */
.tm-foot-grid span { display:block; white-space:nowrap; }
.tm-foot-grid a { display:block; width:fit-content; text-decoration:none; }
.tm-foot-grid a:hover { color:var(--tm-forest); text-decoration:underline; }
.tm-foot-legal { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:32px; font-size:13px; color:var(--tm-muted); }
.tm-foot-legal a { text-decoration:none; }
.tm-foot-legal a:hover { color:var(--tm-forest); text-decoration:underline; }
/* The icon keeps one proportion to the offer card's icon on every screen (owner, 16 Oct 2026): about 1.8 times it, so
   46 px on phones (the card's is 26), 57 px on tablets (32), 64 px on laptops (36). At 46 px a phone draws it at
   92 px or more, past the 64 px below which the brand guide asks for the hinted PNG, so it's the vector everywhere.
   --hc is the head's centre. */
.tm-bfoot { --ih:46px; --rw:2px; --lab:10px;
  --hc:calc(var(--ih) * 130 / 677); --hrad:calc(var(--ih) * 130 / 677);
  --mm:calc(var(--ih) * 473 / 677); --clear:calc(var(--ih) * 16 / 60);
  position:relative; height:var(--ih); margin-top:40px; color:var(--tm-forest); }
.tm-bfoot::before, .tm-bfoot::after { content:""; position:absolute; top:calc(var(--hc) - var(--rw) / 2); height:var(--rw); background:rgba(16,22,19,.25); }
.tm-bfoot::before { left:calc(50% - 50vw); right:calc(50% + var(--hrad) + var(--clear)); }
.tm-bfoot::after { right:calc(50% - 50vw); left:calc(50% + var(--hrad) + var(--clear)); }
.tm-bfoot .icon { position:absolute; left:50%; top:0; transform:translateX(-50%); max-width:none; height:var(--ih); width:auto; aspect-ratio:400/677; }
.tm-bfoot .fl, .tm-bfoot .fr { position:absolute; top:calc(var(--mm) - var(--lab) / 2); display:none; font:600 var(--lab)/1 var(--tm-font); letter-spacing:.15em; text-transform:uppercase; color:var(--tm-muted); white-space:nowrap; }
.tm-bfoot .fl { left:0; } .tm-bfoot .fr { right:-.15em; }
@media (min-width: 600px) {
  .tm-bfoot { --ih:57px; --rw:3px; --lab:12px; margin-top:48px; }
  .tm-bfoot .fl, .tm-bfoot .fr { display:block; }
}
@media (min-width: 960px) { .tm-bfoot { --ih:64px; } }