/* =========================================================================
   PAVER CRAFT — GLOBAL STYLESHEET
   Sections in this file:
     1. Reset & variables
     2. Base / utilities (container, buttons, text-accent, section headers)
     3. Preloader
     4. Navbar (topbar + main nav + dropdown + mobile toggle)
     5. Hero section (bg image + text + 3D model viewport)
     6. Footer
     7. Spec strip
     8. About Us
     9. Products ("Our Range")
     10. Manufacturing process
     11. Applications
     12. Trusted By Thousands (stats + testimonial carousel + CTA)
     13. Responsive breakpoints
   ========================================================================= */

/* ---------- 1. Reset & variables ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Brand palette */
    --color-primary: #C62828;
    --color-primary-dark: #B71C1C;
    --color-secondary: #D32F2F;
    --color-olive: #E57373;
    --color-grey-green: #D9D9D9;
    --color-dark: #2F2F2F;
    --color-dark-soft: #3a3a3a;
    --color-text: #333333;
    --color-text-light: #6b6b6b;
    --color-bg-light: #F5F5F5;
    --color-border: #e0e0e0;
    --font-main: 'Poppins', sans-serif;
    --font-display: 'Fraunces', serif;
    --container-width: 1200px;
    --transition: 0.3s ease;
    --navbar-height: 124px; /* topbar (40px) + main nav (84px) — used to offset the fixed header */

    /* Used only by the redesigned Process / Trusted / CTA panels below — a
       deep red-black ink tone so those surfaces read as rich rather than
       flat/generic black. Kept separate from --color-dark (which the hero
       and global type still use) by design. */
    --color-ink: #1a1414;
    --color-ink-soft: #241818;
    --color-gold: #E53935;

    /* Shared radius / shadow / easing tokens — new component work should
       reference these instead of hardcoding one-off values. */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 4px 14px rgba(30, 30, 30, 0.06);
    --shadow-md: 0 12px 32px rgba(30, 30, 30, 0.10);
    --shadow-lg: 0 24px 60px rgba(20, 20, 20, 0.18);
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Lenis drives smooth scrolling in JS; native smooth-behavior would fight it */
html { scroll-behavior: auto; }

/* Hide the native scrollbar — Lenis already drives scroll position, so the
   default browser track/thumb is just visual clutter on top of it. Scrolling
   itself (wheel, trackpad, drag) still works, only the bar is invisible. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body {
    font-family: var(--font-main);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
    background: #fff;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ---------- 2. Base / utilities ---------- */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

.text-accent { color: var(--color-primary); }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 50px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.btn--primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-2px);
}

.btn--outline {
    background: transparent;
    color: var(--color-dark);
    border-color: var(--color-dark);
}
.btn--outline:hover {
    background: var(--color-dark);
    color: #fff;
    transform: translateY(-2px);
}

/* Reusable eyebrow + heading pattern used by every section below the hero */
.section-head { max-width: 620px; }

.section-head__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 14px;
}
.section-head__eyebrow span {
    width: 34px;
    height: 2px;
    background: var(--color-primary);
}

.section-head__title {
    font-size: 36px;
    font-weight: 800;
    color: var(--color-dark);
    margin-bottom: 12px;
}
.section-head--light .section-head__title { color: #fff; }

.section-head__desc {
    font-size: 15px;
    color: var(--color-text-light);
}
.section-head--light .section-head__desc { color: rgba(255, 255, 255, 0.65); }

.section-head--center { max-width: 640px; margin: 0 auto; text-align: center; }
.section-head--center .section-head__eyebrow { justify-content: center; }

/* ---------- 3. Preloader ---------- */
/* Set synchronously by an inline script in includes/loader.php — the very
   first thing the parser runs after the preloader markup — so scrolling is
   locked and nothing behind it can shift before any external script (GSAP,
   Three.js, Lenis) has even started downloading. Removed by hidePreloader(). */
html.has-preloader {
    overflow: hidden;
}

#preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #140d0d 0%, #1e1e1e 45%, #241010 100%);
    /* Fully covers the viewport until hidePreloader() animates this down to
       circle(0%) — the page is revealed through a shrinking aperture rather
       than a flat fade. 150% comfortably overshoots the corners at any
       viewport ratio. */
    clip-path: circle(150% at 50% 50%);
    /* The rest of the page (already fully built out behind this overlay) has
       no bearing on what's painted here — containment stops the browser from
       weighing that whole subtree on every frame of the loader's animation. */
    contain: layout style paint;
    will-change: clip-path;
}

#preloader.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

/* Small meta credit lines pinned to opposite bottom corners — an editorial-
   masthead touch (like a magazine cover credit line) that keeps the huge
   central wordmark from reading as an empty screen with text floating in
   the middle. Deliberately quiet: low opacity, small size, wide tracking. */
.preloader__meta {
    position: absolute;
    bottom: 40px;
    z-index: 1;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    opacity: 0;
    will-change: opacity;
}
.preloader__meta--left { left: 40px; }
.preloader__meta--right { right: 40px; }

.preloader__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Brand mark — the hexagon icon (Title-logo.png), shown full and
   undistorted at the top of the stage, above the rule and wordmark. The
   "PAVER CRAFT" wordmark itself is redrawn as real type just below it,
   so the icon only needs to carry the mark, not any baked-in text. */
.preloader__logo {
    display: block;
    width: 84px;
    height: 84px;
    margin-bottom: 24px;
    filter: drop-shadow(0 0 24px rgba(194, 40, 40, 0.35));
    /* Pre-entrance resting state — see .preloader__line note below */
    opacity: 0;
    transform: translateY(-10px) scale(0.85);
    will-change: transform, opacity;
}
.preloader__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Thin rule that draws itself open (scaleX 0 -> 1) before the wordmark
   reveals — the first thing the eye catches, establishing the loader is
   already in motion the instant it paints. */
.preloader__rule {
    width: min(240px, 40vw);
    height: 1px;
    background: var(--color-primary);
    margin-bottom: 28px;
    transform: scaleX(0);
    transform-origin: 50% 50%;
    will-change: transform;
}

/* Huge editorial wordmark — the loader's main visual. Sized in vw so it
   reads as genuinely large on any screen (clamped so it never blows past a
   comfortable measure on very wide monitors, or gets uncomfortably tight
   below ~360px). Each line lives inside an overflow-hidden mask so the text
   itself can rise up from behind it — the "curtain" reveal — instead of
   just fading in place. */
.preloader__word {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: -1px;
    text-align: center;
    color: #fff;
    margin: 0;
}

.preloader__line-mask {
    display: block;
    overflow: hidden;
}

.preloader__line {
    display: block;
    font-size: clamp(38px, 8vw, 110px);
    /* Pre-entrance resting state, baked into CSS (not applied by JS) so it's
       already in effect at first paint — see initPreloaderAnimations() in
       main.js, which only ever animates FROM this state, never sets it. */
    transform: translateY(105%);
    will-change: transform;
}

/* Second line ("Craft") echoes the italic-accent treatment used on
   .text-accent throughout the rest of the site (see .hero__title
   .text-accent) so the loader reads as the same brand voice, not a
   one-off. */
.preloader__line-mask:nth-child(2) .preloader__line {
    font-style: italic;
    font-weight: 600;
    color: var(--color-primary);
}

.preloader__tagline {
    margin-top: 26px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    /* Pre-entrance resting state — see .preloader__line note above */
    opacity: 0;
    transform: translateY(10px);
    will-change: transform, opacity;
}

/* Fallback for the rare case GSAP fails to load entirely (e.g. CDN outage) —
   initPreloaderAnimations() adds this class so the mark is revealed
   statically instead of staying stuck invisible with no animation to bring
   it in. */
#preloader.preloader--static .preloader__logo,
#preloader.preloader--static .preloader__rule,
#preloader.preloader--static .preloader__line,
#preloader.preloader--static .preloader__tagline,
#preloader.preloader--static .preloader__meta {
    opacity: 1;
    transform: none;
    filter: none;
}

/* ---------- 4. Navbar ---------- */
/* Fixed so it stays visible the whole time the user scrolls (see .hero
   and .page-content below for the sticky-hero / cover-scroll effect
   this sits above). */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 500;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}

/* Top utility bar */
.topbar {
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
}

.topbar__welcome { opacity: 0.95; }

.topbar__right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.topbar__link i { margin-right: 6px; }
.topbar__link:hover { opacity: 0.8; }

.topbar__social {
    display: flex;
    gap: 14px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* Main nav */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 84px;
}

.navbar__logo {
    display: flex;
    align-items: center;
}
.navbar__logo-img {
    height: 52px;
    width: auto;
    display: block;
}

/* Footer sits on a dark surface — the logo keeps its own full colour
   artwork, so it needs a light plate under it to stay legible instead
   of a transparent PNG dissolving into the dark ink background. */
.footer__logo {
    display: inline-flex;
    background: #fff;
    padding: 14px 20px;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}
.footer__logo .navbar__logo-img { height: 60px; }

.navbar__menu {
    display: flex;
    align-items: center;
    gap: 34px;
}

.navbar__menu > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--color-dark);
    padding: 30px 0;
    transition: color var(--transition);
}

.navbar__menu > li > a.active,
.navbar__menu > li > a:hover {
    color: var(--color-primary);
}

.navbar__menu .has-dropdown { position: relative; }

.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    background: #fff;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
    border-top: 2px solid var(--color-primary);
    border-radius: 0 0 6px 6px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all var(--transition);
}

.has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown li a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    color: var(--color-text);
}
.dropdown li a:hover {
    background: var(--color-bg-light);
    color: var(--color-primary);
}

.navbar__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}
.navbar__toggle span {
    width: 24px;
    height: 2px;
    background: var(--color-dark);
    transition: all var(--transition);
}

/* ---------- 5. Hero section ---------- */
/* Sticky-pinned directly under the fixed navbar: margin-top makes room
   for the navbar it no longer occupies in flow, and "top" is where it
   parks as the page scrolls. .page-content (below) sits at a higher
   z-index with an opaque background, so it slides up and covers the
   hero rather than the hero scrolling away. */
.hero {
    position: sticky;
    top: var(--navbar-height);
    z-index: 1;
    margin-top: var(--navbar-height);
    overflow: hidden;
    background: var(--color-bg-light);
    padding: 20px 0;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}

/* Full-bleed, not the boxed 1200px .container — on wide laptop/desktop
   screens a centered 1200px box left a huge, dead-looking margin on both
   sides (the hero background image runs edge-to-edge, so that margin just
   read as empty white space). This scales content padding with the
   viewport instead, so the hero actually uses the screen. */
.hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    min-height: 480px;
    gap: 20px;
    width: 100%;
    max-width: 1760px;
    margin: 0 auto;
    padding: 0 clamp(24px, 6vw, 100px);
}

/* Desktop hero is near full-viewport — spacious, premium first impression.
   Tablet/mobile reset to min-height: auto below (991px breakpoint), so
   this only affects desktop/laptop widths. calc() against navbar-height
   (not a flat 96vh) matters here: .hero is already pushed down by
   margin-top: navbar-height, so a flat 96vh double-counts that space and
   overshoots the viewport on typical laptop screen heights, pushing the
   trust strip below the fold. */
@media (min-width: 992px) {
    .hero__inner { min-height: calc(100vh - var(--navbar-height) - 40px); }
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 14px;
}
.hero__eyebrow span {
    width: 40px;
    height: 3px;
    background: var(--color-primary);
}

.hero__title {
    font-family: var(--font-display);
    font-size: 54px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.5px;
    color: var(--color-dark);
    margin-bottom: 10px;
}
.hero__title .text-accent {
    font-style: italic;
    font-weight: 600;
}

.hero__desc {
    font-size: 16px;
    color: var(--color-text-light);
    margin-bottom: 16px;
}

/* Four key selling points between the intro copy and the CTAs — icon,
   bold label, short note, laid out in one row (wraps to 2x2 on mobile). */
.hero__highlights {
    display: flex;
    gap: 28px;
    margin-bottom: 18px;
}

.hero__highlight {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.hero__highlight i {
    font-size: 20px;
    color: var(--color-primary);
    margin-bottom: 1px;
}

.hero__highlight strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-dark);
}

.hero__highlight span {
    font-size: 12.5px;
    color: var(--color-text-light);
}

.hero__actions {
    display: flex;
    gap: 16px;
}

/* Trust strip: avatar stack + star rating, replaces the old 3-icon
   highlight row with a more premium social-proof treatment. */
.hero__trust {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 20px;
}

.hero__trust-avatars {
    display: flex;
    flex-shrink: 0;
}

.hero__trust-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-left: -14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    background: var(--color-dark);
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.hero__trust-avatar:first-child { margin-left: 0; }
.hero__trust-avatar--accent { background: var(--color-primary); }
.hero__trust-avatar--more {
    background: #fff;
    color: var(--color-primary);
    border-color: var(--color-primary);
    font-size: 13px;
}

.hero__trust-stars {
    color: var(--color-gold);
    font-size: 13px;
    letter-spacing: 3px;
    margin-bottom: 5px;
}

.hero__trust-info p {
    font-size: 13.5px;
    color: var(--color-text-light);
}
.hero__trust-info strong { color: var(--color-dark); }

/* 3D model viewport */
.hero__model {
    position: relative;
    height: 100%;
}

.hero__canvas-wrap {
    width: 100%;
    height: 440px;
    cursor: grab;
}

.hero__canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Wraps every section from Features down to the Footer. Positioned
   above the sticky .hero (z-index) with an opaque background, so as
   the user scrolls it visually slides up and covers the pinned hero. */
.page-content {
    position: relative;
    z-index: 2;
    background: #fff;
}

/* ---------- 6. Footer ---------- */
/* Premium ink-gradient surface, matching the Process/Trusted/CTA panels
   elsewhere on the site, with a hairline gold-to-primary top seam so the
   footer reads as one deliberate "dark tier" rather than a generic black bar. */
.site-footer {
    position: relative;
    background: linear-gradient(155deg, var(--color-ink-soft) 0%, var(--color-ink) 75%);
    color: rgba(255, 255, 255, 0.65);
    overflow: hidden;
}
.site-footer::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-gold), var(--color-primary));
}
.site-footer::after {
    content: '';
    position: absolute;
    top: -160px;
    right: -160px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(185, 54, 46, 0.30) 0%, transparent 70%);
    pointer-events: none;
}

.footer__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 1.1fr 0.9fr;
    align-items: start;
    gap: 40px;
    padding: 70px 24px 50px;
}

.footer__tagline {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 14px 0 0;
}

.footer__brand p {
    font-size: 14px;
    margin: 18px 0 22px;
    max-width: 280px;
}

.footer__social {
    display: flex;
    gap: 12px;
}
.footer__social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    transition: all var(--transition);
}
.footer__social a:hover { background: var(--color-gold); color: var(--color-ink); }

.footer__col h4 {
    position: relative;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 24px;
    padding-bottom: 14px;
}
.footer__col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: var(--color-gold);
}

.footer__col ul li { margin-bottom: 12px; }
.footer__col ul li a { font-size: 14px; transition: color var(--transition); }
.footer__col ul li a:hover { color: var(--color-gold); }

.footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
}
.footer__contact li i { color: var(--color-gold); margin-top: 4px; }

/* Rotating paver-ring badge with a static "Contact Us" pill fixed in its
   transparent centre — the ring spins, the button doesn't. */
.footer__col--badge {
    display: flex;
    justify-content: center;
}

.footer__badge {
    position: relative;
    width: 230px;
    height: 230px;
}

.footer__badge-ring {
    width: 100%;
    height: 100%;
    animation: footer-spin 14s linear infinite;
}

.footer__badge-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.3;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.footer__badge-btn span { display: block; }
.footer__badge-btn:hover {
    background: var(--color-gold);
    color: var(--color-ink);
    transform: translate(-50%, -50%) scale(1.06);
}

@keyframes footer-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.footer__bottom {
    position: relative;
    z-index: 1;
    background: var(--color-ink);
    color: rgba(255, 255, 255, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    font-size: 13px;
}

.footer__legal { display: flex; gap: 10px; }
.footer__legal a:hover { color: var(--color-gold); }

/* ---------- 7. Spec strip ---------- */
/* Replaces the old Features strip + Trust marquee (two near-identical
   horizontal bands) with one continuous engineering-plate ticker.
   Reads like a stamped spec plate: thin Dark Outline rules top/bottom,
   green index numerals, tracked-out uppercase labels, Light Grey Green
   tick dividers. Base loop + scroll-velocity speed nudge is handled by
   initSpecStrip() in assets/js/main.js. */
.spec-strip {
    position: relative;
    padding: 24px 0;
    background: #fff;
    border-top: 1px solid var(--color-primary-dark);
    border-bottom: 1px solid var(--color-primary-dark);
    overflow: hidden;
}

.spec-strip__track { display: flex; width: max-content; }
.spec-strip__group { display: flex; align-items: center; flex-shrink: 0; }

.spec-strip__item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    white-space: nowrap;
    padding: 0 28px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-dark);
}

.spec-strip__item em {
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--color-primary);
}

.spec-strip__divider {
    width: 1px;
    height: 16px;
    background: var(--color-grey-green);
    flex-shrink: 0;
}

/* ---------- 8. Origin (About Us) ---------- */
/* Apple-style pinned moment: .origin__pin holds the viewport (pinned +
   scrubbed by initOrigin(), assets/js/main.js) while the headline
   reveals word-by-word and the photo settles from a cropped zoom to
   its true frame as the dark veil fades. Pin releases into a plain
   two-column editorial block below — no cards, no borders, just a
   huge ghost stat and copy. */
.origin { position: relative; background: #fff; }

.origin__pin {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: var(--color-dark);
}

.origin__bg { position: absolute; inset: 0; }
.origin__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.origin__veil {
    position: absolute;
    inset: 0;
    background: var(--color-dark);
}

.origin__stage {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
}

.origin__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 28px;
}
.origin__eyebrow span { width: 34px; height: 2px; background: #fff; }

.origin__heading {
    max-width: 980px;
    font-family: var(--font-display);
    font-size: clamp(38px, 6vw, 88px);
    font-weight: 600;
    font-style: italic;
    line-height: 1.12;
    letter-spacing: -1px;
    color: #fff;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
}

.origin__subtitle {
    max-width: 560px;
    margin-top: 24px;
    font-size: 16.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
}

/* Word wrappers injected by initOrigin(); the inner span carries the
   yPercent reveal so overflow:hidden on the outer clips it cleanly. */
.origin__word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.origin__word > span { display: inline-block; }

.origin__content { padding: 120px 0; }

/* ---------- Brand story (About Us content) ----------
   Replaces the old photo / prose / stat-badge block. Left: a layered,
   parallaxed product showcase (blueprint grid + watermark + glass panel +
   two pavers at different depths). Right: eyebrow, headline, a premium
   vertical timeline (one drawn hairline, no cards/medallions/icon-boxes)
   and a single sweep-fill CTA. Entrance, the timeline "draw" and the
   cursor parallax are all driven by initBrandStory() in main.js. */
.brand-story {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 90px;
    align-items: center;
}

/* -- Left: floating showcase -- */
.brand-story__media {
    position: relative;
    aspect-ratio: 1 / 1.05;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-story__watermark {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(44px, 8.5vw, 92px);
    line-height: 0.92;
    letter-spacing: 2px;
    color: var(--color-dark);
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
}

/* Faint technical/blueprint grid, masked to a soft vignette so it fades
   at the edges instead of ending in a hard rectangle. */
.brand-story__grid {
    position: absolute;
    inset: 6%;
    z-index: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(198, 40, 40, 0.09) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg, rgba(198, 40, 40, 0.09) 0 1px, transparent 1px 44px);
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 55%, transparent 80%);
    mask-image: radial-gradient(circle at 50% 45%, #000 55%, transparent 80%);
    pointer-events: none;
}

.brand-story__bracket {
    position: absolute;
    width: 46px;
    height: 46px;
    z-index: 2;
    pointer-events: none;
}
.brand-story__bracket--tl { top: 0; left: 0; border-top: 2px solid var(--color-primary); border-left: 2px solid var(--color-primary); }
.brand-story__bracket--br { bottom: 0; right: 0; border-bottom: 2px solid var(--color-primary); border-right: 2px solid var(--color-primary); }

.brand-story__particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.brand-story__particles i {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: var(--color-primary);
    font-style: normal;
}
.brand-story__particles i:nth-child(1) { top: 14%; left: 20%; width: 6px; height: 6px; opacity: 0.35; }
.brand-story__particles i:nth-child(2) { top: 32%; right: 12%; width: 4px; height: 4px; opacity: 0.45; }
.brand-story__particles i:nth-child(3) { bottom: 20%; left: 10%; width: 8px; height: 8px; opacity: 0.2; }
.brand-story__particles i:nth-child(4) { bottom: 10%; right: 24%; width: 5px; height: 5px; opacity: 0.35; }

.brand-story__glass {
    position: absolute;
    inset: 9% 13%;
    z-index: 1;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: var(--shadow-lg);
}

.brand-story__figure { position: relative; z-index: 2; }
.brand-story__figure img {
    display: block;
    width: 100%;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.18));
}
.brand-story__figure--main { width: 60%; }
.brand-story__figure--accent {
    position: absolute;
    right: 2%;
    bottom: 8%;
    width: 32%;
    opacity: 0.94;
}
.brand-story__figure--accent img { filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.14)); }

/* Idle float lives on this inner wrapper (plain CSS animation) so it never
   fights the cursor-parallax GSAP tween, which targets the outer
   .brand-story__figure instead — two different elements, no shared
   property to fight over. */
.brand-story__figure-float { animation: brandFloat 4.6s ease-in-out infinite; }
.brand-story__figure--accent .brand-story__figure-float { animation-duration: 3.8s; animation-delay: 0.3s; }
@keyframes brandFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
    .brand-story__figure-float { animation: none; }
}

.brand-story__tag {
    position: absolute;
    left: 2%;
    bottom: -8px;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color-text-light);
}

/* -- Right: copy + timeline -- */
.brand-story__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 20px;
}
.brand-story__eyebrow span { width: 34px; height: 2px; background: var(--color-primary); }

.brand-story__heading {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 700;
    line-height: 1.18;
    color: var(--color-dark);
    margin-bottom: 20px;
}
.brand-story__heading .text-accent { font-style: italic; font-weight: 600; }

.brand-story__desc {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-light);
    max-width: 520px;
    margin-bottom: 44px;
}

/* Vertical timeline — one hairline that "draws" downward on scroll
   (initBrandStory()), small dot markers, no cards/medallions/boxes. */
.brand-story__timeline {
    position: relative;
    margin-bottom: 44px;
    padding-left: 28px;
}
.brand-story__line {
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(to bottom, var(--color-primary), var(--color-border) 75%);
    transform: scaleY(0);
    transform-origin: top;
}
.brand-story__item { position: relative; padding-bottom: 30px; }
.brand-story__item:last-child { padding-bottom: 0; }
.brand-story__marker {
    position: absolute;
    left: -28px;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 4px #fff;
}
.brand-story__item h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 6px;
}
.brand-story__item p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-text-light);
    max-width: 460px;
}

/* Premium CTA — dark pill that fills red on hover (sweep, not a flat
   background-color swap), with the arrow sliding out ahead of it. */
.brand-story__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    background: var(--color-dark);
    border-radius: 50px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.4s var(--ease-premium);
}
.brand-story__cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease-premium);
}
.brand-story__cta i { transition: transform 0.4s var(--ease-premium); }
.brand-story__cta:hover { box-shadow: 0 16px 36px rgba(198, 40, 40, 0.32); }
.brand-story__cta:hover::before { transform: scaleX(1); }
.brand-story__cta:hover i { transform: translateX(6px); }

/* ---------- 9. Products ("Our Range") ---------- */
.products {
    padding: 100px 0;
    background: var(--color-bg-light);
}

.products__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.products__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 40px;
    --procard-primary: #B9362E;
    --procard-primary-dark: #9C2C25;
    --procard-text: #1E1E1E;
    --procard-secondary: #666666;
    --procard-bg: #FFFFFF;
    --procard-bg-hover: #FAFAFA;
    --procard-border: #EAEAEA;
    --procard-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Premium product category card ---------- */
.procard {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px;
    background: var(--procard-bg);
    border: 1px solid var(--procard-border);
    border-radius: 26px;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.6s var(--procard-ease), box-shadow 0.6s var(--procard-ease),
                border-color 0.6s var(--procard-ease), background 0.6s var(--procard-ease);
}

/* Animated border glow — a soft ring that fades in around the card on hover */
.procard::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 1px var(--procard-primary), 0 0 40px rgba(185, 54, 46, 0.14);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

/* Corner accent — soft folded triangle, opposite the badge */
.procard__corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, transparent 50%, rgba(185, 54, 46, 0.08) 50%);
    border-radius: 0 26px 0 0;
    pointer-events: none;
}

/* Shine sweep — soft diagonal glass-reflection band crossing the card on hover */
.procard__shine {
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-15deg);
    pointer-events: none;
    transition: left 0.9s ease;
}
.procard:hover .procard__shine { left: 130%; }

.procard:hover {
    background: linear-gradient(180deg, var(--procard-bg) 0%, var(--procard-bg-hover) 100%);
    border-color: var(--procard-primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.procard:hover::after { opacity: 1; }

.procard__badge {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    padding: 6px 14px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--procard-primary);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--procard-border);
    border-radius: 20px;
}

.procard__media {
    position: relative;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #fbfbfb 0%, #f2f2f2 100%);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 28px;
}

.procard__glow {
    position: absolute;
    width: 65%;
    height: 65%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(185, 54, 46, 0.12) 0%, rgba(185, 54, 46, 0) 72%);
    opacity: 0;
    transition: opacity 0.6s ease;
}
.procard:hover .procard__glow { opacity: 1; }

.procard__float {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: procardFloat 4.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .procard__float { animation: none; }
}

.procard__media img {
    position: relative;
    z-index: 1;
    max-width: 68%;
    max-height: 72%;
    object-fit: contain;
    filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.10));
    transition: transform 0.6s var(--procard-ease);
}
.procard:hover .procard__media img { transform: scale(1.08); }

@keyframes procardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.procard__body { flex: 1; }

.procard__title {
    font-family: var(--font-main);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--procard-text);
    margin-bottom: 8px;
    transition: color 0.6s var(--procard-ease);
}
.procard:hover .procard__title { color: var(--procard-primary); }

.procard__desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--procard-secondary);
    min-height: 43px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: transform 0.6s var(--procard-ease);
}
.procard:hover .procard__desc { transform: translateY(-2px); }

.procard__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--procard-border);
}

.procard__label {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--procard-text);
}

.procard__arrow {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--procard-border);
    color: var(--procard-primary);
    font-size: 13px;
    overflow: hidden;
    transition: width 0.6s var(--procard-ease), background 0.6s var(--procard-ease),
                border-color 0.6s var(--procard-ease), color 0.6s var(--procard-ease);
}
.procard__arrow i {
    position: relative;
    z-index: 1;
    transition: transform 0.6s var(--procard-ease);
}
.procard:hover .procard__arrow {
    width: 52px;
    background: var(--procard-primary);
    border-color: var(--procard-primary);
    color: #fff;
}
.procard:hover .procard__arrow i { transform: rotate(45deg); }

.procard__ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    transform: scale(0);
    pointer-events: none;
}

/* ---------- 10. Manufacturing process ---------- */
.process {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    background: linear-gradient(155deg, var(--color-ink-soft) 0%, var(--color-ink) 70%);
}

/* Subtle dot-grid texture so the gradient reads as a deliberate surface
   rather than a flat box. */
.process::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}

/* Ambient glow, echoes the preloader's motif so the dark sections feel
   like one consistent (and less flatly-black) family. */
.process::after {
    content: '';
    position: absolute;
    top: -160px;
    left: 50%;
    width: 560px;
    height: 560px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(198, 40, 40, 0.2) 0%, rgba(198, 40, 40, 0) 70%);
    filter: blur(20px);
    pointer-events: none;
}

.process .container { position: relative; z-index: 1; }

.process__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-top: 60px;
    position: relative;
}

/* Static dim track ... */
.process__grid::before {
    content: '';
    position: absolute;
    top: 34px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 0;
}
/* ...with a gradient fill drawn over it, and a glowing dot riding its
   leading edge, both tracked to scroll progress by initProcessAnimation(). */
.process__line-fill {
    position: absolute;
    top: 34px;
    left: 8%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-olive));
    z-index: 0;
}

.process__line-dot {
    position: absolute;
    top: 29px;
    left: 8%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-olive);
    box-shadow: 0 0 0 5px rgba(229, 115, 115, 0.25), 0 0 16px rgba(229, 115, 115, 0.65);
    z-index: 0;
    opacity: 0;
}

.process-step {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 34px 16px 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(6px);
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.process-step:hover {
    transform: translateY(-8px);
    border-color: rgba(229, 115, 115, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

.process-step__num {
    position: absolute;
    top: -8px;
    right: 12px;
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, 0.05);
    z-index: -1;
}

.process-step__icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 20px;
    box-shadow: 0 0 0 6px rgba(198, 40, 40, 0.15);
    transition: transform var(--transition);
}
.process-step:hover .process-step__icon { transform: scale(1.08); }

.process-step h4 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 8px;
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-step p {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
}

/* ---------- 11. Applications ---------- */
/* Interactive tab + panel showcase, replacing the old grid of flat
   gradient tiles (which carried no explanatory text — the "what is
   this?" complaint). initApplicationsTabs() in main.js drives tab
   switching, panel content swap and the auto-rotate timer. */
.applications {
    padding: 100px 0;
    background: #fff;
}

.apps {
    display: grid;
    grid-template-columns: 320px 1fr;
    margin-top: 50px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.apps__tabs {
    background: var(--color-bg-light);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.apps__tab {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 14px;
    padding: 16px 18px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-text-light);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.apps__tab i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: background var(--transition), color var(--transition);
}

.apps__tab.is-active {
    background: #fff;
    color: var(--color-dark);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.apps__tab.is-active i {
    background: var(--color-primary);
    color: #fff;
}

.apps__panel {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    color: #fff;
    overflow: hidden;
    padding: 44px 48px;
    transition: background 0.5s ease;
}

.apps__panel-body {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* Real product photo, right side — auto-rotates with the active tab */
.apps__panel-media {
    position: relative;
    flex-shrink: 0;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    backdrop-filter: blur(6px);
}
.apps__panel-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.35));
}

.apps__panel-tag {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 12px;
}

.apps__panel-body h3 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 12px;
}

.apps__panel-body p {
    font-size: 14.5px;
    line-height: 1.7;
    max-width: 460px;
    opacity: 0.9;
}

.apps__panel--1 { background: linear-gradient(135deg, #2b2b2b, #4a4a4a); }
.apps__panel--2 { background: linear-gradient(135deg, var(--color-primary), var(--color-olive)); }
.apps__panel--3 { background: linear-gradient(135deg, #1c1c1c, #3a3a3a); }
.apps__panel--4 { background: linear-gradient(135deg, var(--color-primary-dark), var(--color-secondary)); }
.apps__panel--5 { background: linear-gradient(135deg, #3a3a3a, var(--color-primary-dark)); }

/* ---------- 12. Why Choose Us (bento grid + testimonial carousel) ---------- */
/* Asymmetric "bento" grid instead of the old dark-stats / light-
   testimonial split: one large testimonial cell, a wide rating banner,
   and three small stat tiles, each in its own tone from the brand
   palette. Cells tilt gently toward the cursor via initBentoTilt() in
   assets/js/main.js. */
.trusted {
    padding: 100px 0;
    background: var(--color-bg-light);
}

.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(150px, auto);
    gap: 20px;
    margin-top: 50px;
}

.bento__cell {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 40px;
    will-change: transform;
}

.bento__cell--testimonial {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}
.bento__cell--testimonial .testimonial-card { padding: 0; }

.bento__cell--rating {
    grid-column: 4 / 7;
    grid-row: 1 / 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    color: #fff;
    background: linear-gradient(155deg, var(--color-ink-soft) 0%, var(--color-ink) 100%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.bento__cell--rating::before {
    content: '';
    position: absolute;
    top: -90px;
    right: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(198, 40, 40, 0.3) 0%, rgba(198, 40, 40, 0) 70%);
    filter: blur(10px);
    pointer-events: none;
}

.bento__rating-score { position: relative; }
.bento__stars {
    color: var(--color-gold);
    font-size: 18px;
    letter-spacing: 3px;
    margin-bottom: 8px;
}
.bento__rating-score p { font-size: 13.5px; color: rgba(255, 255, 255, 0.65); }
.bento__rating-score strong { color: #fff; font-size: 15px; }
.bento__cell--rating .btn { position: relative; }

.bento__cell--stat {
    grid-row: 2 / 3;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bento__cell--stat i { font-size: 20px; margin-bottom: 14px; opacity: 0.85; }
.bento__cell--stat .stat__number {
    display: block;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
}
.bento__cell--stat p { font-size: 13px; opacity: 0.8; }

.bento__cell--green { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); }
.bento__cell--olive { background: linear-gradient(135deg, var(--color-secondary), var(--color-olive)); }
.bento__cell--dark  { background: linear-gradient(135deg, #2b2b2b, #3a3a3a); }

/* Testimonial carousel: a single .testimonial-card whose content is
   cross-faded and swapped by initTestimonialCarousel() in main.js,
   plus a row of dot buttons for manual navigation. */

.testimonial-card i.fa-quote-left {
    font-size: 30px;
    color: rgba(198, 40, 40, 0.25);
    margin-bottom: 18px;
}

.testimonial-card p {
    font-size: 17px;
    color: var(--color-text);
    line-height: 1.7;
    margin-bottom: 26px;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.testimonial-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.testimonial-card__author strong { display: block; font-size: 14.5px; color: var(--color-dark); }
.testimonial-card__author span { font-size: 12.5px; color: var(--color-text-light); }

.testimonial-dots {
    display: flex;
    gap: 10px;
    margin-top: 26px;
}
.testimonial-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-border);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}
.testimonial-dots button.is-active {
    background: var(--color-primary);
    transform: scale(1.35);
}

/* ---------- 15. CTA banner ---------- */
.cta-banner {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: linear-gradient(155deg, var(--color-ink-soft) 0%, var(--color-ink) 100%);
}

.cta-banner__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    pointer-events: none;
}
.cta-banner__glow--1 {
    top: -120px;
    left: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(198, 40, 40, 0.3) 0%, rgba(198, 40, 40, 0) 70%);
}
.cta-banner__glow--2 {
    bottom: -140px;
    right: -100px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(229, 115, 115, 0.25) 0%, rgba(229, 115, 115, 0) 70%);
}

.cta-banner__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.cta-banner__text { max-width: 620px; }
.cta-banner__text .section-head__eyebrow { color: var(--color-olive); }
.cta-banner__text .section-head__eyebrow span { background: var(--color-olive); }

.cta-banner__text h2 {
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 16px;
}

.cta-banner__text p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
}

.cta-banner__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.btn--outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}
.btn--outline-light:hover {
    background: #fff;
    color: var(--color-dark);
    border-color: #fff;
    transform: translateY(-2px);
}

/* ---------- 15b. Sustainability (orbit diagram) ---------- */
.eco { padding: 100px 0; background: #fff; overflow: hidden; }

.eco__orbit {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1 / 1;
    margin: 74px auto 0;
}

.eco__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed var(--color-border);
}
.eco__ring--outer { animation: ecoSpin 60s linear infinite; }
.eco__ring--inner { inset: 60px; border-color: rgba(198, 40, 40, 0.25); animation: ecoSpin 46s linear infinite reverse; }
@keyframes ecoSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .eco__ring--outer, .eco__ring--inner { animation: none; }
}

.eco__core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--color-bg-light);
    box-shadow: var(--shadow-md);
}
.eco__core strong { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--color-primary); }
.eco__core span { font-size: 11px; font-weight: 600; letter-spacing: 0.3px; color: var(--color-text-light); margin-top: 4px; }

.eco__node { position: absolute; width: 220px; text-align: center; }
.eco__node i { font-size: 22px; color: var(--color-primary); margin-bottom: 10px; }
.eco__node h4 { font-size: 15px; font-weight: 700; color: var(--color-dark); margin-bottom: 6px; }
.eco__node p { font-size: 13px; line-height: 1.55; color: var(--color-text-light); }

.eco__node--top { top: -64px; left: 50%; transform: translateX(-50%); }
.eco__node--bottom { bottom: -64px; left: 50%; transform: translateX(-50%); }
.eco__node--left { top: 50%; left: -74px; transform: translateY(-50%); text-align: right; }
.eco__node--right { top: 50%; right: -74px; transform: translateY(-50%); text-align: left; }

@media (max-width: 899px) {
    .eco__orbit { max-width: 100%; aspect-ratio: auto; margin-top: 44px; }
    .eco__ring { display: none; }
    .eco__core { position: static; transform: none; margin: 0 auto 32px; }
    .eco__node { position: static; transform: none !important; width: 100%; text-align: center !important; margin-bottom: 28px; }
}

/* ---------- 15d. Nationwide Reach (hub-spoke network map) ----------
   SVG lines "draw" outward from the plant hub and nodes pulse in on
   scroll — see initNetworkMap() in main.js. City name labels are plain
   HTML overlays positioned by percentage to match the SVG viewBox
   coordinates (so they stay crisp at any size, unlike SVG <text>). */
.coverage { padding: 100px 0; background: #fff; overflow: hidden; }

.coverage__inner {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.coverage__stats { display: flex; gap: 36px; margin-top: 36px; }
.coverage__stats .stat__number {
    display: block;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
}
.coverage__stats p { font-size: 13px; color: var(--color-text-light); margin-top: 4px; }

.coverage__map { position: relative; width: 100%; }
.coverage__map svg { width: 100%; height: auto; display: block; overflow: visible; }

.coverage__line { stroke: var(--color-border); stroke-width: 1.5; }
.coverage__node { fill: #fff; stroke: var(--color-primary); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.coverage__hub { fill: var(--color-primary); }

.coverage__hub-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 26px);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-dark);
    text-align: center;
    line-height: 1.4;
    pointer-events: none;
    white-space: nowrap;
}
.coverage__city-label {
    position: absolute;
    transform: translate(-50%, -26px);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-light);
    white-space: nowrap;
    pointer-events: none;
}

.coverage__map-caption {
    display: none;
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-light);
}

@media (max-width: 899px) {
    .coverage__inner { grid-template-columns: 1fr; }
    .coverage__stats { flex-wrap: wrap; gap: 24px; }
}
@media (max-width: 600px) {
    .coverage__city-label, .coverage__hub-label { font-size: 10px; }
}
@media (max-width: 480px) {
    /* Text labels crowd and overlap once the map drops below ~330px wide
       (fixed px label widths vs. shrinking percentage-based gaps) — drop
       them and let the plain-language caption below carry the city list
       instead of fighting for space inside the diagram. */
    .coverage__city-label, .coverage__hub-label { display: none; }
    .coverage__map-caption { display: block; }
}

/* ---------- 15e. FAQ (split sticky accordion) ----------
   Height animation uses the CSS grid-template-rows 0fr -> 1fr trick, so
   no JS scrollHeight measuring is needed — initFaqAccordion() in main.js
   only toggles the .is-open class (one entry open at a time). */
.faq { padding: 100px 0; background: var(--color-bg-light); }

.faq__inner {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 70px;
    align-items: start;
}

.faq__head { position: sticky; top: calc(var(--navbar-height) + 40px); }
.faq__head .btn { margin-top: 24px; }

.faq__list { display: flex; flex-direction: column; }

.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item:first-child { border-top: 1px solid var(--color-border); }

.faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 4px;
    background: none;
    border: none;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
    cursor: pointer;
}
.faq__question i { flex-shrink: 0; color: var(--color-primary); transition: transform 0.35s var(--ease-premium); }
.faq__item.is-open .faq__question i { transform: rotate(45deg); }

.faq__body-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s var(--ease-premium);
}
.faq__item.is-open .faq__body-wrap { grid-template-rows: 1fr; }
.faq__body { overflow: hidden; }
.faq__body p { padding: 0 4px 24px; font-size: 14.5px; line-height: 1.7; color: var(--color-text-light); max-width: 560px; }

@media (max-width: 899px) {
    .faq__inner { grid-template-columns: 1fr; gap: 30px; }
    .faq__head { position: static; }
}

/* ---------- 16. Responsive ---------- */
@media (max-width: 991px) {
    .topbar__welcome { display: none; }

    .navbar__toggle { display: flex; }

    .navbar__menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        background: #fff;
        padding: 20px 24px;
        gap: 4px;
        box-shadow: 0 16px 24px rgba(0, 0, 0, 0.1);
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition);
    }
    .navbar__menu.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .navbar__menu > li { width: 100%; }
    .navbar__menu > li > a { padding: 12px 0; }
    .dropdown { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; padding-left: 12px; }
    .has-dropdown.is-open .dropdown { display: block; }

    .navbar__cta { display: none; }

    .hero__inner { grid-template-columns: 1fr; text-align: center; min-height: auto; padding-top: 40px; padding-bottom: 40px; }
    .hero__eyebrow { justify-content: center; }
    .hero__highlights { justify-content: center; flex-wrap: wrap; }
    .hero__highlight { align-items: center; }
    .hero__actions { justify-content: center; }
    .hero__trust { justify-content: center; }
    .hero__canvas-wrap { height: 320px; }

    .footer__grid { grid-template-columns: 1fr 1fr; }

    .brand-story { grid-template-columns: 1fr; gap: 50px; }
    .brand-story__media { max-width: 380px; margin: 0 auto; }

    .products__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }

    .process__grid { grid-template-columns: repeat(3, 1fr); row-gap: 44px; }
    .process__grid::before, .process__line-fill, .process__line-dot { display: none; }

    .apps { grid-template-columns: 1fr; }
    .apps__tabs { flex-direction: row; overflow-x: auto; }
    .apps__panel { min-height: 320px; flex-direction: column; text-align: center; padding: 36px 28px; }
    .apps__panel-media { width: 220px; height: 220px; }

    .bento { grid-template-columns: 1fr; }
    .bento__cell,
    .bento__cell--testimonial,
    .bento__cell--rating,
    .bento__cell--stat { grid-column: 1 / -1; grid-row: auto; }

    .cta-banner__inner { justify-content: center; text-align: center; }
    .cta-banner__actions { justify-content: center; }
}

@media (max-width: 600px) {
    /* Topbar's email + phone + social can't fit on one line at this width
       without wrapping mid-text; hide it (contact info is still in the
       footer, Contact page and nav CTA) and reclaim its height offset. */
    .topbar { display: none; }
    :root { --navbar-height: 84px; }

    /* Corner meta credits crowd the huge wordmark on narrow phones — drop
       them and let the wordmark + tagline carry the loader on their own. */
    .preloader__meta { display: none; }

    .hero__title { font-size: 38px; }
    .hero__highlights { gap: 20px 28px; }
    .hero__highlight { width: calc(50% - 14px); }
    .hero__actions { flex-direction: column; }
    .footer__grid { grid-template-columns: 1fr; padding: 50px 24px 30px; }
    .footer__bottom-inner { flex-direction: column; gap: 8px; height: auto; padding: 14px 0; }

    .section-head__title { font-size: 28px; }

    .origin__content { padding: 70px 0; }
    .brand-story__media { max-width: 260px; }
    .brand-story__watermark { font-size: 36px; }
    .brand-story__tag { display: none; }

    .products { padding: 70px 0; }
    .products__grid { grid-template-columns: 1fr; gap: 22px; }
    .products__head { flex-direction: column; align-items: flex-start; }
    .procard { padding: 24px; }

    .process { padding: 70px 0; }
    .process__grid { grid-template-columns: repeat(2, 1fr); }

    .applications { padding: 70px 0; }
    .apps__tab span { font-size: 13.5px; }
    .apps__panel { padding: 30px 24px; }
    .apps__panel-media { width: 170px; height: 170px; }
    .apps__panel-body h3 { font-size: 22px; }

    .trusted { padding: 70px 0; }
    .bento__cell { padding: 28px; }

    .cta-banner { padding: 60px 0; }
    .cta-banner__text h2 { font-size: 26px; }
}