/* ============================================================
   AMG Cement — shared stylesheet
   Design system ported from the AMG Energy Services site.
   Brand: AMG royal blue #12317a · accent green #90c31f
   Component reference: see COMPONENTS.md (build notes).
   ============================================================ */

/* ---------- 1. Tokens ---------- */
/* Metric-matched stand-in for Inter while the web font loads (local Arial scaled to Inter's widths,
   measured per weight on the site's copy), so text wraps the same before and after the swap and the
   home hero does not shift. Where Arial is not installed the stack falls through as before. */
@font-face{font-family:'Inter Fallback';font-style:normal;font-weight:100 500;src:local('Arial'),local('ArialMT');size-adjust:106%;ascent-override:91.4%;descent-override:22.8%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';font-style:normal;font-weight:600;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:101%;ascent-override:95.9%;descent-override:23.9%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';font-style:normal;font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:101.9%;ascent-override:95.1%;descent-override:23.7%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';font-style:normal;font-weight:800 900;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:103%;ascent-override:94.1%;descent-override:23.4%;line-gap-override:0%}
:root{
  --navy:#0a1b3d;      --navy-2:#0e2550;   --navy-3:#102b63;
  --brand:#12317a;     --brand-2:#1c4aa0;  --brand-ink:#0c2456;
  --green:#90c31f;     --green-2:#79a814;  --green-ink:#3f5a0a;
  --ink:#15212e;       --muted:#5d6b7e;    --muted-2:#8493a5;
  --soft:#f4f7fb;      --soft-2:#eaf0f8;   --line:#e4eaf2;
  --white:#ffffff;
  --on-dark:#d7e1f0;   --on-dark-2:#bccadf; --on-dark-3:#aebfd6;
  --danger:#c0392b;    --danger-soft:#fdeeee;
  --warn:#b7791f;      --warn-soft:#fff8e6; --warn-line:#f3dca0; --warn-ink:#7a5b12;
  --field-line:#7f8ea1; --field-placeholder:#687586; /* ≥3:1 boundary · ≥4.5:1 placeholder (WCAG) */
  --shadow-sm:0 1px 3px rgba(13,32,71,.08), 0 1px 2px rgba(13,32,71,.06);
  --shadow:0 10px 30px rgba(13,32,71,.10);
  --shadow-lg:0 24px 60px rgba(13,32,71,.18);
  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  --wrap:1200px;
  --header-h:78px;
  --font:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
/* scroll-padding keeps anchor targets AND keyboard-focused elements clear of the sticky header */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,picture,video,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,h5{line-height:1.15;color:var(--navy);font-weight:800;letter-spacing:-.02em;text-wrap:balance}
p{color:var(--ink)}
/* tidier line breaks everywhere: balanced headings (above), no one-word last lines in copy */
p,li,dd,figcaption{text-wrap:pretty}
.download-link span,.stat-lbl{text-wrap:balance}
ul,ol{list-style-position:outside}
strong,b{font-weight:700}
svg{flex-shrink:0}
svg[stroke="currentColor"]{stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
main:focus{outline:none}
::selection{background:rgba(144,195,31,.35);color:var(--navy)}

/* focus — brand blue on light surfaces, green on dark */
:focus-visible{outline:3px solid var(--brand-2);outline-offset:3px}
.topbar :focus-visible,.hero :focus-visible,.page-hero :focus-visible,.bg-navy :focus-visible,
.cta-band :focus-visible,.site-footer :focus-visible,.outcome-strip :focus-visible,.lightbox :focus-visible,
.skip-link:focus-visible{outline-color:var(--green)}

/* skip link */
.skip-link{position:absolute;left:16px;top:-80px;z-index:300;background:var(--navy);color:#fff;font-weight:700;font-size:.95rem;padding:.75em 1.2em;border-radius:10px;box-shadow:var(--shadow-lg);transition:top .2s ease}
.skip-link:focus{top:12px}

/* ---------- 3. Layout & typography helpers ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:880px}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-2);line-height:1.5}
.eyebrow.on-dark,.bg-navy .eyebrow{color:var(--green)}
.eyebrow.green{color:var(--green-2)}
.lead{font-size:1.18rem;color:var(--muted)}
.text-muted{color:var(--muted)}
.center,.text-center{text-align:center}
.small{font-size:.88rem}
.nowrap{white-space:nowrap}
.divider-green{width:54px;height:4px;background:var(--green);border-radius:3px;margin-bottom:18px}

/* sections */
section,.section{padding:84px 0}
.section-sm{padding:64px 0}
.section-head{max-width:720px;margin-bottom:48px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:.5rem 0 .6rem}
.section-head p{font-size:1.08rem;color:var(--muted)}
.section-head.center .divider-green{margin-left:auto;margin-right:auto}
.section-foot{margin-top:44px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.bg-soft{background:var(--soft)}
.bg-white{background:var(--white)}
.bg-navy{background:var(--navy);color:#fff}
.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff}
.bg-navy p,.bg-navy .section-head p{color:var(--on-dark-2)}
.bg-navy .text-muted{color:var(--on-dark-3)}

/* generic grids */
.grid-2,.grid-3,.grid-4{display:grid;gap:24px}
.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))}

/* spacing utilities */
.mt-0{margin-top:0!important}.mt-1{margin-top:8px!important}.mt-2{margin-top:16px!important}.mt-3{margin-top:24px!important}.mt-4{margin-top:32px!important}.mt-5{margin-top:48px!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:8px!important}.mb-2{margin-bottom:16px!important}.mb-3{margin-bottom:24px!important}.mb-4{margin-bottom:32px!important}
.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}
.obj-top{object-position:center top!important}.obj-bottom{object-position:center bottom!important}
.obj-low{object-position:center 70%!important}.obj-high{object-position:center 30%!important} /* wide (3:1) crops of landscape photos */
.maxw-prose{max-width:68ch}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 4. Buttons & links ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:.96rem;line-height:1.65;padding:.85em 1.5em;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:.2s ease;white-space:nowrap;text-align:center}
.btn svg{width:1.05em;height:1.05em}
.btn-green{background:var(--green);color:#16270a;border-color:var(--green)}
.btn-green:hover{background:var(--green-2);border-color:var(--green-2);transform:translateY(-2px)}
.btn-navy{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-navy:hover{background:var(--brand-2);border-color:var(--brand-2);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:#fff;color:var(--brand);border-color:#fff}
.btn-outline{background:transparent;color:var(--brand);border-color:var(--line)}
.btn-outline:hover{border-color:var(--brand);background:var(--soft)}
.btn-white{background:#fff;color:var(--brand);border-color:#fff}
.btn-white:hover{background:var(--soft-2);border-color:var(--soft-2);transform:translateY(-2px)}
.btn-sm{font-size:.88rem;padding:.6em 1.15em}
.btn-lg{font-size:1.02rem;padding:.95em 1.8em}
.btn-block{width:100%;justify-content:center}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:.95rem;color:var(--brand-2);transition:color .2s}
.link-arrow svg{width:16px;height:16px;transition:transform .2s}
.link-arrow:hover{color:var(--brand)}
.link-arrow:hover svg{transform:translateX(4px)}
.bg-navy .link-arrow,.hero .link-arrow,.page-hero .link-arrow{color:var(--green)}
.bg-navy .link-arrow:hover{color:#fff}
.text-link{color:var(--brand-2);font-weight:600;text-decoration:underline;text-decoration-color:rgba(28,74,160,.3);text-underline-offset:3px;transition:.2s}
.text-link:hover{color:var(--brand);text-decoration-color:currentColor}

/* ---------- 5. Top bar ---------- */
.topbar{background:var(--navy);color:#c9d6ea;font-size:.84rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px}
.topbar a{color:#c9d6ea;transition:.2s}
.topbar a:hover{color:#fff}
.topbar .tb-left{display:flex;gap:22px;align-items:center;min-width:0}
.topbar .tb-item{display:inline-flex;gap:.5em;align-items:center;white-space:nowrap}
.topbar a.tb-item{padding:9px 0} /* taller tap target inside the 40px bar */
.topbar .tb-item svg{width:14px;height:14px;color:var(--green)}
.topbar .tb-right{display:flex;gap:16px;align-items:center}

/* ---------- 6. Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(180%) blur(8px);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.site-header.scrolled,.site-header.menu-open{box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--header-h)}
.nav .logo{display:inline-flex;align-items:center;border-radius:6px}
.nav .logo img{height:46px;width:auto}
.brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-width:0}
.brand-credit{margin:0;padding-left:2px;font-size:.6875rem;line-height:1.2;font-weight:500;letter-spacing:.01em;color:var(--muted);white-space:nowrap}
.brand-credit a{color:var(--brand-2);font-weight:600;text-decoration:none;border-radius:3px}
.brand-credit a:hover{text-decoration:underline;text-underline-offset:2px}
/* <nav class="main-nav"> holds the menu toggle BEFORE the list, so on small screens
   keyboard focus goes toggle → menu links (the toggle is hidden on desktop) */
.main-nav{display:flex;align-items:center}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links>li>a:not(.btn){display:inline-flex;align-items:center;gap:.35em;font-weight:600;font-size:.96rem;color:var(--navy);padding:.6em .9em;border-radius:8px;transition:.18s}
.nav-links>li>a:not(.btn):hover{color:var(--brand-2);background:var(--soft)}
.nav-links>li>a.active,.nav-links>li>a[aria-current="page"]{color:var(--brand-2)}
.nav-links .nav-mobile-cta{display:none}
.nav-cta{display:flex;align-items:center;gap:12px}
.hamburger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:0;border-radius:10px;cursor:pointer;padding:0;margin-right:-8px}
.hamburger span{display:block;width:24px;height:2px;background:var(--navy);border-radius:2px;transition:.25s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 7. Home hero + stats band ---------- */
/* as on ES, the photo continues ~84px below the stats strip (section padding) */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--navy);padding:0 0 84px}
.hero-bg{position:absolute;inset:0;transform:scale(1.03)}
.hero-bg img,.hero-bg picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* ES gradient, held darker through the text column so tank stencils/decals don't compete with the copy */
.hero-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,20,46,.95) 0%,rgba(9,24,58,.9) 44%,rgba(9,24,58,.84) 58%,rgba(10,27,61,.5) 80%,rgba(10,27,61,.28) 100%)}
.hero .wrap{position:relative;z-index:2;max-width:980px}
.hero>.wrap{padding-top:clamp(72px,11vw,168px);padding-bottom:104px}
.hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.6rem);margin:.5rem 0 1rem;max-width:12.45em}   /* = 18ch of Inter 800, in em so the measure does not change when the web font swaps in */
.hero h1 .accent,.page-hero h1 .accent{color:var(--green)}
.hero p.lead,.hero .lead{color:var(--on-dark);max-width:62ch;font-size:1.18rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-strip{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.16);background:rgba(6,16,38,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.hero-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:22px 24px}
.hs-item{display:flex;flex-direction:column}
.hs-item .num{font-size:1.7rem;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.5}
.hs-item .num b{color:var(--green);font-weight:800}
.hs-item .lbl{font-size:.82rem;color:var(--on-dark-3);letter-spacing:.01em}

/* ---------- 8. Inner page hero + breadcrumb ---------- */
.page-hero{position:relative;color:#fff;background:var(--navy);overflow:hidden;padding:0}
.page-hero .pbg{position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center;object-fit:cover;opacity:.28}
.page-hero .povl{position:absolute;inset:0;background:linear-gradient(110deg,rgba(8,20,46,.92),rgba(10,27,61,.6))}
.page-hero .wrap{position:relative;z-index:2;padding-top:156px;padding-bottom:146px}
.page-hero h1{color:#fff;font-size:clamp(1.9rem,3.6vw,2.9rem);margin:.4rem 0 .5rem;max-width:24ch}
.page-hero p{color:#cdd9ec;max-width:64ch;font-size:1.1rem}
.page-hero .hero-cta{margin-top:26px}
.crumbs{font-size:.84rem;color:#9fb2d0;margin-bottom:6px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"/";margin:0 .6em;color:#7890b4}
.crumbs a{display:inline-block;padding:6px 0;margin:-6px 0;color:#c7d4ea;transition:.18s} /* larger hit area, same layout */
.crumbs a:hover{color:var(--green)}
.crumbs [aria-current="page"]{color:#e3ebf7}

/* ---------- 9. Media + text split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}
.split.even{grid-template-columns:1fr 1fr}
.split.top{align-items:start}
.split .copy h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:.4rem 0 1rem}
.split .copy p+p{margin-top:14px}
.split .copy .btn-row,.split .copy>.btn{margin-top:28px}
.split>*{min-width:0} /* grid tracks never grow past the viewport */
.media{position:relative}
.media img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;height:100%;object-fit:cover}
.split .media img{max-height:460px}
/* fixed-ratio frames: the crop stays the same at every width (set object-position per image) */
.media img.ar-4x3{aspect-ratio:4/3;height:auto;max-height:none}
.media img.ar-1x1{aspect-ratio:1/1;height:auto;max-height:none}
.media figcaption{font-size:.85rem;color:var(--muted);margin-top:12px}
.media-tag{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 32px);background:rgba(10,27,61,.84);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;font-size:.8rem;font-weight:600;line-height:1.35;padding:.55em 1em;border-radius:999px}
.media-tag::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(144,195,31,.25)}
.media figcaption+.media-tag,.media .media-tag{pointer-events:none}
.media-stack{display:grid;gap:18px}
.media-stack img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%}

/* small feature items (pill) */
.pill-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.pill{display:flex;gap:12px;align-items:flex-start;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:16px 18px;flex:1 1 220px}
.pill .ic{flex:0 0 40px;width:40px;height:40px;border-radius:10px;background:var(--brand);color:#fff;display:grid;place-items:center}
.pill .ic svg{width:20px;height:20px}
.pill h2,.pill h3,.pill h4{font-size:1rem;margin-bottom:2px;letter-spacing:-.01em}
.pill p{font-size:.9rem;color:var(--muted);line-height:1.5}
.bg-soft .pill{background:#fff}

/* ---------- 10. Icon tiles ---------- */
.icon-tile{flex:0 0 auto;width:54px;height:54px;border-radius:14px;background:var(--soft-2);color:var(--brand-2);display:grid;place-items:center}
.icon-tile svg{width:27px;height:27px}
.icon-tile.sm{width:40px;height:40px;border-radius:10px}
.icon-tile.sm svg{width:20px;height:20px}
.icon-tile.lg{width:64px;height:64px;border-radius:16px}
.icon-tile.lg svg{width:30px;height:30px}
.icon-tile.solid{background:var(--brand);color:#fff}
.icon-tile.grad{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.icon-tile.green{background:rgba(144,195,31,.16);color:var(--green-2)}
.icon-tile.navy{background:var(--navy);color:var(--green)}
.bg-navy .icon-tile:not(.solid):not(.grad):not(.navy){background:rgba(255,255,255,.08);color:var(--green)}

/* ---------- 11. Chips / tags ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:.45em;font-size:.82rem;font-weight:600;line-height:1.3;color:var(--brand);background:var(--soft-2);border:1px solid #d9e3f1;padding:.45em .9em;border-radius:999px;white-space:nowrap}
.chip svg{width:14px;height:14px;color:var(--green-2)}
.chip b,.chip strong{color:var(--navy);font-weight:800}
.chip.green{color:var(--green-ink);background:rgba(144,195,31,.14);border-color:rgba(144,195,31,.42)}
.chip.outline{background:#fff;border-color:var(--line)}
.bg-navy .chip,.hero .chip,.page-hero .chip{color:#dfe8f5;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.bg-navy .chip b,.hero .chip b,.page-hero .chip b{color:#fff}
.bg-navy .chip svg,.hero .chip svg,.page-hero .chip svg{color:var(--green)}
.tag-row,.commodity-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.tag{font-size:.8rem;font-weight:700;letter-spacing:.03em;color:#cfe0a6;border:1px solid rgba(144,195,31,.45);background:rgba(144,195,31,.10);padding:.4em .9em;border-radius:999px}

/* ---------- 12. Cards ---------- */
/* feature card */
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.feat-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.feat-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;transition:.22s}
.fcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.fcard .ic{width:54px;height:54px;border-radius:14px;background:var(--soft-2);color:var(--brand-2);display:grid;place-items:center;margin-bottom:18px}
.fcard .ic svg{width:27px;height:27px}
.fcard h2,.fcard h3{font-size:1.14rem;margin-bottom:8px}
.fcard p{font-size:.95rem;color:var(--muted)}
.fcard .check-list{margin-top:14px;font-size:.92rem}
.fcard .kicker{display:block;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-ink);margin-bottom:6px} /* green-ink: 7.8:1 on white */

/* soft card (value / enquiry cards) */
.soft-card{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px}
.soft-card h2,.soft-card h3{font-size:1.18rem;margin-bottom:8px}
.soft-card .kicker{color:var(--green-ink);font-size:.78rem;display:block;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.soft-card p{font-size:.93rem;color:var(--muted)}
.bg-soft .soft-card{background:#fff}

/* product card */
.prod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.prod-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pcard{position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:.25s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.pcard .ph{aspect-ratio:4/3;overflow:hidden;background:var(--soft-2)}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pcard:hover .ph img{transform:scale(1.06)}
.pcard .pb{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.pcard h3{font-size:1.12rem;margin-bottom:6px}
.pcard p{font-size:.9rem;color:var(--muted);flex:1}
.pcard .more{margin-top:14px;font-weight:700;font-size:.88rem;color:var(--brand-2);display:inline-flex;align-items:center;gap:.4em}
.pcard .more svg{width:15px;height:15px;transition:transform .2s}
.pcard:hover .more svg{transform:translateX(4px)}

/* featured product (horizontal) */
.prod-feature{display:grid;grid-template-columns:1.12fr 1fr;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.pf-media{position:relative;min-height:420px;background:var(--soft-2);overflow:hidden}
.pf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.prod-feature:hover .pf-media img{transform:scale(1.03)}
.pf-body{padding:44px 44px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.pf-body h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.pf-body p{color:var(--muted)}
.pf-body .chips{margin:4px 0}
.pf-body .btn-row{margin-top:10px;align-self:stretch}
.pf-body .btn-row .btn{flex:1 1 auto;justify-content:center} /* buttons share the full width, aligned with the download box */

/* numbered benefit card (optional photo) */
.benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.benefit-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.benefit{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.25s}
.benefit:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.benefit-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--soft-2)}
.benefit-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.benefit:hover .benefit-media img{transform:scale(1.05)}
.benefit-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.benefit-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.benefit-head .ic{width:54px;height:54px;border-radius:14px;background:var(--soft-2);color:var(--brand-2);display:grid;place-items:center;transition:.25s}
.benefit-head .ic svg{width:26px;height:26px}
.benefit:hover .benefit-head .ic{background:var(--brand);color:#fff}
/* the card number is the visible numbering of the list: soft brand blue, but >=3:1 on white (large text) */
.benefit-num{font-size:2.25rem;font-weight:800;line-height:1;letter-spacing:-.04em;color:#728fc4;font-variant-numeric:tabular-nums;transition:color .25s}
.benefit:hover .benefit-num{color:#6c9611}
.benefit h3{font-size:1.14rem;margin-bottom:8px}
.benefit p{font-size:.95rem;color:var(--muted)}
.benefit .check-list{margin-top:12px;font-size:.92rem;gap:7px}
.benefit .check-list li{color:var(--muted)}
.benefit .check-list li strong{color:var(--navy)}
.benefit .benefit-note{margin-top:12px;font-size:.84rem;color:var(--muted);font-style:italic}
/* a trailing chip row sits at the foot of the card (equal-height rows), at least 16px below the copy */
.benefit-body>.chips:last-child{margin-top:auto;padding-top:16px}
/* compact label/value list inside a card */
.benefit .kv-list{margin-top:14px}
.benefit .kv-list>div{padding:5px 0;font-size:.9rem}
.benefit .kv-list>div:first-child{border-top:1px dashed #d3ddeb}
.benefit.span-2{grid-column:span 2;flex-direction:row}
.benefit.span-2 .benefit-media{flex:0 0 46%;aspect-ratio:auto;min-height:260px}
.benefit.span-2 .benefit-media img{position:absolute;inset:0}

/* stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 22px;text-align:center}
.stat-num{display:block;font-size:2.3rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--brand-2)}
.stat-num small{font-size:.5em;font-weight:700;letter-spacing:0;margin-left:.15em;color:var(--brand)}
.stat-lbl{display:block;margin-top:6px;font-size:.93rem;color:var(--muted)}

/* pillars (navy band) */
.pillar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pillar{position:relative;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:30px 24px 28px;transition:.22s}
.pillar:hover{transform:translateY(-4px);background:rgba(255,255,255,.08);border-color:rgba(144,195,31,.45)}
.pillar .ic{width:50px;height:50px;margin-bottom:18px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center}
.pillar .ic svg{width:26px;height:26px}
.pillar .kicker{display:block;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.pillar h3{color:#fff;font-size:1.35rem;margin-bottom:10px}
.pillar p{color:var(--on-dark-2);font-size:.93rem}
.pillar .check-list{margin-top:14px;font-size:.9rem;gap:8px}
.pillar .check-list li{color:var(--on-dark)}

/* value chain tiles (ES) */
.vchain{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.vc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 16px;text-align:center;transition:.22s}
.bg-navy .vc{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.vc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.vc .ic{width:50px;height:50px;margin:0 auto 12px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center}
.vc .ic svg{width:26px;height:26px}
.vc h3,.vc h4{font-size:.98rem;color:var(--navy)}
.bg-navy .vc h3,.bg-navy .vc h4{color:#fff}

/* icon spec tiles (ES) */
.spec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:8px 0}
.spec-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.spec{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:20px}
.spec .ic{width:46px;height:46px;border-radius:11px;background:var(--brand);color:#fff;display:grid;place-items:center;margin-bottom:12px}
.spec .ic svg{width:23px;height:23px}
.spec h2,.spec h3,.spec h4{font-size:1rem;margin-bottom:4px;letter-spacing:-.01em}
.spec p{font-size:.9rem;color:var(--muted);margin:0}
.bg-soft .spec{background:#fff}

/* ---------- 13. Lists, prose, callouts ---------- */
.check-list{list-style:none;display:grid;gap:10px}
.check-list li{position:relative;padding-left:30px;line-height:1.55}
.check-list li::before{content:"";position:absolute;left:0;top:.15em;width:20px;height:20px;border-radius:50%;background:rgba(144,195,31,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2379a814' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.check-list.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.bg-navy .check-list li,.pillar .check-list li{color:var(--on-dark)}
.bg-navy .check-list li::before,.pillar .check-list li::before{background-color:rgba(144,195,31,.2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390c31f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

.prose{max-width:760px}
.prose>*:first-child{margin-top:0}
.prose h2{font-size:1.6rem;margin:36px 0 12px}
.prose h3{font-size:1.22rem;margin:26px 0 8px}
.prose p{margin-bottom:16px;color:#33414f}
.prose ul,.prose ol{margin:0 0 18px 20px}
.prose li{margin-bottom:8px;color:#33414f}
.prose .check-list{margin-left:0}
.prose a:not(.btn){color:var(--brand-2);font-weight:600}

.callout,.case-note{border-left:3px solid var(--green);background:var(--soft);padding:18px 22px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:26px 0}
.callout-label,.case-note .cn-label{display:flex;align-items:center;gap:8px;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--green-ink);font-weight:700;margin-bottom:7px}
.callout-label svg{width:16px;height:16px}
.callout p,.case-note p{margin:0 0 10px;color:var(--ink)}
.callout p:last-child,.case-note p:last-child{margin-bottom:0}
.callout a{font-weight:600;color:var(--brand-2)}
.callout.warn{border-left-color:#e0a42a;background:var(--warn-soft)}
.callout.warn .callout-label{color:#8a5a00}
.callout.warn p{color:#5b4611}
.bg-soft .callout:not(.warn){background:#fff}
.notice{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn-ink);border-radius:10px;padding:10px 14px;font-size:.82rem;margin-top:10px}

/* ---------- 14. Spec table ---------- */
.table-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
.table-wrap .spec-table{margin:0}
.spec-table{width:100%;border-collapse:collapse;margin:14px 0 8px;font-size:.95rem}
.spec-table caption{text-align:left;font-weight:600;color:var(--muted);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;padding-bottom:10px}
.table-wrap .spec-table caption{padding:16px 18px 14px;border-bottom:1px solid var(--line);background:#fff}
.spec-table th,.spec-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.spec-table th{width:38%;font-weight:600;color:var(--brand);background:var(--soft)}
.spec-table td{color:var(--ink)}
.spec-table td .sub,.spec-table td small{display:block;color:var(--muted);font-size:.85rem;margin-top:2px}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
/* group headers: light band + green rule (ES tables use soft label cells and hairlines only) */
.spec-table tr.group th{width:auto;background:var(--soft-2);color:var(--brand-ink);box-shadow:inset 3px 0 0 var(--green);font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:10px 14px}
.table-note{font-size:.88rem;color:var(--muted);margin-top:12px}

/* ---------- 15. Sidebar layout & card ---------- */
.layout-2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start}
.layout-2.wide-aside{grid-template-columns:minmax(0,1fr) 380px}
/* the sidebar column runs the full height of the layout so its sticky card can travel */
.layout-2>aside,.layout-2>.aside{align-self:stretch}
/* sticky card, just below the sticky header. main.js raises `top` when the card is taller
   than the room under it (so the quote buttons stay on screen), or adds .no-stick when the
   card can't fit below the header at all (a stuck card would hide its own title) */
.aside-card{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;position:sticky;top:calc(var(--header-h) + 22px)}
.aside-card.no-stick{position:static}
.aside-card h2,.aside-card h3,.aside-card h4{font-size:1.05rem;margin-bottom:6px;letter-spacing:-.01em}
.aside-card p{font-size:.92rem;color:var(--muted);margin-bottom:16px}
.aside-card .aside-block+.aside-block{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.aside-card .btn{width:100%;justify-content:center;padding-top:.72em;padding-bottom:.72em}
.aside-card .btn+.btn{margin-top:10px}
.aside-card .chips{margin:8px 0 2px}
.aside-card .download-link{margin-top:12px}
.kv-list{margin:2px 0 0}
.kv-list>div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;border-bottom:1px dashed #d3ddeb;font-size:.92rem}
.kv-list>div:last-child{border-bottom:0}
.kv-list dt{color:var(--muted)}
.kv-list dd{color:var(--navy);font-weight:700;text-align:right}
/* short desktop viewports (e.g. a 1366×768 laptop leaves ~650px of browser): a compact card
   (~430px) that still fits below the 79px sticky header, title included */
@media (min-width:1025px) and (max-height:780px){
  .aside-card{padding:16px 20px;top:calc(var(--header-h) + 16px)}
  .aside-card .aside-block+.aside-block{margin-top:10px;padding-top:10px}
  .aside-card h2,.aside-card h3,.aside-card h4{font-size:1rem;margin-bottom:2px}
  .aside-card .kv-list>div{padding:4px 0;font-size:.88rem}
  .aside-card .chips{gap:5px;margin:6px 0 0}
  .aside-card .chip{font-size:.75rem;padding:.35em .68em}
  .aside-card .aside-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .aside-card .aside-actions .btn{padding:.5em .6em;font-size:.9rem}
  .aside-card .aside-actions .btn+.btn{margin:0}
  .aside-card .aside-actions .download-link{grid-column:1/-1;margin-top:0;padding:8px 12px}
  .aside-card .download-link .icon-tile{width:32px;height:32px}
}

/* download link */
.download-link{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px dashed #c3d1e4;border-radius:12px;background:#fff;color:var(--navy);font-weight:700;font-size:.92rem;line-height:1.35;transition:.2s}
.download-link .icon-tile{width:38px;height:38px;border-radius:10px}
.download-link .icon-tile svg{width:19px;height:19px}
.download-link small{display:block;font-weight:500;font-size:.8rem;color:var(--muted);margin-top:2px}
.download-link:hover{border-style:solid;border-color:var(--brand-2);box-shadow:var(--shadow-sm);color:var(--brand-2)}
.download-link:hover .icon-tile{background:var(--brand);color:#fff}

/* ---------- 16. Numbered steps ---------- */
.steps{list-style:none;counter-reset:step;display:grid}
.steps>li{position:relative;counter-increment:step;padding:0 0 22px 60px;min-height:42px}
.steps>li::before{content:counter(step);position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:.95rem;display:grid;place-items:center;box-shadow:0 0 0 5px var(--soft-2);z-index:1}
.steps>li::after{content:"";position:absolute;left:20px;top:48px;bottom:6px;width:2px;border-radius:2px;background:var(--line)}
.steps>li:last-child{padding-bottom:0}
.steps>li:last-child::after{display:none}
.steps h3,.steps h4{font-size:1.02rem;margin:9px 0 4px;letter-spacing:-.01em}
.steps p{color:#33414f;font-size:.97rem;padding-top:8px}
.steps h3+p,.steps h4+p{padding-top:0}
.code,.valve-ref{display:inline-block;font-weight:800;font-size:.84em;color:var(--brand);background:var(--soft-2);border:1px solid #d9e3f1;border-radius:6px;padding:0 .4em;line-height:1.5;white-space:nowrap}
.bg-soft .steps>li::before{box-shadow:0 0 0 5px #fff}
.bg-navy .steps>li::before{background:var(--green);color:#16270a;box-shadow:0 0 0 5px rgba(144,195,31,.18)}
.bg-navy .steps>li::after{background:rgba(255,255,255,.14)}
.bg-navy .steps p{color:var(--on-dark)}

/* ---------- 17. Valve legend ---------- */
.valve-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.valve-legend.cols-1{grid-template-columns:1fr}
.vl-item{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 14px 9px 9px;transition:.2s}
.vl-item:hover{border-color:#c9d6ea;box-shadow:var(--shadow-sm)}
.vl-code{flex:0 0 auto;min-width:66px;height:38px;padding:0 10px;border-radius:8px;background:var(--navy);color:var(--green);font-weight:800;font-size:.9rem;letter-spacing:.02em;display:grid;place-items:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.vl-desc{font-size:.93rem;color:var(--ink);line-height:1.4}
.vl-desc small{display:block;color:var(--muted);font-size:.8rem}

/* ---------- 18. Outcome strip ---------- */
.outcome-strip{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.outcome-strip::after{content:"";position:absolute;right:-80px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(144,195,31,.22),transparent 70%);pointer-events:none}
.outcome{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;padding:30px 24px}
.outcome+.outcome{border-left:1px solid rgba(255,255,255,.1)}
.outcome .ic{width:44px;height:44px;border-radius:12px;background:rgba(144,195,31,.14);color:var(--green);display:grid;place-items:center;margin-bottom:4px}
.outcome .ic svg{width:22px;height:22px}
.outcome .oc-value{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.2}
.outcome .oc-value b{color:var(--green)}
.outcome h3{color:#fff;font-size:1.02rem;line-height:1.3}
.outcome p{color:var(--on-dark-3);font-size:.88rem;line-height:1.5}

/* ---------- 19. Gallery + lightbox ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:250px;grid-auto-flow:dense;gap:18px}
.g-item{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:var(--radius);background:var(--soft-2);box-shadow:var(--shadow-sm);cursor:zoom-in;border:0;padding:0;text-align:left;color:#fff;isolation:isolate}
.g-item.tall{grid-row:span 2}
.g-item.wide{grid-column:span 2}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
/* light overall vignette; the caption carries its own scrim (below), sized to its text */
.g-item::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,27,61,0) 55%,rgba(10,27,61,.4) 100%);transition:opacity .3s}
.g-item::before{content:"";position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312317a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/17px no-repeat;box-shadow:var(--shadow-sm);opacity:0;transform:scale(.85);transition:.25s}
.g-item:hover img,.g-item:focus-visible img{transform:scale(1.05)}
.g-item:hover::before,.g-item:focus-visible::before{opacity:1;transform:none}
/* caption scrim: fades in over 30px, then a solid-enough band (≥.8) behind every caption line,
   so white text stays ≥4.5:1 even over bright pipework, whatever the tile size or caption length */
.g-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 18px 16px;color:#fff;font-weight:600;font-size:.92rem;line-height:1.35;text-shadow:0 1px 2px rgba(0,0,0,.25);background:linear-gradient(180deg,rgba(10,27,61,0) 0,rgba(10,27,61,.8) 30px,rgba(10,27,61,.9) 100%)}
.g-cap small{display:block;font-weight:500;font-size:.8rem;color:#d3deee;margin-top:2px}
/* wide tiles are short for their width: title and detail share one line, so the scrim covers less photo */
@media (min-width:769px){
  .g-item.wide .g-cap{padding-top:28px}
  .g-item.wide .g-cap small{display:inline;margin:0 0 0 .6em;padding-left:.6em;border-left:1px solid rgba(255,255,255,.35)}
}
.gallery-note{margin-top:18px;font-size:.86rem;color:var(--muted);text-align:center}

html.lb-open{overflow:hidden}
/* closed = display:none (not visibility:hidden) so focus() can move into the dialog synchronously on open */
.lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:70px 84px;background:rgba(5,12,28,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox:not(.open){display:none}
.lightbox.open{animation:lbIn .25s ease}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-figure{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(1280px,100%);max-height:100%;margin:0}
.lb-img{max-width:100%;max-height:calc(100vh - 180px);width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5);background:#0b1733;opacity:0;transform:scale(.985);transition:opacity .25s ease,transform .25s ease}
.lb-img.loaded{opacity:1;transform:none}
.lb-cap{color:#dbe5f3;font-size:.95rem;line-height:1.5;text-align:center;max-width:70ch}
.lb-count{position:absolute;top:26px;left:26px;color:#9fb2d0;font-size:.82rem;font-weight:700;letter-spacing:.12em}
.lb-btn{position:absolute;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.2s}
.lb-btn:hover{background:var(--green);border-color:var(--green);color:#16270a}
.lb-btn svg{width:22px;height:22px}
.lb-close{top:16px;right:16px}
.lb-prev{left:18px;top:50%;margin-top:-24px}
.lb-next{right:18px;top:50%;margin-top:-24px}

/* ---------- 20. Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.info-block{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.info-block .ic{flex:0 0 44px;width:44px;height:44px;border-radius:11px;background:var(--brand);color:#fff;display:grid;place-items:center}
.info-block .ic svg{width:21px;height:21px}
.info-block h2,.info-block h3,.info-block h4{font-size:1rem;margin-bottom:2px;letter-spacing:-.01em}
.info-block p,.info-block a{font-size:.95rem;color:var(--muted)}
/* phone/email: look tappable (brand blue) and get a ~40px hit area without shifting the layout */
.info-block a{display:inline-block;padding:10px 0;margin:-10px 0;color:var(--brand-2);font-weight:600;transition:.18s}
.info-block a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.enquiry-cards{margin-top:26px;display:grid;gap:12px}

/* ---------- 21. Forms ---------- */
.form-card{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.form-card .form-title{font-size:1.2rem;margin-bottom:4px;letter-spacing:-.01em}
.form-card .form-intro{font-size:.92rem;color:var(--muted);margin-bottom:20px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.field{margin-bottom:18px}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--navy);margin-bottom:6px}
.field .req{color:var(--danger);margin-left:2px}
.field .opt{color:var(--muted);font-weight:500}
.field input,.field textarea,.field select{width:100%;padding:.8em 1em;border:1px solid var(--field-line);border-radius:10px;font-family:inherit;font-size:.95rem;line-height:1.5;color:var(--ink);background:#fff;transition:.18s;-webkit-appearance:none;appearance:none}
.field input::placeholder,.field textarea::placeholder{color:var(--field-placeholder);opacity:1}
.field textarea{min-height:130px;resize:vertical}
.field select{padding-right:2.6em;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c4aa0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 1em center/14px no-repeat}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--brand-2)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 1px var(--brand-2),0 0 0 5px rgba(28,74,160,.2)}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--danger);box-shadow:0 0 0 3px rgba(192,57,43,.1)}
.field-hint{margin-top:6px;font-size:.8rem;color:var(--muted)}
.field-error{display:flex;align-items:flex-start;gap:6px;margin-top:6px;font-size:.82rem;font-weight:600;line-height:1.4;color:var(--danger)}
.field-error::before{content:"!";flex:0 0 16px;width:16px;height:16px;margin-top:1px;border-radius:50%;background:var(--danger);color:#fff;font-size:.7rem;font-weight:800;display:grid;place-items:center;line-height:1}
.form-actions{margin-top:6px}
.form-note{margin-top:12px;font-size:.8rem;color:var(--muted);text-align:center}
.form-status{position:relative;margin-top:16px;border-radius:12px;padding:14px 16px 14px 50px;font-size:.92rem;line-height:1.55}
.form-status::before{content:"";position:absolute;left:14px;top:14px;width:24px;height:24px;border-radius:50%;background-position:center;background-repeat:no-repeat;background-size:13px}
.form-status strong{display:block;margin-bottom:2px}
.form-status a{font-weight:700;text-decoration:underline;text-underline-offset:2px}
.form-status.success{background:rgba(144,195,31,.12);border:1px solid rgba(144,195,31,.5);color:var(--green-ink)}
.form-status.success::before{background-color:var(--green);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316270a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.form-status.error{background:var(--danger-soft);border:1px solid #f1c4c4;color:#8a1f1f}
.form-status.error::before{background-color:var(--danger);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E")}

/* map */
.map-frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--soft-2);border:1px solid var(--line)}
.map-frame iframe{display:block;width:100%;height:420px;border:0}

/* ---------- 22. CTA band ---------- */
.cta-band{position:relative;background:linear-gradient(120deg,var(--brand-ink),var(--brand) 60%,var(--brand-2));color:#fff;border-radius:var(--radius-lg);padding:54px 56px;display:flex;flex-direction:column;align-items:flex-start;gap:26px;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(144,195,31,.32),transparent 70%);pointer-events:none}
.cta-band .ct{position:relative;z-index:2;max-width:680px}
.cta-band h2{color:#fff;font-size:1.9rem;margin-bottom:8px}
.cta-band p{color:#cfdbf0}
.cta-band .ca{position:relative;z-index:2;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 23. Footer ---------- */
.site-footer{background:var(--navy);color:#aebed6;padding:64px 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:48px}
.site-footer .flogo-link{display:inline-block;border-radius:6px}
.site-footer img.flogo{height:62px;width:auto;margin-bottom:18px}
.site-footer p{font-size:.92rem;color:#9fb0ca;max-width:34ch}
.site-footer .foot-tagline{margin-top:14px;max-width:none;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.site-footer h2,.site-footer h4{color:#fff;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;line-height:1.4}
.site-footer ul{list-style:none}
.site-footer ul li{margin-bottom:10px}
.site-footer ul a{display:inline-block;padding:5px 0;margin:-5px 0;font-size:.93rem;color:#aebed6;transition:.18s} /* ~34px hit area, same rhythm */
.site-footer ul a:hover{color:var(--green)}
.fcontact li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;margin-bottom:14px;color:#aebed6}
.fcontact li svg{width:17px;height:17px;color:var(--green);flex:0 0 17px;margin-top:4px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem;color:#8294b0}
.foot-bottom a{color:#aebed6}
.foot-bottom a:hover{color:var(--green)}

/* ---------- 24. Reveal on scroll ---------- */
/* Hidden only when JS is running (html.js); shown by main.js via .in */
.js .reveal{opacity:0;translate:0 22px;
  transition-property:opacity,translate,transform,box-shadow,border-color,background-color,color;
  transition-duration:.6s,.6s,.25s,.25s,.25s,.25s,.25s;
  transition-timing-function:ease;
  transition-delay:var(--reveal-delay,0s),var(--reveal-delay,0s),0s,0s,0s,0s,0s}
.js .reveal.in{opacity:1;translate:none}

/* ---------- 25. Responsive ---------- */
@media (max-width:1024px){
  .prod-grid,.prod-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vchain{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .layout-2,.layout-2.wide-aside{grid-template-columns:1fr}
  .aside-card{position:static}
  .feat-grid.cols-4,.benefit-grid,.pillar-grid,.grid-3,.grid-4,.spec-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{gap:44px}
  .outcome-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .outcome+.outcome{border-left:0}
  .outcome{border-top:1px solid rgba(255,255,255,.1)}
  .outcome:nth-child(-n+2){border-top:0}
  .outcome:nth-child(even){border-left:1px solid rgba(255,255,255,.1)}
  .outcome:last-child:nth-child(odd){grid-column:1/-1}
  .gallery{grid-auto-rows:220px}
  .pf-body{padding:36px 32px 32px}
}
/* tablet landscape: two-column splits get narrow — stack the feature pills */
@media (min-width:901px) and (max-width:1024px){
  .split .pill{flex-basis:100%}
}
@media (max-width:900px){
  /* collapsed menu only when JS runs (html.js); without JS the links stay visible (below) */
  .js .nav-links,.js .nav-cta{display:none}
  .js .hamburger{display:flex}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 22px 30px -14px rgba(13,32,71,.22);padding:10px 16px 18px;max-height:calc(100vh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;animation:navIn .2s ease}
  .nav-links.open>li>a:not(.btn){display:flex;padding:.85em .8em;font-size:1rem}
  .nav-links.open .nav-mobile-cta{display:block;margin-top:10px}
  .nav-links.open .nav-mobile-cta .btn{width:100%;justify-content:center}
  /* no-JS fallback: logo + quote button, then the links in a wrapped row */
  html:not(.js) .site-header{position:relative}
  html:not(.js) .nav{flex-wrap:wrap;height:auto;min-height:var(--header-h);row-gap:4px;padding-top:12px;padding-bottom:10px}
  html:not(.js) .main-nav{order:3;flex:1 1 100%}
  html:not(.js) .nav-links{flex-wrap:wrap;gap:0 2px;margin:0 -.9em}
  .feat-grid,.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split.rev,.split.even{grid-template-columns:1fr;gap:34px}
  .split .media{order:-1}
  .split.media-last .media{order:0}
  .split .media img.ar-4x3,.split .media img.ar-1x1{aspect-ratio:16/10}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .prod-feature{grid-template-columns:1fr}
  .pf-media{min-height:0;aspect-ratio:16/10}
}
@keyframes navIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:768px){
  section,.section{padding:62px 0}
  .section-sm{padding:48px 0}
  .section-head{margin-bottom:36px}
  .hero-strip .wrap{grid-template-columns:repeat(2,1fr);gap:22px}
  .hero{padding-bottom:62px}
  .hero>.wrap{padding-bottom:72px}
  .hero-overlay{background:linear-gradient(180deg,rgba(8,20,46,.92) 0%,rgba(9,24,58,.86) 55%,rgba(10,27,61,.72) 100%)}
  .page-hero .wrap{padding-top:96px;padding-bottom:84px}
  .cta-band{padding:38px 30px}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:200px;gap:14px}
  .g-item.tall{grid-row:auto}
  .lightbox{padding:70px 20px 96px}
  .lb-prev,.lb-next{top:auto;bottom:22px;margin-top:0}
  .lb-prev{left:calc(50% - 60px)}
  .lb-next{right:calc(50% - 60px)}
  .lb-img{max-height:calc(100vh - 230px)}
}
@media (min-width:641px) and (max-width:900px){
  /* an odd last card in a 2-column feature grid spans the row as a horizontal card (no orphan) */
  .feat-grid>.fcard:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-content:start}
  .feat-grid>.fcard:last-child:nth-child(odd)>.ic{grid-row:1 / span 3;margin-bottom:0}
  .feat-grid>.fcard:last-child:nth-child(odd)>:not(.ic){grid-column:2}
}
@media (min-width:768px) and (max-width:839px){
  /* the full address beside phone + email needs ~795px at .84rem: tighten slightly */
  .topbar{font-size:.8rem}
  .topbar .wrap,.topbar .tb-right{gap:12px}
}
@media (max-width:767px){
  /* the address needs ~760px beside phone + email: hide it below that (ES does at 560) */
  .topbar .tb-left{display:none}
  .topbar .wrap{justify-content:center}
}
@media (max-width:640px){
  .feat-grid,.feat-grid.cols-2,.feat-grid.cols-4,.benefit-grid,.benefit-grid.cols-2,.pillar-grid,.grid-2,.grid-3,.grid-4,.check-list.cols-2{grid-template-columns:1fr}
  .benefit.span-2{grid-column:auto;flex-direction:column}
  .benefit.span-2 .benefit-media{flex:none;aspect-ratio:16/9;min-height:0}
  .benefit.span-2 .benefit-media img{position:static}
}
@media (min-width:561px) and (max-width:1024px){
  /* odd last outcome spans the strip: centre it as an icon-left row so the band reads as finished */
  .outcome:last-child:nth-child(odd){display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:16px;row-gap:2px}
  .outcome:last-child:nth-child(odd) .ic{grid-row:1 / span 2;margin:0}
}
@media (min-width:641px) and (max-width:1024px){
  .aside-card .kv-list{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
  .aside-card .kv-list>div:last-child{border-bottom:1px dashed #d3ddeb}
  .aside-card .kv-list>div:last-child:nth-child(odd){grid-column:1/-1}
  .aside-card .btn{width:auto}
  .aside-card .btn+.btn{margin-top:0;margin-left:8px}
  .aside-card .download-link{max-width:460px}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .topbar{font-size:.78rem}
  .topbar .wrap{gap:12px}
  .topbar .tb-right{gap:4px 14px;flex-wrap:wrap;justify-content:center}
  .nav .logo img{height:40px}
  .prod-grid,.prod-grid.cols-3,.vchain,.spec-grid,.spec-grid.cols-4,.valve-legend{grid-template-columns:1fr}
  /* compact icon-left spec tiles on phones (works with or without a text wrapper) */
  .spec-grid{gap:12px}
  .spec-grid .spec{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:16px;align-items:center;padding:16px 18px}
  .spec-grid .spec .ic{grid-row:1 / span 2;margin:0}
  .spec-grid .spec>:not(.ic){grid-column:2}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .stat{padding:22px 14px}
  .stat-num{font-size:1.7rem}
  .foot-grid{grid-template-columns:1fr}
  .hero-strip .wrap{grid-template-columns:1fr 1fr;padding:20px}
  .hs-item .num{font-size:1.4rem}
  .hero-cta .btn,.page-hero .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .page-hero .wrap{padding-top:72px;padding-bottom:64px}
  .page-hero p{font-size:1.02rem}
  .cta-band{padding:34px 24px;border-radius:var(--radius)}
  .cta-band h2{font-size:1.6rem}
  .cta-band .ca{width:100%}
  .cta-band .ca .btn{flex:1 1 100%;justify-content:center}
  .outcome-strip{grid-template-columns:1fr}
  .outcome,.outcome:nth-child(even){border-left:0}
  .outcome{border-top:1px solid rgba(255,255,255,.1);padding:24px 22px}
  .outcome:first-child{border-top:0}
  .outcome:nth-child(2){border-top:1px solid rgba(255,255,255,.1)}
  .gallery{grid-auto-rows:150px;gap:10px}
  .g-cap{padding:24px 12px 10px;font-size:.8rem;background:linear-gradient(180deg,rgba(10,27,61,0) 0,rgba(10,27,61,.8) 20px,rgba(10,27,61,.9) 100%)}
  .g-cap small{display:none}
  .g-item::before{top:8px;right:8px;width:32px;height:32px;background-size:14px}
  .field-row{grid-template-columns:1fr}
  .form-card{padding:24px 20px}
  .aside-card{padding:22px}
  .pf-body{padding:28px 22px 26px}
  .pf-body .btn-row .btn{flex:1 1 100%;justify-content:center}
  .map-frame iframe{height:320px}
  .steps>li{padding-left:54px}
  .steps>li::before{width:38px;height:38px;font-size:.9rem}
  .steps>li::after{left:18px;top:44px}
  .steps p{padding-top:6px}
  .spec-table{font-size:.9rem}
  .spec-table th,.spec-table td{padding:10px 12px}
  .spec-table th{width:44%}
  .spec-table.stack th,.spec-table.stack td{display:block;width:100%;border-bottom:0;padding:8px 14px}
  .spec-table.stack th{background:var(--soft);border-radius:6px 6px 0 0}
  .spec-table.stack tr{display:block;border-bottom:1px solid var(--line);margin-bottom:10px}
  .table-wrap .spec-table.stack tr{margin-bottom:0}
  .table-wrap .spec-table.stack th,.spec-table.stack tr.group th{border-radius:0}
  .chip{white-space:normal}
}
@media (max-width:400px){
  /* very small screens (e.g. 320px): long button labels wrap instead of widening the page */
  .btn{white-space:normal;max-width:100%}
  /* phone + email stay on one line down to ~350px, then wrap to two short rows */
  .topbar{font-size:.75rem}
  .topbar .tb-right{column-gap:10px}
  .topbar .tb-item{gap:.35em}
  .topbar a.tb-item{padding:6px 0}
}

/* ---------- 26. Motion & print ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;translate:none}
  .hero-bg{transform:none}
}
@media print{
  .topbar,.site-header,.lightbox,.hamburger,.skip-link,.map-frame{display:none!important}
  .js .reveal{opacity:1;translate:none}
  .hero,.page-hero,.bg-navy,.site-footer,.cta-band{background:#fff!important;color:#000}
}