/* ══════════════════════════════════════════════════════════════
   COLLEGE TOWN TRAVEL · modern constructivism
   ink · bone · signal red · condensed caps · diagonals · hard rules
   ══════════════════════════════════════════════════════════════ */

:root{
  /* cool neutrals carry the design; one deep pine accent, used sparingly */
  --ink:#16181A;          /* graphite near-black */
  --ink-2:#1E2124;
  --ink-3:#2F3438;        /* hairline on dark */
  --bone:#EDEEE9;         /* soft neutral paper */
  --bone-2:#DFE1DB;       /* mist, secondary surface */
  --bone-3:#C2C5BD;       /* hairline on light */
  --stone:#5C635F;        /* cool grey: the big geometric masses */
  --stone-2:#838A86;
  --accent:#3D6152;       /* deep pine: fills, blocks, buttons, small text on paper */
  --accent-2:#2F4C40;     /* hovers and deeper accents */
  --accent-deep:#24382F;  /* secondary geometry */
  --accent-lt:#7FA894;    /* accent text on ink */
  --grey:#8B918D;
  --grey-d:#565C58;

  --disp:"Bebas Neue","Bebas Fallback","Bebas Fallback 2",sans-serif;
  --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Open Sans","Helvetica Neue",Arial,sans-serif;

  --pad:clamp(20px,5vw,80px);
  --rule:2px solid var(--ink);
  --rule-bone:2px solid var(--bone);
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-entry:cubic-bezier(.16,.84,.44,1);
  --hdr-h:76px;
}


/* ═══════════════════ display-font fallbacks ═══════════════════
   Bebas Neue is far narrower than anything installed locally, so while it
   loads a headline wrapped onto extra lines and the whole page reflowed when
   it arrived. These two faces re-cut a local font to Bebas' own metrics
   (measured at 100px with canvas TextMetrics), so the fallback occupies the
   same box and the layout never moves. Re-measure if the display font
   changes. */
@font-face{
  font-family:"Bebas Fallback";
  src:local("Arial Narrow"), local("Helvetica Neue Condensed Bold"), local("Liberation Sans Narrow"), local("DejaVu Sans Condensed");
  size-adjust:69.22%;
  ascent-override:130.0%;
  descent-override:43.3%;
  line-gap-override:0%
}
@font-face{
  font-family:"Bebas Fallback 2";
  src:local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust:56.76%;
  ascent-override:158.6%;
  descent-override:52.9%;
  line-gap-override:0%
}

*,*::before,*::after{box-sizing:border-box}
/* Any class rule that sets `display` outranks the [hidden] attribute, which is
   a silent way to leave a hidden panel on screen. Settle it once. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
::selection{background:var(--accent);color:var(--bone)}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}
.sec--ink :focus-visible,.hero :focus-visible,.phead :focus-visible{outline-color:var(--accent-lt)}

.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}

/* ─────────── type primitives ─────────── */
.eyebrow{
  font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;margin:0 0 18px;color:var(--grey-d);
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:34px;height:3px;background:currentColor;flex:none}
.eyebrow--accent{color:var(--accent)}
.eyebrow--ink{color:var(--ink)}

.h2{
  font-family:var(--disp);text-transform:uppercase;line-height:.86;letter-spacing:.005em;
  font-size:clamp(46px,8.2vw,116px);margin:0 0 22px;
}
.h2--bone{color:var(--bone)}
.h2--ink{color:var(--ink)}

.lede{max-width:56ch;font-size:clamp(15px,1.35vw,18px);line-height:1.65;color:var(--grey-d)}
.lede--bone{color:#A3A9A5}
.lede--ink{color:var(--grey-d)}

.fineprint{margin-top:34px;font-size:13px;color:var(--grey);max-width:60ch}

/* ─────────── buttons ─────────── */
.btn{
  --bg:var(--ink);--fg:var(--bone);--bd:var(--ink);--sh:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ui);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 26px 14px;background:var(--bg);color:var(--fg);border:2px solid var(--bd);
  border-radius:0;cursor:pointer;position:relative;white-space:nowrap;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .18s,color .18s;
}
/* the button lifts and a solid block stays behind it, the same hard offset
   the cards and the board use. --sh flips light on dark grounds so it reads. */
.btn:hover,.btn:focus-visible{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--sh)}
.btn:active{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--sh);transition-duration:.06s}
.btn--lg{padding:19px 34px 17px;font-size:13px}
.btn--full{width:100%}
.btn--accent{--bg:var(--accent);--fg:#F4F7F5;--bd:var(--accent);--sh:var(--ink)}
.btn--bone{--bg:var(--bone);--fg:var(--ink);--bd:var(--bone);--sh:var(--accent)}
.btn--ink{--bg:var(--ink);--fg:var(--bone);--bd:var(--ink);--sh:var(--accent)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--ink);--sh:var(--accent)}
/* dark grounds: an ink block would vanish, so the offset goes light */
.hdr .btn--accent,.hero .btn--accent,.welcome .btn--accent,
.phead .btn--accent,.sec--ink .btn--accent{--sh:var(--bone)}
.strip .btn--bone{--sh:var(--accent-lt)}
.hero .btn--ghost{--fg:var(--bone);--bd:var(--bone);--sh:var(--accent-lt)}

.linkarrow{
  display:inline-flex;align-items:center;gap:12px;margin-top:52px;
  font-family:var(--ui);font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  padding-bottom:6px;border-bottom:2px solid currentColor;transition:gap .2s var(--ease)
}
.linkarrow:hover{gap:20px;color:var(--accent)}
.sec--ink .linkarrow{color:var(--bone)}
.sec--ink .linkarrow:hover{color:var(--accent)}

/* ─────────── header ─────────── */
.hdr{
  position:sticky;top:0;z-index:50;height:var(--hdr-h);
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  padding:0 var(--pad);background:var(--ink);color:var(--bone);
  border-bottom:2px solid var(--ink-3);
}
.hdr :focus-visible{outline-color:var(--accent-lt)}

.brand{display:flex;align-items:center;gap:12px;flex:none}
/* The artwork is 3:2 and comes on its own black ground, so the mark box is
   sized to its shape rather than squared off. The square crop of the same
   artwork is used for the favicon, where a square is required. */
.brand__mark{height:38px;flex:none;display:block}
.brand__mark img{height:100%;width:auto;display:block}
.brand__wm{
  font-family:var(--disp);font-size:19px;line-height:.82;letter-spacing:.03em;text-transform:uppercase
}
.brand__wm em{font-style:normal;color:var(--accent)}

.nav{display:flex;gap:clamp(12px,2vw,30px);margin-left:auto}
.nav a{
  font-family:var(--ui);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 0;border-bottom:2px solid transparent;transition:.18s
}
.nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.hdr__cta{flex:none;padding:12px 20px 11px;font-size:11px}

.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;margin-left:auto}
.burger span{display:block;width:24px;height:2.5px;background:var(--bone);margin:5px 0;transition:.22s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ─────────── nav active state ─────────── */
.nav a[aria-current="page"]{border-bottom-color:var(--accent-lt);color:var(--accent-lt)}

/* ─────────── page head (every page but home) ─────────── */
.phead{
  position:relative;background:var(--ink);color:var(--bone);overflow:hidden;
  padding:clamp(34px,4.4vw,62px) var(--pad) clamp(44px,5.4vw,78px)
}
.phead__geo{position:absolute;inset:0;pointer-events:none}
.phead__geo svg{width:100%;height:100%}
.phead__geo .p-mass{fill:var(--stone)}
.phead__geo .p-line{fill:var(--accent)}
.phead__inner{position:relative;max-width:1440px;margin:0 auto}
.phead__h{
  font-family:var(--disp);text-transform:uppercase;line-height:.85;letter-spacing:.005em;
  font-size:clamp(46px,7.6vw,112px);margin:0 0 20px
}
.phead__p{max-width:56ch;font-size:clamp(15px,1.35vw,18px);line-height:1.62;color:#A3A9A5}

.crumbs{
  display:flex;align-items:center;gap:10px;margin-bottom:26px;
  font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase
}
.crumbs a{color:var(--grey);border-bottom:2px solid transparent;padding-bottom:2px;transition:.16s}
.crumbs a:hover{color:var(--bone);border-bottom-color:var(--accent)}
.crumbs span{color:var(--grey-d)}
.crumbs b{font-weight:800;color:var(--bone)}

/* ─────────── home: four ways in ─────────── */
#start{padding-bottom:clamp(46px,5vw,82px)}
.start{
  max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
  gap:2px;background:var(--ink);border:2px solid var(--ink)
}
.start__c{
  position:relative;display:flex;flex-direction:column;padding:28px 24px 24px;
  background:var(--bone);color:var(--ink);overflow:hidden;transition:background .22s var(--ease)
}
.start__c::before{
  content:"";position:absolute;top:0;left:0;width:0;height:6px;background:var(--accent);transition:width .3s var(--ease)
}
.start__c:hover::before{width:100%}
.start__c:hover{background:var(--bone-2)}
.start__n{font-family:var(--disp);font-size:15px;letter-spacing:.16em;color:var(--accent);margin-bottom:16px}
.start__c h3{font-family:var(--disp);font-size:clamp(28px,2.9vw,40px);line-height:.94;text-transform:uppercase;margin-bottom:12px}
.start__c p{font-size:14.5px;line-height:1.6;color:var(--grey-d);margin-bottom:22px}
.start__go{
  margin-top:auto;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  transition:gap .2s var(--ease)
}
.start__c:hover .start__go{gap:18px;color:var(--accent)}
.start__c--accent{background:var(--accent);color:#fff}
.start__c--accent p{color:rgba(255,255,255,.85)}
.start__c--accent .start__n{color:var(--ink)}
.start__c--accent::before{background:var(--ink)}
.start__c--accent:hover{background:var(--accent-2)}
.start__c--accent:hover .start__go{color:#fff}

/* ─────────── next-step band ─────────── */
.nextstep{
  max-width:1440px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:center
}
.nextstep .h2{margin-bottom:16px;font-size:clamp(38px,5.2vw,72px)}
.creds--wide{justify-content:flex-start;gap:44px;border-top:0;padding-top:0}
.creds--wide img{height:40px;opacity:.65}

/* ─────────── hero ─────────── */
.hero{
  position:relative;background:var(--ink);color:var(--bone);
  padding:clamp(26px,2.8vw,28px) var(--pad) clamp(84px,9vw,148px);overflow:hidden;
}
.hero__geo{position:absolute;inset:0;pointer-events:none}
.hero__geo svg{width:100%;height:100%}
.g-mass{fill:var(--stone)}
.g-line{fill:var(--accent)}
.g-ring{fill:none;stroke:var(--bone);stroke-width:2;opacity:.16}
.g-ring--2{stroke:var(--accent);opacity:.5}
.g-arrow{fill:none;stroke:var(--bone);stroke-width:5;opacity:.2}

.hero__inner{
  position:relative;max-width:1440px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);
  gap:clamp(32px,5vw,72px);align-items:start;
}
.hero .eyebrow{margin-bottom:13px}
.hero__h1{
  font-family:var(--disp);text-transform:uppercase;line-height:.82;letter-spacing:.004em;
  font-size:clamp(52px,9.4vw,148px);margin:0 0 28px;
}
.hero__h1 span{display:block}
.hero__h1 .l1{--i:0}
.hero__h1 .l2{--i:1;padding-left:.09em}
.hero__h1 .l3{--i:2}
/* The lines slide in from the left, one after another. Gated on the font being
   ready rather than on page load: the headline is held at opacity 0 until then
   (see the display-type fade), so an animation tied to load would play out
   invisibly and be over before you could see it. .hero clips, so nothing
   overflows while a line is still off to the left. */
html:not(.fonts-pending) .hero__h1 span{
  animation:heroSlide .62s var(--ease-entry) both;
  animation-delay:calc(var(--i,0) * 120ms)
}
@keyframes heroSlide{
  from{opacity:0;transform:translateX(-48px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html:not(.fonts-pending) .hero__h1 span{animation:none}
}
.hero__h1 .l3{color:var(--bone)}
.hero__h1 em{font-style:normal;color:var(--accent);position:relative}
.hero__sub{max-width:54ch;font-size:clamp(15px,1.4vw,18.5px);line-height:1.66;color:#A3A9A5}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__ticks{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px}
.hero__ticks li{
  font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#98A09B;display:flex;align-items:center;gap:9px
}
.hero__ticks li::before{content:"";width:9px;height:9px;background:var(--accent);flex:none}

/* booking board */
.board{background:var(--bone);color:var(--ink);border:var(--rule);box-shadow:12px 12px 0 var(--accent)}
.board__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:var(--rule)}
.board__hd h2{font-family:var(--disp);font-size:26px;text-transform:uppercase;line-height:1}
.board__live{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--ui);font-weight:800;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-d)
}
.board__live i{width:8px;height:8px;background:var(--accent);border-radius:50%;animation:pulse 1.9s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.board__list li{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:13px 20px;border-bottom:1px solid var(--bone-3)}
/* The rows drop into the board one after another, like a departure board
   filling in. Hung off .rv-in so it starts when the board itself arrives
   rather than the moment the script builds the rows, which would otherwise
   finish before the board had faded in. --i is set per row in js/site.js.
   With no .rv-in (reduced motion, or no JS) the rows are simply there. */
.board.rv-in .board__list li{
  animation:boardDrop .46s var(--ease-entry) both;
  animation-delay:calc(var(--i,0) * 80ms)
}
@keyframes boardDrop{
  from{opacity:0;transform:translateY(-10px);clip-path:inset(0 0 100% 0)}
  to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}
@media (prefers-reduced-motion:reduce){
  .board.rv-in .board__list li{animation:none}
}
.board__ev{font-family:var(--ui);font-weight:800;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
.board__mk{grid-column:1;font-size:12px;color:var(--grey-d)}
.board__cd{
  grid-row:1/3;grid-column:2;align-self:center;text-align:right;
  font-family:var(--disp);font-size:30px;line-height:.9;color:var(--accent)
}
.board__cd small{display:block;font-family:var(--ui);font-size:9px;font-weight:800;letter-spacing:.16em;color:var(--grey-d)}
.board__foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 20px;
  background:var(--ink);color:var(--bone);
  font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;transition:.2s
}
.board__foot:hover{background:var(--accent)}

/* ─────────── marquee ─────────── */
.marquee{background:var(--stone);color:var(--bone);border-top:var(--rule);border-bottom:var(--rule);overflow:hidden;padding:12px 0}
.marquee__row{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite}
.marquee__row span{
  font-family:var(--disp);font-size:clamp(30px,4.6vw,62px);line-height:1;text-transform:uppercase;
  letter-spacing:.02em;padding:0 26px;display:inline-flex;align-items:center;gap:26px;white-space:nowrap
}
.marquee__row span::after{content:"";width:14px;height:14px;background:var(--ink);flex:none;transform:rotate(45deg)}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__row{animation:none}}

/* ─────────── scrolling partner strip ─────────── */
.logostrip{
  position:relative;max-width:1440px;margin:0 auto;overflow:hidden;
  border-top:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.logostrip__row{display:flex;width:max-content;animation:slide 52s linear infinite}
.logostrip:hover .logostrip__row{animation-play-state:paused}
.logostrip__i{
  flex:none;display:grid;place-items:center;
  width:clamp(148px,14vw,206px);height:clamp(92px,9vw,124px);padding:0 22px;
  border-right:1px solid var(--ink-3)
}
.logostrip__i img{max-height:44px;width:auto;opacity:.5;transition:opacity .2s}
.logostrip__i:hover img{opacity:1}
.logostrip__i img[src$=".webp"]{filter:brightness(0) invert(1)}
@media (prefers-reduced-motion:reduce){
  .logostrip{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .logostrip__row{animation:none}
}

/* steps on a light section */
.steps--bone .step + .step{border-left-color:var(--bone-3)}
.steps--bone .step h3{color:var(--ink)}
.steps--bone .step p{color:var(--grey-d)}

/* ─────────── stats ─────────── */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink);color:var(--bone);
  border-bottom:2px solid var(--ink-3)
}
.stat{padding:clamp(28px,3.6vw,48px) var(--pad);border-right:1px solid var(--ink-3)}
.stat:last-child{border-right:0}
.stat b{
  display:block;font-family:var(--disp);font-weight:400;font-size:clamp(46px,6vw,86px);
  line-height:.85;letter-spacing:.01em;color:var(--bone)
}
.stat span{
  display:block;margin-top:12px;font-family:var(--ui);font-weight:700;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--grey)
}
.stat:nth-child(2) b,.stat:nth-child(4) b{color:var(--accent)}

/* ─────────── sections ─────────── */
.sec{padding:clamp(64px,8.5vw,132px) var(--pad);position:relative}
.sec.tight{padding-top:clamp(48px,6vw,90px);padding-bottom:clamp(48px,6vw,90px)}
.sec--bone{background:var(--bone)}
.sec--ink{background:var(--ink);color:var(--bone)}
.sec--mist{background:var(--bone-2);color:var(--ink)}
.sec--ink + .sec--bone,.sec--bone + .sec--ink{border-top:0}
.sec__hd{max-width:1440px;margin:0 auto clamp(40px,5vw,72px)}
.sec__hd--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:end}

/* ─────────── calendar ─────────── */
.cal{
  max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;background:var(--ink);border:2px solid var(--ink)
}
.calc{
  position:relative;display:flex;flex-direction:column;
  padding:26px 24px 24px;background:var(--bone);transition:background .22s var(--ease)
}
.calc::before{
  content:"";position:absolute;top:0;left:0;width:0;height:6px;background:var(--accent);transition:width .3s var(--ease)
}
.calc:hover::before,.calc.is-on::before{width:100%}
.calc.is-on{background:var(--bone-2)}
.calc__n{
  font-family:var(--disp);font-size:15px;letter-spacing:.16em;color:var(--accent);display:block;margin-bottom:14px
}
.calc__h{font-family:var(--disp);font-size:clamp(28px,3vw,40px);line-height:.92;text-transform:uppercase;margin-bottom:10px}
.calc__when{
  font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grey-d);margin-bottom:14px
}
.calc__p{font-size:14.5px;line-height:1.6;color:var(--grey-d);margin-bottom:18px}
.calc__meta{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 20px}
.calc__meta span{
  font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:1.5px solid var(--ink);padding:5px 9px 4px
}
.calc__meta span.hot{background:var(--accent);border-color:var(--accent);color:#fff}
.calc__tog{
  display:flex;align-items:center;gap:10px;width:100%;background:none;border:2px solid var(--ink);
  padding:10px 12px;cursor:pointer;font-family:var(--ui);font-weight:800;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;transition:.18s
}
.calc__tog i{width:16px;height:16px;border:2px solid var(--ink);flex:none;position:relative;transition:.18s}
.calc__tog:hover{background:var(--ink);color:var(--bone)}
.calc__tog:hover i{border-color:var(--bone)}
.calc.is-on .calc__tog{background:var(--accent);border-color:var(--accent);color:#fff}
.calc.is-on .calc__tog i{background:#fff;border-color:#fff}
.calc.is-on .calc__tog i::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  clip-path:polygon(14% 46%,38% 70%,86% 18%,96% 30%,38% 92%,4% 58%)
}
.cal__cta{
  max-width:1440px;margin:34px auto 0;display:flex;align-items:center;gap:20px;flex-wrap:wrap
}
.cal__count{font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-d)}

/* ─────────── steps ─────────── */
.steps{
  max-width:1440px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0
}
.step{position:relative;padding:0 clamp(18px,2.4vw,34px) 0 0}
.step + .step{padding-left:clamp(18px,2.4vw,34px);border-left:1px solid var(--ink-3)}
.step__n{
  display:block;font-family:var(--disp);font-size:clamp(58px,7vw,104px);line-height:.8;
  color:var(--accent);margin-bottom:6px
}
.step h3{font-family:var(--disp);font-size:clamp(26px,2.6vw,36px);text-transform:uppercase;line-height:1;margin:0 0 14px;color:var(--bone)}
.step p{font-size:14.5px;line-height:1.62;color:#A3A9A5}

/* ─────────── why grid ─────────── */
.why{
  max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;background:var(--ink);border:2px solid var(--ink)
}
.why__c{padding:30px 26px 32px;background:var(--bone)}
.why__k{
  font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px
}
.why__c h3{font-family:var(--disp);font-size:clamp(26px,2.5vw,36px);line-height:.96;text-transform:uppercase;margin-bottom:12px}
.why__c p{font-size:14.5px;line-height:1.62;color:var(--grey-d)}

/* ─────────── towns ─────────── */
.filters{max-width:1440px;margin:0 auto 26px;display:flex;flex-wrap:wrap;gap:8px}
.filters button{
  background:none;border:2px solid var(--ink-3);color:var(--grey);padding:9px 15px 8px;cursor:pointer;
  font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;transition:.18s
}
.filters button:hover{border-color:var(--bone);color:var(--bone)}
.filters button.is-on{background:var(--accent);border-color:var(--accent);color:#fff}

.towns{
  max-width:1440px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);
  gap:1px;background:var(--ink-3);border:1px solid var(--ink-3)
}
.town{
  position:relative;padding:20px 20px 22px;background:var(--ink);
  overflow:hidden;transition:background .22s
}
.town:hover{background:var(--ink-2)}
.town::after{
  content:"";position:absolute;right:-30px;bottom:-30px;width:80px;height:80px;background:var(--accent);
  transform:rotate(45deg) scale(0);transform-origin:center;transition:transform .3s var(--ease)
}
.town:hover::after{transform:rotate(45deg) scale(1)}
.town__i{font-family:var(--disp);font-size:12px;letter-spacing:.16em;color:var(--grey-d)}
.town__n{font-family:var(--disp);font-size:clamp(26px,2.4vw,34px);line-height:.95;text-transform:uppercase;color:var(--bone);margin:6px 0 4px}
.town__s{font-family:var(--ui);font-weight:700;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);margin-bottom:14px}
.town__w{position:relative;z-index:1;font-size:13px;line-height:1.5;color:#A3A9A5;padding-top:12px;border-top:1px solid var(--ink-3)}
.town__w b{display:block;font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.town__go{
  position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin-top:12px;
  font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);white-space:nowrap;transition:gap .2s var(--ease),color .2s
}
.town__go .ico{flex:none}
.town:hover .town__go{gap:14px;color:var(--bone)}
.town[hidden]{display:none}

/* ─────────── budget tool ─────────── */
.tool{
  max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);
  border:var(--rule);background:var(--bone)
}
.tool__in{padding:clamp(24px,3vw,40px);display:grid;gap:22px;align-content:start}
.tool__out{padding:clamp(24px,3vw,40px);background:var(--ink);color:var(--bone);border-left:var(--rule)}

/* ─────────── two-step booking flow ─────────── */
.anchor{display:block;height:0;overflow:hidden}
.flowbar{
  max-width:1440px;margin:0 auto clamp(26px,3.2vw,42px);
  display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;
  padding-bottom:15px;border-bottom:2px solid var(--ink)
}
.flowbar__steps{display:flex;flex-wrap:wrap;gap:0}
.flowbar__steps li{
  position:relative;display:flex;align-items:center;gap:9px;margin-right:34px;
  font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--grey-d);transition:color .3s
}
.flowbar__steps li + li{padding-left:26px}
.flowbar__steps li + li::before{
  content:"";position:absolute;left:0;top:50%;width:16px;height:2px;background:var(--bone-3)
}
.flowbar__steps li span{
  /* --bone-3 read as invisible here; the state still differs by weight of colour */
  font-family:var(--disp);font-size:18px;letter-spacing:.06em;color:var(--grey-d);transition:color .3s
}
.flowbar__steps li.is-on{color:var(--ink)}
.flowbar__steps li.is-on span{color:var(--accent-2)}
.flowbar__back{
  display:inline-flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;padding:4px 0;
  font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--grey-d);border-bottom:2px solid currentColor;transition:gap .2s var(--ease),color .2s
}
.flowbar__back:hover{gap:15px;color:var(--accent-2)}
.flowbar__back[hidden]{display:none}

/* No JS: the track is a plain block and both steps simply stack, readable.
   With JS the steps become a gapped row. The gap keeps the off-screen step
   clear of the visible edge and leaves the cards' hard shadows somewhere to
   land, which horizontal padding could not do inside overflow:hidden. */
.flow--on{
  --flow-gap:64px;
  overflow:hidden;padding:2px 0 30px;margin-bottom:-30px;
  transition:height .45s var(--ease)
}
.flow--on .flow__track{
  display:flex;align-items:flex-start;gap:var(--flow-gap);width:max-content;
  transition:transform .45s var(--ease)
}
.flow--on .flow__step{width:var(--flow-w);flex:none;min-width:0}
@media (max-width:620px){.flow--on{--flow-gap:34px;padding-bottom:22px;margin-bottom:-22px}}

.fld{display:grid;gap:8px}
.fld label,.fld .lbl{
  font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px
}
.fld output{font-family:var(--disp);font-size:19px;letter-spacing:.04em;color:var(--accent)}
.sec--mist .fld output{color:var(--accent-2)}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld input:not([type]),.fld select,.fld textarea{
  width:100%;background:transparent;border:2px solid var(--ink);border-radius:0;padding:12px 13px;
  font-family:var(--body);font-size:15px;transition:.18s
}
.fld select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px;cursor:pointer
}
/* range inputs are excluded: they have no border, so this rule only painted the
   offset shadow, which read as a slab under the track while you dragged */
.fld input:not([type=range]):focus,.fld select:focus,.fld textarea:focus{
  outline:0;border-color:var(--accent);box-shadow:4px 4px 0 var(--accent)
}
.fld textarea{resize:vertical;min-height:110px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* range */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;margin:0
}
/* no opacity here: the thumb is a child of the track, so it would fade too */
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--bone-3)}
input[type=range]::-moz-range-track{height:4px;background:var(--bone-3)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;background:var(--accent);border:2px solid var(--ink);
  border-radius:0;margin-top:-9px;transition:transform .15s
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;background:var(--accent);border:2px solid var(--ink);border-radius:0
}
input[type=range]:hover::-webkit-slider-thumb{transform:rotate(45deg)}
.sec--mist input[type=range]::-webkit-slider-thumb{background:var(--accent)}
.sec--mist input[type=range]::-moz-range-thumb{background:var(--accent)}
/* Focus shows on the thumb, not as an outline around the input box. That box is
   the full width of the column and transparent, so outlining it drew a long
   rule that read as a border under the row. Keyboard users still get a clear
   indicator; dragging with a mouse shows nothing extra. */
input[type=range]:focus{outline:0}
input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 3px var(--accent-2);transform:rotate(45deg)
}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--accent-2)}
.sec--ink input[type=range]:focus-visible::-webkit-slider-thumb,
.hero input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--accent-lt)}

/* segmented */
.seg{display:grid;grid-auto-flow:column;border:2px solid var(--ink)}
.seg button{
  background:none;border:0;border-right:2px solid var(--ink);padding:12px 8px;cursor:pointer;
  font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;transition:.16s
}
.seg button:last-child{border-right:0}
.seg button:hover{background:rgba(22,24,26,.09)}
.seg button.is-on{background:var(--ink);color:var(--bone)}

.chk{display:flex;align-items:center;gap:11px;cursor:pointer;font-size:14px;font-weight:500}
.chk input{
  appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid var(--ink);
  flex:none;position:relative;cursor:pointer;background:transparent
}
.chk input:checked{background:var(--ink)}
.chk input:checked::after{
  content:"";position:absolute;inset:2px;background:var(--accent);
  clip-path:polygon(14% 46%,38% 70%,86% 18%,96% 30%,38% 92%,4% 58%)
}

.tool__k{font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.tool__big{
  font-family:var(--disp);font-size:clamp(38px,4.6vw,62px);line-height:.9;margin:10px 0 6px;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap
}
.tool__big i{
  font-style:normal;color:var(--accent);font-family:var(--ui);font-weight:800;
  font-size:.3em;letter-spacing:.16em;text-transform:uppercase;position:relative;top:-.12em
}
.tool__sub{font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);margin-bottom:26px}
.bars{display:grid;gap:13px;margin-bottom:26px}
.bars li{display:grid;gap:6px}
.bars .bl{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:#A3A9A5}
.bars .bl b{font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--bone)}
.bars .bt{height:8px;background:var(--ink-3);overflow:hidden}
.bars .bf{display:block;height:100%;background:var(--accent);width:0;transition:width .5s var(--ease)}
.bars li:nth-child(2) .bf{background:var(--bone-3)}
.bars li:nth-child(3) .bf{background:var(--grey-d)}
.bars li:nth-child(4) .bf{background:var(--accent-deep)}
.tool__note{border-top:1px solid var(--ink-3);padding-top:18px;font-size:13px;line-height:1.55;color:#A3A9A5}
.tool__note b{font-family:var(--disp);font-size:21px;letter-spacing:.03em;color:var(--accent);display:block;margin-bottom:6px}
.tool__go{margin-top:22px;--bg:var(--bone);--fg:var(--ink);--bd:var(--bone);--sh:var(--accent-lt)}

/* ─────────── alerts ─────────── */
.alerts{
  max-width:1440px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,.85fr);gap:clamp(32px,5vw,80px);align-items:start
}
.alerts__list{margin-top:32px;display:grid;gap:0;border-top:1px solid var(--bone-3)}
.alerts__list li{
  padding:15px 0 15px 34px;border-bottom:1px solid var(--bone-3);position:relative;
  font-size:14.5px;color:var(--grey-d)
}
.alerts__list li::before{
  content:"";position:absolute;left:0;top:20px;width:16px;height:3px;background:var(--accent)
}
.estimate{
  background:var(--bone);border:2px solid var(--ink);padding:22px 24px 24px;margin-bottom:32px
}
.estimate__k{
  font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey-d)
}
.estimate__big{
  font-family:var(--disp);font-size:clamp(30px,3.4vw,44px);line-height:.95;margin:8px 0 18px;
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap
}
.estimate__big i{
  font-style:normal;font-family:var(--ui);font-weight:800;font-size:.26em;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);position:relative;top:-.14em
}
.estimate__dl{display:grid;gap:0;margin:0;border-top:1px solid var(--bone-3)}
.estimate__dl > div{
  display:grid;grid-template-columns:minmax(112px,.44fr) 1fr;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--bone-3)
}
.estimate__dl dt{
  font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-d)
}
.estimate__dl dd{margin:0;font-size:13.5px}
.estimate__back{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  border-bottom:2px solid currentColor;padding-bottom:3px;transition:gap .2s var(--ease)
}
.estimate__back:hover{gap:15px;color:var(--accent-2)}
@media (max-width:620px){.estimate__dl > div{grid-template-columns:1fr;gap:2px}}

.card{background:var(--bone);color:var(--ink);border:var(--rule);padding:clamp(24px,3vw,38px);display:grid;gap:18px;box-shadow:12px 12px 0 var(--accent)}
.card__h{font-family:var(--disp);font-size:clamp(30px,3.2vw,42px);text-transform:uppercase;line-height:.95}
.chips{border:0;padding:0;margin:0;display:grid;gap:11px}
.chips legend{
  font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:0
}
.chips__row{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);padding:8px 13px 7px;cursor:pointer;
  font-family:var(--ui);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;transition:.16s
}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:hover{background:rgba(22,24,26,.07)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
/* the real checkbox is visually hidden, so the ring has to go on the label */
.chip:has(input:focus-visible){outline:3px solid var(--accent-2);outline-offset:3px}
.sec--ink .chip:has(input:focus-visible){outline-color:var(--accent-lt)}
.formctx{
  font-size:13.5px;line-height:1.55;color:var(--grey-d);
  background:var(--bone-2);border-left:4px solid var(--accent);padding:11px 14px
}
.formctx b{color:var(--ink)}
.formerr{
  font-family:var(--ui);font-weight:700;font-size:13px;line-height:1.5;
  background:var(--bone-2);color:var(--ink);padding:13px 15px;border-left:6px solid var(--accent-2)
}
.formnote{font-size:12px;color:var(--grey);line-height:1.5}
.formok{
  font-family:var(--ui);font-weight:700;font-size:13px;line-height:1.5;
  background:var(--ink);color:var(--bone);padding:14px 16px;border-left:6px solid var(--accent)
}

/* ─────────── logo walls ─────────── */
.wall{max-width:1440px;margin:0 auto;display:grid;gap:1px;grid-template-columns:repeat(6,1fr);border:1px solid}
.wall--programs{background:var(--bone-3);border-color:var(--bone-3)}
.wall--hotels{background:var(--ink-3);border-color:var(--ink-3)}
.wall figure{
  margin:0;display:grid;place-items:center;min-height:122px;padding:26px 20px;transition:background .2s
}
.wall--programs figure{background:var(--bone)}
.wall--hotels figure{background:var(--ink)}
.wall__more{
  font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--grey);text-align:center;line-height:1.7
}
.wall--programs figure:hover{background:var(--bone-2)}
.wall--hotels figure:hover{background:var(--ink-2)}
.wall img{max-height:56px;width:auto;object-fit:contain;transition:opacity .2s,filter .2s}
/* programs were cut as white-on-transparent → invert for the bone section */
.wall--programs img{filter:invert(1) brightness(.16);opacity:.62}
.wall--programs figure:hover img{opacity:1}
.wall--hotels img{opacity:.55}
.wall--hotels figure:hover img{opacity:1}
.wall--hotels img[src$=".webp"]{filter:brightness(0) invert(1)}

/* ─────────── contact ─────────── */
.contact{
  max-width:1440px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);gap:clamp(32px,5vw,80px);align-items:start
}
.contact__h{font-size:clamp(52px,8vw,116px)}
.contact__meta{margin:38px 0 0;display:grid;gap:0;border-top:var(--rule)}
.contact__meta > div{
  display:grid;grid-template-columns:minmax(120px,.4fr) 1fr;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--bone-3)
}
.contact__meta dt{font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-d)}
.contact__meta dd{margin:0;font-size:14.5px}
.phone{display:grid;grid-template-columns:auto 1fr;gap:10px}
.phone__cc{
  display:grid;place-items:center;border:2px solid var(--ink);padding:0 15px;
  font-family:var(--disp);font-size:20px;letter-spacing:.05em
}
.creds{
  display:flex;flex-wrap:wrap;align-items:center;gap:26px;justify-content:center;
  padding-top:22px;border-top:1px solid var(--bone-3)
}
.creds img{height:30px;width:auto;filter:invert(1) brightness(.3);opacity:.55}

/* ─────────── cta strip ─────────── */
.strip{
  position:relative;background:var(--ink);color:var(--bone);overflow:hidden;
  padding:clamp(64px,9vw,130px) var(--pad);text-align:center
}
.strip__geo{position:absolute;inset:0;pointer-events:none;opacity:.9}
.strip__geo svg{width:100%;height:100%}
.strip__geo .s-wedge{fill:var(--stone)}
.strip__geo .s-sliver{fill:var(--accent-deep)}
.strip__h{
  position:relative;font-family:var(--disp);text-transform:uppercase;line-height:.85;
  font-size:clamp(56px,11vw,168px);margin-bottom:26px
}
/* headline sits on its own skewed red block, always aligned whatever the viewport */
.strip__h span{position:relative;display:inline-block;padding:.1em .16em .04em;isolation:isolate}
.strip__h span::before{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:skewY(-2.2deg);z-index:-1
}
.strip__p{position:relative;max-width:52ch;margin:0 auto 34px;color:#A3A9A5;font-size:clamp(15px,1.4vw,18px)}
.strip .btn{position:relative}

/* ─────────── footer ─────────── */
.ftr{background:var(--ink);color:var(--bone);padding:clamp(48px,6vw,86px) var(--pad) 34px;border-top:2px solid var(--ink-3)}
.ftr__top{
  max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);
  gap:clamp(28px,4vw,64px);padding-bottom:44px;border-bottom:1px solid var(--ink-3)
}
.brand--ftr .brand__mark{height:50px}   /* the footer wordmark is bigger too */
.brand--ftr .brand__wm{font-size:26px}
.ftr__nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px}
.ftr__nav h4{font-family:var(--ui);font-weight:800;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.ftr__nav a{display:block;padding:5px 0;font-size:14px;color:#A3A9A5;transition:.16s}
.ftr__nav a:hover{color:var(--bone);padding-left:6px}
.ftr__bot{max-width:1440px;margin:0 auto;padding-top:24px;display:grid;gap:10px}
.ftr__bot p{font-size:12px;color:var(--grey-d)}
.ftr__disc{max-width:88ch;line-height:1.55}

/* ─────────── responsive ─────────── */
@media (max-width:1280px){
  .wall{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1180px){
  .cal,.why,.start{grid-template-columns:repeat(2,1fr)}
  .towns{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1080px){
  .hero__inner{grid-template-columns:1fr}
  .board{max-width:520px}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--ink-3)}
  .tool{grid-template-columns:1fr}
  .tool__out{border-left:0;border-top:var(--rule)}
  .alerts,.contact,.sec__hd--split,.ftr__top{grid-template-columns:1fr}
  .nextstep{grid-template-columns:1fr;justify-items:start}
  .steps{grid-template-columns:1fr 1fr;gap:34px 0}
  .step:nth-child(odd){padding-left:0;border-left:0}
}
@media (max-width:860px){
  :root{--hdr-h:66px}
  .towns{grid-template-columns:repeat(2,1fr)}
  .wall{grid-template-columns:repeat(2,1fr)}
  .nav{
    position:fixed;inset:var(--hdr-h) 0 auto;flex-direction:column;gap:0;background:var(--ink);
    padding:8px var(--pad) 24px;transform:translateY(-120%);transition:transform .3s var(--ease);
    border-bottom:2px solid var(--accent);max-height:calc(100vh - var(--hdr-h));overflow:auto
  }
  .nav.is-open{transform:translateY(0)}
  .nav a{color:var(--bone);font-size:16px;padding:15px 0;border-bottom:1px solid var(--ink-3)}
  .hdr__cta{display:none}
  .burger{display:block}
  .board{box-shadow:8px 8px 0 var(--accent)}
  .card{box-shadow:8px 8px 0 var(--accent)}
}
@media (max-width:620px){
  .cal,.why,.towns,.start{grid-template-columns:1fr}
  .creds--wide{gap:26px}
  .creds--wide img{height:30px}
  /* 30 towns in one column gets long, so tighten the cards */
  .town{padding:14px 16px 16px}
  .town__n{font-size:25px;margin:3px 0 2px}
  .town__s{margin-bottom:9px}
  .town__w{padding-top:9px;font-size:12.5px}
  .steps{grid-template-columns:1fr}
  .step{padding-left:0!important;border-left:0!important;padding-right:0}
  .step + .step{border-top:1px solid var(--ink-3);padding-top:26px}
  .row{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--ink-3)}
  .hero__ticks{gap:8px 18px}
  .contact__meta > div{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ══════════════════════════════════════════════════════════════
   ACCENT LEGIBILITY
   Clay sits mid-tone, so small accent text steps darker on oat and
   lighter on ink. Large display type can carry the base accent.
   ══════════════════════════════════════════════════════════════ */
.eyebrow--accent{color:var(--accent-2)}
.hero .eyebrow--accent,
.phead .eyebrow--accent,
.sec--ink .eyebrow--accent,
.strip .eyebrow--accent,
.welcome .eyebrow--accent{color:var(--accent-lt)}

.why__k,.calc__n,.start__n{color:var(--accent-2)}
.sec--ink .why__k{color:var(--accent-lt)}

.step__n{color:var(--accent-lt)}
.steps--bone .step__n{color:var(--accent-2)}

.stat:nth-child(2) b,.stat:nth-child(4) b{color:var(--accent-lt)}
.town__w b,.ftr__nav h4,.tool__note b,.tool__big i{color:var(--accent-lt)}
.hero__h1 em{color:var(--accent-lt)}
.brand__wm em{color:var(--accent-2)}
.hdr .brand__wm em,.brand--ftr .brand__wm em{color:var(--accent-lt)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent-2);border-bottom-color:var(--accent-2)}
.hdr .nav a:hover,
.hdr .nav a[aria-current="page"]{color:var(--accent-lt);border-bottom-color:var(--accent-lt)}
.linkarrow:hover{color:var(--accent-2)}
.sec--ink .linkarrow:hover{color:var(--accent-lt)}
.board__cd{color:var(--accent-2)}

/* ── contrast corrections found by audit ── */
.ftr__bot p{color:var(--grey)}          /* fine print was too dark on ink */
.crumbs span{color:var(--grey)}
.town__i{color:var(--grey)}
.formnote,.wall__more{color:var(--grey-d)}   /* and too light on oat */
.start__c--accent .start__n{color:#F4F7F5}

/* ══════════════════════════════════════════════════════════════
   FIRST-VISIT DIALOG
   Replaces the old announcement bar. Shown once per device, then
   remembered in localStorage. Injected by js/site.js.
   ══════════════════════════════════════════════════════════════ */
.welcome{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(16px,4vw,40px)}
.welcome[hidden]{display:none}
.welcome__veil{position:absolute;inset:0;background:rgba(10,12,11,.74);animation:wfade .34s var(--ease-entry)}
.welcome__panel{
  position:relative;isolation:isolate;width:min(580px,100%);max-height:calc(100vh - 40px);overflow:auto;
  background:var(--ink);color:var(--bone);border:2px solid var(--accent);
  box-shadow:14px 14px 0 var(--accent-deep);
  padding:clamp(28px,4vw,46px);animation:wrise .42s var(--ease-entry) both
}
@keyframes wfade{from{opacity:0}}
@keyframes wrise{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){
  .welcome__veil,.welcome__panel{animation:none}
}
.welcome__panel::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--accent)}
.welcome__panel::after{
  content:"";position:absolute;right:-46px;bottom:-46px;width:196px;height:196px;
  background:var(--stone);opacity:.26;transform:rotate(45deg);pointer-events:none
}
.welcome__panel > *{position:relative;z-index:1}
/* specificity has to beat the `> *` rule above, which would force static flow */
.welcome__panel .welcome__x{
  position:absolute;top:14px;right:12px;z-index:2;background:none;border:0;color:var(--grey);
  font-size:26px;line-height:1;padding:8px 12px;cursor:pointer;transition:color .16s
}
.welcome__panel .welcome__x:hover{color:var(--bone)}
.welcome__h{
  font-family:var(--disp);text-transform:uppercase;line-height:.86;letter-spacing:.005em;
  font-size:clamp(40px,6.4vw,66px);margin:0 0 16px
}
.welcome__p{font-size:15.5px;line-height:1.62;color:#A3A9A5;margin-bottom:22px;max-width:46ch}
.welcome__list{display:grid;gap:0;margin-bottom:28px;border-top:1px solid var(--ink-3)}
.welcome__list li{
  position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--ink-3);
  font-size:14px;color:#A3A9A5
}
.welcome__list li::before{content:"";position:absolute;left:0;top:18px;width:14px;height:3px;background:var(--accent-lt)}
.welcome__cta{display:flex;flex-wrap:wrap;gap:12px}
.welcome .btn--ghost{--fg:var(--bone);--bd:var(--stone-2);--sh:var(--accent-lt)}
.welcome .btn--ghost:hover{--bd:var(--bone)}
@media (max-width:620px){
  .welcome__panel{box-shadow:8px 8px 0 var(--accent-deep)}
  .welcome__cta .btn{width:100%}
}


/* ═══════════════════════ entrance transitions ═══════════════════════
   The hidden state lives in the stylesheet, gated on the .rv-on class the
   inline head script sets, so a section never paints before it is hidden.
   site.js adds .rv-in as each one scrolls into view. If the script never
   runs, the head script drops .rv-on after 2.5s and everything shows. */
.rv-on :is(.sec__hd,.calc,.step,.why__c,.card,.tool,.towns,.wall,.board){
  opacity:0;transform:translateY(12px)
}
.rv-on .rv-in{
  opacity:1;transform:none;
  transition:opacity .55s var(--ease-entry),transform .55s var(--ease-entry)
}
/* Exempt: step two of the booking flow, anything still hidden, and dialog
   content. Dialogs are built after this observer has already run, so their
   contents would never be told to appear and would stay invisible. */
.rv-on :is(.flow,[hidden],.sheet,.welcome) :is(.sec__hd,.calc,.step,.why__c,.card,.tool,.towns,.wall,.board){
  opacity:1;transform:none
}
@media (prefers-reduced-motion:reduce){
  .rv-on :is(.sec__hd,.calc,.step,.why__c,.card,.tool,.towns,.wall,.board){
    opacity:1;transform:none;transition:none
  }
}


/* ═══════════════════ the alert pop-out ═══════════════════
   A light panel, because everything inside it (.card, .fld, .chips) is
   already drawn for a bone ground. Flex with margin:auto rather than grid
   place-items, so a panel taller than the viewport scrolls instead of having
   its top cut off. The panel keeps room on two sides for the card's 12px
   offset shadow. */
.sheet{position:fixed;inset:0;z-index:130;display:flex;overflow-y:auto;padding:clamp(16px,4vw,40px)}
.sheet[hidden]{display:none}
.sheet__veil{position:fixed;inset:0;background:rgba(10,12,11,.74);animation:wfade .34s var(--ease-entry)}
.sheet__panel{
  position:relative;margin:auto;width:min(576px,100%);padding:0 14px 14px 0;
  animation:wrise .42s var(--ease-entry) both
}
.sheet__x{
  position:absolute;top:6px;right:20px;z-index:2;background:none;border:0;line-height:1;
  font-family:var(--ui);font-size:26px;padding:8px 12px;cursor:pointer;color:var(--grey-d);transition:color .16s
}
.sheet__x:hover{color:var(--ink)}
.sheet__body,.sheet__done{display:grid;gap:18px}
.sheet .card__h{padding-right:34px}
@media (prefers-reduced-motion:reduce){
  .sheet__veil,.sheet__panel{animation:none}
}

/* ═══════════════════ display type fades in ═══════════════════
   The fallbacks above hold the layout still, so nothing moves either way.
   This covers the last of it: the big headlines are held back until the
   webfont is ready and then fade in, instead of being drawn in one typeface
   and redrawn in another while you are reading them. The class comes from the
   inline script in each <head> and is cleared after 1.5s no matter what
   happens to the font request, so a headline can never be left blank. */
.fonts-pending :is(.hero__h1,.phead__h,.h2,.strip__h,.stat b,.marquee__row span,.welcome__h){opacity:0}
:is(.hero__h1,.phead__h,.h2,.strip__h,.stat b,.marquee__row span,.welcome__h){transition:opacity .32s var(--ease-entry)}
/* the hero lines slide in themselves, so the block just switches on and lets
   them do the arriving. Must sit after the rule above, same specificity. */
.hero__h1{transition:none}
@media (prefers-reduced-motion:reduce){
  .fonts-pending :is(.hero__h1,.phead__h,.h2,.strip__h,.stat b,.marquee__row span,.welcome__h){opacity:1;transition:none}
}