:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found]){display:none!important}

/* =====================================================================
   Carolina Exotic Car Club — unified design system
   One brand, four pillars: Club · Cars · Driving School · Foundation
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
  /* surfaces */
  --ink:        #0a0b0c;
  --ink-2:      #111316;
  --ink-3:      #181b1f;
  --ink-4:      #21252a;
  --line:       rgba(244, 241, 234, 0.12);
  --line-soft:  rgba(244, 241, 234, 0.07);

  /* text */
  --ivory:      #f4f1ea;
  --text:       rgba(244, 241, 234, 0.96);
  --text-muted: rgba(244, 241, 234, 0.76);
  --text-faint: rgba(244, 241, 234, 0.60);

  /* pillar accents */
  --brass:      #c6a15b;   /* the club */
  --steel:      #b4bec9;   /* the cars */
  --signal:     #5aa9ea;   /* driving school */
  --ember:      #e8794a;   /* foundation */
  --accent:     var(--brass);

  /* type */
  --display: "Cormorant Garamond", "Adobe Garamond Pro", Garamond, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* metrics */
  --wrap: 1240px;
  --wrap-narrow: 820px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 4px;
  --header-h: 76px;

  /* form controls sit lighter than the card behind them */
  --field:       #262b32;
  --field-hover: #2c323a;
  --field-focus: #323942;
  --field-line:  rgba(244, 241, 234, 0.28);

  --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }

/* ---------- type scale ---------- */
.display-xl { font-family: var(--display); font-size: clamp(3rem, 8.4vw, 6.4rem); line-height: 0.98; letter-spacing: -0.02em; }
.display-l  { font-family: var(--display); font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1.04; letter-spacing: -0.015em; }
.display-m  { font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.85rem); line-height: 1.1; }
.display-s  { font-family: var(--display); font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.2; }
.eyebrow {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.1rem;
}
.eyebrow--muted { color: var(--text-faint); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.65; color: var(--text-muted); max-width: 62ch; }
.muted { color: var(--text-muted); }
.serif-italic { font-family: var(--display); font-style: italic; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--alt { background: var(--ink-2); }
.section--line { border-top: 1px solid var(--line-soft); }
.grid { display: grid; gap: clamp(20px, 2.6vw, 34px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.split { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr 1fr; } .split--reverse > :first-child { order: 2; } }
.stack > * + * { margin-top: 1.1rem; }
.section-head { max-width: 68ch; margin-bottom: clamp(32px, 4.5vw, 60px); }
.section-head--center { margin-inline: auto; text-align: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: 0.95em 1.9em; border: 1px solid transparent; border-radius: 2px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; background: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--accent); color: #0a0b0c; }
.btn--primary:hover { background: var(--ivory); }
.btn--ghost { border-color: var(--line); color: var(--text); }
.btn--ghost:hover { border-color: var(--ivory); background: rgba(244, 241, 234, 0.06); }
.btn--solid { background: var(--ivory); color: #0a0b0c; }
.btn--solid:hover { background: var(--accent); }
.btn--sm { padding: 0.7em 1.3em; font-size: 0.7rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5em; text-decoration: none;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.link-arrow:hover { border-bottom-color: currentColor; }
.link-arrow svg { transition: transform 0.25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- header ---------- */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ivory); color: #000;
  padding: 10px 16px; border-radius: 3px; text-decoration: none; font-size: 0.85rem; transition: top 0.2s;
}
.skip:focus { top: 12px; }

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), backdrop-filter 0.35s;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck, .site-header.is-open {
  background: rgba(10, 11, 12, 0.9); backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; min-width: 0; }
.brand-mark { flex: 0 0 auto; height: 30px; width: auto; }
.brand--lockup img { width: min(300px, 70%); height: auto; }
@media (max-width: 599px) { .site-header .brand-text { display: none; } .brand-mark { height: 27px; } }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-name { font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.02em; color: var(--ivory); }
.brand-sub { font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint); }

.nav { display: none; align-items: center; gap: 4px; }
@media (min-width: 1160px) { .nav { display: flex; } }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 6px; padding: 10px 12px; text-decoration: none;
  font-size: 0.73rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--text-muted); transition: color 0.2s; white-space: nowrap; background: none; border: 0; cursor: pointer;
}
.nav-link:hover, .nav-item:focus-within .nav-link, .nav-link[aria-current="page"] { color: var(--ivory); }
.nav-link[aria-current="page"] { color: var(--accent); }
.nav-link .caret { width: 8px; height: 8px; opacity: 0.6; transition: transform 0.25s var(--ease); }
.nav-item:hover .caret, .nav-item:focus-within .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translate(-50%, 8px);
  min-width: 300px; padding: 10px; background: rgba(17, 19, 22, 0.97);
  border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* dismissed after a selection — stays shut until the pointer leaves and returns */
.nav-item.is-closed .dropdown { opacity: 0; visibility: hidden; transform: translate(-50%, 8px); }
.dropdown a {
  display: block; padding: 10px 12px; border-radius: 4px; text-decoration: none;
  transition: background-color 0.18s;
}
.dropdown a:hover { background: rgba(244, 241, 234, 0.07); }
.dropdown .dd-title { font-size: 0.88rem; color: var(--ivory); }
.dropdown .dd-desc { font-size: 0.76rem; color: var(--text-faint); line-height: 1.45; }

.header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.header-actions .btn { white-space: nowrap; }
.header-phone {
  display: none; text-decoration: none; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--text-muted);
  white-space: nowrap;
}
@media (min-width: 720px) { .header-phone { display: inline-flex; align-items: center; gap: 7px; } }
.header-phone:hover { color: var(--ivory); }
.header-actions .btn { display: none; }
@media (min-width: 640px) { .header-actions .btn { display: inline-flex; } }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 10px; background: none; border: 1px solid var(--line);
  border-radius: 3px; cursor: pointer;
}
@media (min-width: 1160px) { .burger { display: none; } }
.burger span { display: block; height: 1.5px; background: var(--ivory); transition: transform 0.3s var(--ease), opacity 0.2s; }
.site-header.is-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-header.is-open .burger span:nth-child(2) { opacity: 0; }
.site-header.is-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* mobile drawer */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: rgba(10, 11, 12, 0.985); backdrop-filter: blur(18px);
  overflow-y: auto; padding: 24px var(--gutter) 60px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1160px) { .mobile-nav { display: none; } }
.mobile-nav .m-group { border-bottom: 1px solid var(--line-soft); padding: 6px 0; }
.mobile-nav .m-head {
  font-family: var(--display); font-size: 1.5rem; color: var(--ivory);
  display: block; padding: 12px 0; text-decoration: none;
}
.mobile-nav .m-sub a {
  display: block; padding: 8px 0 8px 16px; text-decoration: none; color: var(--text-muted); font-size: 0.92rem;
  border-left: 1px solid var(--line);
}
.mobile-nav .m-sub a:hover { color: var(--ivory); border-left-color: var(--accent); }
.mobile-nav .m-actions { display: grid; gap: 10px; margin-top: 26px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(94vh, 900px); display: flex; align-items: flex-end; padding-top: var(--header-h); overflow: hidden; }
.hero--short { min-height: min(66vh, 620px); }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ink) 2%, rgba(10, 11, 12, 0.72) 38%, rgba(10, 11, 12, 0.3) 68%, rgba(10, 11, 12, 0.65) 100%),
    linear-gradient(to right, rgba(10, 11, 12, 0.85) 0%, rgba(10, 11, 12, 0.15) 60%);
}
.hero-inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(48px, 8vw, 104px); }
.hero-copy { max-width: 780px; }
.hero-copy .lede { margin-top: 1.4rem; }
.hero-copy .btn-row { margin-top: 2.2rem; }
.hero-meta {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px 28px;
  border-top: 1px solid var(--line-soft); padding-top: 18px; margin-top: clamp(32px, 5vw, 56px);
  font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint);
}
.hero-meta strong { color: var(--text); font-weight: 500; }

/* ---------- pillar cards ---------- */
.pillars { display: grid; gap: 2px; background: var(--line-soft); grid-template-columns: 1fr; }
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 400px;
  padding: 28px; text-decoration: none; overflow: hidden; background: var(--ink-2); isolation: isolate;
}
.pillar img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  opacity: 0.5; transition: transform 0.9s var(--ease), opacity 0.5s;
}
.pillar::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8, 9, 10, 0.95) 12%, rgba(8, 9, 10, 0.5) 55%, rgba(8, 9, 10, 0.25) 100%);
}
.pillar:hover img { transform: scale(1.06); opacity: 0.68; }
.pillar-index { font-size: 0.68rem; letter-spacing: 0.2em; color: var(--pillar, var(--brass)); margin-bottom: auto; }
.pillar h3 { font-family: var(--display); font-size: 1.9rem; line-height: 1.1; margin-bottom: 10px; color: var(--ivory); }
.pillar p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 18px; }
.pillar .link-arrow { color: var(--pillar, var(--brass)); }
.pillar::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pillar, var(--brass));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); z-index: 1;
}
.pillar:hover::before { transform: scaleX(1); }

/* ---------- stats ---------- */
.stats { display: grid; gap: 1px; background: var(--line-soft); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--ink); padding: clamp(24px, 3vw, 40px) clamp(18px, 2.4vw, 32px); }
.stat-num { font-family: var(--display); font-size: clamp(2.2rem, 4.4vw, 3.3rem); line-height: 1; color: var(--ivory); }
.stat-label { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-top: 10px; }

/* ---------- cards ---------- */
.card {
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px); transition: border-color 0.3s, transform 0.3s var(--ease), background-color 0.3s;
}
.card--link { text-decoration: none; display: block; }
.card--link:hover { border-color: var(--line); transform: translateY(-3px); background: var(--ink-3); }
.card h3 { font-family: var(--display); font-size: 1.45rem; margin-bottom: 0.5rem; color: var(--ivory); }
.card p:last-child { margin-bottom: 0; }
.card-icon {
  width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 3px; color: var(--accent);
}
.card-media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; margin-bottom: 20px; background: var(--ink-3); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.card--link:hover .card-media img { transform: scale(1.05); }

/* feature list */
.feature-list { display: grid; gap: 14px; }
.feature-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 0.95rem; color: var(--text-muted); }
.feature-list li::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 0.62em; border-radius: 50%;
  background: var(--accent); opacity: 0.85;
}
.feature-list--cols { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 32px; }

/* ---------- pricing ---------- */
.price-card {
  position: relative; background: var(--ink-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: clamp(26px, 3.2vw, 40px); display: flex; flex-direction: column;
}
.price-card--feature { border-color: rgba(198, 161, 91, 0.45); background: linear-gradient(180deg, rgba(198, 161, 91, 0.07), transparent 45%), var(--ink-2); }
.price-tag { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; }
.price-tag .amount { font-family: var(--display); font-size: clamp(2.4rem, 4.4vw, 3.2rem); line-height: 1; color: var(--ivory); }
.price-tag .per { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.price-note { font-size: 0.8rem; color: var(--text-faint); border-top: 1px solid var(--line-soft); padding-top: 16px; margin-top: 20px; }
.price-card .feature-list { margin: 22px 0 26px; }
.price-card .btn { margin-top: auto; width: 100%; }
.badge {
  display: inline-block; padding: 5px 11px; border: 1px solid var(--line); border-radius: 100px;
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}

/* ---------- schedule ---------- */
.session {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; justify-content: space-between;
  padding: 22px 24px; background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--radius);
  transition: border-color 0.3s, background-color 0.3s;
}
.session:hover { border-color: var(--line); background: var(--ink-3); }
.session-date { font-family: var(--display); font-size: 1.6rem; color: var(--ivory); line-height: 1.1; }
.session-meta { font-size: 0.82rem; color: var(--text-faint); }
.session-right { display: flex; align-items: center; gap: 20px; margin-left: auto; }

/* ---------- accordion ---------- */
.acc { border-top: 1px solid var(--line-soft); }
.acc-item { border-bottom: 1px solid var(--line-soft); }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--display); font-size: clamp(1.1rem, 1.9vw, 1.35rem); color: var(--ivory);
}
.acc-btn:hover { color: var(--accent); }
.acc-icon { flex: 0 0 auto; width: 18px; height: 18px; position: relative; }
.acc-icon::before, .acc-icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: currentColor;
  transition: transform 0.3s var(--ease);
}
.acc-icon::after { transform: rotate(90deg); }
.acc-btn[aria-expanded="true"] .acc-icon::after { transform: rotate(0deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.acc-panel > div { overflow: hidden; }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel p, .acc-panel ul { color: var(--text-muted); font-size: 0.97rem; }
.acc-panel > div > :first-child { margin-top: 0; }
.acc-panel > div > :last-child { margin-bottom: 26px; }

/* ---------- video ---------- */
.videoblock {
  position: relative; overflow: hidden; border-radius: 4px; background: var(--ink-3);
  aspect-ratio: 16 / 9; border: 1px solid var(--line-soft);
}
.videoblock video { width: 100%; height: 100%; object-fit: cover; display: block; }
.videoblock::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 9, 10, 0.8), transparent);
}
.vb-label {
  position: absolute; left: clamp(16px, 2.4vw, 26px); bottom: clamp(14px, 2vw, 22px); z-index: 1;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ivory); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}
.vb-label span { display: block; margin-top: 5px; font-size: 0.62rem; letter-spacing: 0.12em; color: rgba(244, 241, 234, 0.82); text-transform: none; }

/* ---------- gallery ---------- */
.gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.gallery figure { margin: 0; overflow: hidden; border-radius: 3px; background: var(--ink-3); aspect-ratio: 4 / 3; }
.gallery figure:nth-child(4n + 1) { aspect-ratio: 3 / 4; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease), filter 0.4s; filter: saturate(0.9); }
.gallery figure:hover img { transform: scale(1.05); filter: saturate(1.1); }

/* ---------- testimonials ---------- */
.img-missing { background: linear-gradient(135deg, #1c2025, #101215); min-height: 100%; }
.quotes { display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; }
.quotes::-webkit-scrollbar { height: 3px; }
.quotes::-webkit-scrollbar-thumb { background: var(--line); }
.quote {
  scroll-snap-align: start; flex: 0 0 min(420px, 84vw);
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column;
}
.quote blockquote { margin: 0 0 20px; font-family: var(--display); font-size: 1.28rem; line-height: 1.45; color: var(--ivory); }
.quote cite { font-style: normal; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: auto; }

/* ---------- foundation band ---------- */
.band { position: relative; overflow: hidden; }
.band-media { position: absolute; inset: 0; }
.band-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.band-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,11,12,0.95) 20%, rgba(10,11,12,0.55)); }
.band > .wrap { position: relative; z-index: 1; }

/* ---------- locations ---------- */
.loc {
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
}
.loc h3 { font-family: var(--display); font-size: 1.5rem; color: var(--ivory); margin-bottom: 4px; }
.loc .loc-role { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.loc dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0; font-size: 0.93rem; }
.loc dt { color: var(--text-faint); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 3px; }
.loc dd { margin: 0; color: var(--text-muted); }
.loc a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.loc a:hover { border-bottom-color: var(--accent); color: var(--ivory); }

/* ---------- forms ---------- */
.form-card {
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: 6px;
  padding: clamp(24px, 3.4vw, 44px);
}
.form-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field > label, .fieldset-legend {
  font-size: 0.71rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; background: var(--field); color: var(--ivory);
  border: 1px solid var(--field-line); border-radius: 3px;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
  font-size: 0.97rem;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23c9c5bd' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px; padding-right: 38px; }
.field input:hover, .field select:hover, .field textarea:hover { background: var(--field-hover); border-color: rgba(244,241,234,0.42); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: var(--field-focus);
  box-shadow: 0 0 0 3px rgba(198, 161, 91, 0.18);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(244, 241, 234, 0.55); }
.field .hint { font-size: 0.78rem; color: var(--text-faint); }
.field.has-error input, .field.has-error select, .field.has-error textarea, .fieldset.has-error .check-grid { border-color: #ef7f68; box-shadow: 0 0 0 3px rgba(224, 101, 79, 0.16); }
.field-error, .form-status {
  font-size: 0.8rem; color: #f08b76; display: none;
}
.field.has-error .field-error, .fieldset.has-error .field-error { display: block; }

.fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; grid-column: 1 / -1; }
.check-grid { display: grid; gap: 8px 18px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding: 4px 0; border: 1px solid transparent; border-radius: 3px; }
.check {
  display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--text-muted); cursor: pointer;
  padding: 4px 0;
}
.check input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.check:hover { color: var(--ivory); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; cursor: pointer; }
.consent input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 28px; }
.form-foot .fine { font-size: 0.78rem; color: var(--text-faint); max-width: 44ch; }
.form-status { display: none; margin-top: 20px; padding: 16px 18px; border-radius: 4px; font-size: 0.92rem; line-height: 1.55; }
.form-status.is-visible { display: block; }
.form-status.is-success { background: rgba(120, 190, 140, 0.1); border: 1px solid rgba(120, 190, 140, 0.35); color: #a9dfba; }
.form-status.is-error { background: rgba(224, 101, 79, 0.1); border: 1px solid rgba(224, 101, 79, 0.35); color: #f0a08b; }
.is-submitting .btn--primary { opacity: 0.6; pointer-events: none; }

/* ---------- misc ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 100px;
  font-size: 0.74rem; letter-spacing: 0.06em; color: var(--text-muted);
}
.sponsor-grid { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sponsor {
  padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 3px; background: var(--ink-2);
  font-size: 0.88rem; color: var(--text-muted); text-align: center;
}
.note {
  border-left: 2px solid var(--accent); padding: 4px 0 4px 20px; color: var(--text-muted); font-size: 0.95rem;
}
.rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }
.media-frame { position: relative; border-radius: 4px; overflow: hidden; background: var(--ink-3); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--tall { aspect-ratio: 4 / 5; }
.media-frame--wide { aspect-ratio: 16 / 10; }
.caption { font-size: 0.78rem; color: var(--text-faint); margin-top: 10px; }

/* pillar theming helper */
[data-pillar="club"] { --accent: var(--brass); }
[data-pillar="cars"] { --accent: var(--steel); }
[data-pillar="school"] { --accent: var(--signal); }
[data-pillar="foundation"] { --accent: var(--ember); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
@media print { .reveal { opacity: 1; transform: none; } }

/* ---------- footer ---------- */
.site-footer { background: var(--ink-2); border-top: 1px solid var(--line-soft); padding-block: clamp(48px, 6vw, 84px) 32px; }
.footer-top { display: grid; gap: clamp(32px, 4vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.3fr 2fr; } }
.footer-cols { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.footer-col h4 { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 16px; }
.footer-col a { display: block; padding: 5px 0; text-decoration: none; color: var(--text-muted); font-size: 0.9rem; }
.footer-col a:hover { color: var(--ivory); }
.newsletter { margin-top: 26px; }
.newsletter form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.newsletter input { flex: 1 1 200px; padding: 12px 14px; background: var(--field); border: 1px solid var(--field-line); border-radius: 3px; color: var(--ivory); }
.newsletter input::placeholder { color: rgba(244, 241, 234, 0.55); }
.newsletter input:hover { background: var(--field-hover); }
.newsletter input:focus { outline: none; border-color: var(--brass); background: var(--field-focus); box-shadow: 0 0 0 3px rgba(198, 161, 91, 0.18); }
.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a {
  width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line);
  border-radius: 3px; color: var(--text-muted); transition: color 0.2s, border-color 0.2s;
}
.socials a:hover { color: var(--ivory); border-color: var(--ivory); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line-soft); margin-top: clamp(36px, 5vw, 60px); padding-top: 24px;
  font-size: 0.78rem; color: var(--text-faint);
}
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--ivory); }


/* fallback slot for any photo that could not be captured */
.ph {
  display: block; width: 100%; height: 100%; position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(244,241,234,0.03) 0 1px, transparent 1px 10px),
    linear-gradient(158deg, #1d2228 0%, #101317 55%, #0b0d10 100%);
}
.ph::after {
  content: attr(data-label); position: absolute; left: 16px; right: 16px; bottom: 14px;
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244,241,234,0.28); line-height: 1.5;
}
.hero-media .ph, .band-media .ph, .pillar .ph { position: absolute; inset: 0; }
.pillar .ph { z-index: -2; opacity: 0.55; }
.card-media .ph, .gallery .ph, .media-frame .ph { position: absolute; inset: 0; }
.card-media, .gallery figure, .media-frame { position: relative; }
.route[hidden] { display: none !important; }



/* =====================================================================
   Brand marks — the rotating hero banner and the per-page lockups
   ===================================================================== */

.brand-mark {
  height: var(--mark-h, 56px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ---- rotating banner (homepage hero) ----
   Laid out as a single band so it costs the hero as little height as
   possible; the hero already runs to 94vh before this is added. */
.brand-rail {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(18px, 2.4vw, 26px);
  padding-top: clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--line-soft);
}
.brand-rail__label {
  flex: none;
  max-width: 128px;
  margin: 0;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.brand-rail__stage {
  position: relative;
  flex: 1 1 auto;
  height: 78px;
  min-width: 0;
}
.brand-rail__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  animation: brandCycle 20s var(--ease) infinite;
}
.brand-rail__item:nth-child(1) { animation-delay: 0s;  }
.brand-rail__item:nth-child(2) { animation-delay: 5s;  }
.brand-rail__item:nth-child(3) { animation-delay: 10s; }
.brand-rail__item:nth-child(4) { animation-delay: 15s; }

@keyframes brandCycle {
  0%        { opacity: 0; transform: translateY(8px); }
  4%, 26%   { opacity: 1; transform: none; }
  30%, 100% { opacity: 0; transform: translateY(-8px); }
}

.brand-rail:hover .brand-rail__item,
.brand-rail:focus-within .brand-rail__item { animation-play-state: paused; }

/* Hero needs to give the band its height back from somewhere. */
.hero--branded .hero-inner { padding-bottom: clamp(26px, 3.2vw, 44px); }
.hero--branded .hero-meta  { margin-top: clamp(20px, 3vw, 30px); }

/* No animation: show all four at once rather than freezing on one. */
@media (prefers-reduced-motion: reduce) {
  .brand-rail { flex-wrap: wrap; }
  .brand-rail__stage {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(22px, 3.5vw, 44px);
  }
  .brand-rail__item {
    position: static;
    opacity: 1;
    animation: none;
    transform: none;
  }
}

@media (max-width: 720px) {
  .brand-rail { display: block; }
  .brand-rail__label { max-width: none; margin-bottom: 12px; }
  .brand-rail__stage { height: 62px; }
  .brand-rail__item { justify-content: center; }
  .brand-mark { height: calc(var(--mark-h, 56px) * 0.78); }
}

/* Short laptop screens: claw back enough height that the band still lands
   above the fold, without touching the headline size. */
@media (min-width: 721px) and (max-height: 880px) {
  .hero--branded { min-height: min(96vh, 900px); }
  .hero--branded .hero-inner { padding-top: clamp(32px, 4vw, 52px); padding-bottom: 22px; }
  .hero--branded .hero-meta { margin-top: 18px; padding-top: 14px; }
  .hero--branded .brand-rail { margin-top: 16px; padding-top: 14px; }
  .hero--branded .brand-rail__stage { height: 62px; }
  .hero--branded .brand-mark { height: calc(var(--mark-h, 56px) * 0.8); }
}

@media (min-width: 721px) and (max-height: 770px) {
  .hero--branded .hero-inner { padding-top: 26px; padding-bottom: 16px; }
  .hero--branded .hero-meta { margin-top: 12px; padding-top: 12px; }
  .hero--branded .brand-rail { margin-top: 12px; padding-top: 12px; }
  .hero--branded .brand-rail__stage { height: 54px; }
}

/* ---- static lockup at the top of a pillar page ---- */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
  margin-bottom: clamp(16px, 2.2vw, 24px);
  flex-wrap: wrap;
}
.brand-lockup__rule {
  width: 1px;
  height: 44px;
  background: var(--line);
  flex: none;
}
@media (max-width: 720px) {
  .brand-lockup__rule { display: none; }
}


/* =====================================================================
   Responsive corrections
   Found by measuring 8 pages at 10 viewport sizes.
   ===================================================================== */

/* ---- The header did not fit its own container at ANY desktop width.
   Brand (415px) + nav (606px) + actions (294px) + gaps came to 1363px
   inside a 1128px wrap, so the "Become a Member" button broke out to the
   right and was clipped by the viewport below about 1560px — at 1280px
   only 8px of a 167px button was visible. Trim the three blocks until
   they fit, and only show the full-fat header once there is room. ---- */
/* The compact header applies at EVERY width where the desktop nav shows.
   Previously it stopped at 1599px and the nav carried min-width: 0, which let
   it shrink below its own content and overlap the phone number and the CTA
   instead of clipping. Never let the nav shrink; drop the optional pieces
   instead, and only bring them back when there is provably room. */
@media (min-width: 1160px) {
  .site-header .header-phone { display: none; }
  .site-header .brand-sub { display: none; }
  .site-header .brand-name { font-size: 0.95rem; }
  .site-header .nav-link { padding: 9px 9px; font-size: 0.7rem; letter-spacing: 0.1em; }
  .site-header .nav { gap: 2px; }
  .site-header .header-inner { gap: 16px; }
}
@media (min-width: 1160px) and (max-width: 1719px) {
  /* Tighter gutters just for the header bar. The content column below keeps
     its normal padding; this is only buying room for the nav. */
  .site-header .wrap { padding-inline: 28px; }
}
@media (min-width: 1160px) and (max-width: 1379px) {
  .site-header .brand-mark { height: 26px; }
}
/* Wide enough to bring the phone number and strapline back — but only by
   letting the header span wider than the 1240px content column, otherwise
   the gap stays at a risky 16px no matter how wide the screen gets. */
@media (min-width: 1720px) {
  .site-header .wrap { max-width: 1560px; padding-inline: 40px; }
  .site-header .header-phone { display: flex; }
  .site-header .brand-sub { display: block; }
  .site-header .brand-name { font-size: 1rem; }
  .site-header .nav-link { padding: 10px 12px; font-size: 0.73rem; }
}

/* ---- Small phones (the site overflowed by up to 49px at 320px).
   The header CTA cannot fit beside the logo and the menu button, so it
   moves into the drawer, where .m-cta picks it up. ---- */
@media (max-width: 599px) {
  .site-header .header-actions .btn { display: none; }
}
@media (max-width: 400px) {
  .wrap { padding-inline: 16px; }
  .site-header .brand-mark { height: 24px; }
}

.m-cta {
  display: none;
  width: 100%;
  justify-content: center;
  margin-bottom: 22px;
}
@media (max-width: 599px) {
  .m-cta { display: inline-flex; }
}

/* ---- Text that measured below 11px, which is under the readable floor
   on a phone. ---- */
.vb-label span,
.vb-label > * { font-size: 0.72rem; }
@media (max-width: 720px) {
  .eyebrow { font-size: 0.75rem; }
  .vb-label span,
  .vb-label > * { font-size: 0.75rem; }
  .field-hint,
  .form-hint { font-size: 0.78rem; }
}

/* ---- Checkbox and radio rows measured 33px tall; 44px is the usual
   minimum for a reliable thumb tap. ---- */
@media (max-width: 900px) {
  .check,
  label.check,
  .checkbox-row,
  fieldset label {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}


/* ---- The header phone number was still showing at tablet widths, where
   it pushed the actions block off-screen (823px of content at 768px). ---- */
@media (max-width: 1159px) {
  .site-header .header-phone { display: none; }
}

/* ---- Long button labels would not wrap, so a single .btn on the Cars page
   measured 349px and forced the whole document wider than a small phone.
   Mobile browsers then stretch the fixed header to match, which is why the
   header looked like the culprit. ---- */
.btn {
  max-width: 100%;
}
@media (max-width: 600px) {
  .btn {
    white-space: normal;
    text-align: center;
    hyphens: auto;
  }
}

/* ---- Contact page: the definition lists put term and value side by side,
   and the value overran the viewport on small phones. ---- */
@media (max-width: 480px) {
  .loc dl,
  .loc dd,
  .loc dt {
    display: block;
    width: auto;
    max-width: 100%;
  }
  .loc dd {
    margin-left: 0;
    word-break: break-word;
  }
}

/* Long email addresses and URLs should never push the page sideways. */
a[href^="mailto:"],
a[href^="tel:"] { word-break: break-word; }


/* ---- Safety net. Every content element measures within the viewport at
   320px, yet the layout viewport still reported 16px of slack. clip (not
   hidden) stops sideways scroll without breaking position: sticky or the
   horizontally scrollable quote rail. ---- */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
  max-width: 100%;
}


/* =====================================================================
   Hero brand rail: all four marks shown together in a row, rather than
   cycling one at a time. Overrides the rotating-banner rules above.
   ===================================================================== */
.brand-rail__stage,
.hero--branded .brand-rail__stage {
  position: static;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
}
.brand-rail__item {
  position: static;
  opacity: 1;
  animation: none;
  transform: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
/* Below the width where all four fit on one line, three-plus-one leaves
   an orphan, so force a tidy 2x2 instead. */
@media (max-width: 979px) {
  .brand-rail__stage,
  .hero--branded .brand-rail__stage {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 20px;
    align-items: center;
    justify-items: start;
  }
  .brand-rail__item { justify-content: flex-start; width: 100%; }
  .brand-rail__item .brand-mark { max-width: 100%; }
}