/* ══════════════════════════════════════════════════════════════════════════
   pages.css — the 10,580 generated location pages, RE-SKINNED to the
   Maine Stays clone. 31 August 2026.

   ⛔ ADDITIVE RE-SKIN, NEVER A REWRITE. Not one line of shell.mjs's MARKUP
      changed: every `pg-*` class the generator emits still exists and still
      means the same thing. Only what it LOOKS like moved. Rewriting the markup
      of ten thousand pages to chase a look is how a working corpus gets broken
      for a visual preference — the generator is the risky thing here, not the
      stylesheet.
   ⛔ Loaded AFTER assets-v2/base.css and assets-v2/theme.css, so it inherits
      the clone's tokens (--fog, --ink, --teal->ink, Playfair/Poppins/Barlow)
      and only has to say what is DIFFERENT about an inner page.
   ══════════════════════════════════════════════════════════════════════════ */

body.pg{background:var(--fog);color:var(--ink);
  font:400 1rem/1.62 var(--font-body);margin:0}
.skiplink{position:absolute;left:-9999px}
.skiplink:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:#fff;
  padding:.7rem 1.1rem;border-radius:999px}

/* ── nav: the clone's frosted bar ────────────────────────────────────────── */
.pg-nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.75rem var(--pad-x);
  background:rgba(244,243,240,.9);backdrop-filter:blur(16px) saturate(1.05);
  border-bottom:1px solid rgba(22,24,26,.10)}
.pg-nav__brand{font-family:var(--font-head);font-weight:600;font-size:clamp(1rem,1.4vw,1.18rem);
  color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.pg-nav__links{display:flex;align-items:center;gap:clamp(.6rem,1.5vw,1.5rem)}
.pg-nav__links a{color:var(--ink-60);text-decoration:none;font-size:.85rem;
  display:inline-flex;align-items:center;min-height:44px}
.pg-nav__links a:hover{color:var(--ink)}
.pg-nav__cta{background:var(--ink);color:#fff!important;border-radius:999px;
  padding:0 1.15rem;font-weight:600}
@media (max-width:899px){.pg-nav__links a:not(.pg-nav__cta){display:none}}

/* ── hero: the .msgrh treatment, applied to the generator's own markup ──── */
.pg-hero{position:relative;overflow:hidden;color:#fff;
  padding:calc(64px + clamp(3rem,7vw,4.75rem)) 0 clamp(3rem,7vw,4.75rem);
  background:linear-gradient(115deg,#0f1113 0%,#16181a 52%,#1d2124 100%)}
.pg-hero__plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.pg-hero__scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,17,19,.86) 0%,rgba(15,17,19,.55) 60%,rgba(15,17,19,.30) 100%)}
.pg-hero .pg-wrap{position:relative;z-index:2}
.pg-hero__title{font-family:var(--font-head);font-weight:600;
  font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.12;margin:.3em 0 .45em;color:#fff}
.pg-hero__lede{color:rgba(255,255,255,.85);max-width:38rem;font-size:1.02rem;margin:0 0 1.5rem}
.pg-hero__ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin:0}
.pg-crumb{font-size:.8rem;letter-spacing:.02em;color:rgba(255,255,255,.62)}
.pg-crumb a{color:rgba(255,255,255,.78);text-decoration:none}
.pg-crumb a:hover{color:#fff}
.pg-crumb__sep{opacity:.5;padding:0 .35rem}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:.75rem 1.5rem;border-radius:999px;font-family:var(--font-ui);font-weight:600;
  font-size:.92rem;text-decoration:none;border:0;cursor:pointer;transition:transform .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn--paper{background:#fff;color:var(--ink);box-shadow:0 12px 30px rgba(0,0,0,.28)}
.btn--ghost-paper{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.btn--ghost-paper:hover{background:rgba(255,255,255,.08)}

/* ── sections ────────────────────────────────────────────────────────────── */
/* ⛔ SAME CONVENTION AS THE PUBLIC PAGES. .section-inner is full-width with a
   gutter and no max-width; a centred 1160px wrapper here would make every
   location page sit 140px right of every public page at 1440. One site, one
   left edge. */
.pg-wrap{width:100%;padding:0 var(--pad-x)}
.pg-sec{padding:clamp(3rem,7vw,5rem) 0}
.card--paper{background:#fff}
.card--fog{background:var(--fog)}
.card--ink{background:var(--ink);color:#fff}
.card--ink h2,.card--ink h3,.card--ink p,.card--ink li{color:#fff}
.pg-kicker{font-family:var(--font-ui);font-weight:600;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-60);margin:0 0 .8rem}
.card--ink .pg-kicker{color:rgba(255,255,255,.62)}
.pg-sec h2{font-family:var(--font-head);font-weight:600;
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.16;margin:0 0 .6rem}
.pg-sec h3{font-family:var(--font-head);font-weight:600;font-size:1.12rem;margin:0 0 .35rem}
.pg-lede,.pg-prose p{max-width:62ch;color:var(--ink-60);margin:0 0 1rem}
.card--ink .pg-lede,.card--ink .pg-prose p{color:rgba(255,255,255,.8)}
.pg-claim{font-family:var(--font-head);font-weight:600;
  font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.36;max-width:34ch;margin:0 0 1rem}

/* ── the vetting rail ────────────────────────────────────────────────────── */
.pg-rail{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.pg-rail li{background:#fff;border:1px solid rgba(22,24,26,.10);border-radius:1rem;
  padding:1.1rem 1.2rem;box-shadow:var(--shadow-soft)}
.card--ink .pg-rail li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.pg-rail__body strong{display:block;font-family:var(--font-ui);font-weight:600;
  font-size:.95rem;margin-bottom:.25rem}
.pg-rail__body{font-size:.92rem;color:var(--ink-60)}
.card--ink .pg-rail__body{color:rgba(255,255,255,.78)}
.card--ink .pg-rail__body strong{color:#fff}

/* ── chips, faq, cta, footer ─────────────────────────────────────────────── */
.pg-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
.pg-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;
  border-radius:999px;background:#fff;border:1px solid rgba(22,24,26,.12);
  color:var(--ink);text-decoration:none;font-size:.88rem}
.pg-chip:hover{border-color:rgba(22,24,26,.30)}
.card--ink .pg-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.pg-sub{font-family:var(--font-ui);font-weight:600;font-size:.9rem;margin:1.6rem 0 .2rem}

.pg-faq{margin-top:1.4rem}
.pg-faq__item{background:#fff;border:1px solid rgba(22,24,26,.10);border-radius:1rem;
  padding:1rem 1.2rem;margin-bottom:.6rem}
.pg-faq__item summary{cursor:pointer;font-family:var(--font-ui);font-weight:600;
  font-size:.98rem;min-height:44px;display:flex;align-items:center}
.pg-faq__item p{margin:.5rem 0 0;color:var(--ink-60)}

.pg-cta{background:var(--ink);color:#fff;text-align:center}
.pg-cta h2,.pg-cta p{color:#fff}
.pg-cta__btns{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}

.pg-foot{background:var(--ink);color:rgba(255,255,255,.78);padding:clamp(3rem,6vw,4.5rem) 0 2.5rem}
.pg-foot__cols{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.pg-foot__h{font-family:var(--font-ui);font-weight:600;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 .8rem}
.pg-foot__list{list-style:none;margin:0;padding:0}
.pg-foot__list a{color:rgba(255,255,255,.82);text-decoration:none;
  display:flex;align-items:center;min-height:44px;font-size:.9rem}
.pg-foot__list a:hover{color:#fff}
.pg-foot__note{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);
  font-size:.85rem;color:rgba(255,255,255,.6)}
.pg-sec>*,.pg-foot__cols>*,.pg-rail>*{min-width:0}