/* ══════════════════════════════════════════════════════
   UGLY SWEATER HOLIDAY LIGHTING, shared stylesheet
   Used by every service + city page (not the homepage,
   which inlines its own extended styles).
   Palette (from brand logo): deep navy + sweater blue + cream
   Type: Playfair Display (display) + Inter (body)
   ══════════════════════════════════════════════════════ */

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

:root{
  /* brand colors sampled from the USL logo */
  --navy:#09223D;--navy-mid:#0E2C4E;--navy-light:#173A63;
  --blue:#7FAED6;--blue-light:#A9CBE8;--blue-deep:#5E8FBC;
  --cream:#F9F1EC;--cream-dim:#BCCEDF;--white:#FFFFFF;--text-muted:#7590AC;
  --ice:#A8D4EE;--ice-glow:rgba(168,212,238,0.14);
  --success:#3DDC84;--line:rgba(127,174,214,0.20);
  /* legacy aliases, older markup still references these names */
  --gold:var(--blue);--gold-light:var(--blue-light);
  --red:var(--blue-deep);--red-light:var(--cream);
  /* true holiday accents, used sparingly: a couple of icons and the
     section-divider ornament, never the primary brand palette */
  --holly-red:#B23A32;--holly-green:#2F6B4F;
  /* brighter red for small body text on dark backgrounds, the muted
     --holly-red above is too low-contrast to read comfortably as text */
  --holly-red-text:#FF7A6E;
}

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(127,174,214,0.18);}
a,button,summary,[role=button]{touch-action:manipulation;}
img,video{max-width:100%;}
/* fixed nav is 64px (58px on small phones): keep #anchors clear of it */
section[id],[id]{scroll-margin-top:84px;}
@media(max-width:479px){section[id],[id]{scroll-margin-top:74px;}}

/* Sweater stripe, top of page */
body::before{
  content:'';position:fixed;top:0;left:0;right:0;height:4px;z-index:200;
  background:repeating-linear-gradient(90deg,#ADD8E6 0px,#ADD8E6 20px,#FFFFFF 20px,#FFFFFF 40px);
}

/* ── NAV ──
   Light blue + white scheme, kept deliberately quiet: the toggle moved out
   to the Work section, the icon is gone, and the bar is a thin translucent
   rule rather than a solid block. Type is navy on the light surface because
   white on #ADD8E6 measures 1.7:1 and is unreadable. */
:root{ --nav-blue:#ADD8E6; }
/* Dark navy ribbon, brand's primary color. Light text/chips for
   contrast, cream CTA button so it still pops against the dark bar. */
nav{position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--navy);overflow:hidden;
  border-bottom:1px solid rgba(127,174,214,0.25);padding:0 20px;}
.nav-inner{max-width:1600px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:62px;gap:16px;padding-top:3px;}
.nav-logo{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;flex-shrink:1;flex-grow:1;}
.nav-logo-img{height:34px;width:auto;flex-shrink:0;}
/* the tagline is the brand lockup now, styled like the footer wordmark.
   overflow/ellipsis here (not just on the parent) so if it ever runs out
   of room the text truncates cleanly instead of spilling into the CTA.
   No more nav-cta competing for space, so it can run bigger. */
.nav-tagline{font-family:'Inter',sans-serif;font-size:1.05rem;font-weight:700;
  color:var(--cream);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
  overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;}
.nav-tagline .ugly{color:var(--blue-light);font-weight:900;}
@media(min-width:700px){.nav-tagline{font-size:1.3rem;}}
/* rigid: the phone chip must never be the thing that shrinks or clips */
.nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.nav-number{display:none;align-items:center;justify-content:center;gap:7px;flex-shrink:0;
  color:var(--cream);font-size:0.85rem;font-weight:700;white-space:nowrap;line-height:1;
  padding:10px 18px;border-radius:6px;border:2px solid rgba(249,241,236,0.65);background:rgba(255,255,255,0.14);
  text-decoration:none;transition:background 0.2s,border-color 0.2s,transform 0.1s;}
.nav-number::before{content:'☎';font-size:0.8rem;line-height:1;position:relative;top:-0.5px;}
.nav-number:hover{background:rgba(255,255,255,0.24);border-color:var(--cream);color:#fff;transform:translateY(-1px);}
@media(min-width:700px){.nav-number{display:inline-flex;}}

/* ── PAGE HERO ── */
.page-hero{min-height:480px;display:flex;align-items:center;padding:120px 20px 80px;
  position:relative;overflow:hidden;background:linear-gradient(160deg,#09223D 0%,#0E2C4E 60%,#09223D 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(9,34,61,0.88) 0%,rgba(9,34,61,0.6) 55%,rgba(9,34,61,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(127,174,214,0.12);
  border:1px solid rgba(127,174,214,0.35);color:var(--blue-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(--holly-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(--blue-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;}
.btn-primary{background:var(--blue);color:var(--navy);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:var(--blue-light);transform:translateY(-2px);box-shadow:0 8px 24px rgba(127,174,214,0.35);}
.btn-secondary{border:2px solid rgba(249,241,236,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(--blue);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(--blue-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(127,174,214,0.2);}

/* Hero-embedded photo (merged header + overview sections on service 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 hero photos (palm tree trunks, entryway wreaths) that need to
   show their full length with zero cropping: skip the fixed-height cover
   frame entirely and let the photo render at its 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" service list (homepage and
   every city page), matching the homepage layout exactly. */
.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(--blue-light);}
.card-icon svg{width:30px;height:30px;stroke:var(--blue-light);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
/* Generic 4-card service-page grids (Décor Options, Who We Work With,
   etc.): simple alternating red/green icons. */
.card-grid .card:nth-child(odd) .card-icon{color:var(--holly-red);}
.card-grid .card:nth-child(odd) .card-icon svg{stroke:var(--holly-red);}
.card-grid .card:nth-child(even) .card-icon{color:var(--holly-green);}
.card-grid .card:nth-child(even) .card-icon svg{stroke:var(--holly-green);}
/* The six-card "What We Do" grid (homepage + every city page) instead
   picks out three specific services in red: Residential Roofline,
   Wreaths & Garland, and Permanent LED, positions 1/3/5. The rest stay
   the default brand blue. Higher specificity than the rule above, so
   this wins for any card-grid that also carries this class. */
.what-we-do-grid .card:nth-child(odd) .card-icon{color:var(--holly-red);}
.what-we-do-grid .card:nth-child(odd) .card-icon svg{stroke:var(--holly-red);}
.what-we-do-grid .card:nth-child(even) .card-icon{color:var(--holly-green);}
.what-we-do-grid .card:nth-child(even) .card-icon svg{stroke:var(--holly-green);}
.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(127,174,214,0.12);margin:60px 0;}
/* ── FESTIVE DIVIDER ──
   Soft glowing seam between sections (shared by the homepage and every
   subpage), plain blue glow, no ornament. */
.festive-divider{
  height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--blue) 15%,var(--blue-light) 50%,var(--blue) 85%,transparent 100%);
  box-shadow:0 0 16px 1px rgba(127,174,214,0.45);
}
.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(127,174,214,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(127,174,214,0.14);border-color:var(--blue);color:var(--blue-light);transform:translateY(-2px);}

/* ── CTA BAND ── */
.cta-band{background:linear-gradient(135deg,var(--navy) 0%,#061627 100%);border-top:1px solid rgba(127,174,214,0.18);border-bottom:1px solid rgba(127,174,214,0.18);padding:80px 20px;text-align:center;}
.cta-band h2{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;margin-bottom:16px;}
.cta-band h2 span{color:var(--blue-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 was left at the
   full .container width (~1185px on desktop), so the visible form sat
   awkwardly narrow inside a much wider box. Capping the wrapper itself
   to 650px fixes that: desktop gets a properly sized, centered form
   instead of a narrow island in a wide box, and phones get a form that
   fills the viewport width exactly since 650px never comes into play
   below that.
   No overflow-x:hidden here on purpose (checked live against the real
   embed): the width chain above, this max-width plus the iframe's own
   width:100%!important, already keeps the iframe from ever exceeding
   its box, on phones included, so the horizontal clip this used to
   carry was redundant. Keeping it would have cost us more than it
   protected: per the CSS overflow spec, setting overflow-x to anything
   but "visible" forces the *other* axis to compute as "auto" even when
   that axis is explicitly declared "visible", so overflow-y:visible
   plus overflow-x:hidden silently becomes overflow-y:auto. That's an
   iffy combination here: Jobber's own script keeps the iframe's inline
   height in sync with its content as you move through the form
   (confirmed live, it updates a `height` style on the iframe on every
   step), 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 (its default,
   visible on both axes) sidesteps the quirk entirely: the wrapper just
   grows to whatever height Jobber's script sets, on every page of the
   form, with nothing to clip and no scrollbar possible. */
.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;}

/* ── FOOTER ── */
footer{background:#051220;border-top:1px solid rgba(127,174,214,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 .ugly{color:var(--blue-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(127,174,214,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 brand colors: Instagram's gradient, Facebook's blue, both with the
   platform's white glyph on top so they read correctly against navy. */
.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);}
@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(--blue);transform:none;box-shadow:none;}
  .btn-secondary:hover{border-color:rgba(249,241,236,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(127,174,214,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(--blue);transform:none;box-shadow:0 4px 20px rgba(127,174,214,0.4);}
  .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: single 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){
  .nav-tagline{font-size:0.85rem;}
  .nav-logo-img{height:26px;}
  .nav-inner{height:54px;gap:8px;}
  .nav-right{gap:8px;}
  .page-hero{min-height:400px;padding:100px 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){
  .nav-inner{height:52px;}
  .nav-tagline{font-size:0.72rem;}
  .nav-right{gap:6px;}
  .content-section{padding:48px 16px;}
}

/* Phone landscape */
@media(max-height:500px) and (orientation:landscape){
  .page-hero{min-height:0;padding:88px 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 ──
   Given a warm holly-red fill instead of the site's blue, since blue is
   already used everywhere else (nav, links, card icons), so this floating
   button reads as the one thing on the page asking for attention instead
   of blending in. A slow pulse on the glow adds a second, motion-based cue;
   it's paused on hover and, like every other animation on the site, gets
   killed by the prefers-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(--holly-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(178,58,50,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:#C94539;transform:translateY(-2px);box-shadow:0 8px 28px rgba(178,58,50,0.6);animation-play-state:paused;}

@keyframes stickyPulse{
  0%,100%{box-shadow:0 4px 20px rgba(178,58,50,0.45);}
  50%{box-shadow:0 4px 30px rgba(178,58,50,0.8);}
}

@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;}
}