/* ══════════════════════════════════════════════════════════════════════════
   TALENTnext — Gridline system layer
   --------------------------------------------------------------------------
   Paste this into Elementor → Site Settings → Custom CSS (once).

   It is a port of web/src/gridline/tokens/primitives.css and semantic.css,
   plus the three sitewide marks every section reuses — the architectural
   frame, the blueprint lattice and the crosshair. The section templates
   reference these tokens by name, exactly as the app's components do, so
   re-theming is re-pointing an alias here and never editing a section.

   Required by: talentnext-hero.json, talentnext-archetypes.json, and every
   section template after them. The header and footer templates are
   self-contained and do not need it.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ────────────────────────────────────────────────────────────────────────
     Layer 1 — Primitives. Raw, context-free values.
     Nothing outside this file should reference a primitive directly;
     sections consume the semantic aliases further down.
     ──────────────────────────────────────────────────────────────────────── */

  /* ── Where these values come from ─────────────────────────────────────
     Every colour primitive below reads a Global Colour from the Brandkit,
     with the literal as its fallback. That makes the kit's Global Colours
     panel the single source of truth: editing one there re-tints the
     widgets AND these tokens together, so a section's CSS block and the
     panel can never drift onto two different reds.

     The fallback is not decoration — it is what lets any template render
     correctly before the kit is imported, or if it never is.

     The semantic aliases further down still point at these primitives, so
     the two-layer architecture is unchanged: sections consume roles, roles
     resolve to primitives, primitives resolve to the kit.
     ──────────────────────────────────────────────────────────────────── */

  /* Colour — Rose, the single accent family, rebased on the brand #F9423A */
  --gl-rose-50: #fff7f6;
  --gl-rose-100: #ffedeb;
  --gl-rose-200: #ffdcd9;
  --gl-rose-300: var(--e-global-color-glrose300, #ffc2bc);
  --gl-rose-400: var(--e-global-color-glrose400, #ff978e); /* hero glow, outer stop */
  --gl-rose-500: var(--e-global-color-glrose500, #ff6e60); /* hero glow, mid stop */
  --gl-rose-600: var(--e-global-color-glaccent, #f9423a); /* THE accent */
  --gl-rose-700: var(--e-global-color-glrose700, #bf3629); /* accent, pressed / hover */
  --gl-rose-800: #a02d23;
  --gl-rose-900: var(--e-global-color-glrose900, #8c271e);

  --gl-crimson-700: #be185d;
  --gl-signal-600: var(--e-global-color-gldatafill, #e11d2e); /* quantitative marks, warmer than the accent */

  /* Colour — Plate tints (three grounds, and the ruled marks drawn on them)

     The Tal band shows three things Tal does, one after another on a timer,
     and three panels that differ only in their contents read as one panel
     redrawing itself. A change of ground is what makes them read as three
     places rather than one.

     ALL THREE ARE NOW THE ACCENT'S OWN RED, and they are named after the
     PANEL rather than after a colour. They used to be green, amber and azure
     — three unrelated hues, which made the band a small second palette
     sitting inside a page with exactly one accent in it. Worse, two of the
     three had drifted warm enough to read as yellow, and yellow beside a red
     accent is the one neighbour that makes the accent look dirty.

     What separates the tones now is TEMPERATURE inside the one red, not hue:
     `read` is the neutral tint of the accent itself, `ask` is pushed a few
     units towards coral, `voice` a few units the other way towards rose.
     Side by side in a swatch they are nearly the same colour; arriving one
     after another under a white card, with the mesh putting each one's
     weight in a different corner, they are plainly three different grounds.

     Named for the PANEL because a colour name is the one thing that can go
     stale here — `azure` was already lying, and the moment the other two
     went red all three were. A panel name cannot.

     FOUR STEPS EACH, because a plate is a mesh and not a fill:

         -50    the base wash, nearly white; what the middle of the plate is
         -100   the first pool, bled in from one corner
         -150   the second pool, bled in from another
         -200   the marks drawn on the ground

     None of these is contrast-safe and none may carry type — a darker step
     would have to be added first. They are also deliberately NOT Global
     Colours in the kit: twelve near-identical near-whites that can never
     hold type are noise in a palette a designer picks roles from. */
  --gl-plate-read-50: #fff7f6;
  --gl-plate-read-100: #feeae8;
  --gl-plate-read-150: #fff2f0;
  --gl-plate-read-200: #f9d6d4;

  --gl-plate-ask-50: #fff8f5;
  --gl-plate-ask-100: #feeae5;
  --gl-plate-ask-150: #fff0ed;
  --gl-plate-ask-200: #f8d6cd;

  --gl-plate-voice-50: #fff6f7;
  --gl-plate-voice-100: #fde9ec;
  --gl-plate-voice-150: #fef1f0;
  --gl-plate-voice-200: #f6d6d9;

  /* Colour — Neutral ramp. Half-steps exist where the source used two
     near-identical greys for genuinely different roles. */
  --gl-neutral-0: var(--e-global-color-glcanvas, #ffffff);
  --gl-neutral-25: var(--e-global-color-glhover, #fafafb); /* card hover wash */
  --gl-neutral-50: var(--e-global-color-glsunken, #f8f9fa); /* inset panel / alternating module */
  --gl-neutral-100: var(--e-global-color-glmutedbg, #f4f4f6); /* secondary button rest */
  --gl-neutral-175: var(--e-global-color-glrule, #f0f0f2); /* THE grid rule */
  --gl-neutral-200: #ececef; /* the grid rule's pre-lightening value */
  --gl-neutral-250: var(--e-global-color-gltick, #e5e7eb); /* meter track, ruler tick */
  --gl-neutral-300: #e2e8f0; /* progress track */
  --gl-neutral-400: var(--e-global-color-gltickmaj, #d1d5db); /* ruler tick (major), inert marker */
  --gl-neutral-450: var(--e-global-color-glinteract, #a1a1aa); /* interactive border, hover */
  --gl-neutral-500: #9ca3af; /* crosshair glyph */
  --gl-neutral-600: #71717a;
  --gl-neutral-640: var(--e-global-color-glmuted, #69707c); /* caption / metric, cool — 5.0:1 */
  --gl-neutral-650: #6b7280;
  --gl-neutral-675: var(--e-global-color-glbody, #5f6672); /* body copy, cool — 5.8:1 */
  --gl-neutral-700: #52525b;
  --gl-neutral-725: var(--e-global-color-glprose, #4d545f); /* prose, cool — 7.8:1 */
  --gl-neutral-750: #4b5563;
  --gl-neutral-775: #3f3f46;
  --gl-neutral-780: var(--e-global-color-glheading, #333a45); /* heading, second tier — 11.4:1 */
  --gl-neutral-790: var(--e-global-color-glink, #23282f); /* heading ink — dark, never black — 14.7:1 */
  --gl-neutral-795: var(--e-global-color-glruleinv, #1e1e1e); /* hairline on the dark surfaces */
  --gl-neutral-800: #18181b;
  --gl-neutral-850: #111827;
  --gl-neutral-900: var(--e-global-color-glinverse, #111111); /* text, primary */
  --gl-neutral-950: #0e1013; /* video letterbox */
  --gl-neutral-1000: var(--e-global-color-glaction, #000000); /* primary action */
  --gl-neutral-1000-hover: var(--e-global-color-glactionhov, #262626);

  --gl-green-50: #f0fdf4;
  --gl-green-600: #16a34a;

  /* Typeface — one face for the whole system. Helvetica Neue ships with
     macOS/iOS and is not licensable through Google Fonts, so it is a
     platform stack rather than a webfont import: the app downloads no font
     file at all. Regular (400) is the one cut every platform in this stack
     actually has. */
  --gl-font-sans-stack: "Helvetica Neue", Helvetica, Arial, "Liberation Sans",
    sans-serif;
  --gl-font-sans: var(--gl-font-sans-stack);
  /* Two aliases survive from when the system had a second, mono face. Both
     now resolve to the same stack, so no rule needed changing. */
  --gl-font-mono: var(--gl-font-sans-stack);
  --gl-font-accent-mono: var(--gl-font-sans-stack);

  /* Type — weight */
  --gl-weight-light: 300;
  --gl-weight-regular: 400;
  --gl-weight-medium: 500;
  --gl-weight-semibold: 600;
  --gl-weight-bold: 700;

  /* Type — size. One modular scale: 1rem (16px) base, 1.25 ratio (the
     "major third"). Every type size in the system is a step on it. The
     three steps above h1 exist only because the hero headline runs past
     h1 — they are the same ratio carried further, not a second scale. */
  --gl-scale-6xl: 11.6415rem; /* 186.26px */
  --gl-scale-5xl: 9.3132rem; /*  149.01px */
  --gl-scale-4xl: 7.4506rem; /*  119.21px */
  --gl-scale-3xl: 5.9605rem; /*   95.37px */
  --gl-scale-2xl: 4.7684rem; /*   76.29px */
  --gl-scale-h1: 3.8147rem; /*    61.04px */
  --gl-scale-h2: 3.0518rem; /*    48.83px */
  --gl-scale-h3: 2.4414rem; /*    39.06px */
  --gl-scale-h4: 1.9531rem; /*    31.25px */
  --gl-scale-h5: 1.5625rem; /*       25px */
  --gl-scale-h6: 1.25rem; /*         20px */
  --gl-scale-p: 1rem; /*             16px */
  --gl-scale-small: 0.8rem; /*     12.8px */
  --gl-scale-footnote: 0.64rem; /* 10.24px */

  /* Role sizes. Fluid roles clamp between two steps of the scale above, so
     a heading is never off-scale at any viewport width — only which step it
     has reached changes. */
  --gl-size-display: clamp(var(--gl-scale-h3), 5.2vw, var(--gl-scale-h1));
  --gl-size-editorial: clamp(var(--gl-scale-h4), 4.4vw, var(--gl-scale-h2));
  --gl-size-editorial-tight: clamp(
    var(--gl-scale-h4),
    3.6vw,
    var(--gl-scale-h3)
  );
  --gl-size-mono-display: clamp(var(--gl-scale-h5), 3.2vw, var(--gl-scale-h3));
  --gl-size-heading-lg: clamp(var(--gl-scale-h5), 2.6vw, var(--gl-scale-h4));
  --gl-size-heading-sm: clamp(var(--gl-scale-h6), 1.9vw, var(--gl-scale-h5));

  --gl-size-mono-heading: var(--gl-scale-h6);
  --gl-size-heading-md: var(--gl-scale-h6);
  --gl-size-title: var(--gl-scale-h6);

  /* The h6 step (20px) is the heading tier's floor and belongs to it alone:
     keeping the largest body role a full ratio step below the smallest
     heading is what makes the two tiers read as different things when every
     one of them is the same weight. bodyLg is "large body" by leading and
     measure, not by size. */
  --gl-size-body-lg: var(--gl-scale-p);
  --gl-size-body-base: var(--gl-scale-p);
  --gl-size-body-md: var(--gl-scale-p);
  --gl-size-body-sm: var(--gl-scale-small);
  --gl-size-caption: var(--gl-scale-small);
  --gl-size-micro: var(--gl-scale-small);
  --gl-size-nano: var(--gl-scale-footnote);

  /* Type — line height */
  --gl-leading-flat: 1;
  --gl-leading-display: 1.08;
  --gl-leading-tight: 1.1;
  --gl-leading-snug: 1.16;
  --gl-leading-title: 1.25;
  --gl-leading-heading: 1.35;
  --gl-leading-normal: 1.5;
  --gl-leading-relaxed: 1.55;
  --gl-leading-body: 1.6;

  /* Type — letter spacing. The negative half of this ramp is entirely
     unused: every role in the system tracks at 0. Positive tracking for
     small uppercase marks is the live half — all-caps genuinely needs the
     room, and that is the only place letter-spacing is set at all. */
  --gl-tracking-normal: 0;
  --gl-tracking-wide: 0.05em;
  --gl-tracking-wider: 0.06em;
  --gl-tracking-widest: 0.08em;

  /* Space — 2px base, 4px rhythm */
  --gl-space-0: 0;
  --gl-space-1: 0.25rem; /*     4 */
  --gl-space-2: 0.375rem; /*    6 */
  --gl-space-3: 0.5rem; /*      8 */
  --gl-space-4: 0.625rem; /*   10 */
  --gl-space-5: 0.75rem; /*    12 */
  --gl-space-6: 0.875rem; /*   14 */
  --gl-space-7: 1rem; /*       16 */
  --gl-space-8: 1.125rem; /*   18 */
  --gl-space-9: 1.25rem; /*    20 */
  --gl-space-10: 1.375rem; /*  22 */
  --gl-space-11: 1.5rem; /*    24 */
  --gl-space-12: 1.75rem; /*   28 */
  --gl-space-13: 2rem; /*      32 */
  --gl-space-14: 2.25rem; /*   36 */
  --gl-space-15: 2.5rem; /*    40 */
  --gl-space-16: 2.75rem; /*   44 */
  --gl-space-17: 3rem; /*      48 */
  --gl-space-18: 3.25rem; /*   52 */
  --gl-space-19: 3.5rem; /*    56 */
  --gl-space-20: 4rem; /*      64 */
  --gl-space-21: 4.5rem; /*    72 */
  --gl-space-22: 5.5rem; /*    88 */
  --gl-space-23: 6rem; /*      96 */

  /* Fluid space — the module gutters that hold the architectural frame */
  --gl-space-gutter-sm: clamp(1.25rem, 3.5vw, 3rem); /*  20 → 48 */
  --gl-space-gutter-md: clamp(1.5rem, 4vw, 3rem); /*     24 → 48 */
  --gl-space-gutter-lg: clamp(2rem, 4vw, 4rem); /*       32 → 64 */
  --gl-space-gutter-xl: clamp(2rem, 5vw, 6rem); /*       32 → 96 */
  --gl-space-block-sm: clamp(2.25rem, 4vh, 3.25rem); /*  36 → 52 */
  --gl-space-block-md: clamp(2.5rem, 4.5vw, 4rem); /*    40 → 64 */
  --gl-space-block-lg: clamp(3.5rem, 7vh, 5.5rem); /*    56 → 88 */
  --gl-space-block-xl: clamp(4rem, 8vh, 6rem); /*        64 → 96 */

  /* Border — width & radius. Gridline is a square system: actions carry
     zero radius by rule, and radius is reserved for content surfaces. */
  --gl-border-width-hairline: 1px;
  --gl-border-width-rule: 1.5px;
  --gl-border-width-thick: 2px;

  --gl-radius-none: 0;
  --gl-radius-xs: 1px;
  --gl-radius-sm: 2px;
  --gl-radius-md: 6px;
  --gl-radius-lg: 8px;
  --gl-radius-xl: 12px;
  --gl-radius-2xl: 20px;
  --gl-radius-full: 9999px;

  /* Elevation */
  --gl-shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.03);
  --gl-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.05);
  --gl-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.06);
  --gl-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
  --gl-shadow-phone: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.12));

  /* Motion */
  --gl-duration-fast: 150ms;
  --gl-duration-moderate: 300ms;
  --gl-duration-slow: 500ms;
  --gl-ease-standard: ease-out;
  --gl-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  /* Ambient float loops used by the hero cards */
  --gl-float-duration-a: 6s;
  --gl-float-duration-b: 6.5s;
  --gl-float-duration-c: 5.5s;

  /* Layout — the architectural frame. The measure the two constant vertical
     rules sit on, and that the header and every section re-apply so their
     own edges land exactly on those rules. One token, so all of them move
     together — never hard-code the number.

     Two terms, binding at different sizes. The 1400px cap governs desktop;
     the 95vw term governs everything narrower, where the page should keep
     hugging the viewport with a thin margin rather than sitting in a well. */
  --gl-frame-max-width: min(1400px, 95vw);
  --gl-header-height: 78px;
  --gl-measure-prose: 680px;
  --gl-measure-header: 960px;
  --gl-measure-hero: 1240px;
  --gl-measure-form: 680px;
  --gl-measure-stage: 1160px;

  /* Z-index — one ordered scale, no magic numbers in sections */
  --gl-z-below: -1;
  --gl-z-base: 1;
  --gl-z-raised: 2;
  --gl-z-stage: 3;
  --gl-z-floating: 4;
  --gl-z-content: 5;
  --gl-z-decoration: 10;
  --gl-z-header: 100;
  --gl-z-overlay: 200;

  /* ────────────────────────────────────────────────────────────────────────
     Layer 2 — Semantic aliases. Role-named tokens. This is the ONLY layer
     the section templates consume. Re-theming means re-pointing an alias
     here, never editing a section's own CSS.
     ──────────────────────────────────────────────────────────────────────── */

  /* Surface */
  --gl-color-surface-canvas: var(--gl-neutral-0);
  --gl-color-surface-raised: var(--gl-neutral-0);
  --gl-color-surface-hover: var(--gl-neutral-25);
  --gl-color-surface-sunken: var(--gl-neutral-50);
  --gl-color-surface-muted: var(--gl-neutral-100);
  --gl-color-surface-inverse: var(--gl-neutral-900);
  --gl-color-surface-letterbox: var(--gl-neutral-950);
  --gl-color-surface-accent-soft: rgba(255, 72, 55, 0.08);
  --gl-color-surface-success: var(--gl-green-50);

  /* Border — the system draws hairlines in exactly TWO colours, and which
     one a mark uses is decided by the surface beneath it and by nothing
     else:

         light surfaces   --gl-color-border-rule      #f0f0f2
         dark surfaces    --gl-color-border-inverse   #1e1e1e

     `--gl-color-border-rule` is the load-bearing token of the whole system:
     the two constant verticals, every module divider, every hairline — and,
     because the blueprint lattice below is drawn from these same two
     tokens, every grid line as well. A drawn grid line and a drawn border
     are the same mark, and they frequently meet, so they must never be two
     slightly different greys. */
  --gl-color-border-rule: var(--gl-neutral-175);
  --gl-color-border-inverse: var(--gl-neutral-795);

  /* These role names survive so no section stylesheet needed changing, but
     they are no longer distinct VALUES — side by side, four near-identical
     light greys read as inconsistency rather than as hierarchy. If a
     genuine second light hairline is ever wanted, re-point one here. */
  --gl-color-border-subtle: var(--gl-color-border-rule);
  --gl-color-border-elevated: var(--gl-color-border-rule);
  --gl-color-border-strong: var(--gl-color-border-rule);
  --gl-color-border-dashed: var(--gl-color-border-rule);
  --gl-color-border-media: var(--gl-color-border-rule);

  /* Deliberately OUTSIDE the two-colour rule: these are not resting
     borders but interaction states on form controls. Folding them onto
     `--gl-color-border-rule` would leave a focused field looking identical
     to an idle one, which is a change to what the form communicates.
     `-interactive` also doubles as a small solid fill (the footer's legal
     dot), which is not a border at all. */
  --gl-color-border-interactive: var(--gl-neutral-450);
  --gl-color-border-selected: var(--gl-neutral-1000);

  /* Text — two rules shape this ramp. Headings are dark but never black;
     the darkest tone in the system is #23282f, a cool near-black that still
     reads as a colour rather than as maximum ink. Prose is lighter than the
     headings by a clear margin, and that separation is what carries
     hierarchy, since weight never varies and tracking is 0 everywhere.

     Everything clears WCAG AA on white: the lightest tier here (captions,
     the smallest type in the system) is 5.0:1. */
  --gl-color-text-primary: var(--gl-neutral-790); /*  14.7:1 — headings */
  --gl-color-text-heading: var(--gl-neutral-780); /*  11.4:1 — headings */
  --gl-color-text-secondary: var(--gl-neutral-725); /* 7.8:1 — prose */
  --gl-color-text-body: var(--gl-neutral-675); /*      5.8:1 — prose on panels */
  --gl-color-text-muted: var(--gl-neutral-640); /*     5.0:1 — captions */
  --gl-color-text-metric: var(--gl-neutral-640);
  --gl-color-text-inverse: var(--gl-neutral-0);
  /* Not a straight neutral swap of -secondary: that token is tuned for
     white backgrounds and reads too low-contrast reversed onto black. */
  --gl-color-text-inverse-secondary: rgba(255, 255, 255, 0.74);
  --gl-color-text-accent: var(--gl-rose-600);
  --gl-color-text-decoration: var(--gl-neutral-500);
  --gl-color-text-success: var(--gl-green-600);

  /* Accent */
  --gl-color-accent: var(--gl-rose-600);
  --gl-color-accent-hover: var(--gl-rose-700);
  --gl-color-accent-glow: rgba(255, 72, 55, 0.35);

  /* Quantitative marks — meter fills and timeline markers. The source
     deliberately warms these off the rose accent. */
  --gl-color-data-fill: var(--gl-signal-600);
  --gl-color-data-track: var(--gl-neutral-250);
  --gl-color-data-track-alt: var(--gl-neutral-300);
  --gl-color-data-inert: var(--gl-neutral-400);

  /* The plate tones, one set per Tal-band tab. A tone is FIVE values in the
     section's own stylesheet — a ground, two pools, an angle and two corners
     — of which four are colours and live here. */
  --gl-color-surface-plate-read: var(--gl-plate-read-50);
  --gl-color-surface-plate-read-pool-a: var(--gl-plate-read-100);
  --gl-color-surface-plate-read-pool-b: var(--gl-plate-read-150);
  --gl-color-surface-plate-ask: var(--gl-plate-ask-50);
  --gl-color-surface-plate-ask-pool-a: var(--gl-plate-ask-100);
  --gl-color-surface-plate-ask-pool-b: var(--gl-plate-ask-150);
  --gl-color-surface-plate-voice: var(--gl-plate-voice-50);
  --gl-color-surface-plate-voice-pool-a: var(--gl-plate-voice-100);
  --gl-color-surface-plate-voice-pool-b: var(--gl-plate-voice-150);
  --gl-color-plate-line-read: var(--gl-plate-read-200);
  --gl-color-plate-line-ask: var(--gl-plate-ask-200);
  --gl-color-plate-line-voice: var(--gl-plate-voice-200);

  /* Scrollbars — see the base rules further down. */
  --gl-color-scroll-thumb: var(--gl-neutral-400);
  --gl-color-scroll-thumb-hover: var(--gl-neutral-450);

  /* Ruler / gauge marks — the vertical measuring rule in the deliverables
     band. Two identical tick tracks are stacked: the base track in grey, and
     an accent copy on top whose `clip-path` is revealed from the bottom up,
     so the scale reads as filling with elapsed progress. */
  --gl-color-tick: var(--gl-neutral-250);
  --gl-color-tick-major: var(--gl-neutral-400);
  --gl-color-tick-progress: var(--gl-color-accent);

  /* Action — primary is the black square button, not the accent */
  --gl-color-action-primary-bg: var(--gl-neutral-1000);
  --gl-color-action-primary-bg-hover: var(--gl-neutral-1000-hover);
  --gl-color-action-primary-fg: var(--gl-neutral-0);
  --gl-color-action-secondary-bg: var(--gl-neutral-100);
  --gl-color-action-secondary-bg-hover: #eaeaea;
  --gl-color-action-secondary-fg: var(--gl-color-text-primary);
  --gl-color-action-ghost-fg: var(--gl-color-text-secondary);
  --gl-color-action-ghost-fg-hover: var(--gl-color-text-primary);
  --gl-color-action-ghost-bg-hover: var(--gl-neutral-50);
  --gl-color-focus-ring: var(--gl-rose-600);

  /* ------------------------------------------------------------------------
     Control sizing — shared by Button, TextField and PillOption so the three
     line up on a row without per-component magic numbers.

     The vertical halves are literals rather than steps off the spacing scale
     because they are solving for a target HEIGHT, not for a rhythm. Both
     button labels are 12.8px on leading 1, so the content box is a fixed
     12.8px and the padding is whatever makes up the difference:

         lg   14 + 12.8 + 14  -> 48.96px   pad 18.08
         md   11 + 12.8 + 11  -> 41.76px   pad 14.48

     Scaling the padding itself by 1.2 would NOT give a 1.2x button, since
     the label's own 12.8px does not scale with it — hence the arithmetic.
     Only Button reads the first two; the field and pill tokens are separate
     and were left alone, so inputs did not grow with the buttons.
     ---------------------------------------------------------------------- */
  --gl-control-padding-lg: 18.08px var(--gl-space-12); /* 18.08  28 */
  --gl-control-padding-md: 14.48px var(--gl-space-10); /* 14.48  22 */
  --gl-control-padding-field: var(--gl-space-5) var(--gl-space-6); /* 12 14 */
  --gl-control-padding-pill: var(--gl-space-5) var(--gl-space-7); /* 12 16 */

  /* Media treatment — the accent tint over photography. A flat overlay at
     30%, derived from the accent token via color-mix, so a re-themed accent
     re-tints the photography automatically. */
  --gl-color-media-tint: color-mix(
    in srgb,
    var(--gl-color-accent) 30%,
    transparent
  );

  /* Hero ambient glow */
  --gl-gradient-hero-glow: radial-gradient(
    ellipse 85% 100% at 50% 100%,
    rgba(255, 72, 55, 0.65) 0%,
    rgba(255, 110, 96, 0.45) 28%,
    rgba(255, 151, 142, 0.2) 55%,
    transparent 78%
  );

  /* The accent-word text fill, as a CSS gradient. In the app this backs
     hero-v2's slow sweep; here it is the SAFETY NET under the plate below —
     see the note there. Rose stops only, never a raw hex, so re-theming the
     accent re-tints this too. */
  --gl-gradient-accent-text: linear-gradient(
    100deg,
    var(--gl-rose-700) 0%,
    var(--gl-rose-600) 30%,
    var(--gl-rose-500) 50%,
    var(--gl-rose-600) 70%,
    var(--gl-rose-700) 100%
  );

  /* The hero's accent word ("TALENT") is filled with a supplied gradient
     plate rather than a CSS gradient — the artwork's ramp runs deep rose on
     the left out to a near-white pink on the right, which no stop list
     reproduces exactly. Painted through the letterforms with
     `background-clip: text`, so it behaves as a fill, not a background box.

     ⚠ THIS URL MUST RESOLVE. The word is painted with `background-clip:
     text` over a transparent fill, so if the file 404s there is nothing to
     paint through the letterforms and the headline goes INVISIBLE — it still
     takes up its space, which is what makes the failure look like a layout
     bug rather than a missing asset. The hero layers
     `--gl-gradient-accent-text` underneath as a safety net, so a missing
     plate now costs the exact artwork rather than the whole headline. */
  --gl-image-accent-plate: url("/wp-content/uploads/2026/09/maskgradient.png");

  /* The blueprint lattice — the hero's backdrop and the spacer panels that
     open other sections. Its lines are drawn in the border tokens, not in
     colours of their own: a grid line and a module's hairline are the same
     mark doing the same job, and they frequently meet, so painting them in
     two near-but-not-quite greys shows the join as a visible step. */
  --gl-gradient-blueprint: linear-gradient(
      to right,
      var(--gl-color-border-rule) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, var(--gl-color-border-rule) 1px, transparent 1px);
  --gl-gradient-blueprint-inverse: linear-gradient(
      to right,
      var(--gl-color-border-inverse) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      var(--gl-color-border-inverse) 1px,
      transparent 1px
    );

  /* The lattice is defined by how many cells span the canvas, not by a
     fixed cell width, because the grid has to line up with the two sitewide
     verticals at every viewport width. Every box that draws it is exactly
     as wide as the canvas column, so sizing the columns as `100% / n` puts
     a line precisely on the left rule and closes the last cell precisely on
     the right one — no half-column sliver cropped off at the edge, which is
     what a fixed cell width leaves behind at all but a handful of window
     widths. */
  --gl-blueprint-columns: 25;
  --gl-blueprint-cell-x: calc(100% / var(--gl-blueprint-columns));
  /* The row height in px, since a vertical percentage would resolve against
     each box's own height and make the cells different shapes in every
     section. Derived from the same division so the cells stay square — it
     is off by the two hairlines' share (2px / 25, well under a tenth of a
     pixel) and reads as exact. */
  --gl-blueprint-cell: calc(
    var(--gl-frame-max-width) / var(--gl-blueprint-columns)
  );
  --gl-mask-blueprint: radial-gradient(
    ellipse 65% 55% at 50% 45%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 0) 75%
  );
}

/* ══════════════════════════════════════════════════════════════════════════
   The architectural frame
   --------------------------------------------------------------------------
   Two constant 1px verticals run uninterrupted from the top of the sticky
   header to the bottom of the footer; no section may bleed past them. Each
   section is a ruled box inside them, closed off at the bottom by the same
   hairline, so consecutive sections never double up on a 2px seam.

   In the app the verticals are drawn once, by GridCanvas, for the whole
   page. Drawn per section they render identically — the sections stack edge
   to edge with no gaps — and that is what lets each one ship as its own
   Elementor template.

   Add `tn-section` to any section's top-level container. Set the container's
   own Content Width to Boxed / 1400px so the panel reads correctly; the
   `min()` term is the half Elementor's control cannot express, which is why
   this one declaration has to win.
   ══════════════════════════════════════════════════════════════════════════ */