/* ============ JEREMY'S PLUMBING V2 - "At Your Service" replica ============
   Faithful structural replica of atyourserviceplumbing.com.au with Jeremy's
   brand: charcoal #1b1b1b page (kept from reference), Jeremy blue #0b85fb
   replacing the reference teal, orange #f69331 secondary, Outfit for their
   Apercu/Averta. Bold uppercase display headings, 10px radii, boxed sections.
   AA on #1b1b1b: #fff 15.4:1, dim #b8bec6 9.1:1, blue #4da3ff 6.0:1,
   orange #f69331 7.0:1. Buttons: white labels on #0b85fb 3.7:1 (large/bold),
   ink labels on orange 7.2:1. */
:root{
  --bg: #1b1b1b;
  --bg-2: #232323;
  --card: #272727;
  --ink: #ffffff;
  --dim: #b8bec6;
  --faint: #8a9199;
  --blue: #0b85fb;
  --blue-lift: #4da3ff;      /* blue as text on dark */
  --orange: #f69331;
  --border: rgba(255,255,255,0.12);
  --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: #171310; }
.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(27,27,27,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.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: 42px; width:auto; }
.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); }
.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(20,20,20,0.55) 0%, rgba(20,20,20,0.35) 55%, rgba(27,27,27,0.92) 100%); }
.hero-inner{ position:relative; z-index:1; width:100%; padding: 140px 0 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: var(--ink); line-height: 1.05;
}
.hero-lines .line .em{ color: var(--blue-lift); 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(27,27,27,0.55); border: 1.5px solid var(--border); border-radius: 50px;
  padding: 9px 18px; font-weight: 700; font-size: 14px; color: var(--ink);
  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: var(--dim); 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: 1.15/1; }

/* ============ 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; }
.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(11,133,251,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(0,0,0,0.35);
}
.rv-card::after{
  content:""; position:absolute; top: 22px; right: 20px; width: 22px; height: 22px;
  background: url("https://d9hhrg4mnvzow.cloudfront.net/fraserelectrical.localchoice.com.au/e794a707-google-lens-icon-logo-symbol-free-png.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; }
.sameday-bg{ position:absolute; inset:0; }
.sameday-bg img{ width:100%; height:100%; object-fit:cover; }
.sameday-bg::after{ 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; }

/* ============ FORM / GET IN TOUCH ============ */
.book-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items:start; }
.form-card{
  background: #232323; border: 1px solid var(--border);
  border-radius: var(--r); padding: 30px 30px 34px; color: var(--ink);
  position: relative; overflow: hidden;
}
.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; height: 745px; border-radius: 8px; }
iframe[id^="inline-RSh9FVkdrkftDAw1kvXI"]{ height: 860px !important; margin-top: -40px; width:100%; border:0; display:block; }
.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: #141414; padding: 60px 0 36px; border-top: 1px solid var(--border); }
.footer-grid{ display:flex; justify-content:space-between; gap: 44px; flex-wrap:wrap; }
.footer .f-logo{ height: 40px; 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:hover{ color: var(--ink); }
.footer-bottom{ border-top: 1px solid var(--border); 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{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 190px; }
}
@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: 120px 20px 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; }
  .gal-grid{ grid-auto-rows: 150px; gap: 10px; }
  .vid-grid{ grid-template-columns: 1fr 1fr; }
  .rv-card{ width: 300px; }
}