/* ==========================================================================
   SERVICE AREAS — photo cards (desktop) + blueprint layout (mobile ≤ 900px)
   Load AFTER index1.css / index2.css.  Everything here uses the site's own
   tokens (--card, --line, --ink, --aqua, --rust, --ochre …) so it follows
   the dark / light theme switch automatically.
   ========================================================================== */

.sarea{
  --m-ink:var(--ink); --m-dim:var(--ink-dim);
  --m-panel:var(--card);
  --m-edge:color-mix(in srgb,var(--aqua) 26%,var(--line));
  --m-land1:color-mix(in srgb,var(--aqua) 34%,var(--card));
  --m-land2:color-mix(in srgb,var(--aqua) 7%,var(--card));
}

/* things that only exist on mobile: hidden on desktop */
.sarea .sarea-m,
.sarea .sarea-cta-m-kicker,
.sarea .sarea-cta-m-title,
.sarea .sarea-cta-call-arrow{ display:none; }

/* ==========================================================================
   DESKTOP — photo on top of each of the 6 cards
   ========================================================================== */
.sarea .sarea-card{ padding:0 0 68px; }
.sarea .sarea-photo{ position:relative; margin:0; aspect-ratio:16/10; overflow:hidden; border-bottom:3px solid var(--c); }
.sarea .sarea-photo img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.sarea .sarea-photo::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,transparent 40%,rgba(0,0,0,.18) 100%);
}
.sarea .sarea-card:hover .sarea-photo img{ transform:scale(1.08); }
.sarea .sarea-card .sarea-num{ z-index:2; box-shadow:0 6px 14px -6px rgba(0,0,0,.6); }
.sarea .sarea-card h3{ padding:0 14px; margin:16px 0 8px; font-size:clamp(.7rem,.98vw,.9rem); overflow-wrap:anywhere; }
.sarea .sarea-card p{ padding:0 14px; }

/* ==========================================================================
   MOBILE / TABLET  (≤ 900px)
   ========================================================================== */
@media (max-width:900px){

  .sarea .sarea-top{ gap:18px; margin-bottom:28px; }

  /* old orbit map + its mobile pill are replaced by .sarea-m */
  .sarea .sarea-map-wrap,
  .sarea .sarea-map-legend-mobile,
  .sarea .sarea-cards{ display:none; }

  /* ---- heading ---- */
  .sarea .sarea-mobile-head{ gap:10px; margin:0 auto; }
  .sarea .sarea-m-eyebrow{
    display:flex; align-items:center; gap:12px;
    font-family:var(--font-mono); font-weight:500; font-size:.66rem;
    letter-spacing:.22em; color:var(--aqua); text-transform:uppercase;
  }
  .sarea .sarea-m-eyebrow i{ display:block; width:30px; height:2px; border-radius:2px; }
  .sarea .sarea-m-eyebrow i:first-child{ background:linear-gradient(90deg,transparent,var(--aqua)); }
  .sarea .sarea-m-eyebrow i:last-child{ background:linear-gradient(90deg,var(--rust),transparent); }
  .sarea .sarea-mobile-title{ color:var(--ink); font-weight:700; letter-spacing:.01em; }
  .sarea .sarea-mobile-title .hl{ color:var(--aqua); -webkit-text-fill-color:var(--aqua); background:none; }
  .sarea .sarea-mobile-sub{ color:var(--ink-dim); max-width:40ch; line-height:1.5; }

  /* ---- feature list + district map panel ---- */
  .sarea .sarea-m{
    position:relative; overflow:hidden;
    display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr);
    align-items:center; gap:2px; padding:12px 4px 12px 12px;
    border:1px solid var(--m-edge); border-radius:var(--radius); background:var(--m-panel);
    box-shadow:var(--shadow);
  }
  .sarea .sarea-m::before{ /* soft aqua + rust glow behind the map */
    content:''; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(260px 200px at 72% 55%, var(--aqua-glow), transparent 70%),
      radial-gradient(160px 120px at 94% 4%, rgba(193,87,30,.12), transparent 70%);
  }
  .sarea .sarea-m > *{ position:relative; }
  .sarea .sarea-m-feats{ display:flex; flex-direction:column; }
  .sarea .sarea-m-feat{
    display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:6px; align-items:start;
    padding:9px 0; border-top:1px solid var(--line);
  }
  .sarea .sarea-m-feat:first-child{ border-top:0; padding-top:0; }
  .sarea .sarea-m-feat:last-child{ padding-bottom:0; }
  .sarea .sarea-m-feat-ico{
    grid-row:1 / span 2; width:24px; height:24px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:.62rem; color:var(--on-accent);
    background:linear-gradient(145deg,var(--aqua),color-mix(in srgb,var(--aqua) 60%,#000));
    box-shadow:0 6px 14px -6px var(--aqua-glow);
  }
  .sarea .sarea-m-feat:nth-child(2) .sarea-m-feat-ico{ color:#fff; background:linear-gradient(145deg,var(--rust-light),var(--rust)); box-shadow:0 6px 14px -6px rgba(193,87,30,.7); }
  .sarea .sarea-m-feat:nth-child(3) .sarea-m-feat-ico{ color:#fff; background:linear-gradient(145deg,var(--ochre),color-mix(in srgb,var(--ochre) 62%,#000)); box-shadow:0 6px 14px -6px rgba(217,164,65,.6); }
  .sarea .sarea-m-feat h4{
    font-family:var(--font-body); font-size:.56rem; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; color:var(--ink); line-height:1.25; margin:0;
  }
  .sarea .sarea-m-feat p{ font-size:.53rem; line-height:1.4; color:var(--ink-dim); margin:2px 0 0; }

  /* ---- the map ---- */
  .sarea .sarea-m-map{ display:block; width:100%; height:auto; overflow:visible; }
  .sarea .sarea-m-map .gdot{ fill:var(--ink-dim); opacity:.45; }
  .sarea .sarea-m-map .landglow{ fill:var(--aqua); opacity:.35; }
  .sarea .sarea-m-map .land{ fill:url(#smLand); stroke:var(--aqua); stroke-width:1.1; stroke-linejoin:round; }
  .sarea .sarea-m-map .contour{ fill:none; stroke:var(--aqua); stroke-width:.6; opacity:.3; }
  .sarea .sarea-m-map .sub{ fill:none; stroke:var(--ink-dim); stroke-width:.6; opacity:.4; stroke-dasharray:2 1.6; }
  .sarea .sarea-m-map .link{ fill:none; stroke:var(--aqua); stroke-width:1; stroke-dasharray:2 3; stroke-linecap:round; opacity:.9; }
  .sarea .sarea-m-map .halo{ fill:var(--aqua); opacity:.16; }
  .sarea .sarea-m-map .ring{ fill:var(--card); stroke:var(--aqua); stroke-width:1.3; }
  .sarea .sarea-m-map .ring--hq{ stroke:var(--rust-light); stroke-width:1.8; }
  .sarea .sarea-m-map .hqglow{ fill:var(--rust); opacity:.2; }
  .sarea .sarea-m-map .pulse{ fill:none; stroke:var(--rust-light); stroke-width:1; opacity:0; }
  .sarea .sarea-m-map .drop{ fill:var(--aqua); }
  .sarea .sarea-m-map .dropshine{ fill:#fff; opacity:.55; }
  .sarea .sarea-m-map .lbl{
    font-family:var(--font-body); font-weight:700; font-size:9.6px; letter-spacing:0; text-rendering:geometricPrecision;
    fill:var(--ink); text-anchor:middle; paint-order:stroke; stroke:var(--card); stroke-width:2.6px; stroke-linejoin:round;
  }
  .sarea .sarea-m-map .lbl--hq{ font-size:10.5px; stroke:none; }
  .sarea .sarea-m-map .cmp{ fill:none; stroke:var(--ink-dim); stroke-width:.6; opacity:.7; }
  .sarea .sarea-m-map .cmp-t{ font-family:var(--font-body); font-size:5px; fill:var(--ink-dim); text-anchor:middle; }
  .sarea .sarea-m-map .cmp-star{ fill:var(--aqua); }

  @media (prefers-reduced-motion:no-preference){
    .sarea .sarea-m-map .link{ animation:smFlow 2.4s linear infinite; }
    .sarea .sarea-m-map .pulse{ transform-box:fill-box; transform-origin:center; animation:smPulse 3s ease-out infinite; }
    .sarea .sarea-m-map .pulse--b{ animation-delay:1.5s; }
  }
  @keyframes smFlow{ to{ stroke-dashoffset:-10; } }
  @keyframes smPulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.75); opacity:0; } }

  /* ---- divider + 3 x 2 photo cards ---- */
  .sarea .sarea-quick{ display:block; margin-top:6px; }
  .sarea .sarea-pc-head{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 0 16px; }
  .sarea .sarea-pc-head > i{ color:var(--aqua); font-size:1.25rem; filter:drop-shadow(0 0 8px var(--aqua-glow)); }
  .sarea .sarea-pc-head > div{ display:flex; align-items:center; gap:14px; width:100%; justify-content:center; }
  .sarea .sarea-pc-head b{
    font-family:var(--font-display); font-weight:700; font-size:.82rem; letter-spacing:.2em;
    color:var(--aqua); white-space:nowrap; text-transform:uppercase;
  }
  .sarea .sarea-pc-head span{ flex:1 1 0; max-width:92px; height:2px; border-radius:2px; }
  .sarea .sarea-pc-head span:first-child{ background:linear-gradient(90deg,transparent,var(--aqua)); }
  .sarea .sarea-pc-head span:last-child{ background:linear-gradient(90deg,var(--rust),transparent); }

  .sarea .sarea-pc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; padding:0; }
  .sarea .sarea-pc{
    --c1:var(--sarea-c1); --c2:color-mix(in srgb,var(--c1) 62%,#000);
    position:relative; display:block; container-type:inline-size; aspect-ratio:1.12;
    border-radius:12px; overflow:hidden; isolation:isolate; color:#fff; text-decoration:none;
    border:1px solid var(--line); background:var(--slate-2);
    box-shadow:var(--shadow);
  }
  .sarea .sarea-pc:nth-child(2){ --c1:var(--sarea-c2); }
  .sarea .sarea-pc:nth-child(3){ --c1:var(--sarea-c3); }
  .sarea .sarea-pc:nth-child(4){ --c1:var(--sarea-c4); }
  .sarea .sarea-pc:nth-child(5){ --c1:var(--sarea-c5); }
  .sarea .sarea-pc:nth-child(6){ --c1:var(--sarea-c6); }
  .sarea .sarea-pc img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
  .sarea .sarea-pc::before{
    content:''; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg,rgba(10,18,24,0) 25%,rgba(10,18,24,.92) 88%);
  }
  .sarea .sarea-pc::after{ /* curved colour swoosh along the bottom edge */
    content:''; position:absolute; left:-12%; right:-12%; bottom:-24%; height:34%;
    border-radius:50%; background:linear-gradient(90deg,var(--c2),var(--c1)); z-index:0;
  }
  .sarea .sarea-pc-pin{
    position:absolute; left:7%; top:34%; width:20%; aspect-ratio:1; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:7.5cqw; color:#fff;
    background:linear-gradient(145deg,var(--c1),var(--c2));
    box-shadow:0 0 0 1.5px rgba(255,255,255,.28), 0 6px 12px -4px rgba(0,0,0,.6);
  }
  .sarea .sarea-pc-name{
    position:absolute; left:7%; right:4%; bottom:19%; z-index:1; margin:0;
    font-family:var(--font-body); font-weight:700; font-size:clamp(6.5px,7.6cqw,13px);
    letter-spacing:0; line-height:1.1; color:#fff; text-transform:uppercase; white-space:nowrap;
    text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.7);
  }
  .sarea .sarea-pc-go{
    position:absolute; right:7%; top:36%; z-index:1; width:16%; aspect-ratio:1; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:6.5cqw; color:#fff;
    background:rgba(10,18,24,.7); border:1px solid rgba(255,255,255,.4);
  }
  .sarea .sarea-pc:focus-visible{ outline:2px solid var(--aqua); outline-offset:2px; }

  /* ---- bottom call-to-action bar ---- */
  .sarea .sarea-cta{
    flex-wrap:nowrap; gap:10px; margin-top:22px; padding:14px 12px; border-radius:var(--radius);
    border:1px solid var(--m-edge); background:var(--card); box-shadow:var(--shadow); align-items:center;
  }
  .sarea .sarea-cta-info{ flex:1 1 auto; min-width:0; gap:10px; }
  .sarea .sarea-cta-info i.truck{
    flex:0 0 auto; width:auto; height:auto; border-radius:0; font-size:1.7rem;
    background:linear-gradient(135deg,var(--aqua),var(--ochre));
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  }
  .sarea .sarea-cta-info h4,
  .sarea .sarea-cta-info p:not(.sarea-cta-desc-mobile){ display:none; }
  .sarea .sarea-cta-m-kicker{ display:block; font-size:.54rem; line-height:1.3; color:var(--ink-dim); }
  .sarea .sarea-cta-m-title{ display:block; font-family:var(--font-display); font-size:.82rem; line-height:1.2; color:var(--ink); margin:2px 0; }
  .sarea .sarea-cta-info p.sarea-cta-desc-mobile{ display:block; font-size:.54rem; line-height:1.3; color:var(--ink-dim); margin:0; white-space:normal; overflow:visible; text-overflow:clip; -webkit-line-clamp:unset; }
  .sarea .sarea-cta-stats{ display:none; }
  .sarea .sarea-cta-call{
    flex:0 0 auto; gap:4px; padding:7px 10px; border-radius:999px; color:#fff;
    background:linear-gradient(135deg,var(--rust),var(--rust-light)); box-shadow:0 10px 22px -10px rgba(193,87,30,.8);
  }
  .sarea .sarea-cta-call-icon{ width:auto; height:auto; background:none; font-size:.72rem; }
  .sarea .sarea-cta-call small,
  .sarea .sarea-cta-call em{ display:none; }
  .sarea .sarea-cta-call strong{ font-size:.6rem; white-space:nowrap; }
  .sarea .sarea-cta-call-arrow{ display:none; }
}

@media (max-width:380px){
  .sarea .sarea-m{ grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr); padding:10px 3px 10px 9px; }
  .sarea .sarea-m-feat{ grid-template-columns:20px minmax(0,1fr); column-gap:5px; }
  .sarea .sarea-m-feat-ico{ width:20px; height:20px; font-size:.52rem; }
  .sarea .sarea-m-feat h4{ font-size:.5rem; }
  .sarea .sarea-m-feat p{ font-size:.48rem; }
  .sarea .sarea-cta-call strong{ font-size:.58rem; }
  .sarea .sarea-pc-grid{ gap:7px; }
}

@media (prefers-reduced-motion:reduce){
  .sarea .sarea-photo img{ transition:none; }
}