/* ==========================================================================
   A-Repairs — stylesheet
   --------------------------------------------------------------------------
   Written as one system, not a stack of patches.

   CONTENTS
     01  Design tokens
     02  Reset & base
     03  Layout primitives (container, section, section head)
     04  Typography
     05  Buttons  (single global system)
     06  Icons & small parts
     07  Header / navigation
     08  Hero — homepage
     09  Trust strip
     10  Service cards & flagship cards
     11  Why-us checklist
     12  Process
     13  Reviews (Thumbtack)
     14  Service areas
     15  Service page: breadcrumbs, hero, benefits
     16  Gallery, before/after, lightbox
     17  FAQ
     18  Related services
     19  CTA band
     20  Footer
     21  Mobile action bar
     22  Responsive refinements
   ========================================================================== */


/* ==========================================================================
   01  DESIGN TOKENS
   ========================================================================== */
:root{
  /* palette — black / white / blue */
  --ink:        #0B0E13;
  --ink-2:      #141922;
  --ink-3:      #1E2530;
  --white:      #FFFFFF;
  --off:        #F4F6F9;
  --blue:       #1D6FF2;
  --blue-dark:  #0F52C4;
  --blue-soft:  #E8F1FE;
  --gray:       #5A6675;
  --gray-light: #9AA6B6;
  --line:       #E1E7EF;
  --line-dark:  #232B36;
  --promo-accent: #F0821E;   /* restrained seasonal accent, used sparingly */

  /* spacing scale */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 72px;
  --space-3xl: 96px;

  /* section rhythm */
  --section-y:    var(--space-3xl);
  --section-y-sm: var(--space-2xl);

  /* layout */
  --container:  1200px;
  --gutter:     24px;
  --measure:    68ch;          /* comfortable paragraph width */

  /* form language */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11,14,19,.05), 0 4px 12px rgba(11,14,19,.05);
  --shadow:    0 2px 4px rgba(11,14,19,.04), 0 10px 28px rgba(11,14,19,.07);
  --shadow-lg: 0 4px 8px rgba(11,14,19,.06), 0 18px 48px rgba(11,14,19,.10);

  /* one control height for every button and input */
  --control-h:    50px;
  --control-h-sm: 42px;

  /* used for anchor offsets and the sticky header */
  --header-h: 88px;
  --promo-h: 38px;

  --ease: .18s cubic-bezier(.4,0,.2,1);
}

@media (max-width: 900px){
  :root{ --section-y: var(--space-2xl); --section-y-sm: var(--space-xl); --gutter: 20px; }
}
@media (max-width: 640px){
  :root{ --header-h: 76px; --promo-h: 34px; }
}
@media (max-width: 480px){
  :root{ --section-y: 56px; --section-y-sm: var(--space-lg); --gutter: 16px; }
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--white);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* nothing may push the page wider than the viewport */
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

/* every anchor target clears the sticky header */
[id]{ scroll-margin-top:calc(var(--header-h) + var(--promo-h) + 16px); }

.sr-only{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}


/* ==========================================================================
   03  LAYOUT PRIMITIVES
   ========================================================================== */
.container{
  width:min(100% - (var(--gutter) * 2), var(--container));
  margin-inline:auto;
}

.section{ padding-block:var(--section-y); }
.section-sm{ padding-block:var(--section-y-sm); }

.section-off{ background:var(--off); }
.section-dark{ background:var(--ink); color:var(--white); }
.section-dark h1,.section-dark h2,.section-dark h3{ color:var(--white); }
.section-dark p{ color:var(--gray-light); }

/* consecutive bands of the same colour would double their padding — collapse it */
.section-off + .section-off,
.section-dark + .section-dark{ padding-top:0; }

.section-head{
  max-width:660px;
  margin-bottom:var(--space-xl);
}
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head > * + *{ margin-top:var(--space-xs); }
.section-head p{
  color:var(--gray);
  font-size:1.05rem;
  max-width:var(--measure);
}
.section-head.center p{ margin-inline:auto; }
.section-dark .section-head p{ color:var(--gray-light); }


/* ==========================================================================
   04  TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.01em;
  text-wrap:balance;
  overflow-wrap:break-word;
}

h1{ font-size:clamp(2.25rem, 1.5rem + 3vw, 4.25rem); }
h2{ font-size:clamp(1.85rem, 1.4rem + 1.8vw, 2.9rem); }
h3{ font-size:clamp(1.25rem, 1.1rem + .6vw, 1.55rem); }

p{ overflow-wrap:break-word; }

.eyebrow{
  display:flex;
  align-items:center;
  gap:var(--space-2xs);
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue);
}
.eyebrow::before{
  content:'';
  width:22px; height:2px;
  background:currentColor;
  flex:0 0 auto;
}
.eyebrow.center{ justify-content:center; }


/* ==========================================================================
   05  BUTTONS — one system, used everywhere
   ========================================================================== */
.btn{
  /* inline-flex + min-height keeps every button the same height regardless
     of whether it holds an icon, one line, or wrapped text */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2xs);
  min-height:var(--control-h);
  padding:0 var(--space-md);
  border:2px solid transparent;
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:.95rem;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--ease), border-color var(--ease),
             color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.btn .icon{ width:18px; height:18px; flex:0 0 auto; }

/* variants */
.btn-primary{
  background:var(--blue); color:var(--white);
  box-shadow:0 4px 14px rgba(29,111,242,.26);
}
.btn-primary:hover{
  background:var(--blue-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(29,111,242,.32);
}

.btn-secondary{
  background:var(--blue-soft); color:var(--blue-dark); border-color:transparent;
}
.btn-secondary:hover{ background:#D6E6FD; transform:translateY(-2px); }

.btn-outline{
  background:transparent; border-color:var(--ink); color:var(--ink);
}
.btn-outline:hover{ background:var(--ink); color:var(--white); transform:translateY(-2px); }

.btn-dark{ background:var(--ink); color:var(--white); }
.btn-dark:hover{ background:var(--ink-2); transform:translateY(-2px); }

/* for dark backgrounds */
.btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.32);
  color:var(--white);
}
.btn-ghost:hover{
  background:var(--white); color:var(--ink); border-color:var(--white);
  transform:translateY(-2px);
}

/* secondary emergency action — visible, but never louder than .btn-primary */
.btn-emergency{
  background:transparent;
  border-color:rgba(255,255,255,.55);
  color:var(--white);
}
.btn-emergency:hover{
  background:var(--white); color:var(--ink); border-color:var(--white);
  transform:translateY(-2px);
}

/* size modifier used in the header and the mobile bar */
.btn-sm{ min-height:var(--control-h-sm); padding:0 var(--space-sm); font-size:.88rem; }

/* any group of buttons anywhere on the site */
.button-group{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;      /* equal heights when one wraps to two lines */
  gap:var(--space-xs);
}
.button-group.center{ justify-content:center; }

/* below this width side-by-side buttons get cramped, so they go full width */
@media (max-width: 640px){
  .button-group{ flex-direction:column; align-items:stretch; }
  .button-group > .btn{ width:100%; }
  .btn{ white-space:normal; }   /* long labels wrap rather than overflow */
}


/* ==========================================================================
   06  ICONS & SMALL PARTS
   ========================================================================== */
.icon{
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.badge{
  font-family:'IBM Plex Mono',monospace;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:var(--radius-sm);
  white-space:nowrap;
}
.badge.primary{ background:var(--blue); color:var(--white); }
.badge.secondary{ background:var(--off); color:var(--gray); border:1px solid var(--line); }
.section-dark .badge.secondary{ background:var(--ink-2); color:var(--gray-light); border-color:var(--line-dark); }


/* ==========================================================================
   07  HEADER / NAVIGATION
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.nav{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
  min-height:72px;
  padding-block:var(--space-xs);
}

.brand{
  display:flex; align-items:center; gap:10px;
  flex:0 0 auto;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800; font-size:1.5rem; letter-spacing:-.01em;
}
/* height-constrained, width auto — the logo can never be stretched */
.brand img{ height:34px; width:auto; object-fit:contain; }

/* The seasonal mark is a full stacked lockup (icon above wordmark), so it needs
   noticeably more height than the icon-only mark to stay legible. The header
   grows with it via padding — no fixed heights fighting each other. */
.brand img.is-seasonal-logo{ height:62px; }
.brand:has(img.is-seasonal-logo){ font-size:0; gap:0; }
@media (max-width: 640px){
  .brand img.is-seasonal-logo{ height:52px; }
}
@media (max-width: 400px){
  .brand img.is-seasonal-logo{ height:46px; }
}

.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(14px, 1.8vw, 28px);   /* tightens before the mobile breakpoint */
}
.nav-links > li > a,
.drop-toggle{
  display:inline-flex; align-items:center; gap:6px;
  padding-block:8px;
  font-size:.93rem; font-weight:600;
  white-space:nowrap;
  transition:color var(--ease);
}
.nav-links > li > a:hover,
.drop-toggle:hover{ color:var(--blue); }

.nav-actions{ display:flex; align-items:center; gap:var(--space-2xs); flex:0 0 auto; }

/* services dropdown */
.has-drop{ position:relative; }
.drop-toggle .caret{ width:11px; height:11px; stroke-width:2.6; transition:transform var(--ease); }
.has-drop.open .drop-toggle .caret{ transform:rotate(180deg); }

.drop-menu{
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  width:min(560px, calc(100vw - 40px));
  padding:10px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden;
  transition:opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.has-drop.open .drop-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

.drop-menu a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  font-size:.9rem; font-weight:500;
  color:var(--gray);
  transition:background-color var(--ease), color var(--ease);
}
.drop-menu a:hover{ background:var(--blue-soft); color:var(--blue); }
.drop-menu a .icon{ width:17px; height:17px; flex:0 0 auto; color:var(--blue); }
.drop-menu a.all-link{
  grid-column:1 / -1;
  justify-content:center;
  margin-top:6px; padding-top:13px;
  border-top:1px solid var(--line);
  border-radius:0;
  font-weight:700; color:var(--ink);
}
.drop-menu a.all-link:hover{ background:transparent; color:var(--blue); }

/* hamburger */
.menu-toggle{
  display:none;
  flex-direction:column; gap:5px;
  padding:10px;
}
.menu-toggle span{
  width:23px; height:2.5px;
  background:var(--ink); border-radius:2px;
  transition:transform var(--ease), opacity var(--ease);
}
.menu-toggle.active span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1040px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow-y:auto;
    background:var(--white);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    transition:max-height .28s ease;
  }
  .nav-links.open{ max-height:calc(100vh - 72px); }
  .nav-links > li > a,
  .drop-toggle{
    width:100%;
    padding:15px var(--gutter);
    border-bottom:1px solid var(--line);
  }
  .drop-toggle{ justify-content:space-between; }
  .drop-menu{
    position:static; transform:none;
    width:auto; max-height:0; padding:0;
    grid-template-columns:1fr;
    opacity:1; visibility:visible;
    border:none; border-bottom:1px solid var(--line);
    border-radius:0; box-shadow:none;
    overflow:hidden;
    transition:max-height .28s ease;
  }
  .has-drop.open .drop-menu{ transform:none; max-height:1000px; }
  .drop-menu a{ padding:13px calc(var(--gutter) + 14px); border-radius:0; }
  .drop-menu a.all-link{ justify-content:flex-start; }
  .menu-toggle{ display:flex; }
}

/* below this the phone number label would crowd the hamburger */
@media (max-width: 560px){
  .nav-actions .btn-label{ display:none; }
  .nav-actions .btn{ padding-inline:var(--space-xs); }
}


/* ==========================================================================
   07a  SEASONAL PROMO TICKER
   Sits above the sticky header. The track holds two identical runs and is
   translated by exactly -50%, so the loop is seamless with no jump.
   ========================================================================== */
.promo-bar{
  /* Sits below the sticky header in the stack. The promo scrolls away with the
     page and the header then pins cleanly over it — neither ever covers the
     other mid-scroll. */
  position:relative; z-index:50;
  background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.10);
  overflow:hidden;                    /* the ticker can never widen the page */
}
.promo-link{
  display:block;
  height:38px;
  overflow:hidden;
  text-decoration:none;
}
.promo-track{
  display:flex;
  width:max-content;
  height:100%;
  align-items:center;
  animation:promo-scroll 46s linear infinite;   /* slow, steady */
  will-change:transform;
}
.promo-run{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}
.promo-item{
  padding-inline:var(--space-sm);
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--white);
  white-space:nowrap;
}
.promo-dot{
  color:var(--promo-accent);
  font-size:.8rem;
  opacity:.9;
}
.promo-link:hover .promo-track,
.promo-link:focus-visible .promo-track{ animation-play-state:paused; }

@keyframes promo-scroll{
  from{ transform:translateX(0); }
  to{   transform:translateX(-50%); }   /* one full run == half the track */
}

@media (max-width: 640px){
  .promo-link{ height:34px; }
  .promo-item{ font-size:.79rem; padding-inline:var(--space-xs); }
  .promo-track{ animation-duration:38s; }
}

/* Reduced motion: stop the scroll and show the message statically, centred. */
@media (prefers-reduced-motion: reduce){
  .promo-track{
    animation:none;
    width:100%;
    justify-content:center;
  }
  .promo-run:nth-child(2){ display:none; }
  .promo-run .promo-item:not(:first-child),
  .promo-run .promo-dot{ display:none; }
  .promo-item{ white-space:normal; text-align:center; }
  .promo-link{ height:auto; padding-block:8px; }
}


/* ==========================================================================
   08  HERO — homepage
   ========================================================================== */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--white);
  padding-top:var(--space-2xl);
  overflow:hidden;
}
.hero::after{
  content:'';
  position:absolute; top:-180px; right:-140px;
  width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle, rgba(29,111,242,.20) 0%, transparent 68%);
  pointer-events:none;
}

.hero-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:var(--space-2xl);
  padding-bottom:var(--space-2xl);
}
.hero h1{ color:var(--white); }
.hero h1 .hl{ color:var(--blue); }
.hero .lede{
  margin-top:var(--space-sm);
  font-size:1.2rem; font-weight:600; color:var(--white);
}
.hero .desc{
  margin-top:var(--space-xs);
  max-width:52ch;
  font-size:1.05rem; color:var(--gray-light);
}
.hero .button-group{ margin-top:var(--space-lg); }

.hero-assure{
  display:flex; flex-wrap:wrap;
  gap:var(--space-2xs) var(--space-md);
  margin-top:var(--space-md);
  font-size:.9rem; color:var(--gray-light);
}
.hero-assure span{ display:inline-flex; align-items:center; gap:7px; }
.hero-assure .icon{ width:16px; height:16px; stroke-width:3; color:var(--blue); }

.hero-media{ position:relative; }
.hero-badge{
  position:absolute; left:22px; bottom:22px;
  padding:var(--space-sm) var(--space-md);
  background:var(--white); color:var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.hero-badge .big{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800; font-size:1.9rem; line-height:1; color:var(--blue);
}
.hero-badge .small{ margin-top:3px; font-size:.8rem; font-weight:600; color:var(--gray); }

/* media panel — holds the illustration, or a real photo once one exists */
.media-panel{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:var(--off);
  border-radius:var(--radius-lg);
  aspect-ratio:16/10;
}
.media-panel > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.media-panel .panel-art{ z-index:1; }
.media-panel > img:not(.panel-art){ z-index:2; }   /* photo covers the artwork */

.hero-media .media-panel{ aspect-ratio:4/3; box-shadow:0 24px 60px rgba(0,0,0,.42); }

@media (max-width: 960px){
  .hero-grid{ grid-template-columns:1fr; gap:var(--space-xl); }
  .hero-media{ display:none; }        /* keeps mobile hero height sensible */
}


/* ==========================================================================
   09  TRUST STRIP
   ========================================================================== */
.trust-strip{
  position:relative; z-index:1;
  background:var(--ink-2);
  border-top:1px solid var(--ink-3);
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
}
.trust-item{
  display:flex; align-items:flex-start; gap:var(--space-sm);
  padding:var(--space-lg) var(--space-md);
  border-right:1px solid var(--ink-3);
}
.trust-item:last-child{ border-right:none; }
.trust-item .ic{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex:0 0 auto;
  background:rgba(29,111,242,.14);
  border-radius:var(--radius-sm);
}
.trust-item .ic .icon{ width:21px; height:21px; color:var(--blue); }
.trust-item .t-title{
  font-size:1.02rem; font-weight:700; line-height:1.3; color:var(--white);
}
.trust-item p{ margin-top:2px; font-size:.87rem; line-height:1.5; color:var(--gray-light); }

@media (max-width: 900px){
  .trust-grid{ grid-template-columns:1fr 1fr; }
  .trust-item:nth-child(2n){ border-right:none; }
  .trust-item:nth-child(-n+2){ border-bottom:1px solid var(--ink-3); }
}
@media (max-width: 560px){
  .trust-grid{ grid-template-columns:1fr; }
  .trust-item{ border-right:none; border-bottom:1px solid var(--ink-3); }
  .trust-item:last-child{ border-bottom:none; }
}


/* ==========================================================================
   10  SERVICE CARDS
   ========================================================================== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:var(--space-md);
}

.service-card{
  position:relative;
  display:flex; flex-direction:column;
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.service-card:hover{
  border-color:var(--blue);
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}

.service-card .card-art{
  display:block;
  aspect-ratio:16/7;
  overflow:hidden;
  background:var(--off);
  border-bottom:1px solid var(--line);
}
.service-card .card-art img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .3s var(--ease);
}
.service-card:hover .card-art img{ transform:scale(1.05); }

.service-card .flag{
  position:absolute; top:var(--space-xs); left:var(--space-sm); z-index:2;
  padding:4px 9px;
  background:var(--ink); color:var(--white);
  border-radius:var(--radius-sm);
  font-family:'IBM Plex Mono',monospace;
  font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.service-card .flag.seasonal{ background:var(--blue); }

.service-card .idx{
  position:absolute; top:var(--space-xs); right:var(--space-sm); z-index:2;
  font-family:'IBM Plex Mono',monospace;
  font-size:.68rem; color:var(--gray);
}

/* icon sits in normal flow — no negative margins, no absolute positioning */
.service-card .ic{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  margin:var(--space-md) var(--space-md) var(--space-sm);
  background:var(--blue-soft);
  border-radius:var(--radius-sm);
  transition:background-color var(--ease);
}
.service-card:hover .ic{ background:var(--blue); }
.service-card .ic .icon{ width:22px; height:22px; color:var(--blue); transition:color var(--ease); }
.service-card:hover .ic .icon{ color:var(--white); }

.service-card h3{
  margin-inline:var(--space-md);
  font-family:'Inter',sans-serif;
  font-weight:700; font-size:1.02rem; line-height:1.35;
}
.service-card .sub{
  margin:var(--space-3xs) var(--space-md) 0;
  font-size:.81rem; font-weight:500; color:var(--gray);
}
/* margin-top:auto pins the link to the bottom so cards of differing title
   length still line their links up across a row */
.service-card .go{
  display:flex; align-items:center; gap:6px;
  margin:auto var(--space-md) var(--space-md);
  padding-top:var(--space-sm);
  font-size:.85rem; font-weight:700; color:var(--blue);
}
.service-card .go .icon{ width:15px; height:15px; transition:transform var(--ease); }
.service-card:hover .go .icon{ transform:translateX(4px); }

.service-card.is-flagship{ border-color:var(--ink); }
.service-card.is-seasonal{ border-color:var(--blue); }

/* flagship preview cards */
.flagship-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--space-md);
}
.flag-card{
  display:flex; flex-direction:column;
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.flag-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--blue); }
.flag-card .thumb{
  aspect-ratio:4/3;
  border-radius:0;
  background:var(--off);
}
.flag-card .thumb img{ transition:transform .3s var(--ease); }
.flag-card:hover .thumb img{ transform:scale(1.04); }
.flag-card .body{
  display:flex; flex-direction:column; flex:1;
  padding:var(--space-md);
}
.flag-card h3{ font-size:1.22rem; }
.flag-card p{
  margin:var(--space-2xs) 0 var(--space-sm);
  flex:1;
  font-size:.9rem; color:var(--gray);
}
.flag-card .go{
  display:flex; align-items:center; gap:6px;
  font-size:.85rem; font-weight:700; color:var(--blue);
}
.flag-card .go .icon{ width:15px; height:15px; transition:transform var(--ease); }
.flag-card:hover .go .icon{ transform:translateX(4px); }

@media (max-width: 1040px){ .flagship-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .flagship-grid{ grid-template-columns:1fr; } }

/* "and much more" band */
.more-band{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--space-md);
  margin-top:var(--space-md);
  padding:var(--space-lg);
  background:var(--ink);
  border-radius:var(--radius);
}
.more-band h3{ color:var(--white); }
.more-band p{ max-width:50ch; margin-top:var(--space-3xs); font-size:.96rem; color:var(--gray-light); }
@media (max-width: 640px){
  .more-band{ flex-direction:column; align-items:stretch; }
  .more-band .btn{ width:100%; }
}


/* ==========================================================================
   11  WHY-US CHECKLIST
   ========================================================================== */
.checklist-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--space-xl);
}
.checklist{ border-top:1px solid var(--line); }
.section-dark .checklist{ border-color:var(--ink-3); }

.check-row{
  display:flex; align-items:flex-start; gap:var(--space-sm);
  padding-block:var(--space-md);
  border-bottom:1px solid var(--line);
}
.section-dark .check-row{ border-color:var(--ink-3); }
.check-row .mark{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex:0 0 auto;
  margin-top:2px;
  background:var(--blue-soft);
  border-radius:var(--radius-sm);
}
.section-dark .check-row .mark{ background:rgba(29,111,242,.16); }
.check-row .mark .icon{ width:16px; height:16px; stroke-width:2.6; color:var(--blue); }
.check-row h3{ font-family:'Inter',sans-serif; font-weight:700; font-size:1.06rem; }
.check-row p{ margin-top:2px; font-size:.95rem; color:var(--gray); }
.section-dark .check-row p{ color:var(--gray-light); }

@media (max-width: 900px){ .checklist-grid{ grid-template-columns:1fr; } }


/* ==========================================================================
   12  PROCESS
   ========================================================================== */
.process-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-xl);
}
.process-step .num{
  display:block;
  margin-bottom:var(--space-xs);
  font-family:'IBM Plex Mono',monospace;
  font-weight:600; font-size:.88rem; letter-spacing:.05em;
  color:var(--blue);
}
.process-step h3{ font-size:1.5rem; }
.process-step p{ margin-top:var(--space-2xs); color:var(--gray); max-width:38ch; }
.section-dark .process-step p{ color:var(--gray-light); }

@media (max-width: 860px){ .process-grid{ grid-template-columns:1fr; gap:var(--space-lg); } }


/* ==========================================================================
   13  REVIEWS
   One centred card. No third-party widget markup is styled here — the embed
   was removed from the layout because its fixed dimensions could not be made
   to sit properly inside this design.
   ========================================================================== */
.reviews-card{
  display:grid;
  grid-template-columns:minmax(220px, 280px) 1fr;
  align-items:center;
  gap:var(--space-xl);
  max-width:940px;
  margin-inline:auto;
  padding:var(--space-xl);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 12px 35px rgba(11,14,19,.06);
}

/* left — Thumbtack reference */
.reviews-brand{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-xs);
  padding:var(--space-lg) var(--space-md);
  background:var(--off);
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-align:center;
}
.reviews-logo{ width:150px; height:auto; }
.reviews-logo-text{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800; font-size:1.45rem; letter-spacing:-.01em; color:var(--ink);
}
.reviews-brand-note{
  max-width:22ch;
  font-size:.88rem; font-weight:600; line-height:1.45; color:var(--gray);
}

/* right — copy and actions */
.reviews-body h3{ font-size:clamp(1.4rem, 1.2rem + .8vw, 1.9rem); }
.reviews-body p{
  max-width:48ch;
  margin-top:var(--space-xs);
  font-size:1rem; color:var(--gray);
}
.reviews-body .button-group{ margin-top:var(--space-lg); }

@media (max-width: 820px){
  .reviews-card{
    grid-template-columns:1fr;
    gap:var(--space-lg);
    padding:var(--space-lg);
    text-align:center;
  }
  .reviews-brand{ padding:var(--space-md); }
  .reviews-brand-note{ max-width:none; }
  .reviews-body p{ margin-inline:auto; }
  .reviews-body .button-group{ justify-content:center; }
}
@media (max-width: 480px){
  .reviews-card{ padding:var(--space-md); }
}


/* ==========================================================================
   14  SERVICE AREAS
   ========================================================================== */
.areas-wrap{ max-width:940px; margin-inline:auto; }
.area-block + .area-block{ margin-top:var(--space-lg); }

.area-label{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--space-xs);
  margin-bottom:var(--space-sm);
}
.area-label h3{ font-size:1.3rem; }
.area-label .rule{ flex:1 1 40px; height:1px; background:var(--line); }
.section-dark .area-label .rule{ background:var(--ink-3); }

.area-chips{ display:flex; flex-wrap:wrap; gap:var(--space-2xs); }
.chip{
  display:inline-flex; align-items:center;
  min-height:42px;
  padding:0 var(--space-sm);
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:.93rem; font-weight:600;
}
.chip.hero-city{
  min-height:48px;
  padding:0 var(--space-md);
  background:var(--blue); color:var(--white); border-color:var(--blue);
  font-size:1.02rem;
}
.chip.soft{ background:transparent; color:var(--gray); font-weight:500; font-size:.88rem; }
.section-dark .chip{ background:var(--ink-2); border-color:var(--ink-3); color:var(--white); }
.section-dark .chip.hero-city{ background:var(--blue); border-color:var(--blue); }
.section-dark .chip.soft{ background:transparent; color:var(--gray-light); }

.areas-note{
  max-width:70ch;
  margin:var(--space-lg) auto 0;
  text-align:center;
  color:var(--gray); font-size:.98rem;
}
.section-dark .areas-note{ color:var(--gray-light); }
.areas-note a{ color:var(--blue); font-weight:600; }
.areas-note a:hover{ text-decoration:underline; }


/* ==========================================================================
   15  SERVICE PAGE — breadcrumbs, hero, benefits
   ========================================================================== */
.crumbs{
  padding-block:var(--space-xs);
  background:var(--off);
  border-bottom:1px solid var(--line);
  font-size:.85rem; color:var(--gray);
}
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2xs); }
.crumbs a:hover{ color:var(--blue); }
.crumbs .sep{ color:var(--gray-light); }
.crumbs li[aria-current]{ color:var(--ink); font-weight:600; }

.svc-hero{
  position:relative;
  overflow:hidden;
  padding-block:var(--space-2xl);
  background:var(--ink);
  color:var(--white);
}
.svc-hero::after{
  content:'';
  position:absolute; top:-160px; right:-120px;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(29,111,242,.20) 0%, transparent 68%);
  pointer-events:none;
}
.svc-hero-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:var(--space-2xl);
}
.svc-hero h1{ margin-top:var(--space-xs); color:var(--white); }
.svc-hero .tagline{
  margin-top:var(--space-sm);
  font-size:1.12rem; font-weight:600; color:var(--blue);
}
.svc-hero .intro{
  margin-top:var(--space-xs);
  max-width:56ch;
  font-size:1.02rem; color:var(--gray-light);
}
.svc-hero .button-group{ margin-top:var(--space-lg); }
.svc-hero-media .media-panel{ aspect-ratio:16/10; box-shadow:0 24px 60px rgba(0,0,0,.42); }

.also-serving{
  display:flex; align-items:flex-start; gap:var(--space-2xs);
  max-width:60ch;
  margin-top:var(--space-md);
  padding-top:var(--space-md);
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.92rem; line-height:1.6; color:var(--gray-light);
}
.also-serving .icon{ width:17px; height:17px; margin-top:4px; flex:0 0 auto; color:var(--blue); }
.also-serving a{ color:var(--blue); font-weight:600; }
.also-serving a:hover{ text-decoration:underline; }

@media (max-width: 960px){
  .svc-hero-grid{ grid-template-columns:1fr; gap:var(--space-xl); }
  .svc-hero-media{ display:none; }
}

.benefits-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--space-xl);
}
.benefit{
  display:flex; align-items:flex-start; gap:var(--space-xs);
  padding-block:var(--space-sm);
  border-bottom:1px solid var(--line);
}
.benefit .tick{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; flex:0 0 auto;
  margin-top:2px;
  background:var(--blue-soft);
  border-radius:var(--radius-sm);
}
.benefit .tick .icon{ width:14px; height:14px; stroke-width:3; color:var(--blue); }
.benefit p{ font-size:.97rem; }
@media (max-width: 820px){ .benefits-grid{ grid-template-columns:1fr; } }


/* ==========================================================================
   16  GALLERY, BEFORE/AFTER, LIGHTBOX
   ========================================================================== */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-md);
}
.shot{
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:zoom-in;
}
.shot img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .3s var(--ease); }
.shot:hover img{ transform:scale(1.03); }
.shot figcaption{
  padding:var(--space-xs) var(--space-sm);
  border-top:1px solid var(--line);
  font-size:.86rem; color:var(--gray);
}

.ba-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-md);
}
.ba{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:zoom-in;
}
.ba img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.ba .lbl{
  position:absolute; top:var(--space-xs); left:var(--space-xs);
  padding:6px 11px;
  background:rgba(11,14,19,.82); color:var(--white);
  border-radius:var(--radius-sm);
  backdrop-filter:blur(4px);
  font-family:'IBM Plex Mono',monospace;
  font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.ba .lbl.after{ background:var(--blue); }
.ba figcaption{
  padding:var(--space-xs) var(--space-sm);
  background:var(--white);
  border-top:1px solid var(--line);
  font-size:.86rem; color:var(--gray);
}

@media (max-width: 860px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 620px){ .gallery-grid,.ba-grid{ grid-template-columns:1fr; } }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:5vh 4vw;
  background:rgba(6,8,12,.94);
}
.lightbox[hidden]{ display:none; }
.lb-inner{
  display:flex; flex-direction:column; align-items:center; gap:var(--space-sm);
  width:100%; max-width:1100px;
}
.lb-inner img{
  width:auto; height:auto;
  max-width:100%; max-height:78vh;
  object-fit:contain;
  border-radius:var(--radius);
  box-shadow:0 20px 70px rgba(0,0,0,.6);
}
.lb-inner figcaption{ max-width:640px; text-align:center; font-size:.94rem; color:#C6D0DE; }
.lb-close,.lb-nav{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.10); color:#fff;
  border-radius:50%;
  line-height:1;
  transition:background-color var(--ease);
}
.lb-close:hover,.lb-nav:hover{ background:rgba(255,255,255,.22); }
.lb-close{ top:18px; right:20px; width:46px; height:46px; font-size:1.9rem; }
.lb-nav{ top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:2.1rem; }
.lb-prev{ left:18px; }
.lb-next{ right:18px; }
@media (max-width: 700px){
  .lb-close{ top:10px; right:10px; width:40px; height:40px; font-size:1.6rem; }
  .lb-nav{ width:42px; height:42px; font-size:1.7rem; }
  .lb-prev{ left:6px; } .lb-next{ right:6px; }
  .lb-inner img{ max-height:68vh; }
}


/* ==========================================================================
   17  FAQ
   ========================================================================== */
.faq-list{
  max-width:820px;
  margin-inline:auto;
  border-top:1px solid var(--line);
}
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  position:relative;
  display:block; width:100%;
  padding:var(--space-md) 52px var(--space-md) 0;
  text-align:left;
  font-size:1.02rem; font-weight:600; line-height:1.45;
  color:var(--ink);
  transition:color var(--ease);
}
.faq-q:hover{ color:var(--blue); }
.faq-q .pm{
  position:absolute; right:var(--space-2xs); top:50%;
  transform:translateY(-50%);
  width:20px; height:20px;
  color:var(--blue);
  transition:transform var(--ease);
}
.faq-item.open .faq-q .pm{ transform:translateY(-50%) rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
.faq-a p{
  padding:0 52px var(--space-md) 0;
  max-width:var(--measure);
  font-size:.97rem; color:var(--gray);
}
@media (max-width: 560px){
  .faq-q{ padding-right:44px; }
  .faq-a p{ padding-right:0; }
}


/* ==========================================================================
   18  RELATED SERVICES
   ========================================================================== */
.related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:var(--space-sm);
}
.related{
  display:flex; align-items:center; gap:var(--space-xs);
  min-height:64px;
  padding:var(--space-sm) var(--space-md);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:.95rem; font-weight:600; line-height:1.35;
  transition:border-color var(--ease), color var(--ease), transform var(--ease);
}
.related:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-3px); }
.related .icon{ width:20px; height:20px; flex:0 0 auto; color:var(--blue); }


/* ==========================================================================
   19  CTA BAND
   ========================================================================== */
.cta-band{
  background:var(--blue);
  color:var(--white);
  text-align:center;
}
.cta-band h2{ color:var(--white); }
.cta-band .eyebrow{ justify-content:center; color:rgba(255,255,255,.85); }
.cta-band .desc{
  max-width:58ch;
  margin:var(--space-xs) auto 0;
  font-size:1.05rem; color:rgba(255,255,255,.9);
}
.cta-band .button-group{ margin-top:var(--space-lg); }
.cta-band .btn-primary{ background:var(--white); color:var(--blue); box-shadow:0 4px 14px rgba(0,0,0,.14); }
.cta-band .btn-primary:hover{ background:var(--ink); color:var(--white); }

.cta-details{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:var(--space-sm) var(--space-lg);
  margin-top:var(--space-lg);
}
.cta-details span{
  display:inline-flex; align-items:center; gap:var(--space-2xs);
  font-size:.97rem; font-weight:600;
}
.cta-details .icon{ width:19px; height:19px; }
@media (max-width: 560px){
  .cta-details{ flex-direction:column; align-items:center; gap:var(--space-xs); }
}


/* ==========================================================================
   19a  CONTACT INFO CARDS  (hours / contact / emergency)
   ========================================================================== */
.info-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-md);
  max-width:940px;
  margin:var(--space-lg) auto 0;
  text-align:left;
}
.info-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-2xs);
  padding:var(--space-md);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
}
.info-card .ic{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  background:rgba(255,255,255,.16);
  border-radius:var(--radius-sm);
}
.info-card .ic .icon{ width:19px; height:19px; color:var(--white); }
.info-card h3{
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.info-card p{
  font-size:.95rem; line-height:1.55; color:var(--white);
}
.info-card p a{ color:var(--white); font-weight:600; }
.info-card p a:hover{ text-decoration:underline; }
.info-card .fee-note{
  display:inline-block;
  margin-top:var(--space-3xs);
  font-size:.84rem; line-height:1.45;
  color:rgba(255,255,255,.82);
}
/* the emergency CTA is deliberately quieter than the primary buttons */
.info-card .btn{ margin-top:var(--space-xs); }

.cta-areas{
  display:flex; align-items:center; justify-content:center; gap:var(--space-2xs);
  margin-top:var(--space-lg);
  font-size:.94rem; font-weight:600; color:rgba(255,255,255,.9);
}
.cta-areas .icon{ width:18px; height:18px; flex:0 0 auto; }

@media (max-width: 900px){
  .info-grid{ grid-template-columns:1fr; max-width:520px; }
}
@media (max-width: 480px){
  .cta-areas{ flex-direction:column; text-align:center; }
}


/* ==========================================================================
   20  FOOTER
   ========================================================================== */
.site-footer{
  padding-top:var(--space-2xl);
  padding-bottom:var(--space-lg);
  background:var(--ink);
  color:var(--gray-light);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:var(--space-xl);
  padding-bottom:var(--space-lg);
}
.footer-logo{ width:190px; height:auto; margin-bottom:var(--space-sm); object-fit:contain; }
.footer-logo.is-seasonal-logo{ width:auto; height:110px; }
.footer-tagline{ max-width:32ch; margin-bottom:var(--space-sm); font-size:.91rem; }
.footer-contact a{
  display:flex; align-items:center; gap:var(--space-2xs);
  margin-bottom:var(--space-2xs);
  font-size:.95rem; font-weight:600; color:var(--white);
  overflow-wrap:anywhere;              /* long email can't overflow the column */
}
.footer-contact a:hover{ color:var(--blue); }
.footer-contact .icon{ width:17px; height:17px; flex:0 0 auto; color:var(--blue); }

.footer-hours{ margin-top:var(--space-sm); font-size:.86rem; line-height:1.5; }
.footer-hours dt{
  font-family:'IBM Plex Mono',monospace;
  font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--white);
  margin-top:var(--space-2xs);
}
.footer-hours dd{ color:var(--gray-light); }

.footer-col h3{
  margin-bottom:var(--space-sm);
  font-family:'IBM Plex Mono',monospace;
  font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--white);
}
.footer-col a,.footer-col span{
  display:block;
  margin-bottom:var(--space-2xs);
  font-size:.89rem; color:var(--gray-light);
}
.footer-col a:hover{ color:var(--blue); }

.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap;
  gap:var(--space-2xs) var(--space-sm);
  padding-top:var(--space-md);
  border-top:1px solid var(--ink-3);
  font-size:.82rem; color:#6C7889;
}
@media (max-width: 940px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--space-lg); }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}


/* ==========================================================================
   21  MOBILE ACTION BAR
   ========================================================================== */
.call-bar{
  display:none;
  position:fixed; inset:auto 0 0 0; z-index:70;
  gap:var(--space-2xs);
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:var(--ink);
  border-top:1px solid var(--ink-3);
}
.call-bar .btn{
  flex:1 1 0;
  min-width:0;
  min-height:46px;
  padding-inline:var(--space-2xs);
  font-size:.88rem;
  white-space:nowrap;
}
.call-bar .btn .icon{ width:16px; height:16px; }
.btn-bar{ background:var(--ink-2); color:var(--white); border-color:var(--ink-3); }
.btn-bar:hover{ background:var(--ink-3); }

@media (max-width: 760px){
  .call-bar{ display:flex; }
  body{ padding-bottom:78px; }        /* nothing hides behind the bar */
}
@media (max-width: 360px){
  .call-bar .btn{ font-size:.8rem; gap:5px; }
}


/* ==========================================================================
   22  RESPONSIVE REFINEMENTS
   ========================================================================== */

/* very narrow phones (320px) — the tightest case we support */
@media (max-width: 380px){
  .services-grid{ grid-template-columns:1fr; }
  .chip{ font-size:.88rem; padding-inline:var(--space-xs); }
  .chip.hero-city{ font-size:.95rem; padding-inline:var(--space-sm); }
  .hero-badge{ left:var(--space-xs); bottom:var(--space-xs); padding:var(--space-xs); }
}

/* large desktops — keep the measure sane, don't stretch text across 1920px */
@media (min-width: 1600px){
  :root{ --container:1280px; }
}