/* brand.css — originally GENERATED by tools/extract/extract.py from
   brand/hwg-brand.css + tools/extract/brand-roles.css. Those sources were
   deleted with the Framer mirror (H9), so this file is now maintained by hand.
   Here We Go. — Jet Black #000000 / Pure White #FFFFFF, strict monochrome. */

/* ---------- type ------------------------------------------------- */
/* The only two families the site ships (contract: every Framer @font-face deleted). */
@font-face {
  font-family: 'Bingo Dilan';
  src: url('/assets/fonts/BingoDilan-Regular.woff2') format('woff2'),
       url('/assets/fonts/BingoDilan-Regular.woff') format('woff');
  font-weight: 100 900; /* one cut, mapped across the template's weights */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/assets/fonts/outfit-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  src: url('/assets/fonts/outfit-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- colour tokens (from brand/hwg-brand.css) ------------- */
:root {
  --hwg-black: #000000;
  --hwg-white: #ffffff;
  /* Page background. The template paints the page (body + the dotted-border
     section wrappers) in this off-white, with pure-white cards on top; the
     brand pass had flattened it to #fff, which lost that contrast. */
  --hwg-off-white: #fafafa;
  /* Two greys, one role each. --hwg-grey is the template's light grey and
     stays on lines: the dotted section borders, dividers and input borders.
     --hwg-grey-text is the same grey darkened for secondary copy on the
     light surfaces (body paragraphs, pill labels, form labels, footer
     small print), where #b3b3b3 was ~2.1:1 against #fff / #fafafa. #707070
     is 4.95:1 on #fff and 4.74:1 on the #fafafa page background, both
     past WCAG AA's 4.5:1; #767676, the usual "AA grey", only reaches 4.35:1
     on #fafafa. On the dark surfaces the light grey already sits at 8:1+,
     so those keep --hwg-grey (see the RichTextContainer rules below). */
  --hwg-grey: #b3b3b3;
  --hwg-grey-text: #707070;

  /* Strict monochrome: the accent role is carried by contrast, not hue.
     currentColor makes every former-orange run of text take the colour of
     the text around it — white on black, black on white — which is exactly
     what the guideline's two-colour palette asks for. Buttons that used it
     as a *background* are handled explicitly further down. */
  --hwg-accent: currentColor;
}

/* ---------- colour tokens ---------------------------------------- */
/* The template's design tokens, remapped. Names are Framer's uuids;
   the comment is the value they used to hold.

   Declared on `html body` as well as `:root`: Framer defines these on
   `body`, and body's own declaration beats anything inherited from the
   root element, so a `:root`-only override silently does nothing. */
:root,
html body {
  /* accents — orange #f40 / #f53 / #f90 */
  --token-5a129a99-4f5a-4917-a711-84cf650abf7d: var(--hwg-accent);
  --token-82d4bcc9-573a-4162-9786-a69066f83aed: var(--hwg-accent);
  --token-ce00c4ae-74c4-4155-8847-324ea0c93167: var(--hwg-accent);

  /* accent tints — peach #ffa280 / #ffdacc */
  --token-976a1627-1072-47b1-bc54-b58f3cfe4b38: var(--hwg-grey);
  --token-8f0bd39b-7384-4320-aa3a-00fdcfcf6764: #f2f2f2;

  /* near-blacks #050505 / #1a1a1a / #1f1f1f / #000 → Jet Black */
  --token-05ba60ad-ea69-4607-b99c-a3c987c679f6: var(--hwg-black);
  --token-3a1165b6-a05f-48b5-a5c0-bcfa4ef17c48: var(--hwg-black);
  --token-18bfca7b-2eaa-4eaf-b30e-2e83644ca420: var(--hwg-black);
  --token-8a650152-2d6e-46ea-8610-9e6ba7a473d7: var(--hwg-black);
  --token-e4214787-11d1-43fc-87e3-ba96a4a90ac7: var(--hwg-black);
  --token-444d3696-50ea-40ee-9e00-33878facf90f: var(--hwg-black);

  /* whites → Pure White */
  --token-5e4a9a17-35e5-4f0c-b88b-7a6cb15bd7f2: var(--hwg-white);
  --token-62db09ed-742f-4971-bf0d-b56b38ba7c4d: var(--hwg-white);
  --token-072e68e4-6ef3-4ced-b3cd-dad2748f2658: var(--hwg-white);
  --token-17ab3bbb-fde0-43e8-bad0-4c918f819ff8: var(--hwg-white);
  --token-ba5c18f7-3d59-43f3-a78d-ab5535fe6229: var(--hwg-white);
  --token-bb4e057a-c85e-414d-8ab8-fef338857b90: var(--hwg-white);

  /* off-whites #fafafa → page background (kept, see --hwg-off-white) */
  --token-68cc4841-bdec-4332-832a-45928a6537d2: var(--hwg-off-white);
  --token-b93151a0-fbaa-4494-9f16-fb5bc7e1b5af: var(--hwg-off-white);
  --token-a71b82ef-66df-47b5-80a8-0a9d168eb645: var(--hwg-white);

  /* greys — kept, they carry hierarchy the two-colour palette still needs.
     2f25ab63 is the template's shared grey: --border-color on every dotted
     section/divider and --framer-input-border-color on the form, AND the
     text colour of most secondary copy (via --extracted-r6o4lv /
     --framer-text-color on rich-text blocks). It stays the line grey here;
     the text role is re-pointed on the rich-text containers below.
     1f5c424b is only ever used as text / placeholder colour, so it takes
     the text grey directly. */
  --token-2f25ab63-251e-4c8a-a43c-96b3d2cd687b: var(--hwg-grey);
  --token-e17401d4-4f1b-4bd6-9a6f-efa3823251f3: var(--hwg-grey);
  --token-1f5c424b-0c9b-4797-bb4e-e321473f3c05: var(--hwg-grey-text);
  --token-7d0a86f6-183b-48f7-9cdd-ce1afd693465: var(--hwg-grey);

  /* links */
  --framer-link-hover-text-color: var(--hwg-accent);
}

/* Secondary-text contrast (PENDING-FOR-SIBI "Grey text contrast").
   Every grey run of text lives in a Framer RichTextContainer, whose inline
   style resolves the shared grey token 2f25ab63 into --framer-text-color /
   --extracted-r6o4lv. Re-pointing the token on those containers (and only
   there) darkens the text while the dotted borders and input borders, which
   read the same token from their own elements, keep the light line grey.
   Dark surfaces — the hero and book-a-meeting sections (data-theme="dark")
   and the black Methodology step cards (Framer variant "Dark") — keep the
   template's light grey for both tokens: it already passes there (10:1 on
   black), and #707070 on black would drop to 4.2:1. The menu overlay is
   white in this build, so it takes the darker text like the footer. */
[data-framer-component-type="RichTextContainer"] {
  --token-2f25ab63-251e-4c8a-a43c-96b3d2cd687b: var(--hwg-grey-text);
}
[data-theme="dark"] [data-framer-component-type="RichTextContainer"],
[data-framer-name="Dark"] [data-framer-component-type="RichTextContainer"] {
  --token-2f25ab63-251e-4c8a-a43c-96b3d2cd687b: var(--hwg-grey);
  --token-1f5c424b-0c9b-4797-bb4e-e321473f3c05: var(--hwg-grey);
}

/* ---------- pills / solid buttons -------------------------------- */
/* These used the accent as a *fill*. Under currentColor a fill and its
   own label collapse to one colour, so hwg-brand.js finds them by that
   exact signature and tags them for an explicit inversion instead. */
.hwg-fill {
  background-color: var(--hwg-black) !important;
  color: var(--hwg-white) !important;
  border-color: var(--hwg-black) !important;
}
.hwg-fill.hwg-fill-invert {
  background-color: var(--hwg-white) !important;
  color: var(--hwg-black) !important;
  border-color: var(--hwg-white) !important;
}
.hwg-fill *,
.hwg-fill .framer-text {
  color: inherit !important;
}

/* ---------- hero wordmark ---------------------------------------- */
/* "Here We Go." is half again as long as the template wordmark it replaces, so
   the oversized hero lockup needs to be re-fitted rather than clipped. */
.hwg-wordmark-fit {
  font-size: clamp(2rem, 11.2vw, 15rem) !important;
  white-space: nowrap !important;
  letter-spacing: -0.03em !important;
}

/* ---------- guideline hygiene ------------------------------------ */
/* "Use solid backgrounds. Avoid gradients or shadows." */
.hwg-strict [class*="framer-"] {
  text-shadow: none !important;
}

/* ---------- the symbol ------------------------------------------- */
/* Geometric asterisk built from four arrow forms; rotates on scroll. */
.hwg-asterisk {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  will-change: transform;
}
.hwg-asterisk svg { display: block; width: 100%; height: 100%; }
.hwg-asterisk path { fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .hwg-asterisk { transform: none !important; }
}

/* ---------- font roles (D17, D18, D31) --------------------------- */
/* Bingo Dilan: h1–h6 and .hwg-title (service names, methodology step
   names, section pill labels, [NN] numbers). Outfit: everything else,
   including the big lead paragraphs (hero line, About + Clients side text).

   Framer resolves every text preset through custom properties set inline
   per element (--framer-font-family, -bold, -italic, -bold-italic,
   --framer-font-family-preview, link / blockquote / code variants, often
   "-encoded) and a dozen selectors that read them. Chasing each
   variable is fragile, so the role is applied twice:
     1. to the variables themselves, so any rule that reads them resolves
        to the role's family, and
     2. to the font-family *property*, with !important, so no preset,
        inline variable or fallback can win.
   An important author declaration beats inline styles, and the title rule
   (0,1,2) outranks the body rule (0,0,2). */
:root {
  --hwg-font-title: "Bingo Dilan", Georgia, serif;
  --hwg-font-body: "Outfit", system-ui, sans-serif;
}

html body,
html body * {
  --framer-font-family: var(--hwg-font-body) !important;
  --framer-font-family-bold: var(--hwg-font-body) !important;
  --framer-font-family-italic: var(--hwg-font-body) !important;
  --framer-font-family-bold-italic: var(--hwg-font-body) !important;
  --framer-font-family-preview: var(--hwg-font-body) !important;
  --framer-code-font-family: var(--hwg-font-body) !important;
  --framer-blockquote-font-family: var(--hwg-font-body) !important;
  --framer-link-font-family: var(--hwg-font-body) !important;
  --framer-input-font-family: var(--hwg-font-body) !important;
  font-family: var(--hwg-font-body) !important;
}
html body *::before,
html body *::after,
html body ::placeholder {
  font-family: var(--hwg-font-body) !important;
}

html body :is(h1, h2, h3, h4, h5, h6, .hwg-title),
html body :is(h1, h2, h3, h4, h5, h6, .hwg-title) * {
  --framer-font-family: var(--hwg-font-title) !important;
  --framer-font-family-bold: var(--hwg-font-title) !important;
  --framer-font-family-italic: var(--hwg-font-title) !important;
  --framer-font-family-bold-italic: var(--hwg-font-title) !important;
  --framer-font-family-preview: var(--hwg-font-title) !important;
  --framer-link-font-family: var(--hwg-font-title) !important;
  font-family: var(--hwg-font-title) !important;
}

/* ---------- R3: fit-text titles clipped at the top --------------- */
/* Framer's fit-text titles (hero wordmark, section-break titles) render
   inside <svg><foreignObject> at a 0.8em line box. Inter's glyphs fit
   that box; Bingo Dilan's ascent + 0.45em descent do not, and the svg's
   viewBox clips the overflow. A 1em line box holds the glyphs. */
.framer-fit-text > .framer-text {
  line-height: 1em !important;
}