:root{
  --ink:#1C1D1F;
  --white:#FFFFFF;
  --paper:#F7F8F9;        /* near-white section background */
  --paper-2:#EFF1F3;      /* slightly deeper near-white */
  --blue:#0B58A0;         /* sampled directly from logo */
  --blue-dark:#0A4C89;
  --blue-light:#EAF1F8;
  --grey:#58595B;         /* sampled from logo wordmark/door frame */
  --grey-line:#DADDE1;
  --shadow: 0 12px 32px rgba(11,88,160,0.12);
  --radius: 3px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif;
  margin:0;
  color:var(--blue-dark);
  letter-spacing:-0.01em;
}
.mono{
  font-family:'IBM Plex Mono',monospace;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px;}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--grey-line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; max-width:1180px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:36px; width:auto;}
.brand-text{font-family:'Space Grotesk'; font-weight:700; color:var(--blue-dark); font-size:1.05rem; line-height:1.1;}
.brand-text small{display:block; font-family:'IBM Plex Mono'; font-weight:500; font-size:0.6rem; letter-spacing:0.08em; color:var(--grey); text-transform:uppercase; margin-top:2px;}
.brand .logo-full-img{height:46px; width:auto;}
.footer-brand .logo-full-img{height:38px; width:auto;}
nav.links{display:flex; gap:28px; align-items:center;}
nav.links a{
  text-decoration:none; color:var(--ink); font-size:0.92rem; font-weight:500;
  position:relative; padding:4px 0;
}
nav.links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--blue);
  transition:width 0.2s ease;
}
nav.links a:hover::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:14px;}
.phone-link{display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono'; font-size:0.85rem; font-weight:600; color:var(--blue-dark); text-decoration:none; white-space:nowrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:var(--radius);
  font-family:'Space Grotesk'; font-weight:600; font-size:0.92rem;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--blue); color:var(--white);}
.btn-primary:hover{background:var(--blue-dark); box-shadow:var(--shadow);}
.btn-outline{background:transparent; color:var(--blue-dark); border-color:var(--blue-dark);}
.btn-outline:hover{background:var(--blue-dark); color:var(--white);}
.btn-light{background:var(--white); color:var(--blue-dark);}
.btn-light:hover{background:var(--paper);}
.btn-wa{background:#1F8A45; color:var(--white);}
.btn-wa:hover{background:#186B36;}
.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.menu-toggle svg{width:26px; height:26px; stroke:var(--blue-dark);}

/* ---------- Hero (split layout, white ground) ---------- */
.hero{
  display:grid; grid-template-columns:1.05fr 0.95fr; align-items:stretch;
  background:var(--white);
  border-bottom:1px solid var(--grey-line);
  padding:0;
}
.hero-media{position:relative; overflow:hidden; min-height:420px;}
.hero-media img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.hero-copy{
  padding:72px 48px; display:flex; flex-direction:column; justify-content:center;
  background:var(--paper);
}
.eyebrow{
  font-family:'IBM Plex Mono'; font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--grey); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow .dot{width:7px; height:7px; background:var(--blue); border-radius:50%; display:inline-block;}
.hero h1{
  font-size:clamp(1.9rem, 3.4vw, 2.7rem); font-weight:700; max-width:16ch; line-height:1.1;
}
.hero p.lede{
  margin-top:20px; max-width:44ch; font-size:1.02rem; color:#454A50; font-weight:400;
}
.hero-actions{margin-top:30px; display:flex; gap:14px; flex-wrap:wrap;}

.capstrip{
  background:var(--blue-dark); color:var(--white); padding:16px 0;
}
.capstrip .wrap{display:flex; flex-wrap:wrap; gap:0; justify-content:space-between;}
.capchip{
  display:flex; align-items:center; gap:10px; padding:6px 18px;
  font-family:'IBM Plex Mono'; font-size:0.8rem; letter-spacing:0.05em;
  border-left:1px solid rgba(255,255,255,0.18);
}
.capchip:first-child{border-left:none; padding-left:0;}
.capchip svg{width:18px; height:18px; stroke:#9AC3E8; flex-shrink:0;}

/* ---------- Section shell ---------- */
section{padding:88px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.kicker{
  font-family:'IBM Plex Mono'; font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--blue); display:block; margin-bottom:12px;
}
.section-head h2{font-size:clamp(1.6rem, 3.2vw, 2.3rem);}
.section-head p{margin-top:14px; color:#4B5158; font-size:1rem; max-width:56ch;}

/* ---------- Services ---------- */
.services{background:var(--white);}
.service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.service-card{
  padding:28px 22px; border:1px solid var(--grey-line); border-radius:var(--radius);
  transition:border-color 0.2s ease, transform 0.2s ease;
}
.service-card:hover{border-color:var(--blue); transform:translateY(-3px);}
.service-card svg{width:30px; height:30px; stroke:var(--blue); margin-bottom:16px;}
.service-card h3{font-size:1.05rem; margin-bottom:8px;}
.service-card p{font-size:0.9rem; color:#4B5158; margin:0;}

/* ---------- Products ---------- */
.products-alt{background:var(--paper);}
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--grey-line); border:1px solid var(--grey-line);}
.product-card{background:var(--white); display:flex; flex-direction:column;}
.product-photo{aspect-ratio:4/3; overflow:hidden; position:relative;}
.product-photo img{width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease;}
.product-card:hover .product-photo img{transform:scale(1.06);}
.product-body{padding:24px; flex:1; display:flex; flex-direction:column;}
.product-body h3{font-size:1.12rem; margin-bottom:8px;}
.product-body p{font-size:0.9rem; color:#4B5158; flex:1; margin:0 0 16px;}
.spec-tag{
  font-family:'IBM Plex Mono'; font-size:0.66rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--grey); border-top:1px dashed var(--grey-line); padding-top:12px; margin-bottom:14px;
}
.card-link{
  font-family:'Space Grotesk'; font-weight:600; font-size:0.86rem; color:var(--blue);
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.card-link svg{width:14px; height:14px;}
.card-link:hover{color:var(--blue-dark);}

/* ---------- Gallery ---------- */
.gallery-grid{columns:4 260px; column-gap:14px;}
.gallery-item{
  break-inside:avoid; margin-bottom:14px; position:relative; cursor:zoom-in;
  border:1px solid var(--grey-line); overflow:hidden; border-radius:var(--radius);
}
.gallery-item img{width:100%; display:block; transition:transform 0.4s ease;}
.gallery-item:hover img{transform:scale(1.04);}
.gallery-cap{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px 8px;
  background:linear-gradient(0deg, rgba(10,20,35,0.82), rgba(10,20,35,0));
  color:var(--white); font-family:'IBM Plex Mono'; font-size:0.66rem; letter-spacing:0.03em;
  opacity:0; transition:opacity 0.25s ease;
}
.gallery-item:hover .gallery-cap{opacity:1;}

.lightbox{
  position:fixed; inset:0; background:rgba(8,12,20,0.92); display:none;
  align-items:center; justify-content:center; z-index:200; padding:40px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw; max-height:82vh; border:2px solid rgba(255,255,255,0.15);}
.lightbox-cap{color:#D6DCE2; font-family:'IBM Plex Mono'; font-size:0.8rem; margin-top:14px; text-align:center;}
.lightbox-close{position:absolute; top:26px; right:32px; background:none; border:none; cursor:pointer;}
.lightbox-close svg{width:30px; height:30px; stroke:var(--white);}

/* ---------- Process (dimension line) ---------- */
.process{background:var(--blue-dark); color:var(--white);}
.process .kicker{color:#9AC3E8;}
.process .section-head h2{color:var(--white);}
.process .section-head p{color:#C7D6E5;}
.dimline{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:16px;}
.dimline::before{content:""; position:absolute; top:11px; left:0; right:0; height:1px; background:rgba(255,255,255,0.28);}
.dim-step{position:relative; padding:0 22px 0 0;}
.dim-tick{width:1px; height:22px; background:rgba(255,255,255,0.28); position:relative; margin-bottom:18px;}
.dim-tick::before{
  content:attr(data-n); position:absolute; top:-30px; left:-2px;
  font-family:'IBM Plex Mono'; font-size:0.7rem; color:#9AC3E8; background:var(--blue-dark); padding-right:6px;
}
.dim-step h3{color:var(--white); font-size:1.05rem; margin-bottom:10px;}
.dim-step p{color:#C7D6E5; font-size:0.88rem; margin:0;}

/* ---------- About ---------- */
.about{background:var(--white);}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.about-photo{border:1px solid var(--grey-line); position:relative; border-radius:var(--radius); overflow:hidden;}
.about-photo img{width:100%; display:block;}
.about-photo .tag{
  position:absolute; bottom:0; left:0; background:var(--blue); color:var(--white);
  font-family:'IBM Plex Mono'; font-size:0.68rem; letter-spacing:0.05em; padding:8px 14px;
}
.about-copy .kicker{margin-bottom:14px;}
.about-copy h2{font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:20px;}
.about-copy p{color:#4B5158; margin-bottom:16px; font-size:0.98rem;}
.about-list{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:12px;}
.about-list li{display:flex; align-items:flex-start; gap:12px; font-size:0.93rem; color:var(--ink);}
.about-list svg{width:18px; height:18px; stroke:var(--blue); flex-shrink:0; margin-top:2px;}

/* ---------- FAQ ---------- */
.faq{background:var(--paper);}
.faq-grid{display:grid; gap:1px; background:var(--grey-line); border:1px solid var(--grey-line);}
.faq-item{background:var(--white); padding:20px 24px;}
.faq-item summary{
  cursor:pointer; font-family:'Space Grotesk'; font-weight:600; font-size:1rem; color:var(--blue-dark);
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:1.3rem; color:var(--blue); font-weight:400;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin:14px 0 0; color:#4B5158; font-size:0.92rem; max-width:70ch;}

/* ---------- Contact ---------- */
.contact{background:var(--white);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.contact-methods{display:grid; gap:14px; align-content:start;}
.method-card{
  background:var(--paper); border:1px solid var(--grey-line); padding:20px 22px; border-radius:var(--radius);
  display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--ink);
  transition:border-color 0.2s ease, transform 0.2s ease;
}
.method-card:hover{border-color:var(--blue); transform:translateX(3px);}
.method-icon{
  width:44px; height:44px; border-radius:50%; background:var(--blue); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.method-icon-wa{background:#1F8A45;}
.method-icon svg{width:20px; height:20px; stroke:var(--white);}
.method-card .lbl{font-family:'IBM Plex Mono'; font-size:0.66rem; letter-spacing:0.05em; color:var(--grey); text-transform:uppercase; display:block;}
.method-card .val{font-family:'Space Grotesk'; font-weight:600; font-size:1rem; color:var(--blue-dark); margin-top:3px;}
.no-price-note{
  margin-top:6px; padding:16px 18px; background:var(--blue-light); border-left:3px solid var(--blue);
  font-size:0.87rem; color:#33404F; border-radius:var(--radius);
}

.quote-form{background:var(--paper); border:1px solid var(--grey-line); padding:32px; border-radius:var(--radius);}
.quote-form h3{font-size:1.12rem; margin-bottom:6px;}
.quote-form > p{font-size:0.87rem; color:#5A6069; margin:0 0 22px;}
.form-row{display:grid; gap:6px; margin-bottom:18px;}
.form-row label{font-family:'IBM Plex Mono'; font-size:0.68rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--grey);}
.form-row input, .form-row select, .form-row textarea{
  font-family:'Inter'; font-size:0.95rem; padding:11px 12px; border:1.5px solid var(--grey-line);
  background:var(--white); border-radius:var(--radius); color:var(--ink); width:100%;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:none; border-color:var(--blue);
}
.form-two{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px;}
.form-note{font-size:0.77rem; color:var(--grey); margin-top:14px;}

/* ---------- Breadcrumb / inner-page hero ---------- */
.breadcrumb{
  font-family:'IBM Plex Mono'; font-size:0.75rem; letter-spacing:0.04em; color:var(--grey);
  padding:18px 0; border-bottom:1px solid var(--grey-line);
}
.breadcrumb a{color:var(--blue); text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.page-hero{
  display:grid; grid-template-columns:1.1fr 0.9fr; align-items:stretch; background:var(--paper);
  border-bottom:1px solid var(--grey-line);
  padding:0;
}
.page-hero-copy{padding:64px 48px; display:flex; flex-direction:column; justify-content:center;}
.page-hero-copy h1{font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.1;}
.page-hero-copy p.lede{margin-top:18px; max-width:50ch; font-size:1.03rem; color:#454A50;}
.page-hero-media{position:relative; overflow:hidden; min-height:340px;}
.page-hero-media img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}

/* ---------- Benefits list (two-column) ---------- */
.benefits-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 32px;}
.benefits-grid li{display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:var(--ink);}
.benefits-grid svg{width:18px; height:18px; stroke:var(--blue); flex-shrink:0; margin-top:2px;}

/* ---------- Styles grid (product sub-types) ---------- */
.styles-grid{display:grid; gap:1px; background:var(--grey-line); border:1px solid var(--grey-line);}
.styles-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.styles-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.style-card{background:var(--white); display:flex; flex-direction:column;}
.style-photo{aspect-ratio:4/3; overflow:hidden;}
.style-photo img{width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease;}
.style-card:hover .style-photo img{transform:scale(1.06);}
.style-body{padding:22px;}
.style-body h3{font-size:1.05rem; margin-bottom:8px;}
.style-body p{font-size:0.88rem; color:#4B5158; margin:0;}

.cta-banner{
  background:var(--blue-dark); color:var(--white); padding:56px 0; text-align:center;
}
.cta-banner h2{color:var(--white); font-size:clamp(1.4rem,3vw,2rem); margin-bottom:14px;}
.cta-banner p{color:#C7D6E5; max-width:50ch; margin:0 auto 26px; font-size:1rem;}

/* ---------- Footer ---------- */
footer{background:var(--blue-dark); color:#C7D6E5; padding:52px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-bottom:32px;}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.footer-brand img{height:30px;}
.footer-brand span{font-family:'Space Grotesk'; font-weight:700; color:var(--white); font-size:1.02rem;}
footer h4{color:var(--white); font-family:'IBM Plex Mono'; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:14px;}
footer p{font-size:0.88rem; margin:0 0 10px; line-height:1.6;}
footer a{text-decoration:none; color:#C7D6E5; font-size:0.88rem; display:block; margin-bottom:10px;}
footer a:hover{color:var(--white);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.14); padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:'IBM Plex Mono'; font-size:0.7rem; color:#9AC3E8;
}

.wa-float{
  position:fixed; bottom:22px; right:22px; z-index:100;
  width:56px; height:56px; border-radius:50%; background:#1F8A45;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,0.25);
  text-decoration:none; border:none; cursor:pointer;
}
.wa-float svg{width:27px; height:27px; fill:var(--white);}
.wa-float:hover{background:#186B36;}

@media (max-width: 920px){
  .hero{grid-template-columns:1fr;}
  .hero-media{min-height:280px;}
  .hero-copy{padding:44px 28px;}
  .page-hero{grid-template-columns:1fr;}
  .page-hero-media{min-height:260px;}
  .page-hero-copy{padding:40px 28px;}
  .styles-grid.cols-3, .styles-grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .benefits-grid{grid-template-columns:1fr;}
  nav.links{display:none;}
  .menu-toggle{display:block;}
  .phone-link{display:none;}
  .nav-cta .btn-primary{padding:10px 14px; font-size:0.82rem; white-space:nowrap;}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .about-grid{grid-template-columns:1fr; gap:32px;}
  .contact-grid{grid-template-columns:1fr; gap:32px;}
  .footer-grid{grid-template-columns:1fr; gap:26px;}
  .dimline{grid-template-columns:1fr 1fr; row-gap:32px;}
  .form-two{grid-template-columns:1fr;}
  .gallery-grid{columns:2 200px;}
}
@media (max-width: 560px){
  .service-grid{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:1fr;}
  .styles-grid.cols-3, .styles-grid.cols-4{grid-template-columns:1fr;}
  .capstrip .wrap{flex-direction:column; gap:10px;}
  .capchip{border-left:none; padding-left:0; border-top:1px solid rgba(255,255,255,0.14); padding-top:10px;}
  .capchip:first-child{border-top:none; padding-top:0;}
}