/*
 * CSS Variables for A1 Steels Theme
 * Converted from SCSS variables with WordPress-specific enhancements
 * Provides consistent design tokens across the entire theme
 */

 :root {
  /* ================= COLOR SYSTEM ================= */
  --color-primary: #E5383B;
  --color-secondary: #282828;
  --color-accent: #fbc02d;
  --color-bg: #fff;
  --color-text: #222;
  --color-muted: #888;
  --color-light-gray: #f5f5f5;
  --color-border: #e0e0e0;
  --color-shadow: rgba(0, 0, 0, 0.1);

  /* ================= TYPOGRAPHY SYSTEM ================= */
  --font-base: "Jost", Arial, Helvetica, sans-serif;
  --font-heading: "Jost", Arial, Helvetica, sans-serif;

  /* Fluid Typography Scale */
  --font-size-base: calc(1rem + 0.2vw);
  --font-size-lg: calc(1.5rem + 0.5vw);
  --font-size-xl: calc(2rem + 0.7vw);
  --font-size-xxl: calc(2.5rem + 1vw);
  --font-size-sm: calc(0.9rem + 0.1vw);
  --font-size-xs: calc(0.8rem + 0.05vw);

  /* ================= SPACING SYSTEM ================= */
  --space-xs: calc(0.5rem + 0.2vw);
  --space-sm: calc(1rem + 0.3vw);
  --space-md: calc(2rem + 0.5vw);
  --space-lg: calc(3rem + 1vw);
  --space-xl: calc(4rem + 1.5vw);
  --space-xxl: calc(6rem + 2vw);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ================= RESPONSIVE VARIABLE ADJUSTMENTS ================= */

/* ---- Mobile (≤ 767px) ---- */
@media (max-width: 767px) {
  :root {
    --hero-title-fs: clamp(2rem, 2.5vw + 1rem, 2rem);
    /* ~32px fixed-ish for small phones */
    --hero-title-lh: clamp(2.625rem, 2.6vw + 1rem, 2.625rem);
    /* ~42px */

    /* Section Title */
    --section-title-fs: clamp(1.5rem, 2.5vw + 1rem, 1.6rem);
    /* ~24–26px */
    --section-title-lh: clamp(2rem, 3vw + 1.2rem, 2.15rem);
    /* ~32–34px */
    --section-title-fw: 700;

    /* Paragraph */
    --section-para-fs: clamp(1rem, 1vw + 0.85rem, 1rem);
    /* ~16px */
    --section-para-lh: clamp(1.25rem, 1.2vw + 0.9rem, 1.3rem);
    /* ~20px */
    --section-para-fw: 400;

    --hero-subtitle-fs: clamp(1.1rem, 1.5vw + 0.9rem, 1.125rem);
    /* ~17–18px */
    --hero-subtitle-lh: clamp(1.35rem, 1.5vw + 1rem, 1.4rem);
    /* ~21–22px */
    --hero-subtitle-fw: 500;

    --hero-logo-h: clamp(51px, 4vw, 60px);
    --hero-logos-gap: 2.5rem;

    --form-title-fs: clamp(1.1rem, 0.6vw + 1rem, 1.25rem);
    /* ~17–20px */
    --form-title-lh: clamp(1.45rem, 0.7vw + 1.2rem, 1.65rem);
    /* ~22–26px */
    --form-title-fw: 800;


    /* FAQ Question */
    --faq-q-fs: clamp(1.125rem, 1vw + 1rem, 1.25rem);
    /* ~18–20px → target 20px */
    --faq-q-lh: clamp(1.25rem, 0.8vw + 1rem, 1.5rem);
    /* ~18–22px → target 20px */
    --faq-q-fw: 700;

    /* FAQ Answer */
    --faq-a-fs: clamp(0.85rem, 0.8vw + 0.6rem, 0.9rem);
    /* ~13–14px → target 14px */
    --faq-a-lh: clamp(1rem, 1vw + 0.6rem, 1.2rem);
    /* ~16–18px → target 18.11px */
    --faq-a-fw: 400;

    --feature-card-title-fs: clamp(1.06rem, 1.6vw + 0.6rem, 1.125rem);
    /* ~17–18px (mobile target 18px) */
    --feature-card-title-lh: clamp(1.35rem, 1.6vw + 0.8rem, 1.439rem);
    /* ~21.6–23.03px (mobile target 23.03px) */

    --products-card-title-fs: clamp(0.95rem, 1.2vw + 0.5rem, 1rem);
    /* ~15.2–16px (mobile target 16px) */
    --products-card-title-lh: clamp(0.95rem, 1.2vw + 0.5rem, 1rem);
    /* 16px (100% line-height) */

    --insight-card-title-fs: clamp(0.95rem, 1.2vw + 0.5rem, 1rem);
    /* ~15.2–16px */
    --insight-card-title-lh: clamp(1.1rem, 1.3vw + 0.5rem, 1.25rem);
    /* ~17.6–20px (mobile target line-height 20px = 1.25rem) */
  }
}

/* ---- Tablet (768–1023px) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --hero-title-fs: clamp(2.6rem, 2.2vw + 1.4rem, 3.6rem);
    /* min ≈ 44px → max = 3.75rem (60px) */
    --hero-title-lh: clamp(3.4rem, 2.5vw + 1.4rem, 3.8rem);
    /* allow approach toward 81px line-height */

    /* Section Title */
    --section-title-fs: clamp(1.9rem, 1vw + 1.4rem, 2.1rem);
    /* ~30–34px */
    --section-title-lh: clamp(2.4rem, 1.5vw + 1.8rem, 2.6rem);
    /* ~38–42px */
    --section-title-fw: 700;

    /* Paragraph */
    --section-para-fs: 1.1rem;
    /* 18px */
    --section-para-lh: 1.4rem;
    /* 24px */
    --section-para-fw: 400;
    /* ~40–48px */
    --hero-subtitle-fs: clamp(1.35rem, 1vw + 1.1rem, 1.4rem);
    /* ~21–22px */
    --hero-subtitle-lh: clamp(1.4rem, 0.5vw + 1.2rem, 1.45rem);
    /* ~22px */
    --hero-subtitle-fw: 500;

    --hero-logo-h: clamp(38px, 3vw, 48px);
    --hero-logos-gap: 1.4rem;

    --form-title-fs: clamp(1.2rem, 0.6vw + 1rem, 1.4rem);
    /* ~18–22px */
    --form-title-lh: clamp(1.55rem, 0.8vw + 1.3rem, 1.9rem);
    /* ~24–30px */
    --form-title-fw: 800;

    /* FAQ Question */
    --faq-q-fs: clamp(1.45rem, 0.6vw + 1.2rem, 1.55rem);
    /* ~23–25px → target 24.125px */
    --faq-q-lh: clamp(1.8rem, 0.8vw + 1.4rem, 1.95rem);
    /* ~28–31px → target 30.19px */
    --faq-q-fw: 700;

    /* FAQ Answer */
    --faq-a-fs: clamp(0.9rem, 0.6vw + 0.75rem, 0.95rem);
    /* ~14px */
    --faq-a-lh: clamp(1.1rem, 0.7vw + 0.85rem, 1.2rem);
    /* ~18px */
    --faq-a-fw: 400;

    --feature-card-title-fs: clamp(1.35rem, 1.1vw + 0.9rem, 1.5rem);
    /* ~21–24px (tablet target 24px = 1.5rem) */
    --feature-card-title-lh: clamp(1.6rem, 1.2vw + 1rem, 1.79rem);
    /* ~25.6–28.64px (tablet target 28.64px = 1.79rem) */

    --products-card-title-fs: clamp(1.2rem, 0.9vw + 0.7rem, 1.375rem);
    /* ~19–22px (tablet = 22px = 1.375rem) */
    --products-card-title-lh: clamp(1.2rem, 0.9vw + 0.7rem, 1.375rem);
    /* 100% LH */

    --insight-card-title-fs: clamp(0.95rem, 0.8vw + 0.6rem, 1rem);
    /* hold ~16px (tablet target 16px) */
    --insight-card-title-lh: clamp(0.95rem, 0.8vw + 0.6rem, 1rem);
    /* 100% (16px) */
  }
}

/* ---- Small Laptop (1024–1279px) ---- */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --hero-title-fs: clamp(3.5rem, 1.6vw + 1.8rem, 4rem);
    /* ~56px → caps at 4rem (64px) */
    --hero-title-lh: clamp(4rem, 1.8vw + 2rem, 5.0625rem);
    /* trending to 81px */

    --section-title-fs: clamp(2.3rem, 1vw + 1.8rem, 2.5rem);
    /* ~36–40px instead of 42–46px */
    --section-title-lh: clamp(2.9rem, 1.3vw + 2.3rem, 3.1rem);
    /* ~46–50px instead of 50–54px */
    --section-title-fw: 700;

    --section-para-fs: clamp(1.1rem, 0.3vw + 1rem, 1.125rem);
    /* ~17–18px */
    --section-para-lh: clamp(1.5rem, 0.4vw + 1.3rem, 1.55rem);
    /* ~23–24px */
    --section-para-fw: 400;

    --hero-subtitle-fs: clamp(1.4rem, 0.8vw + 1.2rem, 1.45rem);
    /* ~22–23px */
    --hero-subtitle-lh: clamp(1.45rem, 0.6vw + 1.25rem, 1.5rem);
    /* ~22–23px */
    --hero-subtitle-fw: 500;

    --hero-logo-h: clamp(50px, 2.5vw, 65px);
    --hero-logos-gap: 2rem;

    --form-title-fs: clamp(1.3rem, 0.5vw + 1.1rem, 1.55rem);
    /* ~20–24px */
    --form-title-lh: clamp(1.7rem, 0.7vw + 1.4rem, 2.1rem);
    /* ~26–34px */
    --form-title-fw: 800;

    --faq-q-fs: clamp(1.6rem, 0.5vw + 1.3rem, 1.8rem);
    /* ~26–29px */
    --faq-q-lh: clamp(2rem, 0.7vw + 1.6rem, 2.2rem);
    /* ~32–35px */
    --faq-q-fw: 700;

    --faq-a-fs: clamp(0.95rem, 0.4vw + 0.8rem, 1rem);
    /* ~15–16px */
    --faq-a-lh: clamp(1.25rem, 0.5vw + 1rem, 1.5rem);
    /* ~20–24px */
    --faq-a-fw: 400;

    --feature-card-title-fs: clamp(1.45rem, 0.9vw + 1.05rem, 1.75rem);
    /* ~23–28px — transitions toward desktop */
    --feature-card-title-lh: clamp(1.79rem, 0.95vw + 1.1rem, 1.9rem);
    /* ~28.6–30.4px */

    --products-card-title-fs: clamp(1.3rem, 0.7vw + 0.85rem, 1.45rem);
    /* ~20.8–23.2px — transitioning to desktop */
    --products-card-title-lh: clamp(1.3rem, 0.7vw + 0.85rem, 1.45rem);

    --insight-card-title-fs: clamp(1rem, 0.6vw + 0.7rem, 1.05rem);
    /* ~16–16.8px */
    --insight-card-title-lh: clamp(1rem, 0.6vw + 0.7rem, 1.05rem);
  }
}

/* ---- Medium Laptop (1280–1439px) ---- */
@media (min-width: 1280px) and (max-width: 1439px) {
  :root {
    --hero-title-fs: clamp(3.75rem, 1.2vw + 2.1rem, 4.25rem);
    /* ~60px → ≈68px max */
    --hero-title-lh: clamp(4.5rem, 1.6vw + 2.4rem, 5.0625rem);
    /* ~72–81px range */

    --section-title-fs: clamp(2.8rem, 1vw + 2.2rem, 3rem);
    /* ~45–48px */
    --section-title-lh: clamp(3.4rem, 1.2vw + 2.8rem, 3.6rem);
    /* ~54–57px */
    --section-title-fw: 700;

    --section-para-fs: clamp(1.125rem, 0.25vw + 1rem, 1.15rem);
    /* ~18px */
    --section-para-lh: clamp(1.55rem, 0.3vw + 1.3rem, 1.6rem);
    /* ~24px */
    --section-para-fw: 400;
    --hero-subtitle-fs: clamp(1.45rem, 0.6vw + 1.25rem, 1.5rem);
    /* ~23–24px */
    --hero-subtitle-lh: clamp(1.5rem, 0.5vw + 1.3rem, 1.55rem);
    /* ~23–24px */
    --hero-subtitle-fw: 500;

    --hero-logo-h: clamp(65px, 2.5vw, 75px);
    --hero-logos-gap: 2.5rem;

    --form-title-fs: clamp(1.35rem, 0.5vw + 1.2rem, 1.65rem);
    /* ~21–26px */
    --form-title-lh: clamp(1.8rem, 0.7vw + 1.5rem, 2.3rem);
    /* ~28–36px */
    --form-title-fw: 800;

    --faq-q-fs: clamp(1.7rem, 0.4vw + 1.4rem, 1.9rem);
    /* ~27–30px */
    --faq-q-lh: clamp(2.1rem, 0.5vw + 1.7rem, 2.4rem);
    /* ~34–38px */

    --faq-a-fs: clamp(1rem, 0.35vw + 0.85rem, 1.1rem);
    /* ~16–17px */
    --faq-a-lh: clamp(1.35rem, 0.4vw + 1.1rem, 1.6rem);
    /* ~22–25px */

    --feature-card-title-fs: clamp(1.6rem, 0.7vw + 1.2rem, 1.9rem);
    /* ~25.6–30.4px */
    --feature-card-title-lh: clamp(1.9rem, 0.8vw + 1.2rem, 2rem);
    /* ~30.4–32px */

    --products-card-title-fs: clamp(1.35rem, 0.6vw + 0.95rem, 1.5rem);
    /* ~21.6–24px */
    --products-card-title-lh: clamp(1.35rem, 0.6vw + 0.95rem, 1.5rem);

    --insight-card-title-fs: clamp(1.05rem, 0.5vw + 0.75rem, 1.1rem);
    /* approaching 18px */
    --insight-card-title-lh: clamp(1.05rem, 0.5vw + 0.75rem, 1.1rem);

  }
}

/* ---- Standard Laptop (1440–1599px) ---- */
@media (min-width: 1440px) and (max-width: 1599px) {
  :root {
    --hero-title-fs: clamp(4rem, 1vw + 2.5rem, 4.5rem);
    /* min ~64px, max 4.5rem (72px) */
    --hero-title-lh: clamp(4.875rem, 1.1vw + 2.8rem, 5.0625rem);
    /* line-height approaches 81px (5.0625rem) */

    --section-title-fs: clamp(3rem, 0.8vw + 2.4rem, 3.2rem);
    /* ~48–50px */
    --section-title-lh: clamp(3.6rem, 1vw + 3rem, 3.75rem);
    /* ~58–60px */
    --section-title-fw: 700;

    --section-para-fs: 1.125rem;
    /* 18px */
    --section-para-lh: 1.5rem;
    /* 24px */
    --section-para-fw: 400;

    /* Hero subtitle */
    --hero-subtitle-fs: clamp(1.5rem, 0.5vw + 1.3rem, 1.55rem);
    /* ~24px */
    --hero-subtitle-lh: clamp(1.55rem, 0.4vw + 1.35rem, 1.6rem);
    /* ~24px */
    --hero-subtitle-fw: 500;

    /* Hero partner logos (per your spec for 1440–1599) */
    --hero-logo-h: 85px;
    --hero-logos-gap: 3rem;

    /* Component / Form titles (smaller than section titles, larger than body) */
    --form-title-fs: clamp(1.4rem, 0.6vw + 1.2rem, 1.8rem);
    /* ~22–28px */
    --form-title-lh: clamp(1.9rem, 0.8vw + 1.6rem, 2.4rem);
    /* ~30–38px */
    --form-title-fw: 800;

    --faq-q-fs: clamp(1.9rem, 0.4vw + 1.5rem, 2rem);
    /* ~30–32px */
    --faq-q-lh: clamp(2.4rem, 0.5vw + 1.9rem, 2.5rem);
    /* ~38–40px */

    --faq-a-fs: clamp(1.05rem, 0.3vw + 0.9rem, 1.125rem);
    /* ~17–18px */
    --faq-a-lh: clamp(1.45rem, 0.35vw + 1.2rem, 1.55rem);
    /* ~23–24px */

    --feature-card-title-fs: clamp(1.9rem, 0.6vw + 1.3rem, 2rem);
    /* ~30.4–32px — desktop target 32px = 2rem */
    --feature-card-title-lh: clamp(1.9rem, 0.55vw + 1.35rem, 2rem);
    /* ~30.4–32px (100% line-height at desktop) */

    --products-card-title-fs: clamp(1.45rem, 0.45vw + 1rem, 1.5rem);
    /* ~23.2–24px (desktop target 24px = 1.5rem) */
    --products-card-title-lh: clamp(1.45rem, 0.45vw + 1rem, 1.5rem);

    --insight-card-title-fs: clamp(1.15rem, 0.4vw + 0.8rem, 1.25rem);
    /* ~18.4–20px — desktop target 20px = 1.25rem */
    --insight-card-title-lh: clamp(1.15rem, 0.4vw + 0.8rem, 1.25rem);
  }
}

/* ---- Large Desktop (1600–1919px) ---- */
@media (min-width: 1600px) and (max-width: 1919px) {
  :root {
    --hero-title-fs: clamp(4.25rem, 0.9vw + 2.6rem, 4.5rem);
    /* ~68–72px */
    --hero-title-lh: clamp(4.875rem, 0.9vw + 2.9rem, 5.0625rem);
    /* ~78–81px */

    --section-title-fs: clamp(3rem, 0.8vw + 2.5rem, 3.2rem);
    /* ~50px */
    --section-title-lh: clamp(3.6rem, 1vw + 3rem, 3.75rem);
    /* ~60px */
    --section-title-fw: 700;

    --section-para-fs: 1.125rem;
    /* 18px */
    --section-para-lh: 1.5rem;
    /* 24px */
    --section-para-fw: 400;

    --hero-subtitle-fs: clamp(1.5rem, 0.4vw + 1.35rem, 1.55rem);
    /* ~24px */
    --hero-subtitle-lh: clamp(1.55rem, 0.4vw + 1.35rem, 1.6rem);
    /* ~24px */
    --hero-subtitle-fw: 500;

    --hero-logo-h: 95px;
    --hero-logos-gap: 3.2rem;

    --form-title-fs: clamp(1.6rem, 0.6vw + 1.4rem, 2rem);
    /* ~25–32px */
    --form-title-lh: clamp(2.2rem, 0.8vw + 1.8rem, 2.6rem);
    /* ~34–42px */

    --faq-q-fs: 2rem;
    /* 32px */
    --faq-q-lh: 2.5rem;
    /* 40px */

    --faq-a-fs: 1.125rem;
    /* 18px */
    --faq-a-lh: 1.5rem;
    /* 24px */

    --feature-card-title-fs: clamp(1.95rem, 0.45vw + 1.35rem, 2rem);
    /* ~31.2–32px */
    --feature-card-title-lh: clamp(1.95rem, 0.45vw + 1.35rem, 2rem);
    /* keep near 32px line-height */

    --products-card-title-fs: clamp(1.5rem, 0.4vw + 1.02rem, 1.5rem);
    /* hold at 24px */
    --products-card-title-lh: clamp(1.5rem, 0.4vw + 1.02rem, 1.5rem);

    --insight-card-title-fs: clamp(1.2rem, 0.35vw + 0.85rem, 1.25rem);
    /* hold near 20px */
    --insight-card-title-lh: clamp(1.2rem, 0.35vw + 0.85rem, 1.25rem);
  }
}

/* ---- Wide Desktop (1920–2499px) ---- */
@media (min-width: 1920px) and (max-width: 2499px) {
  :root {
    --hero-title-fs: clamp(4.5rem, 0.6vw + 2.7rem, 4.75rem);
    /* min 72px, can go up to ~76px */
    --hero-title-lh: clamp(5.0625rem, 0.6vw + 3rem, 5.25rem);
    /* ~81–84px */

    --section-title-fs: clamp(3.1rem, 0.6vw + 2.7rem, 3.3rem);
    /* ~50–52px */
    --section-title-lh: clamp(3.7rem, 0.8vw + 3.1rem, 3.9rem);
    /* ~60–62px */
    --section-title-fw: 700;

    --section-para-fs: 1.125rem;
    /* 18px */
    --section-para-lh: 1.5rem;
    /* 24px */
    --section-para-fw: 400;

    --hero-subtitle-fs: clamp(1.5rem, 0.35vw + 1.35rem, 1.6rem);
    /* ~24–25px */
    --hero-subtitle-lh: clamp(1.55rem, 0.35vw + 1.35rem, 1.65rem);
    /* ~24–25px */
    --hero-subtitle-fw: 500;

    --hero-logo-h: 105px;
    --hero-logos-gap: 3.5rem;

    --form-title-fs: clamp(1.8rem, 0.55vw + 1.6rem, 2.2rem);
    /* ~28–35px */
    --form-title-lh: clamp(2.4rem, 0.75vw + 2rem, 2.8rem);
    /* ~36–44px */

    --faq-q-fs: clamp(2rem, 0.4vw + 1.8rem, 2.2rem);
    /* ~32–35px */
    --faq-q-lh: clamp(2.5rem, 0.4vw + 2.2rem, 2.8rem);
    /* ~40–45px */

    --faq-a-fs: clamp(1.125rem, 0.3vw + 1rem, 1.25rem);
    /* ~18–20px */
    --faq-a-lh: clamp(1.5rem, 0.4vw + 1.25rem, 1.65rem);
    /* ~24–26px */

    --feature-card-title-fs: clamp(2rem, 0.35vw + 1.4rem, 2.05rem);
    /* ~32–32.8px (slight upscale allowed) */
    --feature-card-title-lh: clamp(2rem, 0.35vw + 1.4rem, 2.05rem);
    /* keep visually balanced */

    --products-card-title-fs: clamp(1.5rem, 0.35vw + 1.05rem, 1.55rem);
    /* small allowed growth ~24–24.8px */
    --products-card-title-lh: clamp(1.5rem, 0.35vw + 1.05rem, 1.55rem);

    --insight-card-title-fs: clamp(1.25rem, 0.3vw + 0.9rem, 1.3rem);
    /* small growth allowed ~20.8px */
    --insight-card-title-lh: clamp(1.25rem, 0.3vw + 0.9rem, 1.3rem);
  }
}

/* ---- Ultra-Wide (≥ 2500px) ---- */
@media (min-width: 2500px) {
  :root {
    --hero-title-fs: clamp(4.75rem, 0.5vw + 2.8rem, 5rem);
    /* ~76px → up to 80px */
    --hero-title-lh: clamp(5.25rem, 0.5vw + 3.2rem, 5.5rem);
    /* ~84–88px */

    --section-title-fs: clamp(3.2rem, 0.6vw + 2.8rem, 3.4rem);
    /* ~52–54px */
    --section-title-lh: clamp(3.8rem, 0.7vw + 3.2rem, 4rem);
    /* ~62–64px */
    --section-title-fw: 700;

    --section-para-fs: clamp(1.125rem, 0.2vw + 1rem, 1.2rem);
    /* ~18–19px */
    --section-para-lh: clamp(1.5rem, 0.3vw + 1.3rem, 1.6rem);
    /* ~24–25px */
    --section-para-fw: 400;

    --hero-subtitle-fs: clamp(1.55rem, 0.3vw + 1.4rem, 1.65rem);
    /* ~25–26px */
    --hero-subtitle-lh: clamp(1.6rem, 0.3vw + 1.45rem, 1.7rem);
    /* ~25–26px */
    --hero-subtitle-fw: 500;

    --hero-logo-h: 120px;
    --hero-logos-gap: 4rem;

    --form-title-fs: clamp(1.95rem, 0.5vw + 1.8rem, 2.4rem);
    /* ~31–38px */
    --form-title-lh: clamp(2.6rem, 0.7vw + 2.2rem, 3rem);
    /* ~39–48px */

    --faq-q-fs: clamp(2.1rem, 0.3vw + 1.9rem, 2.4rem);
    /* ~34–38px */
    --faq-q-lh: clamp(2.6rem, 0.4vw + 2.3rem, 3rem);
    /* ~42–48px */

    --faq-a-fs: clamp(1.2rem, 0.3vw + 1.05rem, 1.35rem);
    /* ~19–21px */
    --faq-a-lh: clamp(1.65rem, 0.35vw + 1.4rem, 1.8rem);
    /* ~26–29px */

    --feature-card-title-fs: clamp(2.05rem, 0.3vw + 1.45rem, 2.1rem);
    /* ~32.8–33.6px (gentle growth on huge screens) */
    --feature-card-title-lh: clamp(2.05rem, 0.3vw + 1.45rem, 2.1rem);

    --products-card-title-fs: clamp(1.55rem, 0.3vw + 1.08rem, 1.6rem);
    /* up to ~25.6px on huge screens */
    --products-card-title-lh: clamp(1.55rem, 0.3vw + 1.08rem, 1.6rem);

    --insight-card-title-fs: clamp(1.3rem, 0.25vw + 0.95rem, 1.35rem);
    /* up to ~21.6px */
    --insight-card-title-lh: clamp(1.3rem, 0.25vw + 0.95rem, 1.35rem);
  }
}

/* ---- 3000px+ ---- */
@media (min-width: 3000px) {
  :root {
    --hero-title-fs: clamp(3.3rem, 0.8vw + 2.8rem, 4.2rem);
    /* ~52–67px */
    --hero-title-lh: clamp(4.4rem, 0.9vw + 3.6rem, 5rem);
    /* ~70–80px */
    --faq-q-fs: clamp(2.3rem, 0.3vw + 2rem, 2.6rem);
    /* ~37–42px */
    --faq-q-lh: clamp(2.9rem, 0.3vw + 2.5rem, 3.3rem);
    /* ~46–52px */

    --form-title-fs: clamp(2.15rem, 0.45vw + 2rem, 2.6rem);
    /* ~34–42px */
    --form-title-lh: clamp(2.8rem, 0.6vw + 2.4rem, 3.2rem);
    /* ~42–50px */

    --faq-a-fs: clamp(1.3rem, 0.25vw + 1.15rem, 1.5rem);
    /* ~20–24px */
    --faq-a-lh: clamp(1.8rem, 0.3vw + 1.55rem, 2.1rem);
    /* ~28–34px */
  }
}



/* ================= LARGE DESKTOP VARIABLES (1600px+) ================= */
/* temporary, have to remove this*/
@media (min-width: 1600px) {
  :root {
    /* Spacing */
    --space-lg-xl: clamp(4rem, 3vw, 8rem);
    /* ~64–128px */
    --space-lg-xxl: clamp(6rem, 4vw, 12rem);
    /* ~96–192px */

    /* Containers */
    --container-max-width: 1920px;
    --container-padding-x: clamp(40px, 5vw, 140px);
  }
}

/* ================= VARIABLES for Paddings ================= */

/* ---- Small Laptop (1024–1279px) ---- */
@media (max-width: 767px) {
  :root {
    /* Section Padding */
    --section-padding-y: 20px;
    --section-padding-x: 20px;
    --estimate-section-padding: 0px 0px 0px 20px;
    --productsDemand-section-padding: 20px 0px 20px 20px;
    /*Top → Right → Bottom → Left*/
  }
}

/* ---- Small tab ---- */
@media (min-width: 768px) and (max-width: 900px) {
  :root {
    /* Section Padding */
    --section-padding-y: 40px;
    --section-padding-x: 40px;
    --estimate-section-padding: 0px 0px 0px 40px;
    --productsDemand-section-padding: 40px 0px 40px 40px;
    --estimate-section-padding: 0px 0px 0px 20px;
    /*Top → Right → Bottom → Left*/
  }
}

/* ---- Small Laptop (1024–1279px) ---- */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    /* Section Padding */
    --section-padding-y: 40px;
    --section-padding-x: 40px;
    --estimate-section-padding: 0px 0px 0px 40px;
    --productsDemand-section-padding: 40px 0px 40px 40px;
    /*Top → Right → Bottom → Left*/
  }
}

/* ---- Medium Laptop (1280–1439px) ---- */
@media (min-width: 1280px) and (max-width: 1439px) {
  :root {
    /* Section Padding */
    --section-padding-y: 60px;
    --section-padding-x: 60px;
    --estimate-section-padding: 0px 0px 0px 100px;
    --productsDemand-section-padding: 60px 0px 60px 60px;
    /*Top → Right → Bottom → Left*/
  }
}

/* ---- Standard Laptop (1440–1599px) ---- */
@media (min-width: 1440px) and (max-width: 1599px) {
  :root {
    /* Section Padding */
    --section-padding-y: 60px;
    --section-padding-x: 80px;
    --estimate-section-padding: 0px 0px 0px 80px;
    --productsDemand-section-padding: 60px 0px 60px 80px;
    /*Top → Right → Bottom → Left*/
  }
}

/* ---------- 1600px to 1919px ---------- */
@media (min-width: 1600px) and (max-width: 1919px) {
  :root {
    /* Section Padding */
    --section-padding-y: 80px;
    --section-padding-x: 100px;
    --estimate-section-padding: 0px 0px 0px 100px;
    --productsDemand-section-padding: 80px 0px 80px 100px;
    /*Top → Right → Bottom → Left*/
  }
}

/* ---------- 1920px to 2499px ---------- */
@media (min-width: 1920px) and (max-width: 2499px) {
  :root {
    /* Section Padding */
    --section-padding-y: 100px;
    --section-padding-x: 140px;
    --estimate-section-padding: 0px 0px 0px 140px;
    --productsDemand-section-padding: 100px 0px 100px 140px;
    /*Top → Right → Bottom → Left*/
  }
}

/* ---------- 2500px and above ---------- */
@media (min-width: 2500px) {
  :root {
    /* Section Padding */
    --section-padding-y: 120px;
    --section-padding-x: 160px;
    --estimate-section-padding: 0px 0px 0px 160px;
    --productsDemand-section-padding: 120px 0px 120px 160px;
    /*Top → Right → Bottom → Left*/
  }
}


/* ===========================================================
   BUTTON DESIGN TOKENS — centralized, breakpointed variables
   - Use these tokens everywhere to keep buttons consistent
   - Hero button tokens are prefixed with --btn-hero-*
   - Arrow decoration tokens provided (svg/icon size + offset)
   =========================================================== */

/* ---------- BASE / FALLBACK (global) ---------- */
:root {
  /* Generic button */
  --btn-width: auto;
  /* default: auto unless specific button needs fixed width */
  --btn-height: 44px;
  --btn-padding-y: 10px;
  --btn-padding-x: 20px;
  --btn-gap: 10px;
  --btn-font-size: 16px;
  --btn-line-height: 1;
  /* 100% from Figma */
  --btn-border-radius: 6px;
  --btn-arrow-size: 18px;
  /* decorative arrow icon */
  --btn-arrow-offset-x: 10px;
  /* gap from text to arrow */
  --btn-opacity: 1;
}

/* ---- Mobile (≤ 767px) ----
   Figma mobile sample: width ~146px, height ~32.18px, font-size 14px, padding ~6px/12px
*/
@media (max-width: 767px) {
  :root {
    --btn-width: 146px;
    --btn-height: 32.2px;
    --btn-padding-y: 6.09px;
    --btn-padding-x: 12.18px;
    --btn-gap: 6.09px;
    --btn-font-size: 14px;
    --btn-line-height: 1;
    /* 100% as per Figma */
    --btn-border-radius: 4px;
    --btn-arrow-size: 12px;
    --btn-arrow-offset-x: 8px;
    --btn-opacity: 1;

    /* Hero button (mobile) slightly larger than regular */
    --btn-hero-width: 160px;
    --btn-hero-height: 36px;
    --btn-hero-font-size: 15px;
    --btn-hero-padding-y: 7px;
    --btn-hero-padding-x: 14px;
    --btn-hero-arrow-size: 14px;
  }
}

/* ---- Tablet (768–1023px) ----
   Figma tablet: width ~203px, height 46px, font-size 18px
*/
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --btn-width: 203.21px;
    --btn-height: 46px;
    --btn-padding-y: 10px;
    --btn-padding-x: 20px;
    --btn-gap: 10px;
    --btn-font-size: 18px;
    --btn-line-height: 1;
    --btn-border-radius: 6px;
    --btn-arrow-size: 16px;
    --btn-arrow-offset-x: 10px;
    --btn-opacity: 1;

    --btn-hero-width: 220px;
    --btn-hero-height: 50px;
    --btn-hero-font-size: 19px;
    --btn-hero-padding-y: 11px;
    --btn-hero-padding-x: 22px;
    --btn-hero-arrow-size: 18px;
  }
}

/* ---- Small Laptop (1024–1279px) ---- */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --btn-width: 210px;
    --btn-height: 48px;
    --btn-padding-y: 10px;
    --btn-padding-x: 22px;
    --btn-gap: 10px;
    --btn-font-size: 18px;
    --btn-line-height: 1;
    --btn-border-radius: 6px;
    --btn-arrow-size: 18px;
    --btn-arrow-offset-x: 12px;

    --btn-hero-width: 240px;
    --btn-hero-height: 50px;
    --btn-hero-font-size: 19px;
    --btn-hero-padding-y: 11px;
    --btn-hero-padding-x: 24px;
    --btn-hero-arrow-size: 20px;
  }
}

/* ---- Medium Laptop (1280–1439px) ---- */
@media (min-width: 1280px) and (max-width: 1439px) {
  :root {
    --btn-width: 216px;
    --btn-height: 48px;
    --btn-padding-y: 10px;
    --btn-padding-x: 22px;
    --btn-gap: 10px;
    --btn-font-size: 19px;
    --btn-line-height: 1;
    --btn-border-radius: 6px;
    --btn-arrow-size: 20px;
    --btn-arrow-offset-x: 12px;

    --btn-hero-width: 250px;
    --btn-hero-height: 52px;
    --btn-hero-font-size: 20px;
    --btn-hero-padding-y: 11px;
    --btn-hero-padding-x: 24px;
    --btn-hero-arrow-size: 22px;
  }
}

/* ---- Standard Laptop (1440–1599px) ----
   your Figma / earlier tokens used 218w x 49h, font-size 20px
*/
@media (min-width: 1440px) and (max-width: 1599px) {
  :root {
    --btn-width: 218.2132px;
    --btn-height: 49px;
    --btn-padding-y: 10px;
    --btn-padding-x: 20px;
    --btn-gap: 10px;
    --btn-font-size: 20px;
    --btn-line-height: 1;
    --btn-border-radius: 6px;
    --btn-arrow-size: 22px;
    --btn-arrow-offset-x: 12px;

    /* hero button slightly larger */
    --btn-hero-width: 260px;
    --btn-hero-height: 56px;
    --btn-hero-font-size: 22px;
    --btn-hero-padding-y: 12px;
    --btn-hero-padding-x: 24px;
    --btn-hero-arrow-size: 24px;
  }
}

/* ---------- 1600px — 1919px ---------- */
@media (min-width: 1600px) and (max-width: 1919px) {
  :root {
    --btn-width: 240px;
    --btn-height: 52px;
    --btn-padding-y: 12px;
    --btn-padding-x: 26px;
    --btn-gap: 12px;
    --btn-font-size: 22px;
    --btn-line-height: 1;
    --btn-border-radius: 6px;
    --btn-arrow-size: 26px;
    --btn-arrow-offset-x: 14px;

    --btn-hero-width: 300px;
    --btn-hero-height: 62px;
    --btn-hero-font-size: 24px;
    --btn-hero-padding-y: 14px;
    --btn-hero-padding-x: 28px;
    --btn-hero-arrow-size: 28px;
  }
}

/* ---------- 1920px — 2499px (Wide Desktop) ---------- */
@media (min-width: 1920px) and (max-width: 2499px) {
  :root {
    --btn-width: 260px;
    --btn-height: 56px;
    --btn-padding-y: 14px;
    --btn-padding-x: 28px;
    --btn-gap: 12px;
    --btn-font-size: 24px;
    --btn-line-height: 1;
    --btn-border-radius: 6px;
    --btn-arrow-size: 30px;
    --btn-arrow-offset-x: 16px;

    --btn-hero-width: 340px;
    --btn-hero-height: 68px;
    --btn-hero-font-size: 26px;
    --btn-hero-padding-y: 16px;
    --btn-hero-padding-x: 30px;
    --btn-hero-arrow-size: 32px;
  }
}

/* ---------- 2500px and up (Ultra-wide) ---------- */
@media (min-width: 2500px) {
  :root {
    --btn-width: 320px;
    --btn-height: 72px;
    --btn-padding-y: 16px;
    --btn-padding-x: 36px;
    --btn-gap: 14px;
    --btn-font-size: 28px;
    --btn-line-height: 1;
    --btn-border-radius: 6px;
    --btn-arrow-size: 36px;
    --btn-arrow-offset-x: 18px;

    --btn-hero-width: 420px;
    --btn-hero-height: 84px;
    --btn-hero-font-size: 30px;
    --btn-hero-padding-y: 18px;
    --btn-hero-padding-x: 38px;
    --btn-hero-arrow-size: 40px;
  }
}

/* --------------------
   Arrow decoration tokens (general)
   - Use --btn-arrow-size and --btn-arrow-offset-x to position the decorative arrow
   - If you use an inline SVG, size it with width/height from these vars
   -------------------- */
:root {
  --btn-arrow-fill: var(--color-bg);
  /* icon color (example) */
  --btn-arrow-stroke: var(--color-bg);
  /* if needed */
}



/* =========================================================================
   Form design tokens — global variables (desktop breakpoint overrides)
   - Use these as the single source-of-truth for the form card, inner container,
     inputs, textarea, buttons and dynamic form border thickness.
   - Variable naming uses "container" (outer/inner) as requested.
   ========================================================================= */

/* -------------------
   Base / Mobile fallback
   ------------------- */
:root {
  /* Outer container (card) */
  --container-outer-w: 328px;
  --container-outer-h: auto;
  --container-outer-gap: 16px;
  --container-outer-padding: 20px;

  /* Inner container (inputs block) */
  --container-inner-w: 328px;
  --container-inner-h: 240px;

  /* Controls (inputs / textarea) */
  --container-input-w: 100%;
  --container-input-h: 44px;
  --container-textarea-h: 120px;

  /* Spacing */
  --container-gap-vertical: 12px;

  /* Visual tokens */
  --container-bg: #ffffff;
  --container-input-bg: #e9e9e9;
  --container-border-color: rgba(0, 0, 0, 0.08);
  --container-border-radius: 4px;

  /* Dynamic form border (outer decorative frame thickness) */
  /* default small on mobile */
  --container-frame-border-width: 6px;
  --container-frame-border-color: #222;
  /* adjust to match design frame color */
  --container-frame-opacity: 1;

  /* Field typography */
  --container-field-fs: 16px;
  --container-field-lh: 1.25;
  --container-field-color: #222222;

  /* Button */
  --container-btn-h: 44px;
  --container-btn-padding-inline: 22px;

  /* arrow width: min 48px, scales with viewport, max 140px */
  --form-outer-corner-arrow-width: clamp(48px, 3.2vw, 140px);

  /* offset determines how far outside corner the arrow sits.
     Use a fraction of the arrow width so it stays visually consistent. */
  --form-outer-corner-arrow-offset: calc(var(--form-outer-corner-arrow-width) * 1.4);
}

/* 4) Optional: slightly different scale for very large desktop screens */
@media (min-width: 1800px) {
  :root {
    --form-outer-corner-arrow-offset: calc(var(--form-outer-corner-arrow-width) * 1.5);
  }
}

/* -----------------------------
   Mobile variables (≤ 767px)
   Paste this into your variables.css (after the global tokens)
   ----------------------------- */
@media (max-width: 767px) {
  :root {
    /* Outer container (card) */
    --container-outer-w: 340px;
    --container-outer-h: 346.02972412109375px;
    --container-outer-padding: 16px;
    --container-outer-gap: 12px;

    /* Inner container (inputs block) */
    --container-inner-w: 257.6968688964844px;
    --container-inner-h: 182.15452575683594px;

    /* Controls (inputs / textarea) */
    --container-input-w: 100%;
    --container-input-h: 27.414560317993164px;
    /* Figma mobile input height */
    --container-textarea-h: 63.358097076416016px;
    /* Figma mobile textarea height */

    /* Vertical spacing between rows/fields */
    --container-gap-vertical: 10px;

    /* Field/font & button */
    --container-field-fs: 14px;
    /* mobile input font-size */
    --container-field-lh: 1.25;

    --container-btn-h: 40px;
    /* mobile button height */
    --container-btn-padding-inline: 18px;

    /* Decorative frame (mobile) */
    --container-frame-border-width: 11px;

    /* Corner arrows (smaller on mobile) */
    --form-outer-corner-arrow-width: clamp(36px, 8.0vw, 80px);
    --form-inner-corner-width: clamp(20px, 5.0vw, 48px);
  }
}


@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --container-outer-w: 343px;
    --container-outer-h: auto;
    --container-outer-padding: 16px;
    --container-outer-gap: 14px;

    --container-inner-w: 313.8897399902344px;
    --container-inner-h: 221.87478637695312px;

    --container-input-h: 33.39252471923828px;
    --container-textarea-h: 77.17383575439453px;

    --container-gap-vertical: 12px;

    --container-field-fs: 15px;
    --container-btn-h: 42px;

    --container-frame-border-width: 12px;
    --form-outer-corner-arrow-width: clamp(38px, 1.4vw, 40px);
    --form-inner-corner-width: clamp(28px, 2vw, 60px);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    /* chosen slightly larger than tablet to match Figma look on iPad Pro */
    --container-outer-w: 430px;
    --container-outer-h: auto;
    --container-outer-padding: 24px;
    --container-outer-gap: 16px;

    --container-inner-w: 360px;
    --container-inner-h: 260px;

    --container-input-h: 38px;
    --container-textarea-h: 92px;

    --container-gap-vertical: 14px;

    /* font sizes tuned for iPad Pro */
    --container-field-fs: 16px;
    --container-btn-h: 44px;

    /* frame thickness moderate on iPad Pro */
    --container-frame-border-width: 14px;

    /* corner arrow scaling slightly larger on iPad Pro */
    --form-outer-corner-arrow-width: clamp(41px, 2vw, 45px);
    --form-inner-corner-width: clamp(32px, 2.2vw, 64px);
  }
}

/* -------------------
     Small laptops (>=1280px) — Figma baseline you provided
     ------------------- */
@media (min-width: 1280px) {
  :root {
    --container-outer-w: 490px;
    /* exact Figma width */
    --container-outer-h: 536px;
    --container-outer-gap: 20px;
    --container-outer-padding: 28px;

    --container-inner-w: 432.487854px;
    --container-inner-h: 299px;

    --container-input-h: 45px;
    --container-textarea-h: 104px;

    --container-gap-vertical: 14px;

    --container-field-fs: 16px;
    --container-btn-h: 44px;

    --container-frame-border-width: 16px;
    /* slightly thicker on small laptop */

    --form-outer-corner-arrow-width: clamp(48px, 3.2vw, 140px);
  }
}

/* -------------------
     Medium laptops (>=1366px)
     ------------------- */
@media (min-width: 1366px) {
  :root {
    --container-outer-w: 550px;
    --container-outer-h: 560px;
    --container-outer-padding: 30px;

    --container-inner-w: 480px;
    --container-inner-h: 320px;

    --container-input-h: 48px;
    --container-textarea-h: 112px;

    --container-gap-vertical: 16px;
    --container-field-fs: 17px;
    --container-btn-h: 48px;

    --container-frame-border-width: 17px;

    --form-outer-corner-arrow-width: clamp(48px, 3.2vw, 140px);
  }
}

/* -------------------
     Standard laptops (>=1440px)
     ------------------- */
@media (min-width: 1440px) {
  :root {
    --container-outer-w: 580px;
    --container-outer-h: 580px;
    --container-outer-padding: 32px;

    --container-inner-w: 520px;
    --container-inner-h: 340px;

    --container-input-h: 50px;
    --container-textarea-h: 120px;

    --container-gap-vertical: 18px;
    --container-field-fs: 18px;
    --container-btn-h: 50px;

    --container-frame-border-width: 19px;

    --form-outer-corner-arrow-width: clamp(48px, 3.2vw, 140px);
  }
}

/* -------------------
     Midpoint / ~1500px region — your request: thick form border looks good here
     We'll make the frame bold (18px) starting at 1500px
     ------------------- */
@media (min-width: 1500px) {
  :root {
    --container-outer-w: 610px;
    /* slight scale-up near 1500 */
    --container-outer-h: 600px;
    --container-outer-padding: 34px;

    --container-inner-w: 560px;
    --container-inner-h: 350px;

    --container-input-h: 52px;
    --container-textarea-h: 128px;

    --container-gap-vertical: 20px;
    --container-field-fs: 18px;
    --container-btn-h: 52px;

    /* <-- the thick frame you wanted around 1500px */
    --container-frame-border-width: 18px;

    --form-outer-corner-arrow-width: 54px;
  }
}

/* -------------------
     Desktop / 1600px
     ------------------- */
@media (min-width: 1600px) {
  :root {
    --container-outer-w: 620px;
    --container-outer-h: 620px;
    --container-outer-padding: 36px;

    --container-inner-w: 560px;
    --container-inner-h: 360px;

    --container-input-h: 52px;
    --container-textarea-h: 128px;

    --container-gap-vertical: 20px;
    --container-field-fs: 18px;
    --container-btn-h: 52px;

    /* keep the frame strong at and above this size (you can reduce if needed) */
    --container-frame-border-width: 18px;

    --form-outer-corner-arrow-width: 55px;
  }
}

/* -------------------
     Large desktop / 1920px
     ------------------- */
@media (min-width: 1920px) {
  :root {
    --container-outer-w: 670px;
    --container-outer-h: 700px;
    --container-outer-padding: 35px;

    --container-inner-w: 640px;
    --container-inner-h: 400px;

    --container-input-h: 56px;
    --container-textarea-h: 140px;

    --container-gap-vertical: 22px;
    --container-field-fs: 20px;
    --container-btn-h: 56px;

    /* maintain / optionally scale the frame a bit */
    --container-frame-border-width: 22px;

    --form-outer-corner-arrow-width: 61px;
  }
}

/* -------------------
     Extra large / 2500px+
     ------------------- */
@media (min-width: 2500px) {
  :root {
    --container-outer-w: 765px;
    --container-outer-h: 760px;
    --container-outer-padding: 45px;

    --container-inner-w: 720px;
    --container-inner-h: 440px;

    --container-input-h: 60px;
    --container-textarea-h: 160px;

    --container-gap-vertical: 24px;
    --container-field-fs: 22px;
    --container-btn-h: 60px;

    --container-frame-border-width: 24px;

    --form-outer-corner-arrow-width: 66px;
  }
}