/* ==========================================================================
   TRANS HIMALAYAN EXIM — DESIGN SYSTEM
   Batch 3 · "Premium Himalayan Trade"
   --------------------------------------------------------------------------
   A serious, professional B2B visual identity for a sourcing / trading /
   supply organisation. Timber is the flagship — expressed through hierarchy,
   composition and typography, NOT through heavy brown wood textures.

   This stylesheet loads AFTER Bootstrap 5, so plain custom selectors override
   Bootstrap without needing !important.

   CONTENTS
     1.  Design tokens (custom properties)
     2.  Base & typography
     3.  Layout: containers, sections, dividers
     4.  Section building blocks (eyebrow / title / lead)
     5.  Buttons
     6.  Navigation
     7.  Product components (category / product / flagship)
     8.  Media & image system
     9.  B2B information components
     10. Supply process component
     11. Forms
     12. Footer
     13. Flash messages & utilities
     14. Design-preview helpers (Batch 3 only)
     15. Accessibility & reduced motion
     16. Responsive refinements
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* ---- Brand palette : "Premium Himalayan Trade" -------------------------
       Chosen for WCAG-conscious contrast on the paired surfaces (documented
       inline). Accent is used SPARINGLY: CTAs, eyebrows, active states,
       separators, flagship highlight. */

    /* Primary — deep forest / evergreen */
    --th-primary:        #194b3a;  /* on #fff ≈ 8.9:1  (AAA body)            */
    --th-primary-dark:   #123527;  /* hover / deep                          */
    --th-primary-light:  #2e6b54;  /* subtle accents on dark                */
    --th-primary-tint:   #eaf1ed;  /* very light green wash (section bg)     */

    /* Dark — near-black charcoal / deep slate */
    --th-dark:           #14181b;  /* dark sections / footer                 */
    --th-dark-2:         #1e2429;  /* raised surface on dark                 */

    /* Neutrals / surfaces */
    --th-bg:             #f6f4ef;  /* warm off-white / stone (page bg)       */
    --th-surface:        #ffffff;  /* cards / surfaces                       */
    --th-surface-2:      #fbfaf7;  /* subtle raised surface on light         */

    /* Accent — muted warm copper / earth-metal */
    --th-accent:         #9a5f1f;  /* white text on this ≈ 4.6:1 (AA)        */
    --th-accent-strong:  #814f18;  /* hover                                  */
    --th-accent-soft:    #b4762e;  /* decorative / borders only (not text)   */
    --th-accent-tint:    #f5ece0;  /* light copper wash                      */

    /* Text */
    --th-ink:            #1e2422;  /* primary text ≈ 13:1 on #fff            */
    --th-ink-2:          #3a433f;  /* secondary heading ink                  */
    --th-muted:          #5f6b66;  /* muted text ≈ 4.7:1 on #fff (AA)        */
    --th-on-dark:        #e9ede9;  /* body text on dark sections             */
    --th-on-dark-muted:  #a9b2ad;  /* muted text on dark ≈ 5.2:1             */

    /* Lines / borders */
    --th-line:           #e4e0d8;  /* warm hairline                          */
    --th-line-2:         #d6d1c6;  /* stronger border                        */
    --th-line-dark:      rgba(255,255,255,0.12);

    /* Semantic */
    --th-success:        #2f7d4f;
    --th-success-bg:     #e7f2ec;
    --th-danger:         #b23b3b;
    --th-danger-bg:      #fbecec;
    --th-warning:        #9a5f1f;
    --th-warning-bg:     #f7efe3;
    --th-info:           #2c5c78;
    --th-info-bg:        #e9f1f6;

    /* ---- Typography -------------------------------------------------------- */
    --th-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                    Helvetica, Arial, sans-serif;
    --th-font-body: var(--th-font-sans);
    --th-font-head: var(--th-font-sans);

    /* Fluid type scale (clamp: min, preferred, max) */
    --th-fs-display: clamp(2.35rem, 1.6rem + 3.2vw, 3.5rem);
    --th-fs-h1:      clamp(1.95rem, 1.45rem + 2.2vw, 2.75rem);
    --th-fs-h2:      clamp(1.55rem, 1.25rem + 1.4vw, 2.1rem);
    --th-fs-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    --th-fs-h4:      1.125rem;
    --th-fs-body:    1.0625rem;   /* 17px */
    --th-fs-small:   0.875rem;    /* 14px */
    --th-fs-eyebrow: 0.78rem;

    --th-lh-tight:   1.12;
    --th-lh-snug:    1.3;
    --th-lh-body:    1.65;

    /* ---- Spacing scale ----------------------------------------------------- */
    --th-space-1: 0.25rem;
    --th-space-2: 0.5rem;
    --th-space-3: 0.75rem;
    --th-space-4: 1rem;
    --th-space-5: 1.5rem;
    --th-space-6: 2rem;
    --th-space-7: 3rem;
    --th-space-8: 4.5rem;
    --th-section-y: clamp(3rem, 2rem + 4vw, 6rem);

    /* ---- Layout ------------------------------------------------------------ */
    --th-container:   1200px;
    --th-container-narrow: 820px;

    /* ---- Radius (restrained — corporate, not app-style) -------------------- */
    --th-radius-sm: 4px;
    --th-radius:    8px;
    --th-radius-lg: 14px;
    --th-radius-pill: 999px;

    /* ---- Elevation (subtle) ------------------------------------------------ */
    --th-shadow-sm: 0 1px 2px rgba(20, 24, 27, 0.06);
    --th-shadow:    0 6px 20px rgba(20, 24, 27, 0.08);
    --th-shadow-lg: 0 16px 40px rgba(20, 24, 27, 0.12);

    /* ---- Motion ------------------------------------------------------------ */
    --th-transition: 160ms ease;
    --th-transition-slow: 260ms ease;

    /* ---- Focus ring -------------------------------------------------------- */
    --th-focus: 0 0 0 3px rgba(25, 75, 58, 0.35);
    --th-focus-accent: 0 0 0 3px rgba(154, 95, 31, 0.4);

    /* Bootstrap bridge */
    --bs-primary: var(--th-primary);
    --bs-body-color: var(--th-ink);
    --bs-body-font-family: var(--th-font-body);
}

/* ==========================================================================
   2. BASE & TYPOGRAPHY
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.th-body {
    font-family: var(--th-font-body);
    font-size: var(--th-fs-body);
    line-height: var(--th-lh-body);
    color: var(--th-ink);
    background: var(--th-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden; /* guard against accidental horizontal scroll */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--th-font-head);
    color: var(--th-primary-dark);
    line-height: var(--th-lh-tight);
    margin: 0 0 var(--th-space-4);
    text-wrap: balance;
}
h1 { font-size: var(--th-fs-h1); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--th-fs-h2); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: var(--th-fs-h3); font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: var(--th-fs-h4); font-weight: 600; }

p { margin: 0 0 var(--th-space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--th-primary); text-decoration-color: color-mix(in srgb, var(--th-primary) 40%, transparent); text-underline-offset: 2px; }
a:hover { color: var(--th-primary-dark); }

strong, b { font-weight: 700; }
small { font-size: var(--th-fs-small); }

img { max-width: 100%; height: auto; display: block; }

hr.th-rule {
    border: 0;
    border-top: 1px solid var(--th-line);
    margin: var(--th-space-6) 0;
}

/* Display class for hero-scale text */
.th-display {
    font-size: var(--th-fs-display);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--th-primary-dark);
    margin: 0 0 var(--th-space-5);
}

.th-lead {
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
    color: var(--th-muted);
    line-height: 1.6;
    max-width: 62ch;
}

.th-text-muted { color: var(--th-muted); }
.th-measure { max-width: 66ch; }

/* ==========================================================================
   3. LAYOUT: CONTAINERS, SECTIONS, DIVIDERS
   ========================================================================== */
.container, .th-container { max-width: var(--th-container); }
.th-container-narrow { max-width: var(--th-container-narrow); margin-inline: auto; }

.th-section { padding-block: var(--th-section-y); }
.th-section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

/* Section surfaces */
.th-section--light  { background: var(--th-surface); }
.th-section--stone  { background: var(--th-bg); }
.th-section--tint   { background: var(--th-primary-tint); }
.th-section--accent-tint { background: var(--th-accent-tint); }

.th-section--dark {
    background: var(--th-dark);
    color: var(--th-on-dark);
}
.th-section--dark h1, .th-section--dark h2,
.th-section--dark h3, .th-section--dark h4,
.th-section--dark .th-display { color: #fff; }
.th-section--dark .th-lead,
.th-section--dark .th-text-muted { color: var(--th-on-dark-muted); }

/* Accent divider (used under section titles / as separators) */
.th-divider {
    width: 56px;
    height: 3px;
    border: 0;
    background: var(--th-accent);
    border-radius: var(--th-radius-pill);
    margin: var(--th-space-4) 0 0;
}
.th-divider--center { margin-inline: auto; }

/* ==========================================================================
   4. SECTION BUILDING BLOCKS
   ========================================================================== */
.th-eyebrow {
    display: inline-block;
    font-size: var(--th-fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--th-accent);
    margin-bottom: var(--th-space-3);
}
.th-section--dark .th-eyebrow { color: var(--th-accent-soft); }

.th-section-head { margin-bottom: var(--th-space-7); max-width: 62ch; }
.th-section-head--center { margin-inline: auto; text-align: center; }
.th-section-head--center .th-divider { margin-inline: auto; }

.th-section-title { margin-bottom: var(--th-space-3); }
.th-section-desc  { color: var(--th-muted); font-size: 1.075rem; }
.th-section--dark .th-section-desc { color: var(--th-on-dark-muted); }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.th-btn {
    --_bg: var(--th-primary);
    --_fg: #fff;
    --_bd: var(--th-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--th-space-2);
    min-height: 46px;              /* comfortable tap target */
    padding: 0.7rem 1.4rem;
    font-family: var(--th-font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    border: 1.5px solid var(--_bd);
    border-radius: var(--th-radius);
    background: var(--_bg);
    color: var(--_fg);
    cursor: pointer;
    transition: background-color var(--th-transition), border-color var(--th-transition),
                color var(--th-transition), transform 60ms ease, box-shadow var(--th-transition);
}
.th-btn:hover { transform: translateY(-1px); box-shadow: var(--th-shadow-sm); color: var(--_fg); }
.th-btn:active { transform: translateY(0); }
.th-btn:focus-visible { outline: none; box-shadow: var(--th-focus); }

/* Primary — evergreen */
.th-btn--primary { --_bg: var(--th-primary); --_fg:#fff; --_bd: var(--th-primary); }
.th-btn--primary:hover { --_bg: var(--th-primary-dark); --_bd: var(--th-primary-dark); }

/* Accent — copper (strongest CTA, use sparingly) */
.th-btn--accent { --_bg: var(--th-accent); --_fg:#fff; --_bd: var(--th-accent); }
.th-btn--accent:hover { --_bg: var(--th-accent-strong); --_bd: var(--th-accent-strong); }
.th-btn--accent:focus-visible { box-shadow: var(--th-focus-accent); }

/* Secondary — solid neutral/dark */
.th-btn--secondary { --_bg: var(--th-dark-2); --_fg:#fff; --_bd: var(--th-dark-2); }
.th-btn--secondary:hover { --_bg: var(--th-dark); --_bd: var(--th-dark); }

/* Outline */
.th-btn--outline { --_bg: transparent; --_fg: var(--th-primary); --_bd: var(--th-primary); }
.th-btn--outline:hover { --_bg: var(--th-primary); --_fg:#fff; }

/* Outline on dark surfaces */
.th-btn--outline-light { --_bg: transparent; --_fg:#fff; --_bd: rgba(255,255,255,0.5); }
.th-btn--outline-light:hover { --_bg:#fff; --_fg: var(--th-primary-dark); --_bd:#fff; }

/* WhatsApp */
.th-btn--wa { --_bg:#1f7a4d; --_fg:#fff; --_bd:#1f7a4d; }
.th-btn--wa:hover { --_bg:#186139; --_bd:#186139; }

/* Text / link button */
.th-btn--text {
    --_bg: transparent; --_fg: var(--th-primary); --_bd: transparent;
    min-height: auto; padding: 0.35rem 0.25rem; border-radius: var(--th-radius-sm);
}
.th-btn--text:hover { --_fg: var(--th-accent-strong); transform: none; box-shadow: none; }
.th-btn--text .th-btn__arrow { transition: transform var(--th-transition); }
.th-btn--text:hover .th-btn__arrow { transform: translateX(3px); }

/* Sizes */
.th-btn--lg { min-height: 54px; padding: 0.9rem 1.8rem; font-size: 1rem; }
.th-btn--sm { min-height: 38px; padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.th-btn--block { display: flex; width: 100%; }

/* Disabled */
.th-btn:disabled, .th-btn.is-disabled,
.th-btn[aria-disabled="true"] {
    opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none;
    pointer-events: none;
}

/* Simple CSS arrow used inside text buttons (no icon dependency) */
.th-btn__arrow { display: inline-block; font-weight: 700; }

/* ==========================================================================
   6. NAVIGATION
   ========================================================================== */
.th-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--th-surface);
    border-bottom: 1px solid var(--th-line);
    transition: box-shadow var(--th-transition), background-color var(--th-transition);
}
.th-header.is-scrolled { box-shadow: var(--th-shadow); }

.th-navbar { padding-block: 0.65rem; }

.th-brand { display: flex; flex-direction: column; line-height: 1.05; text-decoration: none; }
.th-brand__name {
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--th-primary-dark);
    font-size: 1.12rem;
}
.th-brand__tag {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--th-muted);
    text-transform: uppercase;
}

.th-navbar .navbar-nav { gap: 0.15rem; }

.th-navbar .nav-link {
    position: relative;
    color: var(--th-ink);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--th-radius-sm);
    transition: color var(--th-transition);
}
.th-navbar .nav-link:hover { color: var(--th-primary); }

/* Active underline indicator (not colour-only: uses an underline bar) */
.th-navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 0.85rem; right: 0.85rem; bottom: 0.2rem;
    height: 2px;
    background: var(--th-accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--th-transition);
}
.th-navbar .nav-link.active { color: var(--th-primary); font-weight: 600; }
.th-navbar .nav-link.active::after { transform: scaleX(1); }

/* Timber flagship — subtle, elegant emphasis (weight + copper marker) */
.th-navbar .nav-link.th-nav-flagship {
    color: var(--th-primary);
    font-weight: 700;
}
.th-navbar .nav-link.th-nav-flagship::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 0.4rem;
    border-radius: 50%;
    background: var(--th-accent);
    vertical-align: middle;
}
.th-navbar .nav-link.th-nav-flagship:hover { color: var(--th-accent-strong); }

.th-navbar .th-nav-wa { color: var(--th-success); }

/* Request a Quote — strongest navbar CTA */
.th-btn-quote {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0.5rem 1.15rem;
    background: var(--th-accent);
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    border: 1.5px solid var(--th-accent);
    border-radius: var(--th-radius);
    text-decoration: none;
    transition: background-color var(--th-transition), transform 60ms ease, box-shadow var(--th-transition);
}
.th-btn-quote:hover { background: var(--th-accent-strong); border-color: var(--th-accent-strong); color:#fff; transform: translateY(-1px); box-shadow: var(--th-shadow-sm); }
.th-btn-quote:focus-visible { outline: none; box-shadow: var(--th-focus-accent); }

.th-navbar .navbar-toggler {
    border: 1px solid var(--th-line-2);
    border-radius: var(--th-radius-sm);
    padding: 0.35rem 0.5rem;
}
.th-navbar .navbar-toggler:focus-visible { outline: none; box-shadow: var(--th-focus); }

/* ==========================================================================
   7. PRODUCT COMPONENTS
   ========================================================================== */
.th-card {
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    box-shadow: var(--th-shadow-sm);
    transition: box-shadow var(--th-transition), transform var(--th-transition), border-color var(--th-transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.th-card:hover { box-shadow: var(--th-shadow); transform: translateY(-2px); }

.th-card__body { padding: var(--th-space-5); display: flex; flex-direction: column; gap: var(--th-space-3); flex: 1 1 auto; }
.th-card__title { margin: 0; font-size: 1.2rem; }
.th-card__text { color: var(--th-muted); margin: 0; font-size: 0.975rem; }
.th-card__footer { margin-top: auto; padding-top: var(--th-space-2); }

/* Category label chip */
.th-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--th-primary);
    background: var(--th-primary-tint);
    padding: 0.25rem 0.6rem;
    border-radius: var(--th-radius-pill);
    align-self: flex-start;
}
.th-chip--accent { color: var(--th-accent-strong); background: var(--th-accent-tint); }
.th-chip--muted  { color: var(--th-muted); background: #efece6; }

/* Category card (larger, leads a category group) */
.th-cat-card { }
.th-cat-card .th-card__title { font-size: 1.35rem; }

/* Flagship (Timber) — obvious but elegant: copper top rule + ribbon */
.th-card.is-flagship {
    border-color: var(--th-accent-soft);
    box-shadow: var(--th-shadow);
    position: relative;
}
.th-card.is-flagship::before {
    content: "";
    position: absolute; inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--th-accent), var(--th-accent-soft));
}
.th-flag-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--th-accent);
    padding: 0.3rem 0.7rem;
    border-radius: var(--th-radius-pill);
    align-self: flex-start;
}
.th-flag-ribbon::before { content: "★"; font-size: 0.8em; line-height: 1; }

/* Product meta row */
.th-product-meta {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
    font-size: 0.85rem; color: var(--th-muted);
}

/* Linked card media / title (product cards) */
.th-card__media-link { display: block; text-decoration: none; }
.th-card__title-link { color: inherit; text-decoration: none; }
.th-card__title-link:hover { color: var(--th-primary); }

/* ==========================================================================
   8. MEDIA & IMAGE SYSTEM
   ========================================================================== */
.th-media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--th-surface-2);
    border-bottom: 1px solid var(--th-line);
}
.th-media > img { width: 100%; height: 100%; object-fit: cover; }

.th-media--16x9 { aspect-ratio: 16 / 9; }
.th-media--4x3  { aspect-ratio: 4 / 3; }
.th-media--3x2  { aspect-ratio: 3 / 2; }
.th-media--1x1  { aspect-ratio: 1 / 1; }
.th-media--wide { aspect-ratio: 21 / 9; }

.th-media--round { border-radius: var(--th-radius); border: 1px solid var(--th-line); }

/* Neutral placeholder (NO fake photography). Clearly labelled. */
.th-media--placeholder {
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--th-muted);
    background:
        repeating-linear-gradient(
            135deg,
            #efece6 0, #efece6 12px,
            #f4f1ea 12px, #f4f1ea 24px
        );
}
.th-media__ph-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--th-ink-2);
    background: rgba(255,255,255,0.82);
    padding: 0.3rem 0.7rem;
    border-radius: var(--th-radius-pill);
    border: 1px solid var(--th-line);
}
.th-media__ph-sub { display:block; font-weight: 500; color: var(--th-muted); margin-top: 0.2rem; font-size: 0.72rem; letter-spacing: 0; }

.th-media--full { border-radius: 0; }

/* ==========================================================================
   9. B2B INFORMATION COMPONENTS
   ========================================================================== */

/* Capability card — compact, icon-optional (uses a copper index marker) */
.th-capability {
    display: flex;
    gap: var(--th-space-4);
    padding: var(--th-space-5);
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    height: 100%;
}
.th-capability__marker {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: var(--th-radius-sm);
    background: var(--th-primary-tint);
    color: var(--th-primary);
    font-weight: 800;
}
.th-capability__title { margin: 0 0 0.25rem; font-size: 1.05rem; }
.th-capability__text  { margin: 0; color: var(--th-muted); font-size: 0.95rem; }

/* Industry / application list — checkmarks (not colour-only) */
.th-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.th-check-list li { position: relative; padding-left: 1.75rem; color: var(--th-ink-2); }
.th-check-list li::before {
    content: "✓";
    position: absolute; left: 0; top: 0.05em;
    width: 1.2rem; height: 1.2rem;
    display: grid; place-items: center;
    font-size: 0.72rem; font-weight: 800;
    color: var(--th-primary);
    background: var(--th-primary-tint);
    border-radius: 50%;
}
.th-check-list--accent li::before { color: var(--th-accent-strong); background: var(--th-accent-tint); }
.th-check-list--cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.6rem 1.5rem; }

/* Info block */
.th-info-block {
    padding: var(--th-space-5);
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-left: 3px solid var(--th-accent);
    border-radius: var(--th-radius);
}

/* Trust / info strip */
.th-trust-strip {
    display: flex; flex-wrap: wrap; gap: var(--th-space-4) var(--th-space-7);
    align-items: center; justify-content: center;
    padding: var(--th-space-5);
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
}
.th-trust-strip__item {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-weight: 600; color: var(--th-ink-2); font-size: 0.95rem;
}
.th-trust-strip__item::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--th-accent);
}

/* Quotation CTA block */
.th-cta-block {
    text-align: center;
    padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
    background: var(--th-primary);
    color: #fff;
    border-radius: var(--th-radius-lg);
    background-image:
        radial-gradient(1200px 400px at 15% -20%, rgba(255,255,255,0.06), transparent),
        radial-gradient(900px 300px at 110% 120%, rgba(180,118,46,0.18), transparent);
}
.th-cta-block h2, .th-cta-block h3 { color: #fff; }
.th-cta-block p { color: rgba(255,255,255,0.85); max-width: 60ch; margin-inline: auto; }
.th-cta-block .th-eyebrow { color: var(--th-accent-soft); }

/* Buyer requirement block */
.th-buyer-block {
    padding: var(--th-space-6);
    background: var(--th-surface-2);
    border: 1px dashed var(--th-line-2);
    border-radius: var(--th-radius);
}

/* Contact detail list */
.th-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.th-contact-list li { display: flex; gap: 0.65rem; align-items: flex-start; color: var(--th-ink-2); }
.th-contact-list .th-contact-list__label {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--th-muted); font-weight: 700; min-width: 84px; padding-top: 0.15rem;
}

/* ==========================================================================
   10. SUPPLY PROCESS COMPONENT
   ========================================================================== */
.th-process {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: th-step;
    display: grid;
    gap: var(--th-space-4);
}
/* Desktop (lg+): elegant stepped horizontal flow.
   Kept at >=992px so the 7 steps never crowd/overflow on tablets. */
@media (min-width: 992px) {
    .th-process {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: var(--th-space-2);
        align-items: stretch;
    }
}
.th-process__step {
    counter-increment: th-step;
    position: relative;
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    padding: var(--th-space-5) var(--th-space-4);
    display: flex;
    gap: var(--th-space-3);
    align-items: flex-start;
}
.th-process__num {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--th-primary);
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
}
.th-process__step:last-child .th-process__num { background: var(--th-accent); }
.th-process__label { font-weight: 600; color: var(--th-ink); font-size: 0.95rem; line-height: 1.35; }

/* Connectors — vertical on mobile, horizontal on desktop */
.th-process__step::after {
    content: "";
    position: absolute;
    background: var(--th-line-2);
}
/* vertical connector (mobile + tablet, below the horizontal breakpoint) */
@media (max-width: 991.98px) {
    .th-process__step::after {
        left: calc(var(--th-space-4) + 16px);
        top: 100%;
        width: 2px;
        height: var(--th-space-4);
    }
    .th-process__step:last-child::after { display: none; }
}
/* desktop (lg+) horizontal stepped flow with connector arrows */
@media (min-width: 992px) {
    .th-process__step {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: var(--th-space-5) var(--th-space-3);
    }
    .th-process__label { font-size: 0.9rem; }
    .th-process__step::after {
        top: calc(var(--th-space-5) + 17px);
        left: 100%;
        height: 2px;
        width: var(--th-space-2);
    }
    .th-process__step:last-child::after { display: none; }
}

/* ==========================================================================
   11. FORMS
   ========================================================================== */
.th-form { display: grid; gap: var(--th-space-5); }
.th-field { display: grid; gap: 0.4rem; }
.th-field--row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--th-space-5); }

.th-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--th-ink);
}
.th-label .th-req { color: var(--th-danger); margin-left: 0.15rem; }
.th-label .th-optional { color: var(--th-muted); font-weight: 500; font-size: 0.8rem; margin-left: 0.3rem; }

.th-input, .th-select, .th-textarea {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--th-ink);
    background: var(--th-surface);
    border: 1.5px solid var(--th-line-2);
    border-radius: var(--th-radius);
    padding: 0.7rem 0.85rem;
    min-height: 46px;
    transition: border-color var(--th-transition), box-shadow var(--th-transition);
}
.th-textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.th-select { appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235f6b66' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.2rem;
}
.th-input::placeholder, .th-textarea::placeholder { color: #9aa39e; }

.th-input:focus, .th-select:focus, .th-textarea:focus {
    outline: none;
    border-color: var(--th-primary);
    box-shadow: var(--th-focus);
}

.th-help { font-size: 0.82rem; color: var(--th-muted); }

/* Validation states — reinforced with text/icon, not colour alone */
.th-field.is-invalid .th-input,
.th-field.is-invalid .th-select,
.th-field.is-invalid .th-textarea { border-color: var(--th-danger); }
.th-field.is-invalid .th-input:focus { box-shadow: 0 0 0 3px rgba(178,59,59,0.25); }
.th-error {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.82rem; color: var(--th-danger); font-weight: 500;
}
.th-error::before { content: "!"; font-weight: 800; display:inline-grid; place-items:center;
    width: 1rem; height: 1rem; border-radius: 50%; background: var(--th-danger); color:#fff; font-size: 0.7rem; }

.th-field.is-valid .th-input { border-color: var(--th-success); }
.th-success-note {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.82rem; color: var(--th-success); font-weight: 500;
}
.th-success-note::before { content: "✓"; font-weight: 800; }

/* Honeypot (anti-spam) — visually hidden but present */
.th-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Validation error summary (top of form) */
.th-form-summary {
    border: 1px solid var(--th-danger);
    background: var(--th-danger-bg);
    color: var(--th-danger);
    border-radius: var(--th-radius);
    padding: var(--th-space-4) var(--th-space-5);
    margin-bottom: var(--th-space-5);
}
.th-form-summary ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.th-form-summary a { color: var(--th-danger); }

/* Success state (after PRG) */
.th-success-panel {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: var(--th-success-bg);
    border: 1px solid var(--th-success);
    border-radius: var(--th-radius-lg);
}
.th-success-panel__mark {
    width: 56px; height: 56px; margin: 0 auto var(--th-space-4);
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--th-success); color: #fff;
    font-size: 1.6rem; font-weight: 800; line-height: 1;
}
.th-success-panel h2 { color: var(--th-success); }

/* Mobile conversion bar (mobile-only fixed bottom bar) */
.th-mobilebar { display: none; transition: transform 0.15s ease; }
@media (max-width: 767.98px) {
    .th-mobilebar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1040;
        display: flex;
        gap: 0.4rem;
        padding: 0.5rem 0.6rem;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
        background: var(--th-surface);
        border-top: 1px solid var(--th-line);
        box-shadow: 0 -4px 16px rgba(20, 24, 27, 0.10);
    }
    .th-mobilebar__btn {
        flex: 1 1 0;
        min-height: 46px;
        display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
        font-weight: 600; font-size: 0.9rem;
        text-decoration: none;
        border: 1.5px solid var(--th-primary);
        color: var(--th-primary);
        background: var(--th-surface);
        border-radius: var(--th-radius);
        padding: 0.5rem 0.5rem;
    }
    .th-mobilebar__btn--primary { background: var(--th-accent); border-color: var(--th-accent); color: #fff; }
    .th-mobilebar__btn--wa { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
    .th-mobilebar__btn:focus-visible { outline: none; box-shadow: var(--th-focus); }
    .th-mobilebar__ico { font-size: 1rem; line-height: 1; }
    /* Keep page content (footer / last form control) clear of the fixed bar. */
    body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
    /* Hide the bar while a form field is focused so it never covers the input. */
    body.th-typing .th-mobilebar { transform: translateY(120%); }
}
@media (prefers-reduced-motion: reduce) { .th-mobilebar { transition: none; } }

/* ==========================================================================
   ADMIN AREA (Batch 11) — minimal, brand-consistent shell
   ========================================================================== */
.th-admin { display: flex; flex-direction: column; min-height: 100vh; background: var(--th-bg); }
.th-admin-top {
    background: var(--th-surface);
    border-bottom: 1px solid var(--th-line);
    box-shadow: var(--th-shadow-sm);
}
.th-admin-top__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--th-space-3);
    padding-block: 0.7rem;
}
.th-admin-brand { display: inline-flex; align-items: baseline; gap: 0.5rem; text-decoration: none; }
.th-admin-brand__name { font-weight: 800; color: var(--th-primary-dark); letter-spacing: 0.01em; }
.th-admin-brand__tag {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
    color: #fff; background: var(--th-accent); padding: 0.1rem 0.45rem; border-radius: var(--th-radius-sm);
}
.th-admin-top__account { display: inline-flex; align-items: center; gap: var(--th-space-3); }
.th-admin-top__user { font-weight: 600; font-size: 0.9rem; color: var(--th-ink-2); }
.th-admin-logout { margin: 0; }
.th-admin-main { flex: 1 0 auto; }
.th-admin-foot {
    border-top: 1px solid var(--th-line);
    padding-block: var(--th-space-4);
    color: var(--th-muted); font-size: 0.85rem; text-align: center;
    background: var(--th-surface);
}

/* Login card */
.th-admin-authwrap {
    display: grid; place-items: center;
    padding: clamp(1.5rem, 1rem + 4vw, 4rem) var(--th-space-4);
}
.th-admin-card {
    width: 100%; max-width: 420px;
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius-lg);
    box-shadow: var(--th-shadow);
    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}
.th-admin-card__head { margin-bottom: var(--th-space-5); }
.th-admin-card__title { margin: 0.35rem 0 0.4rem; }
.th-admin-card__sub { color: var(--th-muted); margin: 0; font-size: 0.95rem; }

/* Demo access panel (development only) */
.th-admin-demo {
    margin-top: var(--th-space-5);
    padding: var(--th-space-4);
    border: 1px dashed var(--th-line-2);
    border-radius: var(--th-radius);
    background: var(--th-surface-2);
}
.th-admin-demo__badge {
    display: inline-block; font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--th-accent-strong); background: var(--th-accent-tint);
    padding: 0.15rem 0.5rem; border-radius: var(--th-radius-pill); margin-bottom: var(--th-space-2);
}
.th-admin-demo__title { font-size: 1rem; margin: 0 0 0.25rem; }
.th-admin-demo__text { color: var(--th-muted); font-size: 0.85rem; margin: 0 0 var(--th-space-3); }
.th-admin-demo__creds { margin: 0 0 var(--th-space-3); display: grid; gap: 0.25rem; }
.th-admin-demo__creds > div { display: flex; gap: 0.5rem; font-size: 0.85rem; }
.th-admin-demo__creds dt { font-weight: 700; color: var(--th-ink-2); min-width: 72px; margin: 0; }
.th-admin-demo__creds dd { margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--th-ink); }

/* Safe map embed container (responsive) */
.th-map-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    background: var(--th-surface-2);
}
.th-map { display: block; }

fieldset.th-group { border: 1px solid var(--th-line); border-radius: var(--th-radius); padding: var(--th-space-5); margin: 0; }
fieldset.th-group legend { font-weight: 700; font-size: 0.95rem; color: var(--th-primary-dark); padding: 0 0.5rem; width: auto; }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.th-footer {
    background: var(--th-dark);
    color: var(--th-on-dark-muted);
    padding-block: var(--th-space-8) var(--th-space-5);
    margin-top: var(--th-space-8);
}
.th-footer__top { display: grid; gap: var(--th-space-6); }
.th-footer__brand { font-size: 1.25rem; font-weight: 800; color: #fff; letter-spacing: 0.01em; }
.th-footer__tag { color: var(--th-accent-soft); font-weight: 600; margin: 0.35rem 0 var(--th-space-3); font-size: 0.9rem; }
.th-footer__desc { color: var(--th-on-dark-muted); font-size: 0.95rem; max-width: 44ch; }

.th-footer__heading {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em;
    color: #fff; margin-bottom: var(--th-space-4); font-weight: 700;
}
.th-footer__links, .th-footer__contact { list-style: none; margin: 0; padding: 0; }
.th-footer__links li, .th-footer__contact li { margin-bottom: 0.6rem; }
.th-footer__links a, .th-footer__contact a { color: var(--th-on-dark-muted); text-decoration: none; transition: color var(--th-transition); }
.th-footer__links a:hover, .th-footer__contact a:hover { color: #fff; }

.th-footer__cta {
    background: var(--th-dark-2);
    border: 1px solid var(--th-line-dark);
    border-radius: var(--th-radius);
    padding: var(--th-space-5);
}
.th-footer__cta h3 { color:#fff; font-size: 1.05rem; margin-bottom: 0.4rem; }
.th-footer__cta p { color: var(--th-on-dark-muted); font-size: 0.9rem; margin-bottom: var(--th-space-4); }

.th-footer__bottom {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--th-space-2);
    border-top: 1px solid var(--th-line-dark);
    margin-top: var(--th-space-7);
    padding-top: var(--th-space-4);
    font-size: 0.85rem;
    color: var(--th-on-dark-muted);
}

.th-pending {
    color: var(--th-on-dark-muted);
    font-style: italic;
    font-size: 0.88rem;
    opacity: 0.85;
}
/* pending marker on light surfaces */
.th-section .th-pending, .th-devpanel .th-pending { color: var(--th-muted); }

/* ==========================================================================
   13. FLASH MESSAGES & UTILITIES
   ========================================================================== */
.th-flash-container { margin-top: var(--th-space-4); }

.th-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.25rem 0.6rem; border-radius: var(--th-radius-pill);
}
.th-badge--accent { color:#fff; background: var(--th-accent); }
.th-badge--dark { color:#fff; background: var(--th-dark-2); }
.th-badge--soft { color: var(--th-primary); background: var(--th-primary-tint); }

.th-status {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.9rem; border-radius: var(--th-radius);
    font-weight: 600; font-size: 0.9rem;
}
.th-status--ok   { background: var(--th-success-bg); color: var(--th-success); }
.th-status--warn { background: var(--th-danger-bg);  color: var(--th-danger); }
.th-status__dot  { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; }

/* ==========================================================================
   14. DESIGN-PREVIEW HELPERS (Batch 3 preview page only)
   ========================================================================== */
.th-pv-hero {
    padding-block: clamp(2.5rem, 2rem + 4vw, 5rem);
    background:
        radial-gradient(900px 380px at 100% -10%, var(--th-primary-tint), transparent),
        var(--th-bg);
}
.th-pv-band {
    border-top: 1px solid var(--th-line);
}
.th-pv-label {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em;
    font-weight: 700; color: var(--th-muted); margin-bottom: var(--th-space-5);
}
.th-swatch {
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    overflow: hidden;
    background: var(--th-surface);
}
.th-swatch__chip { height: 76px; }
.th-swatch__meta { padding: 0.6rem 0.7rem; font-size: 0.8rem; }
.th-swatch__name { font-weight: 700; color: var(--th-ink); display: block; }
.th-swatch__hex  { color: var(--th-muted); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.75rem; }

.th-type-row { padding: 0.5rem 0; border-bottom: 1px dashed var(--th-line); }
.th-type-row:last-child { border-bottom: 0; }
.th-type-row small { color: var(--th-muted); font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Developer panel (diagnostics kept small & out of the way) */
.th-devpanel {
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    background: var(--th-surface-2);
}
.th-devpanel > summary {
    cursor: pointer;
    padding: var(--th-space-4) var(--th-space-5);
    font-weight: 600;
    color: var(--th-ink-2);
    list-style: none;
}
.th-devpanel > summary::-webkit-details-marker { display: none; }
.th-devpanel > summary::before { content: "▸ "; color: var(--th-muted); }
.th-devpanel[open] > summary::before { content: "▾ "; }
.th-devpanel__body { padding: 0 var(--th-space-5) var(--th-space-5); }

/* ==========================================================================
   14b. HOMEPAGE HERO & FLAGSHIP (Batch 4)
   ========================================================================== */
.th-hero {
    padding-block: clamp(2.5rem, 1.8rem + 4vw, 5.5rem);
    background:
        radial-gradient(1100px 460px at 88% -10%, var(--th-primary-tint), transparent 60%),
        radial-gradient(700px 300px at -10% 120%, var(--th-accent-tint), transparent 55%),
        var(--th-bg);
    border-bottom: 1px solid var(--th-line);
}
.th-hero__title {
    font-size: var(--th-fs-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--th-primary-dark);
    margin: var(--th-space-2) 0 var(--th-space-4);
}
.th-hero__lead { margin-bottom: var(--th-space-5); }
.th-hero__visual { box-shadow: var(--th-shadow); }

/* Flagship Timber section — generous emphasis */
.th-flagship__title { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.5rem); }

/* Anchor scroll offset — keeps section headings clear of the sticky header
   when navigating to same-page anchors (#about, #timber, …). Reusable across
   every section carrying an id. */
section[id] { scroll-margin-top: 88px; }

/* Breadcrumb (reusable) */
.th-breadcrumb {
    padding-block: var(--th-space-4);
    background: var(--th-surface);
    border-bottom: 1px solid var(--th-line);
}
.th-breadcrumb ol {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
    font-size: 0.85rem;
}
.th-breadcrumb li { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--th-muted); }
.th-breadcrumb a { color: var(--th-muted); text-decoration: none; }
.th-breadcrumb a:hover { color: var(--th-primary); }
.th-breadcrumb li[aria-current] { color: var(--th-ink); font-weight: 600; }
.th-breadcrumb li + li::before { content: "/"; color: var(--th-line-2); margin-right: 0.2rem; }

/* Timber page: give the flagship feature a touch more presence */
.th-feature-media { box-shadow: var(--th-shadow); }
.th-spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.75rem 1.5rem; }
@media (max-width: 575.98px) { .th-spec-grid { grid-template-columns: 1fr; } }

/* Gallery — category filter chips (accessible links, active state) */
.th-filter {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    justify-content: center;
    list-style: none; margin: 0; padding: 0;
}
.th-filter a {
    display: inline-flex; align-items: center;
    font-size: 0.85rem; font-weight: 600;
    color: var(--th-ink-2);
    background: var(--th-surface);
    border: 1px solid var(--th-line-2);
    padding: 0.4rem 0.9rem;
    border-radius: var(--th-radius-pill);
    text-decoration: none;
    transition: background-color var(--th-transition), color var(--th-transition), border-color var(--th-transition);
}
.th-filter a:hover { border-color: var(--th-primary); color: var(--th-primary); }
.th-filter a[aria-current="true"] {
    background: var(--th-primary);
    border-color: var(--th-primary);
    color: #fff;
}

/* Gallery — cards & captions */
.th-gallery__card { display: flex; flex-direction: column; height: 100%; }
.th-gallery__cap {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding-top: 0.6rem;
}
.th-gallery__title { font-weight: 600; font-size: 0.9rem; color: var(--th-ink); }
.th-gallery-empty { text-align: center; }

/* Approach card — title + list block on a dark section (no inline styles) */
.th-approach {
    height: 100%;
    padding: var(--th-space-5);
    background: var(--th-dark-2);
    border: 1px solid var(--th-line-dark);
    border-radius: var(--th-radius);
}
.th-approach__title { color: #fff; margin-bottom: var(--th-space-3); font-size: 1.05rem; }
.th-approach__text { color: var(--th-on-dark-muted); margin: 0; font-size: 0.95rem; }
.th-approach .th-check-list li { color: var(--th-on-dark-muted); }
.th-approach .th-check-list li strong { color: #fff; }
.th-approach .th-check-list li::before { color: var(--th-accent-soft); background: rgba(180, 118, 46, 0.16); }
.th-section--dark .th-help { color: var(--th-on-dark-muted); }

/* ==========================================================================
   15. ACCESSIBILITY & REDUCED MOTION
   ========================================================================== */
:focus-visible { outline: 2px solid var(--th-primary); outline-offset: 2px; }
a:focus-visible, .th-btn:focus-visible, .th-btn-quote:focus-visible { outline: none; }

.skip-link {
    position: absolute;
    top: var(--th-space-2); left: var(--th-space-2);
    z-index: 1080;
    background: var(--th-primary);
    color: #fff;
    padding: var(--th-space-2) var(--th-space-4);
    border-radius: var(--th-radius);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .th-btn:hover, .th-btn-quote:hover, .th-card:hover { transform: none; }
}

/* ==========================================================================
   16. RESPONSIVE REFINEMENTS  (priority widths: 360 / 390 / 768 / 1024 / 1366)
   ========================================================================== */

/* Below the Bootstrap lg breakpoint: mobile menu polish */
@media (max-width: 991.98px) {
    .th-navbar .navbar-collapse {
        margin-top: var(--th-space-3);
        padding: var(--th-space-3);
        background: var(--th-surface);
        border: 1px solid var(--th-line);
        border-radius: var(--th-radius);
        box-shadow: var(--th-shadow);
    }
    .th-navbar .navbar-nav { gap: 0.1rem; }
    .th-navbar .nav-link { padding: 0.65rem 0.75rem; border-radius: var(--th-radius-sm); }
    .th-navbar .nav-link::after { display: none; } /* underline replaced by left marker on mobile */
    .th-navbar .nav-link.active { background: var(--th-primary-tint); }
    .th-navbar .nav-link.th-nav-flagship { background: var(--th-accent-tint); }
    .th-btn-quote { width: 100%; justify-content: center; margin-top: var(--th-space-2); }
    .th-navbar .th-nav-wa { display: inline-block; }
}

/* Two-column form fields collapse on small screens */
@media (max-width: 575.98px) {
    .th-field--row { grid-template-columns: 1fr; }
    .th-check-list--cols { grid-template-columns: 1fr; }
}

/* Very small phones (360px): tighten type & spacing, prevent overflow */
@media (max-width: 430px) {
    .th-brand__name { font-size: 1rem; }
    .th-brand__tag { display: none; }
    .th-cta-block { padding: 1.75rem 1.25rem; }
    .th-trust-strip { gap: var(--th-space-3); }
    .th-process__step { padding: var(--th-space-4); }
}

/* Contain any wide preview rows */
.th-scroll-x { overflow-x: auto; }