/* Option 2 — "Street Signs"
   The fourteen-streets idea as the whole design language: MUTCD guide-sign
   green, Overpass (a Highway Gothic descendant) set like road signage.
   Loads after v-common.css. */

:root {
  --bg:        #f4f1e8;
  --bg-2:      #e8e3d4;
  --surface:   #ffffff;
  --ink:       #14180f;
  --ink-2:     #3f4636;
  --dim:       #6b7263;
  --line:      #d8d2c0;
  --accent:    #c02a1b;
  --accent-ink:#ffffff;
  --accent-2:  #00694e;

  --sign:      #00694e;
  --sign-d:    #00543f;

  --sans: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --radius: 6px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --measure: 34rem;
}

/* the sign primitive: green panel, white keyline inset */
.sign {
  background: var(--sign); color: #fff; border-radius: 10px;
  box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 6px #fff;
  font-family: var(--sans); font-weight: 700;
}

/* ---------- masthead ---------- */
.mast { background: var(--sign); color: #fff; position: sticky; top: 0; z-index: 50; }
.mast .in { max-width: 86rem; margin: 0 auto; padding: .75rem var(--pad); display: flex; align-items: center; gap: 1.5rem; }
.brand { font-family: var(--sans); font-weight: 900; font-size: 1rem; text-decoration: none; display: flex; align-items: center; gap: .65rem; line-height: 1.15; }
.brand .shield { width: 38px; height: 38px; border-radius: 7px; background: #fff; color: var(--sign); display: grid; place-items: center; font-size: .56rem; font-weight: 900; text-align: center; line-height: 1.05; }
.brand i { display: block; font-style: normal; font-weight: 600; font-size: .7rem; color: #a9d6c4; letter-spacing: .14em; text-transform: uppercase; }
.mast nav { margin-left: auto; display: flex; gap: 1.05rem; flex-wrap: wrap; font-family: var(--sans); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.mast nav a { white-space: nowrap; }
.mast nav a { text-decoration: none; color: #cfe4da; }
.mast nav a:hover, .mast nav a[aria-current="page"] { color: #fff; }
.mast .callbtn { background: var(--accent); color: #fff; font-family: var(--sans); font-weight: 800; font-size: .87rem; padding: .65rem 1.1rem; border-radius: var(--radius); text-decoration: none; white-space: nowrap; }

/* ---------- home ---------- */
.hero { max-width: 86rem; margin: 0 auto; padding: clamp(2.5rem,6vw,5rem) var(--pad) clamp(1.5rem,3vw,2.5rem); }
.bigsign { padding: clamp(2rem,5vw,3.6rem); display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.bigsign .exit { font-family: var(--sans); font-size: .7rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #a9d6c4; margin: 0 0 1.2rem; }
.bigsign h1 { font-size: clamp(2.4rem,5.8vw,4.4rem); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.bigsign .lede { font-family: var(--sans); font-weight: 600; font-size: clamp(1rem,1.5vw,1.18rem); color: #bfe0d1; max-width: 34rem; margin: .9rem 0 0; }
.bigsign .arrow { font-size: clamp(3rem,8vw,6.5rem); line-height: 1; color: #fff; }
.mile { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.8rem; }
.mile a { font-family: var(--sans); font-weight: 800; font-size: .92rem; text-decoration: none; padding: .85rem 1.3rem; border-radius: var(--radius); }
.mile .p { background: #fff; color: var(--sign-d); }
.mile .s { border: 2px solid rgba(255,255,255,.45); color: #fff; }

.statusrow { max-width: 86rem; margin: 0 auto; padding: 0 var(--pad); display: flex; gap: .6rem; flex-wrap: wrap; font-family: var(--sans); font-size: .84rem; font-weight: 700; }
.statusrow span { background: var(--bg-2); padding: .55rem .9rem; border-radius: var(--radius); color: var(--ink-2); }
.statusrow .now { background: var(--sign); color: #fff; }

.eyebrow { font-family: var(--sans); font-size: .7rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); margin: 0 0 .9rem; }
.wrap h2 { font-size: clamp(1.9rem,4vw,2.9rem); font-weight: 800; }
.wrap .sub { max-width: 38rem; color: var(--ink-2); margin: 0 0 2.4rem; }

.blades { display: grid; grid-template-columns: repeat(auto-fill,minmax(13rem,1fr)); gap: .75rem; }
.blade { padding: 1.05rem 1.15rem; text-decoration: none; display: block; transition: transform .12s ease; }
.blade:hover { transform: translateY(-2px); }
.blade b { display: block; font-size: 1rem; font-weight: 800; text-transform: uppercase; }
.blade i { display: block; font-style: normal; font-size: .75rem; font-weight: 600; color: #a9d6c4; margin-top: .3rem; }

.feat { background: var(--bg-2); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); }
.disc { text-align: center; }
.disc .circ { width: min(100%,24rem); aspect-ratio: 1; margin: 0 auto 1.5rem; border-radius: 50%; overflow: hidden; box-shadow: 0 20px 50px -20px rgba(0,0,0,.45); border: 6px solid #fff; }
.disc .circ img { width: 100%; height: 100%; object-fit: cover; }
.disc .circ .ph { width: 100%; height: 100%; background: repeating-linear-gradient(45deg,#e8e3d4,#e8e3d4 12px,#ded8c6 12px,#ded8c6 24px); display: grid; place-items: center; font-family: var(--sans); font-size: .85rem; color: var(--dim); padding: 2rem; }
.disc .tagline { font-family: var(--sans); font-size: .7rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 0; }
.disc h3 { font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 800; margin: .5rem 0 .6rem; }
.disc p { color: var(--ink-2); max-width: 26rem; margin: 0 auto 1rem; }
.disc .pr { font-family: var(--sans); font-weight: 800; font-size: .92rem; }

.callout { background: var(--sign); color: #fff; text-align: center; padding: clamp(3rem,7vw,5rem) var(--pad); }
.callout .exit { font-family: var(--sans); font-size: .7rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #a9d6c4; }
.callout h2 { font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 800; margin: .8rem 0 .2rem; }
.callout .tel { display: inline-block; font-family: var(--sans); font-weight: 900; font-size: clamp(2.2rem,6vw,3.8rem); color: #fff; text-decoration: none; letter-spacing: -.03em; margin: .3rem 0 .8rem; }
.callout p { color: #bfe0d1; max-width: 32rem; margin: 0 auto; font-family: var(--sans); font-weight: 600; font-size: .95rem; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #9aa393; padding: clamp(2.5rem,5vw,4rem) var(--pad); font-family: var(--sans); font-size: .87rem; }
.foot .in { max-width: 86rem; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
.foot b { color: #fff; display: block; margin-bottom: .8rem; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; }
.foot a, .foot span.ln { color: #9aa393; text-decoration: none; display: block; margin-bottom: .45rem; }
.foot a:hover { color: #fff; }
.foot .tagline { font-family: var(--serif); color: #b9c2af; margin-bottom: 1rem; }
.foot .shut { color: #e08b80; }

.menusection__head { border-bottom-color: var(--sign); }
.band { background: var(--sign); color: #fff; }
.band .btn { background: #fff; color: var(--sign-d); border-color: #fff; }

@media (max-width: 880px) {
  .mast nav { display: none; }
  .bigsign { grid-template-columns: 1fr; }
  .bigsign .arrow { display: none; }
  .pair { grid-template-columns: 1fr; }
  .foot .in { grid-template-columns: 1fr; }
}

/* open-now badge states */
.statusrow .now.is-shut { background: var(--accent); color: #fff; }