/* --------------------------------------------------------------------------
   SELF-HOSTED WEBFONTS
   Served from this origin rather than Google Fonts. Google Fonts sets no
   cookies, but it does disclose every visitor's IP address to a third party
   outside South Africa, which is a cross-border transfer under section 72 of
   POPIA. Self-hosting removes the site's last external request, so the
   privacy position is absolute rather than qualified.
   font-display: swap keeps text visible while the font loads.
   -------------------------------------------------------------------------- */


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-latin-800-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}

/* ==========================================================================
   ASIBONGE LEGACY GROUP - 01 TOKENS
   Global design system. Every value here maps to an Elementor Global Setting.
   Elementor: Site Settings > Global Colors  /  Global Fonts  /  Layout
   ========================================================================== */

:root {

  /* ---- GLOBAL COLOURS -------------------------------------------------
     Sampled directly from the supplied logo files.
     Elementor > Site Settings > Global Colors (create in this exact order)
     --------------------------------------------------------------------- */
  --alg-primary:        #C10126;  /* Primary - deep brand red (the mark)   */
  --alg-primary-hi:     #FF2613;  /* Accent - bright red facet (hover)    */
  --alg-primary-deep:   #8E011C;  /* Pressed / active red                    */
  --alg-secondary:      #54585C;  /* Secondary - graphite plane of the mark  */
  --alg-ink:            #14161A;  /* Text - near-black wordmark         */
  --alg-dark:           #1B1E22;  /* Dark background sections                */
  --alg-dark-2:         #23272B;  /* Dark background, raised                 */
  --alg-text:           #2E3236;  /* Body text                               */
  --alg-text-muted:     #6B7075;  /* Secondary text                          */
  --alg-silver:         #9AA0A6;  /* Muted text on dark                      */
  --alg-border:         #E1E4E7;  /* Hairline border                         */
  --alg-border-dark:    rgba(255,255,255,.14); /* Hairline on dark           */
  --alg-bg:             #FFFFFF;  /* Background                              */
  --alg-bg-alt:         #F4F5F6;  /* Background, alternate                   */

  /* ---- GLOBAL FONTS ---------------------------------------------------
     Elementor > Site Settings > Global Fonts. All three are Google Fonts,
     so they load natively in Elementor with no extra plugin.
     --------------------------------------------------------------------- */
  --alg-font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --alg-font-body:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --alg-font-label:   "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale. Every size interpolates with the viewport between a
     floor and a ceiling, so nothing snaps at a breakpoint and nothing keeps
     growing on a very wide screen. Format: clamp(min, base + rate, max).
     Scaling runs roughly 500px to 1300px viewport width. */
  --alg-h1:      clamp(2rem,      1.05rem  + 3.05vw, 3.5rem);    /* 32 -> 56 */
  --alg-h2:      clamp(1.625rem,  1.10rem  + 1.70vw, 2.5rem);    /* 26 -> 40 */
  --alg-h3:      clamp(1.1875rem, 1.00rem  + 0.60vw, 1.5rem);    /* 19 -> 24 */
  --alg-h4:      clamp(1.0625rem, 1.01rem  + 0.19vw, 1.1875rem); /* 17 -> 19 */
  --alg-body:    clamp(1rem,      0.965rem + 0.11vw, 1.0625rem); /* 16 -> 17 */
  --alg-body-lg: clamp(1.0625rem, 0.99rem  + 0.23vw, 1.1875rem); /* 17 -> 19 */
  --alg-small:   clamp(0.875rem,  0.855rem + 0.06vw, 0.9375rem); /* 14 -> 15 */
  --alg-micro:   clamp(0.8125rem, 0.79rem  + 0.07vw, 0.875rem);  /* 13 -> 14 */
  --alg-nav:     clamp(0.875rem,  0.78rem  + 0.30vw, 1rem);      /* 14 -> 16 */
  --alg-button:  clamp(0.6875rem, 0.655rem + 0.10vw, 0.75rem);   /* 11 -> 12 */
  --alg-eyebrow: clamp(0.6875rem, 0.66rem  + 0.09vw, 0.75rem);   /* 11 -> 12 */
  --alg-card:    clamp(1rem,      0.94rem  + 0.19vw, 1.125rem);  /* 16 -> 18 */
  --alg-post:    clamp(1.0625rem, 0.95rem  + 0.35vw, 1.25rem);   /* 17 -> 20 */

  --alg-lh-tight: 1.12;
  --alg-lh-head:  1.22;
  --alg-lh-body:  1.75;

  /* ---- LAYOUT ---------------------------------------------------------
     Elementor > Site Settings > Layout > Content Width / Widgets Space
     --------------------------------------------------------------------- */
  --alg-container:   1280px;   /* Content width                             */
  --alg-narrow:      880px;    /* Prose measure                             */
  /* Spacing is fluid on the same curve as the type, so the page never lurches
     at a breakpoint while the text glides. */
  --alg-gutter:      clamp(1.25rem, 0.83rem  + 1.33vw, 2rem);   /* 20 -> 32 */
  --alg-gap:         clamp(1.5rem,  1.225rem + 0.89vw, 2rem);   /* 24 -> 32 */
  --alg-gap-lg:      clamp(2rem,    0.89rem  + 3.56vw, 4rem);   /* 32 -> 64 */

  /* Section padding rhythm - three values only, used everywhere. */
  --alg-section:     clamp(3.5rem, 1.275rem + 7.11vw, 7.5rem);  /* 56 -> 120 */
  --alg-section-sm:  clamp(2.5rem, 1.113rem + 4.44vw, 5rem);    /* 40 -> 80  */
  --alg-section-xs:  clamp(2rem,   1.170rem + 2.67vw, 3.5rem);  /* 32 -> 56  */

  /* Text inset and minimum block spacing, applied to text blocks only.
     Media keeps its own edges so images are never inset from their frame. */
  --alg-text-pad:    20px;    /* Left and right padding on text blocks       */
  --alg-block-top:   70px;    /* Minimum space above every section container */

  /* ---- COMPONENT CONSTANTS ------------------------------------------- */
  --alg-radius:      2px;      /* Border radius - deliberately near-zero    */
  --alg-btn-h:       44px;     /* Button height                             */
  --alg-btn-px:      26px;     /* Button horizontal padding                 */
  --alg-rule:        3px;      /* Red accent rule weight                    */
  --alg-header-h:    84px;     /* Sticky header height                      */
  --alg-utility-h:   40px;     /* Utility bar height                        */

  /* Image ratios used site-wide (only these four). */
  --alg-ratio-hero:  2.33;     /* 21:9 - full-bleed heroes and bands       */
  --alg-ratio-wide:  1.78;     /* 16:9 - news, careers, sustainability     */
  --alg-ratio-card:  1.50;     /* 3:2 - division tiles                    */
  --alg-ratio-tall:  0.80;     /* 4:5 - portraits, intro image            */

  --alg-ease: cubic-bezier(.22,.61,.36,1);
}

@media (max-width: 1024px) {
  :root { --alg-header-h: 72px; }
}

@media (max-width: 640px) {
  :root {
    /* Buttons step down on mobile. A 44px button with 26px of side padding
       and 0.12em tracking is desktop-scale and dominates a narrow column. */
    --alg-btn-h:      38px;
    --alg-btn-px:     18px;
  }
}