:root {
  /* Core palette — client-approved redesign reference (navy + sky-blue, all
     Poppins). Variable names are kept as-is (--green/--green-2/--gold/etc.)
     since they're referenced throughout every view — only the values
     changed — but they now hold the navy/sky tokens below. Sky is the one
     accent color (buttons, kicker labels, links, icon highlights); it is
     used generously as an accent but never as a large section-fill.
       --green       = "Navy Deep"   #021B2C  (dark section backgrounds: hero, footer, CTA bands)
       --green-2     = "Navy"        #062B41  (headings/body text on light bg, dark filled buttons)
       --gold        = "Sky"         #00B0F0  (primary accent: buttons, kicker labels, links, icons)
       --gold-light  = "Sky Light"   #4DC7F2  (accent on dark backgrounds)
       --bg-alt      = "Tint"        #EFF6FB  (pale alternate section background)
       --charcoal/--text = "Navy"    #062B41  (matches --green-2 — one text/heading color)
       --border      = "Border"      #DFE7EC */
  --green: #021B2C;
  --green-2: #062B41;
  --charcoal: #062B41;
  --gold: #00B0F0;
  --gold-light: #4DC7F2;
  --bg: #ffffff;
  --bg-alt: #EFF6FB;
  --bg-warm: #EFF6FB;
  --text: #062B41;
  --text-muted: #5B6D7B;
  --border: #DFE7EC;

  /* Typography — single Poppins family everywhere. Weight carries the
     hierarchy: headings sit light (300) with a bold (700) inline accent
     word/phrase; body stays regular (400); kicker/eyebrow labels are
     semibold (600) and uppercase. */
  --font-display: 'Poppins', Arial, sans-serif;
  --font-heading: 'Poppins', Arial, sans-serif;
  --font-body: 'Poppins', Arial, sans-serif;

  /* Shared geometry — pill buttons, 16px cards, matching the reference. */
  --radius: 16px;
  --radius-sm: 8px;
  --radius-lg: 22px;
  --radius-pill: 9999px;
  --shadow-card: 0 1px 2px rgba(6,43,65,.05);
  --shadow-hover: 0 20px 40px rgba(6,43,65,.14);
  --shadow-lift: 0 30px 60px rgba(2,27,44,.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 300; letter-spacing: -.01em; margin: 0; overflow-wrap: break-word; word-break: break-word; }
h4 { font-family: var(--font-heading); font-weight: 600; margin: 0; }
h1 strong, h2 strong, h3 strong { font-weight: 700; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: #0090C7; }
p, li { text-wrap: pretty; line-height: 1.7; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

/* Section rhythm: generous, airy vertical padding everywhere a "section" is
   used, matching the reference's editorial spacing. */
.section { padding: clamp(72px, 9vw, 132px) 0; }
.section-tight { padding: clamp(56px, 6vw, 96px) 0; }

.eyebrow { font-family: var(--font-heading); font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--gold); display: inline-block; }

/* Nav chrome deliberately uses the body face, not the wider display face —
   headlines get Space Grotesk's personality, nav labels stay compact enough
   for 7 items to fit a single row at real desktop widths (1280-1440px). */
.nav-link { position: relative; display: inline-block; color: var(--text); font-family: var(--font-body); font-size: 14px; letter-spacing: 0; font-weight: 400; padding-bottom: 4px; white-space: nowrap; transition: color .2s ease; }
.nav-link:hover { color: var(--gold); }
.nav-link.is-active { color: var(--gold); font-weight: 600; }

.nav-item { position: relative; display: flex; align-items: center; }
.nav-caret { margin-left: 5px; vertical-align: -1px; transition: transform .2s ease; }
.nav-item.has-dropdown:hover .nav-caret { transform: rotate(180deg); }
.nav-dropdown { position: absolute; top: 100%; left: 0; margin-top: 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-hover); padding: 8px; min-width: 230px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 40; }
.nav-item.has-dropdown:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { display: block; padding: 9px 12px; font-size: 12.5px; font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--text); border-radius: 4px; white-space: nowrap; }
.nav-dropdown a:hover { background: var(--bg-alt); color: var(--green); }

.footer-link { color: #9FC3DC; font-size: 13px; transition: color .25s ease; }
.footer-link:hover { color: var(--gold-light); }

/* Header logo: circular badge + stacked wordmark */
.site-logo { display: flex; align-items: center; gap: 12px; color: var(--charcoal); flex-shrink: 0; }
.site-logo-badge { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--green); background: #fff; flex-shrink: 0; overflow: hidden; }
.site-logo-badge img { width: 100%; height: 100%; object-fit: cover; }
.site-logo-text { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.site-logo-text strong { font-family: var(--font-heading); font-weight: 700; font-size: 18px; letter-spacing: .5px; color: var(--charcoal); }
.site-logo-text small { font-family: var(--font-heading); font-weight: 500; font-size: 9.5px; letter-spacing: 1.6px; color: var(--text-muted); text-transform: uppercase; }

/* Full logo artwork (mark + wordmark), shown at its native aspect ratio —
   never force-cropped into the small circular badge above. */
.site-logo-full { height: 66px; width: auto; display: block; transition: height .25s ease; }
.site-header.is-scrolled .site-logo-full { height: 52px; }

/* Buttons — all pills (reference uses border-radius:9999px with zero
   exceptions). Hover is a scale transform only, never a shadow or a
   darkened background — that's the reference's hover language for
   interactive controls (cards get the shadow+lift treatment instead). */
.btn-gold { background: var(--gold); color: #fff; font-family: var(--font-heading); font-size: 14px; font-weight: 500; padding: 14px 30px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; white-space: nowrap; transition: transform .25s ease; }
.btn-gold:hover { transform: scale(1.05); }

.btn-primary { background: var(--green-2); color: #fff; font-family: var(--font-heading); font-size: 14px; font-weight: 500; padding: 15px 32px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 10px; border: none; cursor: pointer; white-space: nowrap; transition: transform .25s ease; }
.btn-primary:hover { transform: scale(1.05); }
.btn-outline-dark { font-family: var(--font-heading); font-size: 14px; font-weight: 500; padding: 14px 30px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--green-2); color: var(--green-2); background: transparent; transition: background .25s ease, color .25s ease, transform .25s ease; cursor: pointer; }
.btn-outline-dark:hover { background: var(--green-2); color: #fff; transform: scale(1.05); }
.btn-ghost { border: 1px solid rgba(255,255,255,.7); color: #fff; font-family: var(--font-heading); font-size: 14px; font-weight: 500; padding: 15px 32px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 10px; background: transparent; transition: background .25s ease, color .25s ease, transform .25s ease; }
.btn-ghost:hover { background: #fff; color: var(--green-2); transform: scale(1.05); }

input, textarea, select { width: 100%; border: 1px solid #DFE7EC; border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; font-family: var(--font-body); background: var(--bg); color: var(--text); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); }
input::placeholder, textarea::placeholder { color: #8A93A0; }
label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 8px; }

.hover-card { transition: transform .3s ease, box-shadow .3s ease; box-shadow: var(--shadow-card); }
.hover-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

/* Navy-filled, white-icon, thin gold ring — the site's default "premium
   layered" icon treatment recommended for card icons (What Sets Us Apart,
   Industries We Serve, mission/etc.). Contextual variants below override it
   for icons that sit on their own dark/gold surfaces. */
/* Icons sit inside a plain, unfilled outline circle (or directly on the
   background) — never a colored/filled chip. Color follows context: navy on
   light backgrounds, white/sky on dark ones. */
.icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: transparent; color: var(--green-2); border: 1px solid var(--border); flex-shrink: 0; }
.icon-badge.is-inverted { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.icon-badge.is-gold { background: transparent; border-color: var(--gold); color: var(--gold); }
.stat-card .icon-badge { background: transparent; border-color: var(--border); color: var(--green-2); }

/* Feature strip: small icon + label items separated by thin vertical rules,
   used directly under the hero and anywhere a compact capability list is
   shown — deliberately not styled as colorful cards. */
.feature-strip { display: flex; background: #fff; }
.feature-item { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 38px 18px; position: relative; }
.feature-item + .feature-item::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--border); }
.feature-item .icon-badge { width: 64px; height: 64px; background: transparent; border: 1px solid var(--border); color: var(--gold); }
.feature-item span { font-family: var(--font-heading); font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: var(--charcoal); line-height: 1.4; font-weight: 500; }

/* Arrow link used on product / industry cards in place of a full button */
.arrow-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }
.arrow-link svg { transition: transform .25s ease; }
a:hover .arrow-link svg, .arrow-link:hover svg { transform: translateX(4px); }

/* Industry card: icon + label as an overlay bar on the image itself */
.industry-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; }
.industry-card .industry-card-img { height: 190px; overflow: hidden; background: #eee; }
.industry-card .industry-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.industry-card:hover .industry-card-img img { transform: scale(1.06); }
.industry-card-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.94); backdrop-filter: blur(2px); padding: 14px 16px; }
.industry-card-bar .icon-badge { width: 36px; height: 36px; background: transparent; color: var(--green-2); }
.industry-card-bar span { font-family: var(--font-heading); font-size: 13px; letter-spacing: .01em; color: var(--charcoal); font-weight: 500; }

/* Manufacturing process preview: photo + small icon caption */
.process-photo { border-radius: var(--radius); overflow: hidden; height: 150px; background: #eee; margin-bottom: 12px; }
.process-photo img { width: 100%; height: 100%; object-fit: cover; }
.process-caption { display: flex; align-items: center; gap: 8px; }
.process-caption .icon-badge { width: 26px; height: 26px; background: transparent; color: var(--gold); }
.process-caption span { font-family: var(--font-heading); font-size: 12px; letter-spacing: .01em; color: var(--charcoal); font-weight: 600; }

/* Gallery preview text tile, styled to match the surrounding photo grid */
.gallery-text-tile { background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: var(--radius); padding: 16px; }
.gallery-text-tile span { font-family: var(--font-heading); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; }

/* Hero background video — looping muted clip behind the hero content, with
   a navy gradient overlay (darker on the left where the text sits) for
   legibility, matching the reference site's video-hero treatment. */
.hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-bg-overlay { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(2,27,44,.72) 0%, rgba(2,27,44,.58) 45%, rgba(2,27,44,.78) 100%); }

/* Small bordered chevron centered at the bottom of the hero, inviting the
   visitor to scroll — matches the reference site's hero affordance. */
.hero-scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; color: #fff; animation: hero-scroll-cue-bounce 2.2s ease-in-out infinite; }
.hero-scroll-cue:hover { border-color: rgba(255,255,255,.8); }

@keyframes hero-scroll-cue-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-video { display: none; }
  .hero-scroll-cue { animation: none; }
}
/* Clean, straight-edged framed image — never tilted/skewed. A subtle
   fiber-texture pattern sits behind it via .hero-decor for depth. */
.hero-image-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.hero-overlay-text { position: absolute; top: 22px; right: 22px; text-align: right; color: #fff; font-family: var(--font-heading); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.6; text-shadow: 0 2px 10px rgba(0,0,0,.35); }

.script-note { font-family: var(--font-script); font-size: 26px; color: var(--gold); line-height: 1.25; transform: rotate(-3deg); display: inline-block; }

/* Small floating info badge over a hero/about image */
.float-badge { position: absolute; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow-card); }
.float-badge.is-dark { background: var(--green); border-color: var(--green); color: #fff; }
.float-badge .icon-badge { width: 36px; height: 36px; }

.page-hero { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 40px 0; }
.page-hero .eyebrow-trail { font-family: var(--font-heading); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.page-hero .eyebrow-trail a { color: var(--text-muted); }
.page-hero h1 { font-size: clamp(26px, 5vw, 34px); margin: 10px 0 0 0; color: var(--charcoal); }

.stat-number { font-family: var(--font-display); font-weight: 700; font-size: 36px; color: var(--gold); line-height: 1; }
.stat-label { font-size: 12.5px; letter-spacing: .04em; color: var(--text-muted); margin-top: 8px; }
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .6s ease; }
.img-zoom:hover img { transform: scale(1.08); }

/* Product detail: description spans the full row when there are no
   Additional Specifications alongside it, in two flowing columns so it
   doesn't sit as one tall column of text in a full-width row. */
.description-columns { columns: 2; column-gap: 56px; }
@media (max-width: 860px) {
  .description-columns { columns: 1; }
}

/* Product detail main image: cursor-side zoom preview, desktop/mouse only.
   No lens overlay ever sits on the source image — the preview is a single
   fixed-position panel that follows the cursor, positioned/sized entirely
   by JS (see initProductImageZoom in site.js). Hidden outright on touch
   devices via the (hover:none) query as a belt-and-braces guard alongside
   the JS's own capability check. */
.product-zoom-wrap { position: relative; }
.zoom-result { display: none; position: fixed; width: 260px; height: 260px; border: 1px solid var(--border); border-radius: var(--radius); background-color: #fff; background-repeat: no-repeat; box-shadow: var(--shadow-hover); z-index: 200; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.zoom-result.is-visible { display: block; opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .zoom-result { display: none !important; }
}
@media (max-width: 460px) {
  .zoom-result { width: min(240px, calc(100vw - 32px)); height: min(240px, calc(100vw - 32px)); }
}

.reveal, .reveal-left, .reveal-right { opacity: 0; transition: opacity .8s ease, transform .8s ease; }
.reveal { transform: translateY(28px); }
.reveal-left { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }
.reveal.is-visible, .reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: translate(0,0); }

.marquee-track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }

.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; animation: kenburns 16s ease-in-out infinite alternate; }
.hero-slide.is-active { opacity: 1; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.spec-table td { padding: 11px 0; border-bottom: 1px solid var(--border); }
.spec-table td:first-child { color: var(--text-muted); width: 42%; font-family: var(--font-heading); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.spec-table td:last-child { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

.tag-chip { display: inline-flex; align-items: center; font-size: 12px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); background: #fff; }
.tag-chip:hover { border-color: var(--gold); color: var(--green); }

.badge-avail { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-family: var(--font-heading); letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); }
.badge-avail.in_stock { background: #e5f1e9; color: #062B41; }
.badge-avail.made_to_order { background: #E3F5FC; color: #0090C7; }
.badge-avail.on_request { background: #E3E8EC; color: var(--text-muted); }

#back-to-top { position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%; background: var(--green); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; z-index: 60; box-shadow: 0 10px 24px rgba(2,27,44,.28); }
#back-to-top.is-shown { opacity: 1; pointer-events: auto; }
#back-to-top:hover { transform: translateY(-4px); }

/* Floating WhatsApp / Call buttons, shown only when the admin has set the
   corresponding contact detail in Settings. Sit on the opposite side from
   back-to-top so they never overlap it. */
.floating-actions { position: fixed; right: 20px; bottom: 92px; z-index: 60; display: flex; flex-direction: column; gap: 12px; }
.floating-action-btn { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 10px 24px rgba(6,43,65,.22); transition: transform .25s ease, box-shadow .25s ease; }
.floating-action-btn:hover { transform: translateY(-4px) scale(1.05); }
.floating-action-btn.is-whatsapp { background: #25d366; }
.floating-action-btn.is-call { background: var(--green-2); }
@media (max-width: 1365px) {
  /* Cluster with the sticky Call/Quote bar at the very bottom instead of
     floating mid-screen, where it would otherwise drift over card photos,
     form fields, or footer text as the page scrolls underneath it. */
  .floating-actions { bottom: calc(68px + 14px); right: 14px; gap: 10px; }
  .floating-action-btn { width: 44px; height: 44px; }
}

.pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 40px; list-style: none; padding-left: 0; }
.pagination a, .pagination span { display: inline-flex; padding: 8px 14px; border: 1px solid var(--border); font-size: 13px; border-radius: 3px; color: var(--text); }
.pagination .active span { background: var(--green); color: #fff; border-color: var(--green); }
.pagination a:hover { border-color: var(--gold); color: var(--green); }
.pagination li.disabled span { opacity: .4; }

.status-banner { background: #e5f1e9; border: 1px solid #1f7a4c; color: #1f7a4c; padding: 16px 20px; border-radius: 4px; margin-bottom: 24px; font-size: 14px; }
.error-banner { background: #fbe9e7; border: 1px solid #b3261e; color: #b3261e; padding: 16px 20px; border-radius: 4px; margin-bottom: 24px; font-size: 14px; }

.mobile-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.mobile-nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; }

.header-search-toggle { background: none; border: none; cursor: pointer; padding: 8px; color: var(--charcoal); display: flex; }
.header-search-toggle:hover { color: var(--green); }
#header-search-panel { display: none; background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 18px 0; }
#header-search-panel.is-open { display: block; }
#header-search-panel form { display: flex; gap: 10px; max-width: 480px; }
#header-search-panel input { background: #fff; }
#header-search-panel button { width: auto; padding: 12px 16px; background: var(--green); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; }
#mobile-nav { display: none; }
#mobile-nav-close { display: none; }

/* Sticky header: shrinks slightly and gains a stronger shadow once the page
   has scrolled, giving the "glass" feel called for in the brief. */
.site-header { transition: box-shadow .3s ease, padding .3s ease; }
.site-header .site-header-inner { transition: padding .3s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(6,43,65,.10); }
.site-header.is-scrolled .site-header-inner { padding-top: 9px; padding-bottom: 9px; }
.site-header.is-scrolled .site-logo-badge { width: 38px; height: 38px; }

/* Stat cards: elevated, icon-led, with a count-up number (see site.js) */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; transition: transform .3s ease, box-shadow .3s ease; }
.stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.stat-card .icon-badge { width: 46px; height: 46px; }
.stat-card .stat-number { font-size: 34px; }
.stat-card .stat-label { margin-top: 0; font-size: 13px; }

/* FAQ accordion */
/* Plain accordion — thin dividers between rows, no card box per item,
   sitting directly on the section background (matches the reference). */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; background: none; border: none; cursor: pointer; padding: 22px 4px; font-family: var(--font-heading); font-size: 15.5px; font-weight: 600; color: var(--charcoal); }
.faq-question .faq-caret { flex-shrink: 0; transition: transform .3s ease; color: var(--gold); }
.faq-item.is-open .faq-question .faq-caret { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-answer-inner { padding: 0 4px 22px 4px; font-size: 14.5px; line-height: 1.75; color: var(--text-muted); }

/* Trust badges / certification row — honest placeholder state until the
   client supplies real certificates, matching the Quality & Certifications
   page's existing "documents on request" pattern rather than inventing logos. */
.trust-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.trust-badge { background: #fff; border: 1px dashed var(--border); border-radius: var(--radius); padding: 26px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--text-muted); }
.trust-badge .icon-badge { background: transparent; color: var(--text-muted); }
.trust-badge span { font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; font-family: var(--font-heading); }

/* Testimonials — same "hidden until real content exists" rule as stats */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.testimonial-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; }
.testimonial-card .quote-mark { color: var(--gold); }
.testimonial-card p { font-size: 14.5px; line-height: 1.8; color: var(--text); margin: 0; }
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testimonial-author-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; color: var(--green); font-family: var(--font-heading); font-weight: 700; flex-shrink: 0; }
.testimonial-author strong { display: block; font-size: 13.5px; color: var(--charcoal); }
.testimonial-author small { font-size: 12px; color: var(--text-muted); }

/* Logo / certification ticker: smooth infinite scroll with faded edges,
   pauses on hover — used only for a client-logo or badge strip, never for
   headline copy. */
.ticker-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-viewport .marquee-track { align-items: center; gap: 64px; padding: 6px 32px; }
.ticker-viewport .marquee-track > * { flex-shrink: 0; opacity: .55; filter: grayscale(1); transition: opacity .25s ease, filter .25s ease; }
.ticker-viewport .marquee-track > *:hover { opacity: 1; filter: grayscale(0); }

/* Manufacturing process timeline: connected step-flow with a progress line
   that fills in as the section scrolls into view. */
.process-timeline { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 0; padding-top: 26px; }
.process-timeline::before { content: ""; position: absolute; top: 0; left: 6%; right: 6%; height: 2px; background: var(--border); }
.process-timeline .timeline-fill { position: absolute; top: 0; left: 6%; height: 2px; width: 0; background: var(--gold); transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
.timeline-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 0 8px; }
.timeline-step .timeline-dot { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--green); font-family: var(--font-heading); font-weight: 700; font-size: 12px; flex-shrink: 0; z-index: 1; transition: border-color .3s ease, background .3s ease, color .3s ease; }
.timeline-step.is-visible .timeline-dot { border-color: var(--gold); background: var(--green); color: #fff; }
.timeline-step span { font-family: var(--font-heading); font-size: 12.5px; font-weight: 500; color: var(--charcoal); line-height: 1.4; }

/* Empty-state card: replaces bare "0 Product(s)" / blank listings */
.empty-state { background: #fff; border: 1px dashed var(--border); border-radius: var(--radius); padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Sticky mobile "Request a Quote" bar */
.mobile-sticky-cta { display: none; }
@media (max-width: 1365px) {
  .mobile-sticky-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: #fff; border-top: 1px solid var(--border); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) 16px; box-shadow: 0 -8px 24px rgba(6,43,65,.08); }
  .mobile-sticky-cta a { flex: 1; justify-content: center; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* Mobile nav drawer: slides in from the right with a backdrop, instead of a
   plain dropdown list. */
#nav-drawer-overlay { position: fixed; inset: 0; background: rgba(1,20,31,.45); opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 69; }
#nav-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
.mobile-nav-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; padding: 10px 0; font: inherit; color: inherit; text-align: left; }
.mobile-nav-group-toggle svg { transition: transform .25s ease; flex-shrink: 0; }
.mobile-nav-group.is-open .mobile-nav-group-toggle svg { transform: rotate(180deg); }
.mobile-nav-group-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.mobile-nav-group-panel a { display: block; padding: 8px 0 8px 14px; font-size: 12.5px; border-bottom: none !important; color: var(--text-muted) !important; text-transform: none !important; }

/* The desktop nav needs real breathing room to fit its full label set
   without wrapping or overflowing ("Contact Us" getting squeezed, the
   drawer close button rendering unstyled in the flow). Cut over to the
   hamburger well before that point — comfortably covers 1024/1280/1366
   laptop widths — rather than a tight, easy-to-regress threshold. */
@media (max-width: 1365px) {
  .desktop-nav { display: none !important; }
  .header-search-toggle { display: none; }
  .btn-gold { padding: 11px 16px; font-size: 11.5px; }
  .mobile-nav-toggle { display: block; }
  #mobile-nav {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 86vw);
    display: flex; flex-direction: column; gap: 2px; background: #fff;
    padding: 100px 26px 24px 26px; z-index: 70; overflow-y: auto;
    transform: translateX(100%); transition: transform .35s ease;
    box-shadow: -20px 0 50px rgba(1,20,31,.18);
  }
  #mobile-nav.is-open { transform: translateX(0); }
  #mobile-nav a { padding: 12px 0; border-bottom: 1px solid var(--border); }
  /* Nested inside #mobile-nav (which is itself the containing block for
     position:fixed/absolute descendants), so this always sits at the
     drawer's own top-right corner and slides on/off screen with it — no
     separate fixed-viewport math needed to track the drawer's width. */
  #mobile-nav-close { position: absolute; top: 20px; right: 20px; z-index: 1; background: #fff; border: 1px solid var(--border); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
}

@media (max-width: 860px) {
  .wrap { padding: 0 20px; }
  .grid-2, .grid-3, .grid-4, .grid-5, .stat-grid, .trust-row { grid-template-columns: minmax(0,1fr) !important; }
  .testimonial-grid { grid-template-columns: minmax(0,1fr) !important; }
  .top-bar { display: none !important; }
  .feature-strip > div { flex-wrap: wrap; }
  .feature-item { flex: 1 1 50%; }
  .feature-item + .feature-item::before { display: none; }
  .float-badge { position: static !important; margin-top: 16px; max-width: none !important; }
  .stat-grid.hero-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .process-timeline { grid-template-columns: repeat(4, minmax(0,1fr)) !important; row-gap: 34px; }
  .process-timeline::before, .process-timeline .timeline-fill { display: none; }
}

@media (max-width: 420px) {
  .hero-stats { flex-wrap: wrap; row-gap: 18px; }
  .hero-stats > div { flex: 1 1 40%; }
  .hero-stat-item { border-left: none !important; padding-left: 0 !important; }
  .hero-stats .stat-label { white-space: normal !important; }
  .process-timeline { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width: 560px) {
  .site-logo-text small { display: none; }
  /* The header CTA becomes redundant with the sticky bottom bar (and the
     drawer's own full-width CTA) once space gets tight — drop it here
     instead of letting it force horizontal overflow. */
  .header-cta-btn { display: none; }
}

@media (max-width: 480px) {
  .btn-gold { padding: 9px 12px; font-size: 10px; }
}