:root{
    --navy:#102D3B;
    --gold:#333;
    --gold-light:#333;
    --paper:#fff;
    --card:#FFFFFF;
    --text:#000000;
    --muted:#666B7A;
    --border:#000;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
    background:var(--paper);

    color:var(--text);
    line-height:1.7;
    overflow-x:hidden;
}

.wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 24px;
}

h1,h2,h3{  }

/* ---------- Reveal animation base ---------- */
.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease, transform .7s ease;
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ================================================================
   HERO — identical to the Quality Control page
   ================================================================ */
.hero{
    position:relative;
    padding:110px 24px 100px;
    text-align:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(200,149,42,0.10), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(0,0,55,0.06), transparent 45%),
        var(--paper);
}
.blob{
    position:absolute;
    border-radius:50%;
    filter:blur(2px);
    opacity:.5;
    animation:float 9s ease-in-out infinite;
}
.blob1{ width:160px; height:160px; background:rgba(200,149,42,0.14); top:12%; left:8%; animation-delay:0s;}
.blob2{ width:220px; height:220px; background:rgba(0,0,55,0.05); bottom:5%; right:10%; animation-delay:1.5s;}
.blob3{ width:90px; height:90px; background:rgba(200,149,42,0.18); top:60%; left:20%; animation-delay:3s;}
@keyframes float{
    0%,100%{ transform:translateY(0) translateX(0); }
    50%{ transform:translateY(-24px) translateX(14px); }
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    letter-spacing:.28em;
    text-transform:uppercase;
    font-size:12px;
    color:var(--gold);
    font-weight:600;
    margin-bottom:20px;
    position:relative;
    z-index:2;
}
.eyebrow::before, .eyebrow::after{
    content:"";
    width:24px; height:1px;
    background:var(--gold);
}
.hero h1{
    position:relative;
    z-index:2;
    font-weight:600;
    font-size:clamp(36px, 5.5vw, 58px);
    color:var(--navy);
    text-transform:uppercase;
    letter-spacing:.02em;
}
.hero p.sub{
    position:relative;
    z-index:2;
    max-width:660px;
    margin:20px auto 0;
    color:var(--muted);
    font-size:16px;
}
.hero-badges{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    gap:16px;
    margin-top:36px;
    flex-wrap:wrap;
}
.pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--card);
    border:1px solid var(--border);
    padding:10px 20px;
    border-radius:100px;
    font-size:13px;
    font-weight:600;
    color:var(--navy);
    box-shadow:0 10px 24px -16px rgba(16,45,59,0.92);
}
.pill svg{ width:16px; height:16px; stroke:var(--gold); }

/* ---------- Section heading pattern ---------- */
.section{ padding:80px 0; }
.section-head{
    text-align:center;
    max-width:680px;
    margin:0 auto 20px;
}
.section-head .tag{
    display:block;
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:.22em;
    font-size:12px;
    font-weight:600;
    margin-bottom:12px;
}
.section-head h2{
    font-size:clamp(26px, 3.4vw, 36px);
    color:var(--navy);
    text-transform:uppercase;
    letter-spacing:.02em;
    margin-bottom:14px;
}
.section-head p{ color:var(--muted); font-size:15px; }

/* ================================================================
   PRODUCTS FLOW — cascading stagger connected by a curvy line
   Each card sits 70% below the TOP of the previous card (i.e. a
   30% vertical overlap band between consecutive cards), alternating
   left/right. Positions + the connecting curve are computed in JS
   because they depend on each card's real rendered height.
   ================================================================ */
.products-flow{
    position:relative;
    padding-top:10px;
}

.flow-line{
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
}
.flow-line path{
    fill:none;
    stroke:#f2f2f2;
    stroke-width:3;
    stroke-linecap:round;
    opacity:1;
}

.flow-node{
    position:absolute;
    width:14px; height:14px;
    border-radius:50%;
    background:var(--gold);
    z-index:1;
    transform:translate(-50%, -50%);
    box-shadow:0 0 0 6px rgba(16,45,59,0.92);
}
.flow-node::after{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
    border:1.5px solid var(--gold-light);
    animation:pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring{
    0%{ transform:scale(0.8); opacity:.8; }
    100%{ transform:scale(1.9); opacity:0; }
}

/* width is a PERCENTAGE of the container, not a fixed px value —
   this is the actual fix for the left/right overlap bug: two fixed
   440px cards don't fit side by side once the container drops below
   ~900px, so they collided. 46% + a sane max-width guarantees both
   cards always fit with room to spare, at any viewport >860px. */
.product-card{
    position:absolute;
    width:46%;
    max-width:420px;
    min-width:240px;
    z-index:1;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:18px;
    padding:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:0 20px 44px -28px rgba(16,45,59,0.92);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.product-card.align-left{ left:0; }
.product-card.align-right{ right:0; }

/* animated top accent bar — sweeps in on hover */
.product-card::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:4px;
    background:linear-gradient(90deg, var(--gold), var(--gold-light));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .45s ease;
    z-index:3;
}
.product-card:hover::before{ transform:scaleX(1); }
.product-card:hover{
    transform:translateY(-10px);
    box-shadow:0 32px 60px -22px rgba(16,45,59,0.92);
    border-color:var(--gold-light);
}

/* floating numbered badge — small creative touch, sits on the photo */
.product-number{
    position:absolute;
    top:14px; left:14px;
    width:32px; height:32px;
    border-radius:50%;
    background:rgba(255,255,255,0.92);
    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:600;
    font-size:13px;
    color:var(--gold);
    border:2px solid var(--gold);
    z-index:4;
    box-shadow:0 8px 18px -8px rgba(0,0,0,0.3);
}

/* image bleeds fully edge-to-edge — zero padding/margin on any side.
   Corner rounding comes from .product-card's overflow:hidden instead
   of from the image itself, so there is no gap around it. */
.product-image{
    width:100%;
    margin:0;
    padding:0;
    aspect-ratio:4/3;
    border-radius:0;
    background:linear-gradient(150deg, #FBF1DF 0%, #FDF7EE 60%, #ffffff 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}
.product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0;
    padding:0;
    border-radius:0;
    display:block;
    transition:transform .5s ease;
}
.product-card:hover .product-image img{ transform:scale(1.08); }
.product-image svg{
    width:52px; height:52px;
    stroke:var(--gold);
    transition:transform .4s ease;
}
.product-card:hover .product-image svg{ transform:scale(1.12) rotate(-4deg); }
.product-image::after{
    content:"";
    position:absolute;
    right:-24px; bottom:-24px;
    width:90px; height:90px;
    border-radius:50%;
    background:rgba(231,3,64,0.07);
    pointer-events:none;
}

/* title + CTA button live in their own padded, left-aligned block —
   an editorial layout reads more premium than centered text */
.product-body{
    width:100%;
    padding:18px 20px 22px;
    text-align:left;
}

.product-card h3{
    font-size:17.5px;
    text-transform:uppercase;
    letter-spacing:.02em;
    color:var(--navy);
    margin-bottom:14px;
    line-height:1.3;
}

/* Explore link redesigned as a pill CTA button, not a plain text link */
.explore-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--gold);
    text-decoration:none;
    padding:9px 18px;
    border:1.5px solid var(--gold);
    border-radius:100px;
    transition:background .3s ease, color .3s ease, gap .3s ease, box-shadow .3s ease;
}
.explore-link svg{
    width:14px; height:14px;
    stroke:var(--gold);
    transition:stroke .3s ease, transform .3s ease;
}
.explore-link:hover{
    background:var(--gold);
    color:#fff;
    gap:12px;
    box-shadow:0 10px 22px -10px rgba(16,45,59,0.92);
}
.explore-link:hover svg{ stroke:#fff; transform:translateX(3px); }

/* ---------- Responsive: below 860px, fall back to a simple
   centered vertical stack — no absolute cascade, no connector line ---------- */
@media (max-width: 860px){
    .flow-line{ display:none; }
    .flow-node{ display:none; }
    .products-flow{ display:flex; flex-direction:column; align-items:center; gap:28px; }
    .product-card{ position:static !important; width:100%; max-width:420px; }
}
@media (max-width: 600px){
    .hero{ padding:80px 20px 70px; }
    .section{ padding:56px 0; }
}