@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/poppins-300-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;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/poppins-300-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-400-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;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-500-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;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-600-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;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-700-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;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/poppins-800-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;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/poppins-800-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #0c2940;
  --navy-2: #123b59;
  --blue: #1b6388;
  --blue-soft: #eaf2f5;
  --orange: #f36f21;
  --orange-dark: #d85b14;
  --ink: #18303e;
  --muted: #657983;
  --line: #d7e2e6;
  --paper: #f4f8f9;
  --white: #ffffff;
  --radius: 7px;
  --shadow: 0 18px 42px rgba(12, 41, 64, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'Poppins', Arial, Helvetica, sans-serif; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.topline { color: #d9e8ef; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.12); font-size: 12px; }
.topline-inner { min-height: 37px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.topline a { color: #fff; margin-left: 18px; }
.topline a:hover { color: #ffb47d; }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); box-shadow: 0 3px 15px rgba(12,41,64,.08); }
.nav { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { width: 144px; height: auto; }
.brand-text { margin-left: 11px; padding-left: 11px; border-left: 1px solid var(--line); color: var(--navy); font-size: 10px; font-weight: 700; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.nav-links > a, .nav-group-toggle { display: inline-flex; align-items: center; min-height: 42px; padding: 0 12px; border: 0; background: transparent; color: #344f5d; font-size: 13px; font-weight: 700; white-space: nowrap; }
.nav-links > a:hover, .nav-links > a[aria-current="page"], .nav-group-toggle:hover, .nav-group.is-open .nav-group-toggle { color: var(--orange); }
.nav-group { position: relative; }
.nav-group-toggle { gap: 7px; }
.nav-group-toggle span { color: var(--orange); font-size: 15px; line-height: 1; }
.nav-dropdown { position: absolute; top: 43px; left: 0; display: none; min-width: 245px; padding: 10px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.nav-group:hover .nav-dropdown, .nav-group.is-open .nav-dropdown { display: grid; }
.nav-dropdown a { padding: 10px 12px; color: #48606c; font-size: 12px; font-weight: 700; }
.nav-dropdown a:hover { color: var(--orange); background: var(--blue-soft); }
.nav-cta { display: inline-flex !important; align-items: center; justify-content: center; min-height: 42px; padding: 0 17px !important; color: var(--white) !important; background: var(--orange) !important; border-radius: 4px; }
.nav-cta:hover { background: var(--orange-dark) !important; }
.menu-toggle { display: none; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; color: var(--navy); background: var(--white); font-size: 12px; font-weight: 700; }

.breadcrumb-bar { background: var(--blue-soft); border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-height: 46px; color: #6c7f87; font-size: 11px; }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb span:last-child { color: var(--navy); font-weight: 700; }

.hero { position: relative; overflow: hidden; color: var(--white); background: var(--navy); }
.hero-inner { min-height: 555px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 64px; padding: 76px 0; }
.hero-copy { position: relative; z-index: 1; max-width: 625px; }
.kicker { display: inline-flex; align-items: center; gap: 9px; color: #ffb17c; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.kicker::before { content: ""; width: 27px; height: 2px; background: currentColor; }
h1, h2, h3 { color: var(--navy); }
h1 { margin: 17px 0 20px; color: var(--white); font-size: 58px; line-height: 1.02; letter-spacing: 0; }
.hero-copy p { max-width: 580px; margin: 0; color: #d5e3e8; font-size: 17px; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-visual { position: relative; min-height: 390px; }
.hero-visual img { width: 100%; height: 390px; object-fit: cover; border: 7px solid rgba(255,255,255,.14); }
.hero-visual::after { content: "XSHLCD / PROJECT DISPLAY"; position: absolute; right: 18px; bottom: 18px; padding: 8px 10px; color: var(--white); background: rgba(12,41,64,.85); font-size: 10px; font-weight: 800; letter-spacing: .11em; }
.hero-grid-note { position: absolute; right: -42px; top: 17%; width: 148px; padding: 17px; color: var(--navy); background: var(--orange); font-size: 11px; font-weight: 800; line-height: 1.35; }
.hero-grid-note strong { display: block; margin-bottom: 5px; font-size: 24px; line-height: 1; }
.subhero { padding: 64px 0 67px; background: var(--navy); }
.subhero-inner { max-width: 780px; }
.subhero h1 { margin-bottom: 14px; font-size: 53px; }
.subhero p { max-width: 690px; margin: 0; color: #d5e3e8; font-size: 17px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 17px; border: 1px solid transparent; border-radius: 4px; font-size: 12px; font-weight: 800; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: var(--white); background: var(--orange); }
.btn-primary:hover { background: var(--orange-dark); }
.btn-secondary { color: var(--navy); background: var(--white); }
.btn-secondary:hover { color: var(--orange); }
.btn-outline { color: var(--navy); border-color: #aebfc7; background: transparent; }
.btn-outline:hover { color: var(--orange); border-color: var(--orange); }
.btn-outline.is-active { color: var(--white); border-color: var(--navy); background: var(--navy); }
.btn-light-outline { color: var(--white); border-color: rgba(255,255,255,.45); background: transparent; }
.btn-light-outline:hover { color: var(--orange); border-color: var(--orange); }

.stats-strip { background: var(--white); border-bottom: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 25px 20px; border-right: 1px solid var(--line); }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; }
.stat strong { display: block; color: var(--orange); font-size: 29px; line-height: 1.1; }
.stat span { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }

.section { padding: 92px 0; background: var(--paper); }
.section-white { background: var(--white); }
.section-blue { color: var(--white); background: var(--navy); }
.section-blue h2, .section-blue h3 { color: var(--white); }
.section-blue .section-intro p, .section-blue .muted { color: #c2d4da; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 35px; margin-bottom: 36px; }
.section-head h2 { max-width: 655px; margin: 13px 0 0; font-size: 43px; line-height: 1.05; letter-spacing: 0; }
.section-head p { max-width: 390px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.section-intro { max-width: 720px; margin-bottom: 40px; }
.section-intro h2 { margin: 13px 0 14px; font-size: 44px; line-height: 1.04; letter-spacing: 0; }
.section-intro p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.eyebrow { color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card { padding: 27px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--orange); }
.feature-card h3 { margin: 16px 0 9px; font-size: 20px; line-height: 1.2; }
.feature-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.feature-index { color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .15em; }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-card { overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #dae5e8; }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.product-card:hover img { transform: scale(1.035); }
.product-label { position: absolute; top: 15px; left: 15px; padding: 6px 8px; color: var(--navy); background: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.product-body { padding: 21px 20px 22px; }
.product-body h3 { margin: 0 0 9px; font-size: 20px; line-height: 1.2; }
.product-body p { min-height: 63px; margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.product-link { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-size: 12px; font-weight: 800; }
.product-link:hover { color: var(--orange); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split.reverse .split-media { order: 2; }
.split-copy h2 { margin: 14px 0 17px; font-size: 43px; line-height: 1.05; letter-spacing: 0; }
.split-copy > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.split-media img { width: 100%; max-height: 480px; object-fit: cover; }
.media-frame { padding: 9px; background: var(--blue-soft); border: 1px solid var(--line); }
.check-list { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.check-list li { display: grid; grid-template-columns: 20px 1fr; gap: 9px; color: #435a65; font-size: 13px; }
.check-list li::before { content: "\2713"; color: var(--orange); font-size: 15px; font-weight: 900; }

.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.22); }
.capability { min-height: 240px; padding: 24px 25px 10px 0; border-right: 1px solid rgba(255,255,255,.22); margin-right: 25px; }
.capability:last-child { border-right: 0; margin-right: 0; }
.capability b { color: var(--orange); font-size: 12px; letter-spacing: .12em; }
.capability h3 { margin: 36px 0 10px; font-size: 19px; }
.capability p { margin: 0; color: #c2d4da; font-size: 12px; line-height: 1.7; }

.case-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; }
.case-card { position: relative; min-height: 290px; overflow: hidden; background: var(--navy); }
.case-card img { width: 100%; height: 100%; min-height: 290px; object-fit: cover; opacity: .82; transition: transform .3s ease; }
.case-card:hover img { transform: scale(1.04); }
.case-card-copy { position: absolute; right: 0; bottom: 0; left: 0; padding: 23px; color: var(--white); background: linear-gradient(transparent, rgba(12,41,64,.94)); }
.case-card-copy h3 { margin: 6px 0 6px; color: var(--white); font-size: 22px; }
.case-card-copy p { margin: 0; color: #d0e0e5; font-size: 12px; }
.case-card.tall { min-height: 600px; }
.case-card.tall img { min-height: 600px; }

.logo-band { padding: 28px 0; background: var(--blue-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logo-band-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.logo-band p { margin: 0; color: var(--navy); font-size: 13px; font-weight: 700; }
.logo-band strong { color: var(--orange); font-size: 27px; }

.product-hero { background: var(--navy); }
.product-hero-inner { display: grid; grid-template-columns: .95fr 1.05fr; gap: 66px; align-items: center; padding: 70px 0; }
.product-hero-copy h1 { font-size: 52px; }
.product-hero-copy p { max-width: 580px; color: #d5e3e8; font-size: 16px; line-height: 1.75; }
.product-hero-image { position: relative; }
.product-hero-image img { width: 100%; height: 400px; object-fit: cover; border: 7px solid rgba(255,255,255,.14); }
.product-hero-image .image-caption { position: absolute; left: 19px; bottom: 20px; padding: 8px 10px; color: var(--navy); background: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.spec-row { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--white); border-bottom: 1px solid var(--line); }
.spec-row > div { padding: 19px 21px; border-right: 1px solid var(--line); }
.spec-row > div:last-child { border-right: 0; }
.spec-row strong { display: block; color: var(--orange); font-size: 20px; }
.spec-row span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.data-table { width: 100%; border-collapse: collapse; background: var(--white); font-size: 13px; }
.data-table th, .data-table td { padding: 14px 16px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table th { width: 30%; color: var(--navy); background: var(--blue-soft); font-weight: 800; }
.data-table td { color: var(--muted); }
.product-cta { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 34px; padding: 25px 28px; background: var(--blue-soft); border-left: 4px solid var(--orange); }
.product-cta h3 { margin: 0 0 6px; font-size: 21px; }
.product-cta p { margin: 0; color: var(--muted); font-size: 12px; }

.quote-section { background: var(--orange); }
.quote-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 65px; align-items: start; }
.quote-copy h2 { margin: 13px 0 15px; max-width: 470px; color: var(--navy); font-size: 46px; line-height: 1.04; letter-spacing: 0; }
.quote-copy p { max-width: 430px; margin: 0; color: #5c3d29; font-size: 14px; line-height: 1.7; }
.quote-contact { display: grid; gap: 8px; margin-top: 27px; color: var(--navy); font-size: 13px; font-weight: 800; }
.quote-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.quote-form { padding: 27px; background: var(--white); border: 1px solid rgba(12,41,64,.15); border-radius: var(--radius); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { color: #48606b; font-size: 11px; font-weight: 800; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 13px; color: var(--ink); background: #fbfcfc; border: 1px solid #c8d6db; border-radius: 4px; outline: 0; font-size: 13px; }
.field textarea { min-height: 115px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(243,111,33,.14); }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.form-foot small { color: var(--muted); font-size: 10px; }
.form-success { display: none; margin-top: 13px; padding: 11px 12px; color: #225942; background: #e8f7ed; border-left: 3px solid #2f9b5d; font-size: 12px; }

.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 0; color: var(--navy); font-size: 14px; font-weight: 800; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--orange); font-size: 22px; font-weight: 400; }
.faq-list details[open] summary::after { content: "-"; }
.faq-list details p { max-width: 680px; margin: -4px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.7; }

.article-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 65px; align-items: start; }
.article-main { min-width: 0; }
.article-main h2 { margin: 35px 0 12px; font-size: 26px; line-height: 1.15; }
.article-main h3 { margin: 26px 0 9px; font-size: 20px; }
.article-main p, .article-main li { color: var(--muted); font-size: 14px; line-height: 1.8; }
.article-main ul, .article-main ol { padding-left: 22px; }
.article-main figure { margin: 0 0 28px; }
.article-main figure img { width: 100%; max-height: 450px; object-fit: cover; }
.article-main figcaption { margin-top: 8px; color: #7a8c94; font-size: 11px; }
.article-aside { position: sticky; top: 120px; padding: 23px; background: var(--blue-soft); border-top: 3px solid var(--orange); }
.article-aside h3 { margin: 0 0 13px; font-size: 18px; }
.article-aside ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.article-aside li { color: var(--muted); font-size: 12px; }
.article-aside a { color: var(--blue); font-weight: 700; }
.article-aside a:hover { color: var(--orange); }

.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 68px; align-items: start; }
.contact-details { display: grid; gap: 18px; margin-top: 26px; }
.contact-detail { padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.contact-detail strong { display: block; color: var(--navy); font-size: 13px; }
.contact-detail span, .contact-detail a { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.contact-detail a:hover { color: var(--orange); }
.map-box { min-height: 320px; display: grid; place-items: center; padding: 24px; color: #bfd1d8; background: var(--navy); text-align: center; }
.map-box strong { display: block; color: var(--orange); font-size: 32px; }
.map-box span { display: block; max-width: 300px; margin-top: 9px; font-size: 13px; }

.footer { padding: 56px 0 22px; color: #c4d7dd; background: #071b2b; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 42px; }
.footer-brand img { width: 140px; filter: brightness(0) invert(1); }
.footer-brand p { max-width: 290px; margin: 17px 0 0; color: #9cb4bd; font-size: 12px; line-height: 1.7; }
.footer h3 { margin: 0 0 16px; color: var(--white); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.footer-links { display: grid; gap: 9px; }
.footer-links a, .footer-links span { color: #b7ccd2; font-size: 12px; }
.footer-links a:hover { color: var(--orange); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 17px; color: #849da7; border-top: 1px solid rgba(255,255,255,.15); font-size: 10px; }

@media (max-width: 1000px) {
  .nav-links { gap: 0; }
  .nav-links > a, .nav-group-toggle { padding: 0 8px; font-size: 12px; }
  .hero-inner, .product-hero-inner { gap: 35px; }
  .hero-grid-note { right: -15px; }
}
@media (max-width: 820px) {
  .container { width: min(100% - 36px, 1180px); }
  .topline-inner { min-height: 43px; font-size: 10px; }
  .topline-inner > div { display: none; }
  .nav { min-height: 70px; }
  .brand-text { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 6px; }
  .nav-links { position: absolute; top: 70px; right: 18px; left: 18px; display: none; align-items: stretch; flex-direction: column; padding: 10px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
  .nav-links.is-open { display: flex; }
  .nav-links > a, .nav-group-toggle { justify-content: space-between; width: 100%; min-height: 42px; padding: 0 10px; }
  .nav-group { width: 100%; }
  .nav-dropdown { position: static; min-width: 0; padding: 0 0 5px 12px; border: 0; box-shadow: none; }
  .nav-group:hover .nav-dropdown { display: none; }
  .nav-group.is-open .nav-dropdown { display: grid; }
  .nav-cta { margin-top: 7px; }
  .hero-inner, .product-hero-inner, .split, .quote-grid, .faq-grid, .article-layout, .contact-grid { grid-template-columns: 1fr; gap: 38px; }
  h1 { font-size: 46px; }
  .subhero h1, .product-hero-copy h1 { font-size: 43px; }
  .section-head h2, .section-intro h2, .split-copy h2, .quote-copy h2 { font-size: 37px; }
  .hero-inner { padding: 63px 0; }
  .hero-visual { min-height: 300px; }
  .hero-visual img { height: 300px; }
  .hero-grid-note { right: 15px; top: 12px; }
  .product-hero-inner { padding: 54px 0 65px; }
  .product-hero-image img { height: 310px; }
  .split.reverse .split-media { order: 0; }
  .capability-grid { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .capability:nth-child(2) { border-right: 0; margin-right: 0; }
  .capability:nth-child(3), .capability:nth-child(4) { border-top: 1px solid rgba(255,255,255,.22); padding-top: 23px; }
  .case-grid { grid-template-columns: 1fr 1fr; }
  .case-card.tall, .case-card.tall img { min-height: 420px; }
  .article-aside { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .container { width: min(100% - 30px, 1180px); }
  .brand img { width: 118px; }
  .hero-inner { min-height: auto; padding: 53px 0 62px; }
  h1, .subhero h1, .product-hero-copy h1 { font-size: 34px; }
  .section-head h2, .section-intro h2, .split-copy h2, .quote-copy h2 { font-size: 30px; }
  .hero-copy p, .product-hero-copy p { font-size: 15px; }
  .hero-actions { flex-direction: column; align-items: stretch; max-width: 270px; }
  .hero-actions .btn { width: 100%; }
  .hero-visual { min-height: 245px; }
  .hero-visual img { height: 245px; }
  .hero-grid-note { top: auto; right: 10px; bottom: 10px; padding: 11px; }
  .hero-grid-note strong { font-size: 19px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat, .stat:first-child { padding: 18px 11px; border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(3), .stat:nth-child(4) { border-bottom: 0; }
  .section { padding: 68px 0; }
  .section-head { display: block; }
  .section-head p { margin-top: 15px; }
  .feature-grid, .product-grid { grid-template-columns: 1fr; }
  .product-image { aspect-ratio: 1 / 1; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability, .capability:nth-child(2), .capability:nth-child(3), .capability:nth-child(4) { min-height: 0; margin-right: 0; padding: 22px 0; border-right: 0; border-top: 1px solid rgba(255,255,255,.22); }
  .capability:first-child { border-top: 0; }
  .case-grid { grid-template-columns: 1fr; }
  .case-card, .case-card img, .case-card.tall, .case-card.tall img { min-height: 290px; }
  .spec-row { grid-template-columns: 1fr 1fr; }
  .spec-row > div:nth-child(2) { border-right: 0; }
  .spec-row > div:nth-child(3), .spec-row > div:nth-child(4) { border-top: 1px solid var(--line); }
  .product-cta { align-items: stretch; flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .form-foot { align-items: stretch; flex-direction: column; }
  .form-foot .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

.media-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.media-toolbar select, .media-toolbar input { min-height: 42px; border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--navy); padding: 0 12px; font: inherit; }
.media-toolbar select { min-width: 250px; }
.media-toolbar input { min-width: 220px; }
.media-count { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 700; }
.media-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.media-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; color: inherit; }
.media-preview { aspect-ratio: 4 / 3; background: #edf3f6; overflow: hidden; }
.media-preview img, .media-preview video { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-video { background: #061e30; }
.media-video video { object-fit: contain; }
.media-card-body { padding: 14px 15px 16px; }
.media-card-body h3 { margin: 6px 0 4px; font-size: 15px; line-height: 1.3; }
.media-card-body p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.media-kind { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.media-file-card { display: block; }
.media-file-icon { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--navy); color: var(--orange); font-size: 34px; font-weight: 900; letter-spacing: .08em; }
.media-download { display: inline-block; margin-top: 12px; color: var(--navy); font-size: 12px; font-weight: 800; }
@media (max-width: 980px) { .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .media-toolbar { align-items: stretch; flex-wrap: wrap; } .media-toolbar select, .media-toolbar input { flex: 1 1 220px; min-width: 0; } .media-count { flex: 1 0 100%; margin-left: 0; } .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 440px) { .media-grid { grid-template-columns: 1fr; } }
a.media-preview { display: block; }
.media-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 30px; }
.media-pager[hidden] { display: none; }
.media-pager button { min-height: 40px; padding: 0 18px; border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--navy); font: inherit; font-weight: 800; cursor: pointer; }
.media-pager button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.media-pager button:disabled { opacity: .45; cursor: default; }
.pager-info { color: var(--muted); font-size: 13px; font-weight: 700; }

.gallery-stack { display: grid; gap: 22px; }
.shot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.shot-grid figure { margin: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.shot-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .3s ease; }
.shot-grid figure:hover img { transform: scale(1.05); }
.shot-grid figcaption { padding: 10px 12px; color: var(--muted); font-size: 11px; font-weight: 700; }
.detail-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.detail-gallery a { display: block; background: var(--white); border: 1px solid var(--line); }
.detail-gallery img { width: 100%; height: auto; }
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.video-card { overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.video-card video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #061e30; object-fit: contain; }
.video-card p { margin: 0; padding: 13px 15px; color: var(--muted); font-size: 12px; font-weight: 700; }
@media (max-width: 980px) { .shot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .video-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .shot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .detail-gallery { grid-template-columns: 1fr; } }

/* ---- WhatsApp floating chat button ---- */
.wa-fab { position: fixed; right: 20px; bottom: 20px; z-index: 45; display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px 11px 14px; color: #fff; background: #25d366; border-radius: 999px; box-shadow: 0 10px 24px rgba(12,41,64,.28); font-size: 13px; font-weight: 800; text-decoration: none; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.wa-fab:hover { color: #fff; background: #1fbe5b; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(12,41,64,.34); }
.wa-fab:focus-visible { color: #fff; outline: 3px solid rgba(37,211,102,.45); outline-offset: 3px; }
.wa-fab svg { width: 24px; height: 24px; flex: none; fill: currentColor; }
.wa-fab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: wa-pulse 2.8s ease-out infinite; pointer-events: none; }
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 70% { box-shadow: 0 0 0 15px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@media (prefers-reduced-motion: reduce) { .wa-fab, .wa-fab::after { animation: none; transition: none; } }
@media (max-width: 560px) { .wa-fab { right: 14px; bottom: 14px; padding: 13px; } .wa-fab-label { display: none; } }
/* ---- enquiry modal (product page hero "Request ... specs") ---- */
button.btn { font-family: inherit; cursor: pointer; }
.quote-modal { width: min(100% - 32px, 620px); max-height: 90vh; padding: 0; color: var(--ink); background: var(--white); border: 0; border-radius: 8px; box-shadow: 0 26px 70px rgba(7,24,37,.4); }
.quote-modal::backdrop { background: rgba(7,24,37,.58); }
.quote-modal .quote-form { padding: 26px 26px 22px; border: 0; border-radius: 0; }
.quote-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.quote-modal-head h2 { margin: 7px 0 0; font-size: 24px; line-height: 1.2; }
.quote-modal-close { flex: none; width: 34px; height: 34px; color: var(--navy); background: var(--white); border: 1px solid var(--line); border-radius: 4px; font-size: 19px; line-height: 1; cursor: pointer; }
.quote-modal-close:hover { color: var(--orange); border-color: var(--orange); }
.quote-modal textarea { min-height: 92px; }
.quote-modal-alt { margin: 15px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.quote-modal-alt a { color: var(--blue); font-weight: 700; }
.quote-modal-alt a:hover { color: var(--orange); }
@media (max-width: 560px) { .quote-modal .quote-form { padding: 20px 18px 18px; } .quote-modal-head h2 { font-size: 20px; } }
/* ============================================================
   Article section + form feedback   (appended by the CMS deploy)
   ============================================================ */

/* ---- inline form error (used by every enquiry form) ---- */
.form-error { display: none; margin-top: 13px; padding: 11px 12px; color: #8d2f22; background: #fdecea; border-left: 3px solid #c0392b; font-size: 12px; line-height: 1.6; }
.quote-modal .form-error { margin-top: 10px; }

/* ---- article index ---- */
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.article-card { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .2s ease, box-shadow .2s ease; }
.article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.article-card .thumb { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #dae5e8; }
.article-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.article-card:hover .thumb img { transform: scale(1.03); }
.article-card .body { display: flex; flex-direction: column; gap: 9px; padding: 20px 20px 22px; }
.article-card h2 { margin: 0; font-size: 19px; line-height: 1.32; }
.article-card h2 a { color: var(--navy); }
.article-card h2 a:hover { color: var(--orange); }
.article-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.article-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.article-meta .cat { color: var(--orange); }

/* ---- article detail ---- */
.article-hero { padding: 0; }
.article-hero h1 { max-width: 860px; margin: 14px 0 0; color: var(--navy); font-size: 40px; line-height: 1.12; }
.article-cover { margin: 34px 0 0; }
.article-cover img { width: 100%; max-height: 470px; object-fit: cover; border-radius: var(--radius); }
.article-body-narrow { max-width: 800px; }

.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.article-tags a { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 700; }
.article-tags a:hover { color: var(--orange); border-color: var(--orange); }

.article-aside .aside-related { display: grid; gap: 15px; }
.article-aside .aside-related a { display: block; }
.article-aside .aside-related strong { display: block; color: var(--navy); font-size: 14px; line-height: 1.35; }
.article-aside .aside-related span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.article-aside h3 + .aside-related { margin-top: 13px; }

.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 42px; }
.pagination a, .pagination span { min-width: 42px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); color: var(--navy); font-size: 13px; font-weight: 700; text-align: center; }
.pagination .is-current { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pagination a:hover { border-color: var(--orange); color: var(--orange); }

@media (max-width: 980px) {
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-hero h1 { font-size: 33px; }
}
@media (max-width: 700px) {
  .article-grid { grid-template-columns: 1fr; }
  .article-hero h1 { font-size: 28px; }
}