/* ── DM Sans — self-hosted (Google's own variable woff2: opsz 9–40, wght 100–1000) ────────────
   One file per script/style; unicode-range lets the browser fetch latin-ext
   only when a page actually uses those glyphs. The upright latin file is
   preloaded from functions.php. Keep the opsz axis — headings pin "opsz" 14. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../../fonts/dm-sans-latin-normal.woff2') format('woff2');
  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: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../../fonts/dm-sans-latin-ext-normal.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../../fonts/dm-sans-latin-italic.woff2') format('woff2');
  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: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../../fonts/dm-sans-latin-ext-italic.woff2') format('woff2');
  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;
}

/* ==========================================================================
   Base: Design tokens, reset, typography, layout utilities
   ========================================================================== */

/* ── Figma Design Tokens — Desktop ───────────────────────────────────────── */
:root {

  --font: 'DM Sans', sans-serif;
  /* Background — Background.* */
  --bg-primary:     #F0F1FA;   /* Background.Primary   */
  --bg-secondary:   #1C1024;   /* Background.Secondary */
  --bg-white:       #FFFFFF;   /* Background.Tertiary  */
  --bg-dark:        #1C1B1F;   /* Background.Dark      */
  --bg-black: #000;
  --bg-diamond-gradient:
    linear-gradient(to bottom right, #F6F6F6 0%, #FFDFF6 24%, #E5DAFF 50%) bottom right / 50% 50% no-repeat,
    linear-gradient(to bottom left,  #F6F6F6 0%, #FFDFF6 24%, #E5DAFF 50%) bottom left  / 50% 50% no-repeat,
    linear-gradient(to top left,     #F6F6F6 0%, #FFDFF6 24%, #E5DAFF 50%) top left     / 50% 50% no-repeat,
    linear-gradient(to top right,    #F6F6F6 0%, #FFDFF6 24%, #E5DAFF 50%) top right    / 50% 50% no-repeat;

  /* Text colours — Text.Color.* */
  --text-title:     #1C1B1F;   /* Text.Color.Title     */
  --text-body:      #4F4F4F;   /* Text.Color.Body-color */
  --text-light:     #FFFFFF;   /* Text.Color.Light     */
  --text-muted:     #C0C0C0;   /* Text.Color.Grey      */

  /* Icons / Buttons — IconsButton.* */
  --dragster-blue:  #3645FD;   /* IconsButton.Dragster-Blue */
  --btn-dark:       #1C1B1F;   /* IconsButton.Dark          */
  --btn-light:      #FFFFFF;   /* IconsButton.Light         */

  --icon-light: var(--bg-primary);

  /* SVG storke/swirl/wave */
  --svg-stroke-width: 58px;

  /* Title sizes — Text.Size.Title.* (Desktop) */
  --title-xl:       100px;     /* Title.XL     */
  --title-lg:       80px;      /* Title.Large  */
  --title-md:       48px;      /* Title.Medium */
  --title-sm:       40px;      /* Title.Small  */
  --title-xs:       32px;      /* Title.XS     */

  /* Title line-heights — Text.Size.Title.LineHeight.* (Desktop) */
  --title-xl-lh:    110px;
  --title-lg-lh:    86px;
  --title-md-lh:    60px;
  --title-sm-lh:    50px;
  --title-xs-lh:    45px;

  /* Letter spacing (Desktop) — ≈ -2% of the title size */
  --title-lg-ls: -1.6px;
  --title-md-ls: -0.96px;
  --title-sm-ls: -0.8px;
  --title-xs-ls: -0.32px;

  /* Body sizes — Text.Size.Body.* (Desktop) */
  --body-lg:        24px;      /* Body.Large  */
  --body-md:        20px;      /* Body.Medium */
  --body-sm:        16px;      /* Body.Small  */
  --body-xs:        14px;      /* Body.XS     */
  --body-xxs:       12px;      /* theme extra */

  /* Body line-heights — Text.Size.Body.LineHeight.* (Desktop) */
  --body-lg-lh:     36px;
  --body-md-lh:     30px;
  --body-sm-lh:     24px;

  /* Body letter-spacing */
  --body-lg-ls: -0.24px;
  --body-md-ls: -0.2px;

  /* Sizes — Sizes.* */
  --gap-sm:         10px;      /* Sizes.Gap.Small               */
  --gap-md:         12px;      /* Sizes.Gap.Medium              */
  --radius-image:   20px;      /* Sizes.Border Radius.Images    */
  --radius-btn:     30px;      /* Sizes.Border Radius.Buttons   */
  --margin-primary: 50px;      /* Sizes.Margins.Primary         */

  /* Layout — theme-specific */
  /*--container-max:  1340px;*/
  --container-max:  1440px;
  --section-py:     120px;
  --header-h:       86px;

  /* Section top/bottom padding — reusable for titled sections (e.g. the
     Expertise carousel). Follows --section-py per breakpoint until a tier
     overrides it (see the mobile block below). Sections pinned at the top of
     the viewport add the fixed header on top:
     padding-top: calc(var(--header-h) + var(--section-pt)) */
  --section-pt:     var(--section-py);
  --section-pb:     var(--section-py);
}

/* ── Design Tokens — Tablet (768–1024px) ─────────────────────────────────── */
/* Bounded range so it can never leak into the mobile tier below. RULE: all
   --token values (every breakpoint) are defined in THIS file only — a token
   redefined in a later-loading file wins the cascade and breaks the tiers. */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --title-lg:    64px;   /* tablet mid-point between desktop 80px and mobile 40px */
    --title-lg-lh: 69px;   /* ≈ the desktop 86/80 ratio — was inheriting 86px (1.34, too airy) */
    --title-lg-ls: -1.28px; /* ≈ -2% of 64px */
    --title-md:    40px;
    --title-md-lh: 50px;   /* pairs with 40px like --title-sm/-lh (was desktop 60px) */
    --title-md-ls: -0.8px; /* ≈ -2% of 40px */
    --section-py:  80px;
  }
}

/* ── Figma Design Tokens — Mobile (max-width: 767px) ─────────────────────── */
@media (max-width: 767px) {
  :root {
    /* Title sizes */
    --title-xl:     48px;
    --title-lg:     40px;
    --title-md:     32px;
    --title-sm:     24px;
    --title-xs:     20px;

    /* Title line-heights */
    --title-xl-lh:  50px;
    --title-lg-lh:  46px;
    --title-md-lh:  42px;
    --title-sm-lh:  30px;
    --title-xs-lh:  24px;

    /* Title letter-spacing — ≈ -2% of the mobile title size */
    --title-xl-ls: -0.96px;
    --title-lg-ls: -0.8px;
    --title-md-ls: -0.64px;
    --title-sm-ls: -0.48px;


    /* Body sizes */
    --body-lg:      20px;
    --body-md:      18px;
    --body-sm:      14px;
    --body-xs:      14px;

    /* Body line-heights */
    --body-lg-lh:   28px;
    --body-md-lh:   26px;
    --body-sm-lh:   24px;

    /* Body letter spacing */

    --body-md-ls: 0.2px;


    /* Spacing */
    --margin-primary: 16px;
    --section-py:     60px;

    /* Reusable section top/bottom padding — mobile */
    --section-pt:     40px;
    --section-pb:     40px;


        /* Total header height: 46px content row + 20px above/below (Figma 3190:6939) */
    --header-h:       86px;
  }
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }

/* Hide the native page scrollbar (showcase-style, like the reference sites).
   Scrolling itself still works exactly as normal — wheel, touch, keys. */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { width: 0; height: 0; display: none; }
ul    { list-style: none; }
a     { color: inherit; text-decoration: none; }
img   { max-width: 100%; height: auto; display: block; }
/* `clip`, not `hidden`: still prevents horizontal scroll, but does NOT turn
   html/body into a scroll container — `overflow-x: hidden` here silently forces
   `overflow-y: auto`, which breaks `position: sticky` (the Expertise carousel
   pin, and any other sticky). `clip` leaves overflow-y visible. */
html, body {
  overflow-x: clip;
  width: 100%;
}
body {
  font-family: var(--font);
  font-size: var(--body-sm);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-body);
  background-color: var(--bg-primary);
}

input, textarea, select, button {
  font: inherit;
}

/* iOS paints a gray semi-transparent overlay on tapped links/buttons by
   default — it read as the header CTA "fading" on touch. Our components
   provide their own press feedback (:active states, .is-pressed), so the
   built-in wash is pure noise. */
a, button {
  -webkit-tap-highlight-color: transparent;
}


/* ── Typography ──────────────────────────────────────────────────────────── */
h1 { font-size: var(--title-md); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; color: var(--text-title); }
h2 { font-size: var(--title-lg); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; color: var(--text-title); }
h3 { font-size: var(--title-xs); font-weight: 400; letter-spacing: -0.03em; line-height: 1.2;  color: var(--text-title); }
p  { line-height: 1.7; }

/*-- Headings ---*/ 
.title-xl{font-size: var(--title-xl); font-weight: 400; letter-spacing: -0.02em; line-height: var(--title-xl-lh); color: var(--text-title); }
.title-lg{font-size: var(--title-lg); font-weight: 400; letter-spacing: var(--title-lg-ls); line-height: var(--title-lg-lh); color: var(--text-title); }
.title-s{ font-size: var(--title-sm); font-weight: 400; letter-spacing: -0.02em; line-height: var(--title-sm-lh); color: var(--text-title); }

.text-lg{ font-size: var(--body-lg); line-height: var(--body-lg-lh); letter-spacing: -0.01em; color: var(--text-body);}  /* Figma Body/Large: -1% tracking */
.text-m{ font-size: var(--body-md); line-height: var(--body-md-lh); color: var(--text-body);}
.text-s{ font-size: var(--body-sm); line-height: var(--body-sm-lh); color: var(--text-body);}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-primary);
  padding-bottom: var(--margin-primary);
  width: 100%;
}



.section { padding-block: var(--section-py); }

.section--dark  { background-color: var(--bg-secondary); }
.section--white { background-color: var(--bg-white); }

/* Responsive <picture> that fills its (position:relative) container — replaces
   inline background-image on heroes so the right size loads per breakpoint. */
.media-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.media-fill__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* Render text the way Figma does (grayscale antialiasing) — the browser's
   'auto' smoothing makes light-on-dark text look a notch bolder than design. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Balanced heading rag — no lonely last words; manual breaks (textarea
   newlines → <br>) still win where an exact break is wanted. */
h1, h2, h3 { text-wrap: balance; }

/* DM Sans optical size — match Figma, which pins every text layer to the text
   cut ("opsz" 14). Left on auto, browsers pick the tighter display cut at big
   sizes and headlines render ~11% narrower than the design (measured: the same
   100px line is 839px auto vs 934px at opsz 14). */
h1, h2, h3,
.case-related__title,
.case-next__title {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
}