@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Be+Vietnam+Pro:wght@400;500;600&display=swap");

:root {
  /* Colors */
  --color-primary: #265386;
  --color-primary-hover: #2f66a4;
  --color-primary-active: #2f66a4;
  --color-navy: #1f1f2c;
  --color-text: #11111d;
  --color-text-muted: #666666;
  --color-surface: #ffffff;
  --color-surface-alt: #fbfbfb;
  --color-surface-tint: #edf3f9;
  --color-border-light: rgba(164, 166, 199, 0.2);
  --color-border-strong: #11111d;
  --color-border-hover: #3f3f4c;
  --color-ink-hover: #3f3f4c;
  --color-secondary-surface: #e5edf1;
  --color-nav-divider: rgba(146, 198, 224, 0.2);
  --color-link-active: #92c6e0;

  /* Gradients */
  --gradient-contact: linear-gradient(180deg, #edf3f9 50%, #ffffff 100%);
  --gradient-section: linear-gradient(180deg, #edf3f9 0%, #ffffff 100%);

  /* Typography */
  --font-display: "Outfit", sans-serif;
  --font-body: "Be Vietnam Pro", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-36: 36px;
  --text-40: 40px;
  --text-44: 44px;
  --text-52: 52px;

  --lh-115: 1.15;
  --lh-120: 1.2;
  --lh-150: 1.5;
  --lh-160: 1.6;
  --lh-20px: 20px;
  --lh-16px: 16px;

  /* Type scales */
  --type-hero-home-size: var(--text-52);
  --type-hero-home-lh: var(--lh-115);
  --type-hero-page-size: var(--text-44);
  --type-hero-page-lh: var(--lh-115);
  --type-title-lg-size: var(--text-44);
  --type-title-lg-lh: var(--lh-120);
  --type-title-md-size: var(--text-44);
  --type-title-md-lh: var(--lh-120);
  --type-title-sm-size: var(--text-24);
  --type-title-sm-lh: var(--lh-120);
  --type-body-lg-size: var(--text-20);
  --type-body-lg-lh: var(--lh-160);
  --type-body-size: var(--text-18);
  --type-body-lh: var(--lh-160);
  --type-body-sm-size: var(--text-16);
  --type-body-sm-lh: var(--lh-150);
  --type-caption-size: var(--text-14);
  --type-caption-lh: var(--lh-120);

  /* Spacing */
  --space-0: 0;
  --space-4: 4px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-17: 17px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-27: 27px;
  --space-30: 30px;
  --space-32: 32px;
  --space-35: 35px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-52: 52px;
  --space-54: 54px;
  --space-64: 64px;
  --space-70: 70px;
  --space-75: 75px;
  --space-85: 85px;
  --space-100: 100px;
  --space-104: 104px;
  --space-110: 110px;
  --space-135: 135px;
  --space-150: 150px;

  /* Borders */
  --border-0-75: 0.75px;
  --border-1: 1px;
  --border-10: 10px;

  /* Radii */
  --radius-6: 6px;
  --radius-7: 7.099px;
  --radius-12: 12px;
  --radius-20: 20px;
  --radius-30: 30px;

  /* Shadows */
  --shadow-card: 0 4px 10px 0 rgba(0, 0, 0, 0.05);

  /* Layout */
  --size-full: 100%;
  --page-max: 1440px;
  --content-max: 1170px;
  --gutter-min: 24px;
  --gutter-max: 135px;
  --section-y: 75px;
  --section-y-lg: 150px;
  --section-y-sm: 40px;
  --section-body-gap: var(--space-16);
  --stack-row-direction: row;
  --stack-row-align: center;
  --grid-cols-2: 2;
  --grid-cols-3: 3;
  --grid-cols-4: 4;

  /* Z-index */
  --z-nav: 10;
  --z-nav-panel: 20;

  /* Navbar */
  --logo-width: 232px;
  --logo-height: 34px;
  --nav-padding-y: var(--space-24);
  --nav-menu-display: flex;
  --nav-toggle-display: none;
  --nav-menu-gap: var(--space-40);
  --nav-panel-display: none;
  --nav-panel-display-open: none;
  --nav-panel-padding-x: var(--space-70);
  --nav-panel-padding-y: var(--space-0);
  --nav-panel-item-padding-y: var(--space-20);
  --nav-cta-pad-x: var(--space-32);
  --nav-cta-pad-y: var(--space-12);
  --nav-cta-font-size: var(--text-16);
  --nav-cta-desktop-display: inline-flex;
  --nav-cta-mobile-display: none;

  /* Footer */
  --footer-direction: row;
  --footer-gap: var(--space-32);
  --footer-padding-top: var(--space-100);
  --footer-padding-bottom: var(--space-20);
  --footer-link-size: var(--text-16);

  /* Buttons */
  --btn-primary-pad-x: var(--space-36);
  --btn-primary-pad-y: var(--space-16);
  --btn-secondary-pad-x: var(--space-20);
  --btn-secondary-pad-y: var(--space-12);
  --btn-hero-pad-x: var(--space-32);
  --btn-hero-pad-y: var(--space-17);

  /* Contact cards */
  --contact-card-width: 600px;

  /* Measures */
  --measure-610: 610px;
  --measure-543: 543px;
  --measure-516: 516px;
  --measure-500: 500px;
  --measure-419: 419px;
  --measure-370: 370px;
  --measure-358: 358px;
  --measure-335: 335px;

  /* Hero */
  --hero-home-min-height: 585px;
  --hero-home-align: left;
  --hero-home-content-width: 488px;
  --hero-home-body-width: var(--measure-543);
  --hero-page-content-width: var(--measure-610);
  --hero-home-padding-y: var(--space-104);
  --hero-actions-direction: row;
  --hero-actions-gap: var(--space-25);
  --hero-actions-align: flex-start;

  /* Layout */
  --split-gap: var(--space-70);
  --split-cols: 2;

  /* Photo pair (left) */
  --photo-left-lg-w: 365.625px;
  --photo-left-lg-h: 394px;
  --photo-left-lg-x: 0px;
  --photo-left-lg-y: 0px;
  --photo-left-sm-w: 230.764px;
  --photo-left-sm-h: 265px;
  --photo-left-sm-x: 304.24px;
  --photo-left-sm-y: 177px;

  /* Photo pair (right) */
  --photo-right-lg-w: 378px;
  --photo-right-lg-h: 379px;
  --photo-right-lg-x: 100px;
  --photo-right-lg-y: 0px;
  --photo-right-sm-w: 231px;
  --photo-right-sm-h: 265px;
  --photo-right-sm-x: 0px;
  --photo-right-sm-y: 156px;
}

@media (max-width: 1024px) {
  :root {
    --page-max: 1024px;
    --content-max: 100%;
    --gutter-min: 24px;
    --gutter-max: 70px;
    --section-y: 75px;
    --section-y-lg: 110px;
    --section-y-sm: 32px;
    --section-body-gap: var(--space-16);
    --stack-row-direction: row;
    --stack-row-align: center;
    --grid-cols-2: 2;
    --grid-cols-3: 2;
    --grid-cols-4: 2;

    --type-hero-home-size: var(--text-36);
    --type-hero-page-size: var(--text-44);
    --type-title-lg-size: var(--text-44);
    --type-title-md-size: var(--text-36);
    --type-body-lg-size: var(--text-18);
    --type-body-size: var(--text-18);

    --logo-width: 232px;
    --logo-height: 34px;
    --nav-padding-y: var(--space-24);
    --nav-menu-display: none;
    --nav-toggle-display: inline-flex;
    --nav-panel-display: none;
    --nav-panel-display-open: flex;
    --nav-panel-padding-x: var(--space-70);
    --nav-panel-padding-y: var(--space-0);
    --nav-panel-item-padding-y: var(--space-20);
    --nav-cta-pad-x: var(--space-32);
    --nav-cta-pad-y: var(--space-12);
    --nav-cta-font-size: var(--text-16);
    --nav-cta-desktop-display: inline-flex;
    --nav-cta-mobile-display: none;

    --footer-direction: row;
    --footer-gap: var(--space-24);
    --footer-link-size: var(--text-14);

    --photo-left-lg-w: 278.149px;
    --photo-left-lg-h: 299.735px;
    --photo-left-sm-w: 175.553px;
    --photo-left-sm-h: 201.598px;
    --photo-left-sm-x: 231.45px;
    --photo-left-sm-y: 134.65px;

    --photo-right-lg-w: 321.854px;
    --photo-right-lg-h: 322.705px;
    --photo-right-lg-x: 50px;
    --photo-right-sm-w: 196.688px;
    --photo-right-sm-h: 225.638px;
    --photo-right-sm-x: 0px;
    --photo-right-sm-y: 132.83px;

    --hero-home-min-height: 539px;
    --hero-home-align: left;
    --hero-home-content-width: var(--measure-358);
    --hero-home-body-width: var(--measure-358);
    --hero-page-content-width: var(--measure-610);
    --hero-home-padding-y: var(--space-100);
    --hero-actions-direction: column;
    --hero-actions-gap: var(--space-16);
    --hero-actions-align: stretch;
    --split-cols: 2;
  }
}

@media (max-width: 1180px) {
  :root {
    --photo-left-lg-w: 278.149px;
    --photo-left-lg-h: 299.735px;
    --photo-left-sm-w: 175.553px;
    --photo-left-sm-h: 201.598px;
    --photo-left-sm-x: 231.45px;
    --photo-left-sm-y: 134.65px;

    --photo-right-lg-w: 321.854px;
    --photo-right-lg-h: 322.705px;
    --photo-right-lg-x: 50px;
    --photo-right-sm-w: 196.688px;
    --photo-right-sm-h: 225.638px;
    --photo-right-sm-x: 0px;
    --photo-right-sm-y: 132.83px;
  }
}

@media (max-width: 640px) {
  :root {
    --page-max: 375px;
    --content-max: 100%;
    --gutter-min: 20px;
    --gutter-max: 20px;
    --section-y: 35px;
    --section-y-lg: 70px;
    --section-y-sm: 24px;
    --section-body-gap: var(--space-8);
    --stack-row-direction: column;
    --stack-row-align: flex-start;
    --grid-cols-2: 1;
    --grid-cols-3: 1;
    --grid-cols-4: 1;

    --type-hero-home-size: var(--text-44);
    --type-hero-page-size: var(--text-44);
    --type-title-lg-size: var(--text-36);
    --type-title-md-size: var(--text-36);
    --type-body-lg-size: var(--text-18);
    --type-body-size: var(--text-16);
    --type-body-sm-size: var(--text-16);

    --logo-width: 144px;
    --logo-height: 21px;
    --nav-padding-y: var(--space-20);
    --nav-menu-display: none;
    --nav-toggle-display: inline-flex;
    --nav-panel-display: none;
    --nav-panel-display-open: flex;
    --nav-panel-padding-x: var(--space-20);
    --nav-panel-padding-y: var(--space-0);
    --nav-panel-item-padding-y: var(--space-20);
    --nav-cta-pad-x: var(--space-16);
    --nav-cta-pad-y: var(--space-8);
    --nav-cta-font-size: var(--text-12);
    --nav-cta-desktop-display: none;
    --nav-cta-mobile-display: inline-flex;

    --footer-direction: column;
    --footer-gap: var(--space-32);
    --footer-link-size: var(--text-14);
    --footer-padding-top: var(--space-35);
    --footer-padding-bottom: var(--space-35);

    --contact-card-width: 100%;

    --photo-left-lg-w: 228.943px;
    --photo-left-lg-h: 246.71px;
    --photo-left-sm-w: 144.497px;
    --photo-left-sm-h: 165.935px;
    --photo-left-sm-x: 190.5px;
    --photo-left-sm-y: 110.83px;

    --photo-right-lg-w: 264.916px;
    --photo-right-lg-h: 265.617px;
    --photo-right-lg-x: 70.08px;
    --photo-right-sm-w: 161.893px;
    --photo-right-sm-h: 185.722px;
    --photo-right-sm-x: 0px;
    --photo-right-sm-y: 109.33px;

    --hero-home-min-height: 869px;
    --hero-home-align: center;
    --hero-home-content-width: var(--size-full);
    --hero-home-body-width: var(--size-full);
    --hero-page-content-width: var(--size-full);
    --hero-home-padding-y: var(--space-40);
    --hero-actions-direction: column;
    --hero-actions-gap: var(--space-16);
    --hero-actions-align: stretch;
    --split-cols: 1;
  }
}

@media (max-width: 360px) {
  :root {
    --page-max: 320px;
    --gutter-min: 16px;
    --gutter-max: 16px;

    --nav-cta-pad-x: var(--space-12);
    --nav-cta-pad-y: var(--space-8);
    --nav-cta-font-size: var(--text-12);

    --hero-home-min-height: 869px;
    --hero-home-padding-y: var(--space-32);

    --photo-left-lg-w: 200px;
    --photo-left-lg-h: 215px;
    --photo-left-sm-w: 130px;
    --photo-left-sm-h: 150px;
    --photo-left-sm-x: 165px;
    --photo-left-sm-y: 95px;

    --photo-right-lg-w: 230px;
    --photo-right-lg-h: 230px;
    --photo-right-lg-x: 55px;
    --photo-right-sm-w: 145px;
    --photo-right-sm-h: 165px;
    --photo-right-sm-x: 0px;
    --photo-right-sm-y: 95px;
  }
}