/* ============================================================
   Heaters & Fans Supplier - visual system v3 (2026-10-28)
   Layout-first revision: works with or without product photos.
   Palette: white body, light blue-gray banner, neutral light-gray
   placeholders, charcoal dark bands; green as small brand
   accents only. Type: Inter (self-hosted).
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #FFFFFF;          /* main white - page background */
  --ink: #202420;         /* charcoal - text & primary buttons */
  --dark: #202420;        /* dark band (wholesale intro, CTA, footer) */
  --green: #2F5E4A;       /* brand accent - small uses only */
  --green-dark: #24503F;
  --green-light: #9FD1B8; /* green accent on dark surfaces */
  --banner: #E9EFF4;      /* light blue-gray - hero banner */
  --banner-line: #D6E0E8;
  --banner-media: #F4F8FB;
  --band-gray: #F4F6F8;   /* light gray band (new arrivals, FAQ) */
  --slot: #EFF1F4;        /* neutral light-gray photo placeholder */
  --slot-line: #E2E6EA;
  --glyph: #B3BCC3;       /* image symbol color */
  --white: #FFFFFF;
  --line: #E6E9EC;        /* hairline */
  --line-strong: #D3D8DD;
  --muted: #5A6167;       /* secondary text */
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 10px 30px rgba(32, 36, 32, .07);
  --container: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.15; color: var(--ink); margin: 0 0 .45em; letter-spacing: -0.02em; font-weight: 650; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.prose { max-width: 66ch; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 13px 26px; border-radius: var(--radius);
  font-weight: 600; font-size: .95rem; letter-spacing: .01em; border: 1.5px solid transparent;
  cursor: pointer; text-align: center; transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }
.btn-accent { background: var(--green); color: #F3F6F0; }
.btn-accent:hover { background: var(--green-dark); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #EDEFF1; }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-sm { padding: 8px 16px; font-size: .85rem; }

/* ---------- header ---------- */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 11px; }
.logo-mark {
  width: 38px; height: 38px; border-radius: 9px; background: var(--green); color: #F3F6F0;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; letter-spacing: .02em;
}
.logo-text { font-weight: 700; color: var(--ink); font-size: 1.02rem; line-height: 1.15; letter-spacing: -0.01em; }
.logo-text em { font-style: normal; color: var(--green); display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.logo-text.light, .logo-text.light em { color: #EDF0E8; }
/* brand logo image (Aervuno Supply) */
.logo-img { display: block; width: clamp(180px, 15.5vw, 205px); height: auto; object-fit: contain; }
.footer-logo .logo-chip { display: inline-block; background: #fff; padding: 12px 16px; border-radius: 10px; }
.footer-logo .logo-img { width: 190px; }
.main-nav { display: flex; align-items: center; }
.main-nav ul { list-style: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
.main-nav a { display: block; padding: 10px 12px; font-weight: 500; font-size: .95rem; color: var(--ink); }
.main-nav a:hover { color: var(--green); text-decoration: none; }
.main-nav a.active { color: var(--green); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; text-decoration-color: var(--green); }
.nav-cta { margin-left: 12px; flex: none; align-self: center; white-space: nowrap; }
.main-nav a.nav-cta, .main-nav a.nav-cta:hover { color: #fff; text-decoration: none; }
.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle .bar { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; }
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: 100%; left: 0; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); min-width: 270px; padding: 8px;
  display: none; z-index: 60;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: block; }
.dropdown a { padding: 10px 14px; font-size: .92rem; white-space: nowrap; color: var(--ink); }
.dropdown a:hover { color: var(--green); text-decoration: none; background: var(--band-gray); border-radius: 7px; }

/* ---------- hero banner (full-width range shot, copy over the empty left area) ---------- */
/* The artwork is 3:1 with the products on the right half; the section keeps that
   ratio so the shot is never cropped sideways and the copy always sits on the
   empty left field. Very wide screens cap the height and crop vertically only. */
.hero {
  position: relative; width: 100%; background: var(--banner); overflow: hidden;
  min-height: 400px; aspect-ratio: 3 / 1;
  display: flex; align-items: center;
}
/* very wide screens: cap the 3:1 height so the band never dominates the page.
   object-position keeps the right-side products in view while the empty left crops. */
@media (min-width: 1921px) {
  .hero { aspect-ratio: auto; height: 640px; }
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 45%; display: block; }
/* keeps the headline readable on very wide screens without touching the products,
   and dissolves the floor of the shot into the white section below */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 84%, rgba(255,255,255,.55) 96%, rgba(255,255,255,.95) 100%),
    linear-gradient(94deg, rgba(236,243,250,.92) 0%, rgba(236,243,250,.74) 24%, rgba(236,243,250,.26) 42%, rgba(236,243,250,0) 54%);
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 34em) 1fr; gap: 64px; align-items: center; width: 100%; }
.hero-eyebrow { font-size: .8rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin-bottom: 18px; }
.hero h1 { font-size: clamp(2.6rem, 3.1vw, 3.1rem); line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; margin-bottom: 20px; }
.hero .subtitle { font-size: 1.06rem; color: var(--muted); max-width: 30em; line-height: 1.6; }
.hero-ctas { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

/* ---------- neutral image slots (unified placeholders) ---------- */
.img-glyph { width: 44px; height: 44px; color: var(--glyph); }
.img-slot {
  aspect-ratio: 1; border-radius: var(--radius-lg); background: var(--slot);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- sections & bands ---------- */
.section { padding: 76px 0; }
.section.alt { background: transparent; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section.band-gray { background: var(--band-gray); }
.section.band-dark { background: var(--dark); }
.band-dark h2 { color: #F3F6F0; }
.band-dark .eyebrow { color: var(--green-light); }
.band-dark p { color: #B9C3BC; }
.band-dark a { color: var(--green-light); }
.section-head { max-width: 52em; margin-bottom: 44px; }
.section-head p { color: var(--muted); font-size: 1.02rem; max-width: 44em; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center p { margin-left: auto; margin-right: auto; }
.eyebrow { display: block; font-size: .78rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
.link-more { font-weight: 600; }

/* ---------- range (categories) ---------- */
.range-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 26px; }
.range-card { display: flex; flex-direction: column; color: var(--ink); }
.range-card:hover { text-decoration: none; }
.range-media {
  aspect-ratio: 4 / 3.2; border-radius: var(--radius-lg); background: var(--slot);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.range-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; background: #fff; }
.range-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 4px 0; }
.range-foot h3 { font-size: 1.18rem; margin: 0; }
.range-card:hover .range-foot h3 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--green); }
.range-arrow { font-size: 1.3rem; color: var(--green); transition: transform .15s; flex: none; }
.range-card:hover .range-arrow { transform: translateX(5px); }

/* ---------- product cards & placeholder cards ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 26px; }
.product-card { display: flex; flex-direction: column; }
.card-media { position: relative; }
.card-media-link { display: block; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--slot); }
.card-media img { width: 100%; height: 100%; object-fit: contain; background: #fff; transition: transform .25s ease; }
.product-card:hover .card-media img { transform: scale(1.03); }
.card-price { font-size: .95rem; font-weight: 650; color: var(--ink); margin: 0 0 10px; letter-spacing: -0.01em; }
.card-price .card-unit { font-weight: 500; color: var(--muted); font-size: .86rem; }
.quote-add {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: rgba(255, 255, 255, .92); color: var(--ink);
  font-size: 1.15rem; font-weight: 600; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.quote-add:hover { border-color: var(--green); color: var(--green); }
.card-body { padding: 14px 2px 0; }
.card-cat { font-size: .74rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin: 0 0 4px; }
.card-name { font-size: 1.04rem; margin: 0 0 8px; font-weight: 600; min-height: 2.7em; }
.card-name a { color: var(--ink); }
.card-name a:hover { color: var(--green); text-decoration: none; }
.card-view { font-size: .9rem; font-weight: 600; color: var(--ink); }
.card-view:hover { color: var(--green); text-decoration: none; }
.card-view::after { content: " \2192"; }
.placeholder-card .card-name { font-weight: 500; }
.placeholder-card .card-pending { color: var(--muted); }
.placeholder-card:hover .card-pending { color: var(--ink); }

/* ---------- pending (data not yet supplied) ---------- */
.pending-note {
  max-width: 52em; background: var(--band-gray); border-radius: var(--radius);
  padding: 16px 20px; color: var(--muted); margin-bottom: 30px;
}
.pending-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.pending-grid .img-slot { aspect-ratio: 4 / 3.2; }

/* ---------- view more ---------- */
.center-more { text-align: center; margin-top: 40px; }

/* ---------- editorial split (wholesale intro etc.) ---------- */
.split-2 { display: grid; grid-template-columns: 2fr 4fr; gap: 48px; align-items: start; }
.split-2 .split-title h2 { margin-bottom: 0; }

/* ---------- buying guides (editorial) ---------- */
.guide-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.guide-card { border-top: 2px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; }
.guide-card .g-date { font-size: .76rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin: 0 0 10px; }
.guide-card h3 { font-size: 1.22rem; margin: 0 0 10px; font-weight: 650; }
.guide-card h3 a { color: var(--ink); }
.guide-card h3 a:hover { color: var(--green); text-decoration: none; }
.guide-card p { color: var(--muted); font-size: .95rem; margin: 0 0 16px; }
.guide-card .link-more { margin-top: auto; }

/* ---------- FAQ (borderless dividers) ---------- */
.faq-block .faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-block .faq-item:first-child { border-top: 1px solid var(--line-strong); }
.faq-item summary {
  cursor: pointer; padding: 20px 34px 20px 0; font-weight: 600; font-size: 1.05rem; list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.35rem; color: var(--green); flex: none; font-weight: 500; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-a { padding: 0 34px 22px 0; color: var(--muted); max-width: 60ch; }
.faq-a p:last-child { margin-bottom: 0; }
/* product-page FAQ: left aligned with the section heading, collapsed by default */
.faq-lede { color: var(--muted); max-width: 52em; margin: -6px 0 22px; }
.pd-faq { max-width: 860px; }
.pd-faq .faq-block { margin: 0; }

/* ---------- CTA band (inner pages, dark) ---------- */
.cta-band { background: var(--dark); color: #D9DEDA; padding: 52px 0; }
.cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.cta-band h2 { color: #F3F6F0; margin-bottom: .3em; }
.cta-band p { margin: 0; color: #AEB8B0; max-width: 42em; }
.cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- breadcrumb & page head ---------- */
.breadcrumb { padding: 20px 0 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; font-size: .82rem; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--green); }
.page-head { padding: 22px 0 40px; }
.page-head h1 { margin-bottom: .35em; }
.page-head .lede { color: var(--muted); font-size: 1.12rem; max-width: 46em; }

/* ---------- filters ---------- */
.filter-bar { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; padding: 14px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.filter-bar label { font-size: .8rem; font-weight: 650; color: var(--muted); display: flex; align-items: center; gap: 8px; letter-spacing: .04em; }
.filter-bar select { padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: .9rem; background: var(--white); color: var(--ink); font-family: inherit; }
.filter-bar select:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.filter-reset { margin-left: auto; font-size: .85rem; }
.results-count { font-size: .88rem; color: var(--muted); margin: 0 0 22px; }

/* ---------- product detail ---------- */
.pd-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 26px 0 14px; }
.pd-wrap > * { min-width: 0; }
.pd-gallery { min-width: 0; }
.pd-gallery .pd-main-img { border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.pd-main-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; cursor: zoom-in; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pd-thumbs button { border: 1.5px solid var(--line); background: #fff; border-radius: 9px; padding: 3px; cursor: pointer; width: 72px; }
.pd-thumbs button img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 6px; display: block; }
.pd-thumbs button.active { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.pd-info .pd-model { color: var(--muted); font-size: .95rem; margin-bottom: 4px; }
.pd-info .pd-model strong { color: var(--ink); letter-spacing: .04em; }
.pd-info h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.demo-note { background: var(--band-gray); border-left: 3px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0; color: var(--green-dark); padding: 12px 16px; font-size: .88rem; margin-bottom: 18px; }
.demo-note strong { display: block; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }
.pd-summary { color: var(--muted); font-size: 1.03rem; max-width: 40em; }
.pd-price { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0 14px; margin: 22px 0 4px; }
.pd-price-value { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
.pd-price-unit { font-size: .88rem; color: var(--muted); margin: 0; }
.pd-price-source { font-size: .84rem; color: var(--muted); margin: 8px 0 0; max-width: 34em; }
.pd-subhead { font-size: .78rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin: 26px 0 12px; }
.pd-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 26px; }
.selling-points { list-style: none; padding: 0; margin: 0 0 26px; max-width: 40em; }
.selling-points li { padding-left: 26px; position: relative; margin-bottom: 9px; }
.selling-points li::before { content: "\2014"; position: absolute; left: 0; color: var(--green); font-weight: 600; }
.chips { list-style: none; display: flex; flex-wrap: wrap; padding: 0; margin: 0; }
.chips li { font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 2px 0; }
.chips li + li::before { content: "\00B7"; margin: 0 10px; color: var(--line-strong); }
.pd-section { border-top: 1px solid var(--line); padding: 36px 0; }
.pd-section h2 { font-size: 1.5rem; }

/* ---------- spec table ---------- */
.spec-table { width: 100%; border-collapse: collapse; font-size: .95rem; max-width: 720px; }
.spec-table caption { text-align: left; font-weight: 650; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green); padding: 14px 16px 6px; }
.spec-table th, .spec-table td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { width: 40%; color: var(--muted); font-weight: 500; }
.spec-note { background: var(--band-gray); border-radius: var(--radius); padding: 14px 18px; color: var(--muted); font-size: .92rem; max-width: 720px; }
.spec-table + .spec-note { margin-top: 16px; }
.price-table { margin-bottom: 22px; }
.price-table td.price-cell { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-table td.price-cell.muted { font-weight: 500; color: var(--muted); white-space: normal; }
.price-table th:last-child { width: 30%; }

/* ---------- related products ---------- */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; }

/* ---------- article pages ---------- */
.article-wrap { max-width: 780px; margin: 0 auto; }
.article-meta { color: var(--muted); font-size: .88rem; margin-bottom: 26px; }
.article-body { font-size: 1.04rem; }
.article-body h2 { margin-top: 1.8em; font-size: 1.55rem; }
.article-body table { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 1.2em 0; }
.article-body th, .article-body td { border: 1px solid var(--line-strong); padding: 11px 14px; text-align: left; vertical-align: top; }
.article-body th { background: var(--band-gray); color: var(--ink); font-weight: 650; }
.article-body .checklist { list-style: none; padding: 0; }
.article-body .checklist li { padding-left: 26px; position: relative; margin-bottom: 9px; }
.article-body .checklist li::before { content: "\2014"; position: absolute; left: 0; color: var(--green); font-weight: 600; }

/* ---------- article author module ---------- */
.author-box {
  margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line-strong);
  font-size: .96rem; color: var(--muted);
}
.author-name { margin: 0 0 6px; font-size: .92rem; font-weight: 650; color: var(--ink); }
.author-name a { color: var(--green); font-weight: 650; }
.author-bio { margin: 0; line-height: 1.6; }

/* ---------- homepage: About Us ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.about-media { aspect-ratio: 5 / 4; border-radius: var(--radius-lg); overflow: hidden; }
.about-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-text .eyebrow { margin-bottom: 12px; }
.about-text h2 { margin-top: 0; }
.about-text p { color: var(--muted); font-size: 1.02rem; line-height: 1.7; max-width: 46em; }
.about-cta { margin-top: 26px; }

/* ---------- homepage: Why Choose Aervuno ---------- */
.why-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 30px; margin-top: 8px; }
.why-item { flex: 1 1 300px; max-width: 330px; text-align: center; }
.why-icon { width: 38px; height: 38px; color: var(--green); display: block; margin: 0 auto 16px; }
.why-item h3 { font-size: 1.1rem; margin: 0 0 8px; }
.why-item p { font-size: .94rem; color: var(--muted); line-height: 1.6; margin: 0; }
.why-cta { text-align: center; margin-top: 44px; }

/* ---------- About page (rebuilt) ---------- */
.about-hero { padding: 6px 0 70px; }
.about-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.about-hero-text .eyebrow { margin-bottom: 14px; }
.about-hero-text h1 { margin: 0 0 18px; font-size: clamp(2.1rem, 3.4vw, 3rem); }
.about-hero-text p { color: var(--muted); font-size: 1.06rem; line-height: 1.7; max-width: 40em; margin: 0 0 26px; }
.about-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.about-hero-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5 / 4; background: #fff; border: 1px solid var(--line); }
.about-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.about-intro-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.about-intro-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--line); }
.about-intro-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-intro-text p { color: var(--muted); font-size: 1.02rem; line-height: 1.7; max-width: 44em; }

.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 28px; }
.pillar-item { border-top: 2px solid var(--line-strong); padding-top: 16px; }
.pillar-item h3 { font-size: 1.05rem; }
.pillar-item p { font-size: .95rem; color: var(--muted); margin: 0; }

.conv { background: var(--dark); color: #D9DEDA; padding: 66px 0; }
.conv .section-head { margin-bottom: 0; max-width: 54em; }
.conv .section-head p { margin-top: 14px; }
.conv h2 { color: #F3F6F0; }
.conv p { color: #AEB8B0; max-width: 44em; }
.conv-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.conv-contact { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .98rem; color: #C7CFC8; }
.conv-contact a { color: #D9DEDA; }
.conv-contact a:hover { color: #fff; text-decoration: none; }
.conv-contact strong { color: #F3F6F0; font-weight: 600; }
.btn-ghost { border-color: rgba(255, 255, 255, .55); color: #F3F6F0; background: transparent; }
.btn-ghost:hover { background: #F3F6F0; color: var(--ink); text-decoration: none; }

/* ---------- steps (no boxes) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; counter-reset: step; }
.step { border-top: 2px solid var(--line-strong); padding-top: 18px; counter-increment: step; }
.step::before { content: "0" counter(step); display: block; font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--green); margin-bottom: 10px; }
.step h3 { font-size: 1.06rem; }
.step p { font-size: .92rem; color: var(--muted); margin: 0; }

/* ---------- audience (wholesale page) ---------- */
.audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 40px; }
.audience { border-top: 2px solid var(--line-strong); padding-top: 16px; }
.audience h3 { font-size: 1.05rem; }
.audience p { font-size: .94rem; color: var(--muted); margin: 0; }

/* ---------- quote list page ---------- */
.quote-list-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.quote-list-table th, .quote-list-table td { border-bottom: 1px solid var(--line); padding: 14px 18px; text-align: left; font-size: .93rem; vertical-align: middle; }
.quote-list-table th { background: var(--band-gray); color: var(--green); font-weight: 650; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.quote-list-table input[type="number"], .quote-list-table input[type="text"] { width: 110px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font-family: inherit; }
.quote-empty { border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); padding: 34px; text-align: center; color: var(--muted); }
.remove-item { color: #A0522D; background: none; border: 0; cursor: pointer; font-size: .85rem; text-decoration: underline; }

/* ---------- forms ---------- */
.form-split { display: grid; grid-template-columns: 2fr 3fr; gap: 56px; align-items: start; }
.form-intro h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 16px; }
.form-intro p { color: var(--muted); font-size: 1.04rem; max-width: 34em; }
.form-contact { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 20px; font-size: .95rem; color: var(--muted); }
.form-contact strong { color: var(--ink); font-weight: 600; }
.form-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: .88rem; letter-spacing: .01em; }
.form-field .req { color: var(--green); }
.form-field input, .form-field textarea, .form-field select {
  padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 9px; font-size: .96rem;
  font-family: inherit; background: var(--white); color: var(--ink); width: 100%;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.field-error { color: #A0522D; font-size: .8rem; display: none; }
.form-field.invalid input, .form-field.invalid textarea, .form-field.invalid select { border-color: #A0522D; }
.form-field.invalid .field-error { display: block; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-note { font-size: .82rem; color: var(--muted); }
.form-status { border-radius: var(--radius); padding: 16px 20px; margin-top: 20px; display: none; font-size: .95rem; }
.form-status.sending { display: block; background: var(--band-gray); color: var(--ink); }
.form-status.success { display: block; background: #E6F0E4; border: 1px solid #BFD8BD; color: #2C5B33; }
.form-status.unsent { display: block; background: #F4EAD8; border: 1px solid #DFCB9E; color: #7A5A1E; }
.form-status.error { display: block; background: #F3E4E0; border: 1px solid #DBB4AA; color: #8C3B2E; }

/* ---------- contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 56px; align-items: start; }
.info-card { border-top: 2px solid var(--line-strong); padding-top: 16px; margin-bottom: 30px; }
.info-card h3 { font-size: 1rem; letter-spacing: .02em; }
.info-card p { color: var(--muted); font-size: .95rem; margin: 0 0 6px; }
.info-card p:last-child { margin-bottom: 0; }

/* ---------- FAQ page ---------- */
.faq-page-wrap { max-width: 860px; margin: 0 auto; }

/* ---------- 404 ---------- */
.err-wrap { text-align: center; padding: 100px 0; }
.err-code { font-size: 5rem; font-weight: 750; letter-spacing: -0.04em; color: var(--green); }

/* ---------- footer (dark charcoal; green only small accents) ---------- */
.site-footer { background: #1B201B; color: #B4BEB6; margin-top: 90px; }
.footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 36px; padding: 56px 28px 32px; }
.footer-col h4 { color: #E9EDE6; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; font-weight: 650; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col a { color: #AEB8B0; font-size: .92rem; display: inline-block; padding: 4px 0; }
.footer-col a:hover { color: var(--green-light); }
.footer-brand p { font-size: .9rem; color: #96A19A; max-width: 34em; }
.footer-contact { font-size: .9rem; color: #B4BEB6; line-height: 1.8; margin: 18px 0 0; }
.footer-contact strong { color: #E9EDE6; font-weight: 600; }
.footer-contact a { color: #B4BEB6; }
.footer-contact a:hover { color: var(--green-light); }
.footer-logo .logo-text { color: #E9EDE6; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 18px 0; font-size: .8rem; color: #7E8A82; }

/* ---------- anchor offset under sticky header ---------- */
#inquiry { scroll-margin-top: 92px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .range-grid { grid-template-columns: repeat(2, 1fr); }
  .guide-list { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .pd-wrap, .contact-grid, .form-split, .split-2 { grid-template-columns: 1fr; gap: 36px; }
  .split-2 { gap: 8px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* below this width the 3:1 shot would be too small to read behind the copy, so
     the two stack instead of sharing one background */
  .hero { display: flex; flex-direction: column; padding: 44px 0 0; aspect-ratio: auto; max-height: none; min-height: 0; height: auto; }
  .hero-grid { order: 1; grid-template-columns: 1fr; gap: 0; width: 100%; }
  .hero-bg { position: relative; inset: auto; order: 2; margin-top: 36px; }
  .hero-bg img { height: auto; aspect-ratio: 2.6 / 1; object-position: 100% 50%; }
  .hero-bg::after { display: none; }
  .about-hero-grid, .about-intro-grid { grid-template-columns: 1fr; gap: 34px; }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Compact nav: the wider brand logo no longer leaves room for the full menu
   below ~1180px, so collapse to the hamburger there to keep the header on one
   row (logo + toggle) instead of wrapping the menu. */
@media (max-width: 1180px) {
  .nav-toggle { display: block; }
  .main-nav { display: none; width: 100%; }
  .main-nav.open { display: flex; flex-direction: column; align-items: stretch; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav a { padding: 13px 4px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .main-nav a.active { text-decoration: none; border-bottom: 2px solid var(--green); }
  .dropdown { position: static; display: none; border: 0; box-shadow: none; padding-left: 18px; background: transparent; }
  .has-dropdown.open .dropdown { display: block; }
  .dropdown a { border-bottom: 1px solid var(--line); }
  .nav-cta { margin: 16px 0 8px; display: block; text-align: center; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .container { padding: 0 20px; }
  .section { padding: 56px 0; }
  .hero { padding: 34px 0 0; }
  .hero h1 { font-size: clamp(2rem, 8.5vw, 2.25rem); }
  .hero-bg { margin-top: 28px; }
  .hero-bg img { aspect-ratio: 2 / 1; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
  .range-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
  .pending-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .guide-list, .related-grid, .steps, .audience-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-panel { padding: 24px 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .logo-img { width: 152px; }
  .footer-logo .logo-img { width: 168px; }
  .nav-toggle { display: block; }
  .main-nav { display: none; width: 100%; }
  .main-nav.open { display: flex; flex-direction: column; align-items: stretch; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav a { padding: 13px 4px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .main-nav a.active { text-decoration: none; border-bottom: 2px solid var(--green); }
  .dropdown { position: static; display: none; border: 0; box-shadow: none; padding-left: 18px; background: transparent; }
  .has-dropdown.open .dropdown { display: block; }
  .dropdown a { border-bottom: 1px solid var(--line); }
  .nav-cta { margin: 16px 0 8px; display: block; text-align: center; }
  .spec-table th, .spec-table td { display: block; width: 100%; border-bottom: 0; }
  .spec-table th { padding-bottom: 2px; }
  .spec-table td { border-bottom: 1px solid var(--line); padding-top: 2px; }
  .quote-list-table { display: block; overflow-x: auto; }
  .pd-thumbs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: thin; }
  .pd-thumbs button { width: 64px; flex: 0 0 auto; }
  .about-grid { grid-template-columns: 1fr; gap: 26px; }
  .about-media { aspect-ratio: 5 / 4; }
  .about-text p { max-width: 100%; }
  .why-item { flex-basis: 100%; max-width: 380px; }
  .about-hero { padding: 4px 0 52px; }
  .about-hero-grid, .about-intro-grid { gap: 26px; }
  .pillar-grid { grid-template-columns: 1fr; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .site-footer, .cta-band { display: none; }
}