/* =========================================================================
   Forma DJR — @font-face declarations for HubSpot
   -------------------------------------------------------------------------
   Vinetrees Strategic Ltd
   HubSpot account: 147716870
   Source: Forma DJR Starter Pack (Mini Combined License, order 2026-05-03-cd369fd)
           plus Forma DJR UI Regular (Small Combined License, order 2026-05-03-9100e71)
   Generated: 03/05/2026

   USAGE
   -------------------------------------------------------------------------
   1. Upload all 62 web-format font files from
        Licensed Fonts/Forma DJR Starter Pack/FormaDJR_Web/fonts/
      into HubSpot File Manager folder vinetrees-strategic/fonts/
      (per section 3.2 of the HubSpot Hosting and Lead Generation Plan).

   2. After upload, right-click any single font file in HubSpot File Manager
      and choose "Copy URL". The URL will look like one of:
        https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/[hash]/...
        https://147716870.fs1.hubspotusercontent-na1.net/hubfs/[hash]/...
      Strip the filename from the end so you have the folder URL, e.g.:
        https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/[hash]/vinetrees-strategic/fonts

   3. In this file, do ONE find-and-replace:
        find:    https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts
        replace: <the folder URL from step 2, no trailing slash>

   4. (Optional) If you also uploaded FormaDJRUI-Regular.woff2/.woff from the
      separate UI Regular pack and want to use it on form inputs, uncomment
      the `FormaDJRUI` block at the bottom of this file.

   5. Paste the resulting file into HubSpot Design Manager as a new CSS file
      named forma-djr.css and publish.

   NOTES
   -------------------------------------------------------------------------
   - Variable font filename was renamed from
       FormaDJRVariableStarter[opsz,slnt,wght].{woff2,woff}
     to
       FormaDJRVariableStarter.{woff2,woff}
     to avoid CDN URL-encoding fragility with square brackets.

   - font-family names match DJR's shipped fonts.css convention
     (FormaDJRBanner, FormaDJRDisplay, FormaDJRDeck, FormaDJRText, FormaDJRMicro)
     so the design-token rules in colors_and_type.css can reference them
     by their canonical names.

   - font-display: swap is set on every block, so fallback text is shown
     immediately and replaced once the webfont loads (no flash of invisible text).

   - Numeric font-weight values used throughout (400, 500, 700) rather than
     the keyword forms (normal, bold) — clearer and more interoperable with
     CSS rules that use numeric weights.

   ========================================================================= */


/* =========================================================================
   Variable font — the workhorse.
   Covers the full design space: weight 400-700, optical size 8-72,
   slant -13deg to 0deg. Used by any rule that calls
     font-variation-settings: "opsz" …, "slnt" …
   in colors_and_type.css.
   ========================================================================= */

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRVariableStarter.woff2') format('woff2-variations'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRVariableStarter.woff')  format('woff-variations');
  font-family: 'FormaDJRVariable';
  font-style: oblique -13deg 0deg;
  font-weight: 400 700;
  font-display: swap;
}


/* =========================================================================
   Banner — for very large display text (hero headline, partner pull quote,
   contact title). Optical size tuned for 60pt and above.
   ========================================================================= */

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRBanner-Regular.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRBanner-Regular.woff')  format('woff');
  font-family: 'FormaDJRBanner';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRBanner-Italic.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRBanner-Italic.woff')  format('woff');
  font-family: 'FormaDJRBanner';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRBanner-Medium.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRBanner-Medium.woff')  format('woff');
  font-family: 'FormaDJRBanner';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRBanner-MediumItalic.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRBanner-MediumItalic.woff')  format('woff');
  font-family: 'FormaDJRBanner';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRBanner-Bold.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRBanner-Bold.woff')  format('woff');
  font-family: 'FormaDJRBanner';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRBanner-BoldItalic.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRBanner-BoldItalic.woff')  format('woff');
  font-family: 'FormaDJRBanner';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}


/* =========================================================================
   Display — for large headings (section titles, service titles, brand mark).
   Optical size tuned for ~36-48pt.
   ========================================================================= */

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDisplay-Regular.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDisplay-Regular.woff')  format('woff');
  font-family: 'FormaDJRDisplay';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDisplay-Italic.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDisplay-Italic.woff')  format('woff');
  font-family: 'FormaDJRDisplay';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDisplay-Medium.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDisplay-Medium.woff')  format('woff');
  font-family: 'FormaDJRDisplay';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDisplay-MediumItalic.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDisplay-MediumItalic.woff')  format('woff');
  font-family: 'FormaDJRDisplay';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDisplay-Bold.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDisplay-Bold.woff')  format('woff');
  font-family: 'FormaDJRDisplay';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDisplay-BoldItalic.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDisplay-BoldItalic.woff')  format('woff');
  font-family: 'FormaDJRDisplay';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}


/* =========================================================================
   Deck — mid-size headings (~24-30pt). Available if reintroduced into the
   design (not used by the current homepage, but uploaded for flexibility).
   ========================================================================= */

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDeck-Regular.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDeck-Regular.woff')  format('woff');
  font-family: 'FormaDJRDeck';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDeck-Italic.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDeck-Italic.woff')  format('woff');
  font-family: 'FormaDJRDeck';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDeck-Medium.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDeck-Medium.woff')  format('woff');
  font-family: 'FormaDJRDeck';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDeck-MediumItalic.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDeck-MediumItalic.woff')  format('woff');
  font-family: 'FormaDJRDeck';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDeck-Bold.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDeck-Bold.woff')  format('woff');
  font-family: 'FormaDJRDeck';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDeck-BoldItalic.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRDeck-BoldItalic.woff')  format('woff');
  font-family: 'FormaDJRDeck';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}


/* =========================================================================
   Text — for body copy, paragraphs, and form fields (~14-21pt).
   Optical size tuned for sustained reading.
   ========================================================================= */

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRText-Regular.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRText-Regular.woff')  format('woff');
  font-family: 'FormaDJRText';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRText-Italic.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRText-Italic.woff')  format('woff');
  font-family: 'FormaDJRText';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRText-Medium.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRText-Medium.woff')  format('woff');
  font-family: 'FormaDJRText';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRText-MediumItalic.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRText-MediumItalic.woff')  format('woff');
  font-family: 'FormaDJRText';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRText-Bold.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRText-Bold.woff')  format('woff');
  font-family: 'FormaDJRText';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRText-BoldItalic.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRText-BoldItalic.woff')  format('woff');
  font-family: 'FormaDJRText';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}


/* =========================================================================
   Micro — for the smallest UI text (footer fine print, micro labels,
   eyebrow text). Optical size tuned for ~9-13pt.
   ========================================================================= */

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRMicro-Regular.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRMicro-Regular.woff')  format('woff');
  font-family: 'FormaDJRMicro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRMicro-Italic.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRMicro-Italic.woff')  format('woff');
  font-family: 'FormaDJRMicro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRMicro-Medium.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRMicro-Medium.woff')  format('woff');
  font-family: 'FormaDJRMicro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRMicro-MediumItalic.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRMicro-MediumItalic.woff')  format('woff');
  font-family: 'FormaDJRMicro';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRMicro-Bold.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRMicro-Bold.woff')  format('woff');
  font-family: 'FormaDJRMicro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRMicro-BoldItalic.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRMicro-BoldItalic.woff')  format('woff');
  font-family: 'FormaDJRMicro';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}


/* =========================================================================
   UI — OPTIONAL. From the separate Forma DJR UI Regular Small license
   (order 2026-05-03-9100e71). Tuned for small interface elements where
   open spacing and a slightly taller x-height aid readability.

   To enable: upload FormaDJRUI-Regular.woff2 / .woff from
     Licensed Fonts/Forma DJR Regular/FormaDJR_Web/fonts/
   into the same HubSpot fonts/ folder, then uncomment this block.
   In colors_and_type.css, change --font-ui to lead with 'FormaDJRUI'.
   ========================================================================= */

/*
@font-face {
  src: url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRUI-Regular.woff2') format('woff2'),
       url('https://147716870.fs1.hubspotusercontent-eu1.net/hubfs/147716870/vinetrees-strategic/fonts/FormaDJRUI-Regular.woff')  format('woff');
  font-family: 'FormaDJRUI';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
*/