/* V28 • Site-wide responsive finishing layer.
   Shared by all 61 pages; retains original semantic content, desktop design and SEO data. */
:root{--v28-orange:#ed7544;--v28-ink:#0d2537}
html{scroll-padding-top:92px}
body{overflow-wrap:break-word}
img,svg,video{max-width:100%}
.brand-logo-img{object-fit:contain}
/* Footer: two clear, independent contact methods across every page. */
.footer-contact-methods{display:flex;flex-direction:column;align-items:stretch;gap:9px;margin:18px 0 12px;width:100%;max-width:360px}
.footer-contact-method{display:flex!important;align-items:center!important;gap:12px;min-width:0;min-height:58px;width:100%;padding:10px 12px;border:1px solid rgba(201,225,237,.18);border-radius:12px;color:#eaf2f6!important;background:rgba(255,255,255,.045);text-decoration:none!important;transition:background .2s,border-color .2s}
.footer-contact-method:hover,.footer-contact-method:focus-visible{background:rgba(255,255,255,.09);border-color:rgba(237,117,68,.7)}
.footer-contact-method:focus-visible{outline:2px solid var(--v28-orange);outline-offset:3px}
.footer-contact-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 38px;color:#ffab84;background:rgba(237,117,68,.14)}
.footer-contact-icon svg{height:19px;width:19px;flex:none;display:block}
.footer-contact-value{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;max-width:100%}
.footer-contact-value small{font-size:10px;font-weight:650;letter-spacing:.06em;color:#9eb6c5;line-height:1.3}
.footer-contact-value b{font-size:12px;font-weight:750;color:#fff;line-height:1.5;text-transform:none;letter-spacing:normal;overflow-wrap:anywhere;word-break:normal;max-width:100%}
.footer-licence{font-size:10.5px!important;color:#94aab8!important;line-height:1.7!important;margin:13px 0!important}
.footer-address{display:block!important;color:#bed0da!important;font-size:12px!important;line-height:1.75!important;margin:0 0 12px!important}
.footer-quote-btn{margin-top:15px}
body.service-page .service-footer .footer-location{max-width:none;min-width:0}
body.service-page .service-footer .footer-contact-methods{margin:17px 0 14px;max-width:335px}
body.service-page .service-footer .footer-contact-method{font-size:inherit}
body.service-page .service-footer .footer-contact-value b{font-size:12px;color:#fff}
body.service-page .service-footer .footer-contact-value small{color:#a0b6c3}
body.service-page .service-footer .footer-location address{margin:12px 0 14px}
/* Desktop: give long contact address and email enough actual grid space. */
@media(min-width:1181px){
 .footer-main{grid-template-columns:2fr 1fr 1.12fr 1fr 2fr;column-gap:clamp(20px,2vw,34px)}
 .footer-main>.footer-brand,.footer-main>.footer-col{min-width:0}
 .footer-main>.footer-contact{grid-column:auto}
}
@media(min-width:641px) and (max-width:1180px){
 .footer-main>.footer-contact{grid-column:span 2}
 .footer-main>.footer-contact .footer-contact-methods{max-width:370px}
}
@media(max-width:900px){
 /* Equalized touch targets and predictable mobile header/menu positioning. */
 body.service-page .service-nav{gap:12px;min-width:0}
 body.service-page .service-nav .service-logo{min-width:0}
 body.service-page .nav-actions{flex-shrink:0;gap:8px}
 body.service-page .mobile-menu nav{max-height:min(70vh,600px);overflow-y:auto;overscroll-behavior:contain}
 body.service-page .mobile-menu nav a{min-height:42px;display:flex;align-items:center;white-space:normal}
}
@media(max-width:720px){
 /* Full image visibility: no fixed-height cover crops on narrow screens. */
 body.service-page .hero-img-shell{height:auto!important;min-height:0!important;display:flex;align-items:center;justify-content:center;background:#eaf0f1;border-radius:18px}
 body.service-page .hero-img-shell img{width:100%!important;height:auto!important;max-height:460px!important;object-fit:contain!important;object-position:center!important}
 body.service-page .hero-img-shell::after{display:none}
 body.service-page .editorial-photo-grid{align-items:start}
 body.service-page .editorial-photo img,body.service-page .editorial-photo:nth-child(2) img{width:100%!important;height:auto!important;max-height:350px!important;object-fit:contain!important;object-position:center!important;background:#eaf0f1}
 body.service-page .story-image-frame img{height:auto!important;max-height:480px!important;object-fit:contain!important;object-position:center!important;background:#edf1f2}
 body.service-page .city-service>img{height:auto!important;max-height:360px!important;object-fit:contain!important;object-position:center!important;background:#edf2f3}
 body.company-page .company-photo-wrap{height:auto!important;min-height:0;display:flex;align-items:center;justify-content:center;background:#edf1f2}
 body.company-page .company-photo-wrap img{height:auto!important;max-height:460px!important;object-fit:contain!important;object-position:center!important}
 body.company-page .company-story-image img{height:auto!important;max-height:500px!important;object-fit:contain!important}
 body.company-page .company-photo-grid img,body.company-page .company-photo-grid .company-gallery-primary img{height:auto!important;max-height:440px!important;object-fit:contain!important;background:#edf1f2}
 body.company-page .portfolio-card-media{background:#eef3f4}
 body.company-page .portfolio-card-media img,body.portfolio-page .portfolio-card-media img{height:auto!important;max-height:470px!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important}
 /* Homepage photo layouts; preserve full customer-supplied imagery. */
 .card-photo,.guidance-photo,.process-photo{height:auto!important;min-height:0!important;background:#e9eef0}
 .card-photo img,.guidance-photo img,.process-photo img,.showcase-grid figure img,.showcase-grid img{width:100%!important;height:auto!important;max-height:420px!important;object-fit:contain!important;object-position:center!important;background:#e9eef0;transform:none!important}
 .showcase-grid figure img{border-radius:inherit}
 .about-visual{height:auto!important;min-height:0!important;background:#edf1f2}
 .about-visual>img{height:auto!important;max-height:480px!important;object-fit:contain!important}
 .faq-aside,.faq-aside>img{height:auto!important;min-height:0!important}
 .faq-aside>img{width:100%!important;max-height:480px!important;object-fit:contain!important}
 /* Full-width media after the dark hero content: the real hero photo is no longer hidden/cropped. */
 .hero.hero-v12{display:flex;flex-direction:column;min-height:0;background:#0b1b2b}
 .hero-v12 .hero-inner{order:1;width:100%;flex:none;min-height:0}
 .hero-v12 .hero-content{padding:56px 0 44px;max-width:100%}
 .hero-v12 .hero-photo{order:2;position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;z-index:0;height:auto!important;min-height:0;background:#0b1b2b}
 .hero-v12 .hero-photo img{display:block!important;width:100%!important;height:auto!important;max-height:480px!important;object-fit:contain!important;object-position:center!important;filter:none!important}
 .hero-v12 .hero-wash{display:none!important}
 .hero-v12 .hero-side-caption{display:none!important}
 /* Comfortable forms and easy-to-read page endings */
 .lead-zone-layout{gap:28px}
 .lead-zone-card-main{min-width:0}
 .lead-zone-contact-row{grid-template-columns:1fr 1fr}
 .lead-zone-contact-row>*{min-width:0;overflow-wrap:anywhere}
 body.service-page .footer-top{gap:31px}
 body.service-page .service-footer{padding:55px 0 22px}
}
@media(max-width:640px){
 html{scroll-padding-top:74px}
 .footer-main{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:34px;padding:49px 0 30px}
 .footer-main>.footer-brand,.footer-main>.footer-contact{grid-column:1/-1}
 .footer-main>.footer-col{min-width:0}
 .footer-main>.footer-col:nth-child(4){grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:10px}
 .footer-main>.footer-col:nth-child(4) h3{grid-column:1/-1;margin-bottom:2px}
 .footer-contact-methods{max-width:none;gap:10px}
 .footer-contact-method{min-height:62px;padding:11px 13px}
 .footer-contact-value b{font-size:13px}
 .footer-contact-page-link{display:inline-flex!important;margin-top:15px!important}
 .footer-main .footer-col h3{font-size:12px}
 .footer-main .footer-col>a:not(.button){line-height:1.55}
 body.service-page .service-footer .footer-contact-methods{max-width:none}
 body.service-page .service-footer .footer-contact-value b{font-size:13px}
 body.service-page .footer-top{grid-template-columns:1fr;gap:33px;padding-bottom:36px}
 body.service-page .footer-top .footer-brand{grid-column:1}
 body.service-page .footer-links{min-width:0}
 body.service-page .service-footer .footer-location{width:100%;max-width:100%}
 body.service-page .service-footer .footer-contact-methods{width:100%;max-width:100%}
 body.service-page .footer-bottom{row-gap:8px}
 body.service-page .hero-visual{padding-right:12px;padding-bottom:20px;margin-bottom:6px}
 body.service-page .hero-visual::before{inset:17px 0 0 15px;border-radius:18px}
 body.service-page .image-tag{max-width:calc(100% - 22px)!important;left:8px;bottom:3px}
 body.service-page .story-image-frame{padding:0 10px 19px 0}
 body.service-page .story-image-frame::before{left:16px;top:17px}
 body.service-page .story-image-frame figcaption{margin:-12px 7px 0 12px;padding:13px 15px}
 body.service-page .landing-hero .hero-visual{max-width:100%}
 body.company-page .company-hero-image{padding:0 12px 18px 0}
 body.company-page .company-hero-image::before{right:0!important}
 body.company-page .portfolio-card-body{padding:23px 20px}
 .lead-zone .container{width:calc(100% - 36px)}
 .lead-zone-card-main{padding:22px 18px 20px}
 .lead-zone-card-main>p{font-size:13px;line-height:1.75}
 .lead-zone-card-main h3{font-size:23px}
 .lead-zone h2{font-size:clamp(30px,7.8vw,41px)}
 .lead-form-access{gap:12px}
 .lead-form-access a{min-height:46px}
 /* Anti clipping for long service titles/buttons at 320px. */
 body.service-page .landing-hero h1{overflow-wrap:normal;hyphens:auto}
 body.service-page .hero-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 body.service-page .hero-links a{min-width:0;white-space:normal;text-align:center}
 .service-btn,.button,.secondary-btn{max-width:100%}
}
@media(max-width:480px){
 .lead-zone-contact-row{grid-template-columns:1fr;gap:15px}
 .lead-zone-contact-row>div+div{padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
 .hero-v12 .hero-content{padding:51px 0 40px}
 .hero-v12 h1{font-size:clamp(43px,10.7vw,53px);line-height:1.05}
 .hero-v12 .hero-location{font-size:18px}
 .hero-v12 .hero-photo img{max-height:420px!important}
 body.service-page .editorial-photo-grid{grid-template-columns:1fr;gap:22px}
 body.service-page .editorial-photo:nth-child(2){transform:none!important}
 body.service-page .editorial-photo img,body.service-page .editorial-photo:nth-child(2) img{max-height:440px!important}
 .footer-contact-methods{gap:9px}
}
@media(max-width:355px){
 body .brand-words strong{font-size:11.5px}
 body.service-page .site-header .service-logo{gap:6px}
 body.service-page .service-nav{gap:5px}
 body.service-page .nav-cta{min-height:42px;padding:8px 10px}
 body.service-page .mobile-menu summary{width:41px;height:42px}
 .footer-contact-value b{font-size:12px}
 body.service-page .hero-links{grid-template-columns:1fr}
 .lead-zone-card-main{padding-inline:13px}
}
@media(prefers-reduced-motion:reduce){.footer-contact-method{transition:none}}
/* Tablet header: the full desktop nav was 6–45px wider than its container
   on several service landings at 1024px. Switch to an accessible menu earlier. */
@media(min-width:901px) and (max-width:1120px){
 body.service-page .service-nav-links{display:none!important}
 body.service-page .mobile-menu{display:block!important}
 body.service-page .service-nav{justify-content:space-between}
 body.service-page .nav-actions{margin-left:auto;gap:12px;flex-shrink:0}
 body.service-page .mobile-menu nav{max-height:min(70vh,600px);overflow-y:auto}
}


/* ==============================================================
   V29 — Mobile-first finishing pass | all 61 static pages
   Primary fixes: real stacked media/text cards, no phantom gray
   media-columns, readable 20–24px horizontal rhythm, consistent
   stroke SVG icons instead of device-dependent emoji glyphs.
   Original long-form SEO content, reviews, schema and GHL untouched.
   ============================================================== */
/* Small, resolution-independent inline icons across the site */
.ui-icon{display:inline-block;width:1em;height:1em;vertical-align:-.16em;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;pointer-events:none}
.ui-icon-arrow-up-right,.ui-icon-arrow-right,.ui-icon-arrow-left,.ui-icon-arrow-down{width:1.05em;height:1.05em;vertical-align:-.18em}
.ui-icon-check{width:1.06em;height:1.06em;vertical-align:-.18em}
.ui-icon-sparkle{width:1em;height:1em;fill:currentColor;stroke:none}
.ui-icon-star{width:17px;height:17px;fill:currentColor;stroke:none;vertical-align:-.15em;margin-right:2px}
.customer-review-stars,.review-stars{display:inline-flex;align-items:center;gap:2px}
.customer-review-stars .ui-icon-star,.review-stars .ui-icon-star{margin-right:0}
a .ui-icon{color:inherit}
a:hover .ui-icon{transform:translate(1px,-1px)}
@media(prefers-reduced-motion:reduce){a .ui-icon{transform:none!important}}

/* Prevent content leaking on thin screens, without hiding actual layout bugs. */
.service-card,.service-copy,.city-service,.city-card-copy,.portfolio-card,.lead-zone-card{min-width:0}
.service-copy p,.city-service p,.company-hero-intro,.hero-lede{overflow-wrap:break-word}

@media(max-width:720px){
  /* Consistent comfortable gutters for homepage, company and all service pages. */
  .container,body.service-page .container,body.company-page .container{width:calc(100% - 44px)!important;max-width:1200px}
  .lead-zone .container,body.service-page .lead-zone .container{width:calc(100% - 44px)!important}
  .section,body.service-page .landing-section,body.company-page .company-section{scroll-margin-top:82px}

  /* Hero copy has a guaranteed horizontal margin and a calmer vertical rhythm. */
  .hero-v12 .hero-inner{width:calc(100% - 48px)!important;margin-inline:auto}
  .hero-v12 .hero-content{padding-top:58px!important;padding-bottom:49px!important;min-width:0}
  .hero-v12 .eyebrow{line-height:1.6;margin-bottom:19px}
  .hero-v12 h1{font-size:clamp(39px,9.8vw,57px)!important;line-height:1.065!important;letter-spacing:-.054em!important;max-width:100%;text-wrap:balance}
  .hero-v12 .hero-location{margin-top:16px;line-height:1.55}
  .hero-v12 .hero-lede{font-size:14.5px!important;line-height:1.78!important;max-width:40ch}
  .hero-v12 .hero-photo{background:#0b1b2b!important}
  .hero-v12 .hero-photo img{height:auto!important;width:100%!important;max-height:none!important;object-fit:contain!important;background:#0b1b2b}

  /* Service and city landing hero content, About/Portfolio/Contact. */
  body.service-page .landing-hero-grid{gap:26px;padding-top:17px}
  body.service-page .landing-hero .hero-copy{padding:28px 0 0;min-width:0}
  body.service-page .landing-hero h1{font-size:clamp(35px,8.8vw,50px);line-height:1.15;letter-spacing:-.048em;overflow-wrap:break-word}
  body.service-page .landing-hero .hero-lead{font-size:14.5px!important;line-height:1.8}
  body.service-page .landing-hero .hero-visual{max-width:100%;min-width:0}
  body.company-page .company-hero-grid{padding-top:40px;gap:28px}
  body.company-page .company-hero h1{font-size:clamp(35px,8.6vw,50px);line-height:1.14;letter-spacing:-.045em}
  body.company-page .company-hero-intro{font-size:14.5px;line-height:1.8}

  /* Universal: naturally sized image boxes should never stretch below the image. */
  .card-photo,.guidance-photo,.process-photo{align-self:start;min-height:0!important;height:auto!important}
  .card-photo img,.guidance-photo img,.process-photo img{display:block;height:auto!important;object-fit:contain!important;object-position:center!important}
  body.company-page .portfolio-card-media{height:auto!important;min-height:0!important;background:#fff!important}
  body.company-page .portfolio-card-media img,body.portfolio-page .portfolio-card-media img{display:block;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;background:#fff!important}
  body.service-page .city-service>img{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;background:#fff!important}

  /* City cards: natural image ratio, independent text height, comfortable spacing. */
  body.service-page .city-service{align-self:start;height:auto;display:flex;flex-direction:column}
  body.service-page .city-service .city-card-copy{padding:25px 23px 26px}
  body.service-page .city-service h3{margin-top:12px;font-size:20px;line-height:1.28;min-height:0}
  body.service-page .city-service p{font-size:14px;line-height:1.77;min-height:0}
  body.service-page .city-services{align-items:start;gap:22px}

  /* Visually balanced footer remains 2-column where helpful. */
  .footer-main,.footer-top{min-width:0}
  .footer-contact-methods,.footer-contact-method{min-width:0}
  .footer-contact-value{flex:1;min-width:0}
  .footer-contact-value b{overflow-wrap:anywhere}
  .lead-zone-layout,.lead-zone-card-main{min-width:0}
  .lead-zone h2{line-height:1.16}
}

@media(max-width:640px){
  /* Fix the reported empty grey media strip: no more 40/60 desktop card grid
     in a 320–430px viewport; each photo gets its natural aspect ratio. */
  .services-section .service-grid{grid-template-columns:minmax(0,1fr)!important;gap:22px!important;align-items:start}
  .services-section .service-grid .service-card{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;grid-template-columns:none!important;border-radius:16px;background:#fff}
  .services-section .service-grid .card-photo{display:block!important;position:relative;flex:none;width:100%;height:auto!important;min-height:0!important;max-height:none!important;align-self:stretch!important;overflow:visible!important;background:transparent!important}
  .services-section .service-grid .card-photo img{display:block!important;width:100%!important;height:auto!important;max-height:none!important;min-height:0!important;object-fit:contain!important;object-position:center!important;background:transparent!important;border-radius:16px 16px 0 0}
  .services-section .service-grid .photo-chip{left:20px!important;right:auto!important;bottom:-21px!important;width:43px;height:43px;border:3px solid #fff;z-index:2}
  .services-section .service-grid .service-copy{display:flex!important;flex-direction:column!important;align-self:stretch;flex:1;min-width:0;min-height:0!important;padding:33px 23px 25px!important}
  .services-section .service-grid .service-copy h3{font-size:19px!important;line-height:1.3!important;letter-spacing:-.035em;margin:0 0 11px}
  .services-section .service-grid .service-copy p{font-size:14px!important;line-height:1.79!important;margin:0 0 19px;color:#526476}
  .services-section .service-grid .service-copy a{font-size:13.5px!important;line-height:1.65;align-items:center;flex-wrap:wrap;gap:5px;margin-top:auto}
  .services-section .service-grid .service-copy a .ui-icon{font-size:14px;align-self:center}
  .services-section .section-head{margin-bottom:27px}
  .services-section .section-head h2{font-size:clamp(29px,7.8vw,37px)}
  .services-section .section-head>p{font-size:14px;line-height:1.75}
  .section{padding-block:68px}

  /* Mobile tap targets, forms, and visual rhythm. */
  .button,.service-btn,.secondary-btn,body.service-page .hero-links a{min-height:48px}
  .hero-actions{gap:12px}
  .lead-zone{scroll-margin-top:78px}
  .lead-zone-card{max-width:100%}
  .lead-zone-card-main{padding:24px 20px 22px}
  .lead-zone-card-main h3{font-size:23px;line-height:1.23}
  .footer-main{row-gap:29px}
  .footer-contact-method{border-radius:12px}
  body.company-page .portfolio-grid{gap:22px}
  body.company-page .portfolio-card-body{padding:24px 22px}
  body.company-page .portfolio-card h3{font-size:23px;line-height:1.22;min-height:0}
  body.portfolio-page .portfolio-card-body{min-height:0}
}

@media(max-width:380px){
  .container,body.service-page .container,body.company-page .container{width:calc(100% - 36px)!important}
  .lead-zone .container,body.service-page .lead-zone .container{width:calc(100% - 36px)!important}
  .hero-v12 .hero-inner{width:calc(100% - 40px)!important}
  .hero-v12 h1{font-size:clamp(36px,10.5vw,41px)!important}
  .hero-v12 .hero-content{padding-top:46px!important}
  .services-section .service-grid .service-copy{padding:31px 19px 23px!important}
  .services-section .service-grid .service-copy h3{font-size:18px!important}
  body.service-page .landing-hero h1{font-size:clamp(32px,9.6vw,38px)}
  .lead-zone-card-main{padding-inline:16px}
}

/* Keep city cards at their own content height, even when the earlier
   multi-card desktop selector assigns height:100%. */
@media(max-width:720px){
  body.service-page .city-services .city-service{
    height:auto!important;
    min-height:0!important;
    align-self:start!important;
  }
  body.company-page .company-photo-grid figure{height:auto!important;align-self:start}
}