/* ==========================================================================
   ROOT.CSS  —  Design tokens / global variables
   Change values here and the whole website updates.
   ========================================================================== */

:root {

  /* ----------------------------------------------------------------
     1. BRAND COLORS
     ---------------------------------------------------------------- */
  /* The brand green is a SURFACE colour: 1.82:1 against both white and black,
     so it fails AA whichever way you use it as text. On a green background put
     --color-heading (8.96:1); for green text on white use --color-primary-deep.
     Green text on the dark chrome is fine at 9.41:1. */
  --color-primary: #A4CE4E;
  --color-primary-hover: #8FB93C;    /* surfaces only — 2.29:1 on white */
  --color-primary-deep: #4F6B1E;     /* text-safe on white — 6.08:1 */
  --color-primary-deep-hover: #3E5518;
  --color-primary-light: #EAF4D6;    /* tint of green */

  --color-secondary: #1C2A22;        /* deep dark green/black */

  /* ----------------------------------------------------------------
     2. TEXT COLORS
     ---------------------------------------------------------------- */
  --color-heading: #14231A;          /* h1 - h6 on light backgrounds */
  --color-body: #5B6B62;             /* paragraph text */
  --color-link: var(--color-primary-deep);
  --color-link-hover: var(--color-primary-deep-hover);
  --color-white: #FFFFFF;
  --color-muted: #8A968F;

  /* Form validation feedback */
  --color-form-error: #D64545;
  --color-form-error-text: #A32E2E;
  --color-form-error-bg: #FCEDED;

  /* On dark backgrounds (hero, footer) */
  --color-heading-light: #FFFFFF;
  --color-body-light: rgba(255, 255, 255, 0.82);

  /* ----------------------------------------------------------------
     3. BACKGROUND / SURFACE COLORS
     ---------------------------------------------------------------- */
  --bg-body: #FFFFFF;
  --bg-light: #F5F7F7;
  --bg-dark: #14231A;
  --bg-topbar: var(--color-primary);

  /* Section overlays — adjust when the real background images are added */
  --cta-overlay-dark: rgba(6, 15, 17, 0.92);  /* wash used by the inner-page CTA */
  --media-placeholder-dark: #060F11;
  --media-placeholder: #67756F;               /* stand-in until images land */

  /* Glass navbar */
  --nav-glass-bg: rgba(255, 255, 255, 0.13);
  --nav-glass-border: rgba(255, 255, 255, 0.18);

  /* ----------------------------------------------------------------
     4. BORDERS
     ---------------------------------------------------------------- */
  --border-color: #E4E9E0;
  --border-width: 1px;

  /* ----------------------------------------------------------------
     5. TYPOGRAPHY
     ---------------------------------------------------------------- */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Base */
  --fs-base: 16px;
  --lh-base: 1.75;
  --lh-heading: 1.15;

  /* Heading scale (desktop) */
  --fs-h1: 68px;
  --fs-h2: 46px;
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-h6: 18px;

  --fs-p: 16px;
  --fs-p-sm: 14px;                 /* smaller body copy (hero, cards) */
  --fs-label: 16px;                /* section eyebrow label */
  --fs-small: 14px;
  --fs-xs: 13px;

  --lh-h1: 1.02;
  --lh-h2: 1.42;
  --ls-tight: -0.02em;
  --ls-wide: 0.25em;

  /* ----------------------------------------------------------------
     6. SPACING
     ---------------------------------------------------------------- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;

  /* ----------------------------------------------------------------
     7. BUTTON STANDARDS  (shared by every button on the site)
     ---------------------------------------------------------------- */
  --btn-min-width: 190px;
  --btn-height: 48px;
  --btn-padding-y: 6px;
  --btn-padding-x: 6px;            /* right padding (icon side) */
  --btn-padding-left: 24px;        /* left padding (text side)  */
  --btn-gap: 14px;                 /* space between label and icon */
  --btn-radius: 50px;
  --btn-font-size: 14px;
  --btn-font-weight: var(--fw-semibold);
  --btn-icon-size: 36px;
  --btn-border-width: 1px;

  /* ----------------------------------------------------------------
     8. RADIUS
     ---------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* ----------------------------------------------------------------
     9. SHADOWS
     ---------------------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.14);

  /* ----------------------------------------------------------------
     10. TRANSITION / MOTION
     ---------------------------------------------------------------- */
  --transition-fast: all 0.2s ease-in-out;
  --transition-base: all 0.35s ease-in-out;

  /* ----------------------------------------------------------------
     11. LAYOUT
     ---------------------------------------------------------------- */
  --container-width: 80%;          /* page content width  */
  --container-max: 1520px;         /* page content cap    */
  --header-container-width: 89%;   /* navbar sits in a wider container */
  --header-container-max: 1716px;
  --admin-container-width: 92%;    /* admin tables need every pixel: seven  */
  --admin-container-max: 1800px;   /* columns, otherwise cells wrap         */

  /* Header / topbar metrics */
  --topbar-height: 60px;           /* green bar height        */
  --topbar-padding-y: 8px;
  --header-gap: 58px;              /* space between topbar and navbar pill */
  --header-height: 112px;          /* navbar pill height      */
  --header-pad-left: 45px;         /* pill inner left padding */
  --header-pad-right: 36px;        /* pill inner right padding */
  --header-pad-y: 12px;

  /* Logo */

  /* Keep <= --header-height minus 2 x --header-pad-y, or the lockup overflows
     the pill. The artwork stacks three lines of type, so shrinking this below
     ~80px makes the wordmark unreadable. */
  --logo-height: 84px;             /* header lockup height */
  --logo-height-mobile-nav: 60px;
  --logo-height-admin: 56px;
  --logo-gap: 46px;                /* breathing room each side of the logo */

  /* Nav */
  --nav-font-size: 15px;
  --nav-link-pad-x: 22px;
  --nav-link-pad-y: 10px;

  /* Topbar text */
  --topbar-font-size: 14px;

  /* Hero */
  --hero-content-max: 1120px;      /* text column width */
  --hero-indent: 0px;              /* extra left indent of hero content */

  /* About section */
  --about-pad-top: 150px;
  --about-pad-bottom: 108px;
  --feature-icon-size: 52px;
  --feature-gap: 20px;
  --stat-font-size: 66px;

  /* Services section */
  --services-pad-top: 150px;
  --services-pad-bottom: 120px;
  --service-row-pad-y: 71px;
  --service-card-pad-y: 52px;
  --service-card-pad-x: 50px;
  --service-title-size: 31px;
  --service-title-lh: 1.48;
  --service-title-width: 480px;
  --service-desc-size: 13px;
  --service-icon-size: 24px;
  --service-icon-gap: 34px;
  --service-desc-width: 348px;
  --service-arrow-size: 48px;
  --service-gap: 50px;

  /* CTA banner */
  --cta-height: 700px;
  --cta-title-size: 55px;
  --cta-title-lh: 1.27;
  --cta-title-width: 700px;

  /* What We Do */
  --wwd-pad-top: 140px;
  --wwd-pad-bottom: 140px;
  --wwd-gutter: 34px;
  --wwd-card-radius: 18px;
  --wwd-card-pad-y: 42px;
  --wwd-card-pad-x: 30px;
  --wwd-icon-size: 54px;
  --wwd-card-title-size: 22px;
  --wwd-card-text-size: 13.5px;
  --wwd-card-text-lh: 1.92;
  --wwd-head-gap: 56px;

  /* Marquee strip */
  --marquee-height: 99px;
  --marquee-font-size: 35px;
  --marquee-gap: 45px;
  --marquee-icon-size: 37px;
  --marquee-speed: 32s;

  /* Blog section */
  --blog-pad-top: 140px;
  --blog-pad-bottom: 140px;
  --blog-gutter: 30px;
  --blog-head-split: 86px;
  --blog-intro-width: 600px;
  --blog-img-height: 378px;
  --blog-body-pad-y: 28px;
  --blog-body-pad-x: 28px;
  --blog-date-size: 14px;
  --blog-title-size: 20px;
  --blog-title-lh: 1.5;
  --blog-text-size: 13px;
  --blog-arrow-size: 76px;
  --blog-head-gap: 58px;
  --bg-darker: #0C1E21;

  /* FAQ */
  --faq-pad-top: 140px;
  --faq-pad-bottom: 76px;
  --faq-split: 113px;
  --faq-intro-width: 600px;
  --faq-head-height: 62px;
  --faq-item-gap: 18px;
  --faq-item-pad-x: 35px;
  --faq-item-radius: 8px;
  --faq-q-size: 16px;
  --faq-a-size: 13px;

  /* Contact */
  --contact-pad-top: 76px;
  --contact-pad-bottom: 140px;
  --contact-gutter: 24px;
  --contact-height: 531px;
  --contact-radius: 18px;
  --contact-card-pad-y: 60px;
  --contact-card-pad-x: 52px;
  --contact-title-size: 32px;
  --form-gap: 20px;
  --form-input-height: 37px;
  --form-textarea-height: 132px;
  --form-radius: 6px;
  --form-font-size: 12px;

  /* Auth / admin (English-only screens behind the login) */
  --auth-card-width: 420px;
  --auth-card-pad: 40px;
  --auth-input-height: 44px;
  --admin-header-pad-y: 18px;
  --admin-pad-y: 56px;
  --admin-cell-pad-y: 14px;
  --admin-cell-pad-x: 18px;
  --admin-detail-pad: 40px;
  --admin-dt-width: 140px;

  /* News manager */
  --admin-thumb-w: 64px;
  --admin-thumb-h: 44px;

  /* News editor layout */
  --admin-side-w: 320px;           /* settings sidebar */
  --admin-gutter: 24px;
  --admin-card-pad: 26px;
  --field-height: 44px;
  --field-short: 90px;
  --field-tall: 320px;

  /* Footer */
  --footer-pad-top: 26px;
  --footer-top-gap: 26px;
  --footer-bottom-gap: 38px;
  --footer-bottom-pad-y: 18px;
  --footer-pad-bottom: 14px;
  --footer-logo-height: 84px;
  /* Brand 40% + three equal 20% link columns. .footer__col--resources has no
     width of its own — it is flex:1 1 0% and absorbs the remaining 20%, so
     these three must total 80%. */
  --footer-brand-width: 40%;
  --footer-address-width: 20%;
  --footer-services-width: 20%;
  --footer-col-title-size: 22px;
  --footer-text-size: 14px;
  --footer-link-size: 15px;
  --footer-link-gap: 13px;
  --footer-contact-gap: 14px;
  --footer-icon-gap: 14px;
  --footer-bottom-size: 13px;
  --footer-border: rgba(255, 255, 255, 0.16);

  /* Inner-page banner */
  --banner-height: 537px;
  --banner-pad-top: 291px;
  --banner-pad-bottom: 152px;
  --banner-title-size: 48px;
  --bg-banner: #39474A;

  /* Strategies cards */
  --sc-pad-top: 140px;
  --sc-pad-bottom: 150px;
  --sc-head-gap: 90px;
  --sc-gap: 47px;
  --sc-icon-size: 112px;
  --sc-icon-lift: 63px;
  --sc-card-radius: 14px;
  --sc-card-pad-x: 40px;
  --sc-card-pad-bottom: 30px;
  --sc-title-size: 19px;
  --sc-text-size: 13px;
  --sc-icon-bg: #101010;

  /* History timeline */
  --hist-pad-top: 149px;
  --hist-pad-bottom: 156px;
  --hist-gap: 70px;
  --hist-media-width: 834px;
  --hist-media-height: 549px;
  --hist-media-radius: 20px;
  --hist-watermark-size: 280px;
  --hist-title-size: 44px;
  --hist-text-size: 13px;
  --hist-timeline-gap: 100px;
  --timeline-year-size: 28px;
  --timeline-year-active-size: 68px;
  --timeline-dot: 17px;
  --timeline-dot-active: 31px;
  --timeline-overhang: 110px;

  /* Mission + skill bars */
  --mission-pad-top: 150px;
  --mission-pad-bottom: 147px;
  --mission-gap: 124px;
  --mission-media-width: 691px;
  --mission-media-radius: 20px;
  --mission-text-width: 710px;
  --skill-label-size: 18px;
  --skill-bar-height: 10px;
  --skill-gap: 37px;
  --skill-value-width: 46px;

  /* Split media / content band */
  --split-pad-y: 100px;
  --split-title-width: 820px;

  /* Legal / long-form page */
  --legal-pad-top: 120px;
  --legal-pad-bottom: 120px;
  /* Long-form pages (privacy, news articles). Keep the three sizes distinct —
     title, section heading, body — or numbered sections stop reading as
     headings. --legal-measure caps the line length, not the container. */
  --legal-title-size: 34px;
  --legal-h3-size: 24px;
  --legal-text-size: 17px;
  --legal-text-lh: 1.7;
  --legal-block-gap: 34px;
  --legal-measure: 70ch;

  /* Two-up CTA band */
  --ctaduo-height: 348px;
  --ctaduo-pad-y: 80px;
  --ctaduo-pad-x: 60px;
  --ctaduo-title-size: 32px;
  --ctaduo-text-width: 600px;

  /* Numbered process steps (service: management consulting) */
  --proc-pad-top: 140px;
  --proc-pad-bottom: 150px;
  --proc-head-gap: 80px;
  --proc-gap: 30px;
  --proc-title-size: 20px;
  --proc-text-size: 14px;
  --proc-card-pad: 38px 30px 34px;
  --proc-chip: 58px;

  /* Ticked checklist (services: green tech, project development) */
  --check-pad-top: 130px;
  --check-pad-bottom: 130px;
  --check-head-gap: 60px;
  --check-col-gap: 70px;
  --check-row-gap: 26px;
  --check-mark-size: 30px;
  --check-text-size: 15px;

  /* Alternating media / content rows (service: environment & energy) */
  --alt-pad-top: 140px;
  --alt-pad-bottom: 140px;
  --alt-row-gap: 110px;
  --alt-gap: 80px;
  --alt-media-width: 46%;
  --alt-media-height: 460px;
  --alt-media-radius: 20px;
  --alt-title-size: 34px;
  --alt-text-size: 15px;

  /* Maturity ladder (service: industry 4.0) */
  --mat-pad-top: 140px;
  --mat-pad-bottom: 150px;
  --mat-head-gap: 80px;
  --mat-gap: 26px;
  --mat-step-rise: 46px;
  --mat-card-pad: 40px 32px 36px;
  --mat-card-radius: 16px;
  --mat-num-size: 15px;
  --mat-title-size: 21px;
  --mat-text-size: 14px;

  /* ----------------------------------------------------------------
     Background patterns
     ---------------------------------------------------------------- */
  /* Kept faint on purpose: these sit under body copy, so the ink is a tint of
     the heading colour at a few per cent. Dark bands override --pattern-ink
     with a white tint of the same weight. */
  --pattern-ink: rgba(20, 35, 26, 0.055);
  --pattern-dot: 22px;

  /* Cards lift off the page with a soft wash of brand green rising from the
     bottom edge. Layered as a background-image so each card keeps its own
     background-color underneath and hover states still work. */
  --card-glow: linear-gradient(
    to top,
    rgba(164, 206, 78, 0.14) 0%,
    rgba(164, 206, 78, 0.04) 32%,
    rgba(164, 206, 78, 0) 62%
  );

  /* Imprint */
  --imp-pad-top: 130px;
  --imp-pad-bottom: 140px;
  --imp-gap: 60px;
  --imp-aside: 380px;
  --imp-card-pad: 36px 32px;
  --imp-block-gap: 22px;
  --imp-block-pad: 32px 30px;

  /* Sector grid (projects page) */
  --sect-pad-top: 140px;
  --sect-pad-bottom: 150px;
  --sect-head-gap: 70px;
  --sect-gap: 26px;
  --sect-card-pad: 38px 34px 34px;
  --sect-icon: 52px;
  --sect-title-size: 21px;
  --sect-text-size: 14px;

  /* Tinted highlight panel beside a text-led intro */
  --note-pad: 40px 36px;
  --note-icon: 58px;

  /* Compact "other services" strip at the foot of a service page */
  --slinks-pad-y: 56px;
  --slinks-gap: 20px;
  --slinks-chip-gap: 10px;
  --slinks-chip-pad: 11px 22px;

  /* Before / after comparison (service: industry 4.0) */
  --cmp-pad-top: 130px;
  --cmp-pad-bottom: 140px;
  --cmp-head-gap: 60px;
  --cmp-gap: 30px;
  --cmp-row-gap: 12px;
  --cmp-row-pad: 22px;
  --cmp-pad-x: 30px;
  --cmp-arrow: 30px;
  --cmp-icon: 24px;
  /* Columns stay even — narrowing the first one drags the "after" side left
     with it. The gap in front of the arrow is closed by right-aligning the
     "before" content instead, which leaves "after" exactly where it is. */
  --cmp-before-col: 1fr;
  --cmp-head-size: 13px;
  --cmp-text-size: 15px;

  /* Stacking order for the site chrome.
     The topbar MUST sit above the header: its language dropdown opens
     downward into the header's box, and a dropdown cannot escape the
     stacking context its own ancestor creates — so raising the menu's
     z-index alone would do nothing. If the topbar drops below the header,
     the dropdown is painted behind it and swallows every click. */
  --z-header: 999;
  --z-topbar: 1000;
  --z-nav-overlay: 1040;
  --z-mobile-nav: 1050;
  --z-skip-link: 1100;
}

/* Desktop (below the 1920 design width) */
@media (max-width: 1599.98px) {
  :root {
    --fs-h1: 62px;
    --logo-height: 76px;
    --logo-gap: 34px;
    --nav-link-pad-x: 18px;
    --container-width: 84%;
    --header-container-width: 92%;
    --header-container-max: 1560px;
    --fs-h2: 42px;
    --hero-content-max: 1000px;
    --stat-font-size: 54px;
    --service-title-size: 29px;
    --service-title-width: 420px;
    --service-row-pad-y: 58px;
    --service-card-pad-y: 44px;
    --services-pad-top: 120px;
    --services-pad-bottom: 100px;
    --cta-height: 580px;
    --cta-title-size: 48px;
    --cta-title-width: 620px;
    --wwd-pad-top: 110px;
    --wwd-pad-bottom: 110px;
    --wwd-gutter: 24px;
    --wwd-card-pad-y: 34px;
    --wwd-card-pad-x: 24px;
    --wwd-head-gap: 50px;
    --marquee-height: 84px;
    --marquee-font-size: 27px;
    --blog-pad-top: 110px;
    --blog-pad-bottom: 110px;
    --blog-img-height: 300px;
    --blog-head-gap: 70px;
    --faq-split: 70px;
    --faq-intro-width: 480px;
    --faq-pad-top: 110px;
    --contact-pad-bottom: 110px;
    --contact-card-pad-y: 46px;
    --contact-card-pad-x: 40px;
    --contact-height: 500px;
    --footer-logo-height: 76px;
    --footer-top-gap: 24px;
    --footer-bottom-gap: 34px;
    --footer-col-title-size: 19px;
    --banner-height: 470px;
    --banner-pad-top: 260px;
    --banner-pad-bottom: 110px;
    --banner-title-size: 44px;
    --sc-pad-top: 110px;
    --sc-pad-bottom: 110px;
    --sc-gap: 30px;
    --sc-icon-size: 96px;
    --sc-icon-lift: 54px;
    --sc-card-pad-x: 26px;
    --hist-pad-top: 110px;
    --hist-pad-bottom: 110px;
    --hist-media-width: 640px;
    --hist-media-height: 440px;
    --hist-watermark-size: 200px;
    --hist-title-size: 40px;
    --timeline-year-active-size: 54px;
    --timeline-overhang: 40px;
    --mission-pad-top: 110px;
    --mission-pad-bottom: 110px;
    --mission-gap: 60px;
    --mission-media-width: 500px;
    --legal-pad-top: 100px;
    --legal-pad-bottom: 100px;
    --ctaduo-height: 300px;
    --blog-head-split: 44px;
    --blog-intro-width: 430px;
    --about-pad-top: 120px;
    --about-pad-bottom: 100px;
    --imp-pad-top: 100px;
    --imp-pad-bottom: 100px;
    --imp-gap: 40px;
    --imp-aside: 330px;
    --sect-pad-top: 110px;
    --sect-pad-bottom: 110px;
    --sect-head-gap: 50px;
    --sect-gap: 20px;
    --sect-card-pad: 30px 26px 28px;
    --proc-pad-top: 110px;
    --proc-pad-bottom: 110px;
    --proc-head-gap: 60px;
    --proc-gap: 22px;
    --proc-card-pad: 32px 24px 28px;
    --check-pad-top: 105px;
    --check-pad-bottom: 105px;
    --check-col-gap: 50px;
    --alt-pad-top: 110px;
    --alt-pad-bottom: 110px;
    --alt-row-gap: 80px;
    --alt-gap: 56px;
    --alt-media-height: 400px;
    --alt-title-size: 30px;
    --mat-pad-top: 110px;
    --mat-pad-bottom: 110px;
    --mat-head-gap: 60px;
    --mat-gap: 20px;
    --mat-step-rise: 34px;
    --mat-card-pad: 32px 24px 30px;
    --cmp-pad-top: 105px;
    --cmp-pad-bottom: 110px;
  }
}

/* Large laptop */
@media (max-width: 1399.98px) {
  :root {
    --fs-h1: 58px;
    --container-width: 88%;
    --header-container-width: 94%;
    --header-container-max: 1340px;
    --fs-h2: 38px;
    --lh-h2: 1.35;
    --hero-content-max: 900px;
    --stat-font-size: 46px;
    --service-title-size: 26px;
    --service-title-width: 340px;
    --service-row-pad-y: 46px;
    --service-card-pad-y: 36px;
    --service-card-pad-x: 34px;
    --service-desc-width: 300px;
    --service-icon-gap: 22px;
    --cta-height: 480px;
    --cta-title-size: 40px;
    --cta-title-width: 520px;
    --wwd-icon-size: 46px;
    --wwd-card-title-size: 20px;
    --marquee-height: 72px;
    --marquee-font-size: 22px;
    --marquee-icon-size: 26px;
    --marquee-gap: 30px;
    --blog-img-height: 260px;
    --blog-title-size: 18px;
    --blog-arrow-size: 62px;
    --faq-split: 46px;
    --faq-intro-width: 380px;
    --contact-title-size: 28px;
    --contact-height: auto;
    --footer-col-title-size: 18px;
    --footer-link-size: 14px;
    --footer-brand-width: 100%;
    --footer-address-width: 33.333%;
    --footer-services-width: 33.333%;
    --banner-height: 380px;
    --banner-pad-top: 245px;
    --banner-pad-bottom: 80px;
    --banner-title-size: 38px;
    --sc-gap: 24px;
    --sc-icon-size: 84px;
    --sc-icon-lift: 47px;
    --sc-title-size: 17px;
    --hist-media-width: 480px;
    --hist-media-height: 360px;
    --hist-watermark-size: 150px;
    --hist-title-size: 34px;
    --hist-gap: 40px;
    --timeline-year-size: 22px;
    --timeline-year-active-size: 40px;
    --timeline-overhang: 0px;
    --mission-gap: 40px;
    --mission-media-width: 380px;
    --skill-label-size: 16px;
    --ctaduo-title-size: 28px;
    --ctaduo-pad-x: 40px;
    --blog-intro-width: 330px;
    --blog-head-split: 30px;
    --header-gap: 44px;
    --header-height: 96px;
    --header-pad-left: 36px;
    --header-pad-right: 26px;
    --nav-link-pad-x: 14px;
    --logo-height: 68px;
    --logo-gap: 24px;
    --proc-title-size: 18px;
    --check-col-gap: 40px;
    --alt-gap: 44px;
    --alt-media-height: 360px;
    --alt-media-width: 44%;
    --alt-title-size: 27px;
    --mat-step-rise: 24px;
    --mat-title-size: 19px;
    --cmp-pad-x: 24px;
    --cmp-row-pad: 20px;
  }
}

/* Tablet scale-down of the type ramp */
@media (max-width: 991.98px) {
  :root {
    --fs-h1: 44px;
    --lh-h1: 1.12;
    --fs-h2: 34px;
    --fs-h3: 26px;
    --fs-h4: 22px;
    --header-height: 88px;
    --logo-height: 64px;
    --header-gap: 26px;
    --header-pad-left: 24px;
    --header-pad-right: 14px;
    --container-width: 92%;
    --header-container-width: 92%;
    --hero-content-max: 100%;
    --lh-h2: 1.3;
    --stat-font-size: 40px;
    --service-title-size: 24px;
    --service-title-width: 100%;
    --service-row-pad-y: 34px;
    --service-card-pad-y: 30px;
    --service-card-pad-x: 24px;
    --service-desc-width: 100%;
    --service-icon-gap: 16px;
    --services-pad-top: 80px;
    --services-pad-bottom: 70px;
    --cta-height: 420px;
    --cta-title-size: 34px;
    --cta-title-width: 100%;
    --wwd-pad-top: 80px;
    --wwd-pad-bottom: 80px;
    --wwd-head-gap: 36px;
    --marquee-height: 62px;
    --marquee-font-size: 18px;
    --marquee-icon-size: 20px;
    --blog-pad-top: 80px;
    --blog-pad-bottom: 80px;
    --blog-head-gap: 44px;
    --blog-body-pad-y: 26px;
    --blog-body-pad-x: 22px;
    --faq-pad-top: 80px;
    --faq-pad-bottom: 50px;
    --contact-pad-top: 50px;
    --contact-pad-bottom: 80px;
    --faq-item-pad-x: 22px;
    --contact-card-pad-y: 34px;
    --contact-card-pad-x: 24px;
    --footer-pad-top: 24px;
    --footer-logo-height: 64px;
    --footer-top-gap: 22px;
    --footer-bottom-gap: 30px;
    --footer-bottom-pad-y: 18px;
    --footer-address-width: 100%;
    --footer-services-width: 48%;
    --banner-height: 300px;
    --banner-pad-top: 270px;
    --banner-pad-bottom: 60px;
    --banner-title-size: 30px;
    --sc-pad-top: 80px;
    --sc-pad-bottom: 80px;
    --sc-head-gap: 50px;
    --hist-pad-top: 80px;
    --hist-pad-bottom: 80px;
    --hist-media-height: 260px;
    --hist-watermark-size: 110px;
    --hist-title-size: 28px;
    --timeline-year-size: 18px;
    --timeline-year-active-size: 30px;
    --timeline-dot: 13px;
    --timeline-dot-active: 22px;
    --mission-pad-top: 80px;
    --mission-pad-bottom: 80px;
    --split-pad-y: 64px;
    --legal-pad-top: 70px;
    --legal-pad-bottom: 70px;
    --legal-title-size: 28px;
    --legal-h3-size: 21px;
    --legal-text-size: 16px;
    --legal-block-gap: 26px;
    --ctaduo-height: auto;
    --ctaduo-pad-y: 56px;
    --ctaduo-pad-x: 24px;
    --ctaduo-title-size: 24px;
    --about-pad-top: 80px;
    --about-pad-bottom: 70px;
    --imp-pad-top: 80px;
    --imp-pad-bottom: 80px;
    --imp-card-pad: 28px 24px;
    --imp-block-pad: 26px 24px;
    --sect-pad-top: 80px;
    --sect-pad-bottom: 80px;
    --sect-head-gap: 40px;
    --sect-title-size: 19px;
    --proc-pad-top: 80px;
    --proc-pad-bottom: 80px;
    --proc-head-gap: 44px;
    --proc-chip: 48px;
    --check-pad-top: 80px;
    --check-pad-bottom: 80px;
    --check-head-gap: 40px;
    --check-row-gap: 20px;
    --alt-pad-top: 80px;
    --alt-pad-bottom: 80px;
    --alt-row-gap: 56px;
    --alt-gap: 30px;
    --alt-media-height: 280px;
    --alt-title-size: 24px;
    --mat-pad-top: 80px;
    --mat-pad-bottom: 80px;
    --mat-head-gap: 44px;
    --mat-step-rise: 0px;
    --mat-card-pad: 28px 24px;
    --slinks-pad-y: 44px;
    --slinks-gap: 18px;
    --cmp-pad-top: 80px;
    --cmp-pad-bottom: 80px;
    --cmp-head-gap: 40px;
    --cmp-gap: 20px;
    --cmp-pad-x: 22px;
  }
}

/* Mobile scale-down */
@media (max-width: 575.98px) {
  :root {
    --fs-h1: 34px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-p: 15px;
    --btn-min-width: 155px;
    --btn-height: 48px;
    --feature-icon-size: 44px;
    --feature-gap: 14px;
    --stat-font-size: 34px;
    --service-title-size: 21px;
    --service-arrow-size: 42px;
    --cta-height: 360px;
    --cta-title-size: 27px;
    --proc-card-pad: 26px 22px;
    /* The altrow stacks and the checklist drops to one column at 767.98px in
       style.css, so these two only make sense from here down — set any higher
       and the media block is full width while the row is still horizontal. */
    --alt-media-width: 100%;
    --check-col-gap: 0px;
    --slinks-pad-y: 36px;
    --slinks-chip-pad: 10px 18px;
    --note-pad: 30px 26px;
    --note-icon: 50px;
    --alt-media-height: 220px;
    --alt-title-size: 22px;
    --mat-title-size: 18px;
    --cmp-pad-x: 18px;
    --cmp-row-pad: 18px;
  }
}