/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/Inter-Regular-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/Inter-Regular-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/Inter-Regular-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/Inter-Regular-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/Inter-Regular-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/Inter-Regular-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/Inter-Regular-latin.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;
}

/*
 * Kaloper typography system
 *
 * Typeface policy:
 * - Suisse Intl Regular (400): headings, subheadings and interface language
 * - Suisse Intl Medium (500): restrained emphasis only
 * - Inter Regular (400): paragraphs, form copy and supporting prose
 */

@font-face {
  font-family: "Suisse Intl";
  src: url("assets/SuisseIntl-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Intl";
  src: url("assets/SuisseIntl-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --font-suisse: "Suisse Intl", Arial, sans-serif;
  --font-inter: "Inter", Arial, sans-serif;

  /* Display is 11% above the desktop H1 scale (80–96px). */
  --type-display: clamp(88.8px, 7.4vw, 106.56px);
  --type-hero-display: var(--type-display);
  --type-hero-display-tablet: clamp(93px, 12vw, 104px);
  --type-hero-display-mobile: clamp(66px, calc(15.5vw + 4px), 72px);
  --type-hero-support-tablet: clamp(23px, 3vw, 25px);
  --type-h1: clamp(80px, 6.6667vw, 96px);
  --type-h2: clamp(48px, calc(6.6667vw - 24px), 72px);
  --type-h3: clamp(34px, calc(2.5vw + 8px), 44px);
  --type-h4: clamp(24px, 1.95vw, 28px);
  --type-h5: clamp(18px, 1.4vw, 20px);
  --type-display-xl: clamp(72px, 8.4vw, 142px);
  --type-display-xxl: clamp(88px, 11vw, 190px);
  --type-metric-display: clamp(76px, 6.2vw, 116px);
  --type-body: 18px;
  --type-body-compact: 16px;
  --type-button: 15px;
  --type-label: 12px;

  /* Compatibility tokens used by the existing page components. */
  --font-google-sans-flex: var(--font-suisse);
  --font-heading: var(--font-suisse);
  --font-subheadline: var(--font-suisse);
  --font-regular: var(--font-suisse);
  --font-medium: var(--font-suisse);
  --font-body: var(--font-inter);
}

/* Eliminate browser-synthesised light, semibold and bold faces. */
body,
body * {
  font-family: var(--font-inter) !important;
  font-weight: 400 !important;
  font-synthesis: none;
}

body *::before,
body *::after {
  font-family: inherit !important;
  font-weight: inherit !important;
}

h1,
h1 *,
h2,
h2 *,
h3,
h3 *,
h4,
h4 *,
h5,
h5 * {
  font-family: var(--font-suisse) !important;
  font-weight: 400 !important;
  text-wrap: balance;
}

h1 {
  font-size: var(--type-h1) !important;
  line-height: .92 !important;
  letter-spacing: -.05em !important;
}

/* Display is a visual role; the hero remains the page’s semantic H1. */
@media (min-width: 1200px) {
  #hero-title.type-display,
  #hero-title.type-display * {
    font-size: var(--type-display) !important;
    line-height: .92 !important;
    letter-spacing: -.05em !important;
  }
}

/* iPad and tablet hero scale: intentionally larger than the mobile fallback. */
@media (min-width: 768px) and (max-width: 1199px) {
  #hero-title,
  #hero-title * {
    font-size: var(--type-hero-display-tablet) !important;
  }

  .hero-support,
  .hero-support * {
    font-size: var(--type-hero-support-tablet) !important;
  }
}

/* Home H1 uses the mobile display token within the shared 12px page margins. */
@media (max-width: 767px) {
  #hero-title,
  #hero-title * {
    font-size: var(--type-hero-display-mobile) !important;
    line-height: .94 !important;
  }
}

h2 {
  font-size: var(--type-h2) !important;
  line-height: .95 !important;
  letter-spacing: -.045em !important;
}

h3 {
  font-size: var(--type-h3) !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
}

h4 {
  font-size: var(--type-h4) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
}

/* Desktop project-hover descriptions share the established H4 scale while
   preserving each thumbnail component's authored padding and text width. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
  .work-card-hover-overlay > span,
  .project-hover-copy > span {
    font-family: var(--font-suisse) !important;
    font-size: var(--type-h4) !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
  }
}

/* Minor headings and project identifiers. */
h5,
.featured-works .work-card h5 {
  font-size: var(--type-h5) !important;
  line-height: 1.15 !important;
  letter-spacing: -.015em !important;
}

p {
  font-family: var(--font-inter) !important;
  font-size: var(--type-body) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: -.01em !important;
}

/* The closing CTA is intentionally one rung below the display scale. */
.closing-cta-heading,
.closing-cta-heading * {
  font-family: var(--font-suisse) !important;
  font-size: var(--type-h1) !important;
  font-weight: 400 !important;
  line-height: .92 !important;
  letter-spacing: -.05em !important;
}

@media (max-width: 767px) {
  .closing-cta-heading,
  .closing-cta-heading * {
    font-size: clamp(40px, 14.5vw, 96px) !important;
  }
}

/* Large editorial moments remain deliberate exceptions to the H1-H4 scale. */
:is(
  #statement-title,
  .case-codrops-gallery__caption,
  .case-focus-gallery__caption
) {
  font-family: var(--font-suisse) !important;
  font-size: var(--type-display-xl) !important;
  font-weight: 400 !important;
  line-height: .89 !important;
  letter-spacing: -.06em !important;
}

/* Compact body copy: cards, captions, metadata and secondary descriptions. */
:is(
  .studio-metric__copy,
  .studio-footer__note-copy,
  .client-voices__role,
  .case-hero__client,
  .case-project__services,
  .case-next__meta,
  .contact-signals p,
  .contact-form__actions p,
  figcaption
) {
  font-family: var(--font-inter) !important;
  font-size: var(--type-body-compact) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -.008em !important;
}

/* Eyebrows and utility labels are interface language, not paragraph prose. */
:is(
  .about-kicker,
  .client-logo-reel__trust-line,
  .featured-works__kicker,
  .studio-footer__label,
  .case-eyebrow,
  .contact-kicker,
  .works-intro__meta,
  .case-next__eyebrow,
  .contact-field > span,
  .contact-signals p > span
) {
  font-family: var(--font-suisse) !important;
  font-size: var(--type-label) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}

/* Navigation, metrics and controls use the Suisse interface voice. */
:is(
  .site-navigation,
  .site-navigation *,
  .studio-metric__value,
  .studio-metric__value *,
  .work-card__title,
  .client-voices__author,
  .about-approach__steps em,
  input,
  textarea,
  select
) {
  font-family: var(--font-suisse) !important;
}

/* Data values are display numerals, not body paragraphs or page headings. */
.studio-metric__value {
  font-size: var(--type-metric-display) !important;
  font-weight: 400 !important;
  line-height: .88 !important;
  letter-spacing: -.075em !important;
}

:is(strong, b, .type-medium) {
  font-weight: 500 !important;
}

:is(
  button,
  .nav-action,
  .nav-action *,
  input[type="button"],
  input[type="submit"],
  .about-cta a,
  .case-next__cta
) {
  font-family: var(--font-suisse) !important;
  font-size: var(--type-button) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

@media (max-width: 767px) {
  :root {
    --type-h1: clamp(48px, calc(32.7px + 4.08vw), 64px);
    --type-h2: clamp(40px, calc(28.55px + 3.05vw), 52px);
    --type-h3: clamp(28px, calc(20.35px + 2.04vw), 36px);
  }

  h2 {
    line-height: 1.02 !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --type-h1: clamp(64px, calc(35.55px + 3.705vw), 80px);
    --type-h2: clamp(48px, calc(33.78px + 1.852vw), 56px);
    --type-h3: clamp(36px, calc(32.44px + .463vw), 38px);
  }
}

@media (max-width: 720px) {
  :root {
    --type-h4: clamp(23px, 6.4vw, 28px);
    --type-h5: 18px;
    --type-display-xl: clamp(54px, 17vw, 84px);
    --type-display-xxl: clamp(66px, 21vw, 104px);
  }
}