@font-face {
  font-family: "Saudi Web";
  src: url("../assets/vendor/saudi/files/SaudiWeb-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Saudi Web";
  src: url("../assets/vendor/saudi/files/SaudiWeb-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
 * Wahaaj AlBadr · Typography & rhythm V39
 * A final, intentionally quiet scale. It preserves every word, brand colour,
 * logo asset and content order while overriding the accumulated oversized
 * type rules in earlier public layers.
 */

body.agency-v3 {
  --a-font: "Tajawal", system-ui, sans-serif;
  --w-font-body: "Tajawal", system-ui, sans-serif;
  --w-font-display: "Saudi Web", "Tajawal", system-ui, sans-serif;
  --v39-body: clamp(.94rem, .92rem + .08vw, 1rem);
  --v39-label: clamp(.72rem, .70rem + .10vw, .80rem);
  --v39-card: clamp(1.05rem, 1rem + .18vw, 1.18rem);
  --v39-section: clamp(1.40rem, 1.22rem + .72vw, 1.82rem);
  --v39-page: clamp(1.70rem, 1.45rem + .95vw, 2.25rem);
  --v39-hero: clamp(1.90rem, 1.62rem + 1.24vw, 2.62rem);
  --v39-showcase: clamp(1.76rem, 1.48rem + 1.16vw, 2.48rem);
  font-family: var(--a-font);
  line-height: 1.72;
}

/* Explicitly reset V4's variable font and 800-weight display rules. */
body.agency-v3 :is(h1, h2, h3, h4, h5, h6, p, li, a, button, label, input, select, textarea, strong, small, span):not(.ph) {
  font-family: var(--a-font);
  font-variation-settings: normal;
}

body.agency-v3 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--w-font-display) !important;
  /* V38 has more-specific 800-weight home rules; this is deliberately final. */
  font-weight: 700 !important;
  letter-spacing: 0;
  line-height: 1.34;
}

body.agency-v3 :is(h1, h2, h3, h4, h5, h6) em {
  font-weight: inherit;
  letter-spacing: inherit;
}

body.agency-v3 :is(p, li) {
  font-size: var(--v39-body);
  line-height: 1.82;
}

body.agency-v3 .agency-kicker {
  font-size: var(--v39-label);
  font-weight: 700;
  letter-spacing: 0;
}

body.agency-v3 :is(.agency-button, .agency-desktop-nav a, .agency-mobile-menu a) {
  font-weight: 700;
}

body.agency-v3 .agency-button {
  min-height: 46px;
  padding: 10px 18px;
  font-size: .88rem;
}

body.agency-v3 .agency-wordmark-copy strong {
  font-family: var(--w-font-display) !important;
  font-size: 1.04rem;
  font-weight: 700;
}

body.agency-v3 .agency-wordmark-copy > span {
  font-size: .67rem;
  font-weight: 500;
}

/* Home: the same hierarchy, without the previous billboard-scale headings. */
body[data-page="home"] .wahaaj-showcase {
  padding: 82px 0 16px;
}

body[data-page="home"] .wahaaj-showcase-viewport {
  height: clamp(380px, 35vw, 460px);
}

body.agency-v3 .wahaaj-showcase-copy {
  bottom: clamp(28px, 3.5vw, 48px);
}

body.agency-v3 .wahaaj-showcase-copy :is(h1, h2) {
  max-width: 13.5ch;
  margin: 13px 0 10px;
  font-size: var(--v39-showcase);
  line-height: 1.25;
  letter-spacing: 0;
}

body.agency-v3 .wahaaj-showcase-copy p {
  font-size: clamp(.88rem, .84rem + .12vw, .98rem);
  line-height: 1.78;
}

body.agency-v3 .wahaaj-showcase-copy a {
  min-height: 44px;
  margin-top: 16px;
  padding: 9px 14px;
  font-size: .82rem;
  font-weight: 700;
}

body[data-page="home"] .agency-hero {
  min-height: 0;
  padding: 64px 0 52px;
}

body.agency-v3 .agency-hero-grid {
  gap: clamp(30px, 4vw, 44px);
}

body.agency-v3 .agency-hero-copy h1 {
  max-width: 13.2ch;
  margin: 14px 0 16px;
  font-size: var(--v39-hero);
  line-height: 1.27;
  letter-spacing: -.022em;
}

body.agency-v3 .agency-hero-copy p {
  max-width: 58ch;
  font-size: var(--v39-body);
  line-height: 1.82;
}

body.agency-v3 .agency-hero-actions {
  margin-top: 22px;
}

body.agency-v3 .agency-trust-list {
  margin-top: 20px;
}

body.agency-v3 .agency-trust-list li {
  font-size: .76rem;
}

body[data-page="home"] .wahaaj-hero-stage {
  min-height: clamp(340px, 31vw, 400px);
}

/* Page and section titles use one restrained scale throughout the public site. */
body.agency-v3 :is(.agency-section-head h2, .agency-monthly-grid > div > h2, .agency-trust-grid h2, .agency-final-cta h2) {
  font-size: var(--v39-section);
  line-height: 1.38;
}

body.agency-v3 :is(.agency-inner-grid h1, .agency-detail-hero h1, .agency-quote-hero h1, .agency-portfolio-hero h1, .agency-legal h1) {
  font-size: var(--v39-page);
  line-height: 1.31;
}

body.agency-welcome-page .wahaaj-welcome-copy h1 {
  font-size: clamp(1.92rem, 1.52rem + 1.45vw, 2.62rem);
  line-height: 1.3;
}

body.agency-v3 :is(.agency-service-card h3, .agency-occasion-grid h3, .agency-process-grid h3, .agency-portfolio-card h3) {
  min-height: 0;
  font-size: var(--v39-card);
  line-height: 1.46;
}

body.agency-v3 :is(.agency-service-list-card h2, .agency-detail-cards h2, .agency-quote-guide h2) {
  font-size: clamp(1.20rem, 1.08rem + .42vw, 1.48rem);
  line-height: 1.45;
}

body.agency-v3 .agency-quote-form legend {
  font-size: clamp(1.18rem, 1.08rem + .30vw, 1.38rem);
  line-height: 1.5;
}

/* Calm the vertical rhythm without moving the content architecture. */
body.agency-v3 .agency-container {
  width: min(1160px, calc(100% - 48px));
}

body.agency-v3 .agency-section {
  padding-block: clamp(50px, 4vw, 64px);
}

body.agency-v3 .agency-section-head {
  gap: clamp(18px, 3vw, 34px);
  margin-bottom: clamp(26px, 3vw, 36px);
}

body.agency-v3 :is(.agency-inner-hero, .agency-detail-hero, .agency-quote-hero) {
  padding-block: 122px 62px;
}

body[data-page="home"] .agency-service-card {
  padding: 14px 14px 18px;
}

body[data-page="home"] .agency-service-card img {
  height: clamp(142px, 11.5vw, 180px);
  margin-bottom: 14px;
}

body.agency-v3 .agency-service-card p {
  min-height: 0;
  margin-block: 7px 12px;
  font-size: .88rem;
  line-height: 1.78;
}

body.agency-v3 :is(.agency-process-grid article, .agency-detail-cards article, .agency-occasion-grid article) {
  min-height: 0;
  padding: 22px;
}

body.agency-v3 .agency-final-cta .agency-container {
  padding-block: clamp(50px, 4vw, 64px);
}

@media (max-width: 760px) {
  body.agency-v3 .agency-container {
    width: calc(100% - 36px);
  }

  body[data-page="home"] .wahaaj-showcase {
    padding: 68px 0 10px;
  }

  body[data-page="home"] .wahaaj-showcase-viewport {
    height: clamp(350px, 96vw, 420px);
  }

  body.agency-v3 .wahaaj-showcase-copy {
    right: 19px;
    bottom: 20px;
    left: 19px;
  }

  body.agency-v3 .wahaaj-showcase-copy h2 {
    max-width: 12.5ch;
    font-size: clamp(1.62rem, 7.2vw, 1.96rem);
    line-height: 1.31;
  }

  body.agency-v3 .wahaaj-showcase-copy p {
    font-size: .84rem;
    line-height: 1.72;
  }

  body[data-page="home"] .agency-hero {
    padding: 40px 0 38px;
  }

  body.agency-v3 .agency-hero-grid {
    gap: 18px;
  }

  body.agency-v3 .agency-hero-copy h1 {
    max-width: 13.5ch;
    font-size: clamp(1.78rem, 7.6vw, 2.04rem);
    line-height: 1.30;
  }

  body[data-page="home"] .wahaaj-hero-stage {
    min-height: 330px;
    margin-top: 0;
  }

  body.agency-v3 :is(.agency-section-head h2, .agency-monthly-grid > div > h2, .agency-trust-grid h2, .agency-final-cta h2) {
    font-size: clamp(1.38rem, 6vw, 1.70rem);
    line-height: 1.42;
  }

  body.agency-v3 :is(.agency-inner-grid h1, .agency-detail-hero h1, .agency-quote-hero h1, .agency-portfolio-hero h1, .agency-legal h1, .wahaaj-welcome-copy h1) {
    font-size: clamp(1.66rem, 7vw, 1.94rem);
    line-height: 1.34;
  }

  body.agency-v3 .agency-section {
    padding-block: 42px;
  }

  body.agency-v3 .agency-section-head {
    margin-bottom: 24px;
  }

  body.agency-v3 :is(.agency-inner-hero, .agency-detail-hero, .agency-quote-hero) {
    padding-block: 100px 46px;
  }

  body[data-page="home"] .agency-service-card {
    padding: 12px 12px 16px;
  }

  body[data-page="home"] .agency-service-card img {
    height: 132px;
    margin-bottom: 12px;
  }

  body.agency-v3 .agency-service-card p {
    font-size: .86rem;
  }
}