/* WedgeWorks Golf
   ------------------------------------------------------------------
   Midnight purple over brushed silver. Slab-serif display type
   (American Typewriter) against Helvetica for everything else.
   Skeleton is a fixed left rail with the page scrolling beside it;
   below 1040px the rail becomes a drawer. Single stylesheet, no
   framework, no webfont requests.
   ------------------------------------------------------------------ */

:root {
  --void:        #100b1c;
  --midnight:    #1b1330;
  --midnight-up: #251a41;
  --plum:        #35265c;
  --violet:      #6f56b8;
  --violet-soft: #8f79d1;
  --violet-wash: rgba(111, 86, 184, 0.12);

  --silver:      #b9bdc9;
  --silver-lit:  #d9dce4;
  --pewter:      #7b8090;
  --slate:       #4a4f60;
  --graphite:    #2b2e3a;

  --sheet:       #f6f6f9;
  --sheet-deep:  #ebebf1;
  --card:        #ffffff;
  --hairline:    rgba(27, 19, 48, 0.13);
  --hairline-up: rgba(27, 19, 48, 0.28);
  --glint:       rgba(255, 255, 255, 0.14);

  --display: 'American Typewriter', 'Rockwell', 'Courier New', Georgia, serif;
  --body: Helvetica, 'Helvetica Neue', Arial, sans-serif;

  --rail-w: 272px;
  --read-w: 1080px;
  --corner: 3px;
  --lift-1: 0 1px 2px rgba(16, 11, 28, 0.10);
  --lift-2: 0 16px 42px rgba(16, 11, 28, 0.16);
  --glide: 180ms ease-out;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sheet);
  color: var(--slate);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; }
ul { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
address { font-style: normal; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--midnight);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0 0 0.55em;
}
h1 { font-size: clamp(2.05rem, 4.4vw, 3.15rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.15rem); }
h3 { font-size: 1.16rem; }
h4 { font-size: 1rem; }
p  { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

strong { color: var(--graphite); font-weight: 700; }

::selection { background: var(--violet); color: #fff; }

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--midnight);
  color: var(--silver-lit);
  padding: 12px 20px;
  font-size: 0.85rem;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- shell ---------- */

.shell { position: relative; min-height: 100vh; }

.canvas {
  margin-left: var(--rail-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.canvas > main { flex: 1 1 auto; }

/* ---------- monogram ---------- */

.monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: var(--silver-lit);
  background: linear-gradient(150deg, var(--plum), var(--midnight));
  border: 1px solid var(--glint);
  border-radius: var(--corner);
}
.monogram--lg { width: 54px; height: 54px; flex-basis: 54px; font-size: 1.1rem; }

/* ---------- left rail ---------- */

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-w);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 26px 20px 28px;
  overflow-y: auto;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(111, 86, 184, 0.30), transparent 62%),
    linear-gradient(180deg, var(--midnight) 0%, var(--void) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  scrollbar-width: thin;
}

.rail__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.rail__brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.rail__name {
  font-family: var(--display);
  font-size: 1.02rem;
  color: #fff;
  letter-spacing: 0.005em;
}
.rail__sub {
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--pewter);
  margin-top: 3px;
}

.rail__nav { flex: 1 1 auto; display: flex; flex-direction: column; gap: 22px; }

.rail__heading {
  margin: 0 0 8px;
  font-size: 0.63rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--violet-soft);
}
.rail__group ul { display: flex; flex-direction: column; }
.rail__group a {
  display: block;
  padding: 6px 10px 6px 13px;
  font-size: 0.88rem;
  color: var(--silver);
  border-left: 2px solid transparent;
  transition: color var(--glide), border-color var(--glide), background var(--glide);
}
.rail__group a:hover {
  color: #fff;
  border-left-color: var(--violet-soft);
  background: rgba(255, 255, 255, 0.04);
}
.rail__group a.here {
  color: #fff;
  border-left-color: var(--violet);
  background: rgba(111, 86, 184, 0.20);
}

.rail__foot {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rail__phone {
  font-family: var(--display);
  font-size: 1.18rem;
  color: #fff;
}
.rail__phone:hover { color: var(--violet-soft); }
.rail__note {
  margin: 0;
  font-size: 0.73rem;
  line-height: 1.6;
  color: var(--pewter);
}

/* ---------- mobile bar + drawer ---------- */

.topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 70;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  background: var(--midnight);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--display);
  font-size: 0.98rem;
  color: #fff;
}

.burger {
  width: 42px;
  height: 38px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--corner);
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--silver-lit);
  transition: transform var(--glide), opacity var(--glide);
}
.burger.on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.on span:nth-child(2) { opacity: 0; }
.burger.on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(16, 11, 28, 0.62);
  opacity: 0;
  transition: opacity var(--glide);
}
.scrim.on { opacity: 1; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--corner);
  cursor: pointer;
  transition: transform var(--glide), background var(--glide), color var(--glide), border-color var(--glide);
}
.btn:active { transform: translateY(1px); }

.btn--solid {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet);
}
.btn--solid:hover { background: var(--violet-soft); border-color: var(--violet-soft); }

.btn--line {
  background: transparent;
  color: var(--midnight);
  border-color: var(--hairline-up);
}
.btn--line:hover { border-color: var(--violet); color: var(--violet); }

.btn--ghost {
  background: transparent;
  color: var(--silver-lit);
  border-color: rgba(255, 255, 255, 0.32);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }

.btn--wide { width: 100%; }

.textlink {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--violet);
  border-bottom: 1px solid transparent;
  transition: border-color var(--glide);
}
.textlink:hover { border-bottom-color: var(--violet); }

/* ---------- bands ---------- */

.band { padding: 74px 40px; }
.band--tight { padding: 48px 40px; }
.band--tint { background: var(--sheet-deep); }
.band--deep {
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(111, 86, 184, 0.34), transparent 60%),
    linear-gradient(160deg, var(--midnight), var(--void));
  color: var(--silver);
}
.band--deep h1, .band--deep h2, .band--deep h3 { color: #fff; }
.band--deep .kicker { color: var(--violet-soft); }

.inner { max-width: var(--read-w); margin: 0 auto; }

.kicker {
  display: block;
  margin-bottom: 12px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--violet);
}

.lede {
  font-size: 1.09rem;
  line-height: 1.68;
  color: var(--slate);
  max-width: 62ch;
}
.band--deep .lede { color: var(--silver); }

.bandhead { max-width: 66ch; margin-bottom: 36px; }
.bandhead--mid { margin-left: auto; margin-right: auto; text-align: center; }

.rule {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin: 0;
}

/* ---------- page header ---------- */

.pagehead {
  padding: 62px 40px 46px;
  background:
    linear-gradient(180deg, rgba(111, 86, 184, 0.10), transparent),
    var(--sheet-deep);
  border-bottom: 1px solid var(--hairline);
}
.crumb {
  display: block;
  margin-bottom: 14px;
  font-size: 0.68rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--pewter);
}

/* ---------- masthead (home) ---------- */

.masthead {
  padding: 86px 40px 74px;
  background:
    radial-gradient(80% 130% at 88% 8%, rgba(111, 86, 184, 0.38), transparent 58%),
    linear-gradient(155deg, var(--midnight) 0%, var(--void) 78%);
  color: var(--silver);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.masthead h1 { color: #fff; max-width: 15ch; }
.masthead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 52px;
  align-items: center;
  max-width: var(--read-w);
  margin: 0 auto;
}
.masthead__lede {
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--silver);
  max-width: 54ch;
}
.masthead__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.masthead__flag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 5px 13px;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--violet-soft);
  border: 1px solid rgba(143, 121, 209, 0.45);
  border-radius: 999px;
}
.masthead__flag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet-soft);
}

/* ---------- ledger card ---------- */

.ledger {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--corner);
  padding: 22px 24px 24px;
  backdrop-filter: blur(2px);
}
.ledger__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.ledger__cap strong {
  font-family: var(--display);
  font-size: 0.98rem;
  color: #fff;
  font-weight: 700;
}
.ledger__cap span {
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet-soft);
}
.ledger__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  font-size: 0.87rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.13);
}
.ledger__row:last-child { border-bottom: 0; }
.ledger__row span:first-child { color: var(--pewter); }
.ledger__row span:last-child {
  font-family: var(--display);
  color: #fff;
  white-space: nowrap;
}
.ledger__note {
  margin: 16px 0 0;
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--pewter);
}

/* ---------- counters ---------- */

.counters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--corner);
  overflow: hidden;
}
.counter {
  background: var(--card);
  padding: 26px 20px;
  text-align: center;
}
.counter__fig {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--midnight);
  line-height: 1.1;
}
.counter__cap {
  display: block;
  margin-top: 7px;
  font-size: 0.67rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pewter);
}

/* ---------- split ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.split--wide-left { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }

/* ---------- tiles ---------- */

.tiles { display: grid; gap: 20px; }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tile {
  position: relative;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--corner);
  padding: 26px 24px;
  transition: transform var(--glide), box-shadow var(--glide), border-color var(--glide);
}
.tile::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), transparent);
  opacity: 0;
  transition: opacity var(--glide);
}
.tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--lift-2);
  border-color: var(--hairline-up);
}
.tile:hover::after { opacity: 1; }
.tile h3 { margin-bottom: 0.45em; }
.tile p { font-size: 0.93rem; }
.tile .textlink { margin-top: 14px; }

.tile__idx {
  display: inline-block;
  margin-bottom: 12px;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--violet);
  padding: 3px 9px;
  border: 1px solid var(--violet-wash);
  background: var(--violet-wash);
  border-radius: var(--corner);
}

.tile--flat { background: transparent; border-style: dashed; }
.tile--flat:hover { transform: none; box-shadow: none; }

/* ---------- track (numbered sequence) ---------- */

.track { display: flex; flex-direction: column; }
.track__step {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 22px;
  padding: 0 0 30px;
}
.track__step::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 46px;
  bottom: 0;
  width: 1px;
  background: var(--hairline-up);
}
.track__step:last-child { padding-bottom: 0; }
.track__step:last-child::before { display: none; }
.track__idx {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(150deg, var(--plum), var(--midnight));
  border-radius: var(--corner);
}
.track__body h3 { margin-bottom: 0.35em; }
.track__body p { font-size: 0.95rem; }

/* ---------- quotes ---------- */

.quote {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--violet);
  border-radius: var(--corner);
  padding: 26px 26px 22px;
}
.quote__stars {
  display: block;
  color: var(--violet);
  letter-spacing: 0.22em;
  font-size: 0.82rem;
  margin-bottom: 12px;
}
.quote p { font-size: 0.95rem; color: var(--slate); }
.quote__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--hairline);
}
.initials {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 0.82rem;
  color: var(--silver-lit);
  background: var(--plum);
  border-radius: 50%;
}
.quote__who strong { display: block; color: var(--midnight); font-size: 0.92rem; }
.quote__who span { display: block; font-size: 0.75rem; color: var(--pewter); }

/* ---------- price board ---------- */

.priceboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.price {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--corner);
  padding: 28px 26px;
}
.price--lead {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--violet-wash);
}
.price__tag {
  font-size: 0.66rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 10px;
}
.price__amt {
  font-family: var(--display);
  font-size: 2.15rem;
  color: var(--midnight);
  line-height: 1;
}
.price__unit {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pewter);
  margin-top: 8px;
}
.price__list {
  margin: 20px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1 1 auto;
}
.price__list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.89rem;
}
.price__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: var(--violet);
  border-radius: 1px;
  transform: rotate(45deg);
}

/* ---------- lists ---------- */

.checks { display: flex; flex-direction: column; gap: 11px; margin: 18px 0 0; }
.checks li {
  position: relative;
  padding-left: 26px;
  font-size: 0.94rem;
}
.checks li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--violet);
  font-weight: 700;
}

.linklist { display: flex; flex-direction: column; gap: 7px; }
.linklist a {
  font-size: 0.85rem;
  color: var(--silver);
  transition: color var(--glide);
}
.linklist a:hover { color: #fff; }

.dotlist { display: flex; flex-direction: column; gap: 10px; }
.dotlist li {
  position: relative;
  padding-left: 18px;
  font-size: 0.93rem;
}
.dotlist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 1px;
  background: var(--violet);
}

/* ---------- spec table ---------- */

.spectable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--corner);
  overflow: hidden;
}
.spectable th, .spectable td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
}
.spectable th {
  font-family: var(--display);
  color: var(--midnight);
  background: var(--sheet-deep);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}
.spectable tr:last-child td { border-bottom: 0; }
.tablescroll { overflow-x: auto; }

/* ---------- faq ---------- */

.faqset { display: flex; flex-direction: column; gap: 14px; }
.faqitem {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--corner);
  padding: 22px 24px;
}
.faqitem h3 {
  margin-bottom: 0.4em;
  font-size: 1.04rem;
}
.faqitem p { font-size: 0.94rem; }

/* ---------- crew ---------- */

.crew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.crewcard {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 20px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--corner);
  padding: 24px;
}
.crewcard__badge {
  width: 84px;
  height: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--silver-lit);
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(143, 121, 209, 0.55), transparent 65%),
    linear-gradient(160deg, var(--plum), var(--void));
  border-radius: var(--corner);
}
.crewcard__role {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 6px;
}
.crewcard p { font-size: 0.9rem; }

/* ---------- brand marks ---------- */

.marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mark {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--corner);
  transition: border-color var(--glide);
}
.mark:hover { border-color: var(--violet); }
.mark__abbr {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--violet);
}
.mark strong { font-size: 0.95rem; color: var(--midnight); }
.mark span:last-child { font-size: 0.78rem; color: var(--pewter); }

/* ---------- callout ---------- */

.callout {
  background: var(--violet-wash);
  border: 1px solid rgba(111, 86, 184, 0.28);
  border-radius: var(--corner);
  padding: 22px 24px;
}
.callout h3 { font-size: 1.02rem; }
.callout p { font-size: 0.93rem; }

.notice {
  border-left: 3px solid var(--violet);
  padding: 4px 0 4px 18px;
  font-size: 0.92rem;
  color: var(--slate);
}

/* ---------- forms ---------- */

.formcard {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--corner);
  padding: 30px 28px;
  box-shadow: var(--lift-1);
}
.fieldrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pewter);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 11px 13px;
  color: var(--graphite);
  background: var(--sheet);
  border: 1px solid var(--hairline-up);
  border-radius: var(--corner);
  transition: border-color var(--glide), background var(--glide);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--violet);
  background: #fff;
}
.field textarea { resize: vertical; min-height: 108px; }
.formnote { margin: 14px 0 0; font-size: 0.78rem; color: var(--pewter); line-height: 1.6; }

/* ---------- map plate ---------- */

.plate {
  position: relative;
  height: 210px;
  border: 1px solid var(--hairline-up);
  border-radius: var(--corner);
  background:
    linear-gradient(160deg, var(--midnight), var(--void));
  overflow: hidden;
}
.plate::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(185, 189, 201, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 189, 201, 0.16) 1px, transparent 1px);
  background-size: 34px 34px;
}
.plate__pin {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--violet-soft);
  box-shadow: 0 0 0 8px rgba(143, 121, 209, 0.22), 0 0 0 18px rgba(143, 121, 209, 0.10);
}
.plate__label, .plate__coords {
  position: absolute;
  left: 18px;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--silver);
}
.plate__label { top: 16px; }
.plate__coords { bottom: 16px; color: var(--pewter); }

/* ---------- article ---------- */

.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.7em; font-size: 1.42rem; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 0; }
.prose ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 1px;
  background: var(--violet);
}
.prose ol { list-style: decimal; padding-left: 22px; }
.prose ol li { margin-bottom: 8px; padding-left: 4px; }

.pullquote {
  margin: 30px 0;
  padding: 20px 24px;
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--midnight);
  background: var(--sheet-deep);
  border-left: 3px solid var(--violet);
  border-radius: var(--corner);
}

.postmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.tag {
  display: inline-block;
  padding: 3px 11px;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--violet);
  background: var(--violet-wash);
  border-radius: 999px;
}

.postcard {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--corner);
  padding: 24px;
  transition: transform var(--glide), box-shadow var(--glide);
}
.postcard:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }
.postcard h3 { font-size: 1.08rem; }
.postcard p { font-size: 0.91rem; flex: 1 1 auto; }
.postcard .textlink { margin-top: 16px; align-self: flex-start; }

/* ---------- footer ---------- */

.pagefoot {
  background: linear-gradient(180deg, var(--midnight), var(--void));
  color: var(--silver);
  padding: 58px 40px 0;
}
.pagefoot h2 {
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pagefoot__top {
  max-width: var(--read-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 2fr);
  gap: 46px;
  padding-bottom: 40px;
}
.pagefoot__blurb { font-size: 0.88rem; color: var(--silver); margin: 18px 0 16px; }
.pagefoot__contact { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.pagefoot__contact a { font-size: 0.88rem; color: var(--violet-soft); }
.pagefoot__contact a:hover { color: #fff; }
.pagefoot__addr { font-size: 0.85rem; color: var(--pewter); line-height: 1.7; }
.pagefoot__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.hoursboard { display: flex; flex-direction: column; gap: 6px; }
.hoursboard li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--silver);
  padding-bottom: 5px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.10);
}
.hoursboard li span:first-child { color: var(--pewter); }
.hoursboard__off span:last-child { color: var(--pewter); }

.pagefoot__base {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding: 20px 0 24px;
}
.pagefoot__base p {
  max-width: var(--read-w);
  margin: 0 auto;
  font-size: 0.76rem;
  color: var(--pewter);
}
.pagefoot__base p + p { margin-top: 4px; }

/* ---------- reveal ----------
   Scoped to html.js, which only exists once the inline head script runs.
   Without scripting the content is simply visible — never hidden from a
   reader, a crawler, or a print render. */

.js .riser {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.js .riser.shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .riser { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- utility ---------- */

.mid { text-align: center; }
.gap-sm { margin-top: 18px; }
.gap-md { margin-top: 30px; }
.gap-lg { margin-top: 46px; }
.narrow { max-width: 72ch; }

/* ---------- breakpoints ---------- */

@media (max-width: 1180px) {
  .band, .band--tight, .pagehead, .masthead, .pagefoot { padding-left: 32px; padding-right: 32px; }
  .masthead__grid { gap: 38px; }
  .pagefoot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagefoot__top { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

@media (max-width: 1039px) {
  .topbar { display: flex; }
  .canvas { margin-left: 0; }
  .rail {
    transform: translateX(-100%);
    transition: transform 240ms ease;
    width: 290px;
  }
  .rail.open { transform: none; }
  .masthead__grid { grid-template-columns: minmax(0, 1fr); }
  .split, .split--wide-left, .split--wide-right { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .priceboard { grid-template-columns: minmax(0, 1fr); }
  .marks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crew { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  body { font-size: 15.5px; }
  .band { padding: 52px 20px; }
  .band--tight { padding: 36px 20px; }
  .pagehead { padding: 40px 20px 32px; }
  .masthead { padding: 54px 20px 48px; }
  .pagefoot { padding-left: 20px; padding-right: 20px; }
  .tiles--2, .tiles--3, .tiles--4 { grid-template-columns: minmax(0, 1fr); }
  .marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fieldrow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pagefoot__cols { grid-template-columns: minmax(0, 1fr); }
  .crewcard { grid-template-columns: minmax(0, 1fr); }
  .crewcard__badge { width: 66px; height: 66px; font-size: 1.2rem; }
  .track__step { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .track__idx { width: 48px; height: 40px; font-size: 0.92rem; }
  .track__step::before { left: 24px; top: 40px; }
  .masthead__acts .btn, .cta__acts .btn { width: 100%; }
  .formcard { padding: 22px 18px; }
}

@media print {
  .rail, .topbar, .scrim { display: none; }
  .canvas { margin-left: 0; }
  body { background: #fff; color: #000; }
}