/* styles-107.css — eaglelocksmithservice.com "MIDNIGHT GOLD" (107).
   Owner (2026-11-11): the 103/106 navy+orange look is boring — ordered a
   WINNING design. New direction: black/charcoal + gold (the owner's brand
   palette), rich near-black heroes, oversized confident type, gold CTAs,
   elegant cards, strong black trust bands. PREVIEW ONLY until the owner
   approves the screenshots — no page links this file yet.
   Structure: the full 101–106 cascade is preserved verbatim below (sticky
   bar, Privyr lead form, rating line, motion, city/service reskins) and
   the 107 MIDNIGHT GOLD layer at the end re-skins the palette by cascade
   order. Content, URLs, forms, schema and the sticky bar are untouched.
   Lineage header of the preserved cascade follows. */

/* styles-106.css — eaglelocksmithservice.com COLORFUL DESIGN REFRESH (106).
   Owner (2026-11-11): "In Maryland I asked for beautiful colors — NOT black
   and white." This file supersedes the shelved monochrome 105 build.
   Lineage: 101 base (Water-Damage sticky bar, Privyr form, rating line)
   + 102 polish + 103 photo upgrade + 104 design lift, preserved below,
   followed by the 106 COLOR LAYER: a rich premium palette — deep navy,
   vivid royal blue, brand gold, warm copper and teal — colorful gradient
   hero and bands, multicolor service cards, real photos IN FULL COLOR
   (no grayscale/monochrome filters anywhere in this layer).
   Loaded AFTER the site's own stylesheets; changes live only in this file. */

   102: DESIGN POLISH pass (preserved below). 103: DESIGN + CONTENT
   upgrade pass — real-photo heroes/gallery, mobile photo-first hero,
   loc-rich/loc-demo styles for the new native city pages, extended
   lead-form rows. (Yaniv: "the site looks boring — make it alive").
   Everything from 101 (Water-Damage-pattern sticky bar, professional Privyr
   lead form, Google rating line, legal/404) is preserved verbatim below,
   followed by the 102 visual layer: dynamic hero carousel, animated stats,
   photo marquee, scroll reveals, card motion, bold amber energy.
   Loaded AFTER the site's own stylesheets; changes live only in this file. */

/* ---------- Sticky mobile bar (Water Damage pattern) ---------- */
.sticky-bar{display:none}
@media (max-width:1023.98px){
  .sticky-bar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:300;
    background:linear-gradient(120deg,#03142F,#0A2B54);
    box-shadow:0 -6px 22px rgba(3,20,47,.42);
    padding:9px 12px calc(9px + env(safe-area-inset-bottom))}
  .sticky-bar a{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;
    text-align:center;text-decoration:none;font-weight:800;padding:.72em 0;border-radius:999px;
    font-size:1rem;line-height:1.25;white-space:nowrap}
  .sticky-bar .sb-call{background:linear-gradient(180deg,#F5B83D,#E8A838);color:#03142F}
  .sticky-bar .sb-text{background:linear-gradient(180deg,#2be07a,#1eb856);color:#fff}
}

/* ---------- Lead form (Privyr) additions ---------- */
.lead-form__row{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:640px){
  .lead-form__row{grid-template-columns:1fr 1fr;gap:1rem}
}
.lead-form__success{display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;
  background:#ECFDF5;border:1px solid #6EE7B7;color:#065F46;border-radius:.75rem;
  padding:.9rem 1rem;font-weight:600}
.lead-form__error{display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;
  background:#FEF2F2;border:1px solid #FCA5A5;color:#991B1B;border-radius:.75rem;
  padding:.9rem 1rem;font-weight:600}
.lead-form__success[hidden],.lead-form__error[hidden]{display:none}
.contact-form__input[type="date"]{min-height:48px}
.lead-form button[disabled]{opacity:.65;pointer-events:none}

/* ---------- Google rating line (reviews aggregate) ---------- */
.reviews-rating{display:flex;align-items:center;gap:.5rem;font-size:1.05rem;color:#1A3A5C}
.reviews-rating__stars{color:#F59E0B;font-size:1.25rem;letter-spacing:.08em;line-height:1}
.reviews-rating strong{font-weight:900;font-size:1.2rem}
.reviews-aggregate{flex-wrap:wrap;gap:1rem 1.25rem}

/* ---------- Map facade (vanilla, replaces Alpine) ---------- */
.map-facade iframe{width:100%;height:380px;border:0;display:block}

/* ---------- Legal / simple content pages ---------- */
.legal-body{max-width:820px;margin:0 auto;padding:3rem 1.25rem 4rem;color:#1f2937;line-height:1.75}
.legal-body h2{color:#1A3A5C;margin:2rem 0 .6rem;font-size:1.35rem}
.legal-body p{margin:0 0 1rem}
.legal-body ul{margin:0 0 1rem;padding-left:1.4rem}
.legal-body li{margin-bottom:.4rem}

/* ---------- 404 ---------- */
.nf-wrap{max-width:720px;margin:0 auto;padding:4.5rem 1.25rem 5rem;text-align:center}
.nf-wrap h1{color:#1A3A5C;font-size:2.2rem;margin:0 0 1rem}
.nf-wrap p{color:#4b5563;line-height:1.7;margin:0 auto 1.75rem;max-width:520px}
.nf-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* ==================================================================
   102 POLISH LAYER — motion, depth, amber energy (navy/amber identity)
   ================================================================== */
:root{--p-gold:#E8A838;--p-gold-hi:#F5B83D;--p-gold-pale:#FDF3DC;
  --p-navy:#1A3A5C;--p-navy-dark:#0F2A4A;--p-navy-deep:#091E35;
  --p-ease:cubic-bezier(.22,.61,.36,1)}
html{scroll-behavior:smooth}
::selection{background:#E8A838;color:#091E35}

/* ---------- scroll reveal (JS adds .rv, then .in; classes removed after) ---------- */
.rv{opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--p-ease),transform .8s var(--p-ease)}
.rv.in{opacity:1;transform:none}

/* ---------- header ---------- */
#site-header{transition:box-shadow .3s ease}
#site-header.scrolled,#site-header.is-scrolled{box-shadow:0 10px 30px -12px rgba(9,30,53,.35)}

/* ---------- buttons: gradient, depth, response ---------- */
.btn--primary{background:linear-gradient(180deg,#F7BE55 0%,#E8A838 55%,#DE9A22 100%);
  box-shadow:0 12px 26px -10px rgba(232,168,56,.65),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .25s var(--p-ease),box-shadow .25s var(--p-ease),filter .25s ease}
.btn--primary:hover{transform:translateY(-2px);filter:brightness(1.04);
  box-shadow:0 18px 34px -10px rgba(232,168,56,.75),inset 0 1px 0 rgba(255,255,255,.55)}
.btn--primary:active{transform:translateY(0) scale(.98)}
.hero .btn--secondary,.service-hero .btn--secondary,.page-hero .btn--secondary{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.38);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .25s var(--p-ease),background .25s ease,border-color .25s ease}
.hero .btn--secondary:hover,.service-hero .btn--secondary:hover,.page-hero .btn--secondary:hover{
  background:rgba(232,168,56,.18);border-color:rgba(232,168,56,.65);transform:translateY(-2px)}
/* slow sheen sweep on the hero call button */
.hero .btn--primary{position:relative;overflow:hidden;isolation:isolate}
.hero .btn--primary::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:pSheen 3.8s ease-in-out infinite;pointer-events:none}
@keyframes pSheen{0%,55%{left:-70%}90%,100%{left:130%}}

/* ---------- heroes: layered navy + amber glow ---------- */
.hero{background:
  radial-gradient(900px 480px at 88% -10%,rgba(232,168,56,.22),transparent 60%),
  radial-gradient(760px 560px at -12% 112%,rgba(232,168,56,.12),transparent 55%),
  linear-gradient(135deg,#091E35 0%,#1A3A5C 55%,#1E4570 100%)}
.service-hero,.page-hero{background:
  radial-gradient(820px 420px at 90% -20%,rgba(232,168,56,.20),transparent 60%),
  linear-gradient(135deg,#091E35 0%,#1A3A5C 100%)}
/* photo-backed heroes (contact / about / blog / legal) */
.page-hero{position:relative}
.page-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(9,30,53,.94) 30%,rgba(26,58,92,.80) 70%,rgba(26,58,92,.62)),
             url('/images/eagle-locksmith-technician-800.jpg') center 32%/cover no-repeat}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{text-shadow:0 4px 24px rgba(0,0,0,.45)}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:1;
  background:linear-gradient(90deg,#E8A838,#F5B83D,#E8A838)}
/* per-service photo heroes (inline --svc-hero set by the builder) */
.service-hero{position:relative}
.service-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(112deg,rgba(9,30,53,.95) 26%,rgba(26,58,92,.84) 62%,rgba(26,58,92,.66)),
             var(--svc-hero,none) center/cover no-repeat}
.service-hero .service-hero__inner{position:relative;z-index:1}
.service-hero__title{text-shadow:0 4px 24px rgba(0,0,0,.4)}
.service-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:1;
  background:linear-gradient(90deg,#E8A838,#F5B83D,#E8A838)}

/* ---------- hero type + badge ---------- */
.hero__title{letter-spacing:-.015em}
.hero__title-accent,.service-hero .hero__title-accent{
  background:linear-gradient(100deg,#E8A838 25%,#F7BE55 50%,#E8A838 75%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#E8A838;
  animation:pShine 7s linear infinite}
@keyframes pShine{to{background-position:220% 0}}
.hero__badge{background:rgba(255,255,255,.07);border:1px solid rgba(232,168,56,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.hero__subheading strong{color:#F5B83D}
.hero__trust-badges .trust-badge{background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-radius:14px;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  transition:transform .3s var(--p-ease),border-color .3s ease,background .3s ease}
.hero__trust-badges .trust-badge:hover{transform:translateY(-3px);
  border-color:rgba(232,168,56,.6);background:rgba(232,168,56,.10)}

/* ---------- hero photo frame + carousel ---------- */
.hero__image picture img,.hero__image>img{border-radius:24px;
  box-shadow:0 34px 60px -18px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14),0 0 0 7px rgba(232,168,56,.14)}
.hero__image--carousel{position:relative}
.hero-carousel{position:relative;border-radius:24px;overflow:hidden;
  aspect-ratio:4/3.55;min-height:300px;background:#0F2A4A;
  box-shadow:0 34px 60px -18px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14),0 0 0 7px rgba(232,168,56,.14)}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.07);
  transition:opacity 1.1s ease,transform 6.5s ease}
.hero-slide.is-active{opacity:1;transform:scale(1)}
.hero-carousel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,transparent 55%,rgba(9,30,53,.38))}
.hero-carousel__dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;gap:8px;z-index:3}
.hero-carousel__dots span{width:9px;height:9px;border-radius:99px;
  background:rgba(255,255,255,.45);transition:all .45s var(--p-ease)}
.hero-carousel__dots span.is-active{width:28px;background:#F5B83D}
.hero-chip{position:absolute;left:16px;bottom:-18px;z-index:4;display:flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.96);color:#1A3A5C;border-radius:999px;
  padding:.55rem 1rem;font-size:.92rem;font-weight:600;
  box-shadow:0 18px 34px -12px rgba(9,30,53,.5),0 0 0 1px rgba(232,168,56,.35);
  animation:pFloat 5s ease-in-out infinite}
.hero-chip__stars{color:#F59E0B;letter-spacing:.06em}
.hero-chip strong{font-weight:900;font-size:1.05rem}
@keyframes pFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (max-width:640px){.hero-carousel{aspect-ratio:4/3.1;min-height:250px}
  .hero-chip{bottom:-14px;font-size:.85rem;padding:.5rem .85rem}}

/* ---------- trust bar: elevated navy band ---------- */
.trust-bar{background:linear-gradient(120deg,#0F2A4A,#1A3A5C 60%,#0F2A4A);
  border-top:1px solid rgba(232,168,56,.35);border-bottom:1px solid rgba(232,168,56,.35)}
.trust-bar__num{font-size:1.28rem}
.trust-bar__icon{background:rgba(232,168,56,.14);border:1px solid rgba(232,168,56,.4);
  border-radius:14px;padding:9px;display:inline-flex}

/* ---------- stats band (homepage, animated counters) ---------- */
.stats-band{background:
  radial-gradient(700px 260px at 50% -30%,rgba(232,168,56,.16),transparent 65%),
  linear-gradient(120deg,#091E35,#122E52 55%,#091E35);
  padding:clamp(2.4rem,5vw,3.4rem) 0;position:relative;overflow:hidden}
.stats-band::before,.stats-band::after{content:"";position:absolute;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,#E8A838 30%,#F5B83D 50%,#E8A838 70%,transparent)}
.stats-band::before{top:0}.stats-band::after{bottom:0}
.stats-band__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.stat__num{display:block;font-size:clamp(2.1rem,4.5vw,3.1rem);font-weight:900;line-height:1;
  color:#F5B83D;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat__num .stat__stars{display:block;font-size:1.05rem;color:#F59E0B;letter-spacing:.28em;margin-top:.35rem}
.stat__label{display:block;margin-top:.55rem;color:rgba(255,255,255,.78);
  font-size:.86rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
@media (max-width:760px){.stats-band__grid{grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem}}

/* ---------- photo marquee (homepage work strip) ---------- */
.photo-marquee{background:#0F2A4A;padding:1.1rem 0 1.3rem;overflow:hidden}
.photo-marquee__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding-bottom:.9rem}
.photo-marquee__title{color:#fff;font-weight:800;font-size:1.05rem;letter-spacing:.02em;margin:0}
.photo-marquee__title em{color:#F5B83D;font-style:normal}
.photo-marquee__hint{color:rgba(255,255,255,.55);font-size:.85rem;margin:0}
.photo-marquee__viewport{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.photo-marquee__track{display:flex;width:max-content;animation:pMarquee 42s linear infinite}
.photo-marquee:hover .photo-marquee__track{animation-play-state:paused}
.pm-group{display:flex;gap:1rem;padding-right:1rem}
.pm-tile{position:relative;flex:0 0 auto;width:264px;height:186px;border-radius:16px;overflow:hidden;
  display:block;box-shadow:0 14px 28px -12px rgba(0,0,0,.55)}
.pm-tile img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--p-ease)}
.pm-tile:hover img{transform:scale(1.09)}
.pm-tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(195deg,transparent 52%,rgba(9,30,53,.82))}
.pm-tile__label{position:absolute;left:12px;bottom:10px;z-index:2;color:#fff;font-weight:700;
  font-size:.92rem;display:flex;align-items:center;gap:.45rem}
.pm-tile__label::before{content:"";width:8px;height:8px;border-radius:99px;background:#F5B83D;
  box-shadow:0 0 0 3px rgba(245,184,61,.3)}
@keyframes pMarquee{to{transform:translateX(-50%)}}
@media (max-width:640px){.pm-tile{width:216px;height:152px}
  .photo-marquee__track{animation-duration:32s}}

/* ---------- section headers: pill labels + amber rule ---------- */
.section-header__label{display:inline-flex;align-items:center;gap:.45rem;
  background:var(--p-gold-pale);color:#92600E;border:1px solid rgba(232,168,56,.45);
  font-weight:800;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.42em 1em;border-radius:999px}
.section-header__label::before{content:"";width:7px;height:7px;border-radius:99px;background:#E8A838}
.section-header__title{position:relative}
.section-header .section-header__title::after{content:"";display:block;width:66px;height:4px;
  border-radius:99px;margin-top:.65rem;
  background:linear-gradient(90deg,#E8A838,#F5B83D)}
.section-header:not(.section-header--left) .section-header__title::after{margin-inline:auto}
.loc-neighborhoods .section-header__label,.service-areas .section-header__label{
  background:rgba(232,168,56,.14);color:#F5B83D;border-color:rgba(232,168,56,.4)}

/* ---------- cards: depth + hover life ---------- */
.service-card{border-radius:20px;overflow:hidden;position:relative;
  box-shadow:0 6px 18px -6px rgba(26,58,92,.12);
  transition:transform .35s var(--p-ease),box-shadow .35s var(--p-ease),border-color .35s ease}
.service-card:hover{transform:translateY(-7px);border-color:rgba(232,168,56,.55);
  box-shadow:0 26px 40px -16px rgba(26,58,92,.28)}
.service-card__photo{margin:-1.5rem -1.5rem 1.15rem;height:158px;overflow:hidden;position:relative}
.service-card__photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--p-ease)}
.service-card:hover .service-card__photo img{transform:scale(1.08)}
.service-card__photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,transparent 55%,rgba(9,30,53,.30))}
.service-card__urgency-badge{z-index:3}
.service-card__icon{background:linear-gradient(145deg,#FDF3DC,#FBE3AC);
  box-shadow:inset 0 0 0 1px rgba(232,168,56,.35);
  transition:transform .4s var(--p-ease),background .3s ease}
.service-card:hover .service-card__icon{transform:rotate(-6deg) scale(1.08)}
.why-card{transition:transform .35s var(--p-ease),box-shadow .35s var(--p-ease),
  background .35s ease,border-color .35s ease}
.why-card:hover{transform:translateY(-6px);border-color:rgba(232,168,56,.55);
  background:rgba(232,168,56,.07);box-shadow:0 24px 38px -18px rgba(0,0,0,.55)}
.why-card__icon-wrap{transition:transform .4s var(--p-ease)}
.why-card:hover .why-card__icon-wrap{transform:scale(1.1) rotate(-5deg)}
.review-card{border-radius:18px;
  transition:transform .35s var(--p-ease),box-shadow .35s var(--p-ease)}
.review-card:hover{transform:translateY(-6px);
  box-shadow:0 24px 40px -18px rgba(26,58,92,.30)}
.review-card__avatar{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(232,168,56,.55)}
.blog-card{border-radius:18px;overflow:hidden;
  transition:transform .35s var(--p-ease),box-shadow .35s var(--p-ease)}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 24px 40px -18px rgba(26,58,92,.28)}
.blog-card img{transition:transform .8s var(--p-ease)}
.blog-card:hover img{transform:scale(1.06)}

/* ---------- section atmosphere (light washes, contrast-safe) ---------- */
.why-choose{background:
  radial-gradient(900px 480px at 85% -10%,rgba(232,168,56,.14),transparent 60%),
  linear-gradient(150deg,#0F2A4A,#1A3A5C 60%,#122C4E)}
.reviews-section{background:
  radial-gradient(800px 400px at 8% 0%,rgba(232,168,56,.10),transparent 55%),#F8FAFC}
.faq{background:linear-gradient(180deg,#fff, #FBF7EC)}
.service-areas a{transition:color .2s ease,transform .2s ease}
.service-areas a:hover{color:#E8A838}

/* ---------- ZIP checker band ---------- */
.zip-search__inner{border-radius:22px;
  box-shadow:0 24px 44px -20px rgba(26,58,92,.35),0 0 0 1px rgba(232,168,56,.30)}
.zip-search input:focus,.zip-search select:focus{outline:none;
  box-shadow:0 0 0 3px rgba(232,168,56,.45);border-color:#E8A838}

/* ---------- process steps: numbered energy ---------- */
.process-steps{counter-reset:process-step}
.process-step{border-radius:18px;
  transition:transform .35s var(--p-ease),box-shadow .35s var(--p-ease),border-color .35s ease}
.process-step:hover{transform:translateY(-6px);border-color:rgba(232,168,56,.55);
  box-shadow:0 22px 36px -16px rgba(26,58,92,.25)}
.process-step__number{background:linear-gradient(140deg,#F5B83D,#E8A838);color:#091E35;
  font-weight:900;box-shadow:0 10px 20px -8px rgba(232,168,56,.7);
  transition:transform .4s var(--p-ease)}
.process-step:hover .process-step__number{transform:scale(1.1) rotate(-6deg)}

/* ---------- city stats strip ---------- */
.loc-stats-strip{background:
  radial-gradient(700px 240px at 50% -40%,rgba(232,168,56,.18),transparent 65%),
  linear-gradient(120deg,#0F2A4A,#1A3A5C 60%,#0F2A4A);
  border-block:1px solid rgba(232,168,56,.35)}
.loc-stat__value{color:#F5B83D;font-weight:900;
  text-shadow:0 4px 18px rgba(232,168,56,.25)}
.location-card{border-radius:18px;overflow:hidden;
  transition:transform .35s var(--p-ease),box-shadow .35s var(--p-ease)}
.location-card:hover{transform:translateY(-6px);
  box-shadow:0 24px 40px -18px rgba(26,58,92,.28)}
.location-card img{transition:transform .8s var(--p-ease)}
.location-card:hover img{transform:scale(1.07)}

/* ---------- FAQ: responsive triggers ---------- */
.faq-item{transition:box-shadow .3s ease,border-color .3s ease,transform .3s var(--p-ease)}
.faq-item__trigger{transition:background .25s ease}
.faq-item__trigger:hover{background:#FDF3DC}
.faq-item__trigger svg{transition:transform .35s var(--p-ease)}
.faq-item__trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.faq-item__body{animation:pFaqIn .4s var(--p-ease)}
@keyframes pFaqIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ---------- forms: focus energy ---------- */
.contact-form__input:focus,.contact-form__select:focus,.contact-form__textarea:focus,
.cta-form__input:focus{outline:none;border-color:#E8A838;
  box-shadow:0 0 0 3px rgba(232,168,56,.35)}
.contact-form-section .contact-form,.contact-page-form-section .contact-form{
  border-radius:20px;box-shadow:0 26px 48px -22px rgba(26,58,92,.35)}
.cta-band{background:
  radial-gradient(760px 320px at 85% -20%,rgba(232,168,56,.20),transparent 60%),
  linear-gradient(120deg,#0F2A4A,#1A3A5C)}

/* ---------- footer top edge ---------- */
footer.site-footer,footer{border-top:3px solid transparent;
  border-image:linear-gradient(90deg,transparent,#E8A838 35%,#F5B83D 50%,#E8A838 65%,transparent) 1}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .photo-marquee__track{animation:none}
  .hero-slide{transition:none}
  .hero-chip{animation:none}
  .hero .btn--primary::after{animation:none;display:none}
  .hero__title-accent,.service-hero .hero__title-accent{animation:none}
  html{scroll-behavior:auto}
}

/* ==================================================================
   103 LAYER — real photos, mobile photo-first, native city sections
   ================================================================== */

/* ---------- mobile: photo first in heroes (fleet standard) ---------- */
@media (max-width:1023.98px){
  .hero .hero__inner{display:flex;flex-direction:column;align-items:stretch}
  .hero .hero__image{order:-1}
  .hero .hero__content{order:0}
  .hero__image--carousel{margin-bottom:.4rem}
}

/* ---------- field gallery (real work photos, homepage) ---------- */
.field-gallery{background:linear-gradient(180deg,#FDFBF6,#F6F1E4);
  padding:clamp(2.6rem,5vw,3.6rem) 0 clamp(2.2rem,4vw,3rem);overflow:hidden}
.field-gallery .photo-marquee__viewport{margin-top:1.4rem}
.field-gallery .photo-marquee__track{animation-duration:55s}
.field-gallery .pm-tile{cursor:default}
.field-gallery__head h2{color:#1A3A5C;font-weight:900;letter-spacing:-.01em;
  font-size:clamp(1.5rem,3vw,2.1rem);margin:.55rem 0 .4rem}
.field-gallery__head p{color:#5B6B7F;max-width:640px;margin:0;line-height:1.6}
.field-gallery .pm-tile figcaption{position:absolute;left:12px;bottom:10px;z-index:2;
  color:#fff;font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:.45rem}
.field-gallery .pm-tile figcaption::before{content:"";width:8px;height:8px;border-radius:99px;
  background:#F5B83D;box-shadow:0 0 0 3px rgba(245,184,61,.3)}
.field-gallery .pm-tile{margin:0}

/* ---------- native city sections (loc-rich / loc-demo, from the platform's
   own inline styles, consolidated here for the new native city pages) ---- */
.loc-rich{padding:3rem 0;background:#fff}
.loc-rich__intro p{margin:0 0 1rem;line-height:1.65;color:#1f2937}
.loc-rich__subtitle{margin:2rem 0 1rem;font-size:1.4rem;color:#0f172a;font-weight:700}
.loc-rich__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:1rem 0}
.loc-rich__card{padding:1.1rem;background:#f8fafc;border-radius:.75rem;border:1px solid #e2e8f0}
.loc-rich__card h4{margin:0 0 .5rem;color:#0F7A3A;font-size:1rem}
.loc-rich__card p{margin:0;color:#475569;font-size:.95rem;line-height:1.5}
.loc-rich__cols{display:grid;grid-template-columns:1fr;gap:2rem;margin:2rem 0}
@media(min-width:768px){.loc-rich__cols{grid-template-columns:1fr 1fr}}
.loc-rich__col p{line-height:1.6;color:#374151}
.loc-rich__whyus{margin:2rem 0;padding:1.5rem;background:#fef3c7;border-left:4px solid #f59e0b;border-radius:.5rem}
.loc-rich__whyus p{margin:0;line-height:1.6}
.loc-rich__faqs{margin-top:2rem}
.loc-rich__faq{margin:.5rem 0;padding:1rem;background:#f8fafc;border-radius:.5rem;border:1px solid #e2e8f0}
.loc-rich__faq summary{cursor:pointer;font-weight:600;color:#0f172a}
.loc-rich__faq p{margin:.6rem 0 0;color:#475569;line-height:1.55}
.loc-demo{padding:3rem 0;background:#f8fafc}
.loc-demo__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin:1.5rem 0}
.loc-demo__stat{display:flex;flex-direction:column;align-items:center;padding:1.25rem .75rem;background:#fff;border-radius:.75rem;border:1px solid #e2e8f0;text-align:center}
.loc-demo__num{font-size:1.6rem;font-weight:800;color:#0F7A3A;line-height:1.1}
.loc-demo__num--text{font-size:1.05rem;text-transform:none;line-height:1.25}
.loc-demo__label{margin-top:.35rem;font-size:.78rem;color:#64748b;text-transform:uppercase;letter-spacing:.05em}
.loc-demo__insight{margin-top:1.5rem;padding:1.25rem 1.5rem;background:#fff;border-left:4px solid #0F7A3A;border-radius:.5rem;line-height:1.6;color:#334155}
.loc-demo__insight strong{color:#0f172a}

/* city heroes with real photos: fill the frame like the platform images */
.hero--location .hero__img{object-fit:cover;width:100%;height:100%}
.hero--location .hero__image picture{display:block;height:100%}

/* ---------- lead form 103: address/ZIP row ---------- */
.lead-form__row--addr{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:640px){
  .lead-form__row--addr{grid-template-columns:1fr 160px;gap:1rem}
}

/* blog cards for 103 articles */
.blog-card__new{position:absolute;top:10px;right:10px;z-index:2;background:#E8A838;color:#091E35;
  font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.3em .7em;border-radius:999px;box-shadow:0 6px 14px -6px rgba(9,30,53,.5)}
.blog-card__image-link{position:relative}

@media (prefers-reduced-motion:reduce){
  .field-gallery .photo-marquee__track{animation:none}
}

/* ==================================================================
   104 LAYER — DESIGN LIFT: cinematic hero, rhythm, city-section reskin
   ================================================================== */

/* ---------- homepage hero: full-bleed photo, big confident type ---------- */
.hero:has(.hero-carousel){position:relative;overflow:hidden;isolation:isolate}
.hero:has(.hero-carousel) .hero__inner{display:block;position:relative;
  padding:clamp(3.4rem,7vw,5.6rem) 0 clamp(3.8rem,7vw,5.8rem)}
.hero:has(.hero-carousel) .hero__image--carousel{position:absolute;inset:0;z-index:0;margin:0}
.hero:has(.hero-carousel) .hero-carousel{position:absolute;inset:0;height:100%;
  min-height:0;aspect-ratio:auto;border-radius:0;box-shadow:none;background:#0F2A4A}
.hero:has(.hero-carousel) .hero-carousel::after{
  background:linear-gradient(90deg,rgba(9,30,53,.94) 20%,rgba(13,38,66,.74) 54%,rgba(13,38,66,.28) 100%),
             linear-gradient(0deg,rgba(9,30,53,.6),transparent 46%)}
.hero:has(.hero-carousel) .hero__content{position:relative;z-index:2;max-width:680px}
/* the full-bleed container sits flush to the viewport edge — give the
   hero copy real breathing room at every width */
.hero:has(.hero-carousel) .container{
  padding-left:clamp(20px,4vw,56px) !important;
  padding-right:clamp(20px,4vw,56px) !important}
.hero:has(.hero-carousel) .hero__title{font-size:clamp(2.7rem,5.6vw,4.35rem);line-height:1.03}
.hero:has(.hero-carousel) .hero__answer{color:rgba(255,255,255,.85);font-size:1.05rem;line-height:1.65}
.hero:has(.hero-carousel) .hero-chip{left:auto;right:24px;bottom:24px}
.hero:has(.hero-carousel) .hero-carousel__dots{left:auto;right:24px;bottom:84px;transform:none}
@media (max-width:760px){
  .hero:has(.hero-carousel) .hero__inner{padding:2.6rem 0 3rem}
  .hero:has(.hero-carousel) .hero-carousel::after{
    background:linear-gradient(180deg,rgba(9,30,53,.88) 30%,rgba(13,38,66,.78) 70%,rgba(9,30,53,.9)),
               linear-gradient(0deg,rgba(9,30,53,.65),transparent 50%)}
  .hero:has(.hero-carousel) .hero-chip{right:14px;bottom:16px}
  .hero:has(.hero-carousel) .hero-carousel__dots{display:none}
}

/* ---------- native city / service heroes: larger presence ---------- */
.hero--location .hero__title,.service-hero__title{font-size:clamp(2.35rem,4.6vw,3.5rem);line-height:1.06}
.hero--location .hero__img{transform:scale(1.02)}
.hero--location .hero__image picture img{border-radius:24px;
  box-shadow:0 34px 60px -18px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14),0 0 0 7px rgba(232,168,56,.16)}

/* ---------- section rhythm: airier, alternating depth ---------- */
.services,.why-choose,.reviews-section,.faq,.loc-context,.loc-rich,.loc-demo,
.loc-neighborhoods,.loc-pricing,.field-gallery,.service-areas{
  padding-top:clamp(3.4rem,6vw,5.2rem);padding-bottom:clamp(3.4rem,6vw,5.2rem)}
.section-header__title{font-size:clamp(1.95rem,3.6vw,2.65rem);letter-spacing:-.015em}
.btn--lg{padding:1.02em 1.9em;font-size:1.05rem}

/* ---------- native city sections: navy/amber reskin (kills the flat green) ---------- */
.loc-rich{background:linear-gradient(180deg,#FFFFFF 0%,#FCF6E7 100%)}
.loc-rich__header h2,.loc-rich__subtitle{color:#0F2A4A}
.loc-rich__subtitle{position:relative;padding-bottom:.45rem}
.loc-rich__subtitle::after{content:"";position:absolute;left:0;bottom:0;width:52px;height:3px;
  border-radius:99px;background:linear-gradient(90deg,#E8A838,#F5B83D)}
.loc-rich__card{background:#fff;border:1px solid #EFE2BC;border-top:4px solid #E8A838;
  border-radius:16px;padding:1.3rem 1.25rem;
  box-shadow:0 12px 26px -16px rgba(26,58,92,.28);
  transition:transform .35s var(--p-ease),box-shadow .35s var(--p-ease)}
.loc-rich__card:hover{transform:translateY(-5px);
  box-shadow:0 22px 36px -16px rgba(26,58,92,.32)}
.loc-rich__card h4{color:#1A3A5C;font-size:1.04rem}
.loc-rich__card p{color:#475569}
.loc-rich__whyus{background:linear-gradient(120deg,#FFF6DB,#FDF0CD);
  border-left:5px solid #E8A838;border-radius:14px;
  box-shadow:0 14px 28px -18px rgba(146,96,14,.45)}
.loc-rich__faq{background:#fff;border:1px solid #E9DFC2;border-radius:12px;
  box-shadow:0 8px 18px -12px rgba(26,58,92,.22)}
.loc-rich__faq summary{color:#0F2A4A}
.loc-demo{background:
  radial-gradient(700px 240px at 50% -40%,rgba(232,168,56,.18),transparent 65%),
  linear-gradient(120deg,#0F2A4A,#1A3A5C 60%,#0F2A4A)}
.loc-demo__header h2{color:#fff}
.loc-demo__stat{background:rgba(255,255,255,.06);border:1px solid rgba(232,168,56,.38);
  border-radius:16px;box-shadow:0 14px 26px -16px rgba(0,0,0,.5)}
.loc-demo__num{color:#F5B83D}
.loc-demo__num--text{color:#fff}
.loc-demo__label{color:rgba(255,255,255,.62)}
.loc-demo__insight{background:rgba(255,255,255,.05);border-left:4px solid #E8A838;
  border-radius:12px;color:rgba(255,255,255,.86)}
.loc-demo__insight strong{color:#F5B83D}
.loc-stats-strip{padding:1.35rem 0}
.loc-stat__num{font-size:1.45rem}
.loc-context__cta{border-radius:20px;
  box-shadow:0 26px 44px -20px rgba(9,30,53,.55)}

/* ---------- photo CTA band (native city pages) ---------- */
.cta-banner{background:
  linear-gradient(112deg,rgba(9,30,53,.95) 26%,rgba(26,58,92,.85) 62%,rgba(26,58,92,.68)),
  url('/images/real/pool-entrance.jpg') center 38%/cover no-repeat}
.cta-banner__title{font-size:clamp(1.7rem,3.4vw,2.4rem)}

/* ---------- marquee / gallery: bigger tiles ---------- */
@media (min-width:761px){
  .pm-tile{width:308px;height:214px}
  .photo-marquee__track{animation-duration:48s}
}

/* ---------- review cards: oversized quote mark ---------- */
.review-card{position:relative;overflow:hidden}
.review-card::before{content:"\201C";position:absolute;top:-.5rem;right:.9rem;z-index:0;
  font-family:Georgia,'Times New Roman',serif;font-size:4.6rem;font-weight:900;line-height:1;
  color:rgba(232,168,56,.28);pointer-events:none}

/* ---------- stats band texture ---------- */
.stats-band{background:
  repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,transparent 2px 14px),
  radial-gradient(700px 260px at 50% -30%,rgba(232,168,56,.16),transparent 65%),
  linear-gradient(120deg,#091E35,#122E52 55%,#091E35)}
.stat__num{font-size:clamp(2.4rem,5vw,3.4rem)}

/* ---------- keyboard focus visibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(232,168,56,.75);outline-offset:2px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  .loc-rich__card{transition:none}
}

/* ---------- 104 F: header fit ----------
   The legacy nav row is wider than laptop viewports and clipped its amber
   CTA at the right edge (pre-existing in 103). Tighten the row first; at
   narrower laptop widths drop the duplicate amber CTA button (the phone
   link right beside it stays). */
.nav{gap:1rem}
.nav__links{gap:.25rem}
.nav__link{padding-left:.55rem;padding-right:.55rem}
.nav__cta{gap:.6rem}
@media (min-width:1025px){
  /* the ghost "Free Estimate" button is the expendable one — every page
     hero carries the same CTA; the phone + emergency button stay */
  .site-header .nav__cta a.btn:not(.btn-primary){display:none !important}
}
@media (max-width:1330px){
  .site-header .nav__cta a.btn-primary{display:none !important}
}

/* ---------- 104 G: photo band for pages that had no photo ----------
   (owner rule: a real photo on every page, properly arranged) */
.page-photo{max-width:1100px;margin:clamp(1.6rem,4vw,2.6rem) auto;
  padding:0 clamp(16px,4vw,32px)}
.page-photo img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;
  border-radius:20px;box-shadow:0 24px 44px -20px rgba(9,30,53,.45)}

/* ---------- 104 H: sticky-bar scroll persistence ----------
   Owner rule (from the Virginia Beach review): the bar must work WHILE
   SCROLLING — pinned at every scroll position, fully tappable, never
   covered by iOS browser chrome. The bar element is a direct child of
   <body> in every page template (no transformed/filtered ancestor);
   this block hardens the bar itself: top-layer z-index and its own
   composited layer via translateZ so iOS Safari keeps it painted and
   pinned during scroll. Safe-area padding already lives in the base
   bar rule above (calc(9px + env(safe-area-inset-bottom))). */
@media (max-width:1023.98px){
  .sticky-bar{z-index:1000;transform:translateZ(0);-webkit-transform:translateZ(0);
    backface-visibility:hidden;-webkit-backface-visibility:hidden}
}

/* ==================================================================
   106 COLOR LAYER — "Midnight & Gold, alive": deep navy + vivid royal
   blue + brand gold + warm copper + teal. Colorful gradients, tinted
   sections, multicolor cards. Photos stay FULL COLOR — this layer
   contains no grayscale/monochrome filter of any kind.
   ================================================================== */
:root{
  --c-navy-deep:#081C3A; --c-navy:#0B2447; --c-royal:#1D5CBF; --c-royal-hi:#3B82D6;
  --c-gold:#E8A838; --c-gold-hi:#F5B83D; --c-gold-soft:#FDF3DC;
  --c-copper:#D96C33; --c-copper-hi:#EE8B4D;
  --c-teal:#0E7C7B; --c-teal-hi:#12A594;
  --c-cream:#FFF7E8; --c-sky:#EAF2FD; --c-ink:#12263F;
  --c-ease:cubic-bezier(.22,.61,.36,1);
  --c-shadow:0 18px 34px -18px rgba(11,36,71,.35);
}
::selection{background:var(--c-teal-hi);color:#fff}
img{filter:none}
.map-facade iframe{filter:none}

/* ---------- pre-header: living gradient strip ---------- */
.pre-header{background:linear-gradient(90deg,var(--c-navy-deep),var(--c-royal) 55%,var(--c-teal));color:#fff}
.pre-header__link{color:var(--c-gold-hi);font-weight:700}
.pre-header__hours{color:rgba(255,255,255,.85)}

/* ---------- header: crisp white, gradient hairline, gold CTA ---------- */
.site-header,#site-header{background:#fff;
  box-shadow:0 1px 0 rgba(11,36,71,.06),0 10px 28px -18px rgba(11,36,71,.35)}
.site-header{border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,var(--c-gold),var(--c-copper) 40%,var(--c-teal)) 1}
.nav__logo-name{color:var(--c-navy)}
.nav__logo-tagline{color:var(--c-teal);font-weight:600}
.nav__link{color:var(--c-ink);font-weight:600}
.nav__link:hover{color:var(--c-royal)}
.nav__phone{color:var(--c-royal);font-weight:800}
.nav__phone:hover{color:var(--c-copper)}

/* ---------- buttons: gold primary, teal secondary, copper emergency ---------- */
.btn--primary{background:linear-gradient(135deg,var(--c-gold-hi),var(--c-gold) 55%,var(--c-copper));
  color:#231303;border:none;box-shadow:0 14px 26px -12px rgba(217,108,51,.65);
  transition:transform .3s var(--c-ease),box-shadow .3s var(--c-ease)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 32px -12px rgba(217,108,51,.7)}
.btn--gold{background:linear-gradient(135deg,var(--c-gold-hi),var(--c-gold));color:#231303;border:none;
  box-shadow:0 12px 24px -12px rgba(232,168,56,.7)}
.btn--secondary{background:linear-gradient(135deg,var(--c-teal-hi),var(--c-teal));color:#fff;border:none;
  box-shadow:0 14px 26px -12px rgba(14,124,123,.6);
  transition:transform .3s var(--c-ease),box-shadow .3s var(--c-ease)}
.btn--secondary:hover{transform:translateY(-2px);box-shadow:0 20px 32px -12px rgba(14,124,123,.65)}
.btn--outline-gold{border:2px solid var(--c-gold);color:var(--c-navy);background:rgba(255,255,255,.65)}
.btn--outline-gold:hover{background:var(--c-gold-soft)}
.btn--whatsapp{background:linear-gradient(135deg,#2be07a,#1eb856);color:#fff;border:none}
.badge-cta{background:linear-gradient(135deg,var(--c-gold-hi),var(--c-copper));color:#231303}

/* ---------- homepage hero: rich multi-hue gradient over full-color photos ---------- */
.hero:has(.hero-carousel) .hero-carousel::after{
  background:
    radial-gradient(720px 340px at 88% 12%,rgba(18,165,148,.38),transparent 62%),
    radial-gradient(640px 300px at 6% 96%,rgba(232,168,56,.30),transparent 60%),
    linear-gradient(94deg,rgba(8,28,58,.95) 22%,rgba(11,36,71,.82) 52%,rgba(29,92,191,.42) 82%,rgba(14,124,123,.30) 100%),
    linear-gradient(0deg,rgba(8,28,58,.62),transparent 46%)}
@media (max-width:760px){
  .hero:has(.hero-carousel) .hero-carousel::after{
    background:
      radial-gradient(420px 220px at 90% 0%,rgba(18,165,148,.32),transparent 60%),
      linear-gradient(180deg,rgba(8,28,58,.9) 26%,rgba(11,36,71,.82) 62%,rgba(14,90,110,.78) 100%),
      linear-gradient(0deg,rgba(8,28,58,.65),transparent 50%)}
}
.hero__title-accent,.hero__title-highlight,.cta-section__title-accent{
  background:linear-gradient(92deg,var(--c-gold-hi),var(--c-copper-hi));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero__badge{background:rgba(255,255,255,.12);border:1px solid rgba(245,184,61,.55);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero__badge-icon{color:var(--c-gold-hi)}
.hero-chip{background:rgba(255,255,255,.96);border:1px solid rgba(232,168,56,.5);
  box-shadow:0 18px 34px -14px rgba(8,28,58,.55);border-radius:16px}
.hero-chip__stars{color:var(--c-gold)}
.hero-carousel__dots button{background:rgba(255,255,255,.45)}
.hero-carousel__dots button.is-active,.hero-carousel__dots .is-active{background:var(--c-gold-hi)}
.hours-badge{background:linear-gradient(135deg,var(--c-teal-hi),var(--c-teal));color:#fff}
.license-badge{color:var(--c-navy)}

/* ---------- city / service heroes: gradient-framed full-color photos ---------- */
.hero--location .hero__image picture img,.service-hero__media img{
  box-shadow:0 34px 60px -18px rgba(8,28,58,.5),0 0 0 1px rgba(255,255,255,.14),
             0 0 0 7px rgba(18,165,148,.20),0 0 0 9px rgba(232,168,56,.35)}
.breadcrumb__link,.breadcrumbs__link{color:var(--c-teal);font-weight:600}
.breadcrumb__link:hover,.breadcrumbs__link:hover{color:var(--c-copper)}

/* ---------- section rhythm: warm tints alternate with white ---------- */
.why-choose{background:linear-gradient(180deg,var(--c-cream),#FFFDF6)}
.reviews-section{background:linear-gradient(180deg,var(--c-sky),#F7FBFF)}
.service-areas{background:linear-gradient(180deg,#FFFDF6,var(--c-cream))}
.field-gallery{background:linear-gradient(180deg,#F4F9FF,var(--c-sky))}
.section-header__label{display:inline-block;padding:.34em 1em;border-radius:999px;
  background:linear-gradient(120deg,rgba(18,165,148,.14),rgba(29,92,191,.12));
  color:var(--c-teal);font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:.78rem;
  border:1px solid rgba(14,124,123,.25)}
.section-header__title{color:var(--c-navy)}
.section-header__subtitle{color:#43586E}

/* ---------- service cards: white, lifted, multicolor icon chips ---------- */
.service-card{background:#fff;border:1px solid #E7EDF5;border-top:5px solid var(--c-gold);
  border-radius:20px;box-shadow:0 14px 28px -18px rgba(11,36,71,.30);
  transition:transform .35s var(--c-ease),box-shadow .35s var(--c-ease)}
.service-card:hover{transform:translateY(-6px);box-shadow:0 26px 40px -18px rgba(11,36,71,.38)}
.service-card__icon{display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:16px;color:#fff;
  background:linear-gradient(135deg,var(--c-gold-hi),var(--c-copper));
  box-shadow:0 12px 22px -10px rgba(217,108,51,.65)}
.services__grid .service-card:nth-child(4n+2),.services-grid .service-card:nth-child(4n+2){border-top-color:var(--c-teal)}
.services__grid .service-card:nth-child(4n+2) .service-card__icon,.services-grid .service-card:nth-child(4n+2) .service-card__icon{
  background:linear-gradient(135deg,var(--c-teal-hi),var(--c-teal));box-shadow:0 12px 22px -10px rgba(14,124,123,.6)}
.services__grid .service-card:nth-child(4n+3),.services-grid .service-card:nth-child(4n+3){border-top-color:var(--c-royal)}
.services__grid .service-card:nth-child(4n+3) .service-card__icon,.services-grid .service-card:nth-child(4n+3) .service-card__icon{
  background:linear-gradient(135deg,var(--c-royal-hi),var(--c-royal));box-shadow:0 12px 22px -10px rgba(29,92,191,.6)}
.services__grid .service-card:nth-child(4n+4),.services-grid .service-card:nth-child(4n+4){border-top-color:var(--c-copper)}
.services__grid .service-card:nth-child(4n+4) .service-card__icon,.services-grid .service-card:nth-child(4n+4) .service-card__icon{
  background:linear-gradient(135deg,var(--c-copper-hi),var(--c-copper));box-shadow:0 12px 22px -10px rgba(217,108,51,.6)}
.service-card--emergency{background:linear-gradient(160deg,#FFF3E4,#FFE7D1);border-color:#F3C9A4;border-top-color:var(--c-copper)}
.service-card__link{color:var(--c-royal);font-weight:700}
.service-card__link:hover{color:var(--c-copper)}
.popular-services{background:linear-gradient(180deg,#fff,var(--c-cream))}
.popular-services__title{color:var(--c-navy)}
.accordion-item{border:1px solid #E7EDF5;border-radius:14px;background:#fff}
.accordion-item__number{color:var(--c-teal);font-weight:800}
.accordion-item__name{color:var(--c-navy);font-weight:700}

/* ---------- stats band: deep gradient, gold numbers ---------- */
.stats-band{background:
  radial-gradient(700px 260px at 12% -30%,rgba(232,168,56,.28),transparent 65%),
  radial-gradient(700px 260px at 88% 130%,rgba(18,165,148,.30),transparent 65%),
  linear-gradient(115deg,var(--c-navy-deep),var(--c-royal) 58%,var(--c-teal))}
.stat__num{background:linear-gradient(180deg,#FFE9B0,var(--c-gold-hi));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.stat__label{color:rgba(255,255,255,.78)}

/* ---------- ZIP search band ---------- */
.zip-search{background:linear-gradient(115deg,var(--c-navy),var(--c-royal) 60%,var(--c-teal));color:#fff}
.zip-search__inner input{border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.97);color:var(--c-ink)}

/* ---------- photo marquee / gallery: color depth ---------- */
.pm-tile{border-radius:18px;box-shadow:0 16px 30px -16px rgba(11,36,71,.45)}
.pm-tile__label{background:linear-gradient(90deg,rgba(8,28,58,.88),rgba(8,28,58,.35));color:#fff}
.photo-marquee__title{color:var(--c-navy)}
.field-gallery img{border-radius:16px}

/* ---------- reviews: warm cards, gold stars, colorful avatars ---------- */
.review-card{background:#FFFDF7;border:1px solid #F0E3BC;border-radius:18px;box-shadow:var(--c-shadow)}
.review-card::before{color:rgba(18,165,148,.22)}
.review-card__stars,.reviews-rating__stars{color:var(--c-gold)}
.review-card__avatar{background:linear-gradient(135deg,var(--c-royal-hi),var(--c-royal));color:#fff;font-weight:800}
.reviews__grid .review-card:nth-child(3n+2) .review-card__avatar{background:linear-gradient(135deg,var(--c-teal-hi),var(--c-teal))}
.reviews__grid .review-card:nth-child(3n+3) .review-card__avatar{background:linear-gradient(135deg,var(--c-copper-hi),var(--c-copper))}
.reviews-rating{color:var(--c-navy)}
.footer-review-badge{background:rgba(255,255,255,.08);border:1px solid rgba(245,184,61,.4)}

/* ---------- CTA bands: navy-to-teal gradient over the photo ---------- */
.cta-banner{background:
  linear-gradient(112deg,rgba(8,28,58,.95) 24%,rgba(29,92,191,.82) 58%,rgba(14,124,123,.72)),
  url('/images/real/pool-entrance.jpg') center 38%/cover no-repeat}
.cta-section{background:
  radial-gradient(640px 260px at 90% 0%,rgba(232,168,56,.25),transparent 60%),
  linear-gradient(115deg,var(--c-navy-deep),var(--c-royal) 55%,var(--c-teal));color:#fff}
.cta-section__title{color:#fff}
.cta-section__desc{color:rgba(255,255,255,.85)}
.loc-context__cta{background:linear-gradient(130deg,var(--c-navy),var(--c-royal) 60%,var(--c-teal));color:#fff;
  border-radius:20px;box-shadow:0 26px 44px -20px rgba(9,30,53,.55)}

/* ---------- lead form: gradient-topped card, teal focus ---------- */
.contact-form-section{background:linear-gradient(180deg,#fff,var(--c-cream))}
.contact-form-section__form-wrap,.cta-form-card{background:#fff;border:1px solid #EDDFC0;border-radius:20px;
  border-top:6px solid transparent;
  border-image:linear-gradient(90deg,var(--c-gold),var(--c-copper),var(--c-teal)) 1;
  box-shadow:0 24px 44px -22px rgba(11,36,71,.35)}
.contact-form__input:focus,.contact-form__select:focus,.contact-form__textarea:focus,
.cta-form__input:focus{border-color:var(--c-teal-hi);outline:3px solid rgba(18,165,148,.28);outline-offset:1px}
.contact-form-section__title,.cta-form-card__title{color:var(--c-navy)}

/* ---------- FAQ: clean cards, teal icon chips ---------- */
.faq-item{background:#fff;border:1px solid #E7EDF5;border-left:5px solid var(--c-gold);border-radius:14px;
  box-shadow:0 10px 22px -16px rgba(11,36,71,.28)}
.faq-item__icon{color:var(--c-teal)}
.loc-rich__faq{border-left:5px solid var(--c-teal)}

/* ---------- native city sections: multicolor card tops ---------- */
.loc-rich{background:linear-gradient(180deg,#FFFFFF 0%,var(--c-cream) 100%)}
.loc-rich__card{border-top:4px solid var(--c-gold)}
.loc-rich__cards .loc-rich__card:nth-child(4n+2),.loc-rich__grid .loc-rich__card:nth-child(4n+2){border-top-color:var(--c-teal)}
.loc-rich__cards .loc-rich__card:nth-child(4n+3),.loc-rich__grid .loc-rich__card:nth-child(4n+3){border-top-color:var(--c-royal)}
.loc-rich__cards .loc-rich__card:nth-child(4n+4),.loc-rich__grid .loc-rich__card:nth-child(4n+4){border-top-color:var(--c-copper)}
.loc-rich__card h4{color:var(--c-navy)}
.loc-rich__whyus{background:linear-gradient(120deg,#FFF3D6,#FFE9BC);border-left:5px solid var(--c-copper)}
.loc-demo{background:
  radial-gradient(700px 240px at 50% -40%,rgba(232,168,56,.22),transparent 65%),
  linear-gradient(120deg,var(--c-navy-deep),var(--c-royal) 55%,var(--c-teal))}
.loc-demo__num{color:var(--c-gold-hi)}
.loc-demo__insight{border-left-color:var(--c-teal-hi)}
.loc-stats-strip{background:linear-gradient(90deg,var(--c-gold-soft),#FFFDF6)}
.loc-stat__num{color:var(--c-royal)}
.page-photo img{border-radius:20px;box-shadow:0 24px 44px -20px rgba(11,36,71,.45)}

/* ---------- blog cards ---------- */
.blog-card{border-radius:18px;border:1px solid #E7EDF5;border-top:5px solid var(--c-teal);background:#fff;
  box-shadow:0 14px 28px -18px rgba(11,36,71,.3)}
.blog-card__new{background:linear-gradient(135deg,var(--c-copper-hi),var(--c-copper));color:#fff}

/* ---------- footer: deep navy gradient, gold headings, brand-color socials ---------- */
.site-footer,footer.site-footer{background:
  radial-gradient(760px 300px at 85% -10%,rgba(29,92,191,.35),transparent 60%),
  linear-gradient(150deg,var(--c-navy-deep),var(--c-navy) 55%,#0A2E4A);color:rgba(255,255,255,.82)}
.footer-col__heading{color:var(--c-gold-hi)}
.footer-logo__name{color:#fff}
.footer-divider__diamond{background:var(--c-gold)}
.footer-social__link{border-radius:50%;color:#fff}
.footer-social__link--facebook{background:#1877F2}
.footer-social__link--instagram{background:linear-gradient(45deg,#F09433,#E6683C,#DC2743,#CC2366,#BC1888)}
.footer-social__link--pinterest{background:#E60023}
.lang-badge{border:1px solid rgba(245,184,61,.45);color:rgba(255,255,255,.85)}

/* ---------- sticky mobile bar: FLEET PATTERN in the color palette ----------
   Dark navy gradient container, two 999px pills: Call = brand gold
   gradient (navy text), Text = GREEN gradient (white text). Hrefs are
   frozen in the HTML; only colors live here. Scroll hardening kept. */
@media (max-width:1023.98px){
  .sticky-bar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;
    z-index:1000;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;
    background:linear-gradient(120deg,#03142F,#0A2B54);
    box-shadow:0 -6px 22px rgba(3,20,47,.42);
    padding:9px 12px calc(9px + env(safe-area-inset-bottom))}
  .sticky-bar a{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;
    text-align:center;text-decoration:none;font-weight:800;padding:.72em 0;border-radius:999px;
    font-size:1rem;line-height:1.25;white-space:nowrap}
  .sticky-bar .sb-call{background:linear-gradient(180deg,#F5B83D,#E8A838);color:#03142F}
  .sticky-bar .sb-text{background:linear-gradient(180deg,#2be07a,#1eb856);color:#fff}
}

/* ---------- focus visibility in the new palette ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(18,165,148,.65);outline-offset:2px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  .service-card,.btn--primary,.btn--secondary{transition:none}
}

/* ==================================================================
   107 LAYER — "MIDNIGHT GOLD": near-black + gold premium reskin.
   Supersedes the 106 color layer above (navy / royal / copper / teal)
   by cascade order. Palette: rich near-black (#0A0A0C family), warm
   ivory light sections, one gold family (#E8A838 / #F5B83D / #F7CE68)
   for every accent, CTA and highlight. Photos stay FULL COLOR.
   The sticky-bar rules above are intentionally NOT re-declared here —
   the bar (dark container, gold Call pill, green Text pill) is frozen.
   Where a page's own inline <style> block sets the same property at
   equal specificity, selectors below carry one extra element/class so
   the Midnight Gold value wins.
   ================================================================== */
:root{
  --g-black:#0A0A0C; --g-coal:#101014; --g-panel:#17171D; --g-line:rgba(232,168,56,.30);
  --g-gold:#E8A838; --g-gold-hi:#F5B83D; --g-gold-pale:#F7CE68; --g-gold-deep:#B97F1F;
  --g-ivory:#FAF6EC; --g-ink:#16130B;
  --g-ease:cubic-bezier(.22,.61,.36,1);
}
::selection{background:var(--g-gold);color:#171106}

/* ---------- pre-header: black strip, gold link ---------- */
body .pre-header{background:#060607;color:rgba(255,255,255,.82)}
body .pre-header__link{color:var(--g-gold-hi);font-weight:700}
.pre-header__hours{color:rgba(255,255,255,.72)}

/* ---------- header: ivory-white, gold hairline, black type ---------- */
body .site-header,#site-header{background:#FFFDF7;
  box-shadow:0 1px 0 rgba(20,16,4,.05),0 12px 30px -20px rgba(10,10,12,.45)}
.site-header{border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,transparent,var(--g-gold) 30%,var(--g-gold-pale) 50%,var(--g-gold) 70%,transparent) 1}
.site-header .nav__logo-name{color:#12100B}
.site-header .nav__logo-tagline{color:var(--g-gold-deep);font-weight:700;letter-spacing:.04em}
.site-header .nav__link{color:#221E15;font-weight:600}
.site-header .nav__link:hover{color:var(--g-gold-deep)}
.site-header .nav__phone{color:#12100B;font-weight:800}
.site-header .nav__phone:hover{color:var(--g-gold-deep)}
body .btn-primary{background:linear-gradient(160deg,var(--g-gold-pale),var(--g-gold) 55%,#CE8D1E);
  color:#171106;box-shadow:0 10px 22px -10px rgba(232,168,56,.65)}

/* ---------- buttons: one gold family; black secondary ---------- */
.btn--primary{background:linear-gradient(160deg,var(--g-gold-pale) 0%,var(--g-gold) 52%,#CE8D1E 100%);
  color:#171106;border:none;
  box-shadow:0 14px 28px -12px rgba(206,141,30,.70),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .3s var(--g-ease),box-shadow .3s var(--g-ease),filter .3s ease}
.btn--primary:hover{transform:translateY(-2px);filter:brightness(1.04);
  box-shadow:0 20px 34px -12px rgba(206,141,30,.75),inset 0 1px 0 rgba(255,255,255,.55)}
.btn--gold{background:linear-gradient(160deg,var(--g-gold-pale),var(--g-gold));color:#171106;border:none;
  box-shadow:0 12px 24px -12px rgba(232,168,56,.7)}
.btn--secondary{background:#121216;color:#fff;border:1px solid #121216;
  box-shadow:0 14px 26px -14px rgba(10,10,12,.55);
  transition:transform .3s var(--g-ease),box-shadow .3s var(--g-ease),background .3s ease}
.btn--secondary:hover{transform:translateY(-2px);background:#1C1C22;
  box-shadow:0 20px 32px -14px rgba(10,10,12,.6)}
.hero .btn--secondary,.service-hero .btn--secondary,.page-hero .btn--secondary{
  background:rgba(255,255,255,.06);border:1px solid rgba(247,206,104,.55);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero .btn--secondary:hover,.service-hero .btn--secondary:hover,.page-hero .btn--secondary:hover{
  background:rgba(232,168,56,.16);border-color:var(--g-gold-pale)}
.cta-section .btn--secondary,.cta-banner .btn--secondary,.loc-context__cta .btn--secondary{
  background:rgba(255,255,255,.07);border:1px solid rgba(247,206,104,.55);color:#fff}
.btn--outline-gold{border:2px solid var(--g-gold);color:#12100B;background:rgba(255,255,255,.6)}
.btn--outline-gold:hover{background:#FDF3DC}
.badge-cta{background:linear-gradient(135deg,var(--g-gold-pale),var(--g-gold));color:#171106}

/* ---------- heroes: rich near-black, gold glow ---------- */
.hero{background:
  radial-gradient(900px 480px at 88% -10%,rgba(232,168,56,.20),transparent 60%),
  radial-gradient(760px 560px at -12% 112%,rgba(232,168,56,.10),transparent 55%),
  linear-gradient(135deg,#08080A 0%,#131318 55%,#0C0C0F 100%)}
.hero:has(.hero-carousel) .hero-carousel::after{
  background:
    radial-gradient(760px 360px at 88% 8%,rgba(232,168,56,.24),transparent 62%),
    radial-gradient(640px 300px at 4% 100%,rgba(232,168,56,.12),transparent 60%),
    linear-gradient(94deg,rgba(5,5,7,.97) 22%,rgba(9,9,12,.86) 52%,rgba(9,9,12,.48) 82%,rgba(9,9,12,.34) 100%),
    linear-gradient(0deg,rgba(5,5,7,.66),transparent 46%)}
@media (max-width:760px){
  .hero:has(.hero-carousel) .hero-carousel::after{
    background:
      radial-gradient(420px 220px at 90% 0%,rgba(232,168,56,.20),transparent 60%),
      linear-gradient(180deg,rgba(5,5,7,.92) 26%,rgba(9,9,12,.84) 62%,rgba(9,9,12,.9) 100%),
      linear-gradient(0deg,rgba(5,5,7,.68),transparent 50%)}
}
.hero:has(.hero-carousel) .hero__title{font-size:clamp(2.9rem,6vw,4.75rem);line-height:1.02;
  letter-spacing:-.022em;font-weight:900}
.hero__title-accent,.service-hero .hero__title-accent,.hero__title-highlight,.cta-section__title-accent{
  background:linear-gradient(100deg,var(--g-gold) 25%,var(--g-gold-pale) 50%,var(--g-gold) 75%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--g-gold)}
body .hero__badge{background:rgba(8,8,10,.55);border:1px solid rgba(247,206,104,.6);
  color:var(--g-gold-pale);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.hero__badge-icon{color:var(--g-gold-hi)}
.hero__subheading strong{color:var(--g-gold-pale)}
.hero-chip{background:#101014;color:#fff;border:1px solid rgba(247,206,104,.55);
  box-shadow:0 18px 34px -14px rgba(0,0,0,.65)}
.hero-chip__stars{color:var(--g-gold-hi)}
.hero-chip strong{color:#fff}
.hero-carousel__dots span.is-active,.hero-carousel__dots button.is-active{background:var(--g-gold-hi)}
.hours-badge{background:linear-gradient(135deg,var(--g-gold-pale),var(--g-gold));color:#171106}
.hero .license-badge{color:rgba(255,255,255,.85)}
.hero__image picture img,.hero__image>img{
  box-shadow:0 34px 60px -18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12),0 0 0 7px rgba(232,168,56,.20)}
.hero-carousel{box-shadow:0 34px 60px -18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12),0 0 0 7px rgba(232,168,56,.16)}

/* city / service / page heroes */
.hero--location .hero__image picture img,.service-hero__media img{
  box-shadow:0 34px 60px -18px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12),
             0 0 0 7px rgba(232,168,56,.22)}
.service-hero,.page-hero{background:
  radial-gradient(820px 420px at 90% -20%,rgba(232,168,56,.18),transparent 60%),
  linear-gradient(135deg,#08080A,#141419 60%,#0C0C0F)}
.service-hero::before{
  background:linear-gradient(112deg,rgba(6,6,8,.96) 26%,rgba(10,10,13,.86) 62%,rgba(10,10,13,.68)),
             var(--svc-hero,none) center/cover no-repeat}
.page-hero::before{
  background:linear-gradient(115deg,rgba(6,6,8,.95) 30%,rgba(10,10,13,.82) 70%,rgba(10,10,13,.64)),
             url('/images/eagle-locksmith-technician-800.jpg') center 32%/cover no-repeat}
.service-hero::after,.page-hero::after{
  background:linear-gradient(90deg,var(--g-gold),var(--g-gold-pale),var(--g-gold))}
.service-hero__title{font-weight:900;letter-spacing:-.02em}
.breadcrumb__link,.breadcrumbs__link{color:var(--g-gold-deep);font-weight:600}
.breadcrumb__link:hover,.breadcrumbs__link:hover{color:#8A5F0E}

/* ---------- trust bar: black band, gold figures ---------- */
body .trust-bar{background:#070708;
  border-top:1px solid rgba(232,168,56,.4);border-bottom:1px solid rgba(232,168,56,.4)}
.trust-bar__num{color:var(--g-gold-hi)}
.trust-bar__num-suffix{color:var(--g-gold-hi)}
.trust-bar__icon{background:rgba(232,168,56,.13);border:1px solid rgba(232,168,56,.42)}

/* ---------- stats band: black, gold numerals ---------- */
.stats-band{background:
  repeating-linear-gradient(115deg,rgba(255,255,255,.02) 0 2px,transparent 2px 14px),
  radial-gradient(700px 260px at 50% -30%,rgba(232,168,56,.20),transparent 65%),
  linear-gradient(120deg,#08080A,#141419 55%,#08080A)}
.stat__num{background:linear-gradient(180deg,#FFE9B0,var(--g-gold-hi));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.stat__num .stat__stars{color:var(--g-gold)}
.stat__label{color:rgba(255,255,255,.72)}

/* ---------- ZIP band: black panel, gold button (button already gold) ---------- */
body .zip-search{background:
  radial-gradient(700px 300px at 85% -20%,rgba(232,168,56,.16),transparent 60%),
  linear-gradient(120deg,#08080A,#141419 60%,#0A0A0C)}
.zip-search__inner{box-shadow:0 24px 44px -20px rgba(0,0,0,.6),0 0 0 1px rgba(232,168,56,.35)}
.zip-search input:focus,.zip-search select:focus{box-shadow:0 0 0 3px rgba(232,168,56,.5);border-color:var(--g-gold)}

/* ---------- section headers: black pill, gold rule ---------- */
.section-header__label{background:#12100B;color:var(--g-gold-pale);
  border:1px solid rgba(232,168,56,.55);font-weight:800;letter-spacing:.12em}
.section-header__label::before{background:var(--g-gold-hi)}
.section-header .section-header__title,.section-header__title{color:#14110A}
.section-header .section-header__title::after{
  background:linear-gradient(90deg,var(--g-gold),var(--g-gold-pale))}
.section-header__subtitle{color:#5C5540}
.section-header__title{font-size:clamp(2rem,3.8vw,2.75rem);font-weight:900;letter-spacing:-.018em}

/* ---------- light-section rhythm: ivory washes ---------- */
.services{background:linear-gradient(180deg,var(--g-ivory),#FFFDF7)}
.popular-services{background:linear-gradient(180deg,#FFFDF7,var(--g-ivory))}
.popular-services__title{color:#14110A}
.popular-services .accordion-item__number{color:var(--g-gold-deep);font-weight:800}
.accordion-item__name{color:#14110A}
.service-areas{background:linear-gradient(180deg,#FFFDF6,var(--g-ivory))}
.service-areas a:hover{color:var(--g-gold-deep)}
.field-gallery{background:linear-gradient(180deg,#FFFDF7,#F6EFDB)}
.field-gallery__head h2{color:#14110A}
.reviews-section{background:
  radial-gradient(800px 400px at 8% 0%,rgba(232,168,56,.10),transparent 55%),
  linear-gradient(180deg,var(--g-ivory),#FFFDF7)}
.faq{background:linear-gradient(180deg,#FFFDF7,#FBF3DC)}

/* ---------- service cards: ivory-white, gold top, black icon chips ---------- */
.service-card{background:#fff;border:1px solid #E9E0C3;border-top:5px solid var(--g-gold);
  border-radius:20px;box-shadow:0 14px 28px -18px rgba(20,16,4,.30);
  transition:transform .35s var(--g-ease),box-shadow .35s var(--g-ease),border-color .35s ease}
.service-card:hover{transform:translateY(-7px);border-color:rgba(232,168,56,.65);
  box-shadow:0 26px 42px -18px rgba(20,16,4,.38)}
.services__grid .service-card:nth-child(4n+2),.services-grid .service-card:nth-child(4n+2),
.services__grid .service-card:nth-child(4n+3),.services-grid .service-card:nth-child(4n+3),
.services__grid .service-card:nth-child(4n+4),.services-grid .service-card:nth-child(4n+4){
  border-top-color:var(--g-gold)}
.service-card__icon{background:linear-gradient(145deg,#1D1D24,#0C0C0F);color:var(--g-gold-hi);
  box-shadow:inset 0 0 0 1px rgba(232,168,56,.4),0 12px 22px -10px rgba(10,10,12,.55)}
.services__grid .service-card:nth-child(n) .service-card__icon,
.services-grid .service-card:nth-child(n) .service-card__icon{
  background:linear-gradient(145deg,#1D1D24,#0C0C0F);
  box-shadow:inset 0 0 0 1px rgba(232,168,56,.4),0 12px 22px -10px rgba(10,10,12,.55)}
.service-card__photo::after{background:linear-gradient(200deg,transparent 55%,rgba(6,6,8,.34))}
.service-card__link{color:var(--g-gold-deep);font-weight:700}
.service-card__link:hover{color:#8A5F0E}
.service-card--emergency{background:linear-gradient(165deg,#17171D,#0A0A0C);
  border-color:#2B2B33;border-top:5px solid var(--g-gold);color:#F1ECDF}
.service-card--emergency .service-card__title{color:#fff}
.service-card--emergency .service-card__desc{color:rgba(255,255,255,.74)}
.service-card--emergency .service-card__link{color:var(--g-gold-pale)}
.service-card--emergency .service-card__icon{background:linear-gradient(145deg,var(--g-gold-pale),var(--g-gold));
  color:#171106;box-shadow:0 12px 22px -10px rgba(232,168,56,.6)}

/* ---------- why-choose: the black showcase band ---------- */
.why-choose{background:
  radial-gradient(900px 480px at 85% -10%,rgba(232,168,56,.16),transparent 60%),
  linear-gradient(150deg,#0A0A0C,#141419 60%,#0B0B0E)}
.why-choose .section-header__title{color:#fff}
.why-choose .section-header__subtitle{color:rgba(255,255,255,.72)}
.why-card{background:#17171D;border:1px solid rgba(232,168,56,.26);color:#EDE9DC}
.why-card:hover{border-color:rgba(232,168,56,.6);background:#1B1B22;
  box-shadow:0 24px 38px -18px rgba(0,0,0,.65)}
.why-card h3,.why-card__title{color:#fff}
.why-card p{color:rgba(255,255,255,.72)}

/* ---------- photo strips ---------- */
.photo-marquee{background:#0A0A0C}
.photo-marquee__title{color:#fff}
.photo-marquee__title em{color:var(--g-gold-hi)}
.photo-marquee__hint{color:rgba(255,255,255,.5)}
.pm-tile{box-shadow:0 16px 30px -16px rgba(0,0,0,.6)}
.pm-tile::after{background:linear-gradient(195deg,transparent 52%,rgba(5,5,7,.85))}
.pm-tile__label::before,.field-gallery .pm-tile figcaption::before{background:var(--g-gold-hi);
  box-shadow:0 0 0 3px rgba(245,184,61,.3)}

/* ---------- reviews: ivory cards, black avatars, gold stars ---------- */
.review-card{background:#fff;border:1px solid #EDE2BE;border-radius:18px;
  box-shadow:0 16px 30px -20px rgba(20,16,4,.35)}
.review-card::before{color:rgba(232,168,56,.30)}
.review-card:hover{box-shadow:0 24px 40px -18px rgba(20,16,4,.4)}
.review-card__stars,.reviews-rating__stars{color:var(--g-gold)}
.review-card__avatar,.reviews__grid .review-card:nth-child(3n+2) .review-card__avatar,
.reviews__grid .review-card:nth-child(3n+3) .review-card__avatar{
  background:linear-gradient(135deg,#1D1D24,#0B0B0E);color:var(--g-gold-hi);font-weight:800;
  box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(232,168,56,.55)}
.reviews-rating{color:#14110A}
.footer-review-badge{background:rgba(255,255,255,.07);border:1px solid rgba(245,184,61,.45)}

/* ---------- process / FAQ / forms ---------- */
.process-step__number{background:linear-gradient(140deg,var(--g-gold-pale),var(--g-gold));color:#171106;
  box-shadow:0 10px 20px -8px rgba(232,168,56,.7)}
.process-step:hover{border-color:rgba(232,168,56,.6)}
.faq-item{background:#fff;border:1px solid #EDE2BE;border-left:5px solid var(--g-gold);
  box-shadow:0 10px 22px -16px rgba(20,16,4,.28)}
.faq-item__icon{color:var(--g-gold-deep)}
.faq-item__trigger:hover{background:#FDF3DC}
.contact-form-section{background:linear-gradient(180deg,#FFFDF7,var(--g-ivory))}
.contact-form-section__form-wrap,.cta-form-card{background:#fff;border:1px solid #EDDFC0;border-radius:20px;
  border-top:6px solid transparent;
  border-image:linear-gradient(90deg,var(--g-gold),var(--g-gold-pale),var(--g-gold)) 1;
  box-shadow:0 24px 44px -22px rgba(20,16,4,.35)}
.contact-form__input:focus,.contact-form__select:focus,.contact-form__textarea:focus,
.cta-form__input:focus{border-color:var(--g-gold);outline:3px solid rgba(232,168,56,.30);outline-offset:1px}
.contact-form-section__title,.cta-form-card__title{color:#14110A}
.contact-form-section .contact-form,.contact-page-form-section .contact-form{
  box-shadow:0 26px 48px -22px rgba(20,16,4,.35)}

/* ---------- CTA bands: black + gold ---------- */
.cta-section{background:
  radial-gradient(640px 260px at 90% 0%,rgba(232,168,56,.22),transparent 60%),
  linear-gradient(115deg,#08080A,#141419 55%,#0A0A0C);color:#fff}
.cta-banner{background:
  linear-gradient(112deg,rgba(6,6,8,.96) 24%,rgba(10,10,13,.86) 58%,rgba(10,10,13,.70)),
  url('/images/real/pool-entrance.jpg') center 38%/cover no-repeat}
.loc-context__cta{background:linear-gradient(130deg,#0C0C0F,#17171D 60%,#0A0A0C);color:#fff;
  box-shadow:0 26px 44px -20px rgba(0,0,0,.6)}
.cta-band{background:
  radial-gradient(760px 320px at 85% -20%,rgba(232,168,56,.20),transparent 60%),
  linear-gradient(120deg,#0A0A0C,#141419)}

/* ---------- native city sections: gold system on ivory / black ---------- */
.loc-rich{background:linear-gradient(180deg,#FFFFFF 0%,var(--g-ivory) 100%)}
.loc-rich__header h2,.loc-rich__subtitle{color:#14110A}
.loc-rich__subtitle::after{background:linear-gradient(90deg,var(--g-gold),var(--g-gold-pale))}
.loc-rich__card{background:#fff;border:1px solid #EFE2BC;border-top:4px solid var(--g-gold);
  box-shadow:0 12px 26px -16px rgba(20,16,4,.30)}
.loc-rich__cards .loc-rich__card:nth-child(4n+2),.loc-rich__grid .loc-rich__card:nth-child(4n+2),
.loc-rich__cards .loc-rich__card:nth-child(4n+3),.loc-rich__grid .loc-rich__card:nth-child(4n+3),
.loc-rich__cards .loc-rich__card:nth-child(4n+4),.loc-rich__grid .loc-rich__card:nth-child(4n+4){
  border-top-color:var(--g-gold)}
.loc-rich__card h4{color:#14110A}
.loc-rich__whyus{background:linear-gradient(120deg,#FFF3D6,#FCEFC4);
  border-left:5px solid var(--g-gold);box-shadow:0 14px 28px -18px rgba(146,96,14,.4)}
.loc-rich__faq{border-left:5px solid var(--g-gold);border-color:#E9DFC2}
.loc-rich__faq summary{color:#14110A}
.loc-demo{background:
  radial-gradient(700px 240px at 50% -40%,rgba(232,168,56,.20),transparent 65%),
  linear-gradient(120deg,#0A0A0C,#15151B 55%,#0A0A0C)}
.loc-demo__stat{background:rgba(255,255,255,.05);border:1px solid rgba(232,168,56,.4)}
.loc-demo__num{color:var(--g-gold-hi)}
.loc-demo__insight{border-left:4px solid var(--g-gold)}
.loc-demo__insight strong{color:var(--g-gold-pale)}
.loc-stats-strip{background:linear-gradient(120deg,#0A0A0C,#15151B 60%,#0A0A0C);
  border-block:1px solid rgba(232,168,56,.4)}
.loc-stat__value,.loc-stat__num{color:var(--g-gold-hi);font-weight:900}
.loc-stat__label{color:rgba(255,255,255,.62)}
.location-card:hover{box-shadow:0 24px 40px -18px rgba(20,16,4,.35)}
.page-photo img{box-shadow:0 24px 44px -20px rgba(0,0,0,.5)}

/* ---------- blog cards ---------- */
.blog-card{border:1px solid #E9E0C3;border-top:5px solid var(--g-gold);background:#fff;
  box-shadow:0 14px 28px -18px rgba(20,16,4,.3)}
.blog-card__new{background:linear-gradient(135deg,var(--g-gold-pale),var(--g-gold));color:#171106}

/* ---------- footer: near-black, gold headings ---------- */
.site-footer,footer.site-footer{background:
  radial-gradient(760px 300px at 85% -10%,rgba(232,168,56,.14),transparent 60%),
  linear-gradient(150deg,#0B0B0E,#060607 55%,#09090B);color:rgba(255,255,255,.82)}
.footer-col__heading{color:var(--g-gold-hi)}
.footer-logo__name{color:#fff}
.footer-divider__diamond{background:var(--g-gold)}
.lang-badge{border:1px solid rgba(245,184,61,.45);color:rgba(255,255,255,.85)}

/* ---------- focus visibility: gold ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(232,168,56,.8);outline-offset:2px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  .service-card,.btn--primary,.btn--secondary{transition:none}
}

/* ---------- 107 FIX PASS (from the first preview render) ----------
   Pages carry inline <style> blocks AFTER the stylesheet links; the
   rules below carry one extra element so Midnight Gold wins there too.
   Icon SVGs ship with hardcoded navy stroke attributes — CSS overrides
   presentation attributes, forcing the gold the palette promises. */
body .hero{background:
  radial-gradient(900px 480px at 88% -10%,rgba(232,168,56,.20),transparent 60%),
  radial-gradient(760px 560px at -12% 112%,rgba(232,168,56,.10),transparent 55%),
  linear-gradient(135deg,#08080A 0%,#131318 55%,#0C0C0F 100%)}
body .service-hero{background:
  radial-gradient(820px 420px at 90% -20%,rgba(232,168,56,.18),transparent 60%),
  linear-gradient(135deg,#08080A,#141419 60%,#0C0C0F)}
body .service-hero::before{
  background:linear-gradient(112deg,rgba(6,6,8,.96) 26%,rgba(10,10,13,.86) 62%,rgba(10,10,13,.68)),
             var(--svc-hero,none) center/cover no-repeat}
.service-card__title{color:#14110A}
.service-card__icon svg [stroke]{stroke:#F5B83D}
.service-card__icon svg [fill]:not([fill="none"]){fill:#F5B83D}
.services__grid .service-card--emergency .service-card__icon,
.services-grid .service-card--emergency .service-card__icon{
  background:linear-gradient(145deg,#1D1D24,#0C0C0F);color:#F5B83D;
  box-shadow:inset 0 0 0 2px rgba(232,168,56,.75),0 12px 22px -10px rgba(0,0,0,.6)}
.btn--outline{border:2px solid #14110A;color:#14110A;background:transparent}
.btn--outline:hover{background:#12100B;color:var(--g-gold-pale);
  box-shadow:0 10px 24px -10px rgba(10,10,12,.5)}

/* ---------- 107 FIX PASS 2 — token reskin ----------
   The base sheets (main-57 / components-v7-57) drive 127 rules off
   var(--color-navy). Redefining the navy tokens here (the same lever
   the shelved 105 build used) turns every remaining navy text, border
   and band near-black in one move; --color-gold already IS the brand
   gold, so it stays. */
:root{--color-navy:#191920;--color-navy-dark:#101014;--color-navy-deeper:#08080A}

/* ==================================================================
   REDESIGN A — "DARK LUXURY, DONE RIGHT" (appended over the 107 cascade)
   Deep charcoal (never navy), one gold family, cinematic full-bleed
   photo hero frozen on the branded van shot, dark integrated header,
   pill CTAs, generous rhythm. v2: header beaten via #site-header ID,
   hero carousel re-anchored to the SECTION (it was boxed inside the
   container), double hero padding removed, icon systems sized.
   ================================================================== */
:root{
  --g-black:#08080A; --g-coal:#0D0D10; --g-panel:#141419; --g-line:rgba(232,168,56,.30);
}
html{background:#08080A}
body{background:#08080A}

/* ---------- kill the plus-pattern artifact (main-57 .hero::before) ---------- */
.hero::before{display:none !important}

/* ---------- icon systems: explicit sizes (the giant-pin bug class) ---------- */
.nap-icon{width:18px;height:18px;flex:0 0 18px}
.nap-item svg{flex:0 0 auto}
.footer-social__link svg{width:18px;height:18px;display:block}
.faq-item__icon{width:22px;height:22px;flex:0 0 22px}
.faq-item__icon svg{width:100%;height:100%;display:block}
.breadcrumb__sep svg,.breadcrumb svg{width:12px;height:12px;flex:0 0 auto}
.hero__badge-icon{width:16px;height:16px;flex:0 0 16px}
.trust-badge svg{width:20px;height:20px;flex:0 0 auto}
.trust-bar__icon svg{width:22px;height:22px}
.service-card__icon svg{width:26px;height:26px}
.why-card__icon-wrap svg{width:26px;height:26px}
.pre-header__link svg,.pre-header__hours svg{width:12px;height:12px;flex:0 0 auto}
.site-header .nav__link svg{width:14px;height:14px}

/* ---------- pre-header + header: one dark system ---------- */
body .pre-header{background:#050506;border-bottom:1px solid rgba(232,168,56,.20);
  color:rgba(244,241,234,.78)}
body .pre-header::after{display:none}
body .pre-header__message{color:rgba(244,241,234,.85)}
body .pre-header__link{color:#F5B83D;background:rgba(232,168,56,.08);
  border:1px solid rgba(232,168,56,.30)}
body .pre-header__link:hover{color:#0A0A0C !important;background:#F5B83D;border-color:#F5B83D}
body #site-header,body #site-header.is-scrolled{
  background:#070709;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 18px 34px -22px rgba(0,0,0,.85)}
body .site-header::after{display:none}
.site-header .nav{padding-top:1rem;padding-bottom:1rem}
.site-header .nav__logo{color:#F4F1EA}
.site-header .nav__logo-name{color:#F4F1EA}
.site-header .nav__logo-tagline{color:#E8A838}
.site-header .nav__link{color:rgba(244,241,234,.84);font-weight:600}
.site-header .nav__link:hover{color:#F5B83D}
.site-header .nav__phone{color:#F4F1EA}
.site-header .nav__phone:hover{color:#F5B83D}
.nav__hamburger-line{background:#F5B83D}
body .site-header .btn-primary{border-radius:999px;padding:.62rem 1.35rem}
/* dropdowns + mobile drawer go dark too */
.nav__dropdown{background:#101014;border:1px solid rgba(232,168,56,.28);
  box-shadow:0 30px 50px -20px rgba(0,0,0,.8);border-radius:14px}
.nav__dropdown a{color:rgba(244,241,234,.88)}
.nav__dropdown a:hover{background:rgba(232,168,56,.12);color:#F5B83D}
.nav__dropdown-item--header{color:#E8A838}
.nav__mobile{background:#0A0A0C;color:#F4F1EA}
.nav__mobile a,.nav__mobile-submenu a,.nav__dropdown-item a{color:rgba(244,241,234,.9)}
.nav__mobile-phone{background:rgba(232,168,56,.12);color:#F5B83D}

/* ---------- pill buttons, one gold family ---------- */
.btn{border-radius:999px}
.btn--secondary{background:transparent;border:1px solid rgba(244,241,234,.4);color:#F4F1EA}
.btn--secondary:hover{border-color:#F5B83D;color:#F5B83D;background:rgba(232,168,56,.08)}

/* ---------- HERO (home): cinematic, carousel anchored to the section ---------- */
.hero:has(.hero-carousel){background:#08080A;padding:0}
.hero:has(.hero-carousel) .hero__inner{position:static;display:flex;align-items:center;
  min-height:min(88vh,840px);
  padding-top:clamp(3.4rem,6vh,5rem);padding-bottom:clamp(3.4rem,6vh,5rem)}
.hero:has(.hero-carousel) .hero-carousel{background:#0A0A0C}
.hero:has(.hero-carousel) .hero-carousel::after{
  background:
    linear-gradient(90deg,rgba(5,5,7,.95) 26%,rgba(5,5,7,.78) 52%,rgba(5,5,7,.30) 78%,rgba(5,5,7,.12) 100%),
    linear-gradient(0deg,rgba(5,5,7,.72),transparent 42%),
    linear-gradient(180deg,rgba(5,5,7,.45),transparent 30%)}
/* freeze the carousel on slide 1 — the branded van (owner rejected the
   dark key-machine slide rotating in as a muddy "safe") */
.hero-carousel .hero-slide{opacity:0 !important;transition:none !important}
.hero-carousel .hero-slide:first-of-type{opacity:1 !important;transform:none !important;
  object-position:center 46%}
.hero-carousel__dots{display:none !important}
.hero:has(.hero-carousel) .hero__content{max-width:720px}
.hero:has(.hero-carousel) .hero__cta-group{min-height:0}
body .hero__badge{display:inline-flex;width:fit-content;max-width:fit-content;
  background:rgba(8,8,10,.62);border:1px solid rgba(247,206,104,.55);color:#F7CE68;
  letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;font-weight:700;
  padding:.5rem 1.05rem}
.hero:has(.hero-carousel) .hero__title{
  font-size:clamp(3.05rem,5.9vw,5rem);line-height:.99;letter-spacing:-.026em;font-weight:900}
.hero__title-accent{animation:none;background-size:100% 100%}
.hero:has(.hero-carousel) .hero__subheading{font-size:1.16rem;color:rgba(244,241,234,.92)}
.hero__subheading strong{color:#F7CE68}
.hero:has(.hero-carousel) .hero__answer{color:rgba(244,241,234,.74);font-size:1.03rem;
  line-height:1.7;max-width:58ch}
.hero__trust-badges .trust-badge{background:rgba(10,10,13,.55);border:1px solid rgba(247,206,104,.35);
  color:rgba(244,241,234,.9);backdrop-filter:blur(6px)}
.hero-chip{background:rgba(10,10,13,.88);border:1px solid rgba(247,206,104,.5);color:#F4F1EA}
@media (max-width:760px){
  .hero:has(.hero-carousel) .hero__inner{min-height:0}
  .hero:has(.hero-carousel) .hero-carousel::after{
    background:linear-gradient(180deg,rgba(5,5,7,.90) 22%,rgba(5,5,7,.82) 60%,rgba(5,5,7,.92) 100%),
               linear-gradient(0deg,rgba(5,5,7,.6),transparent 45%)}
  .hero-carousel .hero-slide:first-of-type{object-position:center 40%}
}

/* ---------- city / service / page heroes: charcoal + gold frame ---------- */
.hero--location{background:
  radial-gradient(900px 480px at 88% -10%,rgba(232,168,56,.16),transparent 60%),
  linear-gradient(135deg,#08080A,#121216 58%,#0A0A0C)}
.hero--location .hero__title{font-size:clamp(2.6rem,4.8vw,3.9rem);line-height:1.02;letter-spacing:-.022em}
.hero--location .hero__image picture img,.hero--location .hero__img{
  border-radius:20px;
  box-shadow:0 36px 64px -20px rgba(0,0,0,.7),0 0 0 1px rgba(247,206,104,.45)}
.hero__badge{letter-spacing:.02em}
/* breadcrumb strip joins the dark system */
body .breadcrumb{background:#08080A;border-bottom:1px solid rgba(232,168,56,.18);
  color:rgba(244,241,234,.7)}
.breadcrumb__link{color:#F5B83D}
.breadcrumb__item--current{color:rgba(244,241,234,.78)}
.breadcrumb__sep{color:rgba(232,168,56,.6)}

/* ---------- section rhythm: airier ---------- */
.services,.why-choose,.reviews-section,.faq,.loc-context,.loc-rich,.loc-demo,
.loc-neighborhoods,.loc-pricing,.field-gallery,.service-areas,.popular-services{
  padding-top:clamp(4.2rem,7vw,6.4rem);padding-bottom:clamp(4.2rem,7vw,6.4rem)}
.section-header__title{font-size:clamp(2.15rem,4vw,3rem)}

/* ---------- bands ---------- */
body .zip-search{background:#060607;border-block:1px solid rgba(232,168,56,.35)}
.zip-search__inner{background:#101014;border:1px solid rgba(232,168,56,.30);border-radius:20px}
body .trust-bar{background:#060607}
.stats-band{border-block:1px solid rgba(232,168,56,.30)}
.photo-marquee{border-block:1px solid rgba(232,168,56,.22)}
.why-choose{border-block:1px solid rgba(232,168,56,.22)}

/* ---------- cards on ivory: crisper ---------- */
.services__grid,.services-grid{gap:1.75rem}
.service-card{border-radius:22px}
.review-card{border-radius:20px}

/* ---------- footer: black, gold top hairline ---------- */
.site-footer,footer.site-footer{border-top:1px solid rgba(232,168,56,.4)}

/* ---------- sticky bar: fleet pattern on true black ---------- */
@media (max-width:1023.98px){
  .sticky-bar{background:linear-gradient(120deg,#050506,#121216);
    box-shadow:0 -8px 26px rgba(0,0,0,.6)}
}

/* ---------- A v3: clean hero edge + real footer grid ---------- */
.hero::after{display:none !important}
.footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:2.75rem;align-items:start}
@media (max-width:1023.98px){.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-nap .nap-item{display:flex;gap:.65rem;align-items:flex-start;margin-bottom:.8rem}

/* ---------- A v4: hamburger specificity + desktop pre-footer strip ---------- */
body .nav__hamburger-line{background:#F5B83D}
@media (min-width:1024px){
  .sticky-bar{display:flex;gap:12px;justify-content:center;align-items:center;
    background:#060607;border-block:1px solid rgba(232,168,56,.35);padding:14px 16px}
  .sticky-bar a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
    font-weight:800;padding:.68em 1.5em;border-radius:999px;font-size:.98rem;white-space:nowrap}
  .sticky-bar .sb-call{background:linear-gradient(180deg,#F5B83D,#E8A838);color:#0A0A0C}
  .sticky-bar .sb-text{background:transparent;border:2px solid rgba(247,206,104,.65);color:#F7CE68}
}

/* ==========================================================================
   ENRICH-1 (styles-110) — Visual enrichment pass #1, Eagle Locksmith flagship.
   Brand palette update (owner, 2026-11-12): RED is the lead color, with
   orange; black / white / gold stay. Blue & green remain functional only.
   Everything below is additive: job carousel, field photo rails, card motion,
   red/orange CTA + section accents. Sticky bar, forms and schema untouched.
   ========================================================================== */
:root{
  --e-red:#C8102E;
  --e-red-deep:#8F0B21;
  --e-orange:#E8590C;
  --e-orange-hi:#F76707;
  --e-ease:cubic-bezier(.22,.75,.25,1);
}

/* ---------- primary CTA: red -> orange (lead brand colors) ---------- */
.btn--primary{
  background:linear-gradient(160deg,var(--e-orange-hi) 0%,var(--e-red) 58%,var(--e-red-deep) 100%);
  color:#fff;
  box-shadow:0 14px 28px -12px rgba(200,16,46,.55),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary:hover{
  transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 20px 34px -12px rgba(200,16,46,.6),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary:active{transform:translateY(0) scale(.98)}

/* ---------- section accents: red dot + red/orange/gold title rule ---------- */
.section-header__label::before{background:var(--e-red)}
.section-header .section-header__title::after,
.section-header__title::after{
  background:linear-gradient(90deg,var(--e-red),var(--e-orange),var(--g-gold,#E8A838));
}

/* ---------- emergency badge on service cards ---------- */
.service-card__urgency-badge{
  background:linear-gradient(120deg,var(--e-red),var(--e-orange));
  color:#fff;
}

/* ---------- card hover motion (subtle lift + warm shadow + photo zoom) ---------- */
.service-card,.why-card,.review-card,.blog-card,.loc-rich__card{
  transition:transform .35s var(--e-ease),box-shadow .35s var(--e-ease),border-color .35s ease;
}
.service-card:hover,.why-card:hover,.review-card:hover,.blog-card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 38px -18px rgba(20,12,4,.45),0 6px 18px -8px rgba(200,16,46,.25);
}
.service-card__photo{overflow:hidden}
.service-card__photo img{transition:transform .6s var(--e-ease)}
.service-card:hover .service-card__photo img{transform:scale(1.06)}
.pm-tile img{transition:transform .6s var(--e-ease)}
.pm-tile:hover img{transform:scale(1.05)}
.photo-marquee:hover .photo-marquee__track{animation-play-state:paused}

/* ---------- focus visibility in brand orange ---------- */
.job-carousel :focus-visible,.field-strip :focus-visible,.photo-rail :focus-visible{
  outline:2px solid var(--e-orange-hi);outline-offset:2px;
}

/* ==========================================================================
   JOB CAROUSEL (homepage "Real Work, Real Photos") — scroll-snap rail with
   prev/next controls, progress bar and counter. Swipeable on mobile.
   ========================================================================== */
.job-carousel{position:relative;margin-top:2rem}
.jc-track{
  display:flex;gap:1rem;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:.25rem .25rem 1rem;scrollbar-width:thin;scrollbar-color:var(--e-red) rgba(255,255,255,.12);
  -webkit-overflow-scrolling:touch;max-width:100%;
}
.jc-track::-webkit-scrollbar{height:6px}
.jc-track::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--e-red),var(--e-orange));border-radius:99px}
.jc-track::-webkit-scrollbar-track{background:rgba(127,127,127,.18);border-radius:99px}
.jc-slide{
  flex:0 0 auto;width:min(340px,78vw);margin:0;position:relative;
  border-radius:16px;overflow:hidden;scroll-snap-align:start;
  box-shadow:0 16px 30px -16px rgba(10,8,4,.5);background:#14110A;
}
.jc-slide img{
  display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .6s var(--e-ease);
}
.jc-slide:hover img{transform:scale(1.05)}
.jc-slide figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2rem .95rem .8rem;
  background:linear-gradient(180deg,transparent,rgba(8,6,3,.88));
  color:#fff;font-size:.86rem;font-weight:600;line-height:1.35;
  border-left:4px solid var(--e-red);
}
.jc-ui{display:flex;align-items:center;gap:1rem;margin-top:.35rem}
.jc-btn{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:#17130C;color:var(--g-gold-pale,#F5C972);
  border:1px solid rgba(232,168,56,.55);
  transition:background .3s ease,color .3s ease,transform .3s var(--e-ease),opacity .3s ease;
}
.jc-btn svg{width:20px;height:20px}
.jc-btn:hover{background:linear-gradient(140deg,var(--e-orange-hi),var(--e-red));color:#fff;border-color:transparent;transform:translateY(-2px)}
.jc-btn:disabled{opacity:.35;cursor:default;transform:none}
.jc-progress{flex:1 1 auto;height:5px;border-radius:99px;background:rgba(127,127,127,.25);overflow:hidden}
.jc-progress__bar{
  display:block;height:100%;width:8%;border-radius:99px;
  background:linear-gradient(90deg,var(--e-red),var(--e-orange),var(--g-gold,#E8A838));
  transition:width .25s ease;
}
.jc-count{font-size:.82rem;font-weight:700;letter-spacing:.06em;color:#8A8171;white-space:nowrap}

/* ==========================================================================
   FIELD STRIP (service pages + services index) — swipeable photo rail of
   real job photos matched to the service.
   ========================================================================== */
.field-strip{padding:3.25rem 0;background:#0E0C09}
.field-strip__head{margin-bottom:1.4rem}
.field-strip__title{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);margin:.7rem 0 0}
.field-strip__accent{
  background:linear-gradient(90deg,var(--e-orange-hi),var(--e-red));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.field-strip__hint{color:#B7AE9C;margin:.55rem 0 0;font-size:.95rem}
.photo-rail{
  display:flex;gap:1rem;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;padding:.25rem .25rem 1rem;
  scrollbar-width:thin;scrollbar-color:var(--e-red) rgba(255,255,255,.12);
  -webkit-overflow-scrolling:touch;max-width:100%;
}
.photo-rail::-webkit-scrollbar{height:6px}
.photo-rail::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--e-red),var(--e-orange));border-radius:99px}
.photo-rail::-webkit-scrollbar-track{background:rgba(127,127,127,.18);border-radius:99px}
.photo-rail__item{
  flex:0 0 auto;width:min(300px,74vw);margin:0;position:relative;
  border-radius:14px;overflow:hidden;scroll-snap-align:start;background:#14110A;
  box-shadow:0 14px 26px -14px rgba(0,0,0,.6);
}
.photo-rail__item img{
  display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .6s var(--e-ease);
}
.photo-rail__item:hover img{transform:scale(1.05)}
.photo-rail__item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.8rem .9rem .75rem;
  background:linear-gradient(180deg,transparent,rgba(8,6,3,.88));
  color:#fff;font-size:.85rem;font-weight:600;line-height:1.35;
  border-left:4px solid var(--e-red);
}

@media (max-width:640px){
  .jc-ui{gap:.7rem}
  .jc-btn{width:42px;height:42px}
  .field-strip{padding:2.5rem 0}
}

@media (prefers-reduced-motion:reduce){
  .jc-track,.photo-rail{scroll-behavior:auto}
  .jc-slide img,.photo-rail__item img,.service-card__photo img,.pm-tile img{transition:none}
  .service-card:hover,.why-card:hover,.review-card:hover,.blog-card:hover,
  .jc-slide:hover img,.photo-rail__item:hover img,
  .service-card:hover .service-card__photo img,.pm-tile:hover img{transform:none}
  .jc-progress__bar{transition:none}
}