:root{
  --brand:#0b3a8f;
  --brand-2:#061b46;
  --text:#111213;
  --muted:#f5f7fb;
  --bg:#ffffff;
  --ring: rgba(11,58,143,0.35);
  --shadow: 0 10px 25px rgba(2,8,23,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  color:var(--text);background:var(--bg);line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin-inline:auto;padding:0 1rem}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem 1rem;background:var(--brand);color:#fff;border-radius:.5rem;z-index:1000}

.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e6e8ee;z-index:50}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--brand-2)}
.brand-mark{max-height:40px;height:auto;width:auto}
.brand-text{letter-spacing:.3px}
.site-nav .nav-menu{display:flex;gap:1rem;align-items:center;list-style:none;margin:0;padding:0}
.site-nav .nav-menu a{padding:.5rem .75rem;border-radius:.5rem}
.site-nav .nav-menu a:hover{background:var(--muted);text-decoration:none}
.btn{display:inline-block;padding:.625rem 1rem;border-radius:.6rem;border:1px solid transparent;font-weight:600;box-shadow:var(--shadow)}
.btn-primary{background:var(--brand);color:#fff}
.btn-outline{background:#fff;border-color:#cfd5e5;color:var(--brand-2)}

.nav-toggle{display:none}

.hero{background:linear-gradient(180deg,#f7f9ff,transparent);padding:4rem 0 2rem}
.hero h1{font-size:clamp(2rem,4vw,3rem);line-height:1.15;margin:.25rem 0}
.hero p.lead{font-size:1.125rem;max-width:65ch;color:#334;}

.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{background:#fff;border:1px solid #e6e8ee;border-radius:1rem;padding:1rem;box-shadow:var(--shadow)}
.card h3{margin-top:.25rem}

.section{padding:2.25rem 0}
.section h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:0 0 .5rem}

.kicker{font-size:.9rem;color:#556;letter-spacing:.08em;text-transform:uppercase}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #e6e8ee;padding:.75rem .5rem;text-align:left}
.table th{background:#f6f8fc}

.form{display:grid;gap:1rem;max-width:720px}
.input,.select,.textarea{width:100%;padding:.75rem;border:1px solid #cfd5e5;border-radius:.6rem;background:#fff}
.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--ring);border-color:var(--brand)}

.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .5rem;border-radius:.5rem;background:#eef2ff;border:1px solid #d7def9;font-size:.8rem}

.site-footer{margin-top:3rem;border-top:1px solid #e6e8ee;background:#fafbff}
.footer-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(3,minmax(0,1fr));padding:2rem 1rem}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:1rem 0;border-top:1px solid #e6e8ee}
.small{font-size:.85rem;color:#556}
.list-plain{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}

.taglist{display:flex;flex-wrap:wrap;gap:.5rem}

.notice{padding:.75rem 1rem;border:1px dashed #cfd5e5;border-radius:.75rem;background:#fbfcff}

@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .site-nav .nav-menu{display:none;position:absolute;right:1rem;top:64px;background:#fff;border:1px solid #e6e8ee;border-radius:.75rem;padding:.5rem;box-shadow:var(--shadow);min-width:260px;flex-direction:column}
  .nav-toggle{display:inline-block;border:1px solid #cfd5e5;background:#fff;padding:.5rem .75rem;border-radius:.5rem}
}

.hero-banner{display:grid;gap:1.5rem;grid-template-columns:1.2fr .8fr;align-items:center}
.hero-visual{background:conic-gradient(from 90deg at 50% 50%, #e9efff, #f7f9ff);border-radius:1rem;height:260px;display:grid;place-items:center;border:1px solid #e6e8ee}
.hero-visual img{width:70%;opacity:.9}

.figure{border:1px solid #e6e8ee;border-radius:1rem;padding:1rem;background:#fff;box-shadow:var(--shadow)}
.figure figcaption{font-size:.9rem;color:#445;margin-top:.5rem}

.card img{max-height:72px;object-fit:contain;margin-inline:auto}

/* Logo sizing tweaks */
.card img, .logo-row img {display:block;max-height:84px;width:auto;max-width:100%;margin-inline:auto}
.logo-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
@media(max-width:900px){.logo-row{grid-template-columns:1fr 1fr}}

/* Chemelex family footer centering + sizing */
.chemelex-family-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}
.chemelex-family-footer img{
  display:block;
  margin-inline:auto;
  max-height:88px; /* slightly larger */
  width:auto;
}

.chemelex-family-footer img{max-height:88px !important}

/* Increase Chemelex logo size by ~50% */
.chemelex-family-footer img{max-height:132px !important;width:auto;display:block;margin-inline:auto}


/* --- Chemelex family block adjustments --- */
.chemelex-family-footer{
  display:flex;align-items:center;justify-content:center;flex-direction:column;
}
.chemelex-family-footer img{max-height:99px !important;width:auto;display:block;margin-inline:auto}
.family-wrap{
  border:1px solid #e6e8ee;border-radius:1rem;padding:1rem;background:#fff;box-shadow:var(--shadow);
}
.family-wrap .logo-row,.family-wrap .grid{margin-top:1rem}



/* Centered logo grids for rows 2/3 */
.logos-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.25rem;
  align-items:center;
}
@media (max-width:900px){
  .logos-grid{grid-template-columns:1fr 1fr}
}
.logos-grid .card{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
.logos-grid .card img{
  max-height:84px;
  width:auto;
  display:block;
}

/* 3-column variant for rows with three brands */
.logos-grid.three{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
  align-items:center;
}
@media (max-width:900px){
  .logos-grid.three{grid-template-columns:1fr 1fr}
}


/* Row 3 visual balance (Convectair, Dimplex, Cadet) */
.logos-grid.three{
  margin-top: 1.5rem !important; /* add a touch more space from Row 2 */
}
.logos-grid.three .card{
  padding: 0.75rem;
}
.logos-grid.three .card img{
  max-height: 68px; /* smaller logos for better balance */
}
@media (max-width: 900px){
  .logos-grid.three .card img{ max-height: 56px; }
}



/* Row 3 logos — closer to average size of other rows */
.logos-grid.three .card img{
  max-height: 60px !important;
  max-width: 70% !important;
  width: auto;
  height: auto;
  object-fit: contain;
}



/* Slightly reduce Convectair logo weight on Row 3 */
.logos-grid.three .card img[src*="convectair-logo.svg"]{
  max-height: 52px !important;
  max-width: 60% !important;
}



/* GDA family logo row (3-wide) */
.logo-row.three{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
  align-items:center;
}
@media (max-width:900px){
  .logo-row.three{grid-template-columns:1fr 1fr}
}
.brand-whitebg{ background:#fff !important; }

/* Make Convectair a bit smaller so it doesn't feel heavy */
.logo-row .card img[src*="convectair-logo"], .logos-grid .card img[src*="convectair-logo"]{
  max-height: 46px !important;
  max-width: 58% !important;
  width:auto; height:auto; object-fit:contain;
}

/* GDA logo size reduction (~30%) */
.gda-header img{max-height:70px !important;width:auto;display:block;margin-inline:auto}


/* --- GDA sizing tweaks --- */
/* Reduce the Glen Dimplex Americas parent logo by ~30% */
.gda-header img{ max-height:70px !important; width:auto; display:block; margin-inline:auto; }
/* Dimplex & Cadet ~20% smaller inside the GDA family row */
.gda-family .card img[src*="dimplex"]{ max-height:48px !important; max-width:60% !important; width:auto; height:auto; object-fit:contain; }
.gda-family .card img[src*="cadet"]{ max-height:48px !important; max-width:60% !important; width:auto; height:auto; object-fit:contain; }



/* Robust selectors for GDA + children — match actual markup */
.gda-family img[src*="gda.png"]{ max-height:70px !important; width:auto; display:block; margin-inline:auto; }
/* Dimplex & Cadet ~20% smaller within GDA row */
.gda-family .card img[src*="dimplex"]{ max-height:48px !important; max-width:60% !important; width:auto; height:auto; object-fit:contain; }
.gda-family .card img[src*="cadet"]{ max-height:48px !important; max-width:60% !important; width:auto; height:auto; object-fit:contain; }



/* === Fine-tuning sizes (GDA + sub-brands) === */
.gda-family img[src*="gda.png"]{ max-height:62px !important; width:auto; display:block; margin-inline:auto; }

.gda-family .card img[src*="dimplex"]{
  max-height:44px !important;
  max-width:58% !important;
  width:auto; height:auto; object-fit:contain;
}

.gda-family .card img[src*="cadet"]{
  max-height:46px !important;
  max-width:58% !important;
  width:auto; height:auto; object-fit:contain;
}



/* === GDA parent + sub-brand fine-tuning (put at END of style.css) === */

/* GDA parent header logo (≈30% smaller) */
.chemelex-family-footer img[src*="gda"] {
  max-height: 62px !important;
  width: auto;
  display: block;
  margin-inline: auto;
}

/* GDA row: target the three cards by position so filenames/casing don't matter */
.logo-row.three .card:nth-child(1) img {           /* Convectair */
  max-height: 46px !important;
  max-width: 58% !important;
  width: auto; height: auto; object-fit: contain;
}
.logo-row.three .card:nth-child(2) img {           /* Dimplex */
  max-height: 44px !important;
  max-width: 58% !important;
  width: auto; height: auto; object-fit: contain;
}
.logo-row.three .card:nth-child(3) img {           /* Cadet */
  max-height: 46px !important;
  max-width: 58% !important;
  width: auto; height: auto; object-fit: contain;
}



/* --- Anchor offset for sticky header ----
   Ensures in-page anchors from Manufacturers -> Solutions align correctly.
   Adjusts scroll position so card headings are not hidden or overscrolled. */
:root { --header-offset: 76px; }           /* base header height */
@media (min-width: 900px){ :root { --header-offset: 88px; } }

/* Apply to all anchorable blocks */
article[id], section[id], h1[id], h2[id] {
  scroll-margin-top: calc(var(--header-offset) + 10px);
}



/* Solution card hero images */
.card .card-hero{
  display:block;
  width:100%;
  height:auto;
  border-radius:0.75rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  margin-bottom:.5rem;
}


/* Brand strip under solution cards */
.brand-strip{
  display:flex;
  gap:.75rem;
  align-items:center;
  flex-wrap:wrap;
  margin-top:.5rem;
  opacity:.95;
}
.brand-strip img{
  max-height:22px;
  width:auto;
  filter:none;
  transition:transform .18s ease;
}
.card:hover .brand-strip img{ transform:scale(1.06); }

/* Tiny hover zoom for any inline card images */
.card img.hover-zoom{
  transition:transform .2s ease;
}
.card:hover img.hover-zoom{
  transform:scale(1.035);
}



/* --- Brand strip sizing normalization --- */
.brand-strip{
  display:flex;
  gap:.65rem;
  align-items:center;
  flex-wrap:wrap;
  margin-top:.5rem;
}
.brand-strip img{
  height:20px;                 /* normalize visible height */
  max-height:20px;
  width:auto;
  object-fit:contain;
  vertical-align:middle;
  transition:transform .18s ease, filter .18s ease, opacity .18s ease;
}

/* Subtle right-size for visually heavy/tall marks */
.brand-strip img[src*="convectair"]{ height:18px; max-height:18px; }
.brand-strip img[src*="dimplex"]{ height:18px; max-height:18px; }
.brand-strip img[src*="cadet"]{ height:18px; max-height:18px; }
.brand-strip img[src*="powerside"]{ height:18px; max-height:18px; }

/* Hover micro-zoom remains */
.card:hover .brand-strip img{ transform:scale(1.05); }



/* --- Brand strip sizing update (default 30px; specific marks 18px) --- */
.brand-strip img{
  height:30px !important;
  max-height:30px !important;
  width:auto;
  object-fit:contain;
  vertical-align:middle;
}
.brand-strip img[src*="convectair"],
.brand-strip img[src*="dimplex"],
.brand-strip img[src*="cadet"],
.brand-strip img[src*="powerside"]{
  height:18px !important;
  max-height:18px !important;
}



/* lightweight alert styles for contact form status */
.alert{padding:.75rem 1rem;border-radius:.5rem;font-size:.95rem}
.alert.success{background:#eaf7ea;border:1px solid #c2e5c2;color:#215b21}
.alert.error{background:#fdeaea;border:1px solid #f0c2c2;color:#7a1e1e}

/* ===== Row-3 card outline consistency (Powerside, Valid, Band‑N‑Go, Wiha) =====
   Targets cards by their logo filenames only; logo sizes remain unchanged.
   Works on both Home (.logo-row) and Manufacturers (.logos-grid).
   Requires modern browsers that support :has() (Chrome/Edge/Safari/Firefox current). */
:root { --row3-card-h: 140px; }          /* adjust if you want taller/shorter cards */
@media (max-width: 900px){ :root { --row3-card-h: 110px; } }

/* Home page row */
.logo-row .card:has(img[src*="powerside"]),
.logo-row .card:has(img[src*="valid"]),
.logo-row .card:has(img[src*="bandngo"]),
.logo-row .card:has(img[src*="wiha"]),
/* Manufacturers page row */
.logos-grid .card:has(img[src*="powerside"]),
.logos-grid .card:has(img[src*="valid"]),
.logos-grid .card:has(img[src*="bandngo"]),
.logos-grid .card:has(img[src*="wiha"]) {
  height: var(--row3-card-h);
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* keep the same white outline/shape everywhere */
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 1rem;
  box-shadow: var(--shadow);
  padding: 1rem;
}

/* Ensure image remains centered and sizing stays as-is */
.logo-row .card:has(img[src*="powerside"]) img,
.logo-row .card:has(img[src*="valid"]) img,
.logo-row .card:has(img[src*="bandngo"]) img,
.logo-row .card:has(img[src*="wiha"]) img,
.logos-grid .card:has(img[src*="powerside"]) img,
.logos-grid .card:has(img[src*="valid"]) img,
.logos-grid .card:has(img[src*="bandngo"]) img,
.logos-grid .card:has(img[src*="wiha"]) img {
  display: block;
  margin-inline: auto;
}
* ========= Manufacturer card hover motion ========= */
/* Applies to Home (.logo-row) and Manufacturers (.logos-grid) cards */
/* No layout shift: transforms only. Honors reduced-motion. */

.logo-row .card,
.logos-grid .card {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  will-change: transform;
}

.logo-row .card:hover,
.logos-grid .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  border-color: #d7dbe6;
}

/* Small press/active feel */
.logo-row .card:active,
.logos-grid .card:active {
  transform: translateY(-1px);
}

/* Keyboard focus parity */
.logo-row .card:focus-visible,
.logos-grid .card:focus-visible {
  outline: 2px solid #4c6fff;
  outline-offset: 2px;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* Gently scale only the direct <img> inside the card (keeps logos crisp) */
.logo-row .card > img,
.logos-grid .card > img {
  transition: transform .18s ease;
}
.logo-row .card:hover > img,
.logos-grid .card:hover > img {
  transform: scale(1.05);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .logo-row .card,
  .logos-grid .card,
  .logo-row .card > img,
  .logos-grid .card > img {
    transition: none !important;
    transform: none !important;
  }
}

/* --- TESRA divisions banner --- */
.division-banner { display:flex; align-items:center; justify-content:center; gap:1rem; margin: 1rem 0 0.5rem; }
.division-banner img { max-width: 244px; height:auto; width:100%; }
/* Card grid inherits existing .logos-grid styles */

.container .division-banner{justify-content:flex-start !important;margin:1rem 0 .5rem !important}

/* Industrial microsite: bigger header logo */
.microsite-header .brand-mark {
  max-height: 80px;   /* try 80–100px to taste */
}