/* CIV-UK shared shell and inner-page families. Design tokens live in styles.css */
.site-header .brand{width:clamp(145px,15.5vw,182px)}.site-header .brand img{height:auto;max-height:58px;object-fit:contain}.nav{gap:clamp(9px,1.25vw,17px)}.nav a{font-size:clamp(10px,.92vw,13px)}.nav a[aria-current=page]{color:var(--red)}.header-inner{gap:12px}.header-cta{padding-inline:12px}.footer-main .footer-logo{width:145px;align-self:start}.footer-main .footer-logo img{width:135px;height:auto}
.whatsapp-float{position:fixed;z-index:55;bottom:23px;right:max(22px,calc((100vw - var(--canvas))/2 + 22px));display:flex;align-items:center;gap:9px;background:#22bd5c;color:#fff;border-radius:999px;min-height:54px;padding:0 18px 0 12px;box-shadow:0 9px 25px #0b2c2250;font-size:13px;font-weight:800;transition:transform .2s}.whatsapp-float:hover{transform:translateY(-3px)}.whatsapp-float svg{width:28px;height:28px;stroke:none;fill:currentColor}
#main-content{min-height:30vh}.page-hero{height:clamp(230px,28vw,320px);background:#edf3fa url('/assets/hero-generated-1500.webp') center/cover no-repeat;position:relative;display:flex;align-items:center;border-bottom:1px solid #e0e6ed}.page-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#eff3f9f9,#eff3f9eb 40%,#eff3f96b 70%,transparent)}.page-hero-inner{position:relative;height:100%;display:flex;align-items:center}.page-hero-inner>div{max-width:54%}.page-hero h1{font-size:clamp(30px,4vw,54px);margin:0 0 12px}.page-hero p:not(.eyebrow){color:#41536b;font-size:clamp(12px,1.4vw,17px);margin:0 0 17px;line-height:1.5}.breadcrumbs{font-size:12px;color:#536882}.breadcrumbs a{color:#bb102e;text-decoration:underline;text-underline-offset:3px}.inner-section{scroll-margin-top:85px}.inner-section .section-heading p{max-width:780px}.product-archive{background:#f6f8fa}.product-archive .products-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.notice-panel{background:white;border:1px solid #dce4ee;padding:22px 25px;display:flex;align-items:center;justify-content:space-between;gap:22px}.data-note{font-size:12px;line-height:1.6;color:#607086;background:#f1f5fa;border-left:3px solid #d1112a;padding:12px 14px;margin-top:16px}.notice-panel .data-note{margin:0;max-width:730px}.detail-grid{display:grid;grid-template-columns:44% 56%;gap:35px;align-items:center}.detail-photo{min-height:320px;padding:28px;background:linear-gradient(130deg,#fff,#f0f4f8);border:1px solid #e1e7ed;display:grid;place-items:center}.detail-image{max-height:310px;object-fit:contain}.detail-information h2{font-size:clamp(25px,3vw,35px)}.detail-information>p:not(.eyebrow){color:#536578;line-height:1.65;margin-bottom:15px}.detail-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px}.detail-fallback{display:flex;flex-direction:column;align-items:center;gap:12px;color:#7a8ea4;font-size:13px}.detail-fallback svg{height:75px;width:75px;stroke-width:1}
.about-stacked{display:grid;grid-template-columns:1fr 43%;align-items:center;gap:35px}.about-stacked h3{font-size:24px}.about-stacked img{aspect-ratio:4/3;width:100%;object-fit:cover}.about-stacked p{line-height:1.75;color:#536679;margin-bottom:12px}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;scroll-margin-top:75px}.info-grid.two{grid-template-columns:repeat(2,1fr)}.info-tile{padding:21px;background:#f6f8fa;border:1px solid #e1e7ed}.info-tile h3{font-size:19px;margin-bottom:10px}.info-tile p{font-size:13px;line-height:1.6;color:#546579}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.gallery-card{border:1px solid #e1e6ed;background:#f6f8fa;display:block;overflow:hidden}.gallery-card:hover{box-shadow:0 8px 17px #0c2a4625}.gallery-card img{width:100%;aspect-ratio:3/2;object-fit:cover}.gallery-card span{display:block;padding:11px 12px;font-size:13px;font-weight:700}.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.video-link{display:flex;align-items:center;gap:12px;min-height:82px;border:1px solid #e2e8ef;background:#f6f8fa;padding:14px}.video-link:hover{border-color:var(--red)}.video-icon{height:33px;width:33px;flex:0 0 33px;background:#cc0e2a;color:#fff;border-radius:50%;display:grid;place-items:center}.video-link strong{font-size:12px}.video-link span:not(.video-icon){color:#65768a;font-size:10px}.video-link>svg{height:16px;width:16px;color:#bd1230}
.catalogue-feature{display:grid;grid-template-columns:55% 45%;gap:20px;align-items:center;background:linear-gradient(110deg,#e6edf4,#f6f8fa);padding:30px;min-height:270px}.catalogue-feature h2{font-size:31px;margin-bottom:12px}.catalogue-feature p:not(.eyebrow){color:#516375;line-height:1.65;margin-bottom:19px}.catalogue-art-block{height:230px;display:grid;place-items:center}.catalogue-art-block img{max-height:220px;object-fit:contain}.resource-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.resource-link{display:flex;align-items:center;gap:11px;padding:14px 16px;background:#f6f8fa;border:1px solid #e1e7ef;min-height:80px}.resource-link:hover{border-color:#d00b2a}.resource-link>svg{width:24px;height:24px;color:#32546a}.resource-link>span{flex:1}.resource-link strong,.resource-link small{display:block}.resource-link strong{font-size:13px}.resource-link small{font-size:11px;color:#6b798c;margin-top:3px}.resource-link>svg:last-child{color:#d00c2c}
.contact-feature{display:grid;grid-template-columns:43% 57%;gap:26px}.contact-feature h2{font-size:30px}.contact-feature>div>p:not(.eyebrow){color:#56697b;line-height:1.65;margin-bottom:15px}.contact-links{display:grid;gap:12px;margin:18px 0}.contact-links a{display:flex;gap:12px;align-items:center;color:#123750;font-weight:700}.contact-links svg{width:21px;height:21px}.form-panel{background:#f5f8fb;border:1px solid #dde6ef;padding:24px}.form-panel h3{font-size:19px;margin-bottom:16px}.rfq-form label{display:block;font-size:12px;font-weight:700;margin-bottom:12px}.rfq-form input,.rfq-form textarea,.rfq-form select{width:100%;display:block;border:1px solid #cbd6e0;background:#fff;border-radius:3px;padding:10px;margin-top:5px;min-height:40px;font-size:13px}.rfq-form textarea{min-height:110px}.locations-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.location-card{background:#f6f8fa;border:1px solid #dee6ef;padding:20px;min-height:165px}.location-card h3{font-size:20px;margin-bottom:10px}.location-card p:not(.eyebrow){color:#52657a;line-height:1.6;margin-bottom:10px}.location-card small{color:#76869b}
.catalogue-owner-logo{width:78%;height:auto;object-fit:contain}
@media(max-width:1000px) and (min-width:701px){.site-header .brand{width:147px}.nav{gap:8px}.nav a{font-size:10px}.header-cta{padding:0 9px;font-size:10px}.product-archive .products-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.site-header .brand{width:166px}.site-header .brand img{width:166px;height:auto}.page-hero{min-height:285px;height:auto;background-size:auto 390px;background-position:65% bottom}.page-hero:before{background:linear-gradient(180deg,#f2f6fbea,#eff4faee 66%,#eef4fa85)}.page-hero-inner{padding:37px 0;align-items:flex-start}.page-hero-inner>div{max-width:88%}.page-hero h1{font-size:34px}.page-hero p:not(.eyebrow){font-size:14px}.product-archive .products-grid{grid-template-columns:repeat(2,1fr)}.detail-grid,.about-stacked,.catalogue-feature,.contact-feature{grid-template-columns:1fr;gap:18px}.detail-photo{min-height:220px;padding:18px}.detail-image{max-height:205px}.notice-panel{display:block}.notice-panel .btn{margin-top:12px}.info-grid,.info-grid.two,.video-grid,.resource-grid,.locations-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:repeat(2,1fr)}.catalogue-feature{padding:19px}.catalogue-art-block{height:180px}.catalogue-art-block img{max-height:165px}.contact-feature h2{font-size:26px}.form-panel{padding:18px}.whatsapp-float{right:13px;bottom:14px;width:54px;height:54px;min-height:54px;padding:0;justify-content:center}.whatsapp-float span{display:none}.footer-main .footer-logo{width:120px}.footer-main .footer-logo img{width:112px}}
@media(prefers-reduced-motion:reduce){.whatsapp-float{transition:none!important}}

/* Shared customer-facing refinements */
.site-header{overflow:visible}
.site-header .brand{width:clamp(151px,17vw,203px);display:flex;align-items:center;overflow:visible;min-width:0}
.site-header .brand img{width:100%;max-width:100%;height:auto;max-height:63px;object-fit:contain;object-position:center left;overflow:visible}
.header-inner{overflow:visible}
.footer-logo img{object-fit:contain}
.variant-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.variant-card{background:white;border:1px solid var(--border);border-radius:4px;padding:20px;box-shadow:0 5px 16px #0c29400c}
.variant-card h3{margin:0 0 15px;font-size:19px;line-height:1.2}
.spec-section{background:#f3f6f9}
.spec-table{border-collapse:collapse;width:100%;font-size:13px}
.spec-table tr+tr{border-top:1px solid #e3e8ed}
.spec-table th,.spec-table td{padding:10px 5px;vertical-align:top;line-height:1.45;text-align:left}
.spec-table th{color:#566b80;width:43%;font-weight:600}
.spec-table td{color:var(--navy);font-weight:600}
.spec-footnote{color:#627188;font-size:13px;margin-top:18px;line-height:1.6;max-width:720px}
.spec-highlights{margin-top:18px;padding:12px 16px;background:#f3f7fb;border-left:3px solid var(--red);font-size:13px;font-weight:700;color:var(--navy)}
.info-tile ul{margin:8px 0 0;padding-left:20px;font-size:14px;color:#50667b;line-height:1.85}
.gallery-card{position:relative}
.gallery-card small{display:block;font-size:11px;color:#596d80;font-weight:600;padding:0 12px 13px}
.gallery-concept img{aspect-ratio:4/3}
.resource-grid{scroll-margin-top:95px}
#catalogue{scroll-margin-top:80px}
.footer-main .btn{margin-top:14px;display:inline-flex!important;color:white!important;width:max-content}
.footer-main .btn svg{flex-shrink:0}
.location-card a{display:inline-flex;align-items:center;gap:8px;color:#be0e2a;font-size:12px;font-weight:700}
.location-card a svg{width:15px;height:15px}
.site-header .nav{gap:clamp(7px,1.2vw,19px)}
.site-header .nav a{white-space:nowrap}
@media(max-width:1000px) and (min-width:701px){
 .site-header .brand{width:150px}
 .site-header .nav{gap:8px}
 .site-header .nav a{font-size:10px}
}
@media(max-width:700px){
 .site-header{height:72px}
 .site-header .brand{width:185px}
 .site-header .brand img{max-height:58px}
 .site-header .nav{top:72px}
 .variant-grid{grid-template-columns:1fr}
 .variant-card{padding:16px}
 .spec-table{font-size:12.5px}
 .gallery-concept img{aspect-ratio:4/3}
 .footer-main .btn{margin-top:14px}
}
@media(max-width:350px){
 .site-header .brand{width:164px}
 .site-header .brand img{max-height:54px}
}
/* Keep gallery photography in consistent responsive aspect ratios. */
.gallery-grid .gallery-card img{width:100%;height:auto;aspect-ratio:3/2;display:block;object-fit:cover}
.gallery-grid .gallery-concept img{aspect-ratio:4/3}
@media(max-width:700px){.gallery-grid .gallery-card img{height:auto}.gallery-grid .gallery-concept img{height:auto;aspect-ratio:4/3}}

/* CIV-UK brand: the wordmark is reconstructed from uncropped original artwork.
   Respect image aspect ratio; no height clipping, cropping, scaling distortion. */
.site-header .brand{
  flex:0 0 clamp(165px,18vw,214px);
  width:clamp(165px,18vw,214px);
  height:auto;
  min-height:0;
  overflow:visible;
  align-self:center;
}
.site-header .brand img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center left;
  overflow:visible;
}
@media(max-width:700px){
 .site-header .brand{width:185px;flex-basis:185px}
 .site-header .brand img{height:auto;max-height:none}
}
@media(max-width:360px){
 .site-header .brand{width:170px;flex-basis:170px}
}