/* NTS Group — design system stylesheet, restyled to match the Miwayz
   (miwayz.com) look: Plus Jakarta Sans throughout, dark navy text/backgrounds,
   soft rounded cards with gentle shadows, circular icon badges. */
/* Plus Jakarta Sans (SIL OFL 1.1) is self-hosted, so no request is made to Google Fonts
   and no visitor data is sent to a third party before consent. */
@font-face{font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');}
:root{
  --charcoal-900:#0F2138; --charcoal-700:#3d4a5c; --charcoal-500:#6b7685; --charcoal-300:#a4acb6;
  --navy-900:#0D1B2A; --navy-800:#132A40;
  --blue-500:#00A7E1; --blue-700:#0a5e7a; --blue-100:#e6f6fc;
  --orange-500:#FF9015; --orange-700:#c96a05; --orange-100:#fff1e0;
  --surface-white:#F8F7F4; --surface-warm:#EDFAFF;
  --neutral-100:#f2f1ef; --neutral-200:#e0ded9; --neutral-300:#c9c6bf;
  --success:#1e8e5a; --error:#c0392b;
  --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-pill:999px;
  --shadow-card:0 1px 3px rgba(13,27,42,.06), 0 1px 2px rgba(13,27,42,.04);
  --shadow-raised:0 8px 24px rgba(13,27,42,.10);
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px; --space-7:64px; --space-8:96px;
  --maxw:1280px; --maxw-narrow:720px;
  --font-body: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --header-h: 88px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 16px);}
body{margin:0; font-family:var(--font-body); color:var(--charcoal-900); background:var(--surface-white); line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.18; margin:0 0 var(--space-3); letter-spacing:-.01em;}
h1{font-size:48px;} h2{font-size:32px;} h3{font-size:22px;} h4{font-size:17px;}
p{margin:0 0 var(--space-3);}
ul{margin:0; padding:0;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.container-narrow{max-width:var(--maxw-narrow); margin:0 auto; padding:0 24px;}
@media (max-width:768px){ h1{font-size:34px;} h2{font-size:26px;} h3{font-size:20px;} body{font-size:16px;} }

/* Skip link */
.skip-link{position:absolute; left:-9999px; top:0; background:var(--charcoal-900); color:#fff; padding:12px 20px; z-index:1000; border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}

/* Focus states */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--blue-500); outline-offset:2px; border-radius:2px;
}

/* Header — floating pill navbar */
.site-header{position:sticky; top:0; z-index:500; height:var(--header-h); display:flex; align-items:center; background:transparent;}
.site-header .container{
  position:relative; display:flex; align-items:center; justify-content:space-between; width:100%; min-height:72px;
  padding:10px 12px 10px 20px; border-radius:var(--radius-pill);
  /* Liquid glass: translucent frosted pill with blur, saturation lift, and a
     soft inner highlight to suggest curved glass catching light. */
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.48));
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 8px 32px rgba(13,27,42,.12),
    0 1px 1px rgba(255,255,255,.6) inset,
    0 -1px 12px rgba(13,27,42,.05) inset;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-header .container{background:rgba(255,255,255,.92);}
}
.logo{font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:.01em; color:var(--charcoal-900); display:flex; align-items:center; gap:10px; text-transform:uppercase;}
.logo .logo-mark{height:44px; width:44px; border-radius:12px; display:block; box-shadow:0 1px 3px rgba(13,27,42,.18);}
.mn-header .logo .logo-mark{height:36px; width:36px;}
/* Header nav bar only: full wide NTS Garage lockup instead of the square
   icon tile — no border-radius/shadow since it isn't a tile artwork. */
.site-header .logo .logo-mark--wide{height:38px; width:auto; border-radius:0; box-shadow:none;}
.main-nav{display:flex; align-items:center; gap:4px; margin:0 auto; position:absolute; left:50%; transform:translateX(-50%);}
.main-nav > ul{display:flex; list-style:none; gap:6px;}
.nav-item{position:relative;}
.nav-link{display:flex; align-items:center; gap:4px; padding:10px 14px; font-size:15px; font-weight:600; border-radius:var(--radius-pill); color:var(--charcoal-700); white-space:nowrap;}
.nav-link:hover, .nav-link[aria-current="page"]{color:var(--blue-700); background:rgba(0,167,225,.14);}
.dropdown{
  position:absolute; top:100%; left:0; border-radius:var(--radius-md); min-width:220px; padding:8px;
  opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .15s ease, transform .15s ease;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.68));
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 8px 24px rgba(13,27,42,.14), 0 1px 1px rgba(255,255,255,.6) inset;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .dropdown{background:rgba(255,255,255,.98);}
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown a{display:block; padding:10px 12px; border-radius:var(--radius-sm); font-size:15px;}
.dropdown a:hover{background:var(--neutral-100); color:var(--blue-700);}
.header-actions{display:flex; align-items:center; gap:12px;}
.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.menu-toggle svg{width:24px; height:24px;}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 28px; height:52px; border-radius:var(--radius-pill); font-weight:600; font-size:15px; letter-spacing:normal; text-transform:none; border:2px solid transparent; cursor:pointer;}
.btn-primary{background:var(--orange-500); color:#fff;}
.btn-primary:hover{background:var(--orange-700);}
.btn-blue{background:var(--blue-500); color:#fff;}
.btn-blue:hover{background:var(--blue-700);}
.btn-secondary{background:#fff; border-color:var(--neutral-300); color:var(--charcoal-900);}
.btn-secondary:hover{background:var(--neutral-100);}
.btn-secondary.on-dark{background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.6); color:#fff; box-shadow:none;}
.btn-secondary.on-dark:hover{background:#fff; color:var(--blue-700);}
/* NTS Garage brand-themed pill, used where this site links out to the NTS Garage site. */
.btn-nts-garage{background:#00a7e1; border-color:#00a7e1; color:#fff;}
.btn-nts-garage:hover{background:#0090c4; border-color:#0090c4;}
.btn-ghost{background:transparent; color:var(--blue-700); padding:0 8px; height:auto; box-shadow:none; text-transform:none; font-weight:600;}
.btn-pill{border-radius:var(--radius-pill); text-transform:none; font-weight:600; letter-spacing:normal;}
.btn-pill .icon{width:16px; height:16px;}
.form-note{margin-top:12px; font-size:14px; color:var(--charcoal-700);}
.btn-ghost:hover{text-decoration:underline;}
.btn[disabled]{opacity:.4; cursor:not-allowed;}
.btn-sm{height:42px; padding:0 18px; font-size:13px;}
@media (max-width:600px){ .btn{width:100%;} }

/* Hero — solid brand blue, friendly two-column layout */
.hero{position:relative; padding:var(--space-7) 0 var(--space-8); background:var(--blue-500); color:#fff; overflow:hidden;}
.hero .container{position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
.hero-eyebrow{display:inline-block; font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-500); margin-bottom:16px;}
.hero h1{font-size:52px; max-width:600px; color:#fff;}
.hero p.lead{font-size:19px; color:rgba(255,255,255,.9); max-width:520px; margin-bottom:32px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
.hero-media{background:repeating-linear-gradient(135deg,#2b2e2b,#2b2e2b 10px,#323530 10px,#323530 20px); border-radius:var(--radius-lg); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; text-align:center;}
.hero-media.hero-photo{background:none; object-fit:cover; width:100%; height:100%; box-shadow:var(--shadow-raised);}
.hero-media.hero-video{
  background:linear-gradient(135deg,#132A40,#0D1B2A); flex-direction:column; gap:16px;
  box-shadow:var(--shadow-raised); cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;
  text-transform:none; font-weight:600;
}
.hero-media.hero-video:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(13,27,42,.28);}
.hero-media.hero-video .play-btn{
  width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s ease;
}
.hero-media.hero-video .play-btn svg{width:28px; height:28px; margin-left:4px;}
.hero-media.hero-video:hover .play-btn{background:var(--orange-500); border-color:var(--orange-500);}
.hero-media.hero-video .hero-video-label{color:rgba(255,255,255,.85); font-size:14px; letter-spacing:.02em;}
.hero-media.hero-video-native{background:#0D1B2A; box-shadow:var(--shadow-raised); padding:0; overflow:hidden; aspect-ratio:16/9;}
.hero-media.hero-video-native video{width:100%; height:100%; object-fit:contain; border-radius:var(--radius-lg); display:block;}
@media (max-width:900px){ .hero .container{grid-template-columns:1fr;} .hero-media{display:none;} }
@media (max-width:768px){ .hero h1{font-size:32px;} .hero{padding:48px 0 40px;} .hero-ctas{flex-direction:column;} }
/* Page hero — the one canonical blue header for every secondary page.
   Fixed padding and H1/lead sizing regardless of whether a page adds an
   eyebrow and/or a CTA button: those flow as normal content, so they never
   change the hero's own height. */
.page-hero{background:var(--blue-500); color:#fff; padding:var(--space-7) 0;}
.page-hero .hero-eyebrow{color:#fff;}
.page-hero h1{color:#fff; font-size:48px; max-width:680px; margin-bottom:var(--space-3);}
.page-hero p.lead{color:rgba(255,255,255,.9); max-width:640px; font-size:18px; margin:0;}
.page-hero .btn{margin-top:16px;}
@media (max-width:768px){ .page-hero{padding:var(--space-6) 0;} .page-hero h1{font-size:34px;} }

/* Sections */
section{padding:var(--space-8) 0;}
section.tight{padding:var(--space-6) 0;}
.section-warm{background:var(--surface-warm);}
.section-grey{background:var(--neutral-100);}
.section-dark{background:var(--navy-900); color:#fff;}
.section-dark h2,.section-dark h3{color:#fff;}
.section-dark .section-heading .eyebrow{color:var(--orange-500);}
.section-blue{background:linear-gradient(120deg,#0a5e7a,#00A7E1);color:#fff;}
.section-heading{max-width:640px; margin-bottom:var(--space-5);}
.section-heading .eyebrow{color:var(--blue-700); font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; display:block;}
@media (max-width:768px){ section{padding:56px 0;} }

/* Grids & cards */
.grid{display:grid; gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

.card{background:#fff; border:1px solid var(--neutral-200); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-card); position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.card::before{content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s ease; background:linear-gradient(135deg, rgba(0,167,225,.12), rgba(255,144,21,.10)); pointer-events:none;}
.card:hover{border-color:var(--blue-500); transform:translateY(-4px); box-shadow:var(--shadow-raised);}
.card:hover::before{opacity:1;}
/* Flip cards (Brands & Services): front shows the brand/service name,
   back reveals the availability note on hover/focus. */
.card.flip-card{background:transparent; border:none; box-shadow:none; padding:0; overflow:visible; perspective:1200px; min-height:190px;}
.card.flip-card::before{display:none;}
.card.flip-card:hover{transform:none; border-color:transparent; box-shadow:none;}
.flip-card-inner{position:relative; width:100%; height:100%; min-height:190px; transition:transform .6s cubic-bezier(.4,.15,.2,1); transform-style:preserve-3d; -webkit-transform-style:preserve-3d;}
.card.flip-card:hover .flip-card-inner, .card.flip-card:focus-within .flip-card-inner{transform:rotateY(180deg);}
/* backface-visibility:hidden is not enough on its own on iOS/mobile Safari:
   without an explicit compositing layer (translateZ(0)) and overflow clipping,
   the hidden face's content (e.g. the photo-face "Shell" watermark label) can
   still bleed through, mirrored, at the rounded corners of the visible face. */
.flip-card-face{position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; -webkit-transform:translateZ(0) rotateY(0deg); transform:translateZ(0); border-radius:var(--radius-lg); padding:28px; display:flex; flex-direction:column; justify-content:center;}
.flip-card-front{background:#fff; border:1px solid var(--neutral-200); box-shadow:var(--shadow-card);}
.flip-card-back{background:linear-gradient(135deg,var(--blue-500),var(--blue-700)); color:#fff; transform:rotateY(180deg) translateZ(0); -webkit-transform:rotateY(180deg) translateZ(0); text-align:center; align-items:center; box-shadow:var(--shadow-raised);}
.flip-card-back h4{color:#fff; margin-bottom:8px;}
.flip-card-back p{color:rgba(255,255,255,.92); margin:0; font-size:14px;}
.flip-card-back-photo{background-size:cover; background-position:center; padding:0; justify-content:flex-end;}
.flip-card-back-photo::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(0deg, rgba(13,27,42,.75), rgba(13,27,42,0) 55%); backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.flip-card-back-label{position:relative; z-index:1; color:#fff; font-weight:700; font-size:15px; padding:14px 16px;}
@media (prefers-reduced-motion: reduce){ .flip-card-inner{transition:none;} }

.card-media{aspect-ratio:16/10; border-radius:var(--radius-md); margin-bottom:16px; background:linear-gradient(135deg,var(--blue-100),var(--neutral-100)); display:flex; align-items:center; justify-content:center; color:var(--blue-700); font-size:13px; font-weight:600; overflow:hidden;}
.card-media.dark{background:linear-gradient(135deg,var(--charcoal-900),var(--blue-700)); color:rgba(255,255,255,.7);}
.card h3{margin-bottom:6px; font-size:20px;}
.card .meta{font-size:13px; color:var(--charcoal-500); margin-bottom:8px;}
.tag{display:inline-block; font-size:12px; font-weight:700; padding:5px 12px; border-radius:var(--radius-pill); background:var(--neutral-100); color:var(--charcoal-700); margin-right:6px;}
.tag-row{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0;}
.tag-row .tag{margin-right:0;}
.note-sm{font-size:13px; color:var(--charcoal-500); margin-top:8px;}
.brand-name{font-family:var(--font-display); font-size:24px; font-weight:700; margin:4px 0 8px; color:var(--blue-700);}
.tag.blue{background:var(--blue-100); color:var(--blue-700);}
.tag.orange{background:var(--orange-100); color:var(--orange-700);}
.tag.status-open{background:#e8f5ee; color:var(--success);}
.tag.status-closed{background:#fbeae8; color:var(--error);}
.tag.status-soon{background:#0f1a04; color:#ccff33; box-shadow:0 0 8px rgba(204,255,51,.7), 0 0 2px rgba(204,255,51,.9) inset;}

/* Icons (simple inline SVG currentColor system) */
.icon{width:22px; height:22px; flex:none;}
.icon-circle{width:56px; height:56px; border-radius:50%; background:#fff; border:1px solid var(--neutral-200); color:var(--blue-700); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.icon-badge{width:44px; height:44px; border-radius:50%; background:var(--blue-500); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}

/* Stats */
.stats-row{display:flex; gap:48px; flex-wrap:wrap;}
.stat{flex:1; min-width:160px;}
.stat .num{font-family:var(--font-display); font-size:56px; font-weight:700; color:var(--blue-700); line-height:1;}
.stat .label{color:var(--charcoal-700); margin-top:8px; font-size:15px;}
@media (max-width:600px){ .stats-row{gap:24px;} .stat .num{font-size:38px;} }

/* Location finder */
.finder-panel{background:#fff; border:1px solid var(--neutral-200); border-radius:var(--radius-lg); padding:24px; margin-top:-56px; position:relative; z-index:2; box-shadow:var(--shadow-card);}
.finder-form{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start;}
.finder-form input[type=search]{flex:1; min-width:260px; height:56px; font-size:17px; box-shadow:0 4px 14px rgba(20,30,40,.1); border-color:var(--neutral-200); border-radius:var(--radius-pill); padding-left:24px;}
.field{display:flex; flex-direction:column; gap:6px;}
label{font-weight:600; font-size:14px;}
input, select, textarea{font-family:inherit; font-size:16px; padding:0 16px; height:48px; border:1.5px solid var(--neutral-300); border-radius:var(--radius-md); background:#fff; color:var(--charcoal-900); width:100%;}
textarea{height:auto; padding:12px 16px; min-height:120px; resize:vertical;}
input:focus, select:focus, textarea:focus{border-color:var(--blue-500); box-shadow:0 0 0 3px var(--blue-100);}
.filter-bar{display:flex; gap:8px; flex-wrap:wrap; margin:24px 0;}
.filter-chip{border:1.5px solid var(--neutral-300); background:#fff; padding:8px 16px; border-radius:var(--radius-pill); font-size:14px; font-weight:600; cursor:pointer; color:var(--charcoal-700);}
.filter-chip[aria-pressed="true"]{background:var(--charcoal-900); color:#fff; border-color:var(--charcoal-900);}
.finder-layout{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start;}
@media (max-width:900px){ .finder-layout{grid-template-columns:1fr;} }
@media (min-width:901px){ #finder-results{max-height:640px; overflow-y:auto; padding-right:6px;} }

/* Interactive Store Finder map (Leaflet + marker clustering) */
.store-map-panel{position:sticky; top:100px;}
@media (max-width:900px){ .store-map-panel{order:-1; position:static; margin-bottom:24px;} }
#store-map{width:100%; height:560px; border-radius:var(--radius-lg); border:1px solid var(--neutral-200); z-index:0;}
@media (max-width:900px){ #store-map{height:340px;} }
#store-map.tiles-unavailable{background:linear-gradient(135deg, var(--neutral-100) 25%, transparent 25%) -8px 0/16px 16px, linear-gradient(135deg, var(--neutral-100) 25%, transparent 25%) -8px 8px/16px 16px, linear-gradient(315deg, var(--neutral-100) 25%, #fff 25%) -8px 0/16px 16px, linear-gradient(315deg, var(--neutral-100) 25%, #fff 25%) -8px 8px/16px 16px;}
.store-map-panel .map-caption{font-size:13px; color:var(--charcoal-500); margin-top:10px; text-align:center;}
.leaflet-div-icon{background:transparent; border:none;}
.map-popup{min-width:200px; max-width:240px;}
.map-popup h4{margin:0 0 4px; font-size:16px; font-family:var(--font-display);}
.map-popup .meta{font-size:13px; color:var(--charcoal-500); margin:0 0 4px;}
.map-popup .popup-tags{display:flex; flex-wrap:wrap; gap:4px; margin:8px 0;}
.map-popup .popup-tags .tag{font-size:11px; padding:3px 8px; margin-right:0;}
.map-popup .actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.map-popup .btn{height:36px; padding:0 14px; font-size:13px;}
.location-card.is-selected{outline:2px solid var(--blue-500); outline-offset:2px;}
.map-placeholder{background:var(--neutral-100); border-radius:var(--radius-lg); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; color:var(--charcoal-500); font-size:14px; position:sticky; top:100px;}
.map-image-panel{background:var(--neutral-100); border-radius:var(--radius-lg); padding:16px; position:sticky; top:100px;}
.map-image-frame{position:relative; width:100%; line-height:0;}
.map-image{width:100%; height:auto; display:block; border-radius:var(--radius-md);}
.map-pin{position:absolute; transform:translate(-50%,-50%); cursor:pointer; display:flex; align-items:center; justify-content:center;}
.map-pin-dot{width:9px; height:9px; border-radius:50%; background:var(--orange-500); border:1.5px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.35); display:block; transition:transform .15s ease, background .15s ease;}
.map-pin:hover .map-pin-dot, .map-pin:focus .map-pin-dot{transform:scale(1.5); background:var(--orange-700);}
.map-pin-label{position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--charcoal-900); color:#fff; font-size:12px; font-weight:600; white-space:nowrap; padding:4px 9px; border-radius:var(--radius-sm); opacity:0; pointer-events:none; transition:opacity .12s ease; z-index:2;}
.map-pin:hover .map-pin-label, .map-pin:focus .map-pin-label{opacity:1;}
.map-caption{margin-top:10px; font-size:13px; color:var(--charcoal-500); text-align:center;}
.location-card{display:flex; gap:16px; align-items:flex-start; padding:20px; border:1px solid var(--neutral-200); border-radius:var(--radius-lg); margin-bottom:12px; background:#fff; box-shadow:var(--shadow-card); transition:transform .18s ease, box-shadow .18s ease; cursor:pointer;}
.phone-pill{display:inline-block; margin:0 0 8px; padding:5px 14px; border-radius:var(--radius-pill); background:#0a1a2e; color:#3ff0ff; font-size:13px; font-weight:700; letter-spacing:.02em; box-shadow:0 0 8px rgba(63,240,255,.7), 0 0 2px rgba(63,240,255,.9) inset;}
.location-card:hover{transform:scale(1.02); box-shadow:var(--shadow-card-hover, 0 8px 24px rgba(0,0,0,.1)); z-index:1; position:relative;}
.location-card .info{flex:1;}
.location-card .facilities{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0;}
.location-card .actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.results-empty{padding:48px 24px; text-align:center; color:var(--charcoal-500); border:1px dashed var(--neutral-300); border-radius:var(--radius-lg);}

/* Sticky mobile action bar (location pages) */
.sticky-actions{position:sticky; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--neutral-200); padding:12px 16px; display:none; gap:8px; z-index:400; box-shadow:0 -4px 16px rgba(0,0,0,.06);}
.sticky-actions .btn{flex:1;}
@media (max-width:768px){ .sticky-actions{display:flex;} body{padding-bottom:0;} }

/* Timeline — a single track of year-points; no side-scrolling. Each point's
   milestone lives in a floating "magnifier" card that appears on hover,
   keyboard focus, or tap, instead of a separate scrollable strip of cards. */
.timeline{display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 4px; position:relative; padding:32px 4px 12px; row-gap:56px;}
.timeline::before{content:""; position:absolute; left:4px; right:4px; top:56px; height:3px; background:var(--neutral-200); z-index:0;}
.timeline-point{position:relative; flex:1 1 0; min-width:88px; display:flex; flex-direction:column; align-items:center; gap:8px; background:none; border:0; padding:0 4px; cursor:pointer; font:inherit; z-index:1;}
.timeline-point .dot{width:16px; height:16px; border-radius:50%; background:var(--orange-500); border:3px solid #fff; box-shadow:0 0 0 2px var(--orange-500); transition:transform .15s ease;}
.timeline-point .year{font-size:18px; font-weight:700; color:var(--blue-700);}
.timeline-point .timeline-tip{position:absolute; bottom:calc(100% + 14px); left:50%; transform:translate(calc(-50% + var(--tip-shift, 0px)), 6px) scale(.96); width:220px; max-width:min(240px, calc(100vw - 32px)); background:#fff; border:1px solid var(--neutral-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:16px; text-align:left; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:20;}
.timeline-point .timeline-tip::after{content:""; position:absolute; top:100%; left:calc(50% - var(--tip-shift, 0px)); transform:translateX(-50%); border:8px solid transparent; border-top-color:#fff;}
.timeline-point .timeline-tip-year{display:block; font-size:22px; font-weight:700; color:var(--blue-700); margin-bottom:4px;}
.timeline-point .timeline-tip-text{display:block; font-size:15px; color:var(--charcoal-700); line-height:1.4;}
.timeline-point:hover .dot, .timeline-point:focus-visible .dot, .timeline-point.active .dot{transform:scale(1.25);}
.timeline-point:hover .timeline-tip, .timeline-point:focus-visible .timeline-tip, .timeline-point.active .timeline-tip{opacity:1; visibility:visible; transform:translate(calc(-50% + var(--tip-shift, 0px)), 0) scale(1); pointer-events:auto;}
@media (max-width:640px){
  .timeline-point .timeline-tip{width:180px;}
}

/* Breadcrumbs */
.breadcrumbs{font-size:14px; color:var(--charcoal-500); padding:16px 0;}
.breadcrumbs a{color:var(--charcoal-500); text-decoration:underline;}
.breadcrumbs a:hover{color:var(--blue-700);}
.breadcrumbs .sep{margin:0 8px;}

/* Accordion */
.accordion-item{border-bottom:1px solid var(--neutral-200);}
.accordion-trigger{width:100%; text-align:left; background:none; border:none; padding:20px 0; font-weight:600; font-size:17px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; color:var(--charcoal-900);}
.accordion-panel{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.accordion-panel .inner{padding:0 0 20px;}
.accordion-item.open .accordion-panel{max-height:600px;}
.accordion-item.open .chev{transform:rotate(180deg);}
.chev{transition:transform .2s ease;}

/* Forms / feedback states */
.form-success{background:#e8f5ee; border:1px solid var(--success); color:#155c3d; padding:24px; border-radius:var(--radius-lg); display:none;}
.form-success.show{display:block;}
.form-error-text{color:var(--error); font-size:13px; margin-top:4px; display:none;}
.field.invalid input, .field.invalid select, .field.invalid textarea{border-color:var(--error);}
.field.invalid .form-error-text{display:block;}
fieldset{border:none; padding:0; margin:0 0 24px;}
legend{font-weight:600; font-size:18px; margin-bottom:12px; padding:0;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:600px){ .form-grid{grid-template-columns:1fr;} }
.consent{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--charcoal-700);}
.consent input{width:auto; height:auto; margin-top:3px;}

/* Category tabs (contact page) */
.tabs{display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--neutral-200); margin-bottom:32px;}
.tab-btn{padding:12px 4px; margin-right:20px; background:none; border:none; border-bottom:3px solid transparent; font-weight:600; color:var(--charcoal-500); cursor:pointer; font-size:15px;}
.tab-btn[aria-selected="true"]{color:var(--charcoal-900); border-color:var(--orange-500);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* Footer */
.site-footer{
  position:relative; background:var(--navy-900); color:rgba(255,255,255,.75); padding:64px 0 32px; overflow:hidden;
}
.site-footer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* Dot grid: alternating blue/orange dots on a 28px grid, faded via a
     radial mask so it's strongest at the edges and stays out of the way
     of the text in the middle. */
  background-image:
    radial-gradient(circle, rgba(0,167,225,.55) 1.6px, transparent 1.6px),
    radial-gradient(circle, rgba(255,144,21,.5) 1.6px, transparent 1.6px);
  background-size:28px 28px, 28px 28px;
  background-position:0 0, 14px 14px;
  -webkit-mask-image:radial-gradient(ellipse 90% 100% at 50% 40%, transparent 30%, #000 100%);
  mask-image:radial-gradient(ellipse 90% 100% at 50% 40%, transparent 30%, #000 100%);
}
.site-footer .container{position:relative; z-index:1;}
.footer-grid{display:grid; grid-template-columns:auto repeat(3,1fr); gap:32px; margin-bottom:40px;}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .footer-grid{grid-template-columns:1fr;} }
.site-footer h4{color:var(--orange-500); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; font-family:var(--font-body);}
.site-footer ul{list-style:none;}
.site-footer li{margin-bottom:12px;}
.site-footer a:hover{color:#fff; text-decoration:underline;}
.footer-brand .logo{font-size:22px;}
.footer-brand .logo .logo-mark{height:150px; width:150px;}
.footer-brand p{color:rgba(255,255,255,.6); font-size:14px; max-width:280px;}
.footer-brand{margin-right:32px;}
@media (max-width:900px){ .footer-brand{margin-right:0;} }
/* Thin dividers between the nav columns only (not before the logo) */
.footer-grid > div:not(.footer-brand) + div{border-left:1px solid rgba(255,255,255,.15); padding-left:24px;}
@media (max-width:900px){ .footer-grid > div:not(.footer-brand) + div{border-left:none; padding-left:0;} }
.footer-bottom{border-top:1px solid rgba(255,255,255,.15); padding-top:24px; font-size:13px; color:rgba(255,255,255,.5); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.footer-link-btn{background:none; border:none; padding:0; margin:0; font:inherit; font-size:13px; color:rgba(255,255,255,.5); text-decoration:underline; cursor:pointer;}
.footer-link-btn:hover{color:#fff;}
.site-footer li .footer-link-btn{font-size:inherit; color:inherit; text-decoration:none; text-align:left;}
.site-footer li .footer-link-btn:hover{color:#fff; text-decoration:underline;}

/* Cookie banner */
#cookie-banner{position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--neutral-300); padding:20px max(24px, calc((100% - 1200px) / 2)); z-index:1000; box-shadow:0 -4px 24px rgba(0,0,0,.10); display:flex; align-items:center; justify-content:space-between; gap:12px 32px; flex-wrap:wrap;}
#cookie-banner > p{flex:1 1 420px; margin:0;}
#cookie-banner.hidden{display:none;}
@media (max-width:700px){ #cookie-banner{display:block; padding:16px;} #cookie-banner.hidden{display:none;} #cookie-banner > p{margin-bottom:14px;} #cookie-banner .row{width:100%;} #cookie-banner .row .btn{flex:1 1 100%; white-space:normal;} }
#cookie-banner .row{display:flex; gap:10px; flex-wrap:wrap; margin-top:0; flex:0 0 auto;}
#cookie-prefs{display:none; flex:1 1 100%; margin-top:4px; border-top:1px solid var(--neutral-200); padding-top:16px;}
#cookie-prefs.show{display:block;}
#cookie-prefs{max-width:440px;}
.cookie-cat{display:grid; grid-template-columns:1fr 24px; align-items:center; column-gap:16px; padding:8px 0;}
.cookie-cat label{display:block; cursor:pointer;}
.cookie-cat label span{display:block; font-weight:600;}
.cookie-cat label small{display:block; font-size:13px; line-height:1.4; color:var(--charcoal-700);}
.cookie-cat input[type="checkbox"]:disabled{opacity:1; cursor:not-allowed; accent-color:var(--blue-700);}
.cookie-cat input[type="checkbox"]{width:20px; height:20px; margin:0; justify-self:end; padding:0; accent-color:var(--blue-700);}

/* Mobile nav sheet */
#mobile-nav{position:fixed; inset:0; background:#fff; z-index:900; display:none; overflow-y:auto;}
#mobile-nav.open{display:block;}
#mobile-nav .mn-header{display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--neutral-200);}
#mobile-nav ul{list-style:none;}
#mobile-nav > .mn-body{padding:16px 24px 48px;}
#mobile-nav .mn-link{display:block; padding:16px 4px; font-size:19px; font-weight:600; border-bottom:1px solid var(--neutral-100);}
#mobile-nav .mn-sub{padding-left:16px;}
#mobile-nav .mn-sub a{font-size:16px; font-weight:500; padding:12px 4px;}
body.nav-open{overflow:hidden;}

@media (min-width:901px){ .menu-toggle{display:none;} }
/* The mobile nav's own close button must stay reachable even if the viewport
   crosses the desktop breakpoint while the panel is open (e.g. window resize). */
#mobile-nav.open #mn-close{display:flex !important;}
@media (max-width:900px){
  .main-nav{display:none;}
  .header-actions .btn-blue{display:none;}
  .menu-toggle{display:flex;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.notice-tbc{background:var(--orange-100); border:1px solid var(--orange-500); color:var(--charcoal-900); padding:12px 16px; border-radius:var(--radius-md); font-size:14px; margin-bottom:16px;}
.prototype-note{background:var(--blue-100); border:1px solid var(--blue-500); color:var(--charcoal-900); padding:12px 16px; border-radius:var(--radius-md); font-size:14px; margin-bottom:24px;}
hr{border:none; border-top:1px solid var(--neutral-200); margin:32px 0;}
.legal-body h2{margin-top:40px;}
.legal-body{max-width:var(--maxw-narrow);}
.legal-body.legal-body--wide{max-width:none;}
.legal-body .table-wrap{overflow-x:auto; margin:12px 0 24px; border:1px solid var(--neutral-200); border-radius:var(--radius-md); background:#fff;}
.legal-body table{border-collapse:collapse; width:100%; font-size:14px; min-width:560px;}
.legal-body th, .legal-body td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--neutral-200);}
.legal-body th{background:var(--blue-100); color:var(--blue-700); font-weight:700;}
.legal-body tr:last-child td{border-bottom:none;}
.legal-body--terms h2{font-size:20px; line-height:1.3; margin:32px 0 12px;}
.legal-body--terms h3{font-size:17px; line-height:1.3; margin:24px 0 8px;}
.legal-body--terms h4{font-size:15px; line-height:1.3; margin:20px 0 8px;}
.legal-body--terms p{margin:0 0 14px;}
.legal-body--terms ul{list-style:disc; padding-left:24px; margin:0 0 16px;}
.legal-body--terms li{margin:0 0 6px;}
.legal-body code{font-size:13px; word-break:break-all;}

/* --- Friendly card-panel content blocks (used across About / Services /
   Retail Partners / Careers) --- */
.lead-sm{font-size:18px; color:var(--charcoal-700); max-width:640px;}
.block{background:#fff; border:1px solid var(--neutral-200); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-card);}
.stack-lg{display:flex; flex-direction:column; gap:24px;}
.stack-lg > .block{padding:36px;}
.plain-list{list-style:none; padding:0; margin:16px 0; border-top:1px solid var(--neutral-100);}
.plain-list li{padding:10px 0; font-size:16px; border-bottom:1px solid var(--neutral-100);}
.timeline-list{border-top:none;}
.timeline-list li{padding:6px 0; border-bottom:none;}
.cta-block{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; background:#fff; border:1px solid var(--neutral-200); border-radius:var(--radius-lg); padding:32px 40px; box-shadow:var(--shadow-card);}
.cta-block h2{margin-bottom:4px;}
.cta-block p{margin:0; color:var(--charcoal-500);}
section.section-dark .cta-block, section.hero .cta-block{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25);}
section.section-dark .cta-block h2, section.section-dark .cta-block p{color:#fff;}
@media (max-width:700px){ .cta-block{flex-direction:column; align-items:flex-start;} .cta-block .btn{width:100%;} }

.feature-card{background:#fff; border:1px solid var(--neutral-200); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-card);}

.trio-list{display:flex; gap:0; border-top:1px solid var(--neutral-300); border-bottom:1px solid var(--neutral-300);}
.trio-item{flex:1; padding:28px 28px 28px 0; margin-right:28px; border-right:1px solid var(--neutral-200);}
.trio-item:last-child{border-right:none; margin-right:0;}
.trio-item .trio-num{font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--blue-700); letter-spacing:.06em; display:block; margin-bottom:10px;}
.trio-item h3{font-size:19px; margin-bottom:6px;}
.trio-item p{color:var(--charcoal-700); font-size:15px; margin:0;}
@media (max-width:768px){ .trio-list{flex-direction:column; border-bottom:none;} .trio-item{border-right:none; border-bottom:1px solid var(--neutral-200); margin-right:0; padding:20px 0;} .trio-item:last-child{border-bottom:none;} }

.img-placeholder{background:var(--neutral-100); border:1px dashed var(--neutral-300); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:var(--charcoal-500); font-size:13px; line-height:1.5; text-align:center; padding:24px;}
.img-placeholder .cap{max-width:280px;}
.img-placeholder.landscape{aspect-ratio:16/9;}
.img-placeholder.portrait{aspect-ratio:4/5;}
.img-placeholder.square{aspect-ratio:1/1;}
.img-placeholder.wide{aspect-ratio:21/9;}

.img-photo{width:100%; height:100%; object-fit:cover; border-radius:var(--radius-md); box-shadow:var(--shadow-card); display:block;}
.img-photo.landscape{aspect-ratio:16/9;}
.img-photo.portrait{aspect-ratio:4/5;}
.img-photo.square{aspect-ratio:1/1;}
.img-photo.wide{aspect-ratio:21/9;}

/* --- About page: value props, people grid, leadership quote --- */
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:768px){ .values-grid{grid-template-columns:1fr;} }
/* Two equal-width cards (About › Sustainability); stacks on mobile like .values-grid */
.values-grid--2{grid-template-columns:repeat(2,1fr);}
@media (max-width:768px){ .values-grid--2{grid-template-columns:1fr;} }
.value-card{background:#fff; border:1px solid var(--neutral-200); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-card); text-align:center;}
.value-card .icon-badge{margin:0 auto 16px; background:var(--blue-100); color:var(--blue-700);}
.value-card h3{font-size:18px; margin-bottom:6px;}
.value-card p{color:var(--charcoal-700); font-size:14px; margin:0;}

.people-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:768px){ .people-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:500px){ .people-grid{grid-template-columns:1fr;} }

.quote-card{display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center;}
.quote-card .quote-avatar{width:160px;}
.quote-card blockquote{margin:0; font-size:19px; font-style:italic; color:var(--charcoal-900); border-left:3px solid var(--blue-500); padding-left:20px;}
.quote-card .quote-name{font-weight:700; margin-top:16px; display:block;}
.quote-card .quote-title{color:var(--charcoal-500); font-size:14px;}
@media (max-width:900px){ .quote-card{grid-template-columns:1fr; text-align:left;} .quote-card .quote-avatar{width:100px;} }

.glance-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:768px){ .glance-grid{grid-template-columns:1fr;} }
.glance-item{display:flex; gap:16px; align-items:flex-start;}
.glance-item .icon-badge{flex-shrink:0; margin-bottom:0; background:var(--blue-100); color:var(--blue-700);}
.glance-item h3{font-size:20px; margin-bottom:4px;}
.glance-item p{color:var(--charcoal-700); font-size:14px; margin:0;}

.business-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
@media (max-width:768px){ .business-grid{grid-template-columns:1fr;} }
.business-card{display:flex; align-items:center; justify-content:space-between; gap:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-lg); padding:24px 28px; transition:background .2s ease, transform .2s ease;}
.business-card:hover{background:rgba(255,255,255,.15); transform:translateY(-2px);}
.business-card h3{color:#fff; margin-bottom:2px; font-size:19px;}
.business-card p{color:rgba(255,255,255,.65); margin:0; font-size:14px;}
.business-card .arrow{color:#fff; flex-shrink:0; width:20px; height:20px;}

.editorial-split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.editorial-split.reverse{grid-template-columns:1fr 1fr;}
.editorial-split.reverse .editorial-media{order:-1;}
@media (max-width:900px){ .editorial-split, .editorial-split.reverse{grid-template-columns:1fr;} .editorial-split.reverse .editorial-media{order:0;} }

.focus-minimal{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-bottom:56px;}
@media (max-width:900px){ .focus-minimal{grid-template-columns:1fr; gap:32px;} }
.focus-minimal .item{padding-top:20px; border-top:1px solid var(--neutral-300);}
.focus-minimal h3{font-size:20px; margin-bottom:8px;}
.focus-minimal p{color:var(--charcoal-700); font-size:15px; margin:0;}

.statement-section{padding:96px 0; background:var(--surface-warm); text-align:center;}
.statement-section h2{font-size:38px; text-transform:none; max-width:760px; margin:0 auto 20px;}
.statement-section .lead-sm{margin:0 auto; text-align:center;}
@media (max-width:768px){ .statement-section{padding:64px 0;} .statement-section h2{font-size:26px;} }

.support-note{max-width:680px;}
.support-note h2{text-transform:none; font-size:28px;}

.charity-final-cta{padding:88px 0; text-align:center; background:var(--surface-warm);}
.charity-final-cta h2{text-transform:none; font-size:32px;}
.charity-final-cta p{max-width:460px; margin:0 auto 32px; color:var(--charcoal-700);}
.link-note{font-size:13px; color:var(--charcoal-500); margin-top:14px;}

/* --- Contact page --- */
.contact-methods{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:8px;}
@media (max-width:900px){ .contact-methods{grid-template-columns:1fr;} }
.contact-method{background:#fff; border:1px solid var(--neutral-200); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-card); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.contact-method:hover{transform:translateY(-4px); box-shadow:var(--shadow-raised); border-color:var(--blue-500);}
.contact-method .icon-badge{background:var(--blue-100); color:var(--blue-700); width:40px; height:40px; border-radius:50%;}
.contact-method h4{margin-bottom:4px; font-size:15px;}
.contact-method .value{color:var(--blue-700); font-weight:600; display:block; margin-bottom:4px;}
.contact-method .note{color:var(--charcoal-500); font-size:13px; margin:0;}

.contact-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.contact-panel-dark{background:var(--navy-900); color:#fff; border-radius:var(--radius-lg); padding:32px;}
.contact-panel-dark h3{color:#fff; font-size:18px;}
.contact-panel-dark p{color:rgba(255,255,255,.65); font-size:14px;}
.contact-panel-dark .hours-list{list-style:none; padding:0; margin:0 0 28px;}
.contact-panel-dark .hours-list li{display:flex; justify-content:space-between; padding:6px 0; font-size:14px; color:rgba(255,255,255,.85); border-bottom:1px solid rgba(255,255,255,.1);}
.contact-panel-dark .hours-list li:last-child{border-bottom:none;}
.social-list{list-style:none; padding:0; margin:0;}
.social-list li{margin-bottom:10px;}
.social-list a{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md); padding:12px 16px; font-size:14px; font-weight:600; color:#fff;}
.social-list a:hover{background:rgba(255,255,255,.14);}
.social-list .status{margin-left:auto; font-weight:400; font-size:12px; color:rgba(255,255,255,.5);}

/* ===========================================================================
   SERVICES BENTO — the single unified services section on the Services
   page: six 01-06 feature cards that each carry both the service category
   AND its individual facilities (no separate "full list" section repeats
   the same information underneath). Brand blue (#00A7E1) and orange
   (#FF9015) anchor the set; mint/berry/purple are used sparingly as
   complementary accents (Parcels' nested-item stripes). No stock
   photography stands in for real NTS site photography — texture comes
   from gradients, a dot-grid and an icon system instead.
   =========================================================================== */
:root{
  --svc-mint:#17A673; --svc-berry:#E14F72; --svc-purple:#7C5CFC;
}
.svc-bento{
  display:grid; gap:20px;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:minmax(220px,auto) minmax(220px,auto) minmax(270px,auto) minmax(190px,auto) minmax(220px,auto);
  grid-template-areas:
    "fuel fuel food food"
    "fuel fuel food food"
    "coffee coffee carcare carcare"
    "parcels parcels parcels parcels"
    "facilities facilities facilities facilities";
}
.svc-card{
  position:relative; border-radius:26px; overflow:hidden; isolation:isolate;
  padding:28px 30px; display:flex; flex-direction:column; justify-content:flex-end;
  box-shadow:var(--shadow-card);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.svc-card:hover{transform:translateY(-5px); box-shadow:0 24px 48px rgba(10,30,55,.20);}
.svc-num{
  position:absolute; top:18px; right:22px; z-index:2;
  font-family:'Space Grotesk', var(--font-display); font-weight:700; font-size:52px; line-height:1;
  letter-spacing:-.02em; opacity:.32; pointer-events:none;
}
.svc-copy{position:relative; z-index:2; margin-top:16px;}
.svc-copy h3{margin:2px 0 6px; font-size:21px;}
.svc-copy p{margin:0; font-size:14.5px; line-height:1.5;}
.svc-eyebrow{display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:2px; opacity:.85;}

/* Small glass/tonal pills — used inside the fuel and coffee features to
   fold in their individual items without another row of equal cards. */
.svc-pill-row{position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.svc-pill{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; padding:7px 13px 7px 7px; border-radius:var(--radius-pill); background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(6px); color:#fff; transition:background .25s ease;}
.svc-card:hover .svc-pill{background:rgba(255,255,255,.22);}
.svc-pill-icon{width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--blue-700); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.svc-pill-icon svg{width:13px; height:13px;}

/* Icon-and-label tiles — used inside the food and car-care features, a
   compact grid rather than six repeated identical cards. */
.svc-tile-grid{position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px;}
.svc-tile{display:flex; flex-direction:column; align-items:flex-start; gap:9px; background:rgba(255,255,255,.65); border:1px solid var(--neutral-200); border-radius:14px; padding:12px 13px; font-size:12.5px; font-weight:700; color:var(--charcoal-700); line-height:1.25; transition:transform .3s ease, box-shadow .3s ease, background .3s ease;}
.svc-card:hover .svc-tile{transform:translateY(-2px);}
.svc-tile-icon{width:32px; height:32px; border-radius:10px; background:var(--blue-100); color:var(--blue-700); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.svc-tile-icon svg{width:17px; height:17px;}
.svc-tile--dark{background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2); color:#fff;}
.svc-tile--dark .svc-tile-icon{background:rgba(255,255,255,.18); color:#fff;}
.svc-card:hover .svc-tile--dark{background:rgba(255,255,255,.15); box-shadow:0 8px 16px rgba(2,20,35,.2);}
.svc-card:hover .svc-tile:not(.svc-tile--dark){box-shadow:0 8px 16px rgba(20,40,60,.08);}

/* ---- 01 Fuel & EV : large blue feature, five fuel/EV items as pills --- */
.svc-card--fuel{
  grid-area:fuel; color:#fff;
  background:linear-gradient(135deg,#0089bd 0%, #00A7E1 42%, #17c2ff 100%);
}
.svc-card--fuel .svc-copy h3{font-size:26px; max-width:360px;}
.svc-card--fuel .svc-copy p{max-width:400px; color:rgba(255,255,255,.92);}
.svc-fuel-art{position:absolute; inset:0; z-index:0;}
.svc-orb{position:absolute; border-radius:50%; filter:blur(2px); opacity:.35;}
.svc-orb--a{width:220px; height:220px; background:radial-gradient(circle at 35% 35%, #ffffff, transparent 70%); top:-70px; right:-60px;}
.svc-orb--b{width:160px; height:160px; background:radial-gradient(circle at 35% 35%, var(--orange-500), transparent 72%); bottom:-50px; left:40%; opacity:.55;}
.svc-dotgrid{position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.35) 1.4px, transparent 1.4px); background-size:18px 18px; opacity:.35; mask-image:linear-gradient(to bottom, black, transparent 75%);}
.svc-energy-line{position:absolute; left:0; right:0; top:30px; width:100%; height:40px; z-index:1; opacity:.8;}
.svc-energy-line path{fill:none; stroke:var(--orange-500); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:340; stroke-dashoffset:340; transition:stroke-dashoffset 1.1s ease;}
.svc-card--fuel:hover .svc-energy-line path{stroke-dashoffset:0;}
.svc-icon-row{position:relative; z-index:2; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.svc-icon-badge{width:52px; height:52px; border-radius:16px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.svc-icon-badge svg{width:26px; height:26px;}
.svc-icon-badge--lg{width:60px; height:60px;}
.svc-icon-badge--lg svg{width:30px; height:30px;}
.svc-chip{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; padding:8px 14px 8px 8px; border-radius:var(--radius-pill);}
.svc-chip-icon{width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--blue-700); display:flex; align-items:center; justify-content:center;}
.svc-chip-icon svg{width:14px; height:14px;}
.svc-chip--glass{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(6px); color:#fff;}

/* ---- 02 Food & Convenience : enlarged feature, six-item tile grid ----- */
.svc-card--food{
  grid-area:food; color:var(--charcoal-900);
  background:linear-gradient(155deg,#ffffff 0%, #eaf8ff 65%, #dff1ff 100%);
  border:1px solid var(--neutral-200);
}
.svc-card--food .svc-num{color:var(--blue-700);}
.svc-card--food .svc-eyebrow{color:var(--blue-700);}
.svc-card--food .svc-copy p{max-width:420px;}
.svc-food-art{position:absolute; inset:0; z-index:0;}
.svc-dotgrid--light{background-image:radial-gradient(var(--neutral-300) 1.4px, transparent 1.4px); background-size:16px 16px; opacity:.6; mask-image:radial-gradient(circle at 75% 20%, black, transparent 65%);}

/* ---- 03 Coffee & Food-to-Go : compact orange feature, four pills ------ */
.svc-card--coffee{
  grid-area:coffee; color:#fff;
  background:linear-gradient(150deg,#FF9015 0%, #ff7a00 55%, #f26200 100%);
}
.svc-card--coffee .svc-copy h3{font-size:20px;}
.svc-card--coffee .svc-copy p{color:rgba(255,255,255,.92); font-size:13.5px; max-width:360px;}
.svc-coffee-art{position:absolute; inset:0; z-index:0; overflow:hidden;}
.svc-steam{position:absolute; top:-20px; right:34px; width:46px; height:90px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(255,255,255,.35), transparent 70%); filter:blur(6px);}
.svc-steam--2{right:60px; top:-10px; width:30px; height:70px; opacity:.6;}
.svc-card--coffee .svc-icon-badge--glass{position:relative; z-index:2; width:48px; height:48px; border-radius:16px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.32); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;}
.svc-card--coffee .svc-icon-badge--glass svg{width:24px; height:24px;}

/* ---- 04 Car Care : enlarged feature, water-inspired, five-item grid --- */
.svc-card--carcare{
  grid-area:carcare; color:#fff;
  background:linear-gradient(160deg,#04405c 0%, #075e82 55%, #00A7E1 120%);
}
.svc-card--carcare .svc-copy h3{font-size:20px;}
.svc-card--carcare .svc-copy p{color:rgba(255,255,255,.88); font-size:13.5px; max-width:380px;}
.svc-carcare-art{position:absolute; inset:0; overflow:hidden; z-index:0;}
.svc-shine{position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform:skewX(-18deg); transition:left 1s ease; z-index:1;}
.svc-card--carcare:hover .svc-shine{left:130%;}
.svc-tile-grid--dark{position:relative; z-index:2;}

/* ---- 05 Parcels & Everyday Services : wide, grouped nests ------------- */
.svc-card--parcels{
  grid-area:parcels; color:var(--charcoal-900);
  background:#fff; border:1px solid var(--neutral-200);
  justify-content:flex-start;
}
.svc-card--parcels .svc-num{color:var(--neutral-300);}
.svc-card--parcels .svc-eyebrow{color:var(--blue-700);}
.svc-card--parcels .svc-copy{order:1; margin-bottom:14px; margin-top:0;}
.svc-card--parcels .svc-copy p{max-width:520px; color:var(--charcoal-500);}
.svc-nest-grid{order:2; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; position:relative; z-index:2;}
.svc-nest{display:flex; align-items:center; gap:10px; background:var(--neutral-100); border-radius:12px; padding:10px 12px; border-left:3px solid transparent;}
.svc-nest strong{display:block; font-size:13px; line-height:1.3;}
.svc-nest span{display:block; font-size:11.5px; color:var(--charcoal-500); line-height:1.3;}
.svc-nest-icon{width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#fff;}
.svc-nest-icon svg{width:17px; height:17px;}
.svc-nest--blue{border-left-color:var(--blue-500);} .svc-nest--blue .svc-nest-icon{color:var(--blue-700);}
.svc-nest--orange{border-left-color:var(--orange-500);} .svc-nest--orange .svc-nest-icon{color:var(--orange-700);}
.svc-nest--mint{border-left-color:var(--svc-mint);} .svc-nest--mint .svc-nest-icon{color:var(--svc-mint);}
.svc-nest--berry{border-left-color:var(--svc-berry);} .svc-nest--berry .svc-nest-icon{color:var(--svc-berry);}

/* ---- 06 Site Facilities : full-width finishing feature, real weight --- */
.svc-card--facilities{
  grid-area:facilities; color:var(--charcoal-900);
  background:linear-gradient(135deg,#f5fbff 0%, #eef6fb 100%); border:1px solid var(--neutral-200);
  flex-direction:row; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  padding:34px 40px;
}
.svc-card--facilities .svc-num{position:static; opacity:1; color:var(--blue-100); font-size:48px; margin-right:6px;}
.svc-card--facilities .svc-copy{flex-shrink:0; max-width:280px; margin-top:0;}
.svc-card--facilities .svc-copy h3{font-size:22px;}
.svc-card--facilities .svc-copy p{font-size:13.5px; color:var(--charcoal-500);}
.svc-fac-row{display:flex; gap:14px; flex-wrap:wrap;}
.svc-fac{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; font-size:13.5px; font-weight:700; min-width:108px; background:#fff; border:1px solid var(--neutral-200); border-radius:16px; padding:18px 16px; box-shadow:0 6px 16px rgba(20,40,60,.05); transition:transform .3s ease, box-shadow .3s ease;}
.svc-card--facilities:hover .svc-fac{transform:translateY(-3px); box-shadow:0 12px 22px rgba(20,40,60,.1);}
.svc-fac-icon{width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--blue-100); color:var(--blue-700);}
.svc-fac:nth-child(2n) .svc-fac-icon{background:var(--orange-100); color:var(--orange-700);}
.svc-fac-icon svg{width:26px; height:26px;}

@media (max-width:900px){
  .svc-bento{grid-template-columns:1fr; grid-template-rows:none; grid-template-areas:none;}
  .svc-card{grid-area:auto !important; min-height:0;}
  .svc-card--facilities{flex-direction:column; align-items:flex-start; padding:26px;}
  .svc-nest-grid{grid-template-columns:repeat(2,1fr);}
  .svc-tile-grid{grid-template-columns:repeat(2,1fr);}
  .svc-fac-row{width:100%; justify-content:space-between;}
  .svc-fac{flex:1 1 auto; min-width:0;}
}
@media (max-width:520px){
  .svc-num{font-size:38px;}
  .svc-copy h3{font-size:19px !important;}
  .svc-card--facilities .svc-num{font-size:36px;}
}