/* HT Containers — complete-image and responsive-frame system
   Goal: every image is fully legible without leaving a small image in an oversized canvas. */

:root{--ht-image-safe-bg:#f3f1ec;--ht-image-line:#dfdcd5}
html,body{max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
main,section,article,figure,div{min-width:0}
img{max-width:100%;object-position:center}

/* Technical drawings and isolated product renders keep a clean, complete canvas. */
img[src*="layout"],
img[src*="floor"],
img[src*="plan"],
img[src*="structure"],
img[src*="installation-diagram"],
img[src$=".png"],
.sp-contain img,
.ex-layout-list img,
.ex-option-grid .ex-spec-card>img,
.ht-result-plan img,
.pl-media:not(.pl-photo) img,
.pl-fold-card-media img,
.ht-x-product-image{
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
}
img[src*="layout"],
img[src*="floor"],
img[src*="plan"],
img[src*="structure"],
img[src*="installation-diagram"]{padding:10px!important}
.ht-x-product-image{background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important}

/* Product-card canvases: complete object, generous but controlled scale. */
.ex-model-card,
.ex-model-nav>a,
.ht-result-product,
.ht-result-plan,
.pl-media,
.pl-fold-card-media{background:var(--ht-image-safe-bg)!important}
.ex-model-card img,
.ex-model-nav>a>img,
.ht-result-product img,
.ht-result-plan img,
.pl-media img,
.pl-fold-card-media img{
  object-fit:contain!important;
  object-position:center!important;
}

/* SOLUTIONS hero: the supplied image is portrait, so the layout now treats it as a portrait.
   It fills a deliberate vertical frame instead of shrinking inside a wide rectangle. */
.sp-hero-grid{
  grid-template-columns:minmax(0,1.22fr) minmax(340px,.72fr)!important;
  gap:68px!important;
  height:auto!important;
  min-height:560px!important;
  align-items:center!important;
}
.sp-hero-media{
  width:100%!important;
  max-width:430px!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:3/4!important;
  justify-self:end!important;
  background:#e8e5df!important;
}
.sp-hero-media img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* The first two application photos are portrait; the third is panoramic.
   Each receives a frame that matches its source rather than one generic card shape. */
.sp-app-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
}
.sp-app-card{
  min-height:0!important;
  aspect-ratio:4/5!important;
  background:#142b37!important;
}
.sp-app-card:first-child{grid-column:auto!important}
.sp-app-card:nth-child(3){
  grid-column:1/-1!important;
  aspect-ratio:651/169!important;
}
.sp-app-card img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Split sections: plans retain a technical canvas; photos follow their own proportions. */
.sp-split-media.sp-contain{min-height:430px!important;background:#fff!important}
.sp-split-media.sp-contain img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  padding:28px!important;
}
.sp-split:has(.sp-split-media img[src*="folding-product"]){
  grid-template-columns:1.12fr .88fr!important;
  min-height:0!important;
  align-items:center!important;
}
.sp-split:has(.sp-split-media img[src*="folding-product"]) .sp-split-media{
  min-height:0!important;
  height:auto!important;
  aspect-ratio:497/298!important;
}
.sp-split:has(.sp-split-media img[src*="folding-product"]) .sp-split-media img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

/* Products overview hero uses the same portrait-aware editorial proportion. */
.ht-products-hero-grid{
  grid-template-columns:minmax(0,1.2fr) minmax(340px,.72fr)!important;
  gap:64px!important;
  height:auto!important;
  min-height:560px!important;
  align-items:center!important;
}
.ht-products-hero-media{
  width:100%!important;
  max-width:430px!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:3/4!important;
  justify-self:end!important;
  background:#e8e5df!important;
}
.ht-products-hero-media img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

/* Expandable landing-page heroes are portrait; folding deployment is panoramic. */
.pl-hero-grid:has(.pl-hero-media>img[src*="expandable-exterior-angle"]){
  grid-template-columns:minmax(0,1.18fr) minmax(340px,.72fr)!important;
  gap:64px!important;
}
.pl-hero-grid:has(.pl-hero-media>img[src*="expandable-exterior-angle"]) .pl-hero-media{
  width:100%!important;
  max-width:430px!important;
  height:auto!important;
  aspect-ratio:3/4!important;
  justify-self:end!important;
}
.pl-hero-grid:has(.pl-hero-media>img[src*="expandable-exterior-angle"]) .pl-hero-media>img{
  width:100%!important;height:100%!important;object-fit:cover!important;
}
.pl-hero-grid:has(.pl-hero-media>img[src*="folding-installation"]){
  grid-template-columns:1fr!important;
  gap:34px!important;
}
.pl-hero-grid:has(.pl-hero-media>img[src*="folding-installation"]) .pl-hero-media{
  width:100%!important;
  height:auto!important;
  aspect-ratio:651/169!important;
}
.pl-hero-grid:has(.pl-hero-media>img[src*="folding-installation"]) .pl-hero-media>img{
  width:100%!important;height:100%!important;object-fit:cover!important;
}

/* About and contact use intentional portrait panels instead of wide empty canvases. */
.sp-about-photo,
.sp-contact-hero-media{
  width:100%!important;
  max-width:430px!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:3/4!important;
  justify-self:end!important;
  background:#e8e5df!important;
}
.sp-about-photo img,
.sp-contact-hero-media img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.sp-about-hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(340px,.72fr)!important;align-items:center!important}
.sp-contact-hero-grid{
  grid-template-columns:minmax(0,1.18fr) minmax(340px,.72fr)!important;
  gap:64px!important;
  height:auto!important;
  min-height:560px!important;
  align-items:center!important;
}

/* Mixed-orientation focus cards: natural image ratios prevent either crops or tiny centered images. */
.sp-focus-grid{align-items:start!important}
.sp-focus img{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:contain!important;
  background:var(--ht-image-safe-bg)!important;
}
.sp-focus:has(img[src*="folding-installation"]){grid-column:1/-1!important}

/* Natural-ratio editorial galleries. No image is clipped by a fixed-height mosaic cell. */
.sp-project-mosaic,
.sp-gallery,
.pl-gallery,
.ds-mosaic,
.ds-gallery,
.hp-project-grid,
.hp-double-grid{
  grid-template-rows:auto!important;
  grid-auto-rows:auto!important;
  align-items:start!important;
}
.sp-project-mosaic figure,
.sp-gallery figure,
.pl-gallery figure,
.ds-mosaic figure,
.ds-gallery figure,
.hp-project-grid>a,
.hp-double-grid>a,
.hp-double-grid>figure{
  height:auto!important;
  min-height:0!important;
  grid-row:auto!important;
}
.sp-project-mosaic img,
.sp-gallery img,
.pl-gallery img,
.ds-mosaic img,
.ds-gallery img,
.hp-project-grid img,
.hp-double-grid img{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:contain!important;
  background:var(--ht-image-safe-bg)!important;
}

/* Project case imagery is sized by its source rather than stretched into a fixed panel. */
.sp-case{align-items:center!important}
.sp-case-media{
  min-height:0!important;
  height:auto!important;
  background:var(--ht-image-safe-bg)!important;
}
.sp-case-media img{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
}

/* Product-detail photo groups: show complete rooms and exteriors at their natural ratio. */
.ex-photo-pair,
.ex-photo-three{align-items:start!important}
.ex-photo-pair figure,
.ex-photo-three figure{
  height:auto!important;
  min-height:0!important;
}
.ex-photo-pair img,
.ex-photo-three img{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  background:var(--ht-image-safe-bg)!important;
}

/* Large editorial photography: use predictable ratios close to the supplied source files. */
.ds-hero-media,
.ds-feature-image,
.ds-story-media,
.ex-model-hero-image{
  background:var(--ht-image-safe-bg)!important;
}
.ds-hero-media img,
.ds-feature-image img,
.ds-story-media img,
.ex-model-hero-image img{
  object-fit:contain!important;
  object-position:center!important;
}

/* Size comparison bands keep every product view complete and never overflow a column. */
.cr-sizeband{min-width:0!important}
.cr-sizeband-media{min-width:0!important;align-items:start!important;background:#fff!important}
.cr-sizeband-media img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:10px!important;
  border:1px solid var(--ht-image-line)!important;
  background:var(--ht-image-safe-bg)!important;
}

/* No fixed-width child may force a page wider than the viewport. */
.sp-wrap,.cr-wrap,.pl-wrap,.ex-wrap,.ds-wrap,.hp-wrap,.site-shell,.container{max-width:100%}
table{max-width:100%}
iframe,video,svg{max-width:100%}

@media(max-width:980px){
  .sp-hero-grid,
  .ht-products-hero-grid,
  .sp-about-hero-grid,
  .sp-contact-hero-grid,
  .pl-hero-grid:has(.pl-hero-media>img[src*="expandable-exterior-angle"]){
    grid-template-columns:1fr!important;
    gap:34px!important;
    height:auto!important;
    min-height:0!important;
  }
  .sp-hero-media,
  .ht-products-hero-media,
  .sp-about-photo,
  .sp-contact-hero-media,
  .pl-hero-grid:has(.pl-hero-media>img[src*="expandable-exterior-angle"]) .pl-hero-media{
    justify-self:center!important;
    max-width:520px!important;
  }
  .sp-app-grid{grid-template-columns:1fr 1fr!important}
  .sp-split:has(.sp-split-media img[src*="folding-product"]){grid-template-columns:1fr!important}
}

@media(max-width:760px){
  .sp-hero-media,
  .ht-products-hero-media,
  .sp-about-photo,
  .sp-contact-hero-media,
  .pl-hero-grid:has(.pl-hero-media>img[src*="expandable-exterior-angle"]) .pl-hero-media{
    width:min(100%,430px)!important;
    aspect-ratio:3/4!important;
  }
  .sp-app-grid{grid-template-columns:1fr!important}
  .sp-app-card,
  .sp-app-card:nth-child(3){
    grid-column:auto!important;
    aspect-ratio:auto!important;
    min-height:0!important;
  }
  .sp-app-card img{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }
  .sp-app-card:after{display:none!important}
  .sp-app-copy{
    position:relative!important;
    inset:auto!important;
    padding:26px 22px!important;
    background:#142b37!important;
  }
  .sp-project-mosaic,
  .sp-gallery,
  .pl-gallery,
  .ds-mosaic,
  .ds-gallery,
  .hp-project-grid,
  .hp-double-grid{display:block!important}
  .sp-project-mosaic figure,
  .sp-gallery figure,
  .pl-gallery figure,
  .ds-mosaic figure,
  .ds-gallery figure,
  .hp-project-grid>a,
  .hp-double-grid>a,
  .hp-double-grid>figure{margin:0 0 14px!important}
  .cr-sizeband-media{display:block!important}
  .cr-sizeband-media img,
  .cr-sizeband-media img:first-child{
    grid-row:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    margin-bottom:12px!important;
  }
  .ex-model-card img,
  .ex-model-nav>a>img,
  .pl-media img,
  .pl-fold-card-media img,
  .ht-result-product img,
  .ht-result-plan img{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
}

/* Second-pass refinements for the remaining mixed-ratio modules. */
@media(min-width:981px){
  /* Home application mosaic: wide installation photo receives the wide cell,
     while the two portrait exteriors receive taller cells below it. */
  .hp-mosaic{
    grid-template-columns:1.25fr .75fr .75fr!important;
    grid-template-rows:220px 380px!important;
  }
  .hp-scene-large{grid-column:1!important;grid-row:1/3!important}
  .hp-scene:has(img[src*="folding-installation"]){
    grid-column:2/4!important;
    grid-row:1!important;
  }
  .hp-scene:has(img[src*="folding-installation"]) img{
    object-fit:contain!important;
    background:#243a46!important;
  }
  .hp-scene:not(.hp-scene-large):not(:has(img[src*="folding-installation"])){grid-row:2!important}
  .hp-scene-wide{grid-column:auto!important}

  /* The full-width double-storey product becomes an intentional horizontal feature row. */
  .ht-type-collection .ex-model-card:has(img[src*="double-storey-exterior-wide"]){
    display:grid!important;
    grid-template-columns:minmax(380px,.78fr) minmax(0,1.22fr)!important;
    align-items:stretch!important;
  }
  .ht-type-collection .ex-model-card:has(img[src*="double-storey-exterior-wide"])>img{
    width:100%!important;
    height:360px!important;
    min-height:360px!important;
    object-fit:contain!important;
    background:var(--ht-image-safe-bg)!important;
  }
  .ht-type-collection .ex-model-card:has(img[src*="double-storey-exterior-wide"]) .ex-model-card-body{
    justify-content:center!important;
  }

  /* Interior portraits on the projects page are displayed as complete portrait panels. */
  .sp-double-feature-grid{
    grid-template-columns:1.1fr .55fr .55fr!important;
    grid-template-rows:520px!important;
  }
  .sp-double-feature-main{grid-row:auto!important}
  .sp-double-feature-main img{object-fit:cover!important}
  .sp-double-feature-grid figure img{
    object-fit:contain!important;
    background:var(--ht-image-safe-bg)!important;
  }

  /* Configuration rows use a controlled landscape frame so portrait source photos
     cannot stretch the entire row and create large blank areas. */
  .pl-page .pl-config{
    grid-template-columns:150px minmax(0,1fr) 300px!important;
    gap:24px!important;
    align-items:center!important;
    padding:14px 0!important;
    min-height:0!important;
  }
  .pl-page .pl-config>img{
    width:300px!important;
    height:170px!important;
    min-height:170px!important;
    max-height:170px!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:center!important;
    padding:0!important;
    justify-self:end!important;
    background:#eee!important;
  }
  .pl-page .pl-config>img.pl-plan{
    object-fit:contain!important;
    padding:8px!important;
    background:#fff!important;
  }
}

/* Three-view product bands: one large view above two supporting views.
   This removes the tall empty column created by the previous row-span layout. */
.cr-sizeband-media{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:auto!important;
  gap:10px!important;
  align-content:start!important;
}
.cr-sizeband-media img,
.cr-sizeband-media img:first-child{
  grid-row:auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
}
.cr-sizeband-media img:first-child{grid-column:1/-1!important}

@media(max-width:980px){
  .sp-double-feature-grid{
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:auto!important;
  }
  .sp-double-feature-main{grid-column:1/-1!important;grid-row:auto!important}
  .sp-double-feature-main img,
  .sp-double-feature-grid figure img{
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
    background:var(--ht-image-safe-bg)!important;
  }
}

@media(max-width:760px){
  .ht-type-collection .ex-model-card:has(img[src*="double-storey-exterior-wide"]){
    display:flex!important;
    flex-direction:column!important;
  }
  .ht-type-collection .ex-model-card:has(img[src*="double-storey-exterior-wide"])>img{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }
  .sp-double-feature-grid{display:block!important}
  .sp-double-feature-grid>*{display:block!important;margin:0 0 14px!important}
  .cr-sizeband-media{display:block!important}
  .cr-sizeband-media img{margin-bottom:12px!important}
}

/* Expandable series landing hero: use the new 4:3 real product photo as a broad visual,
   not a narrow portrait panel. This keeps the first screen shorter and more confident. */
@media(min-width:981px){
  .pl-hero-grid:has(.pl-hero-media>img[src*="charcoal-angle.webp"]){
    grid-template-columns:minmax(0,.86fr) minmax(560px,1.14fr)!important;
    gap:54px!important;
    align-items:center!important;
  }
  .pl-hero-grid:has(.pl-hero-media>img[src*="charcoal-angle.webp"]) .pl-hero-media{
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4/3!important;
    justify-self:stretch!important;
    background:#e8e5df!important;
  }
  .pl-hero-grid:has(.pl-hero-media>img[src*="charcoal-angle.webp"]) .pl-hero-media>img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
}
@media(max-width:980px){
  .pl-hero-grid:has(.pl-hero-media>img[src*="charcoal-angle.webp"]){
    grid-template-columns:1fr!important;
    gap:32px!important;
  }
  .pl-hero-grid:has(.pl-hero-media>img[src*="charcoal-angle.webp"]) .pl-hero-media{
    width:100%!important;
    max-width:760px!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4/3!important;
    justify-self:center!important;
  }
  .pl-hero-grid:has(.pl-hero-media>img[src*="charcoal-angle.webp"]) .pl-hero-media>img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
}

/* Product-detail hero correction: wide, substantial first-screen photography.
   Product subjects remain visible while excess ceiling and floor are cropped. */
@media(min-width:981px){
  .ex-model-hero{
    grid-template-columns:minmax(0,.86fr) minmax(560px,1.14fr)!important;
    gap:54px!important;
    align-items:center!important;
    padding:52px 0!important;
  }
  .ex-model-hero-image{
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:3/2!important;
    justify-self:stretch!important;
    overflow:hidden!important;
    background:#e8e5df!important;
  }
  .ex-model-hero-image img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  .ex-model-hero-image:has(img[src*="expandable-exterior-front"]) img{
    object-position:center 57%!important;
  }
  .ds-hero-grid{
    grid-template-columns:minmax(0,.86fr) minmax(560px,1.14fr)!important;
    gap:54px!important;
    align-items:center!important;
  }
  .ds-hero-media{
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:3/2!important;
    justify-self:stretch!important;
    overflow:hidden!important;
  }
  .ds-hero-media img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
}
@media(max-width:980px){
  .ex-model-hero,
  .ds-hero-grid{
    grid-template-columns:1fr!important;
    gap:30px!important;
    height:auto!important;
    min-height:0!important;
  }
  .ex-model-hero{
    padding:38px 0 48px!important;
  }
  .ex-model-hero-image,
  .ds-hero-media{
    width:100%!important;
    max-width:760px!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4/3!important;
    justify-self:center!important;
    overflow:hidden!important;
  }
  .ex-model-hero-image img,
  .ds-hero-media img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  .ex-model-hero-image:has(img[src*="expandable-exterior-front"]) img{
    object-position:center 57%!important;
  }
}

/* === Full-site media confidence & section contrast system — 2026-10-23 ===
   Photographic modules must read as large, edge-to-edge visuals. Adjacent
   content bands must retain a clear visual transition. */
.ex-model-nav>a,
.ex-option-grid>article,
.pl-media{
  overflow:hidden!important;
}
.ex-model-nav>a>img,
.ex-option-grid>article>img,
.pl-media.pl-photo>img{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  background:transparent!important;
  object-fit:cover!important;
}

/* Related-model photography: replace thumbnail-like treatment with full cards. */
.ex-model-nav{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
}
.ex-model-nav>a>img{
  height:230px!important;
  min-height:230px!important;
  object-position:center!important;
}

/* Room/finish coordination: two substantial image-led cards per row. */
.ex-option-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
}
.ex-option-grid>article{
  padding:0!important;
  background:#fff!important;
}
.ex-option-grid>article>img{
  height:280px!important;
  min-height:280px!important;
}
.ex-option-grid>article>div{
  padding:26px 28px 30px!important;
}
.ex-option-grid>.ex-spec-card>img:not([src*="layout-source"]){
  object-fit:cover!important;
  object-position:center!important;
}

/* Plans remain complete, but occupy a generous dedicated canvas. */
.ex-option-grid>article:has(img[src*="layout-source"])>img{
  object-fit:contain!important;
  background:#f4f1ea!important;
}

/* Series comparison photos fill their entire media column. */
.pl-product-body{
  grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) minmax(270px,.88fr)!important;
}
.pl-media{
  padding:36px 0 0!important;
  min-height:350px!important;
  background:#fff!important;
}
.pl-media>span{
  z-index:2!important;
}
.pl-media>img{
  width:100%!important;
  height:314px!important;
  min-height:314px!important;
  max-height:none!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
}
.pl-media.pl-photo>img{
  object-fit:cover!important;
  object-position:center 55%!important;
}
.pl-media:not(.pl-photo)>img{
  object-fit:contain!important;
  background:#f4f1ea!important;
}

/* A strong dark close prevents the FAQ and enquiry bands merging together. */
.cr-true-final{
  background:#16262f!important;
  color:#fff!important;
  border-top:0!important;
}
.cr-true-final h2,
.cr-true-final strong{
  color:#fff!important;
}
.cr-true-final p{
  color:#c7d1d6!important;
}
.cr-true-final .cr-kicker{
  color:#f4a24b!important;
}

/* Defensive alternation when two soft bands are accidentally adjacent. */
main>.cr-section.cr-paper + .cr-section.cr-paper,
main>.ex-series-section.ex-soft + .ex-series-section.ex-soft,
main>.pl-section.pl-soft + .pl-section.pl-soft{
  background:#fff!important;
}

@media(max-width:980px){
  .ex-model-nav{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .ex-option-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .ex-model-nav>a>img{
    height:220px!important;
    min-height:220px!important;
  }
  .ex-option-grid>article>img{
    height:250px!important;
    min-height:250px!important;
  }
  .pl-product-body{
    grid-template-columns:1fr!important;
  }
  .pl-media{
    min-height:0!important;
    padding-top:34px!important;
  }
  .pl-media>img{
    height:320px!important;
    min-height:320px!important;
  }
}
@media(max-width:640px){
  .ex-model-nav,
  .ex-option-grid{
    grid-template-columns:1fr!important;
  }
  .ex-model-nav>a>img,
  .ex-option-grid>article>img{
    height:240px!important;
    min-height:240px!important;
  }
  .pl-media>img{
    height:280px!important;
    min-height:280px!important;
  }
}

/* Homepage project grid exception: preserve a deliberate editorial mosaic.
   This overrides the generic natural-ratio gallery rule above. */
@media(min-width:821px){
  .hp-project-grid.hp-project-grid-fixed{
    display:grid!important;
    grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr) minmax(0,.55fr)!important;
    grid-template-rows:310px 310px!important;
    grid-auto-rows:310px!important;
    gap:14px!important;
    align-items:stretch!important;
  }
  .hp-project-grid.hp-project-grid-fixed>a{
    height:100%!important;
    min-height:0!important;
    margin:0!important;
  }
  .hp-project-grid.hp-project-grid-fixed>.hp-project-main{
    grid-column:1!important;
    grid-row:1 / 3!important;
  }
  .hp-project-grid.hp-project-grid-fixed>.hp-project-living{
    grid-column:2!important;
    grid-row:1!important;
  }
  .hp-project-grid.hp-project-grid-fixed>.hp-project-bath{
    grid-column:3!important;
    grid-row:1!important;
  }
  .hp-project-grid.hp-project-grid-fixed>.hp-project-bedroom{
    grid-column:2 / 4!important;
    grid-row:2!important;
  }
  .hp-project-grid.hp-project-grid-fixed>a>img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    max-height:none!important;
    object-fit:cover!important;
    background:#e7e7e3!important;
  }
}
@media(max-width:820px) and (min-width:561px){
  .hp-project-grid.hp-project-grid-fixed{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:390px 230px 250px!important;
    gap:14px!important;
  }
  .hp-project-grid.hp-project-grid-fixed>a{
    height:100%!important;
    margin:0!important;
  }
  .hp-project-grid.hp-project-grid-fixed>.hp-project-main{grid-column:1 / 3!important;grid-row:1!important}
  .hp-project-grid.hp-project-grid-fixed>.hp-project-living{grid-column:1!important;grid-row:2!important}
  .hp-project-grid.hp-project-grid-fixed>.hp-project-bath{grid-column:2!important;grid-row:2!important}
  .hp-project-grid.hp-project-grid-fixed>.hp-project-bedroom{grid-column:1 / 3!important;grid-row:3!important}
  .hp-project-grid.hp-project-grid-fixed>a>img{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important
  }
}

/* === Layout restoration for photographic/editorial modules — 2026-10-23 ===
   Technical drawings remain contained. Real photography follows the page's
   intended editorial frame so mixed source ratios cannot create blank bands. */

/* Secondary-page project mosaics */
@media(min-width:761px){
  .sp-project-mosaic{
    display:grid!important;
    grid-template-columns:1.22fr .78fr!important;
    grid-template-rows:220px 220px!important;
    grid-auto-rows:220px!important;
    gap:12px!important;
    align-items:stretch!important;
  }
  .sp-project-mosaic figure{height:100%!important;min-height:0!important;margin:0!important;grid-row:auto!important}
  .sp-project-mosaic figure:first-child{grid-row:1 / 3!important}
  .sp-project-mosaic img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;background:transparent!important}

  .sp-gallery{
    display:grid!important;
    grid-template-columns:1.2fr .8fr .8fr!important;
    grid-template-rows:290px 290px!important;
    grid-auto-rows:290px!important;
    gap:12px!important;
    align-items:stretch!important;
  }
  .sp-gallery figure{height:100%!important;min-height:0!important;margin:0!important;grid-row:auto!important}
  .sp-gallery figure:first-child{grid-row:1 / 3!important}
  .sp-gallery figure:nth-child(4){grid-column:2 / 4!important}
  .sp-gallery img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;background:transparent!important}
}

/* Project case rows */
.sp-case{align-items:stretch!important;min-height:500px!important}
.sp-case-media{position:relative!important;height:auto!important;min-height:500px!important;background:#ddd!important}
.sp-case-media img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;background:transparent!important}
@media(max-width:820px){
  .sp-case-media{min-height:430px!important}
}
@media(max-width:560px){
  .sp-case-media{min-height:330px!important}
}

/* Secondary-page feature cards */
.sp-focus-grid{align-items:stretch!important}
.sp-focus img{width:100%!important;height:330px!important;min-height:330px!important;max-height:none!important;object-fit:cover!important;background:transparent!important}
@media(max-width:760px){.sp-focus img{height:260px!important;min-height:260px!important}}

/* Expandable model detail photo rows */
.ex-photo-pair{align-items:stretch!important}
.ex-photo-pair figure{height:390px!important;min-height:390px!important}
.ex-photo-pair img{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;background:transparent!important}
.ex-photo-three{align-items:stretch!important}
.ex-photo-three figure{height:350px!important;min-height:350px!important}
.ex-photo-three img{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;background:transparent!important}
@media(max-width:760px){
  .ex-photo-pair figure,.ex-photo-three figure{height:300px!important;min-height:300px!important}
}

/* Expandable landing real-interior gallery */
@media(min-width:761px){
  .pl-gallery{
    display:grid!important;
    grid-template-columns:1.25fr .75fr .75fr!important;
    grid-template-rows:260px 260px!important;
    grid-auto-rows:260px!important;
    gap:14px!important;
    align-items:stretch!important;
  }
  .pl-gallery figure{height:100%!important;min-height:0!important;margin:0!important;grid-row:auto!important}
  .pl-gallery figure:first-child{grid-row:1 / 3!important}
  .pl-gallery img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;background:transparent!important}
}

/* Double-storey page editorial imagery */
.ds-feature-image img,.ds-story-media img{
  width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;background:transparent!important
}
@media(min-width:761px){
  .ds-mosaic{
    display:grid!important;
    grid-template-columns:1.12fr .88fr .88fr!important;
    grid-template-rows:270px 270px!important;
    grid-auto-rows:270px!important;
    gap:14px!important;
    align-items:stretch!important;
  }
  .ds-mosaic figure{height:100%!important;min-height:0!important;margin:0!important;grid-row:auto!important}
  .ds-mosaic figure:first-child{grid-row:1 / 3!important}
  .ds-mosaic figure:nth-child(4){grid-column:2 / 4!important}
  .ds-mosaic img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;background:transparent!important}

  .ds-gallery{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-rows:300px!important;
    gap:14px!important;
    align-items:stretch!important;
  }
  .ds-gallery figure{height:300px!important;min-height:300px!important;margin:0!important;grid-column:auto!important}
  .ds-gallery img{width:100%!important;height:100%!important;object-fit:cover!important;background:transparent!important}
}

/* Homepage double-storey feature if present */
@media(min-width:981px){
  .hp-double-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1.48fr) minmax(330px,.52fr)!important;
    grid-template-rows:285px 285px!important;
    grid-auto-rows:285px!important;
    gap:16px!important;
    align-items:stretch!important;
  }
  .hp-double-grid>a,.hp-double-grid>figure{height:100%!important;min-height:0!important;margin:0!important}
  .hp-double-main{grid-row:1 / 3!important}
  .hp-double-grid img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;background:transparent!important}
}

/* On phones, stack editorial photography with a controlled frame rather than
   letting very tall source images create long empty or uneven sections. */
@media(max-width:760px){
  .sp-project-mosaic,.sp-gallery,.pl-gallery,.ds-mosaic,.ds-gallery,.hp-double-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:none!important;
    grid-auto-rows:auto!important;
    gap:14px!important;
  }
  .sp-project-mosaic figure,.sp-gallery figure,.pl-gallery figure,.ds-mosaic figure,.ds-gallery figure,.hp-double-grid>a,.hp-double-grid>figure{
    height:280px!important;
    min-height:280px!important;
    margin:0!important;
    grid-column:auto!important;
    grid-row:auto!important;
  }
  .sp-project-mosaic img,.sp-gallery img,.pl-gallery img,.ds-mosaic img,.ds-gallery img,.hp-double-grid img{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;background:transparent!important
  }
}

/* Restore three-view comparison bands used on 20ft and X-Type pages. */
@media(min-width:761px){
  .cr-sizeband{align-items:stretch!important}
  .cr-sizeband-media{
    display:grid!important;
    grid-template-columns:1.12fr .88fr!important;
    grid-template-rows:1fr 1fr!important;
    gap:3px!important;
    min-height:580px!important;
    align-content:stretch!important;
    background:#fff!important;
  }
  .cr-sizeband-media img,
  .cr-sizeband-media img:first-child{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    background:#eee!important;
  }
  .cr-sizeband-media img:first-child{
    grid-column:1!important;
    grid-row:1 / 3!important;
  }
  .cr-sizeband-media img:nth-child(2){grid-column:2!important;grid-row:1!important}
  .cr-sizeband-media img:nth-child(3){grid-column:2!important;grid-row:2!important}
  .cr-sizeband-media img[src$=".png"],
  .cr-sizeband-media img[src*="structure"],
  .cr-sizeband-media img[src*="installation"]{
    object-fit:contain!important;
    padding:10px!important;
    background:#f3f1ec!important;
  }
}
@media(max-width:760px){
  .cr-sizeband-media{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;min-height:0!important}
  .cr-sizeband-media img,
  .cr-sizeband-media img:first-child{
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    height:280px!important;
    min-height:280px!important;
    margin:0!important;
    object-fit:cover!important;
  }
  .cr-sizeband-media img[src$=".png"],
  .cr-sizeband-media img[src*="structure"],
  .cr-sizeband-media img[src*="installation"]{object-fit:contain!important}
}

@media(max-width:1000px) and (min-width:761px){
  .pl-page .pl-config{
    grid-template-columns:125px minmax(0,1fr) 250px!important;
    gap:18px!important;
  }
  .pl-page .pl-config>img{
    width:250px!important;
    height:150px!important;
    min-height:150px!important;
    max-height:150px!important;
  }
}
@media(max-width:760px){
  .pl-page .pl-config{
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:20px 0!important;
  }
  .pl-page .pl-config>img{
    width:100%!important;
    height:240px!important;
    min-height:240px!important;
    max-height:240px!important;
    justify-self:stretch!important;
  }
}


/* Layout audit 2026-10-26: lock the homepage double-storey mosaic into a complete 2x2 composition. */
@media(min-width:981px){
  .hp-double-grid>.hp-double-main{
    grid-column:1!important;
    grid-row:1/3!important;
    height:100%!important;
    align-self:stretch!important;
  }
  .hp-double-grid>figure:nth-of-type(1){grid-column:2!important;grid-row:1!important}
  .hp-double-grid>figure:nth-of-type(2){grid-column:2!important;grid-row:2!important}
  .hp-double-grid>.hp-double-main>img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
}

/* Screenshot-led composition repairs 2026-10-27 */

/* CTA bands must read as a new section, not a continuation of the pale panel above. */
.sp-page > .sp-final{
  background:#e3ecec!important;
  border-top:1px solid #c6d5d6!important;
}
.sp-page > .sp-final .sp-kicker{color:#0d5d72!important}
.sp-page > .sp-final .sp-final-grid{min-height:220px!important}

/* Resources quote audit: the page has no left intro column, so the checklist
   must use the entire content width. */
#quote-audit .sp-audit{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  border:1px solid #38505d!important;
}
#quote-audit .sp-audit-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  width:100%!important;
  max-width:none!important;
  gap:1px!important;
  background:#38505d!important;
}
#quote-audit .sp-audit-grid>div{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  min-height:164px!important;
  padding:24px 22px!important;
}
#quote-audit .sp-audit-grid>div span{margin-top:auto!important}
@media(max-width:980px){
  #quote-audit .sp-audit-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
  #quote-audit .sp-audit-grid{grid-template-columns:1fr!important}
  #quote-audit .sp-audit-grid>div{min-height:140px!important}
  .sp-page > .sp-final .sp-final-grid{min-height:0!important}
}

/* Homepage specification collage: complete, compact and intentionally scaled. */
@media(min-width:981px){
  .hp-config-layout{
    grid-template-columns:minmax(0,.86fr) minmax(560px,1.14fr)!important;
    gap:64px!important;
    align-items:center!important;
  }
  .hp-config-gallery{
    display:grid!important;
    grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)!important;
    grid-template-rows:230px 230px!important;
    grid-auto-rows:230px!important;
    gap:14px!important;
    width:100%!important;
    height:474px!important;
    min-height:474px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    align-items:stretch!important;
  }
  .hp-config-gallery>figure,
  .hp-config-gallery>.hp-config-main{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    overflow:hidden!important;
    background:#e9e6de!important;
  }
  .hp-config-gallery>.hp-config-main{
    grid-column:1!important;
    grid-row:1 / 3!important;
  }
  .hp-config-gallery>figure:nth-child(2){
    grid-column:2!important;
    grid-row:1!important;
  }
  .hp-config-gallery>figure:nth-child(3){
    grid-column:2!important;
    grid-row:2!important;
  }
  .hp-config-gallery>figure img{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    background:transparent!important;
  }
  .hp-config-gallery>.hp-config-main img{
    object-fit:contain!important;
    padding:16px!important;
    background:#e9e6de!important;
  }
  .hp-config-gallery figcaption{
    position:absolute!important;
    z-index:2!important;
    left:14px!important;
    bottom:14px!important;
    margin:0!important;
  }
}
@media(max-width:980px){
  .hp-config-gallery{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:340px 230px!important;
    gap:12px!important;
  }
  .hp-config-gallery>.hp-config-main{grid-column:1/3!important;grid-row:1!important}
  .hp-config-gallery>figure:nth-child(2){grid-column:1!important;grid-row:2!important}
  .hp-config-gallery>figure:nth-child(3){grid-column:2!important;grid-row:2!important}
  .hp-config-gallery>figure{position:relative!important;height:100%!important;min-height:0!important;margin:0!important;overflow:hidden!important}
  .hp-config-gallery img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
  .hp-config-gallery>.hp-config-main img{object-fit:contain!important;background:#e9e6de!important;padding:12px!important}
}
@media(max-width:620px){
  .hp-config-gallery{grid-template-columns:1fr!important;grid-template-rows:300px 240px 240px!important}
  .hp-config-gallery>.hp-config-main,
  .hp-config-gallery>figure:nth-child(2),
  .hp-config-gallery>figure:nth-child(3){grid-column:1!important;grid-row:auto!important}
}


/* Screenshot QA repairs — 2026-10-27b */
/* Homepage buyer-confidence collage: the supplied exterior is a 3:4 portrait.
   Match its frame to the source ratio so the complete house remains visible. */
@media(min-width:981px){
  .ed-home-proof .ed-home-grid{
    grid-template-columns:minmax(0,1fr) minmax(620px,1.12fr)!important;
    gap:44px!important;
  }
  .ed-home-proof .ed-proof-media{
    grid-template-columns:414px minmax(0,1fr)!important;
    grid-template-rows:300px 240px!important;
    gap:12px!important;
  }
  .ed-home-proof .ed-proof-media>figure:first-child img{
    object-fit:cover!important;
    object-position:center center!important;
  }
}
@media(max-width:640px){
  .ed-home-proof .ed-proof-media{
    grid-template-columns:1fr!important;
    grid-template-rows:auto 190px 190px!important;
  }
  .ed-home-proof .ed-proof-media>figure:first-child{
    aspect-ratio:3/4!important;
    height:auto!important;
  }
  .ed-home-proof .ed-proof-media>figure:first-child img{
    object-fit:cover!important;
    object-position:center center!important;
  }
}

/* Two-card comparison modules must remain a balanced two-column pair. */
@media(min-width:761px){
  .sp-focus-grid:has(> .sp-focus:nth-child(2):last-child){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
  }
  .sp-focus-grid:has(> .sp-focus:nth-child(2):last-child)>.sp-focus{
    grid-column:auto!important;
    grid-row:auto!important;
    width:auto!important;
    min-width:0!important;
  }
}

/* About page: reduce dead space and create a visible change of material
   between the principles band and the product-focus band. */
main>.sp-about-hero+section+.sp-section{
  padding-top:64px!important;
  padding-bottom:58px!important;
}
main>.sp-about-hero+section+.sp-section+.sp-section-soft{
  background:#e3ecec!important;
  border-top:1px solid #c6d5d6!important;
  padding-top:68px!important;
  padding-bottom:76px!important;
}


/* Footer social channels — 2026-10-27 */
.ht-footer-social{margin-top:26px}
.ht-footer-social-title{
  display:block;
  margin-bottom:12px;
  color:#91a8b5;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.ht-social-links{display:flex;flex-wrap:wrap;gap:10px}
.ht-social-link{
  display:grid!important;
  place-items:center;
  width:42px;
  height:42px;
  padding:0!important;
  color:#fff!important;
  border:0!important;
  text-decoration:none!important;
  transition:transform .2s ease,filter .2s ease;
}
.ht-social-link:hover,.ht-social-link:focus-visible{
  transform:translateY(-2px);
  filter:brightness(1.08);
}
.ht-social-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ht-social-link svg{width:21px;height:21px;display:block;fill:currentColor}
.ht-social-facebook{background:#1877f2!important}
.ht-social-instagram{background:linear-gradient(135deg,#833ab4 0%,#fd1d1d 55%,#fcb045 100%)!important}
.ht-social-linkedin{background:#0a66c2!important}
@media(max-width:760px){
  .ht-footer-social{margin-top:22px}
  .ht-social-link{width:44px;height:44px}
}


/* Official HUATUO brand and footer contact — 2026-10-27 */
.nav>.logo{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:250px;
  text-decoration:none!important;
}
.ht-official-mark{
  position:relative;
  display:block;
  flex:0 0 50px;
  width:50px;
  height:54px;
  overflow:hidden;
}
.ht-official-mark img{
  position:absolute!important;
  width:115px!important;
  max-width:none!important;
  height:auto!important;
  left:-32px!important;
  top:-2px!important;
  background:transparent!important;
}
.ht-nav-brand-copy{
  display:flex;
  flex-direction:column;
  color:#173344;
  font-size:18px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.025em;
  white-space:nowrap;
}
.ht-nav-brand-copy small{
  margin-top:7px;
  color:#667a86;
  font-size:7px;
  font-weight:700;
  line-height:1;
  letter-spacing:.20em;
}
.foot .logo{
  display:block!important;
  width:auto!important;
  height:auto!important;
  background:transparent!important;
}
.ht-official-footer-logo{
  display:block!important;
  width:170px!important;
  max-width:100%!important;
  height:auto!important;
  background:transparent!important;
}
.ht-footer-email{
  display:inline-block!important;
  margin:2px 0 15px!important;
  color:#fff!important;
  font-weight:700!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
.ht-footer-email:hover,.ht-footer-email:focus-visible{color:#d77a2d!important}
.ht-footer-address{
  max-width:310px;
  margin:0 0 18px;
  color:#b8c6cd;
  font-style:normal;
  font-size:13px;
  line-height:1.75;
}
.ht-footer-enquiry{display:inline-block!important;margin-top:2px!important}
@media(max-width:980px){
  .nav>.logo{min-width:0}
  .ht-nav-brand-copy{font-size:16px}
}
@media(max-width:760px){
  .nav>.logo{gap:8px!important}
  .ht-official-mark{flex-basis:42px;width:42px;height:46px}
  .ht-official-mark img{width:97px!important;left:-27px!important;top:-2px!important}
  .ht-nav-brand-copy{font-size:14px}
  .ht-nav-brand-copy small{font-size:6px;letter-spacing:.15em}
  .ht-official-footer-logo{width:150px!important}
}


/* Transparent official logo override */
img.ht-official-footer-logo[src$=".png"],
.ht-official-mark img[src$=".png"]{
  background:transparent!important;
  padding:0!important;
  border:0!important;
}


/* Footer contact icons — 2026-10-27 */
.ht-footer-contact-row{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  max-width:330px;
}
.ht-footer-contact-icon{
  flex:0 0 18px;
  width:18px;
  height:18px;
  margin-top:2px;
  color:#d77a2d;
}
.ht-footer-contact-icon svg{
  display:block;
  width:18px;
  height:18px;
  fill:currentColor;
}
.ht-footer-email>span:last-child,
.ht-footer-address>span:last-child{
  min-width:0;
  overflow-wrap:anywhere;
}


/* Footer WhatsApp QR — 2026-10-27 */
.ht-footer-whatsapp{
  margin:16px 0 18px;
}
.ht-footer-whatsapp a{
  display:flex!important;
  align-items:center;
  gap:12px;
  width:max-content;
  max-width:100%;
  color:#fff!important;
  text-decoration:none!important;
}
.ht-footer-whatsapp img{
  display:block;
  width:112px!important;
  height:112px!important;
  max-width:none!important;
  padding:5px!important;
  object-fit:contain!important;
  background:#fff!important;
}
.ht-footer-whatsapp span{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.ht-footer-whatsapp strong{
  color:#25d366;
  font-size:12px;
  line-height:1.2;
  letter-spacing:.12em;
}
.ht-footer-whatsapp small{
  color:#b8c6cd;
  font-size:12px;
  line-height:1.4;
  white-space:nowrap;
}
@media(max-width:720px){
  .ht-footer-whatsapp img{width:104px!important;height:104px!important}
  .ht-footer-whatsapp small{white-space:normal}
}


/* Four-column reference footer — 2026-10-27 */
.foot{
  border-top:4px solid transparent!important;
  border-image:linear-gradient(90deg,#d77a2d 0 7%,#126491 7% 100%) 1!important;
}
.foot .footgrid{
  grid-template-columns:minmax(250px,1.25fr) minmax(145px,.72fr) minmax(190px,.9fr) minmax(270px,1.25fr)!important;
  gap:clamp(34px,4.5vw,78px)!important;
  align-items:start!important;
}
.ht-footer-brand-column{order:1}
.ht-footer-quick-column{order:2}
.ht-footer-products-column{order:3}
.ht-footer-contact-column{order:4}
.foot .footgrid h4{
  position:relative;
  margin:4px 0 24px!important;
  padding-bottom:15px;
  color:#fff!important;
  font-size:15px!important;
  line-height:1.25;
  letter-spacing:0!important;
  text-transform:none!important;
}
.foot .footgrid h4::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:30px;
  height:3px;
  background:#d77a2d;
}
.ht-footer-quick-column>a,
.ht-footer-products-column>a{
  display:block!important;
  margin:0 0 13px!important;
  color:#d5e0e5!important;
  font-size:13px!important;
  line-height:1.35;
}
.ht-footer-quick-column>a:hover,
.ht-footer-products-column>a:hover{color:#d77a2d!important}
.ht-footer-brand-column>.logo{margin-bottom:14px!important}
.ht-footer-brand-column>p{
  max-width:285px;
  margin-bottom:20px!important;
  color:#b8c6cd!important;
  font-size:13px!important;
  line-height:1.7!important;
}
.ht-footer-whatsapp{
  margin:18px 0 20px!important;
}
.ht-footer-qr-label{
  display:block;
  margin:0 0 11px;
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1.45;
}
.ht-footer-whatsapp>a{
  display:inline-block!important;
  width:auto!important;
}
.ht-footer-whatsapp img{
  width:126px!important;
  height:126px!important;
  padding:6px!important;
  background:#fff!important;
}
.ht-footer-social{margin-top:16px!important}
.ht-footer-social-title{margin-bottom:10px!important}
.ht-footer-detail{margin-bottom:18px}
.ht-footer-detail-label{
  display:block;
  margin-bottom:6px;
  color:#79a7c2;
  font-size:10px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.12em;
}
.ht-footer-detail-value{
  display:inline-block!important;
  margin:0!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.45;
  text-transform:none!important;
  letter-spacing:0!important;
}
.ht-footer-detail-value:hover{color:#d77a2d!important}
.ht-footer-contact-column .ht-footer-address{
  max-width:315px;
  margin:20px 0 17px!important;
  color:#d0dce2!important;
  font-size:12px!important;
  line-height:1.65!important;
}
.ht-footer-contact-column .ht-footer-contact-icon{
  color:#f2a014;
  margin-top:1px;
}
.ht-footer-contact-column .ht-footer-enquiry{
  color:#fff!important;
  font-size:12px!important;
  font-weight:700!important;
}
@media(max-width:1050px){
  .foot .footgrid{
    grid-template-columns:minmax(240px,1.15fr) minmax(150px,.75fr) minmax(200px,1fr)!important;
  }
  .ht-footer-contact-column{grid-column:1/-1}
}
@media(max-width:760px){
  .foot .footgrid{grid-template-columns:1fr 1fr!important;gap:38px 28px!important}
  .ht-footer-brand-column{grid-column:1/-1}
  .ht-footer-contact-column{grid-column:1/-1}
}
@media(max-width:520px){
  .foot .footgrid{grid-template-columns:1fr!important}
  .ht-footer-brand-column,
  .ht-footer-quick-column,
  .ht-footer-products-column,
  .ht-footer-contact-column{grid-column:auto}
  .ht-footer-quick-column{order:2}
  .ht-footer-products-column{order:3}
  .ht-footer-contact-column{order:4}
}