/* ══════════════════════════════════════════════════════
   HOLIDAY LIGHTING OF KENTUCKIANA, shared stylesheet
   Used by every service + city page (not the homepage,
   which inlines its own extended styles on top of this).

   Palette sampled from the brand logo: deep navy wordmark
   (#093468) with a string of six C9 bulbs. The navy becomes
   the ground, the bulbs become the accents, and the six of
   them rotate through card icons and step numbers so the
   logo's own idea carries through the whole site.

   Type: Playfair Display (display) + Inter (body)
   ══════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* ── GROUND ──
     Built around the logo wordmark's #093468. The page sits a few
     shades under it so the brand navy still reads as a raised
     surface rather than disappearing into the background. */
  --navy:#072448;--navy-mid:#0B3164;--navy-light:#10407E;--navy-deep:#04162C;

  /* ── PRIMARY ACCENT ──
     The logo's sky-blue bulb, opened up into a family. Used for
     section labels, links, icons, and hairlines, the quiet accent
     that carries structure without shouting. */
  --sky:#4FC8FF;--sky-light:#93DDFF;--sky-deep:#0090D6;
  --ice:#A8D9F5;--ice-glow:rgba(79,200,255,0.16);

  /* ── TEXT ──
     Cool whites rather than USL's warm cream, since this ground is
     a bluer navy and warm text reads slightly dingy against it. */
  --cream:#F4F8FC;--cream-dim:#B9CBE0;--white:#FFFFFF;--text-muted:#7C93AD;

  /* ── THE SIX BULBS ──
     Straight off the logo, with two adjustments for a dark ground:
     the red is pulled back from a pure #FA0201 (which vibrates against
     navy) and the purple is lifted from #6A308C (which reads nearly
     black at icon size). Everything else is the sampled value. */
  --bulb-red:#F0342D;--bulb-orange:#FF880B;--bulb-yellow:#F7EC25;
  --bulb-green:#39B34A;--bulb-blue:#00B3FD;--bulb-purple:#9155C4;
  /* Small body text on navy needs more lift than the icon red has. */
  --bulb-red-text:#FF7A72;

  /* Warm filament tones. The install photos are almost entirely warm white
     lights, so the top string and the section dividers use that rather than
     the full six-bulb spread — six saturated bands in a row read as a flag
     instead of a Christmas light string. */
  --warm-white:#F5E6CC;--warm-glow:#F3DCA8;--warm-amber:rgba(212,162,74,0.5);

  --success:#3DDC84;--line:rgba(79,200,255,0.20);

  /* Legacy aliases. Earlier markup on this site referenced a charcoal +
     Christmas-red palette (--red, --frost, --ink*). Every page has been
     rewritten, but keeping the names pointed at the new palette means a
     stray old class can't punch a hole in the design. */
  --red:var(--bulb-red);--red-light:var(--bulb-red-text);
  --frost:var(--sky-light);--gold:var(--sky);--gold-light:var(--sky-light);
  --ink:var(--navy);--ink-mid:var(--navy-mid);--ink-light:var(--navy-light);--ink-deep:var(--navy-deep);

  /* Header height, published so anchor scroll-margin and the hero's top
     padding stay in step with the bar instead of hard-coding 62px. */
  --nav-h:74px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{font-family:'Inter',sans-serif;background:var(--navy);color:var(--cream);line-height:1.6;overflow-x:hidden;}
a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:rgba(79,200,255,0.18);}
a,button,summary,[role=button]{touch-action:manipulation;}
img,video{max-width:100%;}
/* Keep #anchors clear of the fixed header, plus a little breathing room. */
section[id],[id]{scroll-margin-top:calc(var(--nav-h) + 22px);}

/* ── LIGHT STRING, top of page ──
   Classic C9 colours: red, warm white, green. An earlier version ran all
   six logo bulbs in sequence, but six saturated bands butted together
   scan as a rainbow flag rather than a string of Christmas lights, so the
   full spread stays on the card icons (where they sit apart, separated by
   text) and the continuous bands stick to the three that read Christmas
   on sight. Wider segments than before, so each colour is legible as a
   bulb rather than a pinstripe. */
body::before{
  content:'';position:fixed;top:0;left:0;right:0;height:4px;z-index:200;
  background:repeating-linear-gradient(90deg,
    var(--bulb-red) 0 22px,
    var(--warm-white) 22px 44px,
    var(--bulb-green) 44px 66px);
}

/* ── NAV ──
   A white ribbon carrying the full brand lockup, the page links, and a
   single navy phone CTA on the right. It replaced an all-navy bar with no
   links: the navy read as part of the hero photo rather than as a header,
   and with nowhere to go from it every visitor had to scroll to find
   anything. White separates the chrome from the photography underneath and
   gives the logo the light ground it was drawn for.

   Height is set on .nav-inner, not on nav, so the border and shadow always
   sit flush under the content. --nav-h is published on :root because the
   scroll-margin rules and the hero's top padding both key off it. */
nav{position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--white);
  border-bottom:1px solid rgba(7,36,72,0.10);
  box-shadow:0 1px 14px rgba(7,36,72,0.08);
  padding:0 24px;}
.nav-inner{max-width:1600px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;height:var(--nav-h);gap:20px;}

/* ── BRAND LOCKUP ──
   The logo file is a stacked lockup: tree over wordmark, 400x304. At header
   height the wordmark inside it would render about 11px tall and turn to
   mush, so the header rebuilds the lockup horizontally instead — the tree
   cropped out of the same file as an icon, the wordmark set as live text in
   the brand navy. One asset, no second export, and the wordmark stays sharp
   at every zoom level.

   The crop numbers are the tree's measured bounding box inside logo.png
   (x 118, y 26, 168x184). Dividing a px value by a unitless number keeps
   --mark-scale a length, so every derived dimension is one multiplication
   and the whole mark resizes by changing --mark-h alone. */
.nav-logo{display:flex;align-items:center;gap:11px;min-width:0;flex-shrink:0;}
.nav-logo-mark{
  --mark-h:42px;
  --mark-scale:calc(var(--mark-h) / 184);
  flex-shrink:0;
  width:calc(168 * var(--mark-scale));
  height:var(--mark-h);
  background-image:url(logo.png);
  background-repeat:no-repeat;
  background-size:calc(400 * var(--mark-scale)) calc(304 * var(--mark-scale));
  background-position:calc(-118 * var(--mark-scale)) calc(-26 * var(--mark-scale));
}
.nav-wordmark{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1;}
.nav-wordmark-main{font-family:'Inter',sans-serif;font-weight:800;
  font-size:clamp(0.95rem,1.5vw,1.22rem);letter-spacing:0.14em;
  color:var(--navy);white-space:nowrap;}
.nav-wordmark-sub{font-family:'Inter',sans-serif;font-weight:600;
  font-size:0.62rem;letter-spacing:0.2em;color:var(--navy-light);
  white-space:nowrap;align-self:center;}

/* ── LINKS ──
   Hidden below 1100px, where the lockup, six links and the phone CTA stop
   fitting on one line; the toggle below takes over there. */
.nav-menu{display:none;align-items:center;gap:26px;}
@media(min-width:1100px){.nav-menu{display:flex;}}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:5px;
  font-size:0.93rem;font-weight:600;color:var(--navy);white-space:nowrap;
  background:none;border:0;padding:0;font-family:inherit;cursor:pointer;
  transition:color 0.18s;}
.nav-link:hover,.nav-link:focus-visible{color:var(--sky-deep);}
/* The active page keeps a 2px rule under it. It is drawn on a pseudo-element
   rather than border-bottom so the link's own box height never shifts
   between the active and inactive states. */
.nav-link.is-active{color:var(--sky-deep);}
.nav-link.is-active::after{content:'';position:absolute;left:0;right:0;
  bottom:-9px;height:2px;background:var(--sky-deep);border-radius:2px;}
.nav-link .nav-caret{width:9px;height:9px;flex-shrink:0;transition:transform 0.18s;}

/* ── SERVICES SUBMENU ──
   Opens on hover for pointers and on focus for keyboards, so it is reachable
   by tab without any JavaScript. The 10px pad above the panel keeps the
   pointer inside the hover area while it crosses the gap from the link. */
.nav-has-sub{position:relative;}
.nav-sub{position:absolute;top:100%;left:-14px;min-width:262px;
  margin:0;padding:8px;list-style:none;
  background:var(--white);border:1px solid rgba(7,36,72,0.10);border-radius:10px;
  box-shadow:0 18px 40px rgba(7,36,72,0.16);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity 0.16s,transform 0.16s,visibility 0.16s;}
.nav-has-sub::after{content:'';position:absolute;top:100%;left:0;right:0;height:14px;}
.nav-has-sub:hover .nav-sub,
.nav-has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:translateY(0);}
.nav-has-sub:hover .nav-caret,
.nav-has-sub:focus-within .nav-caret{transform:rotate(180deg);}
.nav-sub a{display:block;padding:9px 12px;border-radius:7px;
  font-size:0.88rem;font-weight:500;color:var(--navy);transition:background 0.15s,color 0.15s;}
.nav-sub a:hover,.nav-sub a:focus-visible{background:rgba(79,200,255,0.12);color:var(--sky-deep);}

/* ── PHONE CTA ──
   Solid navy pill, the one filled control in the header. Rigid on purpose:
   if anything in the bar has to give up room it is the links, never this. */
.nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.nav-number{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  flex-shrink:0;color:var(--white);font-size:0.92rem;font-weight:700;
  white-space:nowrap;line-height:1;padding:14px 22px;border-radius:9px;
  background:var(--navy);border:0;text-decoration:none;
  box-shadow:0 4px 14px rgba(7,36,72,0.22);
  transition:background 0.2s,transform 0.12s,box-shadow 0.2s;}
.nav-number svg{width:15px;height:15px;flex-shrink:0;}
.nav-number:hover{background:var(--navy-mid);color:#fff;transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(7,36,72,0.3);}
/* Below 560px the full number no longer fits beside the lockup and the
   toggle, so the pill shrinks to the icon alone. It is never removed —
   tapping to call is the single most valuable action on a phone. */
@media(max-width:559px){
  .nav-number{padding:11px;border-radius:8px;}
  .nav-number .nav-number-text{display:none;}
}

/* ── MOBILE TOGGLE + DRAWER ── */
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 9px;background:none;border:0;cursor:pointer;
  border-radius:8px;transition:background 0.15s;}
.nav-toggle:hover{background:rgba(7,36,72,0.06);}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--navy);border-radius:2px;
  transition:transform 0.2s,opacity 0.2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(min-width:1100px){.nav-toggle{display:none;}}

/* The drawer is a separate element from .nav-menu rather than the same list
   restyled, because the desktop submenu's hover behaviour and the drawer's
   tap-to-expand behaviour fight each other on touch screens when they share
   a DOM node. Two small trees is less code than reconciling one. */
.nav-drawer{position:fixed;top:var(--nav-h);left:0;right:0;
  max-height:calc(100vh - var(--nav-h));overflow-y:auto;
  background:var(--white);border-bottom:1px solid rgba(7,36,72,0.12);
  box-shadow:0 18px 32px rgba(7,36,72,0.18);
  padding:10px 24px 22px;z-index:99;
  display:none;}
.nav-drawer.is-open{display:block;}
@media(min-width:1100px){.nav-drawer,.nav-drawer.is-open{display:none;}}
.nav-drawer ul{list-style:none;margin:0;padding:0;}
.nav-drawer > ul > li{border-bottom:1px solid rgba(7,36,72,0.08);}
.nav-drawer > ul > li:last-child{border-bottom:0;}
.nav-drawer a,.nav-drawer .nav-drawer-toggle{display:flex;align-items:center;
  justify-content:space-between;gap:8px;width:100%;
  padding:14px 2px;font-size:1rem;font-weight:600;color:var(--navy);
  background:none;border:0;font-family:inherit;text-align:left;cursor:pointer;}
.nav-drawer a.is-active{color:var(--sky-deep);}
.nav-drawer .nav-caret{width:11px;height:11px;transition:transform 0.18s;}
.nav-drawer .nav-drawer-toggle[aria-expanded="true"] .nav-caret{transform:rotate(180deg);}
.nav-drawer-sub{display:none;padding:0 0 10px 14px;}
.nav-drawer-sub.is-open{display:block;}
.nav-drawer-sub a{padding:10px 2px;font-size:0.92rem;font-weight:500;color:var(--navy-light);}

/* ── PAGE HERO ── */
.page-hero{min-height:480px;display:flex;align-items:center;padding:calc(var(--nav-h) + 54px) 20px 80px;
  position:relative;overflow:hidden;background:linear-gradient(160deg,#072448 0%,#0B3164 60%,#072448 100%);}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.28;z-index:0;}
.hero-img-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,36,72,0.88) 0%,rgba(7,36,72,0.6) 55%,rgba(7,36,72,0.35) 100%);z-index:0;}
.hero-content{position:relative;z-index:1;max-width:1100px;margin:0 auto;width:100%;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(79,200,255,0.12);
  border:1px solid rgba(79,200,255,0.35);color:var(--sky-light);font-size:0.75rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:20px;}
.eyebrow::before{content:'✦';font-size:0.6rem;color:var(--bulb-green);}
h1{font-family:'Playfair Display',serif;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.05;margin-bottom:20px;color:#fff;}
h1 .accent{color:var(--sky-light);}
h1 .accent2{color:var(--cream);}
.hero-sub{font-size:1.05rem;color:var(--cream-dim);max-width:560px;margin-bottom:36px;line-height:1.7;}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;}
/* Christmas red on navy: the one element on the page asking to be clicked. */
.btn-primary{background:var(--bulb-red);color:#fff;padding:16px 28px;border-radius:8px;font-weight:700;font-size:1rem;display:inline-flex;align-items:center;gap:8px;transition:all 0.2s;border:none;cursor:pointer;}
.btn-primary:hover{background:#FF4B43;transform:translateY(-2px);box-shadow:0 8px 24px rgba(240,52,45,0.4);}
.btn-secondary{border:2px solid rgba(244,248,252,0.4);color:var(--cream);padding:14px 28px;border-radius:8px;font-weight:600;font-size:1rem;display:inline-flex;align-items:center;gap:8px;transition:all 0.2s;background:transparent;cursor:pointer;}
.btn-secondary:hover{border-color:var(--cream);color:var(--white);transform:translateY(-2px);}

/* ── CONTENT ── */
.content-section{padding:80px 20px;max-width:1100px;margin:0 auto;}
.two-col{display:grid;gap:48px;align-items:start;}
@media(min-width:768px){.two-col{grid-template-columns:1fr 1fr;}}
.section-label{font-size:0.75rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--sky);margin-bottom:12px;}
h2{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;margin-bottom:16px;line-height:1.1;}
h2 .accent{color:var(--sky-light);}
h2 .accent2{color:var(--cream);}
p{color:var(--cream-dim);line-height:1.75;margin-bottom:16px;font-size:0.95rem;}
.feature-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin:20px 0;}
.feature-list li{position:relative;padding-left:26px;color:var(--cream-dim);font-size:0.95rem;line-height:1.6;}
.feature-list li::before{content:'✦';color:var(--ice);position:absolute;left:0;top:1px;}
.side-photo{width:100%;height:auto;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.45);border:1px solid rgba(79,200,255,0.2);}

/* Hero-embedded photo (merged header + overview on service and city pages):
   a fixed-height frame close to the text column's natural height, so the
   photo and the text+buttons block end near the same point instead of one
   trailing far below the other. object-fit:cover fills the frame edge to
   edge, cropping as needed. */
.page-hero .two-col{align-items:center;}
.page-hero .side-photo{width:100%;max-width:100%;height:480px;object-fit:cover;margin:0;}
@media(max-width:900px){.page-hero .side-photo{height:400px;}}
@media(max-width:600px){.page-hero .side-photo{height:320px;}}
/* Portrait photos that need their full length with zero cropping: skip the
   fixed-height cover frame and render at natural aspect ratio. */
.page-hero .side-photo.natural{height:auto;object-fit:initial;background:none;}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin-top:40px;}
/* Fixed 3x2 grid for the six-card "What We Do" list (homepage, every city
   page, quote and referral pages), so it reads the same everywhere. */
.what-we-do-grid{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.what-we-do-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.what-we-do-grid{grid-template-columns:1fr;}}
.card{background:var(--navy-mid);border:1px solid rgba(255,255,255,0.16);border-radius:12px;padding:24px;transition:border-color 0.2s,transform 0.2s;}
a.card{display:block;}
.card:hover{border-color:rgba(255,255,255,0.5);transform:translateY(-3px);}
.card-icon{font-size:1.8rem;margin-bottom:12px;color:var(--sky-light);}
.card-icon svg{width:30px;height:30px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* ── THE BULB ROTATION ──
   The logo is a string of six differently-coloured bulbs, so the six
   service icons take those six colours in order rather than all sitting
   in one accent. Card seven onwards restarts the string. Using
   currentColor on the svg above means one declaration colours both the
   emoji-style and inline-SVG icons. */
.card-grid .card:nth-child(6n+1) .card-icon{color:var(--bulb-red);}
.card-grid .card:nth-child(6n+2) .card-icon{color:var(--bulb-orange);}
.card-grid .card:nth-child(6n+3) .card-icon{color:var(--bulb-yellow);}
.card-grid .card:nth-child(6n+4) .card-icon{color:var(--bulb-green);}
.card-grid .card:nth-child(6n+5) .card-icon{color:var(--bulb-blue);}
.card-grid .card:nth-child(6n+6) .card-icon{color:var(--bulb-purple);}

.section-lead{font-size:1.05rem;max-width:680px;color:var(--cream-dim);}
.card h3{font-family:'Playfair Display',serif;font-size:1.1rem;color:#fff;margin-bottom:8px;}
.card p{font-size:0.875rem;margin:0;}
.divider{border:none;border-top:1px solid rgba(79,200,255,0.12);margin:60px 0;}

/* ── FESTIVE DIVIDER ──
   Seam between sections, shared by the homepage and every subpage. A warm
   white filament fading out at both ends — a lit strand seen out of focus.
   This used to be the six bulb colours washed together, which had the same
   rainbow problem as the top stripe and, being a single continuous line,
   read as a flag even more strongly. */
.festive-divider{
  height:2px;
  background:linear-gradient(90deg,transparent 0%,
    var(--warm-amber) 18%,var(--warm-glow) 50%,var(--warm-amber) 82%,
    transparent 100%);
  box-shadow:0 0 14px 1px rgba(243,220,168,0.25);
}

.areas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:24px;}
.area-chip{background:var(--navy-light);border:1px solid rgba(79,200,255,0.14);border-radius:6px;padding:10px 14px;font-size:0.82rem;color:var(--cream-dim);text-align:center;text-decoration:none;transition:all 0.2s;display:block;}
.area-chip:hover{background:rgba(79,200,255,0.14);border-color:var(--sky);color:var(--sky-light);transform:translateY(-2px);}

/* ── LOCAL DETAIL (city pages) ──
   A neighbourhood price band and city-specific FAQs. Rendered as plain
   headings and paragraphs rather than an accordion: the homepage's accordion
   JS is inline there and not shared with these pages, and content that is
   visible at rest is better both for crawlers and for someone skimming the
   page for a number. */
.price-band{background:var(--navy-mid);border:1px solid rgba(79,200,255,0.22);
  border-left:3px solid var(--bulb-red);border-radius:0 10px 10px 0;
  padding:22px 26px;margin:28px 0 0;}
.price-band .price-label{display:block;font-size:0.7rem;font-weight:800;
  letter-spacing:3px;text-transform:uppercase;color:var(--bulb-red-text);margin-bottom:10px;}
.price-band p{margin:0;color:var(--cream);font-size:0.98rem;line-height:1.75;}
.price-band strong{color:#fff;font-weight:700;}
.local-faq{margin-top:26px;display:grid;gap:22px;max-width:780px;}
.local-faq h3{font-family:'Inter',sans-serif;font-size:1rem;font-weight:600;
  color:var(--white);margin-bottom:6px;line-height:1.4;}
.local-faq p{margin:0;font-size:0.92rem;}
@media(max-width:479px){.price-band{padding:18px 18px;}}

/* ── CTA BAND ── */
.cta-band{background:linear-gradient(135deg,var(--navy) 0%,#04162C 100%);border-top:1px solid rgba(79,200,255,0.18);border-bottom:1px solid rgba(79,200,255,0.18);padding:80px 20px;text-align:center;}
.cta-band h1,.cta-band h2{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;margin-bottom:16px;}
.cta-band h1 span,.cta-band h2 span{color:var(--sky-light);}
.cta-band p{color:var(--cream-dim);margin-bottom:36px;max-width:500px;margin-left:auto;margin-right:auto;}
.cta-btns{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;}

/* The Jobber work-request embed injects an iframe (via Jobber's own script)
   inside a wrapper div Jobber caps at 760px. Without a width rule of our own
   the outer .cta-online-booking div is left at the full container width, so
   the visible form sits awkwardly narrow inside a much wider box. Capping
   the wrapper to 650px fixes both ends: desktop gets a properly sized,
   centred form, and phones get one that fills the viewport exactly since
   650px never comes into play below that.

   No overflow-x:hidden here on purpose. Per the CSS overflow spec, setting
   overflow-x to anything but "visible" forces the other axis to compute as
   "auto" even when explicitly declared "visible" — so overflow-y:visible
   plus overflow-x:hidden silently becomes overflow-y:auto. That matters
   here because Jobber's script keeps the iframe's inline height in sync
   with its content as you move through the form's steps, and a lagging
   resize could leave content momentarily taller than the wrapper's
   last-known height, which overflow-y:auto would render as a floating
   scrollbar. Leaving overflow unset lets the wrapper simply grow to
   whatever height Jobber sets, with nothing to clip. */
.cta-online-booking{width:100%;max-width:650px;margin:0 auto;}
.cta-online-booking iframe{width:100% !important;max-width:100% !important;border:0;display:block;}

/* ── JOBBER IFRAME HEIGHT FLOOR ──
   Jobber's embed snippet gives the iframe no height of its own. It waits for
   the form inside to postMessage its content height, then writes that value
   onto the iframe and its wrapper as an inline style. That handshake is
   currently broken on Jobber's end: the form posts exactly one message,
   "40px", within about three seconds of load and never posts again, even
   though the form itself finishes rendering at roughly 830px. The result is
   a 40px-tall white sliver where the quote form should be, which reads as
   "the form never loaded" — it did load, it is just clipped to nothing.

   min-height is the fix because it beats an inline height in the cascade:
   Jobber can keep writing height:40px and the box still stands up. If and
   when Jobber's postMessage starts reporting real heights again, any value
   above the floor applies normally and this rule quietly stops mattering.

   The floor is set a little above the measured first-step height (784px at
   desktop width, 831px at 390px wide) so nothing is cut off. It goes on the
   iframe AND on .jobber-inline-work-request, the div Jobber's script claims
   as the mount point, because the script writes the bad height onto both
   (iframe.style.height and iframe.parentElement.style.height). */
.cta-online-booking,
.cta-online-booking .jobber-inline-work-request,
.cta-online-booking iframe.jobber-work-request{min-height:900px;}
@media(max-width:640px){
  .cta-online-booking,
  .cta-online-booking .jobber-inline-work-request,
  .cta-online-booking iframe.jobber-work-request{min-height:960px;}
}

/* Jobber adds .jobber-spinner to the wrapper while the form is fetching and
   removes it on load. Their spinner is absolutely positioned, so on a wrapper
   with no height of its own it had nothing to sit in and never showed. With
   the floor above it now has room, and the three-to-four second wait for
   Jobber's bundle reads as loading rather than as a blank panel. */
.cta-online-booking .jobber-spinner{position:relative;background:rgba(244,248,252,0.06);border-radius:8px;}

/* ── FOOTER ── */
footer{background:var(--navy-deep);border-top:1px solid rgba(79,200,255,0.1);padding:40px 20px 24px;}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start;}
.footer-brand{font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:6px;}
.footer-brand .greatertulsa{color:var(--sky-light);font-weight:900;}
.footer-links{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.footer-links a{font-size:0.82rem;color:var(--text-muted);transition:color 0.2s;}
.footer-links a:hover{color:var(--ice);}
.footer-copy{width:100%;font-size:0.78rem;color:var(--text-muted);border-top:1px solid rgba(79,200,255,0.08);padding-top:20px;margin-top:20px;}
.footer-social{display:flex;gap:12px;align-items:center;}
.footer-social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;transition:all 0.2s ease;flex-shrink:0;}
/* Real platform colours, each with its own white glyph, so they read
   correctly against the navy rather than as generic grey circles. */
.footer-social a.social-ig{background:linear-gradient(45deg,#FFDC80,#F56040,#E1306C,#C13584,#833AB4);color:#fff;}
.footer-social a.social-fb{background:#1877F2;color:#fff;}
.footer-social a:hover{transform:scale(1.08);filter:brightness(1.12);box-shadow:0 0 0 6px var(--ice-glow);}
.footer-social svg{width:20px;height:20px;}
/* Contact block: right-aligned column next to the brand blurb on desktop.
   Classes rather than inline styles so the phone breakpoint below can flip
   alignment and tighten spacing without !important. */
.footer-contact{text-align:right;}
.footer-contact-heading{font-size:0.8rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ice);margin-bottom:16px;}
.footer-contact-list{list-style:none;display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
.footer-contact-list a{font-size:0.875rem;color:var(--text-muted);}
.footer-contact-list a:hover{color:var(--ice);}
@media(max-width:600px){
  .footer-contact{text-align:left;margin-top:10px;}
  .footer-contact-list{align-items:flex-start;gap:5px;}
}

/* ══════════════════════════════════════════
   MOBILE + TOUCH
   ══════════════════════════════════════════ */

/* ── TOUCH DEVICES ──
   Hover styles latch on touch (a tapped chip stays lit until you tap
   away) and the lift transforms cause a visible jitter. Reset them and
   raise every interactive element to a 44px tap target. */
@media (hover:none),(pointer:coarse){
  .btn-primary:hover{background:var(--bulb-red);transform:none;box-shadow:none;}
  .btn-secondary:hover{border-color:rgba(244,248,252,0.4);color:var(--cream);transform:none;}
  .card:hover{border-color:rgba(255,255,255,0.16);transform:none;}
  .area-chip:hover{background:var(--navy-light);border-color:rgba(79,200,255,0.14);color:var(--cream-dim);transform:none;}
  .footer-links a:hover{color:var(--text-muted);}
  .footer-links a{display:inline-flex;align-items:center;min-height:40px;}
  .sticky-quote:hover{background:var(--bulb-red);transform:none;box-shadow:0 4px 20px rgba(240,52,45,0.45);}
  .btn-primary:active,.btn-secondary:active,.area-chip:active,.sticky-quote:active{opacity:0.75;}
  .btn-primary,.btn-secondary,.sticky-quote{min-height:44px;}
  .area-chip{min-height:44px;display:flex;align-items:center;justify-content:center;}
  .feature-list li{padding-top:2px;padding-bottom:2px;}
}

/* ── TABLET (iPad portrait + landscape) ── */
@media(min-width:600px) and (max-width:1024px){
  .page-hero{padding:112px 32px 72px;}
  .content-section{padding:72px 32px;}
  .two-col{gap:40px;}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:18px;}
  .areas-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
  .cta-band{padding:72px 32px;}
}
/* iPad portrait: one column reads better than two cramped ones */
@media(min-width:600px) and (max-width:820px){
  .two-col{grid-template-columns:1fr;}
  .side-photo{max-height:420px;width:auto;max-width:100%;display:block;margin:0 auto;}
}

/* ── PHONES ── */
@media(max-width:600px){
  .two-col{gap:32px;}
  .card-grid{gap:16px;}
  .hero-sub{font-size:1rem;margin-bottom:28px;}
  .feature-list{gap:12px;}
}
@media(max-width:479px){
  /* Override --nav-h rather than .nav-inner's height directly: the drawer's
     top offset, the anchor scroll-margin and the hero padding all read that
     variable, so setting the height alone here left the drawer floating
     20px below the bar. */
  :root{--nav-h:62px;}
  .nav-inner{gap:8px;}
  .nav-logo{gap:8px;}
  .nav-logo-mark{--mark-h:34px;}
  .nav-wordmark-main{font-size:0.88rem;letter-spacing:0.1em;}
  .nav-wordmark-sub{font-size:0.55rem;letter-spacing:0.16em;}
  .nav-right{gap:8px;}
  .nav-drawer{padding:8px 18px 20px;}
  .page-hero{min-height:400px;padding:calc(var(--nav-h) + 38px) 18px 56px;}
  .content-section{padding:56px 18px;}
  .btn-primary,.btn-secondary{width:100%;justify-content:center;}
  .hero-btns{gap:10px;}
  .card{padding:20px;}
  .areas-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;}
  .cta-band{padding:56px 18px;}
  h1{font-size:clamp(2.1rem,9vw,2.9rem);}
  .footer-inner{gap:20px;}
}
/* Very small phones (iPhone SE / 320-360px): stop the nav overflowing */
@media(max-width:344px){
  :root{--nav-h:58px;}
  .nav-logo-mark{--mark-h:30px;}
  .nav-wordmark-main{font-size:0.76rem;letter-spacing:0.08em;}
  .nav-wordmark-sub{font-size:0.5rem;}
  .nav-right{gap:6px;}
  .content-section{padding:48px 16px;}
}

/* Phone landscape */
@media(max-height:500px) and (orientation:landscape){
  .page-hero{min-height:0;padding:calc(var(--nav-h) + 26px) 20px 48px;}
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:0.001ms !important;animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;scroll-behavior:auto !important;
  }
}

/* ── STICKY QUOTE ──
   Same Christmas red as the primary buttons, but it earns its attention
   from position rather than colour: it floats over everything else. A slow
   pulse on the glow adds a second, motion-based cue; it pauses on hover
   and, like every other animation here, is killed by the reduced-motion
   rule above. */
.sticky-quote{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));right:calc(20px + env(safe-area-inset-right));z-index:99;background:var(--bulb-red);color:#fff;
  padding:14px 22px;border-radius:50px;font-weight:700;font-size:0.9rem;text-decoration:none;
  box-shadow:0 4px 20px rgba(240,52,45,0.45);transition:background 0.2s,transform 0.2s,box-shadow 0.2s;opacity:0;pointer-events:none;}
.sticky-quote.visible{opacity:1;pointer-events:auto;animation:stickyPulse 2.6s ease-in-out infinite;}
.sticky-quote:hover{background:#FF4B43;transform:translateY(-2px);box-shadow:0 8px 28px rgba(240,52,45,0.6);animation-play-state:paused;}

@keyframes stickyPulse{
  0%,100%{box-shadow:0 4px 20px rgba(240,52,45,0.45);}
  50%{box-shadow:0 4px 30px rgba(240,52,45,0.85);}
}

@media(max-width:479px){
  .sticky-quote{bottom:calc(16px + env(safe-area-inset-bottom));right:calc(16px + env(safe-area-inset-right));padding:13px 18px;font-size:0.85rem;}
}