:root{
  --hero-h:527px;
  --paper:#ffffff;
  --paper-raised:#ffffff;
  --ink:#16211b;
  --ink-soft:#3d473f;
  --line:#c9d0c8;
  --green:#1b4d3a;
  --green-deep:#123528;
  --green-tint:#e3ede7;
  --steel:#5b6570;
  --steel-tint:#e4e6e7;
  --accent:#2f8f5b;
  --accent-deep:#23724a;
  --accent-tint:#dcefe2;
  --focus:#2f7dd1;
  --shadow: 0 1px 2px rgba(20,30,24,0.06), 0 8px 24px -12px rgba(20,30,24,0.18);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
h1,h2,h3,h4{
  font-family:"Oswald", "Arial Narrow", sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.02em;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
p{margin:0;}
a{color:inherit;}
.mono{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:0.01em;
}
.eyebrow{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-deep);
  font-weight:600;
}
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 2.5rem);
}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
button{font:inherit; cursor:pointer;}

/* ---------- sticky header group ---------- */
.site-header-group{position:sticky; top:0; z-index:40;}

/* ---------- topbar ---------- */
.topbar{background:var(--green); color:#fff;}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:0.35rem 1.5rem; padding:0.45rem clamp(1.25rem, 4vw, 2.5rem);
  max-width:1180px; margin:0 auto;
  font-family:"IBM Plex Mono", monospace; font-size:0.74rem; letter-spacing:0.02em;
}
.topbar a{color:#fff; text-decoration:none;}
.topbar a:hover{text-decoration:underline;}
.topbar-contact{display:flex; gap:1.25rem; flex-wrap:wrap;}
@media (max-width:620px){
  .topbar-inner{
    flex-direction:column; align-items:center; justify-content:center; text-align:center;
    gap:0.4rem; padding-top:0.4rem; padding-bottom:0.4rem;
  }
  .topbar-contact{flex-direction:column; align-items:center; gap:0.4rem;}
  .topbar a{overflow-wrap:anywhere;}
}

/* ---------- header ---------- */
header.site{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:0.85rem clamp(1.25rem, 4vw, 2.5rem);
  max-width:1180px; margin:0 auto;
}
.brand{display:flex; flex-direction:column; align-items:center; gap:0.35rem; text-decoration:none; color:var(--ink);}
.brand-mark{flex:none; display:block;}
.header-inner .brand-mark{width:220px; height:auto;}
@media (max-width: 860px){
  .header-inner .brand-mark{width:165px;}
}
.brand-text{display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1.15;}
.brand-text .name{
  font-family:"Oswald", sans-serif; font-weight:700; font-size:1.05rem;
  letter-spacing:0.03em; color:var(--green);
}
.brand-text .sub{
  font-family:"IBM Plex Mono", monospace; font-size:0.62rem; letter-spacing:0.16em;
  color:var(--steel); text-transform:uppercase;
}
nav.primary{display:flex; align-items:center; gap:0.25rem;}
nav.primary a{
  background:none; border:none; padding:0.55rem 0.9rem; border-radius:3px;
  font-family:"IBM Plex Mono", monospace; font-size:0.78rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink-soft); font-weight:500;
  border-bottom:2px solid transparent; text-decoration:none; display:inline-block;
}
nav.primary a:hover{color:var(--ink);}
nav.primary a[aria-current="page"]{color:var(--green); border-bottom-color:var(--accent); font-weight:600;}
.header-cta{
  font-family:"IBM Plex Mono", monospace; font-size:0.78rem; font-weight:600;
  letter-spacing:0.05em; text-transform:uppercase; text-decoration:none;
  color:var(--paper); background:var(--accent-deep); padding:0.55rem 1rem; border-radius:3px;
  white-space:nowrap;
}
.header-cta:hover{background:var(--green-deep);}
.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:4px; padding:0.55rem 0.7rem; color:var(--ink);}
@media (max-width: 940px){
  nav.primary{
    position:absolute; top:100%; left:0; right:0; background:var(--paper-raised);
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
    padding:0.5rem; gap:0; box-shadow:var(--shadow); display:none;
  }
  nav.primary.open{display:flex;}
  nav.primary a{text-align:left; padding:0.75rem 0.9rem; border-bottom:1px solid var(--line); border-radius:0;}
  nav.primary a[aria-current="page"]{border-bottom-color:var(--line); background:var(--green-tint);}
  .nav-toggle{display:inline-flex;}
  .header-cta{display:none;}
}

/* ---------- page content ---------- */
main{position:relative; animation:fade .35s ease both;}
@media (prefers-reduced-motion: reduce){ main{animation:none;} }
@keyframes fade{from{opacity:0;} to{opacity:1;}}

section{padding-top:clamp(0.75rem,2vw,1.5rem); padding-bottom:clamp(2.5rem,6vw,4.5rem);}
section + section{border-top:1px solid var(--line);}
.section-head{max-width:640px; margin-bottom:1.5rem;}
.section-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem); margin-top:0.4rem;}
.section-head p{color:var(--ink-soft); margin-top:0.75rem; font-size:1.02rem;}

/* ---------- hero ---------- */
.hero{
  padding-top:clamp(0.75rem,2vw,1.5rem);
  padding-bottom:clamp(2.5rem,6vw,4rem);
  border-top:none;
  min-height:var(--hero-h);
  display:flex; flex-direction:column; justify-content:center;
  box-sizing:border-box;
}
.hero .wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:stretch;
}
.hero-art{border-radius:4px; overflow:hidden; box-shadow:var(--shadow);}
.hero-art img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
#page-about .hero-art{background:var(--steel-tint);}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero-art{order:-1; box-shadow:var(--shadow);}
  .hero-art img{height:auto; object-fit:contain;}
}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.06; margin-top:0.6rem;}
.hero h1 .accent-word{color:var(--accent);}
.hero-lede{margin-top:1.25rem; font-size:1.08rem; color:var(--ink-soft); max-width:46ch;}
.hero-actions{display:flex; flex-wrap:wrap; gap:0.85rem; margin-top:1.75rem;}
.btn{
  display:inline-flex; align-items:center; gap:0.5rem; text-decoration:none;
  font-family:"IBM Plex Mono", monospace; font-weight:600; font-size:0.85rem;
  letter-spacing:0.04em; text-transform:uppercase; padding:0.8rem 1.3rem; border-radius:3px;
  border:1px solid transparent; background:none; appearance:none; -webkit-appearance:none;
}
.btn-primary{background:var(--accent-deep); color:#fff;}
.btn-primary:hover{background:var(--green-deep);}
.btn-outline{border-color:var(--line); color:var(--ink);}
.btn-outline:hover{border-color:var(--steel); background:var(--paper-raised);}

/* ---------- category grid ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem;}
@media (max-width:820px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .cat-grid{grid-template-columns:1fr;} }
@media (max-width:1100px){ #page-products .cat-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ #page-products .cat-grid{grid-template-columns:1fr;} }
.cat-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:4px;
  padding:1.4rem; display:flex; flex-direction:column; gap:0.85rem; box-shadow:var(--shadow);
}
.cat-card .thumb{
  width:100%; aspect-ratio:1/1; object-fit:contain;
}
.cat-card h3{font-size:1rem; letter-spacing:0.03em;}
.cat-card p{font-size:0.9rem; color:var(--ink-soft);}
.cat-card .spec{
  margin-top:auto; font-size:0.76rem; color:var(--steel); padding-top:0.7rem;
  border-top:1px dashed var(--line);
}

/* ---------- products catalog cards ---------- */
#page-products .cat-card{height:100%;}
#page-products .cat-card .thumb{
  aspect-ratio:auto; height:180px; padding:0.5rem; object-fit:contain;
}
#page-products .cat-card .cat-specs{margin-top:auto; padding-top:0.7rem;}

/* ---------- company profile cards ---------- */
.profile-cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.1rem; margin-top:2rem;}
@media (max-width:900px){ .profile-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:520px){ .profile-cards{grid-template-columns:1fr;} }
.profile-cards .card-heading{display:flex; align-items:center; gap:10px;}
.profile-cards .card-icon{
  width:18px; height:18px; min-width:18px; max-width:18px; flex-shrink:0;
  color:var(--green); display:block;
}

/* ---------- products page ---------- */
.spec-list{display:flex; flex-direction:column; gap:0.9rem;}
.spec-row{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:4px;
  padding:1.25rem 1.4rem; box-shadow:var(--shadow);
}
.spec-row h3{font-size:1.02rem; letter-spacing:0.02em; display:flex; align-items:baseline; gap:0.6rem; flex-wrap:wrap;}
.spec-row .desc{color:var(--ink-soft); font-size:0.94rem; margin-top:0.4rem;}
.cat-card .tags{display:flex; flex-wrap:wrap; gap:0.4rem;}
.tag{
  font-family:"IBM Plex Mono", monospace; font-size:0.72rem; line-height:1.4; white-space:nowrap;
  padding:0.22rem 0.55rem; background:var(--steel-tint); color:var(--ink-soft);
  border-radius:2px; border:1px solid var(--line); cursor:default;
}
#page-products .cat-card .tags{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0.35rem; align-items:stretch;
}
#page-products .cat-card .tags.tags-3{grid-template-columns:repeat(3, minmax(0,1fr));}
#page-products .tag{
  font-size:0.64rem; padding:0.3rem 0.25rem; text-align:center;
  white-space:normal; line-height:1.25; overflow:visible; text-overflow:clip;
  overflow-wrap:break-word; word-break:break-word;
}
@media (max-width:520px){
  #page-products .tag{font-size:0.6rem; padding:0.28rem 0.2rem;}
}
#page-products .more-specs{
  display:block; margin-top:0.65rem; font-family:"IBM Plex Mono", monospace; font-size:0.7rem;
  letter-spacing:0.03em; text-transform:uppercase; color:var(--accent-deep); text-decoration:none;
}
#page-products .more-specs:hover{text-decoration:underline;}
.cat-items{list-style:none; margin:0.9rem 0 0; padding:0; columns:2; column-gap:2.5rem;}
@media (min-width:640px){ .cat-items{columns:3;} }
@media (max-width:480px){ .cat-items{columns:1;} }
.cat-items li{
  font-family:"IBM Plex Mono", monospace; font-size:0.82rem; color:var(--ink-soft);
  padding:0.55rem 0; border-bottom:1px dashed var(--line);
  break-inside:avoid;
}
.note-box{
  margin-top:2rem; padding:1.25rem 1.4rem; border:1px dashed var(--accent); border-radius:4px;
  background:var(--accent-tint); font-size:0.94rem;
}
.note-box strong{color:var(--accent-deep);}

/* ---------- about page ---------- */
.about-copy p{color:var(--ink-soft); font-size:1.02rem; margin-top:1.35rem; max-width:46ch;}
.about-copy p:first-of-type{margin-top:1rem;}

/* ---------- contact page ---------- */
.info-list{display:flex; flex-direction:column; gap:1.3rem;}
.info-row{display:grid; grid-template-columns:30px 1fr; gap:0.9rem;}
.info-row .icon{width:20px; height:20px; color:var(--accent); margin-top:0.15rem;}
.info-row .k{font-family:"IBM Plex Mono", monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel);}
.info-row .v{font-size:1rem; margin-top:0.2rem; overflow-wrap:anywhere;}
.info-row a.v{text-decoration:none; color:var(--green);}
.info-row a.v:hover{text-decoration:underline;}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line); background:var(--paper-raised);}
footer.site .wrap{
  padding:0.85rem clamp(1.25rem,4vw,2.5rem);
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.foot-brand .brand-mark{width:220px; height:auto; object-fit:contain;}
@media (max-width:860px){
  .foot-brand .brand-mark{width:165px;}
}
.foot-info{display:flex; flex-direction:column; align-items:flex-end; gap:0.3rem;}
.foot-contact{display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:0.3rem 0; font-size:0.78rem; font-family:"IBM Plex Mono", monospace;}
.foot-contact > *{padding:0 0.6rem;}
.foot-contact > *:first-child{padding-left:0;}
.foot-contact > *:last-child{padding-right:0;}
.foot-contact > *:not(:first-child){border-left:1px solid var(--green);}
.foot-contact a{text-decoration:none; color:var(--ink-soft);}
.foot-contact a:hover{color:var(--green);}
.foot-copy{font-size:0.76rem; color:var(--steel); white-space:nowrap;}
@media (max-width:560px){
  footer.site .wrap{justify-content:center; text-align:center;}
  .foot-info{align-items:center;}
  .foot-contact{justify-content:center;}
  .foot-contact > *{padding:0;}
  .foot-contact > *:not(:first-child){border-left:none;}
}
/* ---------- data center section ---------- */
.rfq-card{background:var(--paper-raised); border:1px solid var(--line); border-radius:4px; padding:clamp(1.5rem,4vw,2.5rem); box-shadow:var(--shadow);}
.rfq-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;}
@media (max-width:640px){ .rfq-grid{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:0.4rem;}
.field.full{grid-column:1/-1;}
.field label{font-family:"IBM Plex Mono", monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel);}
.field input, .field select, .field textarea{
  font-family:"IBM Plex Sans", sans-serif; font-size:0.95rem; padding:0.65rem 0.8rem;
  border:1px solid var(--line); border-radius:3px; background:var(--paper); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus);}
.field textarea{resize:vertical; min-height:5.5rem; font-family:"IBM Plex Sans", sans-serif;}
.rfq-note{font-size:0.85rem; color:var(--ink-soft); background:var(--accent-tint); border:1px dashed var(--accent); border-radius:4px; padding:0.9rem 1.1rem; margin-top:1.1rem;}
.rfq-actions{display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.5rem; align-items:center;}
.rfq-alt{font-size:0.85rem; color:var(--ink-soft);}
.mobile-cta-bar{display:none;}
@media (max-width:700px){
  #page-datacenters{padding-bottom:64px;}
  .mobile-cta-bar{
    display:flex; gap:0.6rem; position:fixed; bottom:0; left:0; right:0;
    padding:0.65rem clamp(1rem,4vw,1.5rem); background:var(--paper-raised);
    border-top:1px solid var(--line); box-shadow:0 -6px 16px -8px rgba(0,0,0,0.3); z-index:30;
  }
  .mobile-cta-bar .btn{flex:1; justify-content:center; padding:0.75rem 0.5rem; font-size:0.76rem;}
}