/* ==========================================================================
   Davomr Exports - Main Stylesheet
   Clean, modern, white theme. Font: Inter Tight.
   ========================================================================== */

:root {
    /* Strict brand palette: black, white, grey + one CTA blue. No other hues. */
    --color-bg:          #ffffff;
    --color-surface:     #f5f5f7;
    --color-surface-2:   #f5f5f7;
    --color-text:        #000000;
    --color-text-muted:  #666666;
    --color-text-faint:  #999999;
    --color-border:      #e0e0e0;
    --color-border-strong: #cccccc;
    --color-charcoal:    #000000;
    --color-charcoal-700:#000000;
    --color-white:       #ffffff;
    --color-cta:         #ACE414;
    --color-cta-hover:   #92C211;
    --color-success-bg:      var(--color-cta);
    --color-success-text:    #10210a;
    --color-success-border:  var(--color-cta-hover);
    --color-error-bg:        #fbeaea;
    --color-error-text:      #a4302a;
    --color-error-border:    #c23b3b;

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --container-width: 1180px;
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 18px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.06);
    --shadow-lg: 0 20px 48px rgba(0,0,0,0.10);

    --transition: 180ms ease;
}

/* ---- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
li { font-size: 14px; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 14px; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-weight: 500; line-height: 1.2; }
h1 { font-size: 42px; font-weight: 500; }
h2 { font-size: 28px; font-weight: 600; }
h4 { font-size: 14px; }
p { margin: 0 0 1em; color: var(--color-text-muted); font-size: 14px; }
strong, b { font-weight: 500; }

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

.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--surface { background: var(--color-surface); }
.section--charcoal { background: var(--color-surface); color: var(--color-text); }
.section--charcoal p { color: var(--color-text-muted); }
.section--charcoal h2, .section--charcoal h3 { color: var(--color-text); }

.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    color: var(--color-text-faint);
    font-weight: 500;
    margin-bottom: 14px;
}
.section--charcoal .eyebrow { color: var(--color-text-faint); }

.heading-fade { color: var(--color-text-muted); }

.section-head {
    max-width: 640px;
    margin-bottom: 48px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- Scroll reveal --------------------------------------------------------
   Generic fade-up-on-scroll utility. main.js applies the .reveal class (and
   a per-item transition-delay for stagger) to a fixed list of repeating
   components — cert badges, product cards, FAQ rows, step cards, footer
   columns, contact details, the "Need something else?" custom-request card —
   so most of the site gets motion without any markup changes. .is-visible is
   added once the element scrolls into view. */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 650ms ease, transform 650ms ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Product cards (the "Excellence in details." grid, and everywhere else
   .product-card-v2 is reused) get a slightly slower, softer-landing curve
   than the site-wide default reveal above, plus a gentle scale-in, so they
   settle into place instead of just sliding up. */
.product-card-v2.reveal,
.product-card.reveal {
    transform: translateY(28px) scale(0.96);
    transition: opacity 750ms cubic-bezier(0.16, 1, 0.3, 1), transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card-v2.reveal.is-visible,
.product-card.reveal.is-visible {
    transform: none;
}

/* Respect the OS-level "reduce motion" preference: every animation this
   file or main.js adds collapses to an instant, static state. */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 500;
    font-size: 0.9rem;
    border: 1px solid transparent;
    white-space: nowrap;
}
.btn-primary {
    background: var(--color-cta);
    /* The new CTA color is a bright lime, dark text reads far better on it than white. */
    color: #10210a;
    border-color: var(--color-cta);
}
.btn-primary:hover {
    background: var(--color-cta-hover);
    border-color: var(--color-cta-hover);
}
.btn-outline {
    background: transparent;
    color: var(--color-charcoal);
    border-color: var(--color-border-strong);
}
.btn-outline:hover { border-color: var(--color-charcoal); background: var(--color-surface); }
.section--charcoal .btn-outline {
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.section--charcoal .btn-outline:hover { border-color: var(--color-charcoal); background: #fff; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn-pill { border-radius: 30px; }

/* ---- Header / Nav ------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.site-header__inner {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
    align-items: center;
    position: relative;
    height: 65px;
}

.site-logo {
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.site-logo__img {
    height: 24px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    /* Source logo is white-on-transparent; invert to charcoal for the light header. */
    filter: invert(1);
    transition: filter var(--transition);
}

/* Nav sits in the middle grid track, which is sized to its own content and
   flanked by two equal tracks (logo / CTA button), so it stays centered on
   the whole header regardless of how wide either side is. */
.main-nav { grid-column: 2; display: flex; align-items: center; }
.main-nav__links { display: flex; align-items: center; gap: 8px; }

/* Hover / active state everywhere in the nav is a rounded pill in the brand
   CTA color, no underlines or border "highlight lines". display:inline-flex
   + line-height:1 keeps the label vertically centered in its own pill
   regardless of font-metric quirks, so it lines up with the logo and button. */
.main-nav__links a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--color-text);
    padding: 8px 14px;
    border-radius: 999px;
    transition: background var(--transition), color var(--transition);
}
.main-nav__links a:hover {
    background: rgba(0,0,0,0.06);
}

/* Request a Quote - standalone button, right-aligned in its own grid track. */
.nav-cta {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--color-cta);
    color: #10210a;
    font-weight: 500;
    font-size: 0.85rem;
    white-space: nowrap;
}
.nav-cta:hover { background: var(--color-cta-hover); }

/* Shown only inside the mobile dropdown (see media query below); the
   standalone button above doesn't fit the compact mobile bar. */
.main-nav__cta-mobile { display: none; }

.nav-toggle {
    display: none;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px;
    border-radius: 8px;
    flex-direction: column;
    gap: 5px;
}
.nav-toggle:hover { background: rgba(0,0,0,0.06); }
.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--color-charcoal);
    display: block;
}

/* ---- Hero (full-bleed video, navbar overlaid) ----------------------------- */
body.page-home .site-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    z-index: 20;
}
body.page-home .main-nav__links a {
    color: #fff;
}
body.page-home .main-nav__links a:hover {
    background: rgba(255,255,255,0.16);
}
body.page-home .nav-toggle span { background: #fff; }
body.page-home .nav-toggle:hover { background: rgba(255,255,255,0.16); }
body.page-home .site-logo__img { filter: none; }

/* Once scrolled past the hero, pin the nav to the viewport and switch it
   back to the light/solid style so it stays legible over page content. */
body.page-home .site-header.is-scrolled {
    position: fixed;
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
body.page-home .site-header.is-scrolled .main-nav__links a { color: var(--color-text); }
body.page-home .site-header.is-scrolled .main-nav__links a:hover { background: rgba(0,0,0,0.06); }
body.page-home .site-header.is-scrolled .nav-toggle span { background: var(--color-charcoal); }
body.page-home .site-header.is-scrolled .nav-toggle:hover { background: rgba(0,0,0,0.06); }
body.page-home .site-header.is-scrolled .site-logo__img { filter: invert(1); }

.hero {
    position: relative;
    min-height: 100vh;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Black, not the light --color-surface: if the background video (and its
       poster) fail to load, this is what shows through behind the white hero
       text/overlay instead of near-white-on-white unreadable content. */
    background: #000;
}
.hero__bgvideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Same fallback: an empty/broken <video> paints nothing, so this keeps
       the area black instead of falling through to .hero's background. */
    background: #000;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.3) 55%, rgba(0,0,0,0.5) 100%);
    z-index: 1;
}
.hero__center {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 640px;
    text-align: center;
    color: #fff;
}
.hero__logo {
    display: block;
    height: 48px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    margin: 0 auto 20px;
}
.hero__center h1 {
    color: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    white-space: nowrap;
    margin-bottom: 14px;
}
@media (max-width: 480px) {
    .hero__center h1 { white-space: normal; }
}
.hero__subcopy {
    color: rgba(255,255,255,0.8);
    font-weight: 300;
    font-size: 14px;
    max-width: 420px;
    margin: 0 auto 32px;
}

.hero-email-form {
    display: flex;
    align-items: center;
    max-width: 380px;
    margin: 0 auto;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid rgba(255,255,255,0.75);
    border-radius: 30px;
    padding: 5px 5px 5px 20px;
}
.hero-email-form input[type=email] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: #fff;
    padding: 10px 10px 10px 0;
    font-size: 14px;
}
.hero-email-form input[type=email]::placeholder { color: rgba(255,255,255,0.68); }
.hero-email-form input[type=email]:focus { outline: none; }
.hero-email-form button {
    flex-shrink: 0;
    background: #fff;
    color: var(--color-charcoal);
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 0.85rem;
    white-space: nowrap;
}
.hero-email-form button:hover { background: var(--color-surface); }

@media (max-width: 560px) {
    .hero-email-form { flex-direction: column; align-items: stretch; padding: 16px; border-radius: 30px; gap: 10px; }
    .hero-email-form input[type=email] { width: 100%; text-align: center; padding: 8px 0; }
    .hero-email-form button { width: 100%; }
}

/* ---- Breadcrumb ---------------------------------------------------------- */
.breadcrumb {
    padding: 22px 0;
    font-size: 0.85rem;
    color: var(--color-text-faint);
    border-bottom: 1px solid var(--color-border);
}
.breadcrumb a {
    padding: 2px 7px;
    margin: -2px -7px;
    border-radius: 6px;
    transition: background var(--transition), color var(--transition);
}
.breadcrumb a:hover { background: rgba(0,0,0,0.06); color: var(--color-charcoal); }

/* ---- Page header (interior pages) --------------------------------------- */
.page-header {
    padding: 64px 0 56px;
    background: var(--color-surface);
    text-align: center;
}
.page-header h1 { margin-bottom: 12px; }
.page-header p { max-width: 560px; margin: 0 auto; }

/* ---- Product grid / cards ------------------------------------------------ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* ---- Featured products carousel (homepage) -------------------------------
   Modelled on the Apple Store product rows (confirmed by inspecting
   apple.com/store: its ".rf-cards-scroller" is NOT capped to their content
   column - clientWidth tracks the browser viewport, and its paddle-nav
   arrows sit ~24px from the true edge of the window, not from the content
   column edge). Same approach here:
   - The track is NOT wrapped in anything container-width-limited - it runs
     the full width of the browser, same as the rest of an edge-to-edge
     section would.
   - Card width is fixed so exactly 3 cards fill the container's own inner
     width, matching the old 3-column grid at rest.
   - Anything beyond the 3rd card simply continues past the container's
     right edge into open page space: on a wide monitor that's a real
     peek, at a viewport close to 1180px it's mostly or entirely
     off-screen until the user swipes or clicks the arrow - scaling with
     window width instead of a fixed "peek" amount.
   - The arrow buttons sit ~24px from the true edge of the browser window
     (not the container edge), so "next" lands on top of the peeking card
     instead of at the container boundary.
   Touch/trackpad swipe and the arrow buttons drive the exact same scroll
   position, so they never fall out of sync with each other. */
.product-carousel {
    position: relative;
}
.product-carousel__track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 4px 24px 24px;
    padding-left: max(24px, calc((100vw - var(--container-width)) / 2 + 24px));
    padding-right: max(24px, calc((100vw - var(--container-width)) / 2 + 24px));
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.product-carousel__track::-webkit-scrollbar { display: none; }
.product-carousel__track .product-card-v2 {
    flex: 0 0 auto;
    width: calc((min(100vw, var(--container-width)) - 96px) / 3);
}

.product-carousel__nav {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.product-carousel__arrow {
    position: absolute;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
    pointer-events: auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    padding: 0;
}
.product-carousel__arrow svg { width: 20px; height: 20px; }
.product-carousel__arrow--next { left: auto; right: 24px; }
.product-carousel__arrow:hover { background: var(--color-cta); border-color: var(--color-cta); color: #10210a; }
.product-carousel__arrow[hidden] { display: none; }

@media (max-width: 720px) {
    /* Touch swipe carries the row on phones/tablets; the round buttons would
       just sit awkwardly on top of the cards at this width. */
    .product-carousel__arrow { display: none; }
    .product-carousel__track .product-card-v2 { width: 78vw; }
}
@media (max-width: 480px) {
    .product-carousel__track .product-card-v2 { width: 84vw; }
}
.product-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.product-card__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-surface);
}
.product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms ease; }
.product-card:hover .product-card__image img { transform: scale(1.05); }
.product-card__body { padding: 22px 22px 26px; flex: 1; display: flex; flex-direction: column; }
.product-card__category {
    font-size: 0.72rem;
    color: var(--color-text-faint);
    margin-bottom: 8px;
}
.product-card__body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.product-card__body p { flex: 1; }
.product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.product-card__moq { font-size: 0.8rem; color: var(--color-text-faint); }
.product-card__link { font-weight: 500; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 6px; }
.product-card__link .arrow { transition: transform var(--transition); }
.product-card:hover .product-card__link .arrow { transform: translateX(3px); }

/* ---- Product card v2 - redesign, iteration 2 (2026-08-28) -----------------
   Full-bleed image card: no separate white panel, no frosted-glass blur.
   Title and description sit at the top-left of the card; the outline "View
   Details" button anchors to the bottom-left instead, so the two pieces of
   content bookend the image rather than both stacking at the bottom. This
   is the one product card style used everywhere on the site (home, shop,
   related products) so buyers see the same card wherever they land. */
.product-card-v2 {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--color-surface);
    transition: transform 280ms ease, box-shadow 280ms ease;
}
.product-card-v2:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.product-card-v2__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Darkens both the top (behind the title/desc) and the bottom (behind the
   button) of the image, leaving the middle clear, since text now sits at
   both ends of the card instead of only the bottom. */
.product-card-v2__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}
.product-card-v2__content {
    position: absolute;
    inset: 0;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.product-card-v2__top {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.product-card-v2__title {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.25;
}
.product-card-v2__desc {
    color: rgba(255,255,255,0.85);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}
.product-card-v2__meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}
.btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--color-charcoal);
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.82rem;
    white-space: nowrap;
}
.btn-white:hover { background: var(--color-surface); }

/* Outline variant, no fill, thin white stroke; for buttons sitting on a
   photo/dark background where a solid white block would feel too heavy. */
.btn-outline-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.85);
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.82rem;
    white-space: nowrap;
}
.btn-outline-white:hover { background: rgba(255,255,255,0.14); border-color: #fff; }

/* Inside the product card, hovering "View Details" ties back to the site's
   CTA color instead of a generic white fill, same brand accent used on
   every other primary action on the site. */
.product-card-v2 .btn-outline-white:hover {
    background: var(--color-cta);
    border-color: var(--color-cta);
    color: #10210a;
}

/* ---- Certifications / trust badges (homepage) ---------------------------- */
.cert-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}
.cert-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    width: 104px;
}
.cert-item__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-cta);
    border: 1.2px solid var(--color-cta);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10210a;
    flex-shrink: 0;
}
.cert-item__icon svg { width: 20px; height: 20px; }
.cert-item__label {
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--color-text);
}

/* ---- Trust strip (small, uncolored compliance icons) ----------------------
   Same 5 badges as .cert-grid above, styled the opposite way on purpose: no
   circle, no fill, no brand color - just a small outline icon and a label.
   Base rule is layout-only (reusable wherever this row is placed); the
   --hero modifier below is what's currently in use, under the hero email
   form on a dark background. */
.trust-strip {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 28px;
}
.trust-strip__item {
    display: flex;
    align-items: center;
    gap: 7px;
}
.trust-strip__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    color: var(--color-text-faint);
}
.trust-strip__icon svg { width: 100%; height: 100%; }
.trust-strip__label {
    font-size: 0.78rem;
    color: var(--color-text-faint);
}

/* Hero placement: centered under the email-capture form, with real breathing
   room above it (per request) and a faint hairline divider so it reads as a
   deliberate trust row instead of stray icons floating under the button.
   Colors switch to translucent white since this sits on the dark hero. */
.trust-strip--hero {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.18);
    flex-wrap: nowrap;
    gap: 10px 22px;
}
.trust-strip--hero .trust-strip__icon {
    width: 20px;
    height: 20px;
    color: rgba(255,255,255,0.7);
}
.trust-strip--hero .trust-strip__label {
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
/* Below the point where the email form itself stacks (matches that same
   560px break), force an even 2-and-2 grid instead of letting flex-wrap
   drop items onto row two unevenly. */
@media (max-width: 560px) {
    .trust-strip--hero {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        column-gap: 26px;
        row-gap: 14px;
    }
}

/* Products-section placement: sits between the "Excellence in details."
   heading and the product grid, on the regular light background, replacing
   the old "Every piece is one of a kind." subtext (2026-08-28). Icons are
   a touch larger and the label reads in the normal muted-text color so the
   row stays legible without the hero's dark-background treatment. */
.trust-strip--products {
    flex-wrap: nowrap;
    gap: 14px 34px;
    margin: -16px auto 52px;
}
.trust-strip--products .trust-strip__icon {
    width: 22px;
    height: 22px;
    color: var(--color-text-muted);
}
.trust-strip--products .trust-strip__label {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
@media (max-width: 560px) {
    .trust-strip--products {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        column-gap: 30px;
        row-gap: 16px;
        margin: -16px auto 40px;
    }
}

/* Standalone band placement: its own plain white section directly below the
   hero (2026-08-28). Simple inline icon-plus-label pairs, kept light in
   weight and size so it reads as an understated trust strip rather than a
   competing headline. */
.trust-band { padding: 38px 0 62px; background: var(--color-bg); }
.trust-band .container::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 28px;
    background: var(--color-border);
}
.trust-strip--band {
    flex-wrap: nowrap;
    gap: 14px 44px;
}
.trust-strip--band .trust-strip__item {
    gap: 9px;
}
.trust-strip--band .trust-strip__icon {
    width: 22px;
    height: 22px;
    color: var(--color-text-muted);
}
.trust-strip--band .trust-strip__label {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
@media (max-width: 560px) {
    .trust-strip--band {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        column-gap: 32px;
        row-gap: 16px;
    }
}

/* ---- Mission statement (text-only) ---------------------------------------- */
.mission-statement { padding: 72px 0; }
.mission-statement__text {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    /* Matches the sitewide h2 rule (font-size / font-weight / line-height)
       instead of its own oversized statement styling, so this reads as the
       same heading level as "Excellence in details.", "Need something
       else?", etc. rather than a one-off bigger treatment. */
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
}
@media (max-width: 720px) {
    .mission-statement { padding: 48px 0; }
}

/* ---- Product detail page -------------------------------------------------- */
.product-detail {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: start;
}
.product-gallery__main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--color-surface);
    margin-bottom: 14px;
    border: 1px solid var(--color-border);
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumbs { display: flex; gap: 12px; }
.product-gallery__thumbs button {
    background: none; border: 2px solid var(--color-border); border-radius: var(--radius-sm);
    overflow: hidden; width: 84px; height: 84px; padding: 0; flex-shrink: 0;
}
.product-gallery__thumbs button.is-active { border-color: var(--color-charcoal); }
.product-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.product-info__category {
    font-size: 0.78rem;
    color: var(--color-text-faint); margin-bottom: 10px; font-weight: 500;
}
.product-info h1 { margin-bottom: 14px; }
.product-info__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 24px 0;
    padding: 20px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
}
.product-info__meta dt { font-size: 0.72rem; color: var(--color-text-faint); margin-bottom: 4px; }
.product-info__meta dd { margin: 0; font-weight: 500; font-size: 0.95rem; }
.product-info__desc { white-space: pre-line; }

/* ---- Forms ---------------------------------------------------------------- */
.form-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}
.form-card h3 { margin-bottom: 6px; }
.form-card .form-sub { margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 6px;
}
.form-group .req { color: var(--color-text); }
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=tel],
.form-group input[type=password],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-charcoal);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-hint { font-size: 0.78rem; color: var(--color-text-faint); margin-top: 4px; }
.form-error-text { font-size: 0.78rem; color: var(--color-error-text); margin-top: 4px; }
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea { border-color: var(--color-error-text); }

.alert {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    border-left: 4px solid transparent;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 20px;
}
.alert-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-left-color: var(--color-success-border);
}
.alert-error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border-left-color: var(--color-error-border);
}
.alert ul { margin: 6px 0 0 18px; list-style: disc; }

/* ---- Testimonials ---------------------------------------------------------- */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.testimonial-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 28px;
}
.testimonial-card__stars { color: var(--color-text); margin-bottom: 14px; font-size: 0.9rem; }
.testimonial-card__quote { color: var(--color-text); margin-bottom: 20px; }
.testimonial-card__person { display: flex; align-items: center; gap: 12px; }
.testimonial-card__avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--color-charcoal); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 500; font-size: 0.9rem; flex-shrink: 0;
}
.testimonial-card__person strong { display: block; font-size: 0.92rem; }
.testimonial-card__person span { font-size: 0.78rem; color: var(--color-text-faint); }

/* ---- Video section ----------------------------------------------------------- */
.video-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.video-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #000;
    box-shadow: var(--shadow-lg);
}
.video-frame video, .video-frame iframe {
    width: 100%; height: 100%; object-fit: cover; border: 0; display: block;
}
.video-section ul.checklist li {
    display: flex; gap: 10px; margin-bottom: 12px; font-size: 0.95rem; color: var(--color-text);
}
.video-section ul.checklist li::before {
    content: "✓";
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--color-charcoal);
    color: #fff;
    font-size: 0.7rem;
    display: flex; align-items: center; justify-content: center;
    margin-top: 2px;
}

/* ---- Process / why-choose-us steps ------------------------------------------- */
/* flex + wrap (rather than a fixed grid) so an uneven item count, e.g. a
   7-step process, centers its last, incomplete row instead of leaving a
   ragged gap on one side. */
.step-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.step-card {
    padding: 8px 0;
    flex: 0 1 calc(25% - 18px);
    max-width: calc(25% - 18px);
}
.step-card .step-num {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--color-border-strong);
    display: flex; align-items: center; justify-content: center;
    font-weight: 500; font-size: 0.95rem; margin-bottom: 16px;
}
.step-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step-card p { }

/* ---- "Why choose us" (homepage, above FAQ) --------------------------------------- */
.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
}
.why-card__icon {
    width: 34px;
    height: 34px;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 18px;
}
.why-card__icon svg { width: 100%; height: 100%; }
.why-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.why-card p { color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.6; }
@media (max-width: 980px) {
    .why-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
}
@media (max-width: 560px) {
    .why-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- CTA band / custom requirement form ------------------------------------------ */
.cta-band {
    position: relative;
    text-align: center;
    padding: 88px 0;
    background: #000 url('/images/site/custom-request-bg.jpg') center / cover no-repeat;
    isolation: isolate;
}
.cta-band__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.62) 100%);
    z-index: 0;
}
.cta-band > .container { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 14px; color: #fff; }
.cta-band .heading-fade { color: rgba(255,255,255,0.7); }
.cta-band p { max-width: 520px; margin: 0 auto 28px; color: rgba(255,255,255,0.85); }

.custom-request-form {
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
}

/* ---- Custom file input ------------------------------------------------------------ */
.file-input {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.file-input input[type=file] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.file-input__button {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.file-input__button:hover { border-color: var(--color-charcoal); background: var(--color-surface); }
.file-input input[type=file]:focus + .file-input__button {
    outline: none;
    border-color: var(--color-charcoal);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.file-input__name {
    font-size: 0.82rem;
    color: var(--color-text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/* ---- Open letter section ----------------------------------------------------------- */
.letter-section { padding: 88px 0; }
.letter-card {
    max-width: 680px;
    margin: 0 auto;
}
.letter-card h2 { margin-bottom: 40px; }
.letter-card__body p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text-muted);
    margin-bottom: 1.4em;
}
.letter-card__body p:first-child { color: var(--color-text); }
.letter-card__signature {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-strong);
    display: inline-block;
}
.letter-card__sign-name {
    display: block;
    font-family: 'Dancing Script', cursive;
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--color-text);
}

/* ---- FAQ (accordion, no JS, native <details>/<summary>) ------------------------- */
.faq-list {
    max-width: 760px;
    margin: 0 auto;
    border-top: 1px solid var(--color-border);
}
.faq-item {
    border-bottom: 1px solid var(--color-border);
}
.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 2px;
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::marker { content: ""; }
.faq-item__icon {
    flex-shrink: 0;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    color: var(--color-text-faint);
    transition: transform var(--transition);
}
.faq-item[open] .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer { padding: 0 26px 22px 2px; }
.faq-item__answer p { margin: 0; }

/* ---- Footer ---------------------------------------------------------------------- */
.site-footer {
    background: #000;
    color: rgba(255,255,255,0.65);
    /* Top padding matches the 88px rhythm the sections above use, so the gap
       above the footer reads the same as the gaps between them; bottom stays
       tighter since it's the true end of the page. */
    padding: 88px 0 28px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer-brand__name { color: #fff; font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.footer-brand p { color: rgba(255,255,255,0.6); max-width: 320px; font-size: 14px; }
.footer-col h4 {
    color: #fff; font-size: 14px;
    margin-bottom: 18px;
}
.footer-col ul li { margin-bottom: 10px; font-size: 14px; }
.footer-col ul li a {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    display: inline-block;
    padding: 2px 8px;
    margin: -2px -8px;
    border-radius: 6px;
    transition: background var(--transition), color var(--transition);
}
.footer-col ul li a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    color: #fff;
    transition: background var(--transition);
}
.footer-social a:hover { background: rgba(255,255,255,0.12); }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 24px; font-size: 14px; color: rgba(255,255,255,0.45);
    flex-wrap: wrap; gap: 10px;
}
.footer-bottom a {
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    padding: 2px 7px;
    margin: -2px -7px;
    border-radius: 6px;
    transition: background var(--transition), color var(--transition);
}
.footer-bottom a:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* ---- Misc pages (about / policy) --------------------------------------------------- */
.prose h2 { margin-top: 2em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--color-text-muted); }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.prose ul li { margin-bottom: 6px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.stat-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
.stat-band strong { display: block; font-size: 2.2rem; font-weight: 500; color: var(--color-charcoal); }
.stat-band span { font-size: 0.85rem; color: var(--color-text-faint); }

.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
.contact-detail { display: flex; gap: 16px; margin-bottom: 26px; }
.contact-detail .icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--color-surface); border: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-detail h4 { margin-bottom: 4px; }
.contact-detail p { margin: 0; }
.map-embed { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); margin-top: 28px; aspect-ratio: 16/9; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* ---- Responsive --------------------------------------------------------------------- */
@media (max-width: 980px) {
    .product-detail, .video-section__grid, .two-col, .contact-grid { grid-template-columns: 1fr; }
    .product-grid, .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
    .step-card { flex-basis: calc(50% - 12px); max-width: calc(50% - 12px); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .stat-band { grid-template-columns: repeat(2,1fr); gap: 32px; }
}

@media (max-width: 720px) {
    .main-nav__links { display: none; }
    .nav-toggle { display: flex; }
    .nav-cta { display: none; }
    .main-nav__cta-mobile { display: block; margin-top: 4px; }
    .site-header.is-open .main-nav__links {
        display: flex;
        position: absolute;
        top: 65px; left: 0; right: 0;
        background: #fff;
        flex-direction: column;
        padding: 20px 24px 28px;
        border-bottom: 1px solid var(--color-border);
        gap: 18px;
    }
    .site-header.is-open .main-nav__links a { color: var(--color-text); }
    .site-header.is-open .main-nav__links a:hover { background: rgba(0,0,0,0.06); }
    .hero__center { padding: 0 24px; }
    .section { padding: 56px 0; }
    /* Keep the trust band's tighter-top / roomier-bottom proportion on mobile
       instead of letting the generic .section rule above flatten it to an
       even 56/56 - scaled down at the same ratio as the desktop values. */
    .trust-band { padding: 24px 0 40px; }
    /* Same reasoning as .trust-band above: keep the footer's top gap in step
       with the 56px mobile rhythm instead of the desktop-tuned 88px. */
    .site-footer { padding: 56px 0 24px; }
    .product-grid, .testimonial-grid { grid-template-columns: 1fr; }
    .step-card { flex-basis: 100%; max-width: 100%; }
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .product-info__meta { grid-template-columns: 1fr; }
    .stat-band { grid-template-columns: 1fr 1fr; }
    .form-card { padding: 24px; }
}