/* ===== Core brand & reset ===== */
:root{
  --font-sans:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;

  --blue-900:#083a8a; --blue-800:#0a4fb3; --blue-700:#0b5ed7; --blue-600:#1a73e8;
  --yellow-400:#ffd84d;

  --ink:#0b0b0b; --ink-2:#4b5563; --soft:#f7fafc; --card:#fff; --stroke:#e5e7eb;

  --shadow-sm:0 1px 2px rgba(2,12,27,.05);
  --shadow-md:0 8px 24px rgba(2,12,27,.08);
  --shadow-lg:0 18px 40px rgba(2,12,27,.14);
  --r-sm:10px; --r-md:14px; --r-lg:18px;

  --space-1:6px; --space-2:10px; --space-3:14px; --space-4:20px; --space-5:28px; --space-6:40px;
  --fs-hero:clamp(28px,3.2vw,40px); --fs-h3:clamp(18px,1.8vw,22px); --fs-body:clamp(14px,1.2vw,16px);

  --sidebar-logo:72px; --hero-logo:96px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);font-size:var(--fs-body);color:var(--ink);background:var(--soft);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-700);text-decoration:none}
a:hover{color:var(--blue-600)}
.no-wrap{white-space:nowrap}
:focus-visible{outline:3px solid var(--yellow-400);outline-offset:2px}
h1,h2,h3,.brand-name,.hero-brand-title{font-weight:800;letter-spacing:.01em}
@media (prefers-reduced-motion:no-preference){*{transition:color .2s,background-color .25s,border-color .25s,box-shadow .25s,transform .25s}}

/* ===== Layout ===== */
.wrapper{display:grid;grid-template-columns:300px 1fr;min-height:100dvh}
.main{overflow:hidden}
.section{width:min(1040px,92%);margin:clamp(44px,7vw,88px) auto;padding-top:clamp(6px,1vw,10px)}
.section + .section{margin-top:clamp(56px,8vw,110px)}
.section:not(:first-of-type){border-top:1px solid var(--stroke);padding-top:clamp(16px,2vw,24px)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}

/* ===== Sidebar ===== */
.sidebar{background:var(--blue-800);color:#fff;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);position:sticky;top:0;height:100dvh;border-right:1px solid rgba(255,255,255,.12);overflow:auto}
.nav-toggle{display:none;border:0;background:rgba(255,255,255,.18);color:#fff;padding:10px 12px;border-radius:12px;font-weight:800}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:var(--sidebar-logo);height:var(--sidebar-logo);object-fit:contain;filter:invert(1) brightness(1.6) contrast(1.1) drop-shadow(0 2px 6px rgba(0,0,0,.18))}
.brand-text{display:flex;flex-direction:column;gap:4px}
.brand-name{margin:0;font-size:18px;line-height:1}
.tag{font-size:12px;opacity:.92}
.nav{margin-top:6px}
.nav a{display:block;color:#fff;padding:12px 14px;border-radius:14px;margin:10px 0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10)}
.nav a:hover{background:rgba(255,255,255,.12)}
.nav a.active{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.20)}
.cta-side{margin-top:auto;background:#fff;color:var(--ink);padding:14px;border-radius:var(--r-md);box-shadow:var(--shadow-md)}
.cta-side strong{display:block;font-size:18px;margin-bottom:4px}
.phone{display:inline-block;margin-top:10px;padding:10px 14px;border-radius:999px;background:var(--yellow-400);color:#111;box-shadow:var(--shadow-sm)}
.phone:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}

/* ===== Hero ===== */
.hero{position:relative;isolation:isolate;min-height:420px;display:grid;place-items:center;text-align:left;background:linear-gradient(180deg,var(--blue-800),var(--blue-900))}
.hero-content{position:relative;z-index:1;color:#fff;width:min(1120px,92%);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:center;overflow:visible}
.hero-brand{display:flex;align-items:center;gap:12px}
.hero-brand img{width:var(--hero-logo);height:var(--hero-logo);object-fit:contain;filter:invert(1) brightness(1.6) contrast(1.1) drop-shadow(0 2px 6px rgba(0,0,0,.18))}
.hero-brand-title{font-size:var(--fs-hero);line-height:1}
.slogan{opacity:.95}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;line-height:1;border:1px solid transparent;box-shadow:var(--shadow-sm);font-weight:700}
.btn.primary{background:var(--yellow-400);color:#111}.btn.primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.18)}.btn.ghost:hover{background:rgba(255,255,255,.18)}
.kicker{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#dbeafe;margin-bottom:6px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;background:#eef2ff;border:1px solid #dbe4ff;color:#0a4fb3}
.quote{background:var(--card);border:1px solid var(--stroke);box-shadow:var(--shadow-md);border-left:6px solid var(--blue-700);border-radius:var(--r-md);padding:18px;color:var(--ink)}
.hero .quote .kicker{color:var(--blue-700);letter-spacing:.08em}

/* ===== Cards & lists ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,40px)}
.card{background:#fff;border-radius:var(--r-lg);padding:18px;border:1px solid #cbd5e1;box-shadow:0 10px 28px rgba(2,12,27,.09)}
.card h3{margin:0 0 8px 0;font-size:var(--fs-h3)}
.card p,.card li,.card .small{color:#0b0b0b;opacity:1}
.card ul{margin:8px 0 0 18px;padding:0}
.card li{margin:6px 0;line-height:1.6}

/* ===== Services refresh ===== */
.services-split{align-items:start}
.section-head.card{padding:18px;border:1px solid var(--stroke);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.section-head .eyebrow{color:var(--blue-700);font-size:12px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:4px}
.section-head h3{margin:.25rem 0 .4rem}
.lead-sm{opacity:.95}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,18px);margin-top:12px}
.feature.card{padding:16px 16px 14px;border:1px solid var(--stroke);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.feature-title{margin:0 0 8px 0;font-size:clamp(18px,1.4vw,20px)}
.check{list-style:none;margin:8px 0 0;padding:0}
.check li{margin:6px 0;padding-left:20px;position:relative;line-height:1.55;color:var(--ink)}
.check li::before{content:"✓";position:absolute;left:0;top:0;color:var(--blue-700);font-weight:800}
.meta-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;font-weight:700}
.meta-strip span{background:#f3f6ff;color:#0a4fb3;border:1px solid #dae5ff;padding:8px 10px;border-radius:999px}
.illustration{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--stroke);box-shadow:var(--shadow-md)}
.illustration img{width:100%;height:100%;object-fit:cover;min-height:360px}

/* ===== Pricing ===== */
.pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,20px);margin-top:14px}
.pill{background:#f3f6ff;border:1px solid #dae5ff;border-radius:12px;padding:12px;text-align:center;font-weight:700;box-shadow:var(--shadow-sm)}
.pill:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#c7d7ff}

/* ===== Before/After gallery ===== */
.ba-grid{display:flex;flex-wrap:wrap;gap:clamp(18px, 2.6vw, 28px);justify-content:center}
.ba-item{flex:1 1 320px;max-width:640px;margin-inline:auto;position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--stroke);box-shadow:var(--shadow-sm);background:#000;min-height:260px}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s ease}
.ba-before{opacity:1}.ba-after{opacity:0}
.ba-item.show-after .ba-before{opacity:0}.ba-item.show-after .ba-after{opacity:1}
.ba-item figcaption{position:absolute;left:12px;bottom:12px;color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.45)}

/* ===== Map / Service area ===== */
.map-card{padding:0;overflow:hidden}
.map-embed{width:100%;height:360px;border:0;display:block;border-radius:var(--r-lg)}
.areas{list-style:none;margin:8px 0 0;padding:0;columns:2;column-gap:18px}
.areas li{margin:6px 0;padding-left:22px;position:relative;break-inside:avoid}
.areas li::before{content:"✓";position:absolute;left:0;top:0;color:var(--blue-700);font-weight:800}

/* ===== Reviews ===== */
.g-review__head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.g-review__name{font-weight:700}
.stars{color:#f6c200;letter-spacing:1px;font-weight:800}
.g-review__text{margin:.35rem 0 0}

/* ===== Forms / Footer ===== */
.review-cta{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 4px}
.form{display:grid;gap:12px}
.form--grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form--grid textarea{grid-column:1 / -1}
.form--grid button{justify-self:start}
.form--grid .full{grid-column:1 / -1}
input,textarea,select{width:100%;padding:12px;border-radius:12px;border:1px solid var(--stroke);background:#fff;color:var(--ink)}
input:focus,textarea:focus,select:focus{border-color:var(--blue-700);box-shadow:0 0 0 3px rgba(11,94,215,.12)}
/* centered consent rows + aligned boxes */
.consent{
  display:flex;
  align-items:center;       /* vertical align checkbox */
  justify-content:center;   /* center whole row */
  gap:12px;
  text-align:left;
}
.consent input{
  margin:0;
  inline-size:18px;
  block-size:18px;
}
.summary{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,28px)}
.footer{width:min(1120px,92%);margin:var(--space-6) auto var(--space-6);font-size:13px;color:var(--ink-2);text-align:center}
.legal-links a{margin:0 .25rem}
.logo--on-dark{filter:invert(1) brightness(1.6) contrast(1.1) drop-shadow(0 2px 6px rgba(0,0,0,.18))}
.small{font-size:.86rem;color:var(--ink-2)}
.sr{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ===== Unified small-title style ===== */
.kicker, .eyebrow{display:block;color:#0b5ed7;font:800 12px/1 var(--font-sans);text-transform:uppercase;letter-spacing:.08em;margin:0 0 6px}
.hero .kicker{color:#dbeafe}.hero .quote .kicker{color:#0b5ed7}
.kicker + h3, .eyebrow + h3{margin-top:.2rem}

/* ===== Reveal animations ===== */
.reveal{opacity:0;transform:translateY(10px)}
.reveal.is-visible{opacity:1;transform:none;transition:opacity .45s,transform .45s}
.no-reveal .reveal,#top .reveal,#services .reveal{opacity:1!important;transform:none!important}
.js body{opacity:1!important;transform:none!important}

/* --- Fix: hero title clipping & wrapping --- */
.hero-brand-title{
  white-space: normal !important;   /* override .no-wrap safely */
  word-break: break-word;
  hyphens: auto;
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.1;
}
@media (max-width:1280px) and (min-width:980px){
  .hero-content{ grid-template-columns: 1.15fr .85fr; }
}

/* === Mobile polish & white-bar fix === */
@media (max-width:980px){
  .main{padding-top:0}
  .hero{padding:16px 0 22px}
  .hero-content{grid-template-columns:1fr;gap:12px;text-align:center}
  .hero-brand{justify-content:center;gap:8px}
  .hero-brand img{width:54px;height:54px}
  .hero-brand-title{font-size:clamp(22px,6.4vw,28px);line-height:1.15}
  .slogan{display:block;font-size:12px;opacity:.95;margin-top:2px}
  .card.lead{padding:12px 14px;border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,.12)}
  .btns{display:grid;grid-template-columns:1fr;gap:10px;justify-items:stretch}
  .btn{width:100%;padding:14px;font-weight:800}
  .btn.ghost{background:transparent;border-color:rgba(255,255,255,.5)}
  .badges{margin-top:8px;gap:6px;justify-content:center}
  .hero .badge{font-size:11px;padding:6px 10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);color:#fff}
  .quote{margin-top:8px;padding:12px;border-left-width:4px;border-radius:14px}
  .quote p{font-size:14px;line-height:1.5}

  .wrapper{display:block}
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(86vw,320px);height:100dvh;transform:translateX(-105%);z-index:1000;border-right:1px solid rgba(255,255,255,.18);overflow:auto}
  .sidebar.open{transform:translateX(0)}
  .nav-toggle{display:inline-block;position:fixed;left:12px;top:calc(12px + env(safe-area-inset-top));z-index:1100;background:rgba(255,255,255,.22);backdrop-filter:saturate(120%) blur(2px)}

  .section{width:92%;margin:clamp(34px,6vw,60px) auto}
  .grid-2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr;gap:clamp(18px,3.5vw,26px)}
  .features{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr 1fr}
  .summary{grid-template-columns:1fr}
  .illustration img{min-height:240px}
  .areas{columns:1}
  .map-embed{height:280px}
}

@media (max-width:420px){
  .hero{padding:16px 0 20px}
  .hero-content{width:94%;padding-inline:10px;grid-template-columns:1fr;gap:12px;text-align:center;margin-inline:auto}
  .hero-brand{justify-content:center;flex-wrap:wrap;gap:8px}
  .hero-brand img{width:50px;height:50px}
  .hero-brand-title{font-size:clamp(20px,6vw,26px);line-height:1.15}
  .card.lead{margin:0 auto;padding:12px 14px;border-radius:14px}
  .btns{display:grid;grid-template-columns:1fr;gap:8px}
  .btn{width:100%;padding:12px 14px}
  .badges{justify-content:center;gap:6px}
  .hero .badge{font-size:11px;padding:5px 8px}
  .quote{margin-top:8px;padding:12px;border-left-width:4px;border-radius:14px}
}
/* Keep hero title on one line for desktops; allow wrap on mobile */
@media (min-width: 980px){
  .hero-brand-title{
    white-space: nowrap !important;
    font-size: clamp(32px, 3.6vw, 48px);
    line-height: 1.1;
  }
  .hero-brand{ flex-wrap: nowrap; }
}
/* Nudge the WHY CHOOSE US card down a bit on desktop */
@media (min-width: 980px){
  .hero-content{ padding-top: 14px; }               /* adds a little breathing room */
  .hero .quote{ margin-top: clamp(16px, 2vw, 60px); }/* move the card down */
  
}
/* Move the WHY CHOOSE US card down (desktop only) */
@media (min-width: 980px){
  /* stop vertical centering */
  .hero-content{
    align-items: start;           /* was: center */
  }
  .hero .quote{
    align-self: start;            /* top-align this card in its grid cell */
    margin-top: clamp(24px, 2.5vw, 60px);  /* adjust to taste */
  }
}

/* If a second <nav> exists, hide the duplicate */
.sidebar .nav + .nav { display: none !important; }

/* Make sure the slide-in mobile menu isn’t visible on desktop */
@media (min-width: 980px){
  .sidebar{ transform: none !important; }
}
/* --- Force WHY CHOOSE US to sit lower on desktop --- */
@media (min-width: 980px){
  /* stop the column from re-centering later in the file */
  .hero-content{ align-items: flex-start !important; }

  /* shift the card down visually, independent of grid alignment */
  .hero .quote{
    position: relative;
    top: clamp(24px, 2.6vw, 60px) !important; /* adjust the numbers as you like */
  }
}
/* hide any accidental second nav */
.sidebar .nav + .nav { display: none !important; }
/* === Fixed, clean sidebar (desktop) — no left scrollbar === */
@media (min-width: 980px){
  /* stop using the grid so we can fix the sidebar and offset main */
  .wrapper{ display: block !important; }

  .sidebar{
    position: fixed;            /* stays put while page scrolls */
    left: 0; top: 0; bottom: 0;
    width: 300px;
    height: 100vh;
    overflow: hidden;           /* no inner scrollbar / no grey bar */
    /* slightly tighter spacing so everything fits without scrolling */
    padding: 16px !important;
    gap: 14px !important;
  }

  /* content area shifts right, so nothing is hidden under the sidebar */
  .main{ margin-left: 300px !important; }

  /* compact sidebar visuals so all items remain visible */
  .brand img{ width: 60px; height: 60px; }
  .brand-name{ font-size: 20px; }
  .tag{ font-size: 12px; }
  .nav a{ margin: 8px 0; padding: 10px 12px; }
  .cta-side{ margin-top: 12px; }
}

/* Hide any accidental duplicate nav (safety net) */
.sidebar .nav + .nav { display: none !important; }

/* === Hero brand line: keep logo + title centered/visible === */
@media (min-width: 980px){
  .hero-brand{
    align-items: center;   /* vertical alignment of logo and text */
    gap: 14px;
  }
  .hero-brand-title{
    white-space: nowrap;   /* keep on one line on desktop */
    line-height: 1.1;
    font-size: clamp(32px, 3.6vw, 48px);
  }
}

/* === Push the WHY CHOOSE US card down a bit (desktop) === */
@media (min-width: 980px){
  .hero-content{ align-items: flex-start !important; }
  .hero .quote{
    position: relative;
    top: clamp(20px, 2.2vw, 56px) !important;  /* adjust to taste */
  }
}

/* Keep a stable right scrollbar (prevents layout shift) */
html{ scrollbar-gutter: stable both-edges; }
/* 1) Remove the extra left gutter (white bar) */
html{
  /* was: stable both-edges; */
  scrollbar-gutter: stable;
}

/* 2) Make hero columns less 50/50 so the CTA fits comfortably */
@media (min-width: 1200px){
  /* widen left column, narrow right */
  .hero-content{
    grid-template-columns: 1.25fr 0.75fr !important;
  }
  /* keep the WHY CHOOSE US card from getting too wide */
  .hero .quote{
    max-width: 560px;
    top: clamp(12px, 2vw, 36px);   /* small nudge down; adjust if needed */
  }
}

/* (Optional) If your sidebar CTA is just out of view on short screens,
   tighten spacing on the fixed desktop sidebar so everything fits */
@media (min-width: 980px) and (max-height: 850px){
  .sidebar{ padding: 14px !important; gap: 12px !important; }
  .brand img{ width: 56px; height: 56px; }
  .brand-name{ font-size: 19px; }
  .nav a{ margin: 8px 0; padding: 9px 12px; }
  .cta-side{ margin-top: 10px; padding: 12px; }
}
@media (min-width: 980px) and (max-height: 720px){
  .tag{ display: none; }                 /* save vertical space */
  .nav a{ margin: 6px 0; padding: 8px 10px; }
}
/* Compact the sidebar items above the CTA and lift the CTA (desktop only) */
@media (min-width: 980px){
  /* tighter sidebar padding + gaps */
  .sidebar{
    padding: 12px 16px !important;
    gap: 12px !important;
  }

  /* brand row smaller */
  .brand{ gap: 8px; }
  .brand img{ width: 48px; height: 48px; }        /* logo smaller */
  .brand-name{ font-size: 20px; line-height: 1.1; }/* title smaller */
  .tag{ font-size: 12px; opacity: .9; }            /* subtitle smaller */

  /* menu buttons smaller + closer together */
  .nav a{
    font-size: 16px;
    padding: 9px 12px;
    margin: 6px 0;
    border-radius: 14px;
  }

  /* make the CTA more compact */
  .cta-side{
    padding: 12px 14px;
    border-radius: 14px;
    margin-top: 8px !important;
    position: relative;
    top: -22px;                       /* LIFT the CTA up — adjust to taste */
  }
  .cta-side strong{ font-size: 18px; }
  .cta-side .phone{ font-size: 16px; padding: 10px 14px; }
}

/* On shorter desktops, lift the CTA a bit more and hide the tiny tagline */
@media (min-width: 980px) and (max-height: 820px){
  .cta-side{ top: -34px; }
}
@media (min-width: 980px) and (max-height: 720px){
  .cta-side{ top: -46px; }
  .tag{ display: none; }              /* saves vertical space when needed */
}
/* --- Sidebar: prevent CTA from clipping the Contact item (desktop) --- */
@media (min-width: 980px){
  /* Make the sidebar a column layout: brand (top) + nav (fills) + CTA (bottom) */
  .sidebar{
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 300px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    overflow: hidden;                /* no whole-sidebar scrollbar */
  }

  /* Let the nav be the scrollable area if content is tall, but hide its scrollbar */
  .sidebar .nav{
    flex: 1 1 auto;
    overflow: auto;
    padding-right: 2px;              /* avoid accidental clipping on the right */
    scrollbar-width: none;           /* Firefox hide */
  }
  .sidebar .nav::-webkit-scrollbar{  /* WebKit hide */
    width: 0; height: 0;
  }

  /* CTA always at the bottom, no negative offsets */
  .cta-side{
    position: static !important;
    top: auto !important;
    margin-top: auto !important;     /* push it to bottom of the sidebar */
    border-radius: 14px;
    padding: 12px 14px;
  }

  /* Slightly smaller menu pills to free some space */
  .nav a{
    font-size: 16px;
    padding: 9px 12px;
    margin: 6px 0;
    border-radius: 14px;
  }

  /* Compact brand line a bit so everything fits cleanly */
  .brand{ gap: 8px; }
  .brand img{ width: 52px; height: 52px; }
  .brand-name{ font-size: 20px; line-height: 1.1; }
  .tag{ font-size: 12px; opacity: .9; }
}

/* Keep the page scrollbar stable on the right (no extra left gutter) */
html{ scrollbar-gutter: stable; }
/* Phone layout: put the hero logo ABOVE the title */
@media (max-width: 680px){
  .hero-brand{
    display: flex;                 /* keep using flex */
    flex-direction: column !important; /* stack vertically */
    align-items: center; 
    gap: 8px;
  }

  /* Logo size on phones */
  .hero-brand img,
  .hero-logo img{
    width: 64px;
    height: 64px;
  }

  /* Title & tagline centered on phones */
  .hero-brand-title{
    white-space: normal;           /* allow wrapping */
    text-align: center;
    line-height: 1.15;
    font-size: clamp(26px, 7vw, 34px);
  }

  .hero-tagline{                   /* if you use a tagline under the title */
    text-align: center;
    margin-top: 2px;
  }
}
/* ===========================
   iPad / Tablet polish
   (landscape & portrait iPads)
   =========================== */
@media (min-width: 980px) and (max-width: 1199px){

  /* Make the fixed sidebar a bit slimmer so the content breathes */
  .sidebar{
    width: 280px !important;
    padding: 14px 14px !important;
  }
  .main{
    margin-left: 280px !important;
  }

  /* Tidy brand row and menu spacing so everything fits neatly */
  .brand img{ width: 50px; height: 50px; }
  .brand-name{ font-size: 19px; }
  .tag{ font-size: 12px; }
  .nav a{ font-size: 16px; padding: 9px 12px; margin: 6px 0; }

  /* Hero: stack the two columns so the quote card sits below the title/CTAs */
  .hero-content{
    grid-template-columns: 1fr !important;  /* single column */
    align-items: flex-start !important;
    gap: 16px;
  }
  .hero-brand{ gap: 10px; }
  .hero-brand-title{
    white-space: nowrap;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.1;
  }

  /* Ensure the quote card doesn’t float/overlap and fills width nicely */
  .hero .quote{
    position: static !important;
    max-width: 100% !important;
    margin-top: 6px;
  }

  /* Let the hero blurb area (white bubble) be comfortable */
  .hero .blurb,
  .hero .hero-note{ max-width: 100%; }

  /* Sections and grids: comfortable line length + clean two-column cards */
  .section{ width: min(980px, 92%) !important; }
  .grid-2{ grid-template-columns: 1fr 1fr !important; gap: 18px; }
  .cards{ grid-template-columns: 1fr 1fr !important; gap: 16px; }

  /* Service image beside Popular Services: keep it neat and not too tall */
  .doorhanger,
  .media-right,
  .services-photo{
    border-radius: 16px;
    overflow: hidden;
  }
  .doorhanger img,
  .media-right img,
  .services-photo img{
    width: 100%;
    height: 260px;
    object-fit: cover;
  }

  /* Pills/buttons scale a touch smaller so the row doesn’t wrap awkwardly */
  .btn{ padding: 11px 16px; }
  .pill{ padding: 9px 12px; font-size: 14px; }
}

/* Slight tablet portrait (820–979px) – keep the stacking behavior */
@media (min-width: 820px) and (max-width: 979px){
  .hero-content{
    grid-template-columns: 1fr !important;
    align-items: flex-start !important;
    gap: 14px;
  }
  .hero .quote{
    position: static !important;
    max-width: 100% !important;
  }
  .cards{ grid-template-columns: 1fr 1fr !important; }
}
/* ===== De-clutter the HERO & WHY card ===== */

/* Laptop/desktop */
@media (min-width: 1200px){
  /* Taller hero with more breathing room */
  .hero{
    padding-block: clamp(28px, 4.5vw, 68px) clamp(32px, 5vw, 80px);
  }
  .hero-content{
    grid-template-columns: 1.15fr 0.85fr !important; /* give left side more room */
    align-items: flex-start !important;
    gap: clamp(18px, 3vw, 28px);
  }
  /* Title line + tagline spacing */
  .hero-brand{ gap: 14px; margin-bottom: 10px; }
  .hero-brand-title{ line-height: 1.1; }
  .hero-tagline{ margin-top: 2px; opacity: .95; }

  /* White message bubble (“Homes & offices…”) */
  .hero .blurb{
    max-width: 940px;
    padding: clamp(14px, 2vw, 18px) clamp(16px, 2.6vw, 22px);
  }

  /* Primary CTA row */
  .btns{ gap: 12px; flex-wrap: wrap; }
  .btn{ padding: 12px 18px; }

  /* Frequency pills row */
  .pills, .badges{ gap: 10px; margin-top: 10px; }

  /* WHY CHOOSE US card: wider padding + relaxed line length */
  .hero .quote{
    position: static !important;      /* no absolute nudge */
    max-width: 640px;
    padding: clamp(16px, 2.2vw, 25px);
    margin-top: clamp(10px, 1.8vw, 25px);
  }
}

/* iPad widths — stack hero columns so it’s airy and never cramped */
@media (min-width: 980px) and (max-width: 1199px){
  .hero{
    padding-block: clamp(24px, 5vw, 56px) clamp(28px, 5.5vw, 64px);
  }
  .hero-content{
    grid-template-columns: 1fr !important;
    align-items: flex-start !important;
    gap: 18px;
  }
  .hero .blurb{ max-width: 100%; }
  .hero .quote{
    position: static !important;
    max-width: 100%;
    margin-top: 8px;
    padding: clamp(14px, 2.4vw, 20px);
  }
}

/* Add a bit more space after the hero before next section */
.section:first-of-type{
  margin-top: clamp(24px, 4vw, 40px);
}
/* Move the banner (right-side image) above "What we do" on bigger phones/small tablets */
@media (min-width: 600px) and (max-width: 1199px){
  #services .grid-2{
    grid-template-columns: 1fr !important;   /* stack */
    gap: 18px;
  }
  #services .grid-2 > .doorhanger{
    order: -1;                                /* show first */
    margin: 0 auto 8px;                       /* center + small gap */
    max-width: 780px;
    width: 100%;
  }
  #services .doorhanger img{
    display: block;
    width: 100%;
    height: clamp(220px, 45vw, 380px);
    object-fit: cover;                        /* neat crop, no distortion */
    border-radius: 16px;
  }
}
.map-embed{ position:relative; text-align:center; }
.map-open{ display:none; margin-top:12px; font-weight:700; }
.map-embed.is-blocked iframe{ display:none; }
.map-embed.is-blocked .map-open{ display:inline-block; }
/* Move WHY CHOOSE US way down (desktop: large offset) */
@media (min-width: 980px) {
  /* prevent clipping from any parent */
  .main,
  .hero,
  .hero-content {
    overflow: visible !important;
  }

  /* force the hero to top-align columns so the quote can be pushed visually */
  .hero-content {
    align-items: flex-start !important;
  }

  .hero .quote {
    position: relative !important;
    align-self: flex-start !important;
    z-index: 3 !important;

    /* make card a bit narrower so it doesn't dominate when lowered */
    max-width: 520px !important;
    padding: clamp(12px, 1.6vw, 20px) !important;

    margin-top: 0 !important;

    /* BIG drop — increases with viewport width */
    top: clamp(100px, 4vw, 200px) !important;

    /* fallback transform for smoother visuals if needed */
    transform: translateY(0) !important;

    box-shadow: var(--shadow-lg);
    transition: top .22s ease, transform .22s ease;
  }
}