/*
 * BUILD_C_MG_ASSET_INTEGRATION
 *
 * Real, verified TradeWinds asset (assets/fonts/TradeWinds-Regular.ttf,
 * SHA-256 confirmed against the supplied source -- see
 * BUILD_C_CHANGE_REPORT.md). Relative path only, no external font
 * service. Fallback stack matches the app's own default font stack
 * (see body{} below) so a load failure falls back to the app's
 * ordinary text rendering, not a font dressed up to resemble
 * TradeWinds.
 */
@font-face{
  font-family:"TradeWinds";
  src:url("assets/fonts/TradeWinds-Regular.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

:root{
  --gold:#f5b400;
  --gold2:#9e761c;

  --bg:#02080e;
  --navy:#03111f;
  --navy2:#071a2b;

  --line:#263540;

  --white:#fff;
  --muted:#c5ccd2;

  --slogan-font:
    "TradeWinds",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;

  background:
    linear-gradient(
      rgba(0,6,12,.50),
      rgba(0,6,12,.70)
    ),
    url("assets/service-area-background.jpg")
    center top / cover fixed no-repeat;

  color:#fff;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
}

button{
  font:inherit;
}

/* ======================================================== */
/* BUILD_D1_GOLD_TOPBAR                                     */
/* County navigation across the top, city navigation        */
/* directly beneath it (gold_lock sections 4/5/10). Purely  */
/* a repositioning of the existing #county-buttons/#city-list */
/* elements -- .county-button/.city-button and their .active */
/* gold treatment below are unchanged, just reused here.    */
/* ======================================================== */

.gold-topbar{
  padding:16px 24px 4px;

  background:rgba(2,8,14,.98);

  border-bottom:1px solid #23313a;
}

.gold-topbar-brand{
  margin-bottom:10px;
}

.gold-topbar-brand h2{
  margin:0;

  color:var(--gold);

  font-size:22px;
  line-height:1;

  text-transform:uppercase;
}

.gold-topbar-brand h3{
  margin:4px 0 0;

  font-size:13px;

  color:var(--muted);

  text-transform:uppercase;
}

.gold-county-nav{
  padding-bottom:10px;

  border-bottom:1px solid #1c2830;
}

.gold-county-nav .counties{
  padding:0;
}

.gold-city-nav{
  padding:12px 0 14px;
}

/* ======================================================== */
/* HEADER (pre-existing, unused by current markup -- left   */
/* in place, not part of BUILD D1 scope)                    */
/* ======================================================== */

.topbar{
  height:80px;

  display:grid;
  grid-template-columns:300px 1fr auto;
  align-items:center;

  gap:20px;

  padding:0 24px;

  background:rgba(2,8,14,.98);

  border-bottom:1px solid #23313a;
}

.brand{
  height:78px;

  display:flex;
  align-items:center;
}

.brand img{
  width:auto;
  height:70px;
  max-width:280px;

  object-fit:contain;
}

.nav{
  display:flex;
  justify-content:center;
  gap:30px;

  height:100%;
}

.nav a{
  position:relative;

  display:flex;
  align-items:center;

  font-size:12px;
  font-weight:800;

  text-transform:uppercase;

  cursor:pointer;
}

.nav a.active{
  color:var(--gold);
}

.nav a.active::after{
  content:"";

  position:absolute;
  left:0;
  right:0;
  bottom:16px;

  height:2px;

  background:var(--gold);
}

.actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.actions button{
  height:40px;

  padding:0 18px;

  border-radius:5px;

  font-weight:900;
}

.quote{
  border:1px solid var(--gold);

  background:var(--gold);
  color:#071019;

  text-transform:uppercase;
}

.phone{
  border:1px solid var(--gold);

  background:#02080e;
  color:var(--gold);
}

.hamburger{
  margin-left:8px;

  font-size:25px;
}

/* ======================================================== */
/* HERO COPY / BACKGROUND                                   */
/* ======================================================== */

.hero-copy{
  padding:26px 26px 18px;

  text-align:center;
}

.hero-copy h1{
  margin:0;

  color:var(--gold);

  font-size:34px;
  line-height:1;

  text-transform:uppercase;

  text-shadow:
    0 2px 8px #000;
}

.hero-copy p{
  max-width:900px;

  margin:10px auto 0;

  color:#fff;

  font-size:14px;
  line-height:1.5;

  text-shadow:
    0 2px 5px #000;
}

/* ======================================================== */
/* MAIN APP                                                 */
/* ======================================================== */

main{
  padding:0 12px 24px;
}

.app-shell{
  display:grid;

  /*
   * BUILD_D1_GOLD_PRESENTATION_SHELL
   * Was 3 tracks (240px left-column + map + right-panel).
   * The left column (county buttons) moved to .gold-topbar
   * above, so this is now 2 tracks.
   */
  grid-template-columns:
    minmax(0,1fr)
    390px;

  min-height:620px;

  border:1px solid var(--line);
  border-radius:8px;

  overflow:hidden;

  background:rgba(2,9,15,.97);
}

/*
 * BUILD_D1_GOLD_PRESENTATION_SHELL
 * .left-column and .service-heading were removed here -- both are now
 * orphaned by the index.html change above (county nav + brand heading
 * moved into .gold-topbar, which defines its own heading rules). Removed
 * rather than left dead, since this file created the orphan.
 */

.counties{
  display:flex;
  flex-wrap:wrap;
  gap:7px;

  padding:0 14px 14px;
}

.county-button{
  padding:7px 13px;

  border:1px solid #8a959e;
  border-radius:18px;

  background:#071018;
  color:#fff;

  font-size:10px;

  cursor:pointer;
}

.county-button.active{
  border-color:var(--gold);

  background:var(--gold);
  color:#071019;

  font-weight:900;
}

/* ======================================================== */
/* CITY NAVIGATION — ABOVE THE MAP                          */
/* ======================================================== */

.city-rail{
  flex:0 0 auto;

  padding:14px 18px 13px;

  border-bottom:1px solid #2d3a43;

  background:rgba(2,9,15,.99);
}

.city-rail-instructions{
  max-width:900px;

  margin:0 0 10px;

  color:var(--muted);

  font-size:12px;
  line-height:1.5;
}

.city-rail h4{
  margin:0 0 9px;

  padding:0;

  color:var(--gold);

  font-size:13px;

  text-transform:uppercase;
}

#city-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.city-button{
  width:auto;

  display:flex;
  align-items:center;

  padding:7px 13px;

  border:1px solid #8a959e;
  border-radius:18px;

  background:#071018;
  color:#fff;

  font-size:10px;

  text-align:left;

  cursor:pointer;
}

.city-button.active{
  border-color:var(--gold);

  background:var(--gold);
  color:#071019;

  font-weight:900;
}

.view-all{
  margin-top:10px;

  padding:8px 16px;

  border:1px solid #54616a;
  border-radius:5px;

  background:#030b11;
  color:#fff;

  font-size:11px;
}

/* ======================================================== */
/* MAP                                                      */
/* ======================================================== */

.map-column{
  display:flex;
  flex-direction:column;

  min-width:0;
  min-height:620px;

  background:var(--navy);
}

.map-surface{
  position:relative;

  flex:1 1 auto;

  min-height:0;
}

#map{
  position:absolute;
  inset:0 0 58px;

  background:var(--navy);
}

.map-status{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:58px;

  display:grid;
  grid-template-columns:repeat(3,1fr);

  background:#030a10;

  border-top:1px solid #26343d;
}

.map-status > div{
  display:flex;
  align-items:center;
  gap:9px;

  padding:9px 17px;
}

.map-status i{
  width:21px;
  height:21px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#45b75f;

  font-style:normal;
  font-weight:900;
}

.map-status span{
  font-size:10px;
}

.map-status b{
  display:block;

  font-size:12px;

  text-transform:uppercase;
}

/* ======================================================== */
/* SELECTED CITY                                            */
/* ======================================================== */

.city-marker{
  transform:translateY(38px);

  pointer-events:none;

  text-align:center;
}

.city-name{
  margin-bottom:17px;

  color:#fff;

  font-size:48px;
  line-height:1;

  font-weight:950;

  white-space:nowrap;

   text-shadow: none !important;
}

.city-target{
  position:relative;

  width:21px;
  height:21px;

  margin:auto;

  border:3px solid #ffe37c;
  border-radius:50%;

  background:var(--gold);

  box-shadow:
    0 0 0 8px rgba(245,180,0,.26),
    0 0 0 18px rgba(245,180,0,.14),
    0 0 0 31px rgba(245,180,0,.07),
    0 0 30px 14px rgba(245,180,0,.90);
}

.city-target::before,
.city-target::after{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  border:1px solid var(--gold);
  border-radius:50%;
}

.city-target::before{
  width:54px;
  height:54px;
}

.city-target::after{
  width:82px;
  height:82px;
}

/* ======================================================== */
/* RIGHT PANEL                                              */
/* ======================================================== */

.right-panel{
  padding:20px 16px;

  background:rgba(2,9,15,.99);

  border-left:1px solid #283743;
}

.right-panel > h2{
  margin:0;

  font-size:25px;
  line-height:1;

  text-transform:uppercase;
}

.right-panel > h3{
  margin:6px 0 0;

  font-size:13px;

  text-transform:uppercase;
}

#panel-description{
  font-size:12px;
  line-height:1.5;
}

.right-panel hr{
  border:0;
  border-top:1px solid #2a3740;
}

.right-panel h4{
  color:var(--gold);

  font-size:13px;

  text-transform:uppercase;
}

.services{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:11px;

  padding-bottom:12px;

  font-size:11px;
}

.services span{
  color:#fff;
}

.services span::first-letter{
  color:var(--gold);
}

.latest-city-panel{
  margin-top:7px;

  padding:14px;

  border:1px solid #35434c;
  border-radius:6px;

  background:#02080d;
}

.latest-city-panel h4{
  margin:0 0 10px;
}

.latest-city-media{
  position:relative;

  height:145px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  border-radius:4px;

  background:
    radial-gradient(
      ellipse at 50% 100%,
      #154c83 0,
      #0b2d53 30%,
      #07182b 48%,
      #01050a 72%
    );
}

.latest-city-media-placeholder{
  color:#7f8a92;

  font-size:11px;

  text-transform:uppercase;
  letter-spacing:.08em;
}

.latest-city-body{
  margin-top:12px;
}

.latest-city-category{
  display:inline-block;

  margin-bottom:7px;

  padding:3px 9px;

  border:1px solid var(--gold2);
  border-radius:12px;

  color:var(--gold);

  font-size:9px;
  font-weight:900;

  text-transform:uppercase;
  letter-spacing:.05em;
}

.latest-city-panel h5{
  margin:0 0 4px;

  color:#fff;

  font-size:15px;
  line-height:1.25;

  text-transform:none;
}

.latest-city-date{
  display:block;

  margin-bottom:8px;

  color:#8b9298;

  font-size:10px;

  text-transform:uppercase;
  letter-spacing:.06em;
}

.latest-city-excerpt{
  margin:0;

  color:var(--muted);

  font-size:12px;
  line-height:1.5;
}

.latest-city-link{
  display:inline-block;

  margin-top:10px;

  color:var(--gold);

  font-size:11px;
  font-weight:900;

  text-transform:uppercase;
  text-decoration:none;
}

/*
 * SAMIES_STEP_008
 * Author rules above win over the browser default
 * [hidden]{display:none} at equal specificity, so the
 * empty-state slots must be forced hidden explicitly.
 * Without this, a hidden <a> with leftover markup text
 * (e.g. "Read more") would still render — misrepresenting
 * placeholder UI as a real post, which is not allowed.
 */
.latest-city-category[hidden],
.latest-city-date[hidden],
.latest-city-link[hidden]{
  display:none;
}

/* ======================================================== */
/* NEXT CITIES                                              */
/* ======================================================== */

/* ======================================================== */
/* SAMIES_STEP_010_CITY_INTELLIGENCE_PANEL                  */
/* ======================================================== */

.city-intelligence-panel{
  margin-top:10px;

  padding:18px;

  border:1px solid var(--line);
  border-radius:7px;

  background:rgba(2,9,15,.96);
}

.city-intelligence-panel[hidden]{
  display:none;
}

.cip-heading{
  margin:0 0 12px;

  color:var(--gold);

  font-size:14px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.cip-modules{
  display:flex;
  flex-direction:column;

  gap:14px;
}

.cip-module{
  padding:14px 16px;

  border:1px solid #223040;
  border-radius:6px;

  background:#06131f;
  color:#fff;
}

.cip-module-label{
  margin:0 0 6px;

  color:var(--gold2);

  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.cip-module p{
  margin:0 0 6px;

  color:var(--muted);

  font-size:14px;
  line-height:1.5;
}

.cip-module p:last-child{
  margin-bottom:0;
}

.cip-module-media{
  display:flex;
  flex-wrap:wrap;

  gap:8px;

  margin-bottom:10px;
}

.cip-module-media img{
  width:96px;
  height:72px;

  border-radius:4px;
  object-fit:cover;
}

.cip-applicability-note{
  margin-top:8px;

  padding-top:8px;

  border-top:1px dashed #223040;

  color:#8a959e;

  font-size:12px;
  font-style:italic;
}

.cip-qa-item{
  margin-bottom:10px;
}

.cip-qa-item:last-child{
  margin-bottom:0;
}

.cip-qa-question{
  margin:0 0 4px;

  color:#fff;

  font-size:14px;
  font-weight:700;
}

.cip-cta-button{
  display:inline-block;

  margin-top:4px;
  padding:9px 18px;

  border:1px solid var(--gold);
  border-radius:5px;

  background:var(--gold);
  color:#071019;

  font-size:13px;
  font-weight:900;
  text-decoration:none;
  text-transform:uppercase;
}

.cip-provenance{
  margin-top:6px;

  color:#4c5a64;

  font-size:10px;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.next-cities{
  display:grid;

  grid-template-columns:
    170px
    1fr;

  gap:8px;

  margin-top:10px;

  padding:6px;

  border:1px solid var(--line);
  border-radius:7px;

  background:rgba(2,9,15,.96);
}

.next-label{
  display:flex;
  align-items:center;

  padding-left:15px;

  color:var(--gold);

  font-size:13px;
  font-weight:900;
}

.next-card-wrap{
  display:grid;

  grid-template-columns:repeat(5,1fr);

  gap:8px;
}

.next-card{
  display:grid;

  grid-template-columns:80px 1fr;

  min-height:72px;

  overflow:hidden;

  border:1px solid #34424c;
  border-radius:5px;

  background:#06131f;
  color:#fff;

  text-align:left;

  cursor:pointer;
}

.next-card.active{
  border-color:var(--gold);
}

.next-map{
  background:
    linear-gradient(
      34deg,
      transparent 44%,
      rgba(245,180,0,.65) 45%,
      rgba(245,180,0,.65) 46%,
      transparent 47%
    ),
    linear-gradient(
      90deg,
      transparent 51%,
      rgba(245,180,0,.38) 52%,
      rgba(245,180,0,.38) 53%,
      transparent 54%
    ),
    #071a2b;
}

.next-copy{
  padding:9px;
}

.next-copy b{
  display:block;

  font-size:12px;
}

.next-copy span{
  display:block;

  margin-top:5px;

  color:#c5cdd3;

  font-size:9px;
}

/* ======================================================== */
/* BOTTOM FEATURES                                          */
/* ======================================================== */

.feature-row{
  display:grid;

  grid-template-columns:repeat(6,1fr);

  margin-top:12px;

  border:1px solid var(--line);
  border-radius:7px;

  overflow:hidden;

  background:rgba(2,9,15,.96);
}

.feature-row article{
  display:grid;

  grid-template-columns:52px 1fr;

  gap:10px;

  min-height:110px;

  padding:15px 13px;

  border-right:1px solid #263540;
}

.feature-row article:last-child{
  border-right:0;
}

.icon{
  color:var(--gold);

  font-size:39px;
}

.feature-row b{
  display:block;

  margin-bottom:6px;

  font-size:10px;

  text-transform:uppercase;
}

.feature-row span{
  color:#d1d7dc;

  font-size:10px;
  line-height:1.45;
}

/* ======================================================== */
/* BUILD_D1_GOLD_BENEFIT_BAR                                */
/* gold_lock section 9 -- deep navy/near-black background,  */
/* four balanced sections, thin separators, circular gold   */
/* icon treatment, strong white headings.                   */
/* ======================================================== */

.gold-benefit-bar{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  margin-top:12px;

  border:1px solid var(--line);
  border-radius:7px;

  overflow:hidden;

  background:var(--bg);
}

.gold-benefit-bar article{
  display:flex;
  flex-direction:column;
  align-items:center;

  gap:12px;

  padding:22px 16px;

  border-right:1px solid #263540;

  text-align:center;
}

.gold-benefit-bar article:last-child{
  border-right:0;
}

.gold-benefit-icon{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border-radius:50%;

  border:1px solid var(--gold);

  color:var(--gold);

  font-size:16px;
}

.gold-benefit-bar b{
  display:block;

  color:#fff;

  font-size:13px;
  line-height:1.4;

  font-weight:900;

  text-transform:uppercase;
  letter-spacing:.02em;
}

@media(max-width:1200px){

  .gold-benefit-bar{
    grid-template-columns:repeat(2,1fr);
  }

  .gold-benefit-bar article:nth-child(2){
    border-right:0;
  }
}

@media(max-width:760px){

  .gold-benefit-bar{
    grid-template-columns:1fr;
  }

  .gold-benefit-bar article{
    border-right:0;
    border-bottom:1px solid #263540;
  }

  .gold-benefit-bar article:last-child{
    border-bottom:0;
  }
}

/* ======================================================== */
/* SPACE TRANSITION                                         */
/* ======================================================== */

.transition-overlay{
  position:fixed;

  inset:0;

  z-index:999;

  display:none;

  /*
   * BUILD_D1_GOLD_TRANSPARENT_TRANSITION
   * Was solid #000, which alone was already enough to fully
   * block the live map behind the branded transition. Gold
   * lock section 3 / section 14 (BLUE_TRANSITION_CIRCLE=
   * REMOVE_OR_FULLY_TRANSPARENT) requires "the live map must
   * remain visible behind the branded transition" -- so this
   * backdrop is now transparent; see .space-stage below for
   * the (much lighter) legibility tint that replaces it.
   */
  background:transparent;
}

.transition-overlay.active{
  display:block;
}

.space-stage{
  position:absolute;

  inset:0;

  overflow:hidden;

  /*
   * BUILD_D1_GOLD_TRANSPARENT_TRANSITION
   * Was an opaque navy/black radial gradient (0 to fully solid
   * #000) that, together with .transition-overlay's own #000
   * above, completely hid the map for the whole transition.
   * Replaced with a much lighter, partially transparent vignette
   * -- enough contrast to keep the logo/intro/slogan legible,
   * while the live map genuinely shows through underneath.
   */
  background:
    radial-gradient(
      circle at 50% 60%,
      rgba(2,10,18,.35) 0%,
      rgba(2,10,18,.55) 55%,
      rgba(2,10,18,.72) 100%
    );
}

.space-earth{
  /*
   * BUILD_D1_GOLD_TRANSPARENT_TRANSITION
   * This is the "large blue circular background" gold_lock
   * section 3/14 requires removed or made fully transparent.
   * Hidden via display:none (element left in the DOM -- see
   * index.html comment -- rather than deleted, so the change
   * stays reversible).
   */
  display:none;

  position:absolute;

  left:50%;
  top:50%;

  width:420px;
  height:420px;

  transform:
    translate(-50%,-40%);

  border-radius:50%;

  background:
    radial-gradient(
      circle at 37% 35%,
      #3e7ba0,
      #174466 32%,
      #0b2740 55%,
      #04101d 75%,
      #010409
    );

  box-shadow:
    0 0 70px rgba(77,153,214,.35);
}

.space-copy{
  position:absolute;

  left:50%;
  bottom:13%;

  transform:translateX(-50%);

  text-align:center;

  text-transform:uppercase;
}

.space-copy small{
  display:block;

  color:var(--gold);

  font-size:11px;
  letter-spacing:.18em;
}

.space-copy strong{
  display:block;

  margin-top:8px;

  font-size:38px;
}

/* ============================================================
   SAMIES_STEP_009 — BRANDED CITY TRANSITION
   Logo fades in first, then the city introduction, then the
   universal slogan beneath it. All three fade out together.
   Purely additive to the existing .space-stage/.space-copy —
   neither is modified.
   ============================================================ */

.brand-transition{
  position:absolute;
  left:50%;
  top:38%;

  transform:translate(-50%,-50%);

  z-index:2;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;

  width:min(640px, 84vw);

  text-align:center;

  pointer-events:none;
}

.brand-transition-logo{
  max-width:260px;
  max-height:110px;

  width:auto;
  height:auto;

  opacity:0;

  transition:opacity .5s ease;
}

.brand-transition-intro{
  margin:0;

  color:#fff;

  font-size:22px;
  line-height:1.3;

  text-transform:none;
  letter-spacing:.01em;

  opacity:0;

  transition:opacity .5s ease;

  /*
   * BUILD_C_MG_ASSET_INTEGRATION
   *
   * --slogan-font is now defined in :root above via a real
   * @font-face pointing at the verified TradeWinds asset. No
   * change was needed here -- this is exactly the "nothing else
   * here needs to change" state the original Step 009 comment
   * anticipated.
   */
  font-family:var(--slogan-font, inherit);
}

.brand-transition-slogan{
  margin:0;

  max-width:560px;

  color:var(--muted);

  font-size:15px;
  line-height:1.5;
  font-weight:600;

  opacity:0;

  transition:opacity .5s ease;

  font-family:var(--slogan-font, inherit);
}

.brand-transition-logo.brand-visible,
.brand-transition-intro.brand-visible,
.brand-transition-slogan.brand-visible{
  opacity:1;
}

/* ======================================================== */
/* RESPONSIVE                                               */
/* ======================================================== */

@media(max-width:1200px){

  .nav{
    display:none;
  }

  /*
   * BUILD_D1_GOLD_PRESENTATION_SHELL
   * Was 220px left-column + map track; left-column no longer
   * exists (moved to .gold-topbar), so this collapses to a
   * single track and .right-panel (grid-column:1/-1 below)
   * stacks under the map, same as before.
   */
  .app-shell{
    grid-template-columns:
      minmax(0,1fr);
  }

  .right-panel{
    grid-column:1 / -1;

    border-left:0;
    border-top:1px solid #283743;
  }

  .next-card-wrap{
    grid-template-columns:repeat(5,210px);

    overflow-x:auto;
  }

  .feature-row{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:760px){

  .topbar{
    grid-template-columns:1fr auto;
  }

  .phone{
    display:none;
  }

  .app-shell{
    grid-template-columns:1fr;
  }

  .map-column{
    min-height:560px;
  }

  .gold-topbar{
    padding:12px 14px 2px;
  }

  .city-rail{
    padding:12px 14px 11px;
  }

  .map-surface{
    min-height:380px;
  }

  .feature-row{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   SAMIES BUILD/FORK 003 — ROUTE SHIELDS
   VISUAL OVERLAY ONLY
   ============================================================ */

.samies-route-shield-layer{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:20;
}

.samies-route-shield{
    position:absolute;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
    font-weight:900;
    line-height:1;
    text-align:center;
    user-select:none;
}

.samies-interstate-shield{
    width:54px;
    height:64px;
    color:#fff;
    background:
        linear-gradient(
            to bottom,
            #b22234 0%,
            #b22234 30%,
            #fff 30%,
            #fff 35%,
            #0645a5 35%,
            #0645a5 100%
        );
    border:3px solid #fff;
    clip-path:polygon(
        18% 0%,
        82% 0%,
        96% 18%,
        90% 58%,
        74% 82%,
        50% 100%,
        26% 82%,
        10% 58%,
        4% 18%
    );
    text-shadow:0 1px 2px rgba(0,0,0,.65);
    box-shadow:
        0 0 0 2px rgba(0,0,0,.9),
        0 2px 8px rgba(0,0,0,.7);
}

.samies-interstate-shield::before{
    content:"INTERSTATE";
    position:absolute;
    top:7px;
    left:0;
    right:0;
    color:#fff;
    font-size:8px;
    letter-spacing:.35px;
    font-weight:900;
}

.samies-interstate-number{
    position:absolute;
    left:0;
    right:0;
    bottom:10px;
    color:#fff;
    font-size:25px;
    font-weight:950;
}

.samies-state-shield{
    min-width:48px;
    height:56px;
    padding:7px 9px;
    color:#000;
    background:#fff;
    border:4px solid #000;
    border-radius:8px 8px 12px 12px;
    box-shadow:
        0 0 0 2px rgba(255,255,255,.9),
        0 2px 7px rgba(0,0,0,.7);
    font-size:24px;
    font-weight:950;
}


/*
 * BUILD/FORK 005
 * Native vector shields are MapLibre symbol layers.
 * No DOM shield styling is used here.
 *
 * City titles, place labels and street labels are intentionally
 * untouched.
 */


/* ============================================================
   BUILD/FORK 006 — VISIBLE ROUTE SHIELDS
   ============================================================ */

.samies-visible-route-shield-layer{
    display:block;
    pointer-events:none;
    user-select:none;
    z-index:20;
}

.samies-visible-route-shield-layer svg{
    display:block;
    overflow:visible;
    filter:
        drop-shadow(0 2px 3px rgba(0,0,0,.65));
}

.samies-interstate-shield{
    width:74px;
    height:82px;
}

.samies-state-shield{
    width:60px;
    height:66px;
}