/*
Theme Name: ExecuShip Auto Transport
Theme URI: https://execuship.com
Description: Executive-grade nationwide auto transport theme for ExecuShip. Instant tiered-rate estimator, 51 state and 1,100+ city pages, 160 route pages, 16 service pages, lead inbox.
Version: 1.0.0
Author: ExecuShip Auto Transport
Text Domain: execuship
*/

/* =============================================================================
   1. DESIGN TOKENS — black, gold, silver, warm paper (sampled from the logo)
   ============================================================================= */

:root {
  --ink:        #1E1A1E;   /* logo black */
  --ink-2:      #2B262C;
  --ink-3:      #3A353B;
  --ink-soft:   #4E4850;

  --gold:       #C9A74E;   /* logo gold — decorative, on dark */
  --gold-deep:  #A8872F;   /* buttons */
  --gold-text:  #7F661D;   /* 6.1:1 on white — links & small text */
  --gold-pale:  #F1E6C4;
  --gold-faint: #FAF6EA;

  --silver:     #C0C0C0;
  --silver-2:   #8E8E93;

  --paper:      #FFFFFF;
  --cream:      #F7F5F0;
  --stone:      #ECE9E2;
  --line:       #E1DDD3;

  --text:       #3B3740;
  --muted:      #6E6973;

  --green:      #2E7D4F;
  --green-pale: #E8F4EC;
  --red:        #B3261E;
  --red-pale:   #FBEAE8;

  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --r:   6px;
  --r-lg: 10px;
  --shadow-1: 0 1px 2px rgba(30,26,30,.06);
  --shadow-2: 0 6px 18px rgba(30,26,30,.10);
  --shadow-3: 0 18px 44px rgba(30,26,30,.18);
}

/* =============================================================================
   2. BASE
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans); font-size: 1rem; line-height: 1.65; color: var(--text);
  background: var(--paper); -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--gold-text); text-decoration: none; transition: color .15s; }
a:hover { color: var(--ink); }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
input, select, textarea { font: inherit; }
address { font-style: normal; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1.12; letter-spacing: -.005em; }
h1 { font-size: 2.375rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.3125rem; }
h4 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 700; }
@media (min-width: 768px) {
  h1 { font-size: 3.25rem; }
  h2 { font-size: 2.375rem; }
  h3 { font-size: 1.4375rem; }
}
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.visually-hidden:focus {
  position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 999;
  background: var(--gold); color: var(--ink); padding: .5rem .75rem; border-radius: var(--r);
}

/* =============================================================================
   3. LAYOUT
   ============================================================================= */

.shell        { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
.shell--narrow{ max-width: 860px;  margin: 0 auto; padding: 0 1.25rem; }

.band         { padding: 3.5rem 0; }
.band--cream  { background: var(--cream); }
.band--stone  { background: var(--stone); }
.band--ink    { background: var(--ink); color: #D6D2CC; }
.band--ink h2, .band--ink h3 { color: #fff; }
.band--gold-top { border-top: 3px solid var(--gold); }
@media (min-width: 768px) { .band { padding: 4.75rem 0; } }

.intro        { max-width: 44rem; margin-bottom: 2.25rem; }
.intro--center{ margin-left: auto; margin-right: auto; text-align: center; }
.intro p      { margin-top: .75rem; color: var(--muted); font-size: 1.0625rem; }
.band--ink .intro p { color: #B9B4AD; }

.kicker {
  display: inline-flex; align-items: center; gap: .625rem;
  font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: .625rem;
}
.kicker::before { content: ''; width: 28px; height: 2px; background: var(--gold); }
.intro--center .kicker::after { content: ''; width: 28px; height: 2px; background: var(--gold); }
.band--ink .kicker { color: var(--gold); }

.cols   { display: grid; gap: 1.5rem; }
.cols-2 { grid-template-columns: 1fr; }
.cols-3 { grid-template-columns: 1fr; }
.cols-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .cols-2, .cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* =============================================================================
   4. BUTTONS & CHIPS
   ============================================================================= */

.cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8125rem 1.5rem; border-radius: var(--r); font-weight: 800; font-size: .9375rem;
  letter-spacing: .01em; transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.cta-btn--gold { background: var(--gold-deep); color: #fff; box-shadow: var(--shadow-1); }
.cta-btn--gold:hover { background: var(--gold-text); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-2); }
.cta-btn--ink  { background: var(--ink); color: #fff; }
.cta-btn--ink:hover { background: var(--ink-3); color: #fff; }
.cta-btn--line { border: 2px solid var(--line); color: var(--ink); background: var(--paper); }
.cta-btn--line:hover { border-color: var(--ink); color: var(--ink); }
.cta-btn--ghost{ border: 2px solid rgba(255,255,255,.55); color: #fff; }
.cta-btn--ghost:hover { background: #fff; color: var(--ink); }
.cta-btn--wide { display: flex; width: 100%; }
.cta-btn--xl   { padding: 1rem 1.875rem; font-size: 1.0625rem; }
.cta-btn--sm   { padding: .4375rem .8125rem; font-size: .8125rem; }

.chip {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .3125rem .75rem; border-radius: 999px;
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(201,167,78,.5); color: var(--gold); background: rgba(201,167,78,.08);
}
.chip--stars { color: var(--gold); letter-spacing: .05em; }

/* =============================================================================
   5. HEADER
   ============================================================================= */

.site-head { position: sticky; top: 0; z-index: 60; background: var(--ink); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.06); }

.topline { background: #141114; font-size: .75rem; color: #A9A4A0; }
.topline__row { display: flex; justify-content: space-between; align-items: center; height: 32px; gap: 1rem; }
.topline__lic { letter-spacing: .04em; }
.topline__reach a { color: var(--gold); }
.topline__reach a:hover { color: #fff; }
@media (max-width: 760px) { .topline__reach { display: none; } .topline__row { justify-content: center; } }

.site-head__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 78px; }

.brand { display: inline-flex; align-items: center; background: #fff; padding: .4rem .6rem; border-radius: var(--r); }
.brand__img { height: 40px; width: auto; }
@media (min-width: 768px) { .brand__img { height: 48px; } }
.brand--foot { margin-bottom: 1.125rem; padding: .5rem .75rem; }
.brand--foot .brand__img { height: 50px; }

.menu { display: none; align-items: center; gap: .125rem; }
@media (min-width: 1100px) { .menu { display: flex; } }
.menu__item { position: relative; }
.menu__link {
  display: flex; align-items: center; gap: .3rem; padding: .625rem .8125rem; border-radius: var(--r);
  font-size: .9375rem; font-weight: 600; color: #E8E4DE;
}
.menu__link:hover, .menu__item:hover > .menu__link { color: var(--gold); background: rgba(255,255,255,.04); }
.menu__link[aria-current="page"] { color: var(--gold); }
.menu__link svg { width: 11px; height: 11px; opacity: .6; }
.menu__panel {
  position: absolute; top: 100%; left: 0; min-width: 250px; padding: .5rem;
  background: var(--paper); border-radius: var(--r-lg); border-top: 3px solid var(--gold);
  box-shadow: var(--shadow-3); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .15s;
}
.menu__panel--wide { min-width: 540px; columns: 2; column-gap: .5rem; }
.menu__item:hover > .menu__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.menu__panel a { display: block; padding: .5rem .75rem; border-radius: var(--r); font-size: .875rem; font-weight: 500; color: var(--text); break-inside: avoid; }
.menu__panel a:hover { background: var(--gold-faint); color: var(--ink); }

.head-cta { display: none; align-items: center; gap: 1.125rem; }
@media (min-width: 1100px) { .head-cta { display: flex; } }
.head-phone { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.head-phone__num { font-family: var(--serif); font-size: 1.375rem; color: #fff; }
.head-phone__sub { font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.head-phone:hover .head-phone__num { color: var(--gold); }

.hamburger { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); color: #fff; background: rgba(255,255,255,.08); }
@media (min-width: 1100px) { .hamburger { display: none; } }

.drawer {
  display: none; position: fixed; left: 0; right: 0; top: 110px; bottom: 0; z-index: 59;
  background: var(--ink); border-top: 1px solid rgba(255,255,255,.08);
  padding: .75rem 0 calc(1.5rem + 58px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.drawer.is-open { display: block; }
@media (min-width: 1100px) { .drawer, .drawer.is-open { display: none; } }
body.xs-drawer-open { touch-action: none; }
.drawer { touch-action: pan-y; }
.drawer a { display: block; padding: .9375rem .25rem; font-size: 1.0625rem; font-weight: 600; color: #E8E4DE; border-bottom: 1px solid rgba(255,255,255,.07); }
.drawer a:hover { color: var(--gold); }
.drawer__actions { display: grid; gap: .625rem; margin-top: 1.25rem; }
.drawer__actions a { border-bottom: 0; font-size: 1rem; }
.drawer .cta-btn--line { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }

/* =============================================================================
   6. HERO
   ============================================================================= */

.hero { position: relative; isolation: isolate; background: var(--ink); color: #fff; padding: 2.75rem 0 3rem; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--hero-photo, none); background-size: cover; background-position: center; opacity: .32;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(30,26,30,.96) 0%, rgba(30,26,30,.82) 48%, rgba(30,26,30,.55) 100%);
}
.hero > .shell { position: relative; z-index: 1; }
@media (min-width: 900px) { .hero { padding: 4rem 0 4.5rem; } }

.hero__cols { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 980px) { .hero__cols { grid-template-columns: 1.08fr .92fr; gap: 3.5rem; } }

.hero h1 { color: #fff; margin-bottom: 1rem; }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero__lede { font-size: 1.125rem; color: #CFCAC3; max-width: 34rem; margin-bottom: 1.5rem; }
.hero__lede a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.hero__list { display: grid; gap: .5rem; margin-top: 1.5rem; }
.hero__list li { display: flex; gap: .625rem; align-items: flex-start; font-size: .9375rem; color: #D6D2CC; }
.hero__list .mark { color: var(--gold); font-weight: 900; flex: none; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero--inner { padding: 2.25rem 0 2.5rem; }
.hero--inner h1 { font-size: 2rem; }
@media (min-width: 768px) { .hero--inner h1 { font-size: 2.625rem; } }

/* =============================================================================
   7. ESTIMATOR (quote form)
   ============================================================================= */

.estimator {
  background: var(--paper); color: var(--text); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); overflow: hidden;
}
.estimator__top { background: var(--ink); color: #fff; padding: 1.125rem 1.5rem; border-bottom: 3px solid var(--gold); }
.estimator__top h2, .estimator__top h3 { color: #fff; font-size: 1.375rem; margin-bottom: .125rem; }
.estimator__top p { font-size: .8125rem; color: #B9B4AD; }
.estimator__body { padding: 1.25rem 1.5rem 1.5rem; }

.fld { position: relative; margin-bottom: .875rem; }
.fld label, .fld__lbl {
  display: block; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .3125rem;
}
.fld input, .fld select, .fld textarea {
  width: 100%; padding: .6875rem .75rem; background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--ink); font-size: .9375rem; transition: .15s;
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none; background: #fff; border-color: var(--gold-deep); box-shadow: 0 0 0 3px var(--gold-pale);
}
.fld input::placeholder { color: var(--silver-2); }
.fld--2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.fld--bad input { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-pale); }
.fld__err { display: none; font-size: .75rem; color: var(--red); margin-top: .3125rem; }
.fld--bad .fld__err { display: block; }
.fld--check { display: flex; gap: .625rem; align-items: flex-start; font-size: .75rem; color: var(--muted); }
.fld--check input { width: auto; margin-top: .2rem; accent-color: var(--gold-deep); }

.suggest {
  display: none; position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2);
  max-height: 260px; overflow-y: auto;
}
.suggest.is-open { display: block; }
.suggest__opt {
  display: flex; justify-content: space-between; gap: .75rem; align-items: center; width: 100%;
  padding: .5625rem .75rem; text-align: left; font-size: .875rem; color: var(--text); border-bottom: 1px solid var(--stone);
}
.suggest__opt:last-child { border-bottom: 0; }
.suggest__opt:hover, .suggest__opt.is-active { background: var(--gold-faint); color: var(--ink); }
.suggest__opt b { color: var(--ink); }
.suggest__zip { font-size: .75rem; color: var(--silver-2); font-variant-numeric: tabular-nums; }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  display: block; text-align: center; cursor: pointer; margin: 0; padding: .625rem .5rem;
  border: 2px solid var(--line); border-radius: var(--r); font-size: .8125rem; font-weight: 700; color: var(--muted);
  text-transform: none; letter-spacing: 0; transition: .15s;
}
.seg label small { display: block; font-size: .6875rem; font-weight: 600; color: var(--silver-2); margin-top: .125rem; }
.seg input:checked + label { border-color: var(--gold-deep); background: var(--gold-faint); color: var(--ink); }
.seg input:checked + label small { color: var(--gold-text); }
.seg input:focus-visible + label { box-shadow: 0 0 0 3px var(--gold-pale); }

.estimator__note {
  display: flex; gap: .5rem; align-items: flex-start; background: var(--gold-faint); border-left: 3px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0; padding: .625rem .75rem; font-size: .8125rem; color: var(--muted); margin: .875rem 0;
}
.estimator__msg { display: none; font-size: .875rem; padding: .625rem .75rem; border-radius: var(--r); margin-bottom: .875rem; }
.estimator__msg.is-error { display: block; background: var(--red-pale); color: var(--red); border: 1px solid #F0C7C3; }
.estimator__msg.is-ok    { display: block; background: var(--green-pale); color: var(--green); border: 1px solid #BFE0CB; }

.outcome { display: none; }
.outcome.is-open { display: block; animation: rise .25s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.outcome__hero { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 1.25rem; text-align: center; margin-bottom: 1rem; border-bottom: 3px solid var(--gold); }
.outcome__lbl { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: .375rem; }
.outcome__sum { font-family: var(--serif); font-size: 2.875rem; line-height: 1; color: #fff; }
.outcome__sum small { font-family: var(--sans); font-size: 1rem; font-weight: 600; opacity: .7; }
.outcome__range { font-size: .8125rem; color: #CFCAC3; margin-top: .375rem; }
.outcome__lane { font-size: .875rem; color: #D6D2CC; margin-top: .625rem; }
.outcome__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.outcome__facts div { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: .625rem .5rem; text-align: center; }
.outcome__facts dt { font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.outcome__facts dd { font-size: .9375rem; font-weight: 800; color: var(--ink); margin-top: .125rem; }
.outcome__lines { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 1rem; }
.outcome__lines tr { border-bottom: 1px solid var(--stone); }
.outcome__lines tr:last-child { border-bottom: 0; background: var(--gold-faint); font-weight: 800; color: var(--ink); }
.outcome__lines td { padding: .5rem .75rem; font-size: .875rem; }
.outcome__lines td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.ring { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: turn .6s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }

/* =============================================================================
   8. TILES, NUMBERS, JOURNEY, MEDIA
   ============================================================================= */

.tile {
  display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem; position: relative; transition: box-shadow .2s, transform .2s, border-color .2s;
}
.tile::before { content: ''; position: absolute; left: 0; top: 1.25rem; bottom: 1.25rem; width: 3px; background: var(--gold); border-radius: 0 3px 3px 0; opacity: 0; transition: opacity .2s; }
.tile:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--gold-pale); }
.tile:hover::before { opacity: 1; }
.tile__icon { width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; background: var(--gold-faint); font-size: 1.25rem; margin-bottom: .875rem; }
.tile h3 { margin-bottom: .5rem; }
.tile p { font-size: .9375rem; color: var(--muted); }
.tile__more { display: inline-block; margin-top: .875rem; font-weight: 700; font-size: .875rem; color: var(--gold-text); }
.tile:hover .tile__more { color: var(--ink); }

.numbers { background: var(--ink); color: #fff; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.06); }
.numbers__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; text-align: center; }
@media (min-width: 768px) { .numbers__grid { grid-template-columns: repeat(4, 1fr); } }
.numbers strong { display: block; font-family: var(--serif); font-size: 1.875rem; color: var(--gold); line-height: 1.1; }
.numbers span { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: #A9A4A0; }

.journey { display: grid; gap: 1.5rem; }
@media (min-width: 700px)  { .journey { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .journey { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; } }
.journey__step { position: relative; }
.journey__pic { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--stone); margin-bottom: .875rem; }
.journey__pic img { width: 100%; height: 100%; object-fit: cover; }
.journey__roman {
  position: absolute; left: .625rem; bottom: .625rem; z-index: 2; padding: .25rem .625rem;
  font-family: var(--serif); font-size: 1.125rem; background: var(--gold); color: var(--ink); border-radius: var(--r);
}
.journey__step h3 { font-size: 1.125rem; margin-bottom: .375rem; }
.journey__step p { font-size: .9rem; color: var(--muted); }

.duo { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.duo__pic { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; background: var(--stone); box-shadow: var(--shadow-2); border-bottom: 4px solid var(--gold); }
.duo__pic img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .duo--flip .duo__pic { order: -1; } }

.mosaic { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .mosaic { grid-template-columns: repeat(4, 1fr); } .mosaic figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } }
.mosaic figure { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--stone); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.mosaic figure:hover img { transform: scale(1.04); }
.mosaic figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .75rem .875rem; background: linear-gradient(to top, rgba(30,26,30,.85), transparent); color: #fff; font-size: .8125rem; font-weight: 600; }

.copy { font-size: 1.0625rem; color: var(--text); }
.copy h2 { margin: 2rem 0 .875rem; }
.copy h2:first-child { margin-top: 0; }
.copy h3 { margin: 1.5rem 0 .625rem; }
.copy p { margin-bottom: 1.125rem; }
.copy ul { margin: 0 0 1.25rem; display: grid; gap: .5rem; }
.copy ul li { position: relative; padding-left: 1.25rem; }
.copy ul li::before { content: '◆'; position: absolute; left: 0; top: .5em; color: var(--gold); font-size: .625rem; }
.copy ol { margin: 0 0 1.25rem 1.25rem; list-style: decimal; display: grid; gap: .5rem; }
.copy a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================================
   9. TABLES, FAQ, REVIEWS, LINK WALLS, TRAIL, CLOSER
   ============================================================================= */

.grid-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.datatable { min-width: 540px; }
.datatable th, .datatable td { padding: .8125rem 1rem; text-align: left; font-size: .9375rem; border-bottom: 1px solid var(--stone); }
.datatable th { background: var(--ink); color: var(--gold); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.datatable tbody tr:last-child td { border-bottom: 0; }
.datatable tbody tr:hover { background: var(--gold-faint); }
.datatable td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.datatable a { font-weight: 600; }

.qa { display: grid; gap: .625rem; }
.qa details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.25rem; transition: border-color .15s; }
.qa details[open] { border-color: var(--gold); }
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; font-weight: 700; color: var(--ink); font-size: 1.0625rem; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; font-family: var(--serif); font-size: 1.5rem; color: var(--gold-deep); line-height: 1; flex: none; transition: transform .2s; }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details p { margin-top: .75rem; color: var(--muted); font-size: .9375rem; }

.quote-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; position: relative; }
.quote-card::before { content: '“'; position: absolute; top: .25rem; right: 1rem; font-family: var(--serif); font-size: 4rem; color: var(--gold-pale); line-height: 1; }
.quote-card__stars { color: var(--gold); letter-spacing: .1em; margin-bottom: .75rem; }
.quote-card p { font-size: .9375rem; color: var(--text); margin-bottom: 1rem; position: relative; }
.quote-card__who { font-weight: 700; color: var(--ink); font-size: .9375rem; }
.quote-card__where { font-size: .8125rem; color: var(--muted); }

.linkwall { display: grid; grid-template-columns: repeat(2, 1fr); gap: .375rem 1rem; }
@media (min-width: 640px) { .linkwall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .linkwall { grid-template-columns: repeat(4, 1fr); } }
.linkwall--6 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .linkwall--6 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 980px) { .linkwall--6 { grid-template-columns: repeat(6, 1fr); } }
.linkwall a { display: block; padding: .4375rem .25rem; font-size: .9375rem; color: var(--text); border-bottom: 1px solid var(--stone); }
.linkwall a:hover { color: var(--gold-text); }
.band--ink .linkwall a, .site-foot .linkwall a { color: #B9B4AD; border-color: rgba(255,255,255,.07); }
.band--ink .linkwall a:hover, .site-foot .linkwall a:hover { color: var(--gold); }

.place-tile { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: .875rem 1rem; transition: .15s; }
.place-tile:hover { border-color: var(--gold-deep); box-shadow: var(--shadow-1); }
.place-tile strong { display: block; color: var(--ink); font-size: .9375rem; }
.place-tile span { font-size: .75rem; color: var(--muted); }

.trail { font-size: .8125rem; color: #A9A4A0; margin-bottom: 1rem; }
.trail ol { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; }
.trail a { color: #D6D2CC; }
.trail a:hover { color: var(--gold); }
.trail li:not(:last-child)::after { content: '›'; margin-left: .375rem; opacity: .5; }

.closer { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 2.25rem 1.5rem; text-align: center; position: relative; overflow: hidden; border-top: 4px solid var(--gold); }
.closer h2 { color: #fff; margin-bottom: .625rem; }
.closer p { color: #CFCAC3; max-width: 40rem; margin: 0 auto 1.25rem; }
.closer__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
@media (min-width: 768px) { .closer { padding: 3rem 2rem; } }

.pledge { display: grid; gap: 1.5rem; align-items: center; background: var(--gold-faint); border: 1px solid var(--gold-pale); border-radius: var(--r-lg); padding: 1.75rem; }
@media (min-width: 900px) { .pledge { grid-template-columns: auto 1fr auto; gap: 2rem; padding: 2rem 2.5rem; } }
.pledge__seal { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; flex: none; }
.pledge h3 { margin-bottom: .375rem; }
.pledge p { font-size: .9375rem; color: var(--muted); }

/* =============================================================================
   10. FOOTER & MOBILE BAR
   ============================================================================= */

.site-foot { background: var(--ink); color: #A9A4A0; padding: 3rem 0 0; font-size: .9375rem; }
.site-foot__grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .site-foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-foot h4 { color: var(--gold); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .875rem; }
.site-foot ul { display: grid; gap: .5rem; }
.site-foot a { color: #B9B4AD; }
.site-foot a:hover { color: var(--gold); }
.site-foot__about p { font-size: .875rem; line-height: 1.7; margin-bottom: 1rem; }
.site-foot__nap { display: grid; gap: .375rem; font-size: .875rem; }
.site-foot__phone { font-family: var(--serif); font-size: 1.375rem; color: #fff; }
.site-foot__states { border-top: 1px solid rgba(255,255,255,.07); padding: 1.75rem 0; margin-top: 2.5rem; }
.site-foot__states h4 { text-align: center; }
.site-foot__legal { border-top: 1px solid rgba(255,255,255,.07); padding: 1.25rem 0; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; font-size: .8125rem; }
.site-foot__legal ul { display: flex; flex-wrap: wrap; gap: 1rem; }

.thumbbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 1px; background: #141114; box-shadow: 0 -4px 16px rgba(0,0,0,.25); }
@media (min-width: 1100px) { .thumbbar { display: none; } }
.thumbbar a { display: flex; align-items: center; justify-content: center; padding: .9375rem .5rem; font-weight: 800; font-size: .9375rem; color: #fff; background: var(--ink-2); }
.thumbbar a:last-child { background: var(--gold-deep); color: #fff; }
body { padding-bottom: 58px; }
@media (min-width: 1100px) { body { padding-bottom: 0; } }

/* =============================================================================
   11. UTILITIES
   ============================================================================= */

.center { text-align: center; }
.mt-2 { margin-top: .5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
.mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.muted { color: var(--muted); font-size: .875rem; }
.rule { height: 1px; background: var(--line); margin: 2rem 0; }
.callout { background: var(--cream); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r); padding: 1rem 1.25rem; font-size: .9375rem; }
.callout--dark { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); border-left-color: var(--gold); color: #D6D2CC; }
.callout--dark strong, .callout--dark a { color: #fff; }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { display: inline-block; padding: .375rem .75rem; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); font-size: .8125rem; font-weight: 600; color: var(--ink); }
.pill:hover { background: var(--gold-faint); border-color: var(--gold-pale); }
.pagination { display: flex; flex-wrap: wrap; gap: .5rem; }
.pagination .page-numbers { padding: .5rem .875rem; border: 1px solid var(--line); border-radius: var(--r); font-weight: 600; }
.pagination .current { background: var(--ink); color: var(--gold); border-color: var(--ink); }