/* Brand fonts. Loaded from Google Fonts until self-hosted woff2 files are added to assets/fonts/. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   variables.css — every token lives here. Nothing else declares a raw value.
   Source: Figma X0pUZwZJeLEcpWKW5t3HmS, frame 1026:2086 (1728px canvas)
   ========================================================================== */

:root {

  /* --- Colour ------------------------------------------------------------
     NOTE: brand kit lists #008571 / #002331 / #005343 / #F8F8F8.
     The approved Figma frame uses the brighter teal family below instead.
     Building to Figma. To revert to the kit, change --c-accent and the two
     gradient stops only — nothing else references a raw teal. */

  --c-ink:              #002331;  /* page bg, dark sections    (kit match) */
  --c-surface:          #f8f8f8;  /* nav pill, light sections  (kit match) */
  --c-accent:           #08c8b6;  /* active nav, inline emphasis          */
  --c-accent-bright:    #00f6c8;  /* headline highlight                   */
  --c-grad-from:        #00facb;  /* CTA gradient start                   */
  --c-grad-to:          #00ba9e;  /* CTA gradient end @ 64.65%            */

  --c-white:            #ffffff;
  --c-black:            #000000;
  --c-muted:            #888888;  /* form placeholder                     */
  --c-rule:             #d9d9d9;  /* form field underline                 */
  --c-star:             #ffb400;

  /* Brand kit values kept for reference */
  --c-kit-primary:      #008571;
  --c-kit-primary-dark: #005343;

  --grad-cta: linear-gradient(90deg, var(--c-grad-from) 0%, var(--c-grad-to) 64.65%);
  /* Hero scrim: dark from the bottom, transparent at top */
  --grad-hero-scrim: linear-gradient(0deg, rgba(26,26,26,1) 5.892%, rgba(26,26,26,0) 99.6%);

  /* --- Type --------------------------------------------------------------
     Figma drifts across 5 families. Normalised to the brand kit's two.
       Manrope -> headings, nav, buttons
       Poppins -> body copy, form fields */

  --ff-head: "Manrope", system-ui, -apple-system, sans-serif;
  --ff-body: "Poppins", system-ui, -apple-system, sans-serif;

  /* H1 scales with the viewport so "Reliable Security &" always fits the
     text column beside the form: 88px at the 1728 design width, never more.
     The line itself needs 8.95em in Manrope 700, measured in the browser.
     Line-height is the design's 102/88 as a ratio so it scales with it. */
  --fs-h1: clamp(40px, 5.09vw, 88px);
  --lh-h1: 1.16;

  --fs-h2: 56px;          --lh-h2: 66px;
  --fs-card-head: 32px;   --lh-card-head: 38px;

  /* Hero subheading: 28px at 1728, scaling down to 17px. */
  --fs-lead: clamp(17px, 1.62vw, 28px);
  --lh-lead: 1.45;

  --fs-rating: 27px;      --lh-rating: 36px;
  --fs-field: 20.6px;     --lh-field: 38px;
  --fs-body: 16px;        --lh-body: 1.6;
  --fs-btn: 16.6px;       --lh-btn: 22.2px;

  --fw-reg:  400;
  --fw-med:  500;
  --fw-sem:  600;
  --fw-bold: 700;

  /* --- Layout ------------------------------------------------------------
     Design canvas 1728. Hero card is inset 19px each side (1690 wide).
     Content column starts at x=107 => 88px inside the card. */

  --canvas:       1728px;
  --card-max:     1690px;   /* hero / banded card width        */
  --gutter:       19px;     /* canvas edge -> card edge        */
  --content-max:  1514px;   /* 1728 - (107 * 2)                */

  /* Hero card internals scale with the viewport rather than stepping, so
     the headline column never collapses between breakpoints.
     Each is the design value at 1728 expressed as vw, clamped. */
  --pad-card:    clamp(24px, 5.09vw, 88px);    /* card edge -> content  */
  --w-heroform:  clamp(400px, 31.42vw, 543px); /* quote form card width */
  --gap-hero:    clamp(32px, 3.7vw, 64px);     /* copy <-> form gap     */

  /* --- Spacing scale ----------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 120px;

  /* --- Radii -------------------------------------------------------------- */
  --r-pill:  999px;
  --r-card:  50px;   /* hero card       */
  --r-panel: 23px;   /* quote form card */
  --r-chip:  20px;   /* active nav pill */

  /* --- Header / nav ------------------------------------------------------
     The nav pill sizes to its labels (labels never wrap). Browser text runs
     slightly wider than Figma's, so a fixed 838px pill overflowed and forced
     "About Us" / "Service Areas" onto two lines. Spacing and label size step
     down at 1400 and 1280 so the pill always fits between logo and CTA.
     --h-navband must stay >= --h-navpill + (--navpill-top * 2) */
  --h-navband:    123px;   /* dark strip above the hero card */
  --h-navpill:    80px;
  --navpill-top:  18px;
  --w-navpill:    838px;   /* design reference only — the pill is fit-content */
  --pad-navpill:  38px;    /* pill inline padding (design ~38/40)              */
  --nav-gap:      45px;    /* space between nav items                          */
  --fs-nav:       18px;
  --w-navchip:    111px;   /* active "Home" chip min width                     */
  --pad-header:   clamp(20px, 2.1vw, 36px);  /* page edge -> logo / CTA        */

  --h-hero-card:  clamp(600px, 56.3vw, 973px);
  --h-btn:        59px;    /* outline phone button */

  /* --- Motion ------------------------------------------------------------- */
  --e-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --e-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 700ms;

  --shadow-pill: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* --- Responsive: redeclare tokens only, never restyle components --------- */

@media (max-width: 1440px) {
  :root {
    --fs-h2: 46px; --lh-h2: 56px;
  }
}

/* Nav tier 2 — fits between logo and CTA from ~1260px. */
@media (max-width: 1400px) {
  :root {
    --nav-gap:     30px;
    --fs-nav:      17px;
    --w-navchip:   100px;
    --pad-navpill: 30px;
  }
}

/* Nav tier 3 — fits from ~1150px. */
@media (max-width: 1280px) {
  :root {
    --nav-gap:     20px;
    --fs-nav:      16px;
    --w-navchip:   90px;
    --pad-navpill: 24px;
  }
}

/* Tablet: nav collapses to the menu button, hero stacks the form under the copy. */
@media (max-width: 1180px) {
  :root {
    --fs-h1:       clamp(40px, 6.2vw, 72px);
    --fs-nav:      18px;       /* menu panel label size */
    --h-hero-card: auto;
    --h-navband:   96px;
  }
}

@media (max-width: 1024px) {
  :root {
    --fs-h2: 38px; --lh-h2: 46px;
    --fs-card-head: 28px; --lh-card-head: 34px;
    --gutter: 14px;
    --r-card: 36px;
  }
}

/* Mobile values taken from Figma frame 749:486 (402px) */
@media (max-width: 767px) {
  :root {
    /* 34px on the 402px frame; shrinks with the screen so "Reliable
       Security &" still fits one line down to 320px. */
    --fs-h1: clamp(26px, calc((100vw - 56px) / 9.1), 34px);
    --lh-h1: 1.18;
    --fs-h2: 30px; --lh-h2: 35px;
    --fs-lead: 14px; --lh-lead: 1.45;
    --fs-card-head: 22px; --lh-card-head: 26px;
    --fs-field: 14px; --lh-field: 22px;
    --pad-card: 13px;
    --gutter: 15px;
    --r-card: 20px;
    --r-panel: 16px;
    --h-navband: 66px;
  }
}