/* ============ JAT ELECTRICS ============
   Built from the BW electrician lander template.
   Accent colours from the JAT van livery: royal blue body, cyan circuit glow,
   yellow bulb from the logo. Contrast (WCAG, computed):
   white on --blue #1a5fd0 5.85:1 (buttons/ticker), --blue-lift #0c3f8f on
   #faf9f6 9.39:1 (text accent), ink on --orange (yellow) #f6c318 11.8:1,
   --cyan #3cc2f5 on the dark hero 9.5:1. */
:root{
  --bg: #faf9f6;
  --bg-2: #f1efe9;
  --card: #ffffff;
  --ink: #0b0d10;
  --dim: #4a5058;
  --faint: #868d95;
  --blue: #1a5fd0;           /* JAT royal blue, white labels */
  --blue-lift: #0c3f8f;      /* navy for text accents on light */
  --cyan: #3cc2f5;           /* livery glow, dark backgrounds only */
  --orange: #f6c318;         /* logo bulb yellow, ink labels */
  --border: rgba(11,13,16,0.13);
  --r: 10px;
  --font: "Outfit", -apple-system, sans-serif;
  --ease: cubic-bezier(0.16,1,0.3,1);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ background: var(--bg); scroll-behavior:smooth; overflow-x: clip; }
body{
  background: var(--bg); color: var(--dim);
  font-family: var(--font); font-size: 16.5px; line-height: 1.65;
  overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }

h1,h2,h3{ font-weight: 700; text-transform: uppercase; color: var(--ink); line-height: 1.15; letter-spacing: 0.01em; }
.section{ padding: 90px 0; }
.container{ max-width: 1140px; margin: 0 auto; padding: 0 32px; }
.center{ text-align:center; }
.kicker{
  display:inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--blue-lift); margin-bottom: 14px;
}
.section-title{ font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 16px; }
.section-title .em{ color: var(--blue-lift); font-style: italic; }
.lead{ max-width: 62ch; }

/* ============ BUTTONS (reference: 10px radius blocks) ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius: var(--r); padding: 16px 30px; font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: 0.04em;
  transition: transform .25s var(--ease), background .25s, filter .25s;
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.08); }
.btn-blue{ background: var(--blue); color: #fff; }
.btn-orange{ background: var(--orange); color: #0b0d10; }
.btn-ghost{ border: 2px solid var(--border); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--ink); }

/* ============ HEADER ============ */
.site-header{
  position: absolute; top:0; left:0; right:0; z-index: 100;
  background: rgba(250,249,246,0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom:1px solid var(--border);
}
.header-inner{
  max-width: 1140px; margin:0 auto; padding: 16px 32px;
  display:flex; align-items:center; justify-content:space-between; gap: 18px;
}
.wordmark img{ height: 48px; width:auto; }  /* JAT logo is detailed; 30px made it unreadable */
.main-nav{ display:flex; gap: 24px; }
.main-nav a{ font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); white-space: nowrap; }
.main-nav a:hover{ color: var(--blue-lift); }
.header-cta{ display:flex; gap: 12px; align-items:center; }
.header-phone{
  background: var(--blue); color:#fff; border-radius: var(--r);
  padding: 10px 16px; font-weight: 800; font-size: 15px; line-height: 1.2; text-align:center;
}
.header-quote{
  background: var(--orange); color: #171310; border-radius: var(--r);
  padding: 10px 16px; font-weight: 800; font-size: 13px; text-transform: uppercase; text-align:center;
}

/* ============ HERO (video, staggered uppercase headline) ============ */
.hero{ position:relative; min-height: 92vh; display:flex; align-items:center; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; }
.hero-bg video, .hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,13,16,0.55) 0%, rgba(11,13,16,0.4) 60%, rgba(11,13,16,0.25) 100%); }
.hero-inner{ position:relative; z-index:1; width:100%; padding-top: 140px; padding-bottom: 90px; }
.hero-lines{ text-align: right; display:flex; flex-direction:column; gap: 14px; }
.hero-lines .line{
  font-size: clamp(30px, 4.6vw, 58px); font-weight: 800; text-transform: uppercase;
  color: #ffffff; line-height: 1.05; text-shadow: 0 2px 24px rgba(11,13,16,0.35);
}
.hero-lines .line .em{ color: var(--cyan); font-style: italic; padding-right: 0.14em; }
.hero-cta-row{ display:flex; justify-content:flex-end; gap: 14px; margin-top: 34px; }
.hero-grating-row{ display:flex; justify-content:flex-end; margin-top: 20px; }
.hero-grating{
  display:inline-flex; align-items:center; gap: 10px;
  background: rgba(11,13,16,0.5); border: 1.5px solid rgba(255,255,255,0.35); border-radius: 50px;
  padding: 9px 18px; font-weight: 700; font-size: 14px; color: #ffffff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .25s, transform .25s var(--ease);
}
.hero-grating:hover{ border-color: var(--blue-lift); transform: translateY(-2px); }
.hero-grating img{ height: 20px; width:auto; }
.hero-grating .hg-score{ margin-left: 2px; }
.hero-grating .hg-stars{ color: var(--orange); letter-spacing: 2px; margin-left: 4px; }
.hero-grating .hg-arrow{ color: var(--blue-lift); margin-left: 4px; }
.hero-grating .hg-count{ color: rgba(255,255,255,0.75); font-weight: 600; font-size: 0.92em; margin-left: 4px; white-space:nowrap; }
.rv-sub{ margin-top: -4px; color: var(--dim); font-weight: 600; }
.rv-sub .rv-sub-stars{ color: var(--orange); letter-spacing: 2px; margin-right: 6px; }

/* ============ OFFER TICKER ============ */
.ticker{ background: var(--blue); color:#fff; padding: 24px 0; overflow:hidden; }
.ticker-track{
  display:flex; gap: 0; width:max-content; white-space:nowrap;
  font-weight: 800; text-transform: uppercase; font-size: 19px; letter-spacing: 0.06em;
  animation: tick 75s linear infinite;
}
@keyframes tick{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

/* ============ WHY CHOOSE US (split) ============ */
.why-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
.why-photo{ border-radius: var(--r); overflow:hidden; }
.why-photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 0.85/1; object-position: center top; }

/* ============ SERVICES TILES ============ */
.svc-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 46px; }
.svc-tile{
  position:relative; border-radius: var(--r); overflow:hidden; aspect-ratio: 1/1.05;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.svc-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.svc-tile:hover img{ transform: scale(1.06); }
.svc-tile::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,20,20,0) 30%, rgba(20,20,20,0.9) 100%); }
.svc-tile-body{ position:relative; z-index:1; padding: 22px; }
.svc-tile h3{ font-size: 19px; margin-bottom: 8px; color:#fff; }
.svc-desc{
  color: rgba(255,255,255,0.92); font-size: 14px; line-height: 1.55;
  max-height: 0; opacity: 0; overflow: hidden; margin: 0 auto; max-width: 34ch;
  transition: max-height .45s var(--ease), opacity .35s, margin .45s var(--ease);
}
.svc-tile:hover .svc-desc, .svc-tile:focus-visible .svc-desc{
  max-height: 140px; opacity: 1; margin-bottom: 12px;
}
.svc-tile:hover::after{ background: linear-gradient(180deg, rgba(20,20,20,0.1) 0%, rgba(20,20,20,0.96) 78%); }
.svc-tile::after{ transition: background .4s; }
@media (hover: none){
  .svc-desc{ max-height: none; opacity: 1; margin-bottom: 12px; }
}
.svc-tile .svc-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--blue); color: #fff; border-radius: var(--r); padding: 12px 22px;
  transition: background .25s, transform .25s var(--ease);
}
.svc-tile:hover .svc-cta{ background: var(--orange); color: #171310; transform: translateY(-2px); }

/* ============ CHECKLIST BAND ============ */
.check-band{ background: var(--bg-2); }
.check-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
.check-list{ display:flex; flex-direction:column; gap: 14px; margin-top: 8px; }
.check-list li{ display:flex; gap: 12px; align-items:flex-start; font-weight: 600; color: var(--ink); font-size: 17px; }
.check-list .tick{
  width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size: 14px; font-weight:800; margin-top:1px;
}
.check-ctas{ display:flex; gap: 14px; margin-top: 28px; flex-wrap:wrap; }
.check-photo{ border-radius: var(--r); overflow:hidden; }
.check-photo img{ width:100%; object-fit:cover; aspect-ratio: 0.95/1; }

/* ============ FEATURE CARDS ============ */
.feat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 46px; }
.feat-card{
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 28px 24px;
}
.feat-ic{
  width: 52px; height: 52px; border-radius: var(--r); background: rgba(26,95,208,0.16);
  display:flex; align-items:center; justify-content:center; margin-bottom: 18px;
}
.feat-ic svg{ width: 24px; height: 24px; stroke: var(--blue-lift); }
.feat-card h3{ font-size: 16.5px; margin-bottom: 8px; text-transform:none; }
.feat-card p{ font-size: 14.5px; }

/* ============ GALLERY ============ */
.gal-grid{
  display:grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 210px;
  gap: 14px; margin-top: 42px;
}
.gal-grid img{
  width:100%; height:100%; object-fit:cover; border-radius: var(--r);
  border: 1px solid var(--border); transition: transform .5s var(--ease), filter .5s;
}
.gal-grid img:hover{ transform: scale(1.03); filter: brightness(1.08); }
.gal-grid .gal-wide{ grid-column: span 2; }

/* ============ REVIEWS (marquee, dark) ============ */
.rv-marquee{ overflow:hidden; margin-top: 42px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.rv-track{ display:flex; gap: 20px; width:max-content; animation: rvscroll 60s linear infinite; }
.rv-track.rv-rev{ animation-direction: reverse; }
.rv-track:hover{ animation-play-state: paused; }
@keyframes rvscroll{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .rv-track{ animation:none; flex-wrap:wrap; width:auto; } }
.rv-card{
  width: 360px; background: #ffffff; border:1px solid rgba(0,0,0,0.06); border-radius: var(--r);
  padding: 24px; position: relative;
  box-shadow: 0 8px 24px rgba(11,13,16,0.10);
}
.rv-card::after{
  content:""; position:absolute; top: 22px; right: 20px; width: 22px; height: 22px;
  background: url("../assets/images/real/google-g.webp") center/contain no-repeat;
}
.rv-top{ display:flex; align-items:center; gap: 12px; margin-bottom: 10px; }
.rv-avatar{
  width: 42px; height: 42px; border-radius:50%; background: var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800;
}
.rv-card:nth-child(even) .rv-avatar{ background: var(--orange); color:#171310; }
.rv-name{ font-weight: 700; font-size: 15px; color: #202124; }
.rv-date{ font-size: 12.5px; color: #5f6368; }
.rv-stars{ color: #fbbc04; letter-spacing: 2px; margin-bottom: 8px; }
.rv-text{ font-size: 14.5px; color: #3c4043; }
.rv-more-row{ margin-top: 18px; }
.rv-more-row[hidden]{ display:none; }
.rv-cta{ text-align:center; margin-top: 36px; }

/* ============ SAME DAY BAND ============ */
.sameday{
  position:relative; overflow:hidden;
  background-size:cover; background-position:center;
}
/* window-style parallax: desktop pointers only (mobile browsers janky with fixed attachment) */
@media (hover:hover) and (pointer:fine){
  .sameday{ background-attachment:fixed; }
}
.sameday::before{ content:""; position:absolute; inset:0; background: rgba(20,20,20,0.78); }
.sameday .container{ position:relative; z-index:1; text-align:center; padding-top: 90px; padding-bottom: 90px; }
.sameday .section-title{ color:#fff; }
.sameday .lead{ color:rgba(255,255,255,0.88); }

/* ============ FORM / GET IN TOUCH ============ */
.book-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items:start; }
.form-card{
  background: #ffffff; border: 1px solid var(--border);
  border-radius: var(--r); padding: 30px 30px 34px; color: var(--ink);
  position: relative; overflow: hidden;
  box-shadow: 0 14px 40px rgba(11,13,16,0.08);
}
.form-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
}
.form-card h3{ color: var(--ink); font-size: 22px; margin-bottom: 6px; }
.form-card p{ color: var(--dim); font-size: 14px; margin-bottom: 12px; }
.form-crop{ overflow:hidden; border-radius: 8px; }  /* JAT: height comes from GHL (iFrameSizer). A fixed 752px hid the submit button */
iframe[id^="inline-"]{ min-height: 600px; margin-top: -40px; width:100%; border:0; display:block; }  /* hide GHL top padding */
.git-list{ display:flex; flex-direction:column; gap: 18px; margin-top: 26px; }
.git-list li{ display:flex; gap: 14px; align-items:flex-start; color: var(--ink); font-weight:600; }
.git-list svg{ width: 20px; height: 20px; stroke: var(--blue-lift); flex-shrink:0; margin-top: 3px; }
.git-list small{ display:block; color: var(--faint); font-weight:500; }

/* ============ VIDEOS (replaces reference map) ============ */
.vid-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,240px)); gap:16px; margin-top:42px; justify-content:center; }
.vid-card{ aspect-ratio:9/16; border-radius: var(--r); overflow:hidden; background:#000; border:1px solid var(--border); }
.vid-card iframe{ width:100%; height:100%; border:0; display:block; }
.vid-feature{ margin-top:16px; display:flex; justify-content:center; }
.vid-card-wide{ aspect-ratio:16/9; width:min(720px,100%); }

/* ============ FOOTER ============ */
.footer{ background: #0b0d10; padding: 60px 0 36px; color: rgba(255,255,255,0.75); }
.footer h4{ color:#fff; }
.footer p{ color: rgba(255,255,255,0.75); }
.footer-grid{ display:flex; justify-content:space-between; gap: 44px; flex-wrap:wrap; }
.footer .f-logo{ height: 56px; width:auto; margin-bottom: 16px; }
.footer p{ font-size: 14px; max-width: 44ch; }
.footer h4{ font-size: 14px; letter-spacing: 0.1em; margin-bottom: 14px; }
.footer li{ margin-bottom: 8px; font-size: 14.5px; }
.footer a{ transition: color .2s; }
.footer a:hover, .footer a:focus-visible{ color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }  /* was var(--ink) = the footer bg, so links vanished on hover */
.footer-bottom{ border-top: 1px solid rgba(255,255,255,0.14); margin-top: 44px; padding-top: 20px; font-size: 13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

/* ============ REVEAL ============ */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px){
  .main-nav{ display:none; }
  .hero-lines{ text-align:left; }
  .hero-cta-row{ justify-content:flex-start; }
  .hero-grating-row{ justify-content:flex-start; }
  .why-grid, .check-grid, .book-grid{ grid-template-columns: 1fr; gap: 44px; }
  .svc-grid{ grid-template-columns: repeat(2,1fr); }
  .feat-grid{ grid-template-columns: repeat(2,1fr); }
  /* gal-grid mobile: snap strip below */
}
@media (max-width: 640px){
  .section{ padding: 64px 0; }
  .container{ padding: 0 20px; }
  .header-inner{ padding: 12px 20px; }
  .wordmark img{ height: 34px; }
  .header-quote{ display:none; }
  .hero{ min-height: 84vh; }
  .hero-inner{ padding-top: 120px; padding-bottom: 70px; }
  .hero-lines .line{ font-size: clamp(26px, 8vw, 34px); }
  .hero-grating{ font-size: 12px; padding: 8px 12px; gap: 7px; max-width: 100%; }
  .hero-grating img{ height: 16px; }
  .hero-grating .hg-stars{ letter-spacing: 1px; }
  .svc-grid{ grid-template-columns: 1fr; }
  .feat-grid{ grid-template-columns: 1fr; }
  
  /* vid-grid mobile: snap strip below */
  .rv-card{ width: 300px; }
}

/* ===== always-visible phone: mobile sticky header + ring animation (8 Sep 2026) ===== */
@media (max-width: 900px){
  .site-header{ position: fixed; top:0; left:0; right:0; }
}
.site-header a[href^="tel:"]{ animation: phone-ring 5s ease-in-out infinite; position: relative; }
.site-header a[href^="tel:"]::after{
  content:""; position:absolute; inset:-3px; border-radius: inherit;
  animation: phone-pulse 5s ease-out infinite; pointer-events:none;
}
@keyframes phone-ring{
  0%, 6%, 100% { transform: rotate(0); }
  1% { transform: rotate(-3deg) scale(1.04); }
  2% { transform: rotate(3deg) scale(1.04); }
  3% { transform: rotate(-3deg) scale(1.04); }
  4% { transform: rotate(3deg) scale(1.04); }
  5% { transform: rotate(0) scale(1); }
}
@keyframes phone-pulse{
  0%   { box-shadow: 0 0 0 0 var(--blue, #1a5fd0); opacity:.55; }
  8%   { box-shadow: 0 0 0 12px transparent; opacity:0; }
  100% { box-shadow: 0 0 0 0 transparent; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .site-header a[href^="tel:"], .site-header a[href^="tel:"]::after{ animation: none; }
}

/* ===== mobile media strips: horizontal snap-scroll, no orphan wrapping (8 Sep 2026) ===== */
@media (max-width: 700px){
  .vid-grid{
    display:flex; overflow-x:auto; gap:12px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-left:20px; padding-right:20px; padding-bottom:8px;
    margin-left:-20px; margin-right:-20px; scrollbar-width:none; justify-content:flex-start;
  }
  .vid-grid::-webkit-scrollbar{ display:none; }
  .vid-grid .vid-card{ flex:0 0 62vw; width:62vw; scroll-snap-align:center; }
  .gal-grid{
    display:flex; overflow-x:auto; gap:12px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-left:20px; padding-right:20px; padding-bottom:8px;
    margin-left:-20px; margin-right:-20px; scrollbar-width:none;
  }
  .gal-grid::-webkit-scrollbar{ display:none; }
  .gal-grid img, .gal-grid .gal-wide{ flex:0 0 76vw; width:76vw; height:58vw; scroll-snap-align:center; grid-column:auto; }
  .gal-grid img:hover{ transform:none; }
}

/* anchor targets clear the fixed mobile header + pill strip */
section[id], div[id]{ scroll-margin-top: 24px; }
@media (max-width: 900px){ section[id], div[id]{ scroll-margin-top: calc(var(--hdr-h, 59px) + 70px); } }


/* ===== FAQ (JAT palette) ===== */
.faq-wrap{ max-width: 860px; display:flex; flex-direction:column; gap:12px; margin-top: 30px; }
.faq-item{ background: var(--card); border: 1px solid var(--border); border-radius: var(--r); transition: border-color .3s; }
.faq-item:hover{ border-color: rgba(26,95,208,0.5); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; font-weight:600; font-size:17px; color: var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; flex-shrink:0; width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background: rgba(26,95,208,0.12); color: var(--blue-lift); font-size:20px; line-height:1; transition: transform .3s var(--ease), background .3s; }
.faq-item[open] summary::after{ transform: rotate(45deg); background: var(--blue); color:#fff; }
.faq-a{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .4s var(--ease); }
.faq-item[open] .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ padding:0 24px 22px; font-size:15px; line-height:1.65; color: var(--dim); max-width:72ch; }

/* ===== services dropdown (light) ===== */
.nav-drop{ position:relative; display:flex; align-items:center; }
.main-nav{ align-items:center; }
.nav-drop .nav-menu{
  position:absolute; top:100%; left:-14px; padding-top:10px; padding-bottom:10px; min-width:220px;
  background: var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 18px 44px rgba(11,13,16,0.18);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-menu a{ display:block; padding-top:9px; padding-bottom:9px; padding-left:18px; padding-right:18px; font-weight:600; font-size:14px; color:var(--ink); text-transform:none; letter-spacing:0; }
.nav-menu a:hover{ background: var(--bg-2); color: var(--blue-lift); }

/* ===== mobile service quick-nav pill strip ===== */
.mobile-svc-nav{
  display:none; position:sticky; top:var(--hdr-h, 59px); z-index:99; margin-top:var(--hdr-h, 59px);  /* --hdr-h set by JS: JAT's logo makes the header 78px, so a fixed 59px hid the pills */
  background: var(--bg-2); border-bottom:1px solid var(--border);
  padding-top:10px; padding-bottom:10px; padding-left:16px; padding-right:16px; gap:8px;
}
@media (max-width: 900px){ .mobile-svc-nav{ display:flex; justify-content:center; } }
.mobile-svc-nav a{
  flex:1; text-align:center; padding-top:9px; padding-bottom:9px; padding-left:6px; padding-right:6px;
  border-radius:999px; border:1px solid var(--border); font-weight:600; font-size:13px;
  color: var(--ink); white-space:nowrap;
}
.mobile-svc-nav a.is-here{ background: var(--blue); color:#fff; border-color: var(--blue); }

/* ===== compact work list (types bands on service pages) ===== */
.work-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:34px; text-align:left; }
.work-item{ display:flex; gap:14px; align-items:flex-start; background: var(--card); border:1px solid var(--border); border-radius: var(--r); padding:16px 18px; }
.work-item .tick{ flex:0 0 auto; margin-top:2px; width:26px; height:26px; border-radius:50%; background: var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; }
.work-item h3{ font-size:17px; margin:0 0 3px; }
.work-item p{ margin:0; font-size:14.5px; color: var(--dim); }
.check-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.work-grid + .check-ctas, .svc-grid + .check-ctas{ margin-top:34px; justify-content:center; }
@media (max-width:700px){ .work-grid{ grid-template-columns:1fr; gap:10px; } .work-item{ padding:13px 15px; } }

/* ===== polaroid scatter gallery (light paper) ===== */
.polaroid-field{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 4px; margin-top:50px; perspective:900px; }
.polaroid{ background:#fff; padding:12px 12px 46px; border-radius:4px; box-shadow:0 14px 34px rgba(11,13,16,0.22); width:clamp(200px,22vw,280px); position:relative; transition:transform .45s var(--ease), box-shadow .45s; }
.polaroid img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; filter:saturate(1.05); }
.polaroid figcaption{ position:absolute; left:0; right:0; bottom:12px; text-align:center; color:#3a3630; font-size:15px; font-weight:600; font-style:italic; }
.polaroid:nth-child(1){ transform:rotate(-5deg) translateY(8px); }
.polaroid:nth-child(2){ transform:rotate(3.5deg) translateY(-10px); z-index:1; }
.polaroid:nth-child(3){ transform:rotate(-2.5deg) translateY(12px); }
.polaroid:nth-child(4){ transform:rotate(5deg) translateY(-6px); }
.polaroid:hover{ transform:rotate(0) translateY(-14px) scale(1.06); z-index:5; box-shadow:0 30px 60px rgba(11,13,16,0.3); }
@media (max-width:700px){
  .polaroid-field{ display:flex; overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-left:20px; padding-right:20px; padding-bottom:22px; padding-top:14px; margin-left:-20px; margin-right:-20px; scrollbar-width:none; gap:16px; }
  .polaroid-field::-webkit-scrollbar{ display:none; }
  .polaroid{ flex:0 0 66vw; width:66vw; scroll-snap-align:center; }
}
@media (prefers-reduced-motion: reduce){ .polaroid, .polaroid:hover{ transform:none; } }

/* dark-band .em override: navy accent is invisible on the dark overlay.
   JAT bulb yellow #f6c318 on the dark overlay ~ 9.9:1. */
.sameday .section-title .em{ color: var(--orange); }

/* mobile header: cap the wide wordmark so the phone NUMBER never wraps/overlaps
   (portfolio rule: header shows the number, not "Call" - pool swaps the text) */
@media (max-width: 900px){
  .wordmark img{ max-width: 148px; height: auto; }
  .header-inner{ gap: 8px; }
  .header-phone{ white-space: nowrap; padding-left: 12px; padding-right: 12px; font-size: 14px; }
}

/* header chips never wrap (wide wordmark was squeezing the row) */
.header-phone, .header-quote{ white-space: nowrap; }

/* photo beside the enquiry form details */
.git-photo-fig{ margin-top: 26px; border-radius: var(--r); overflow: hidden; }
.git-photo-fig img{ width:100%; aspect-ratio: 1.3/1; object-fit: cover; display:block; }

/* ===== JAT: call card stands in for the GHL form until JAT's form is supplied ===== */
.call-card{ display:flex; flex-direction:column; gap:16px; }
.call-card .call-card-btn{ align-self:flex-start; font-size:17px; padding:18px 30px; }
.call-card-list{ display:grid; gap:10px; margin-top:6px; }
.call-card-list li{ display:flex; align-items:center; gap:10px; color: var(--ink); font-weight:500; }
.call-card-list .tick{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; background: var(--blue); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; }


/* ===== JAT: self-hosted reels in the video strip ===== */
.vid-card video{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width: 700px){
  .call-card .call-card-btn{ align-self:stretch; }
}

/* JAT: hero CTAs stay on one line at 375px (phone number is long) */
@media (max-width: 700px){
  .hero-cta-row{ gap: 10px; }
  .hero-cta-row .btn{ white-space: nowrap; padding: 15px 16px; font-size: 14px; }
}

/* ===== JAT: 4-step process band (playbook service-page order) ===== */
.steps-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin-top: 40px; text-align:left; }
.step-card{ background: var(--card); border:1px solid var(--border); border-radius: var(--r); padding: 26px 22px; }
.step-num{ width:40px; height:40px; border-radius:50%; background: var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom: 14px; }
.step-card h3{ font-size: 17px; margin-bottom: 8px; }
.step-card p{ font-size: 15px; }
@media (max-width: 900px){ .steps-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .steps-grid{ grid-template-columns: 1fr; } }

/* ===== JAT: hide tel links until the GHL pool swaps them (2.5s cap, see head script) ===== */
.tel-pending a[href^="tel:"]{ visibility: hidden; }

/* ===== JAT: visible TBC markers (unknown facts, playbook rule) ===== */
.tbc{ background:#fff3b0; color:#5a4500; border-radius:4px; padding:0 6px; font-weight:700; }

/* ===== JAT: per-photo crop anchors so no heads are cut (checked at 1280 and 375) ===== */
img[src$="jat-345.jpg"], img[src$="jat-375.jpg"], img[src$="jat-276.jpg"],
img[src$="jat-355.jpg"], img[src$="jat-360.jpg"]{ object-position: 50% 0%; }
img[src$="jat-369.jpg"]{ object-position: 15% 0%; }
img[src$="jat-288.jpg"]{ object-position: 72% 30%; }
.sameday[style*="jat-366"]{ background-position: center 22%; }

/* ===== JAT: "Prefer to talk?" cue - arrow points at the contact details (right on desktop, down when stacked) ===== */
.talk-cue{ display:inline-flex; align-items:center; gap:6px; color: var(--ink); font-weight:700; white-space:nowrap; }
.talk-arrow{ width:18px; height:18px; color: var(--blue-lift); animation: talk-nudge 1.8s ease-in-out infinite; }
@keyframes talk-nudge{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(4px); } }
@media (max-width: 1000px){
  .talk-arrow{ transform: rotate(90deg); animation-name: talk-nudge-down; }
  @keyframes talk-nudge-down{ 0%,100%{ transform: rotate(90deg) translateX(0); } 50%{ transform: rotate(90deg) translateX(4px); } }
}
@media (prefers-reduced-motion: reduce){ .talk-arrow{ animation:none; } }
.git-list .git-phone{ color: inherit; text-decoration: underline; text-decoration-color: rgba(26,95,208,0.35); text-underline-offset: 3px; }
.git-list .git-phone:hover{ color: var(--blue-lift); }

/* ===== JAT: interactive reels - "Tap for sound" badge; hidden once the visitor engages ===== */
.vid-card{ position:relative; cursor:pointer; }
.vid-sound{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px;
  background: rgba(11,13,16,0.72); color:#fff; border:1.5px solid rgba(255,255,255,0.4); border-radius:50px; padding:9px 16px;
  font-weight:700; font-size:13px; letter-spacing:0.02em; backdrop-filter: blur(6px); white-space:nowrap; transition: background .2s, transform .2s; }
.vid-sound svg{ width:18px; height:18px; }
.vid-sound:hover{ background: var(--blue); transform:translateX(-50%) translateY(-2px); }
.vid-card.is-engaged{ cursor:auto; }
.vid-card.is-engaged .vid-sound{ display:none; }

/* ===== JAT: reels - the one with sound pops, the others recede (grey, dim, smaller) but keep looping ===== */
.vid-card{ transition: transform .45s var(--ease), filter .45s, opacity .45s, box-shadow .45s; }
.vid-grid.has-engaged .vid-card:not(.is-engaged){ filter: grayscale(1) brightness(0.55); opacity: .6; transform: scale(.93); }
.vid-grid.has-engaged .vid-card.is-engaged{ transform: scale(1.04); z-index: 2;
  box-shadow: 0 0 0 3px var(--cyan), 0 22px 50px rgba(11,13,16,0.35); }
@media (prefers-reduced-motion: reduce){ .vid-card{ transition: none; } }

/* ===== JAT: sticky header after the hero - solid bar, CTAs emphasised ===== */
.site-header.is-stuck{ position: fixed; background: rgba(255,255,255,0.97); box-shadow: 0 6px 24px rgba(11,13,16,0.12);
  animation: header-drop .35s var(--ease); }
.site-header.is-stuck .header-inner{ padding-top: 10px; padding-bottom: 10px; }
.site-header.is-stuck .wordmark img{ height: 40px; }
.site-header.is-stuck .header-quote{ box-shadow: 0 0 0 3px rgba(246,195,24,0.35); }
.site-header.is-stuck .header-phone{ box-shadow: 0 0 0 3px rgba(26,95,208,0.25); }
@keyframes header-drop{ from{ transform: translateY(-100%); } to{ transform: translateY(0); } }
@media (max-width: 900px){
  .site-header.is-stuck{ animation: none; }               /* mobile header is always fixed - no drop-in */
  .site-header.is-stuck .header-inner{ padding-top: 12px; padding-bottom: 12px; }
  .site-header.is-stuck .wordmark img{ height: auto; }
}
@media (prefers-reduced-motion: reduce){ .site-header.is-stuck{ animation: none; } }

/* ===== JAT: Google reviews pop-up (bottom left - GHL chat owns bottom right) ===== */
.rv-pop{ position: fixed; left: 20px; bottom: 20px; z-index: 90; width: 300px; max-width: calc(100vw - 110px);
  display: flex; gap: 12px; align-items: flex-start; background: #fff; color: var(--ink); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 34px 14px 14px; box-shadow: 0 18px 44px rgba(11,13,16,0.22);
  transform: translateY(140%); opacity: 0; pointer-events: none; transition: transform .5s var(--ease), opacity .4s; }
.rv-pop.is-shown{ transform: translateY(0); opacity: 1; pointer-events: auto; }
.rv-pop-link{ display:flex; gap: 12px; align-items:flex-start; color: inherit; }
.rv-pop img{ width: 34px; height: 34px; flex: 0 0 auto; margin-top: 2px; }
.rv-pop-score{ font-weight: 800; font-size: 15px; line-height: 1.2; }
.rv-pop-score .stars{ color: var(--orange); letter-spacing: 1px; margin: 0 4px; }
.rv-pop-count{ color: var(--dim); font-weight: 600; font-size: 12.5px; }
.rv-pop-quote{ margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--dim); transition: opacity .35s; }
.rv-pop-quote b{ color: var(--ink); font-weight: 700; }
.rv-pop-quote.is-fading{ opacity: 0; }
.rv-pop-close{ position: absolute; top: 6px; right: 8px; width: 26px; height: 26px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--faint); }
.rv-pop-close:hover{ background: var(--bg-2); color: var(--ink); }
@media (max-width: 560px){
  .rv-pop{ left: 12px; bottom: 12px; padding: 10px 30px 10px 10px; gap: 10px; }
  .rv-pop img{ width: 28px; height: 28px; }
  .rv-pop-quote{ font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce){ .rv-pop, .rv-pop-quote{ transition: none; } }

/* ===== JAT: "Tap for sound" appears on hover - mouse devices only. Touch screens can't hover, so they keep it visible. ===== */
@media (hover: hover) and (pointer: fine){
  .vid-sound{ opacity: 0; transform: translateX(-50%) translateY(6px); transition: opacity .25s, transform .25s, background .2s; }
  .vid-card:hover .vid-sound, .vid-sound:focus-visible{ opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* CTA row under the reels */
.vid-ctas{ margin-top: 34px; }

/* ===================== JAT polish pass (1 Oct 2026) ===================== */

/* --- 1. Header: frosted glass that shows more of what's behind --- */
.site-header{ background: rgba(255,255,255,0.58); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid rgba(255,255,255,0.45); }
.site-header.is-stuck{ background: rgba(255,255,255,0.74); }
/* clickable nav items: underline grows in on hover/focus, colour shifts to brand navy */
.main-nav > a, .nav-drop-toggle{ position: relative; padding-top: 8px; padding-bottom: 8px; cursor: pointer; transition: color .2s; }
.main-nav > a::after, .nav-drop-toggle::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; border-radius:2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.main-nav > a:hover, .main-nav > a:focus-visible, .nav-drop:hover .nav-drop-toggle, .nav-drop:focus-within .nav-drop-toggle{ color: var(--blue); }
.main-nav > a:hover::after, .main-nav > a:focus-visible::after, .nav-drop:hover .nav-drop-toggle::after, .nav-drop:focus-within .nav-drop-toggle::after{ transform: scaleX(1); }
/* dropdown cue: chevron that flips when the menu opens */
.nav-drop-toggle{ display:inline-flex; align-items:center; gap:4px; }
.nav-chev{ width:14px; height:14px; transition: transform .25s var(--ease); }
.nav-drop:hover .nav-chev, .nav-drop:focus-within .nav-chev{ transform: rotate(180deg); }
.nav-menu a{ position:relative; }
.nav-menu a::before{ content:"\2192"; display:inline-block; width:0; overflow:hidden; opacity:0; transition: width .2s, opacity .2s, margin .2s; }
.nav-menu a:hover::before{ width:1.1em; opacity:1; margin-right:4px; }
@media (prefers-reduced-motion: reduce){ .main-nav > a::after, .nav-drop-toggle::after, .nav-chev{ transition:none; } }

/* --- 2. Hero trust bar: static frosted strip along the bottom of the hero (replaces the blue ticker) --- */
.hero{ flex-wrap: wrap; }
.hero-inner{ padding-bottom: 150px; }
.hero-trust{ position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:2; width:min(1140px, calc(100% - 40px));
  display:grid; grid-template-columns: repeat(5, 1fr); list-style:none;
  background: rgba(11,13,16,0.55); border: 1.5px solid rgba(255,255,255,0.22); border-radius: 18px;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35); overflow:hidden; }
.hero-trust li{ display:flex; align-items:center; gap:12px; padding:16px 18px; color:#fff; }
.hero-trust li + li{ border-left: 1px solid rgba(255,255,255,0.16); }
.hero-trust b{ display:block; font-size:14px; font-weight:800; line-height:1.25; text-transform:uppercase; letter-spacing:0.02em; }
.hero-trust small{ display:block; font-size:12.5px; color: rgba(255,255,255,0.72); font-weight:500; margin-top:2px; }
.ht-ic{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color: var(--cyan); background: rgba(60,194,245,0.14); box-shadow: inset 0 0 0 1.5px rgba(60,194,245,0.55), 0 0 18px rgba(60,194,245,0.35); }
.ht-ic svg{ width:21px; height:21px; }
@media (max-width: 1000px){
  .hero-inner{ padding-bottom: 28px; }
  .hero-trust{ position:relative; left:auto; bottom:auto; transform:none; width:calc(100% - 40px); margin: 0 20px 28px;
    grid-template-columns: 1fr 1fr; }
  .hero-trust li{ padding:12px 12px; gap:10px; border-left:0 !important; border-top: 1px solid rgba(255,255,255,0.14); }
  .hero-trust li:nth-child(-n+2){ border-top:0; }
  .hero-trust li:nth-child(even){ border-left: 1px solid rgba(255,255,255,0.14) !important; }
  .hero-trust li:last-child{ grid-column: 1 / -1; justify-content:center; }
  .hero-trust b{ font-size:12.5px; }
  .hero-trust small{ font-size:11.5px; }
  .ht-ic{ width:34px; height:34px; }
  .ht-ic svg{ width:18px; height:18px; }
}

/* --- 3. Reviews pop-up in the hero button's style: dark frosted glass, white border, white text --- */
.rv-pop{ background: rgba(11,13,16,0.78); color:#fff; border: 1.5px solid rgba(255,255,255,0.35); border-radius: 18px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 44px rgba(0,0,0,0.35); }
.rv-pop .rv-pop-score{ color:#fff; }
.rv-pop .rv-pop-count{ color: rgba(255,255,255,0.72); }
.rv-pop .rv-pop-quote{ color: rgba(255,255,255,0.86); }
.rv-pop .rv-pop-quote b{ color:#fff; }
.rv-pop img{ background:#fff; border-radius:50%; padding:5px; }
.rv-pop-close{ color: rgba(255,255,255,0.7); }
.rv-pop-close:hover{ background: rgba(255,255,255,0.14); color:#fff; }
.rv-pop:hover{ border-color: var(--cyan); }
/* hero reviews button: on small phones drop the label so "4.9 ★★★★★ 35 reviews" stays on one line */
@media (max-width: 560px){ .hero-grating .hg-label{ display:none; } }

/* ===== JAT hero proportions (1 Oct 2026) =====
   Hero = column: [header space] [content, centred] [trust bar]. Equal breathing room at every
   screen size; trust bar is in the flow (not pinned), aligned to the container's content width. */
.hero{ flex-direction: column; flex-wrap: nowrap; align-items: stretch;
  min-height: clamp(600px, 100vh, 920px); min-height: clamp(600px, 100svh, 920px); }
.hero-inner{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--hdr-h, 81px) + 36px); padding-bottom: 36px; }
.hero-lines .line{ font-size: clamp(30px, min(4.15vw, 7.2vh), 56px); }   /* longest line fits on one row; short screens scale down */
.hero-lines{ gap: 10px; }
.hero-cta-row{ margin-top: 30px; }
.hero-trust{ position: relative; left: auto; bottom: auto; transform: none; z-index: 2;
  width: min(1076px, calc(100% - 64px)); margin: 0 auto 32px; }
@media (max-width: 1000px){
  .hero{ min-height: 0; }
  .hero-inner{ padding-top: 44px; padding-bottom: 28px; }   /* header + pill strip already sit above the hero on phones */
  .hero-trust{ width: calc(100% - 40px); margin: 0 auto 24px; }
}
@media (max-width: 640px){
  .hero-inner{ padding-top: 36px; padding-bottom: 24px; }
  .hero-lines .line{ font-size: clamp(26px, 8vw, 34px); }
}
/* trust bar: compact between 1001-1200px so 5 columns don't cramp */
@media (min-width: 1001px) and (max-width: 1200px){
  .hero-trust li{ padding: 14px 12px; gap: 10px; }
  .hero-trust b{ font-size: 12.5px; letter-spacing: 0; }
  .hero-trust small{ font-size: 11.5px; }
  .ht-ic{ width: 34px; height: 34px; }
  .ht-ic svg{ width: 18px; height: 18px; }
}

/* ===== JAT: hero fills the whole screen (Edoardo, 1 Oct 2026) - no 920px cap =====
   Desktop: header overlays the hero, so hero = full viewport height.
   Phones: header + service pill strip sit above the hero, so hero = viewport minus both (measured by JS). */
.hero{ min-height: 100vh; min-height: 100svh; }
@media (max-width: 900px){
  .hero{ min-height: calc(100vh - var(--hdr-h, 78px) - var(--pills-h, 62px));
         min-height: calc(100svh - var(--hdr-h, 78px) - var(--pills-h, 62px)); }
}
/* 901-1000px: header still overlays the hero (pill strip only shows <=900), so keep desktop top spacing */
@media (min-width: 901px) and (max-width: 1000px){
  .hero-inner{ padding-top: calc(var(--hdr-h, 81px) + 36px); padding-bottom: 36px; }
}

/* ===== JAT: header CTA personalities (1 Oct 2026) =====
   Phone  = rings (existing) / hover: lifts, deep navy + glow, rapid buzz, faster pulse rings.
   Quote  = idle glint sweep, offset half a cycle from the phone ring / hover: lifts, warm glow, arrow slides in. */
.header-phone, .header-quote{ transition: transform .25s var(--ease), box-shadow .25s, background-color .25s, filter .25s; }

/* --- Get A Quote: idle glint --- */
.header-quote{ position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; }
.header-quote::before{ content:""; position:absolute; top:-10%; left:-70%; width:45%; height:120%; z-index:-1; pointer-events:none;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.85) 50%, transparent 100%); transform: skewX(-20deg);
  animation: quote-shine 5s ease-in-out 2.5s infinite; }
@keyframes quote-shine{ 0%{ left:-70%; } 14%{ left:130%; } 100%{ left:130%; } }
/* hover: lift + warm glow + arrow slides in */
.header-quote::after{ content:"\2192"; display:inline-block; width:0; margin-left:0; opacity:0; transform: translateX(-6px);
  transition: width .25s var(--ease), margin .25s var(--ease), opacity .2s, transform .25s var(--ease); }
.header-quote:hover, .header-quote:focus-visible{ transform: translateY(-2px); filter: brightness(1.05);
  box-shadow: 0 10px 26px rgba(246,195,24,0.55), 0 0 0 3px rgba(246,195,24,0.35); }
.header-quote:hover::after, .header-quote:focus-visible::after{ width:1em; margin-left:6px; opacity:1; transform: translateX(0); }

/* --- Phone: hover buzz (the idle ring + pulse already exist) --- */
.site-header a.header-phone:hover, .site-header a.header-phone:focus-visible{ background: var(--blue-lift);
  box-shadow: 0 10px 26px rgba(26,95,208,0.5), 0 0 0 3px rgba(26,95,208,0.25); animation: phone-buzz .5s ease-in-out infinite; }
.site-header a.header-phone:hover::after, .site-header a.header-phone:focus-visible::after{ animation-duration: 1.1s; }
@keyframes phone-buzz{
  0%, 100%{ transform: translateY(-2px) rotate(0); }
  20%{ transform: translateY(-2px) rotate(-3deg); }
  40%{ transform: translateY(-2px) rotate(3deg); }
  60%{ transform: translateY(-2px) rotate(-2deg); }
  80%{ transform: translateY(-2px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce){
  .header-quote::before{ animation: none; display: none; }
  .site-header a.header-phone:hover, .site-header a.header-phone:focus-visible{ animation: none; transform: none; }
  .header-quote:hover, .header-quote:focus-visible{ transform: none; }
  .header-quote::after{ transition: none; }
}
/* Get A Quote arrow WITHOUT changing the button's width (it was pushing the phone button 19px left):
   arrow is absolutely positioned; on hover the label slides left by swapping padding, total width constant. */
.header-quote{ transition: transform .25s var(--ease), box-shadow .25s, filter .25s, padding .25s var(--ease); }
.header-quote::after{ position:absolute; right:12px; top:50%; width:auto; margin:0; transform: translate(-6px, -50%); }
.header-quote:hover, .header-quote:focus-visible{ padding-left: 8px; padding-right: 24px; }
.header-quote:hover::after, .header-quote:focus-visible::after{ width:auto; margin:0; transform: translate(0, -50%); }
.header-quote::after{ right: 9px; }
.header-quote:hover, .header-quote:focus-visible{ padding-left: 4px; padding-right: 28px; }   /* 4+28 = 16+16: width unchanged */

/* ===== JAT: page CTA hovers match the header CTAs (mouse devices only - on touch a tap "sticks" :hover) =====
   Any button that dials  -> phone personality: deep navy, glow, buzz, pulse ring.
   Any button to the form -> quote personality: lift, glow, arrow slides in (width unchanged: 22+38 = 30+30). */
.btn[href^="tel:"], .btn[href="#enquire"]{ position: relative; }
@media (hover: hover) and (pointer: fine){
  .btn[href^="tel:"], .btn[href="#enquire"]{ transition: transform .25s var(--ease), box-shadow .25s, background-color .25s, border-color .25s, filter .25s, padding .25s var(--ease); }

  /* phone personality */
  .btn[href^="tel:"]::after{ content:""; position:absolute; inset:-3px; border-radius: inherit; pointer-events:none; opacity:0; }
  .btn[href^="tel:"]:hover, .btn[href^="tel:"]:focus-visible{ background: var(--blue-lift); filter:none;
    box-shadow: 0 12px 28px rgba(26,95,208,0.45), 0 0 0 3px rgba(26,95,208,0.22); animation: phone-buzz .5s ease-in-out infinite; }
  .btn[href^="tel:"]:hover::after, .btn[href^="tel:"]:focus-visible::after{ animation: phone-pulse 1.1s ease-out infinite; }

  /* quote personality */
  .btn[href="#enquire"]::after{ content:"\2192"; position:absolute; right:16px; top:50%; opacity:0; transform: translate(-6px, -50%);
    transition: opacity .2s, transform .25s var(--ease); pointer-events:none; }
  .btn[href="#enquire"]:hover, .btn[href="#enquire"]:focus-visible{ transform: translateY(-2px); padding-left: 22px; padding-right: 38px; }
  .btn[href="#enquire"]:hover::after, .btn[href="#enquire"]:focus-visible::after{ opacity:1; transform: translate(0, -50%); }
  .btn-orange[href="#enquire"]:hover, .btn-orange[href="#enquire"]:focus-visible{ filter: brightness(1.05);
    box-shadow: 0 12px 28px rgba(246,195,24,0.5), 0 0 0 3px rgba(246,195,24,0.3); }
  .btn-ghost[href="#enquire"]:hover, .btn-ghost[href="#enquire"]:focus-visible{ border-color: var(--blue); color: var(--blue-lift);
    box-shadow: 0 10px 24px rgba(26,95,208,0.18); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce){
  .btn[href^="tel:"]:hover, .btn[href^="tel:"]:focus-visible{ animation: none; }
  .btn[href^="tel:"]:hover::after{ animation: none; }
  .btn[href="#enquire"]:hover, .btn[href="#enquire"]:focus-visible{ transform: none; }
}

/* ===== JAT: hero headline is now the page's <h1> (SEO/accessibility). Neutralise default heading
   styles so it renders exactly as the old <div>: each .line keeps its own size/colour/weight. ===== */
h1.hero-lines{ font-size: inherit; font-weight: inherit; color: inherit; line-height: inherit;
  letter-spacing: normal; text-transform: none; margin: 0; }

/* ===== JAT: anchor jumps clear the sticky desktop header (was 24px; header sticks at ~66-81px) ===== */
@media (min-width: 901px){ section[id], div[id]{ scroll-margin-top: calc(var(--hdr-h, 81px) + 12px); } }

/* FAQ question = ONE flex item (a dyn-location span inside used to split it into 3 spaced pieces) */
.faq-item summary .faq-q{ flex: 1 1 auto; min-width: 0; }

/* ===== JAT: Areas We Service (pending verification) - region cards with suburb chips ===== */
.areas-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:16px; margin-top:38px; text-align:left; }
.area-card{ background: var(--card); border:1px solid var(--border); border-radius: var(--r); padding:22px 22px 20px; }
.area-card h3{ display:flex; align-items:center; gap:8px; font-size:16px; margin-bottom:14px; }
.area-card h3 svg{ width:18px; height:18px; color: var(--blue); flex:0 0 auto; }
.area-list{ display:flex; flex-wrap:wrap; gap:7px; }
.area-list li{ font-size:13.5px; font-weight:600; color: var(--ink); background: var(--bg-2); border:1px solid var(--border); border-radius:999px; padding:5px 11px; line-height:1.3; }
.area-list li.is-here{ background: var(--blue); border-color: var(--blue); color:#fff; box-shadow: 0 0 0 3px rgba(26,95,208,0.2); }
.areas-note{ margin-top:26px; font-weight:600; color: var(--ink); }
.areas-note a{ color: var(--blue-lift); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px){ .area-card{ padding:18px 16px; } .area-list li{ font-size:13px; padding:5px 10px; } }
.areas-grid{ align-items: start; }   /* cards only as tall as their suburbs (stretching left big empty blocks) */
/* masonry: cards stack in columns so short regions fill the space under each other (no ragged gaps) */
.areas-grid{ display:block; columns: 3 260px; column-gap:16px; }
.area-card{ display:inline-block; width:100%; break-inside: avoid; margin-bottom:16px; }
/* explicit 3-column layout for the region cards (replaces CSS columns, whose auto-balancing was uneven) */
.areas-grid{ columns: auto; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; align-items:start; }
.areas-col{ display:flex; flex-direction:column; gap:16px; }
.area-card{ display:block; margin-bottom:0; }
@media (max-width: 900px){ .areas-grid{ grid-template-columns: 1fr; } }
/* phone numbers inside running text (FAQ answers, steps) - tap-to-call links */
.tel-inline{ color: var(--blue-lift); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* videos: empty columns collapse, so 2 reels (service pages) centre like 3 do (was a fixed 3-column grid).
   Grid layout only - the phone swipe strip keeps flex-start (centring an overflowing strip hides its first card). */
@media (min-width: 701px){ .vid-grid{ grid-template-columns: repeat(auto-fit, minmax(0, 240px)); justify-content: center; } }

/* ===================== JAT mobile audit fixes (1 Oct 2026) ===================== */
/* 1. Header "Get A Quote" must stay hidden on phones (the CTA-personality rule set display:inline-flex
      after the original mobile display:none, pushing it 42px off-screen at 375px). */
@media (max-width: 640px){ .header-quote{ display: none !important; } }
/* 2. Tap targets >= 44px (Apple/Google guidance) */
@media (max-width: 900px){
  .header-phone{ min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .hero-grating{ min-height: 44px; }
  .mobile-svc-nav a{ min-height: 40px; display: flex; align-items: center; justify-content: center; }
  .footer li{ margin-bottom: 0; }
  .footer li a{ display: inline-block; padding-top: 11px; padding-bottom: 11px; }
  .git-list .git-phone{ display: inline-block; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -6px; }
}
/* 3. Nothing under 12px */
@media (max-width: 1000px){ .hero-trust small{ font-size: 12px; } }
@media (max-width: 640px){ .hero-grating .hg-count{ font-size: 12px; } }
/* 4. H1 lines balance instead of leaving one word alone ("...UNDER 60 / MINS" -> "ON-SITE IN / UNDER 60 MINS") */
.hero-lines .line{ text-wrap: balance; }
/* 5. Reviews pop-up on phones: one slim line (logo, score, stars, count) so it never covers buttons/content */
@media (max-width: 640px){
  .rv-pop{ width: auto; max-width: calc(100vw - 100px); padding: 8px 30px 8px 10px; border-radius: 999px; align-items: center; }
  .rv-pop-link{ align-items: center; gap: 8px; }
  .rv-pop-link > div{ display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
  .rv-pop img{ width: 24px; height: 24px; padding: 3px; margin-top: 0; }
  .rv-pop-score{ font-size: 14px; white-space: nowrap; }
  .rv-pop-score .stars{ margin: 0 2px; }
  .rv-pop-count{ font-size: 12px; white-space: nowrap; }
  .rv-pop-quote{ display: none; }
  .rv-pop-close{ top: 50%; transform: translateY(-50%); right: 4px; }
}
/* 6. Phones: trust cards icon-left / text-right (was icon-on-top, ~2 screens tall for 4 cards) */
@media (max-width: 640px){
  .feat-grid{ grid-template-columns: 1fr; gap: 12px; }
  .feat-card{ display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: start; text-align: left; padding: 18px 18px; }
  .feat-card .feat-ic{ grid-row: 1 / span 2; margin: 2px 0 0; }
  .feat-card h3{ margin: 0 0 4px; }
  .feat-card p{ margin: 0; }
}
/* 7. Phones: give the GHL form more width (card padding 30px -> 14px) */
@media (max-width: 640px){ .form-card{ padding-left: 14px; padding-right: 14px; } }
/* 8. Phones: step cards number-left / text-right (same compact pattern as the trust cards) */
@media (max-width: 560px){
  .steps-grid{ gap: 12px; }
  .step-card{ display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; padding: 18px; }
  .step-card .step-num{ grid-row: 1 / span 2; margin: 0; }
  .step-card h3{ margin: 6px 0 4px; }
}

/* ===== JAT form fit v2: hide GHL's fixed 20px outer section padding on both sides (the form's own
   padding stays as breathing room). Fields gain 40px; card no longer shows a "box inside a box". ===== */
.form-crop{ position: relative; }
iframe[id^="inline-"]{ width: calc(100% + 40px) !important; max-width: none; margin-left: -20px; }
/* areas v2 (winners only): cards are similar heights -> 3 on top, 2 centred below; stack on phones */
.areas-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.areas-col{ display: contents; }
.area-card{ flex: 0 1 calc((100% - 32px) / 3); min-width: 0; }
@media (max-width: 900px){ .area-card{ flex-basis: 100%; } }

/* ============ HERO REVIEWS BADGE: centred on phones; the arrow is its own link to Get In Touch ============ */
/* The badge (#reviews) and the arrow (#enquire) are sibling links. The arrow sits over the badge's right padding,
   so the pill looks like one piece, and it gets a full-height 44px tap area. */
.hero-grating{ padding-right: 44px; }
.hg-arrow{
  position: relative; z-index: 1; flex: none;
  width: 44px; margin-left: -44px; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-lift); font-weight: 700; font-size: 14px; text-decoration: none; border-radius: 0 50px 50px 0;
  transition: color .25s, transform .25s var(--ease);
}
.hg-arrow:focus-visible{ outline: 2px solid var(--cyan); outline-offset: -4px; }
@media (hover:hover) and (pointer:fine){
  /* Badge and arrow lift together whichever one the mouse is on. */
  .hero-grating:hover + .hg-arrow{ transform: translateY(-2px); }
  .hero-grating:has(+ .hg-arrow:hover){ border-color: var(--blue-lift); transform: translateY(-2px); }
  .hg-arrow:hover{ color: var(--cyan); transform: translateY(1px); }
}
@media (prefers-reduced-motion: reduce){ .hg-arrow, .hero-grating{ transition: none; } .hg-arrow:hover{ transform: none; } }
@media (max-width: 640px){ .hero-grating-row{ justify-content: center; } }