/* ==========================================================================
   Arizone International LLP — Custom overrides
   Page-specific tweaks go here so style.css stays the untouched design system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Site-wide "Request a Quote" popup (includes/footer.php's #quoteModal).
   Every "Request a Quote" / "Get a Quote" / "Talk to Our Team" / "Request
   Documents" link site-wide (anything pointing at /contact/contact.php,
   outside the primary nav/footer) opens this instead of navigating away —
   see the click-delegation block in assets/js/main.js. Reuses the existing
   .form-group/.form-control/.form-row/.form-alert styling from the full
   contact page so the fields look identical in both places.
   -------------------------------------------------------------------------- */
.quote-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
}
.quote-modal.is-open { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.quote-modal__overlay { position: absolute; inset: 0; background: rgba(10,13,19,.72); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.quote-modal__panel {
    position: relative; background: #fff; border-radius: var(--radius-lg);
    max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto;
    padding: 40px; box-shadow: var(--shadow-lg);
    transform: translateY(18px) scale(.97); transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.quote-modal.is-open .quote-modal__panel { transform: translateY(0) scale(1); }
.quote-modal__close {
    position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
    border: none; background: var(--color-surface-alt); color: var(--color-ink); font-size: 14px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease;
}
.quote-modal__close:hover { background: var(--color-border); }
.quote-modal__head { margin-bottom: 22px; padding-right: 30px; }
.quote-modal__head h3 { font-size: 23px; margin: 10px 0 8px; }
.quote-modal__head p { color: var(--color-muted); font-size: 14.5px; margin: 0; }
.quote-modal__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quote-modal #quoteFormAlert:empty { display: none; }
.quote-modal .form-alert { margin-bottom: 18px; }
body.quote-modal-open { overflow: hidden; }
@media (max-width: 560px) {
    .quote-modal__panel { padding: 28px 22px; }
}

/* --------------------------------------------------------------------------
   Page banner — dark-photo variant. Used via includes/page-banner.php's
   $pageBannerDark flag when a page supplies its own predominantly-dark
   background photo (the base .page-banner styling assumes a light photo and
   sets dark text with a light glow, which is unreadable here) — flips to
   white text with a dark shadow instead. The gradient overlay itself is
   applied inline per-page in page-banner.php, alongside the image.
   -------------------------------------------------------------------------- */
.page-banner--dark { color: #fff; }
.page-banner--dark .breadcrumb { color: rgba(255,255,255,.75); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.page-banner--dark .breadcrumb a { color: #fff; }
.page-banner--dark .breadcrumb span { color: var(--color-highlight); }
.page-banner--dark h1 { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.page-banner--dark p { color: rgba(255,255,255,.85); text-shadow: 0 1px 4px rgba(0,0,0,.5); }

/* --------------------------------------------------------------------------
   Research & Development page — full-width decorative image band used as a
   breathing-room divider between two content sections (no text overlay).
   -------------------------------------------------------------------------- */
.rnd-banner-strip { width: 100%; height: 340px; overflow: hidden; }
.rnd-banner-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) {
    .rnd-banner-strip { height: 200px; }
}

.rnd-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.rnd-feature-card {
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: 26px 22px; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.rnd-feature-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(15,23,42,.08); }
.rnd-feature-card__icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--color-primary-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 18px;
}
.rnd-feature-card h3 { font-size: 17px; margin-bottom: 8px; }
.rnd-feature-card p { font-size: 14px; color: var(--color-muted); margin: 0; line-height: 1.6; }

@media (max-width: 960px) {
    .rnd-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .rnd-feature-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Packaging page — small "Technical Specs" box under each variety card's
   description, inside .offer-card.
   -------------------------------------------------------------------------- */
.pkg-specs {
    margin-top: 14px; padding: 12px 14px;
    background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.pkg-specs strong { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-primary); margin-bottom: 6px; }
.pkg-specs ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pkg-specs li { font-size: 12.5px; color: var(--color-muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   Homepage "Who We Are" — full-bleed dark banner over a real photo of
   Arizone's own office (replaces the earlier light two-column layout with
   a stock vegetable photo). Same background-image + gradient-overlay
   technique as .section--dark, just its own image and a left-weighted
   overlay so text stays readable without darkening the whole photo evenly.
   -------------------------------------------------------------------------- */
.who-we-are {
    position: relative;
    background-image: linear-gradient(100deg, rgba(3,10,5,.92) 0%, rgba(3,10,5,.78) 38%, rgba(3,10,5,.42) 70%, rgba(3,10,5,.2) 100%),
        url('../images/features/arizone-office.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #eef0f3;
}
.who-we-are__inner { max-width: 620px; margin-left: 48px; margin-right: auto; }
.who-we-are h2 { color: #fff; margin: 14px 0 18px; }
.who-we-are .eyebrow { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: var(--color-highlight); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.who-we-are .accent-highlight { color: var(--color-highlight); }
.who-we-are > .container > p { color: rgba(238,240,243,.82); font-size: 17px; line-height: 1.7; margin: 0 0 34px; }

.who-we-are__list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px; }
.who-we-are__item { display: flex; gap: 14px; align-items: flex-start; }
.who-we-are__item i {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
    background: var(--color-primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.who-we-are__item h4 { color: #fff; font-size: 16px; margin-bottom: 3px; }
.who-we-are__item p { color: rgba(238,240,243,.7); font-size: 14px; margin: 0; line-height: 1.5; }

@media (max-width: 720px) {
    .who-we-are { background-attachment: scroll; }
    .who-we-are__inner { max-width: none; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Homepage "Why Choose Us" — dark 3x3 reasons grid with concentric ring
   decoration behind the icons, matching the reference layout but in the
   site's own green theme instead of blue, plus a scroll-reveal stagger and
   a hover state on each item (ring fills brand green, icon lifts).
   -------------------------------------------------------------------------- */
.why-choose {
    background: var(--color-surface-alt);
    color: var(--color-body);
}
.why-choose__layout {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 32px 64px;
    align-items: start;
}
.why-choose__intro { position: sticky; top: 100px; }
.why-choose__intro .eyebrow { background: var(--color-primary-light); border: 1px solid rgba(67,160,71,.25); color: var(--color-primary-dark); }
.why-choose__intro h2 { font-size: clamp(28px, 3vw, 38px); color: var(--color-ink); margin: 18px 0 16px; }
.why-choose__intro p { color: var(--color-body); font-size: 16px; line-height: 1.75; margin: 0 0 28px; }

.why-choose__list { display: flex; flex-direction: column; }
.why-choose__row {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 26px 0;
    border-bottom: 1px solid var(--color-border);
    transition: padding-left .25s ease;
}
.why-choose__row:first-child { padding-top: 2px; }
.why-choose__row:last-child { border-bottom: none; }
.why-choose__row:hover { padding-left: 8px; }
.why-choose__row-icon {
    /* flex: none locks both width and height — a plain flex-shrink:0 with
       only width/height set can still get squashed into an oval in some
       flex contexts, so this pins a true fixed-size box for a perfect circle. */
    flex: none;
    width: 46px; height: 46px; min-width: 46px; min-height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(15,23,42,.05);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--color-primary);
    transition: transform .35s cubic-bezier(.22,1,.36,1), background .35s ease, border-color .35s ease, color .35s ease;
}
.why-choose__row:hover .why-choose__row-icon {
    background: var(--gradient-brand);
    border-color: transparent;
    color: #fff;
    transform: scale(1.08);
}
/* Alternate between the two legible brand greens across the 9 rows so the
   list reads as varied. (This site's --color-accent is a near-black tone in
   the client's brand palette — fine for text, but unreadable as a 16px icon
   glyph, so it's skipped here.) */
.why-choose__row:nth-child(3n+2) .why-choose__row-icon { color: var(--color-highlight); }
.why-choose__row h4 { color: var(--color-ink); font-size: 17px; margin-bottom: 6px; }
.why-choose__row p { color: var(--color-body); font-size: 14.5px; line-height: 1.65; margin: 0; }

@media (max-width: 900px) {
    .why-choose__layout { grid-template-columns: minmax(0, 1fr); }
    .why-choose__intro { position: static; }
}

/* --------------------------------------------------------------------------
   Homepage "What We Offer" — image cards with the title overlaid on the
   photo (dark gradient at the bottom edge) and the description sitting
   below, in a size between the earlier icon-badge cards and a full hero
   photo: compact, but each image still reads clearly.
   -------------------------------------------------------------------------- */
.offer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px 24px;
}
.offer-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.offer-card__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(3,10,5,.82) 0%, rgba(3,10,5,.15) 55%, transparent 80%);
}
.offer-card__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.offer-card:hover .offer-card__media img { transform: scale(1.08); }
.offer-card__title {
    position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1;
    color: #fff; font-weight: 700; font-size: 15.5px; line-height: 1.3;
}
.offer-card p { margin: 12px 2px 0; color: var(--color-muted); font-size: 13.5px; line-height: 1.65; }

@media (max-width: 960px) {
    .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .offer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Homepage "How We're Different — From Idea to Consumer" — compact full-bleed
   banner: a real photo of Arizone's own facility as the section's own
   background (left side, in its natural color), fading to a solid white
   panel on the right via the inline gradient set on the section itself, with
   a short pitch plus four in-house-capability rows. Same fade-banner
   technique used elsewhere on the site, just its own image/copy.
   -------------------------------------------------------------------------- */
.how-different-v3 {
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    padding: 36px 0 80px;
}
.how-different-v3__panel { width: 100%; max-width: 640px; padding: 0 24px; margin-left: 280px; }
.how-different-v3__panel-inner { max-width: 560px; }
.how-different-v3__panel-inner .eyebrow { margin-bottom: 6px; }
.how-different-v3__panel-inner h2 {
    font-size: clamp(26px, 2.8vw, 32px); line-height: 1.2; margin: 0 0 8px; color: #000;
}
.how-different-v3__panel-inner > p {
    font-size: 15px; line-height: 1.5; color: #000; margin: 0 0 10px; font-weight: 500;
    background: rgba(255,255,255,.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    padding: 10px 16px; border-radius: var(--radius-sm);
}

.how-different-v3__list { display: flex; flex-direction: column; gap: 6px; }
.how-different-v3__row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 16px;
    background: rgba(255,255,255,.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-radius: var(--radius-sm);
}
.how-different-v3__icon {
    flex: none; width: 34px; height: 34px; min-width: 34px; min-height: 34px; border-radius: 50%;
    background: var(--color-primary-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.how-different-v3__text { flex: 1; min-width: 0; }
.how-different-v3__text h4 { font-size: 15px; line-height: 1.3; margin: 0 0 1px; color: #000; font-weight: 700; }
.how-different-v3__text p { font-size: 13px; line-height: 1.4; color: #000; margin: 0; font-weight: 500; }
.how-different-v3__btn {
    flex: none; align-self: center; display: inline-block; background: var(--color-primary); color: #fff;
    text-decoration: none; padding: 6px 14px; font-size: 13px; font-weight: 600;
    border-radius: 999px; white-space: nowrap; transition: background .25s ease, transform .25s ease;
}
.how-different-v3__btn:hover { background: var(--color-primary-dark); transform: translateY(-2px); }

/* Mobile-only condensed summary — replaces the 4 separate cards (each with
   its own repeated "Learn More" button) with one flowing paragraph, since
   stacking 4 full cards made the panel very long and repetitive on phones.
   The product photo stays where the desktop .hwd-bridge places it (the seam
   between this section and the fulfillment section below), straddling the
   seam exactly half-and-half rather than overlapping either section's text.
   All hidden on desktop, shown only under 900px. */
.how-different-v3__mobile-summary,
.how-different-v3__btn--mobile { display: none; }

@media (max-width: 900px) {
    .how-different-v3 { padding: 40px 0 150px; background-position: center; }
    .how-different-v3__panel { max-width: none; padding: 0 24px; margin-left: 0; background: rgba(255,255,255,.94); }
    .how-different-v3__list { display: none; }
    .how-different-v3__panel-inner > p {
        box-shadow: 0 6px 18px rgba(15,23,42,.1);
    }
    .how-different-v3__mobile-summary {
        display: block; font-size: 14px; line-height: 1.6; color: #000; font-weight: 500; margin: 0 0 16px;
        background: rgba(255,255,255,.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        padding: 14px 16px 14px 18px; border-radius: var(--radius-sm);
        border-left: 3px solid var(--color-primary);
        box-shadow: 0 6px 18px rgba(15,23,42,.1);
    }
    .how-different-v3__btn--mobile { display: inline-block; margin: 0 0 8px; }
}
@media (max-width: 480px) {
    .how-different-v3__row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .how-different-v3__btn { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Bridge image — a private-label product mockup ("your brand on our jar")
   floating on the seam between the "How We're Different" panel above and the
   fulfillment section below, right-aligned under the "Learn More" column,
   unframed (no white border/card) so it reads as a floating product shot
   rather than a boxed photo. A plain flow element with negative margins is
   enough; no absolute positioning needed since it never has to clear
   separate flex/grid layouts on either side of it.
   -------------------------------------------------------------------------- */
.hwd-bridge {
    position: relative; z-index: 5;
    display: flex; justify-content: flex-end;
    padding: 0 72px 0 24px;
    margin-top: -210px; margin-bottom: -210px;
    pointer-events: none;
}
.hwd-bridge img {
    width: 420px; max-width: 88vw; height: auto; display: block;
    filter: drop-shadow(0 18px 30px rgba(15,23,42,.22));
    pointer-events: auto;
}
@media (max-width: 900px) {
    /* Straddle the seam exactly half-and-half (240px image => 120px each way)
       instead of the old -170px value, which pulled the image far enough up
       and down to overlap the summary text above and the fulfillment photos
       below it. Both neighboring sections reserve matching 150px/140px of
       padding so only background, never content, sits under the overlap. */
    .hwd-bridge { justify-content: center; padding: 0 24px; margin-top: -120px; margin-bottom: -120px; }
    .hwd-bridge img { width: 240px; }
}

/* --------------------------------------------------------------------------
   Amazon / marketplace fulfillment section — a pair of offset Arizone photos
   (lab testing, export documentation) on one side and a short pitch plus
   checklist on the other. Same offset-card visual language as the compliance
   row used elsewhere on the homepage. Extra top padding on both sides clears
   the .hwd-bridge image floating into this section from above.
   -------------------------------------------------------------------------- */
.fulfillment-section { padding-top: 120px; padding-bottom: 56px; }
.fulfillment-section__grid {
    display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 48px; align-items: center;
}
.fulfillment-section__visual { position: relative; height: 380px; }
.fulfillment-section__img {
    position: absolute; border-radius: var(--radius-lg); object-fit: cover;
    box-shadow: var(--shadow-lg); border: 6px solid #fff;
}
.fulfillment-section__img--back { top: 0; left: 0; width: 66%; height: 78%; z-index: 1; }
.fulfillment-section__img--front { bottom: 0; right: 0; width: 66%; height: 78%; z-index: 2; }
.fulfillment-section__content .eyebrow { margin-bottom: 10px; }
.fulfillment-section__content h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 10px; }
.fulfillment-section__content > p { color: var(--color-body); font-size: 16px; line-height: 1.6; margin: 0 0 16px; }
.fulfillment-section__list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.fulfillment-section__list li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--color-ink); }
.fulfillment-section__list i {
    flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; font-size: 11px;
}

@media (max-width: 900px) {
    /* padding-top clears the .hwd-bridge image straddling down from above. */
    .fulfillment-section { padding-top: 140px; padding-bottom: 48px; }
    .fulfillment-section__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .fulfillment-section__visual { height: 300px; }
}

/* --------------------------------------------------------------------------
   Homepage certifications — compact trust-mark strip. Real certifying-body
   artwork (ISO, GMP, FSSAI, and the Jaivik Bharat organic mark) sits in
   grayscale at rest and lifts into full color on hover/focus, like a
   printed compliance strip coming alive — no caption text needed since each
   mark is self-identifying. HACCP has no single licensable logo, so it's a
   matching monochrome seal that colors up the same way on hover, keeping
   the row visually consistent end to end.
   -------------------------------------------------------------------------- */
.cert-strip {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 26px 0;
    box-shadow: 0 12px 32px rgba(15,23,42,.05);
}
/* Edge fade so logos scrolling in/out dissolve into the card instead of
   getting a hard clip line. */
.cert-strip::before, .cert-strip::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
.cert-strip::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.cert-strip::after { right: 0; background: linear-gradient(270deg, #fff, transparent); }

.cert-strip__track {
    display: flex; align-items: center; gap: 50px; width: max-content;
    animation: certStripScroll 26s linear infinite;
}
.cert-strip:hover .cert-strip__track { animation-play-state: paused; }

.cert-strip__item { display: flex; }
.cert-strip__badge {
    position: relative;
    width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-surface-alt);
    box-shadow: inset 0 0 0 1px var(--color-border);
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, background .4s ease;
}
.cert-strip__item:hover .cert-strip__badge,
.cert-strip__item:focus-within .cert-strip__badge {
    transform: translateY(-6px) scale(1.08);
    background: var(--gradient-brand);
    box-shadow: 0 14px 26px rgba(8,145,178,.28);
}

/* Real certifying-body artwork shown in its own natural color, at rest and
   on hover alike — only the badge circle behind it tints with the brand
   gradient on hover, so the logo itself is never recolored. */
.cert-strip__badge--logo { padding: 14px; }
.cert-strip__badge--logo img {
    width: 100%; height: 100%; object-fit: contain;
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.cert-strip__item:hover .cert-strip__badge--logo img,
.cert-strip__item:focus-within .cert-strip__badge--logo img { transform: scale(1.06); }

/* HACCP has no single licensable badge to source, so it's a plain shield
   glyph in the same visual language as the real logos next to it — gray at
   rest, and the same brand-gradient circle shows through on hover. */
.cert-strip__badge--icon { color: #9aa1ab; transition: color .4s ease, transform .35s cubic-bezier(.22,1,.36,1), background .4s ease, box-shadow .35s ease; }
.cert-strip__badge--icon svg { width: 38px; height: 38px; }
.cert-strip__item:hover .cert-strip__badge--icon,
.cert-strip__item:focus-within .cert-strip__badge--icon { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .cert-strip__track { animation: none; }
    .cert-strip__badge, .cert-strip__badge--icon, .cert-strip__badge--logo img { transition: none; }
}

@media (max-width: 720px) {
    .cert-strip { padding: 18px 0; }
    .cert-strip::before, .cert-strip::after { width: 36px; }
    .cert-strip__track { gap: 30px; animation-duration: 20s; }
    .cert-strip__badge { width: 66px; height: 66px; }
    .cert-strip__badge--icon svg { width: 26px; height: 26px; }
    .cert-strip__badge--logo { padding: 9px; }
}

@keyframes certStripScroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 22px)); }
}

/* --------------------------------------------------------------------------
   Product page v2 — modern pharma/ingredient-supplier layout: a compact
   quick-facts strip in the hero, and tabbed content below (Overview /
   Specifications / Applications / FAQ) instead of one long scroll.
   -------------------------------------------------------------------------- */
.product-hero__quickfacts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 22px;
    padding: 16px 18px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.product-hero__quickfacts div { display: flex; flex-direction: column; gap: 2px; min-width: 100px; }
.product-hero__quickfacts span { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-body); }
.product-hero__quickfacts strong { font-size: 15px; color: var(--color-ink); font-weight: 700; }

.product-tabs { max-width: 1000px; margin: 0 auto; }
.product-tabs__nav {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 48px;
    overflow-x: auto;
}
.product-tabs__nav button {
    appearance: none;
    background: none;
    border: none;
    padding: 14px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    top: 2px;
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.product-tabs__nav button:hover { color: var(--color-ink); }
.product-tabs__nav button.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.product-tabs__panel { display: none; }
.product-tabs__panel.is-active { display: block; animation: productTabFade .25s ease; }
@keyframes productTabFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Unified spec table used inside the Specifications tab — same visual
   language as .product-datasheet but sized for a full two-column grid of
   facts rather than a narrow sidebar card. */
.product-spec-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
}
.product-spec-table__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
}
.product-spec-table__row dt { color: var(--color-muted); font-weight: 600; margin: 0; }
.product-spec-table__row dd { margin: 0; color: var(--color-ink); font-weight: 500; text-align: right; }
@media (max-width: 720px) { .product-spec-table { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 860px) {
    .product-hero__quickfacts { gap: 16px; }
}

/* Standalone pill-tag list — same visual language as .product-article ul li
   but usable outside the article wrapper (e.g. the Specifications tab). */
.product-article__list {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.product-article__list li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-ink);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 9px 15px;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.product-article__list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--color-primary);
    font-size: 10px;
    margin-right: 2px;
}

/* --------------------------------------------------------------------------
   Product page — "You May Also Like" cross-sell strip. Shows a handful of
   sibling products from the same sub-category so a visitor has somewhere to
   go next instead of the page being a dead end.
   -------------------------------------------------------------------------- */
.product-related-section { padding-top: 0; }
.product-related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.product-related__card {
    display: block;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(15,23,42,.05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-related__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(15,23,42,.1);
    border-color: var(--color-highlight);
}
.product-related__card-media { aspect-ratio: 1 / 1; background: var(--color-surface-alt); overflow: hidden; }
.product-related__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-related__card-name {
    display: block;
    padding: 13px 15px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Category listing page — video-backed intro band, long-form category
   article, real-photo showcase strip, and image-aware product tiles.
   (Legacy variant — kept for pages still using the richer layout.)
   -------------------------------------------------------------------------- */
.category-hero { position: relative; overflow: hidden; padding: 72px 0; color: #fff; }
.category-hero__bg-video, .category-hero__bg-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.category-hero__overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.62) 45%, rgba(0,0,0,.35) 100%);
}
.category-hero__inner { position: relative; z-index: 2; max-width: 680px; }
.category-hero__eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--color-highlight); margin-bottom: 14px;
}
.category-hero__inner h2 { color: #fff; font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 16px; }
.category-hero__inner p { color: rgba(255,255,255,.86); font-size: 16.5px; line-height: 1.7; margin: 0 0 22px; }
.category-hero__stats { display: flex; gap: 28px; flex-wrap: wrap; }
.category-hero__stats div { display: flex; flex-direction: column; }
.category-hero__stats strong { font-size: 24px; color: #fff; }
.category-hero__stats span { font-size: 12.5px; color: rgba(255,255,255,.7); }

.category-article { max-width: 880px; margin: 0 auto; }
.category-article__intro { font-size: 17px; line-height: 1.75; color: var(--color-body); margin: 0 0 18px; }
.category-article h3 { font-size: 21px; margin: 34px 0 14px; }
.category-article h3:first-of-type { margin-top: 0; }
.category-article p { font-size: 15.5px; line-height: 1.75; color: var(--color-body); margin: 0 0 16px; }

.product-tile { padding: 10px 16px 10px 10px; }
.product-tile__icon.product-tile__icon--photo {
    width: 48px;
    height: 48px;
    background: none;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: border-color .2s ease;
}
.product-tile__icon--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; display: block; }
.product-tile:hover .product-tile__icon--photo { border-color: var(--color-highlight); }

@media (max-width: 720px) {
    .category-hero { padding: 48px 0; }
    .category-hero__stats { gap: 20px; }
}

/* --------------------------------------------------------------------------
   Product card grid v2 — richer image-forward cards (category listing pages:
   herbal-extract, herbs, oil, nutraceuticals) with a category badge on the
   photo and a distinct "View Product" button, plus a live quick-filter input
   that searches the on-page grid without a full page reload.
   -------------------------------------------------------------------------- */
.product-toolbar-sentinel { height: 1px; }
.product-toolbar--sticky {
    position: sticky; top: var(--sticky-offset, 73px); z-index: 30;
    background: #fff; border-bottom: 1px solid transparent;
    padding-top: 14px; padding-bottom: 14px; margin-bottom: 14px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.product-toolbar--sticky.is-stuck { box-shadow: 0 12px 24px -8px rgba(15,23,42,.12); border-bottom-color: var(--color-border); }
.product-toolbar__filter { flex: 1 1 280px; max-width: 380px; }
.product-quick-filter { position: relative; }
.product-quick-filter i {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--color-muted); font-size: 14px; pointer-events: none;
}
.product-quick-filter input {
    width: 100%; font: inherit; font-size: 14px; color: var(--color-ink);
    background: var(--color-surface-alt); border: 1px solid var(--color-border);
    border-radius: 999px; padding: 11px 16px 11px 40px;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.product-quick-filter input:focus { outline: none; border-color: var(--color-primary); background: #fff; box-shadow: 0 0 0 4px var(--color-primary-light); }
.product-quick-filter input::placeholder { color: var(--color-muted); }

.product-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.product-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.product-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--color-surface-alt); overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.product-card:hover .product-card__media img { transform: scale(1.08); }
.product-card__media--icon { display: flex; align-items: center; justify-content: center; }
.product-card__media--icon i { font-size: 40px; color: var(--color-primary); opacity: .3; }
.product-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-card__tag {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    color: var(--color-primary); font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.product-card__tag i { font-size: 10px; }
.product-card__name { font-size: 15px; font-weight: 700; color: var(--color-ink); line-height: 1.35; margin: 0; flex: 1; }
.product-card__cta {
    margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: #fff; background: var(--color-primary);
    padding: 10px 14px; border-radius: 999px; transition: background .2s ease, gap .2s ease;
}
.product-card__cta i { font-size: 11px; transition: transform .2s ease; }
.product-card:hover .product-card__cta { background: var(--color-primary-dark); gap: 10px; }
.product-card:hover .product-card__cta i { transform: translateX(2px); }

.product-empty-state { display: none; text-align: center; padding: 56px 20px; color: var(--color-muted); }
.product-empty-state.is-visible { display: block; }
.product-empty-state i { display: block; font-size: 30px; color: var(--color-border); margin-bottom: 14px; }
.product-empty-state p { margin: 0; font-size: 14.5px; }

@media (max-width: 560px) {
    .product-card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
    .product-card__body { padding: 12px 14px 14px; gap: 10px; }
    .product-toolbar__filter { max-width: none; flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   Search results page (/search/search.php) — reuses .product-tile-grid /
   .product-tile from the category pages so results look native to the site,
   with a category/type subtitle line added under each result's title.
   -------------------------------------------------------------------------- */
.search-page__form {
    display: flex; align-items: center; gap: 12px;
    max-width: 640px; margin: 0 0 32px;
    background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 999px;
    padding: 6px 6px 6px 20px;
}
.search-page__form i { color: var(--color-muted); font-size: 15px; }
.search-page__input { flex: 1; border: none; outline: none; background: transparent; font-size: 15px; color: var(--color-ink); padding: 10px 4px; }
.search-page__form .btn { flex: none; }
.search-page__hint { color: var(--color-muted); font-size: 15px; }
.search-page__hint a { color: var(--color-primary); font-weight: 600; }
.search-page__count { margin-bottom: 20px; color: var(--color-muted); font-size: 14px; }
.search-page__count strong { color: var(--color-ink); }

.search-result-tile { align-items: center; }
.search-result-tile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-result-tile__title { font-size: 14px; font-weight: 600; color: var(--color-ink); line-height: 1.3; }
.search-result-tile__cat { font-size: 11.5px; font-weight: 500; color: var(--color-muted); text-transform: uppercase; letter-spacing: .03em; }

@media (max-width: 560px) {
    .search-page__form { flex-wrap: wrap; border-radius: var(--radius-md); padding: 14px; }
    .search-page__form .search-page__input { flex-basis: 100%; padding: 4px; }
    .search-page__form .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Product page — long-form article content (from supplied product copy:
   description, "What is X", benefits/uses, bullet lists). Sits between the
   hero and the specification sheet on pages that have matched source copy.
   -------------------------------------------------------------------------- */
.product-article-section { padding-top: 0; }
/* --------------------------------------------------------------------------
   Product article type scale — sized on a golden-ratio step (×1.272, i.e.
   √φ) off a 16px base, so every size relates to the next by the same
   proportion instead of arbitrary half-pixel values:
     12.5px (labels)  →  16px (body)  →  20px (lead)  →  26px (h3)
   Colors also get a clearer hierarchy: the lead paragraph reads in full ink
   (it's the "why should I keep reading" line), body copy uses a slightly
   deeper slate than before for less eye-strain over long specs, and
   headings pick up a touch more weight so the section breaks are easier to
   scan on a long page.
   -------------------------------------------------------------------------- */
.product-article {
    max-width: 920px;
    margin: 0 auto;
}
.product-article__intro {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--color-ink);
    margin: 0 0 18px;
}
.product-article h3 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 26px;
    font-weight: 700;
    color: var(--color-ink);
    margin: 46px 0 20px;
    padding-top: 4px;
}
.product-article h3::before {
    content: "";
    width: 6px;
    height: 28px;
    background: var(--gradient-brand);
    border-radius: 3px;
    flex-shrink: 0;
}
.product-article h3:first-of-type { margin-top: 8px; }
.product-article p {
    font-size: 16px;
    line-height: 1.8;
    color: #3f4653;
    margin: 0 0 16px;
}

/* Short tag-style lists (feature/application lists with no long description)
   render as compact wrapped pills instead of full-width boxes, so a dozen
   short items take a few lines instead of a dozen stacked rows. */
.product-article ul {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.product-article ul li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-ink);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 9px 16px 9px 12px;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-article ul li:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15,23,42,.08);
    border-color: var(--color-highlight);
}
.product-article ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #fff;
    background: var(--gradient-brand);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    flex-shrink: 0;
}

/* Longer narrative pairs, spec-style facts and FAQ content render as a
   modern card grid — soft shadow, rounded corners, hover lift — instead of
   either heavy filled boxes or a bare divided list. */
.product-article ul.product-article__list--stacked {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.product-article ul.product-article__list--stacked li {
    display: block;
    width: auto;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(15,23,42,.045);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: #3f4653;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-article ul.product-article__list--stacked li::before { content: none; }
.product-article ul.product-article__list--stacked li:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(15,23,42,.09);
    border-color: var(--color-highlight);
}
.product-article ul.product-article__list--stacked li strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: 6px;
}
.product-article ul.product-article__list--stacked li strong::before {
    content: "\f0da";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--color-primary);
    font-size: 13px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Individual product page — hero: real photography on the 46 SKUs that have
   it, a labeled representative category photo everywhere else, next to a
   quick-facts info panel.
   -------------------------------------------------------------------------- */
.product-hero-section { padding-bottom: 0; }
.product-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.product-hero__media-main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    box-shadow: 0 12px 32px rgba(15,23,42,.08);
}
.product-hero__media-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Real product photos are pre-branded square templates (logo + name banner +
   contact footer baked into the image) — show them uncropped instead of
   cover-cropping into that overlay text. */
.product-hero__media-main--square { aspect-ratio: 1 / 1; }
/* Clicking the main photo or any thumbnail opens the shared lightbox
   (assets/js/main.js — same [data-lightbox] mechanism as the Certificates
   page) so the clicked image shows large. */
.product-hero__media-main[data-lightbox] { cursor: zoom-in; transition: opacity .2s ease; }
.product-hero__media-main[data-lightbox]:hover { opacity: .92; }
.product-hero__thumbs { display: flex; gap: 12px; margin-top: 14px; }
.product-hero__thumbs img {
    width: 84px; height: 84px; object-fit: cover;
    border-radius: var(--radius-sm); border: 1px solid var(--color-border);
    cursor: zoom-in; transition: border-color .2s ease, transform .2s ease;
}
.product-hero__thumbs img:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.product-hero__media-caption {
    margin: 12px 2px 0; font-size: 12.5px; color: var(--color-muted); font-style: italic;
}
.product-hero__eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--color-primary); margin-bottom: 10px;
}
.product-hero__info h2 { font-size: clamp(28px, 3vw, 36px); margin: 0 0 14px; }
.product-hero__info > p { color: #3f4653; font-size: 16px; line-height: 1.65; margin: 0 0 22px; }
.product-hero__highlights { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.product-hero__highlights li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--color-ink); font-weight: 500; }
.product-hero__highlights li i {
    color: #fff;
    background: var(--gradient-brand);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.product-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 860px) {
    .product-hero { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Mobile overflow fix: on narrow viewports, headings were rendering wider
   than the viewport and getting cut off at the right edge instead of
   wrapping (reproduced even with style.css alone, so it predates every
   change in this file). Reasserting border-box and capping the root
   elements stops content from ever exceeding the viewport width.

   That earlier pass only masked the symptom, though: overflow-x:hidden on
   html/body stops the page from scrolling, but the actual cause was left in
   place, so wide branches were still being silently clipped instead of
   wrapping (the "cut off mid-word" look users kept seeing). The real cause
   is the classic flexbox/grid gotcha — a flex item's default min-width is
   auto, not 0, so a text-holding flex child refuses to shrink below its
   unwrapped content width and forces its whole ancestor chain wider than
   the viewport. Grid tracks have the same default via a plain `1fr` (an
   implicit `minmax(auto, 1fr)`). Fixing both defaults at their source lets
   the text actually wrap within the viewport, so the hidden-overflow rule
   is now dead weight — worse, setting overflow-x on html/body forces their
   overflow-y to a used value of `auto` per spec (an explicit `visible` on
   one axis is coerced to `auto` once the other axis isn't `visible`), which
   silently breaks `position: sticky` for every descendant, including the
   site header itself. Dropped in favor of the real fix below.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; }
h1, h2, h3, h4, h5, p { overflow-wrap: break-word; word-break: break-word; }
.hero__card-row > div { min-width: 0; }
.footer__contact li > span { min-width: 0; overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   Readability fix — small text (labels, dates, captions, descriptions) used
   --color-muted at #6b7280, which measures ~4.8:1 contrast on white: it
   scrapes past the legal minimum but reads as genuinely hard to see at
   11-14px sizes, and low-contrast text is flagged by accessibility audits
   (part of Google's page-experience signals). Darkened to a solid ~6:1+
   everywhere it's used — every small uppercase label, card description and
   date sitewide reads from this one variable, so this one change fixes them
   all at once instead of hunting each instance down individually.
   -------------------------------------------------------------------------- */
:root { --color-muted: #454e5c; }

/* Footer text failed contrast outright: #6b7078 on a near-black background
   (~#0b0e13) measures ~3.75:1, below the 4.5:1 minimum for body text. */
.footer__bottom-inner { color: #9aa3af; }

/* Mega-menu items no longer have an icon beside the text, so stack the
   title/description vertically instead of style.css's icon+text flex row. */
.mega-menu__item { display: block; padding: 12px 14px; }
.footer__credits { flex-basis: 100%; font-size: 11.5px; color: #838c98; order: 3; }

/* Real Arizone logo (icon + wordmark baked into one image) in the header —
   the dark wordmark only reads on a light background, so the footer (dark)
   keeps the separate icon + white-text lockup instead. */
.brand__logo { height: 42px; width: auto; transition: height .25s ease; }
.site-header.is-scrolled .brand__logo { height: 34px; }

/* ==========================================================================
   ABOUT US — bespoke, page-only components.
   Nothing below is shared with index.php/products.php/certificates.php: no
   category-card, feature-card, cert-card, process-step or page-banner here,
   by design, so this page reads as its own thing rather than a remix.
   ========================================================================== */
.about-hero { padding: 56px 0 76px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.about-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.about-hero__title { font-size: clamp(32px, 4.2vw, 54px); font-weight: 600; line-height: 1.15; margin: 18px 0 22px; color: var(--color-ink); }
.about-hero__title strong { font-weight: 500; color: var(--color-primary); }
.about-hero__lead { font-size: 18px; color: var(--color-body); max-width: 520px; margin-bottom: 34px; }
.about-hero__stats { display: flex; border-top: 1px solid var(--color-border); padding-top: 22px; }
.about-hero__stat { flex: 1; padding-right: 18px; }
.about-hero__stat strong { display: block; font-family: var(--font-heading); font-size: 28px; font-weight: 400; color: var(--color-ink); line-height: 1; }
.about-hero__stat span { font-size: 11.5px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; display: block; }
.about-hero__media { position: relative; }
.about-hero__media img {
    width: 100%; height: 480px; object-fit: cover; display: block;
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
}
.about-hero__media-tag {
    position: absolute; right: 0; bottom: 24px; background: var(--color-ink); color: #fff;
    padding: 14px 22px; font-size: 13px; font-weight: 500; letter-spacing: .02em;
    display: flex; align-items: center; gap: 10px;
}
.about-hero__media-tag i { color: var(--color-highlight); }

/* Editorial "story" block: a wide pull-quote, not a card */
.story { padding: 90px 0; }
.story__grid { display: grid; grid-template-columns: 200px 1fr; gap: 48px; }
.story__label {
    font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
    color: var(--color-primary); height: fit-content;
}
.story__quote { font-size: clamp(22px, 2.6vw, 32px); font-weight: 500; line-height: 1.45; color: var(--color-ink); margin-bottom: 26px; }
.story__quote em { font-style: normal; font-weight: 500; color: var(--color-primary); }
.story p { font-size: 16px; color: var(--color-body); max-width: 740px; margin-bottom: 18px; }

/* Mission / Vision as a bordered numbered split, not two icon cards */
.pillars { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.pillars__item { padding: 52px 48px; }
.pillars__item + .pillars__item { border-left: 1px solid var(--color-border); }
.pillars__num { font-size: 48px; font-weight: 200; color: var(--color-border); line-height: 1; margin-bottom: 18px; font-family: var(--font-heading); }
.pillars__item h3 { font-size: 21px; font-weight: 500; margin-bottom: 12px; }
.pillars__item p { color: var(--color-body); font-size: 15.5px; max-width: 440px; }

/* Certifications as a connected horizontal ribbon, not a grid of cards */
.cert-ribbon { padding: 76px 0; background: var(--color-surface-alt); }
.cert-ribbon__row { display: flex; align-items: flex-start; justify-content: space-between; position: relative; }
.cert-ribbon__row::before { content: ""; position: absolute; left: 26px; right: 26px; top: 26px; height: 1px; background: var(--color-border); z-index: 0; }
.cert-ribbon__item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; flex: 1; padding: 0 10px; }
.cert-ribbon__icon {
    width: 52px; height: 52px; border-radius: 50%; background: var(--color-surface);
    border: 2px solid var(--color-primary); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.cert-ribbon__item strong { font-size: 13.5px; font-weight: 600; color: var(--color-ink); }
.cert-ribbon__item span { font-size: 12px; color: var(--color-muted); max-width: 130px; }
.cert-ribbon__cta { text-align: center; margin-top: 40px; }

/* Values as alternating full-width editorial rows, not a feature-card grid */
.values-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 52px 0; border-bottom: 1px solid var(--color-border); }
.values-row:first-child { padding-top: 0; }
.values-row:nth-child(even) .values-row__media { order: 2; }
.values-row__num { font-size: 13px; color: var(--color-primary); font-weight: 700; letter-spacing: .06em; margin-bottom: 10px; }
.values-row__media img { width: 100%; height: 240px; object-fit: cover; border-radius: var(--radius-sm); }
.values-row h3 { font-size: 23px; font-weight: 500; margin-bottom: 12px; }
.values-row p { color: var(--color-body); font-size: 15.5px; max-width: 460px; }

/* Process as a vertical center-line timeline, not a row of numbered circles */
.timeline { position: relative; padding: 20px 0 10px; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--color-border); transform: translateX(-50%); }
.timeline__progress {
    position: absolute; left: 50%; top: 0; width: 3px; height: calc(var(--progress, 0) * 100%);
    background: linear-gradient(var(--color-primary), var(--color-accent));
    transform: translateX(-50%); z-index: 1; pointer-events: none;
}
.timeline__item {
    position: relative; width: 50%; padding: 0 52px 60px; z-index: 2;
    opacity: 0; transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.timeline__item:nth-child(odd) { left: 0; text-align: right; transform: translateX(-32px); }
.timeline__item:nth-child(even) { left: 50%; text-align: left; transform: translateX(32px); }
.timeline__item.is-visible { opacity: 1; transform: translateX(0); }
.timeline__dot {
    position: absolute; top: 2px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-light);
    transform: scale(0); transition: transform .4s cubic-bezier(.34,1.56,.64,1) .15s;
}
.timeline__item.is-visible .timeline__dot { transform: scale(1); }
.timeline__item:nth-child(odd) .timeline__dot { right: -7px; }
.timeline__item:nth-child(even) .timeline__dot { left: -7px; }
.timeline__item h4 { font-size: 18px; font-weight: 500; margin-bottom: 6px; }
.timeline__item p { color: var(--color-muted); font-size: 14.5px; }
@media (prefers-reduced-motion: reduce) {
    .timeline__item { opacity: 1; transform: none; transition: none; }
    .timeline__dot { transform: scale(1); transition: none; }
    .timeline__progress { transition: none; }
}

/* Closing statement instead of the boxed cta-banner used everywhere else */
.about-cta { padding: 100px 0; text-align: center; background: var(--color-ink); color: #fff; }
.about-cta h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 600; max-width: 740px; margin: 0 auto 20px; color: #fff; }
.about-cta h2 strong { font-weight: 500; color: var(--color-highlight); }
.about-cta p { color: #b9bdc4; margin-bottom: 32px; font-size: 16px; }

@media (max-width: 860px) {
    .about-hero__grid, .story__grid, .pillars, .values-row { grid-template-columns: minmax(0, 1fr); }
    .pillars__item + .pillars__item { border-left: none; border-top: 1px solid var(--color-border); }
    .values-row:nth-child(even) .values-row__media { order: 0; }
    .cert-ribbon__row { flex-wrap: wrap; gap: 28px 0; }
    .cert-ribbon__row::before { display: none; }
    .cert-ribbon__item { flex: 0 0 33%; }
    .timeline::before, .timeline__progress { left: 7px; }
    .timeline__item, .timeline__item:nth-child(even) { width: 100%; left: 0; text-align: left; padding: 0 0 40px 34px; transform: translateX(0) translateY(20px); }
    .timeline__item.is-visible { transform: translateX(0) translateY(0); }
    .timeline__item:nth-child(odd) .timeline__dot, .timeline__item:nth-child(even) .timeline__dot { left: 0; right: auto; }
}

/* ==========================================================================
   CERTIFICATES — bespoke, page-only components (its own hero, a framed
   photo wall with a click-to-zoom lightbox, an accordion instead of a card
   grid, and a split request panel instead of the shared cta-banner).
   ========================================================================== */
.cert-hero { position: relative; overflow: hidden; padding: 72px 0 52px; text-align: center; background: var(--color-surface-alt); }
.cert-hero::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(8,145,178,.10), transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(76,154,79,.12), transparent 45%),
        repeating-linear-gradient(115deg, rgba(8,145,178,.035) 0 2px, transparent 2px 90px);
    pointer-events: none;
}
.cert-hero .container { position: relative; }
.cert-hero h1 { font-size: clamp(30px, 4.2vw, 48px); font-weight: 600; max-width: 780px; margin: 16px auto 16px; }
.cert-hero h1 strong { font-weight: 500; color: var(--color-primary); }
.cert-hero p { color: var(--color-body); max-width: 600px; margin: 0 auto 32px; font-size: 16.5px; }
.cert-hero .hero__stats { justify-content: center; }

/* Certificate wall — modern verified-badge tiles */
.cert-wall { padding: 80px 0; }
.cert-wall__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.cert-frame {
    position: relative; background: #fff; padding: 18px; text-align: center; cursor: pointer;
    border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.cert-frame:hover { transform: translateY(-8px); box-shadow: 0 20px 36px -8px rgba(8,145,178,.22); border-color: transparent; }
.cert-frame__inner {
    position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
}
.cert-frame__inner img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.cert-frame:hover .cert-frame__inner img { transform: scale(1.06); }
/* Logo-style certification badges (transparent/white-bg PNG/webp marks) need
   to sit fully visible on a clean tile rather than being cropped to fill the
   square like a stock photo would. */
.cert-frame__inner--logo { background: linear-gradient(145deg, var(--color-surface-alt), #fff); }
.cert-frame__inner--logo img { object-fit: contain; padding: 22px; }
.cert-frame:hover .cert-frame__inner--logo img { transform: scale(1.08); }
.cert-frame__badge {
    position: absolute; top: -8px; right: -8px; z-index: 1; width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-accent); color: #fff; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(22,101,52,.35); border: 2px solid #fff;
    opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .25s ease;
}
.cert-frame:hover .cert-frame__badge { opacity: 1; transform: scale(1); }
.cert-frame__label { margin-top: 16px; }
.cert-frame__label strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--color-ink); margin-bottom: 6px; }
.cert-frame__label span {
    display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .02em;
    color: var(--color-primary); background: var(--color-primary-light);
    padding: 3px 10px; border-radius: 999px;
}

/* Lightbox popup */
.lightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,.86); z-index: 999;
    display: flex; align-items: center; justify-content: center; padding: 28px;
    opacity: 0; visibility: hidden; transition: opacity .3s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__content { position: relative; max-width: 820px; width: 100%; max-height: 90vh; }
.lightbox__content img { width: 100%; max-height: 62vh; object-fit: contain; display: block; margin: 0 auto; border-radius: var(--radius-sm); background: #fff; }
.lightbox__caption { text-align: center; margin-top: 20px; }
.lightbox__caption strong { display: block; color: #fff; font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.lightbox__caption p { color: #c3c7cd; font-size: 14.5px; max-width: 560px; margin: 0 auto; }
.lightbox__close {
    position: absolute; top: -46px; right: 0; width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.15); color: #fff; border: none; font-size: 20px; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease;
}
.lightbox__close:hover { background: rgba(255,255,255,.3); }

/* Accordion instead of a feature-card grid — each item is now its own
   rounded card rather than a line in a flat divided list. */
.cert-accordion { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.cert-accordion__item {
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease;
}
.cert-accordion__item:hover { border-color: var(--color-primary); }
.cert-accordion__item.is-open { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.cert-accordion__trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 22px; background: none; border: none; text-align: left; cursor: pointer;
    font-family: var(--font-heading); font-size: 16.5px; font-weight: 500; color: var(--color-ink);
}
.cert-accordion__trigger:hover { color: var(--color-primary); }
.cert-accordion__trigger i {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    background: var(--color-primary-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; font-size: 12px;
    transition: transform .3s ease, background .2s ease, color .2s ease;
}
.cert-accordion__item.is-open .cert-accordion__trigger i { transform: rotate(45deg); background: var(--color-primary); color: #fff; }
.cert-accordion__panel { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.cert-accordion__panel p { padding: 0 22px 22px 68px; color: var(--color-body); font-size: 15px; }

/* Closing request panel — dark gradient to match the shared .cta-banner
   treatment used at the end of every other inner page. */
.cert-request { padding: 80px 0; }
.cert-request__panel {
    position: relative; overflow: hidden; display: grid; grid-template-columns: 1.2fr .8fr;
    border-radius: var(--radius-lg); background: linear-gradient(120deg, #1b212c, #0a0d13);
    box-shadow: 0 24px 48px rgba(10,13,19,.35);
}
.cert-request__panel::before {
    content: ""; position: absolute; top: -60%; right: -10%; width: 60%; height: 220%;
    background: radial-gradient(circle, rgba(34,139,34,.18), transparent 65%); pointer-events: none;
}
.cert-request__text { position: relative; padding: 48px; }
.cert-request__text h2 { color: #fff; font-size: 26px; font-weight: 500; margin-bottom: 12px; }
.cert-request__text p { color: #c3c7cd; }
.cert-request__action {
    position: relative; padding: 48px; background: rgba(255,255,255,.05); backdrop-filter: blur(8px);
    display: flex; flex-direction: column; justify-content: center; gap: 16px;
    border-left: 1px solid rgba(255,255,255,.1);
}
.cert-request__action span { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: #8a909b; }
.cert-request__action a[href^="mailto"] { color: #c3c7cd; }
.cert-request__action a[href^="mailto"]:hover { color: #fff; }

@media (max-width: 900px) {
    .cert-wall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cert-request__panel { grid-template-columns: minmax(0, 1fr); }
    .cert-request__action { border-left: none; border-top: 1px solid rgba(255,255,255,.1); }
}
@media (max-width: 560px) {
    .cert-wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lightbox__close { top: 0; right: 0; transform: translate(30%,-130%); }
}

/* --------------------------------------------------------------------------
   Client-supplied brand palette (School Bus Yellow, Harvest Orange, Black,
   Red, Black Forest + white). Mapped onto style.css's existing semantic
   variables so every component that already reads --color-primary/accent/
   highlight picks up the new palette automatically.
   -------------------------------------------------------------------------- */
:root {
    /* Corporate, understated geometry — pulled back from an earlier overly-rounded
       "Meril-style" pass that read as playful/cartoonish rather than serious */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Plant Green — primary interactive color (links, icons, badges).
       Third attempt: moved off the flatter "Material Design" green to an
       actual foliage/forest green (the classic web "Forest Green" family) —
       reads as a living plant/leaf color rather than a generic corporate
       green, while staying in the same true-green hue as the existing
       Black Forest accent below so the two don't compete. */
    --color-primary: #228b22;
    --color-primary-dark: #1b6b1b;
    --color-primary-light: #e6f4e6;

    /* Black Forest — secondary/CTA color (already green, unchanged) */
    --color-accent: #012b01;
    --color-accent-dark: #001a00;

    /* Attention accent (stats, ratings, small badges) — a fresher new-leaf
       green, one step lighter than primary, same plant-green family */
    --color-highlight: #3cb043;
    --color-highlight-dark: #2e8b22;
    --color-highlight-light: #e9f7ea;

    /* Red — used sparingly, for rare emphasis only (never as a large solid fill) */
    --color-magenta: #ff0000;

    /* True black replaces the old invented navy for dark bars/sections */
    --color-navy: #000000;

    --gradient-brand: linear-gradient(100deg, var(--color-highlight) 0%, var(--color-primary) 100%);

    /* IBM Plex Sans — a clean, clinical, technical-feeling typeface used across
       health/science/pharma organizations, at normal readable weights (not
       the thin 200/300 weights from an earlier pass that were hard to read). */
    --font-heading: 'IBM Plex Sans', sans-serif;
    --font-body: 'IBM Plex Sans', sans-serif;
}

/* --------------------------------------------------------------------------
   Readable type weights — an earlier pass pushed everything down to
   200/300 for a "thin, editorial" look, but that made body copy and
   headings genuinely hard to read. Inter at normal/medium weights instead:
   clear at both small body sizes and large headings.
   -------------------------------------------------------------------------- */
body { font-weight: 400; }
h1, h2, h3, h4, h5 { font-weight: 600; }
.hero h1 { font-weight: 700; }
.stats-strip__num { font-weight: 600; }
.brand__name { font-weight: 700; }
.hero__stat-num { font-weight: 700; }
.process-step::before { font-weight: 600; }
.testimonial-card__avatar { font-weight: 600; }
.about-visual__badge strong { font-weight: 600; }
.eyebrow, .hero__eyebrow { font-weight: 600; }
.btn { font-weight: 600; }

/* --------------------------------------------------------------------------
   Light, modern micro-interactions — an animated underline on nav links, a
   soft blur-to-focus reveal instead of a plain fade, and a gentle floating
   hero card so the page feels alive without anything heavy or flashy.
   -------------------------------------------------------------------------- */
.main-nav__list > li > a { position: relative; }
.main-nav__list > li > a::after {
    content: ""; position: absolute; left: 50%; right: 50%; bottom: 6px; height: 2px;
    background: var(--color-primary); border-radius: 2px;
    transition: left .25s cubic-bezier(.22,1,.36,1), right .25s cubic-bezier(.22,1,.36,1);
}
.main-nav__list > li > a:hover::after,
.main-nav__list > li > a.is-active::after { left: 14px; right: 14px; }

.reveal { filter: blur(6px); }
.reveal.is-visible { filter: blur(0); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1), filter .7s ease; }

@media (prefers-reduced-motion: reduce) {
    .reveal { filter: none; }
}

/* --------------------------------------------------------------------------
   Palette-cycled icons — category cards, process steps and testimonial
   avatars repeat within a grid, so alternate the two brand colors (orange,
   black forest green) across positions instead of one flat color.
   -------------------------------------------------------------------------- */
.category-card:nth-child(odd) .category-card__icon { background: linear-gradient(145deg, var(--color-primary-light), var(--color-primary)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px rgba(241,125,35,.3); }
.category-card:nth-child(even) .category-card__icon { background: linear-gradient(145deg, var(--color-accent), var(--color-accent-dark)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 10px rgba(1,43,1,.35); }

/* --------------------------------------------------------------------------
   Category cards: real photography instead of an icon glyph, with the same
   two-tone palette carried over as a small badge overlaid on the photo.
   -------------------------------------------------------------------------- */
.category-card { position: relative; }
.category-card > * { position: relative; z-index: 1; }
.category-card::before {
    content: ""; position: absolute; top: -20px; right: -20px; width: 100px; height: 100px;
    border-radius: 50%; opacity: .25; z-index: 0; pointer-events: none;
}
.category-card:nth-child(odd)::before { background: var(--color-primary); }
.category-card:nth-child(even)::before { background: var(--color-accent); }

.category-card__media {
    position: relative; display: block;
    margin: -30px -26px 20px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
    background: var(--color-surface-alt);
}
.category-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.category-card:hover .category-card__media img { transform: scale(1.08); }
.category-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,13,19,.25), transparent 50%); pointer-events: none; }

/* feature-card__icon is now a real photo (see "Icons -> photos" block below) instead of a cycled color glyph */

.process-step:nth-child(odd)::before { background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px rgba(241,125,35,.35); }
.process-step:nth-child(even)::before { background: linear-gradient(145deg, var(--color-accent), var(--color-accent-dark)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px rgba(1,43,1,.35); }

.testimonial-grid .testimonial-card:nth-child(odd) .testimonial-card__avatar { background: var(--color-primary-light); color: var(--color-primary); }
.testimonial-grid .testimonial-card:nth-child(even) .testimonial-card__avatar { background: #e6ebe4; color: var(--color-accent); }

.hero__stats .hero__stat:nth-child(odd) > i { color: var(--color-primary); }
.hero__stats .hero__stat:nth-child(even) > i { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   Trust bar — scrolling strip of certifications and headline stats, placed
   right under the hero so credibility signals land before the fold ends.
   -------------------------------------------------------------------------- */
.trust-bar {
    background: var(--color-navy);
    overflow: hidden;
    padding: 14px 0;
    position: relative;
}
.trust-bar::before, .trust-bar::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none;
}
.trust-bar::before { left: 0; background: linear-gradient(90deg, var(--color-navy), transparent); }
.trust-bar::after { right: 0; background: linear-gradient(270deg, var(--color-navy), transparent); }
.trust-bar__track {
    display: flex; align-items: center; gap: 48px; width: max-content;
    animation: trustScroll 32s linear infinite;
}
.trust-bar:hover .trust-bar__track { animation-play-state: paused; }
.trust-bar__item {
    display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
    color: #fff; font-weight: 600; font-size: 13.5px; letter-spacing: .01em;
}
.trust-bar__item i { color: var(--color-highlight); font-size: 14px; }

/* Dark-section eyebrow badges and page-banner breadcrumbs need a bright accent to stay legible on black/charcoal, not the near-black Black Forest green */
.section--dark .eyebrow { color: var(--color-highlight); }
.breadcrumb a:hover, .breadcrumb span { color: var(--color-highlight); }
.about-visual__tag i { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   Tone down the "cartoon" bubbly badges on the about-photo and checklist —
   dark, muted fills read as a serious corporate seal instead of a bright toy.
   -------------------------------------------------------------------------- */
.about-visual__icon {
    width: 52px; height: 52px; border-radius: 10px;
    background: var(--color-ink);
    box-shadow: 0 10px 20px rgba(0,0,0,.3);
    font-size: 20px;
}
.about-visual__badge strong { color: var(--color-ink); }
.about-list__item i { color: var(--color-ink); background: var(--color-border); border-radius: var(--radius-sm); }

/* --------------------------------------------------------------------------
   Stats strip — a plain, credible 4-number row (used on About Us) reusing
   the same data-count counter behavior as the homepage hero stats.
   -------------------------------------------------------------------------- */
.stats-strip { border-bottom: 1px solid var(--color-border); }
.stats-strip__grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stats-strip__item {
    text-align: center; padding: 8px 16px; border-right: 1px solid var(--color-border);
}
.stats-strip__item:last-child { border-right: none; }
.stats-strip__num { font-family: var(--font-heading); font-size: 40px; font-weight: 600; color: var(--color-ink); line-height: 1; }
.stats-strip__label { font-size: 13px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 8px; }
@media (max-width: 720px) {
    .stats-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .stats-strip__item:nth-child(2) { border-right: none; }
}
@keyframes trustScroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 24px)); }
}

/* Certification icons get a brief attention pulse once scrolled into view */
.cert-card.is-visible .cert-card__icon { animation: certPulse 2.2s ease-in-out .2s 2; }
@keyframes certPulse {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px rgba(241,125,35,.25), 0 0 0 0 rgba(241,125,35,.4); }
    50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px rgba(241,125,35,.25), 0 0 0 9px rgba(241,125,35,0); }
}

/* Stat numbers pop once their count-up animation lands */
.hero__stat-num span.is-counted { display: inline-block; animation: statPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes statPop {
    0% { transform: scale(1); }
    45% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* Process steps: connector line draws in left-to-right as each step reveals */
.process-steps .process-step:not(:last-child)::after {
    transform: scaleX(0); transform-origin: left;
    transition: transform .6s cubic-bezier(.22,1,.36,1) .25s;
}
.process-step.is-visible::after { transform: scaleX(1); }

/* Testimonial stars cascade in once the card reveals */
.testimonial-card__stars i { display: inline-block; opacity: 0; transform: scale(0); transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease; }
.testimonial-card.is-visible .testimonial-card__stars i { opacity: 1; transform: scale(1); }
.testimonial-card.is-visible .testimonial-card__stars i:nth-child(1) { transition-delay: .05s; }
.testimonial-card.is-visible .testimonial-card__stars i:nth-child(2) { transition-delay: .12s; }
.testimonial-card.is-visible .testimonial-card__stars i:nth-child(3) { transition-delay: .19s; }
.testimonial-card.is-visible .testimonial-card__stars i:nth-child(4) { transition-delay: .26s; }
.testimonial-card.is-visible .testimonial-card__stars i:nth-child(5) { transition-delay: .33s; }

/* Hero heading gradient gets a slow shimmer sweep */
.hero h1 span {
    background-size: 200% 100%;
    animation: heroTextShimmer 6s ease-in-out infinite;
}
@keyframes heroTextShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* --------------------------------------------------------------------------
   Meril-style two-tone headings: one key phrase per heading carries a flat
   accent color instead of the whole line reading in a single ink color.
   -------------------------------------------------------------------------- */
.accent-primary { color: var(--color-primary); }
.accent-highlight { color: var(--color-highlight-dark); }
.section--dark .accent-highlight { color: var(--color-highlight); }

/* Hero stats read as headline numbers rather than small labels */
.hero__stat-num { font-size: 34px; }

/* --------------------------------------------------------------------------
   Who We Serve — audience pathway cards (Meril-style "Continue as" pattern,
   adapted to Arizone's actual buyer segments instead of fabricated photos).
   -------------------------------------------------------------------------- */
.audience-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.audience-card {
    position: relative; display: block; background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: 28px 22px; overflow: hidden;
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.audience-card > * { position: relative; z-index: 1; }
.audience-card::before { content: ""; position: absolute; top: -24px; right: -24px; width: 110px; height: 110px; border-radius: 50%; opacity: .22; z-index: 0; }
.audience-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(30,41,59,.12); border-color: transparent; }
.audience-card__icon { width: 52px; height: 52px; border-radius: 14px; display: block; object-fit: cover; margin-bottom: 18px; }
.audience-card h3 { font-size: 17px; margin-bottom: 8px; }
.audience-card p { font-size: 13.5px; color: var(--color-muted); margin-bottom: 18px; min-height: 54px; }
.audience-card__arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-surface-alt); color: var(--color-primary); transition: background .2s ease, color .2s ease, transform .2s ease; }
.audience-card:hover .audience-card__arrow { background: var(--color-primary); color: #fff; transform: translateX(4px); }

.audience-card:nth-child(odd)::before { background: var(--color-primary); }
.audience-card:nth-child(even)::before { background: var(--color-accent); }

/* --------------------------------------------------------------------------
   Global footprint — masked world-map silhouette with pulsing region dots,
   echoing Meril's global-footprint map with Arizone's own reach/colors.
   -------------------------------------------------------------------------- */
.footprint { position: relative; max-width: 880px; margin: 0 auto; aspect-ratio: 1602.7 / 741.7; }
.footprint__map {
    position: absolute; inset: 0;
    background-color: var(--color-primary-light);
    -webkit-mask-image: url('../images/world-map.svg'); mask-image: url('../images/world-map.svg');
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
}
.footprint__dot {
    position: absolute; transform: translate(-50%, -50%);
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--color-primary); box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(15,23,42,.3);
    z-index: 2; cursor: default;
}
.footprint__pulse { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--color-primary); animation: footprintPulse 2.4s ease-out infinite; }
@keyframes footprintPulse {
    0% { transform: scale(.4); opacity: .8; }
    100% { transform: scale(2.4); opacity: 0; }
}
.footprint__dot::after {
    content: attr(data-region); position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
    white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--color-ink);
    background: #fff; padding: 3px 8px; border-radius: 6px; box-shadow: 0 4px 10px rgba(15,23,42,.18);
    opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 3;
}
.footprint__dot:hover::after { opacity: 1; }
.footprint__caption { text-align: center; color: var(--color-muted); font-size: 13.5px; margin-top: 18px; }

@media (max-width: 640px) {
    .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footprint__dot::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .footprint__pulse { animation: none; opacity: 0; }
}

/* --------------------------------------------------------------------------
   Glassmorphism pass — frosted, translucent surfaces with backdrop blur for
   the header and every card component, plus soft color blobs behind the
   light sections so the blur actually has color/light to catch.
   -------------------------------------------------------------------------- */
/* backdrop-filter goes on ::before, not .site-header itself — see the note
   in style.css next to .site-header::before for why (it breaks the mobile
   nav's fixed positioning otherwise). */
.site-header::before {
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.topbar { background: rgba(0,0,0,.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.section--glass { position: relative; overflow: hidden; }
.section--glass::before, .section--glass::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(90px); z-index: 0; pointer-events: none;
}
.section--glass::before { width: 380px; height: 380px; top: -140px; left: -100px; background: var(--color-primary); opacity: .16; }
.section--glass::after { width: 420px; height: 420px; bottom: -160px; right: -120px; background: var(--color-accent); opacity: .14; }
.section--glass > .container { position: relative; z-index: 1; }

.hero__card {
    position: relative;
    background: rgba(255,255,255,.5);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255,255,255,.6);
}
.hero__card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
    background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 20%), rgba(60,176,67,.35), transparent 70%);
    opacity: 0; transition: opacity .3s ease;
}
.hero__card:hover::before { opacity: 1; }
.hero__card > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Advanced interaction: pointer-driven 3D tilt on grid cards (see main.js).
   -------------------------------------------------------------------------- */
.category-card, .cert-card, .audience-card, .testimonial-card {
    transition: transform .15s ease-out, box-shadow .3s ease, border-color .3s ease;
    will-change: transform;
}
.hero__card-row {
    background: rgba(255,255,255,.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: rgba(255,255,255,.5);
}
.hero__card-row:hover { background: rgba(255,255,255,.6); }

.category-card, .cert-card, .testimonial-card, .audience-card {
    background: rgba(255,255,255,.62);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-color: rgba(255,255,255,.7);
}
.feature-card {
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.hero__stat, .about-visual__tag, .about-visual__badge {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* --------------------------------------------------------------------------
   Hero background video — replaces the static photo; the glass hero card
   floats on top so the blur has real motion and color behind it.
   -------------------------------------------------------------------------- */
.hero { background-image: none; }
.hero::before, .hero::after { display: none; }
.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: 1;
    background: linear-gradient(100deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.55) 34%, rgba(255,255,255,.3) 56%, rgba(255,255,255,.05) 100%);
}
.hero__inner { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Icons -> photos: feature/hero/cert/audience badges show a real photo
   instead of an icon glyph, so nothing on the homepage reads as a font icon.
   -------------------------------------------------------------------------- */
.feature-card__icon, .hero__card-icon, .cert-card__icon, .audience-card__icon {
    object-fit: cover;
}

/* Brand mark is now a real logo image (2-tone gradient baked in), not an icon-font glyph on a live gradient */
.brand__mark { background: none; box-shadow: none; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
    .trust-bar__track { animation: none; }
    .cert-card.is-visible .cert-card__icon { animation: none; }
    .hero__stat-num span.is-counted { animation: none; }
    .process-steps .process-step:not(:last-child)::after { transition: none; transform: scaleX(1); }
    .testimonial-card__stars i { opacity: 1; transform: scale(1); transition: none; }
    .hero h1 span { animation: none; }
}

/* --------------------------------------------------------------------------
   Individual product page — pharma-industry style spec sheet, applications
   and compliance strip. Shared markup inserted on every product detail page.
   -------------------------------------------------------------------------- */
.product-detail-section { padding-top: 8px; }
.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 40px;
    align-items: start;
}
.product-detail__section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    margin: 0 0 18px;
}
.product-detail__section-title::before {
    content: "";
    width: 4px;
    height: 20px;
    background: var(--gradient-brand);
    border-radius: 2px;
    flex-shrink: 0;
}

.product-datasheet {
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 18px rgba(15,23,42,.06);
}
.product-datasheet__head {
    background: var(--color-navy, #000);
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.product-datasheet__head strong { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: #fff; }
.product-datasheet__head span { font-size: 12px; color: var(--color-highlight); font-weight: 600; font-family: monospace; }
.product-datasheet__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--color-border);
    font-size: 15px;
}
.product-datasheet__row:last-child { border-bottom: none; }
.product-datasheet__row:nth-child(even) { background: var(--color-surface-alt); }
.product-datasheet__row dt { color: var(--color-body); font-weight: 600; margin: 0; }
.product-datasheet__row dd { margin: 0; color: var(--color-ink); font-weight: 500; text-align: right; }

.product-applications {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 0 0 28px;
    padding: 0;
}
.product-applications li {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    font-size: 14.5px;
    color: #3f4653;
    line-height: 1.5;
    box-shadow: 0 2px 10px rgba(15,23,42,.045);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-applications li:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 26px rgba(15,23,42,.09);
    border-color: var(--color-highlight);
}
.product-applications li i { color: var(--color-primary); margin-top: 2px; flex-shrink: 0; }

.product-article__footnote { font-size: 13px; color: var(--color-muted); font-style: italic; margin: -8px 0 28px; }
.product-compliance { display: flex; flex-wrap: wrap; gap: 10px; }
.product-compliance__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-ink);
    background: #fff;
    box-shadow: 0 2px 8px rgba(15,23,42,.05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-compliance__badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15,23,42,.08);
    border-color: var(--color-highlight);
}
.product-compliance__badge i { color: var(--color-primary); }

@media (max-width: 860px) {
    .product-detail { grid-template-columns: minmax(0, 1fr); }
}