:root{
 --charcoal:#2b2d2d;
 --ink:#2c2f31;
 --blue:#3f72ad;
 --steel:#405e81;
 --off:#f4f3f4;
 --line:#d9dee4;
 --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}
a{color:inherit}
img{display:block;max-width:100%}

/* Exact same header on every page — fixes logo sizing/position globally */
.reference-header{height:110px;position:relative;overflow:hidden;background:#fff;border-bottom:1px solid #ececec}
.reference-header>img{width:100%;height:110px;object-fit:cover;object-position:center top}
.hotspots{position:absolute;inset:0}
.hotspots a{position:absolute;top:0;height:110px;display:block;border-bottom:3px solid transparent}
.hotspots a.active{border-bottom-color:var(--blue)}
.hotspots .home{left:735px;width:70px}
.hotspots .services{left:830px;width:110px}
.hotspots .gallery{left:968px;width:78px}
.hotspots .bath-guide{left:1071px;width:167px}
.hotspots .about{left:1275px;width:88px}
.hotspots .contact{left:1394px;width:87px}

/* Home */
.home-hero{height:475px;position:relative;overflow:hidden}
.home-hero>img{width:100%;height:475px;object-fit:cover;object-position:center}
.quote-hotspot{position:absolute;left:78px;top:279px;width:204px;height:52px}
.home-services{height:218px;position:relative;background:var(--steel);overflow:hidden}
.home-services>img{width:100%;height:218px;object-fit:cover}
.service-hotspots{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr)}
.service-hotspots a{display:block}
.welcome{height:179px;background:var(--off);text-align:center;padding-top:34px}
.eyebrow{color:#40536a;font-size:15px;margin-bottom:10px}
.welcome h2{margin:0 0 10px;font-size:29px;line-height:1.13;font-weight:800}
.accent{width:72px;height:4px;background:var(--blue);margin:0 auto 13px}
.accent.left{margin-left:0}
.welcome p{margin:0 auto;color:#55585c;max-width:860px;font-size:15px;line-height:1.48}
.contact-band{padding:46px max(60px,calc((100vw - 1418px)/2));display:flex;justify-content:space-between;align-items:center;background:#fff}
.contact-band h2{font-size:31px;margin:0 0 8px}.contact-band p{margin:0;color:#5d6165}
.contact-actions{display:flex;gap:12px}.contact-actions a{padding:13px 18px;text-decoration:none;border:1px solid var(--blue);color:#315e91}
.contact-actions a:first-child{background:var(--blue);color:#fff}

/* Internal page hero */
.inner-hero{height:355px;position:relative;overflow:hidden;background:#2e2d2b}
.inner-hero>img{width:100%;height:100%;object-fit:cover;object-position:center}
.inner-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,28,27,.88) 0%,rgba(28,28,27,.72) 35%,rgba(30,30,30,.25) 58%,rgba(0,0,0,.02) 80%)}
.inner-hero-copy{position:absolute;left:max(78px,calc((100vw - 1380px)/2));top:54px;color:#fff;max-width:650px}
.kicker{font-size:14px;letter-spacing:1.4px;color:#dce7f1;margin-bottom:10px}
.inner-hero h1{font-size:45px;line-height:1.04;letter-spacing:-1.2px;margin:0 0 17px}
.inner-hero p{font-size:18px;line-height:1.55;max-width:600px;margin:0 0 21px}
.blue-button{display:inline-block;padding:14px 20px;background:var(--blue);color:#fff;text-decoration:none;border-radius:3px}

/* Sections */
.section{padding:62px 0}
.offwhite{background:var(--off)}
.white{background:#fff}
.content-wrap{max-width:1380px;margin:0 auto;padding:0 58px}
.section-heading{margin-bottom:30px}
.section-heading.centre{text-align:center}
.section-heading span{font-size:14px;color:#52687f;letter-spacing:1px}
.section-heading h2{font-size:32px;line-height:1.12;margin:7px 0 11px}
.section-heading.centre .accent{margin-left:auto;margin-right:auto}

.service-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-cards article{background:#fff;border:1px solid #dfe3e7;box-shadow:0 8px 22px rgba(28,42,58,.05);overflow:hidden;scroll-margin-top:130px}
.service-cards img{width:100%;height:185px;object-fit:cover}
.service-cards article>div{padding:21px 22px 24px}
.service-cards h3{font-size:21px;margin:0 0 9px;color:#2e4e70}
.service-cards p{font-size:15px;line-height:1.55;margin:0;color:#5a5e62}

.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps>div{padding:28px 18px 30px;border-right:1px solid var(--line);min-width:0}
.steps>div:last-child{border-right:0}
.steps b{display:block;color:var(--blue);font-size:28px;margin-bottom:12px}
.steps h3{margin:0 0 7px}.steps p{margin:0;color:#5b6064;line-height:1.5}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px}
.gallery-grid figure{margin:0;background:#fff;border:1px solid #dfe3e7;overflow:hidden}
.gallery-grid img{width:100%;height:340px;object-fit:cover}
.gallery-grid figcaption{padding:18px 20px 21px}
.gallery-grid figcaption strong,.gallery-grid figcaption span{display:block}
.gallery-grid figcaption strong{font-size:19px;color:#2f4f70;margin-bottom:6px}
.gallery-grid figcaption span{color:#606468;font-size:15px}

/* Guides */
.guide-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:54px;align-items:start}
.guide-nav{position:sticky;top:24px;background:#fff;border:1px solid #dfe3e7;padding:20px}
.guide-nav strong{display:block;font-size:19px;color:#2e4e70;margin-bottom:12px}
.guide-nav a{display:block;text-decoration:none;padding:9px 0;border-top:1px solid #edf0f2;color:#51575d;font-size:14px}
.guide-nav .guide-switch{margin-top:15px;color:#315f91;font-weight:700}
.guide-article{background:#fff;border:1px solid #dfe3e7;padding:12px 38px}
.guide-article section{padding:32px 0;border-bottom:1px solid #e5e8eb;scroll-margin-top:28px}
.guide-article section:last-child{border-bottom:0}
.guide-number{display:block;color:var(--blue);font-size:14px;font-weight:700;letter-spacing:1px;margin-bottom:8px}
.guide-article h2{font-size:27px;line-height:1.18;margin:0 0 13px;color:#2d4054}
.guide-article p{font-size:16px;line-height:1.68;color:#565b60;margin:0}
.guide-tip{margin-top:18px;padding:16px 18px;border-left:4px solid var(--blue);background:#eef4fa;color:#4d555d;line-height:1.55}
.guide-tip strong{color:#2e4e70;margin-right:7px}

/* Footer */
.site-footer{background:#252b31;color:#dfe5eb;padding:28px 0}
.footer-inner{max-width:1380px;margin:0 auto;padding:0 58px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.footer-inner>div:first-child strong,.footer-inner>div:first-child span{display:block}
.footer-inner>div:first-child strong{font-size:18px}.footer-inner>div:first-child span{font-size:13px;color:#bfc8d0;margin-top:3px}
.footer-links{display:flex;gap:24px;align-items:center;font-size:14px}
.footer-links a{text-decoration:none;color:#dfe5eb}

@media(max-width:1200px){
 .reference-header>img{width:1536px;max-width:none;transform:translateX(calc((100vw - 1536px)/2))}
 .content-wrap,.footer-inner{padding-left:34px;padding-right:34px}
 .service-cards{grid-template-columns:repeat(2,1fr)}
 .hotspots{display:none}
}
@media(max-width:800px){
 .reference-header{height:76px}
 .reference-header>img{height:76px;width:auto;min-width:1060px;transform:translateX(-25px);object-fit:cover}
 .home-hero,.home-hero>img{height:auto}
 .quote-hotspot,.service-hotspots{display:none}
 .home-services{height:auto}.home-services>img{height:auto}
 .welcome{height:auto;padding:32px 20px 38px}
 .contact-band{padding:38px 22px;flex-direction:column;align-items:flex-start;gap:22px}
 .inner-hero{height:385px}
 .inner-hero-copy{left:24px;right:24px;top:48px}
 .inner-hero h1{font-size:39px}
 .content-wrap,.footer-inner{padding-left:22px;padding-right:22px}
 .service-cards,.gallery-grid,.steps,.guide-layout{grid-template-columns:1fr}
 .steps>div{border-right:0;border-bottom:1px solid var(--line)}
 .steps>div:last-child{border-bottom:0}
 .gallery-grid img{height:260px}
 .guide-nav{position:static}
 .guide-article{padding:8px 22px}
 .footer-inner,.footer-links{flex-direction:column;align-items:flex-start}
}


/* ===========================================================
   v10 — restore homepage blue/white icon language internally
   =========================================================== */

/* Blue icon badges on service cards */
.service-cards article{position:relative}
.service-cards article>div{position:relative;padding-top:34px}
.icon-badge{
  width:58px;height:58px;border-radius:50%;
  background:var(--blue);
  display:flex;align-items:center;justify-content:center;
  position:absolute;left:22px;top:-29px;
  border:4px solid #fff;
  box-shadow:0 5px 14px rgba(36,69,103,.16);
}
.icon-badge img{width:31px;height:31px;object-fit:contain}
.service-cards h3{padding-top:4px}

/* Reusable steel-blue feature band echoing the homepage icon strip */
.icon-feature-band{
  background:var(--steel);
  color:#fff;
  padding:28px 0;
}
.icon-feature-grid{
  max-width:1180px;margin:0 auto;padding:0 58px;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.icon-feature-grid.four{grid-template-columns:repeat(4,1fr)}
.icon-feature-grid>div{
  min-height:126px;
  text-align:center;
  padding:4px 28px;
  border-right:1px solid rgba(255,255,255,.35);
}
.icon-feature-grid>div:last-child{border-right:0}
.round-icon{
  width:58px;height:58px;margin:0 auto 10px;
  display:flex;align-items:center;justify-content:center;
}
.round-icon img{width:54px;height:54px}
.icon-feature-grid strong{display:block;font-size:17px;margin-bottom:6px}
.icon-feature-grid p{margin:0;color:#eef4f9;font-size:14px;line-height:1.4}
.icon-feature-band.compact{padding:20px 0}
.icon-feature-band.compact .icon-feature-grid>div{min-height:88px}
.icon-feature-band.compact .round-icon{width:48px;height:48px;margin-bottom:6px}
.icon-feature-band.compact .round-icon img{width:44px;height:44px}

/* Gallery tiles */
.gallery-grid figure{position:relative}
.gallery-grid figcaption{position:relative;padding-top:32px}
.gallery-icon{
  position:absolute;left:20px;top:-27px;
  width:54px;height:54px;border-radius:50%;
  background:var(--blue);border:4px solid #fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 14px rgba(36,69,103,.15);
}
.gallery-icon img{width:29px;height:29px;object-fit:contain}
.gallery-grid figcaption strong{padding-top:2px}

/* Guide nav blue icon title */
.guide-title{
  display:flex!important;align-items:center;gap:10px;
  color:#2e4e70!important;
}
.guide-title>span{
  width:42px;height:42px;border-radius:50%;
  background:var(--blue);display:flex;align-items:center;justify-content:center;flex:0 0 42px;
}
.guide-title>span img{width:24px;height:24px}

/* Guide chapter markers */
.guide-chapter-icon{
  display:flex;align-items:center;gap:12px;
  margin-bottom:11px;
}
.guide-chapter-icon span{
  width:48px;height:48px;border-radius:50%;
  background:var(--blue);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(36,69,103,.12);
}
.guide-chapter-icon span img{width:27px;height:27px}
.guide-chapter-icon b{
  color:var(--blue);
  font-size:14px;
  letter-spacing:1px;
}
.guide-article section{position:relative}

/* Section headings get subtle white-on-blue emblem on selected pages */
.section-heading span:first-child{font-weight:700}

@media(max-width:800px){
  .icon-feature-grid,.icon-feature-grid.four{grid-template-columns:1fr 1fr;padding:0 22px}
  .icon-feature-grid>div{border-bottom:1px solid rgba(255,255,255,.28);min-height:118px;padding:8px 18px 18px}
  .icon-feature-grid>div:nth-child(2n){border-right:0}
  .icon-feature-grid>div:last-child{border-bottom:0}
}
@media(max-width:520px){
  .icon-feature-grid,.icon-feature-grid.four{grid-template-columns:1fr}
  .icon-feature-grid>div{border-right:0}
}


/* v12 — centre Gallery card icon badges */
.gallery-grid figcaption{
  text-align:center;
  padding-top:34px;
}
.gallery-icon{
  left:50%;
  transform:translateX(-50%);
}
.gallery-grid figcaption strong,
.gallery-grid figcaption span:not(.gallery-icon){
  text-align:center;
}


/* v13 — TRUE centred Gallery icons.
   Override the earlier absolute badge positioning completely. */
.gallery-grid figcaption{
  text-align:center !important;
  padding:0 20px 23px !important;
}
.gallery-grid .gallery-icon{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  display:flex !important;
  width:58px !important;
  height:58px !important;
  margin:-29px auto 13px auto !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50%;
  background:var(--blue);
  border:4px solid #fff;
  box-shadow:0 5px 14px rgba(36,69,103,.15);
}
.gallery-grid .gallery-icon img{
  width:30px !important;
  height:30px !important;
  margin:0 auto !important;
  object-fit:contain;
}
.gallery-grid figcaption strong{
  display:block;
  text-align:center !important;
  padding:0 !important;
  margin:0 0 7px !important;
}
.gallery-grid figcaption > span:not(.gallery-icon){
  display:block;
  text-align:center !important;
}


/* ==========================================================
   MASTER BASELINE CONSISTENCY PASS
   Shared logo/header + centred icon alignment across pages
   ========================================================== */

/* Keep the approved reference header geometry consistent everywhere */
.reference-header{
  height:110px !important;
  position:relative !important;
  overflow:hidden !important;
  background:#fff !important;
  border-bottom:1px solid #ececec !important;
}
.reference-header > img{
  width:100% !important;
  height:110px !important;
  object-fit:cover !important;
  object-position:center top !important;
  display:block !important;
}

/* All circular/line-icon treatments centred by construction */
.icon-badge,
.gallery-icon,
.round-icon,
.guide-title > span,
.guide-chapter-icon > span,
.section-icon,
.portfolio-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.icon-badge img,
.gallery-icon img,
.round-icon img,
.guide-title > span img,
.guide-chapter-icon > span img,
.section-icon img,
.portfolio-icon img{
  display:block !important;
  margin:0 auto !important;
}

/* Gallery card icon badges centred to the card */
.gallery-grid .gallery-icon,
.gallery-item .gallery-icon{
  left:auto !important;
  top:auto !important;
  transform:none !important;
  position:relative !important;
  margin:-29px auto 13px !important;
}

/* Centre captions where gallery icon badges are used */
.gallery-grid figcaption,
.gallery-item figcaption{
  text-align:center !important;
}

/* Mobile preserves the same logo/header treatment */
@media(max-width:800px){
  .reference-header{
    height:76px !important;
  }
  .reference-header > img{
    height:76px !important;
    width:auto !important;
    min-width:1060px !important;
    max-width:none !important;
    transform:translateX(-25px);
  }
}


/* Clean Gallery rebuild starting point */
.gallery-reset-panel{
  max-width:760px;
  margin:30px auto 0;
  background:#fff;
  border:1px solid #dfe3e7;
  text-align:center;
  padding:38px 34px 40px;
  box-shadow:0 8px 24px rgba(28,42,58,.05);
}
.gallery-reset-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
}
.gallery-reset-icon img{
  width:34px;
  height:34px;
  display:block;
  margin:0 auto;
}
.gallery-reset-panel h3{
  margin:0 0 10px;
  color:#2e4e70;
  font-size:24px;
}
.gallery-reset-panel p{
  margin:0;
  color:#606468;
  line-height:1.6;
}


/* Liverpool & Wirral footer compatibility */
.footer-links{flex-wrap:wrap}
.footer-links .coverage-location{white-space:nowrap}
@media(max-width:800px){
  .footer-links{gap:10px}
  .footer-links .coverage-location{white-space:normal}
}


/* ==========================================================
   MOBILE NAVIGATION + MOBILE HOMEPAGE FIX
   Desktop styling remains unchanged.
   ========================================================== */

.mobile-site-menu{
  display:none;
}

@media(max-width:1200px){
  .reference-header{
    overflow:visible !important;
    z-index:1000;
  }

  /* The original raster nav is hidden at this width, so provide a real menu. */
  .mobile-site-menu{
    display:block;
    position:absolute;
    z-index:60;
    right:18px;
    top:50%;
    transform:translateY(-50%);
  }

  .mobile-site-menu summary{
    list-style:none;
    width:46px;
    height:42px;
    border:1px solid #d7dce1;
    border-radius:4px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(25,39,52,.08);
  }

  .mobile-site-menu summary::-webkit-details-marker{display:none}

  .mobile-menu-icon,
  .mobile-menu-icon::before,
  .mobile-menu-icon::after{
    width:22px;
    height:2px;
    background:#2f3943;
    display:block;
    position:relative;
  }

  .mobile-menu-icon::before,
  .mobile-menu-icon::after{
    content:"";
    position:absolute;
    left:0;
  }

  .mobile-menu-icon::before{top:-7px}
  .mobile-menu-icon::after{top:7px}

  .mobile-site-menu[open] .mobile-menu-icon{
    background:transparent;
  }

  .mobile-site-menu[open] .mobile-menu-icon::before{
    top:0;
    transform:rotate(45deg);
  }

  .mobile-site-menu[open] .mobile-menu-icon::after{
    top:0;
    transform:rotate(-45deg);
  }

  .mobile-menu-panel{
    position:absolute;
    right:0;
    top:calc(100% + 13px);
    width:min(330px,calc(100vw - 28px));
    background:#fff;
    border:1px solid #dfe3e7;
    box-shadow:0 12px 30px rgba(28,42,55,.16);
    padding:8px 0;
  }

  .mobile-menu-panel a{
    display:block;
    padding:13px 18px;
    text-decoration:none;
    color:#2f3943;
    font-size:15px;
    line-height:1.2;
    border-bottom:1px solid #edf0f2;
  }

  .mobile-menu-panel a:last-child{border-bottom:0}

  .mobile-menu-panel a:hover,
  .mobile-menu-panel a:focus,
  .mobile-menu-panel a.active{
    color:#315e91;
    background:#f3f7fb;
  }
}

@media(max-width:800px){
  /* Leave clear space for the menu button over the raster header. */
  .reference-header .logo-home-link{
    width:calc(100% - 86px) !important;
    max-width:285px;
  }

  .mobile-site-menu{
    right:14px;
  }

  /* The panoramic desktop hero was collapsing to ~130px high on phones.
     Give it a proper mobile hero height and retain the approved image. */
  .home-hero{
    height:430px !important;
    min-height:430px;
  }

  .home-hero>img{
    width:100% !important;
    height:430px !important;
    object-fit:cover !important;
    object-position:64% center !important;
  }

  .home-hero-copy{
    left:24px !important;
    right:24px !important;
    top:42px !important;
    max-width:330px;
  }

  .home-hero-copy h1{
    font-size:30px !important;
    line-height:1.16 !important;
    margin-bottom:18px !important;
  }

  .home-hero-copy p{
    font-size:16px !important;
    line-height:1.45 !important;
    margin-bottom:24px !important;
  }

  .home-hero-copy p br{
    display:none;
  }

  .home-hero-copy .hero-cta{
    width:auto;
    min-width:220px !important;
    height:50px !important;
    font-size:14px !important;
    gap:18px !important;
  }

  /* Keep the familiar services strip readable on phones instead of shrinking
     six service columns into a tiny unreadable image. It scrolls naturally. */
  .home-services{
    height:170px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }

  .home-services>img{
    width:1200px !important;
    max-width:none !important;
    height:170px !important;
    object-fit:fill !important;
  }

  .home-services .service-hotspots{
    display:grid !important;
    width:1200px;
    height:170px;
    grid-template-columns:repeat(6,200px);
  }

  .home-services .service-hotspots a{
    scroll-snap-align:start;
  }

  .contact-actions{
    width:100%;
    flex-wrap:wrap;
  }

  .contact-actions a{
    text-align:center;
  }

  .footer-links{
    width:100%;
  }
}


/* ==========================================================
   MOBILE FIX v2 — stable viewport menu + no horizontal page overflow
   ========================================================== */
html,body{
  max-width:100%;
}

@media(max-width:1200px){
  html,body{
    overflow-x:hidden !important;
  }

  .reference-header{
    overflow:hidden !important;
    z-index:1000 !important;
  }

  .mobile-site-menu{
    display:block !important;
    position:absolute !important;
    z-index:10000 !important;
    right:18px !important;
    top:34px !important;
    transform:none !important;
  }

  .mobile-site-menu summary{
    position:relative;
    z-index:10002;
  }

  /* Keep the dropdown attached to the viewport rather than the wide raster header.
     This avoids clipping and the menu jumping off-screen. */
  .mobile-menu-panel{
    position:fixed !important;
    z-index:10001 !important;
    top:110px !important;
    right:14px !important;
    left:auto !important;
    width:min(330px,calc(100vw - 28px)) !important;
    max-height:calc(100vh - 126px);
    overflow-y:auto;
    box-sizing:border-box;
  }
}

@media(max-width:800px){
  .reference-header{
    height:76px !important;
    overflow:hidden !important;
  }

  /* Keep the familiar logo crop but take the wide raster image out of layout,
     so it can no longer create blank space to the right of the page. */
  .reference-header > img{
    position:absolute !important;
    inset:0 auto auto -25px !important;
    width:1060px !important;
    min-width:0 !important;
    max-width:none !important;
    height:76px !important;
    transform:none !important;
    object-fit:cover !important;
    object-position:left top !important;
  }

  .reference-header .logo-home-link{
    left:18px !important;
    top:5px !important;
    width:270px !important;
    max-width:calc(100vw - 90px) !important;
    height:66px !important;
  }

  .mobile-site-menu{
    right:14px !important;
    top:17px !important;
  }

  .mobile-menu-panel{
    top:76px !important;
    right:10px !important;
    width:calc(100vw - 20px) !important;
    max-height:calc(100vh - 86px) !important;
  }

  .home-hero{
    width:100% !important;
    max-width:100vw !important;
    overflow:hidden !important;
  }

  .home-hero-copy{
    box-sizing:border-box;
    width:auto !important;
    max-width:calc(100vw - 48px) !important;
  }

  .home-hero-copy h1,
  .home-hero-copy p{
    max-width:100% !important;
  }

  /* Keep the service strip swipeable, but contain it strictly inside
     the viewport so it cannot widen the whole document. */
  .home-services{
    position:relative !important;
    width:100% !important;
    max-width:100vw !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
  }

  .home-services > img{
    display:block !important;
    width:1200px !important;
    min-width:1200px !important;
    max-width:none !important;
    height:170px !important;
  }

  .home-services .service-hotspots{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    width:1200px !important;
    height:170px !important;
  }

  .welcome,
  .contact-band,
  .site-footer,
  .footer-inner{
    max-width:100vw !important;
    box-sizing:border-box !important;
  }

  .contact-band{
    gap:18px !important;
  }

  .contact-actions{
    min-width:0 !important;
  }
}


/* ==========================================================
   iPHONE / iOS SAFARI STABILITY PASS
   Desktop styling is unchanged.
   ========================================================== */

@supports (-webkit-touch-callout: none) {
  html {
    -webkit-text-size-adjust: 100%;
  }
}

@media(max-width:1200px){
  html, body {
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }

  body {
    min-height:100%;
  }

  /* Replaces <details> navigation with a plain button + body-level drawer.
     This avoids Safari clipping/state quirks seen with fixed descendants. */
  .mobile-site-menu{display:none !important}

  .mobile-menu-button{
    position:absolute;
    z-index:10020;
    right:18px;
    top:34px;
    width:46px;
    height:42px;
    padding:0;
    border:1px solid #d7dce1;
    border-radius:4px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 8px rgba(25,39,52,.08);
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
    touch-action:manipulation;
  }

  .mobile-menu-icon,
  .mobile-menu-icon::before,
  .mobile-menu-icon::after{
    display:block;
    width:22px;
    height:2px;
    background:#2f3943;
    position:relative;
    transition:transform .18s ease, background .18s ease, top .18s ease;
  }

  .mobile-menu-icon::before,
  .mobile-menu-icon::after{
    content:"";
    position:absolute;
    left:0;
  }

  .mobile-menu-icon::before{top:-7px}
  .mobile-menu-icon::after{top:7px}

  body.mobile-menu-open .mobile-menu-icon{background:transparent}
  body.mobile-menu-open .mobile-menu-icon::before{top:0;transform:rotate(45deg)}
  body.mobile-menu-open .mobile-menu-icon::after{top:0;transform:rotate(-45deg)}

  .mobile-menu-backdrop{
    position:fixed;
    inset:0;
    z-index:10010;
    background:rgba(15,24,32,.36);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, visibility .18s ease;
    -webkit-tap-highlight-color:transparent;
  }

  .mobile-menu-drawer{
    position:fixed;
    z-index:10015;
    top:110px;
    right:14px;
    width:min(330px, calc(100% - 28px));
    max-height:calc(100vh - 126px);
    max-height:calc(100dvh - 126px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    background:#fff;
    border:1px solid #dfe3e7;
    box-shadow:0 12px 30px rgba(28,42,55,.18);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    padding-bottom:max(8px, env(safe-area-inset-bottom));
  }

  body.mobile-menu-open .mobile-menu-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  body.mobile-menu-open .mobile-menu-drawer{
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
  }

  body.mobile-menu-open{
    overflow:hidden;
    touch-action:none;
  }

  .mobile-menu-drawer a{
    display:block;
    padding:14px 18px;
    min-height:46px;
    border-bottom:1px solid #edf0f2;
    color:#2f3943;
    text-decoration:none;
    font-size:16px;
    line-height:1.2;
    -webkit-tap-highlight-color:rgba(49,94,145,.12);
    touch-action:manipulation;
  }
  .mobile-menu-drawer a:last-child{border-bottom:0}
  .mobile-menu-drawer a.active,
  .mobile-menu-drawer a:focus,
  .mobile-menu-drawer a:hover{
    color:#315e91;
    background:#f3f7fb;
  }

  /* iOS Safari form controls zoom when focused below 16px. */
  input, select, textarea, button {
    font-size:16px;
  }

  /* iOS dynamic toolbars: use dynamic viewport units where available. */
  .gallery-lightbox-stage{
    height:calc(100vh - 80px);
    height:calc(100dvh - 80px);
  }
  .gallery-lightbox-image{
    max-height:calc(100vh - 135px);
    max-height:calc(100dvh - 135px);
  }

  /* Prevent wide decorative/raster elements from contributing to page width. */
  main, section, footer, .content-wrap, .footer-inner{
    min-width:0;
    max-width:100%;
  }

  .home-services{
    contain:layout paint;
  }
}

@media(max-width:800px){
  .reference-header{
    height:76px !important;
    min-height:76px !important;
    overflow:hidden !important;
  }

  .mobile-menu-button{
    right:max(12px, env(safe-area-inset-right));
    top:17px;
  }

  .mobile-menu-drawer{
    top:76px;
    right:max(10px, env(safe-area-inset-right));
    width:calc(100% - max(20px, env(safe-area-inset-left) + env(safe-area-inset-right)));
    max-width:360px;
    max-height:calc(100vh - 86px);
    max-height:calc(100dvh - 86px);
  }

  .mobile-menu-backdrop{
    top:76px;
  }

  /* Keep the wide baked header artwork visually cropped without letting it
     create document width on iPhone. */
  .reference-header > img{
    position:absolute !important;
    left:-25px !important;
    top:0 !important;
    width:1060px !important;
    min-width:0 !important;
    max-width:none !important;
    height:76px !important;
    transform:none !important;
  }

  .reference-header .logo-home-link{
    left:18px !important;
    top:5px !important;
    width:min(270px, calc(100% - 90px)) !important;
    height:66px !important;
  }

  /* Contain the horizontal services carousel strictly to its own scroller. */
  .home-services{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
  }
  .home-services > img,
  .home-services .service-hotspots{
    flex:none;
  }

  .contact-field input,
  .contact-field select,
  .contact-field textarea{
    font-size:16px !important;
  }
}

@media(max-width:520px){
  .gallery-lightbox{
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
    padding-bottom:max(14px, env(safe-area-inset-bottom));
  }
}


/* ==========================================================
   DESKTOP GUARD
   Mobile navigation elements exist in the HTML on every page,
   but must never render above the mobile/tablet breakpoint.
   ========================================================== */
.mobile-menu-button,
.mobile-menu-backdrop,
.mobile-menu-drawer{
  display:none;
}

@media(max-width:1200px){
  .mobile-menu-button{
    display:flex;
  }

  .mobile-menu-backdrop,
  .mobile-menu-drawer{
    display:block;
  }
}


/* ==========================================================
   MOBILE BURGER ICON FIX
   Uses three real DOM bars instead of pseudo-elements so the
   icon renders reliably on Android Chrome and iPhone Safari.
   ========================================================== */
@media(max-width:1200px){
  .mobile-menu-icon{
    width:22px !important;
    height:16px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    background:transparent !important;
    position:relative !important;
  }

  .mobile-menu-icon::before,
  .mobile-menu-icon::after{
    content:none !important;
    display:none !important;
  }

  .mobile-menu-icon .burger-bar{
    display:block !important;
    width:22px !important;
    height:2px !important;
    min-height:2px !important;
    border-radius:2px;
    background:#2f3943 !important;
    transform-origin:center;
    transition:transform .18s ease, opacity .18s ease;
  }

  body.mobile-menu-open .mobile-menu-icon .burger-bar:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }

  body.mobile-menu-open .mobile-menu-icon .burger-bar:nth-child(2){
    opacity:0;
  }

  body.mobile-menu-open .mobile-menu-icon .burger-bar:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }
}


/* ==========================================================
   MOBILE MENU V3 — literal hamburger glyph for reliability
   ========================================================== */
.mobile-menu-glyph{
  display:none;
}
@media(max-width:1200px){
  .mobile-menu-button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#2f3943 !important;
    font-family:Arial,Helvetica,sans-serif !important;
    line-height:1 !important;
  }
  .mobile-menu-icon{display:none !important}
  .mobile-menu-glyph{
    display:block !important;
    font-size:28px !important;
    font-weight:400 !important;
    line-height:1 !important;
    width:28px;
    text-align:center;
    color:#2f3943 !important;
  }
}