@import url("../assets/vendor/tajawal/local.css");

/*
 * Wahaaj AlBadr · Visual Luxury V38
 * A presentation layer for the public experience. It intentionally consumes
 * the existing brand tokens, markup and logo without replacing content or
 * the logo asset. Public interface icons and service art are refreshed in
 * their own local, versioned assets.
 */

body.agency-v3 {
  --v38-gold: var(--w-sun, #f8c807);
  --v38-gold-soft: #ffe98e;
  --v38-burgundy: var(--w-magenta, #cf0e5d);
  --v38-burgundy-deep: var(--w-magenta-deep, #9d073f);
  --v38-ink: var(--w-ink, #120810);
  --v38-paper: var(--w-paper, #fffdf9);
  --v38-hairline: rgba(207, 14, 93, .14);
  --v38-glass: rgba(255, 255, 255, .08);
  --v38-shadow: 0 28px 72px rgba(46, 5, 27, .15);
  --v38-shadow-deep: 0 36px 100px rgba(10, 1, 7, .38);
  --v38-radius-card: 28px;
  --v38-radius-control: 16px;
  background:
    radial-gradient(circle at 92% 7%, rgba(248, 200, 7, .045), transparent 26rem),
    radial-gradient(circle at 6% 32%, rgba(207, 14, 93, .045), transparent 31rem),
    var(--v38-paper);
}

body.agency-v3 {
  --a-font: "Tajawal", "Alexandria", system-ui, sans-serif;
  font-family: var(--a-font);
}

/* This is deliberately broad: it makes the local Arabic typeface a visible
   system change rather than leaving inherited V4 component declarations on
   Alexandria. Phosphor keeps its own glyph font below. */
body.agency-v3 :not(.ph) {
  font-family: "Tajawal", "Alexandria", system-ui, sans-serif;
}

body.agency-v3 :is(h1, h2, h3) {
  font-family: "Tajawal", "Alexandria", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.042em;
  line-height: 1.22;
  font-variation-settings: "wght" 800;
}

body.agency-v3 :is(h1, h2) em {
  font-weight: 700;
  letter-spacing: -.052em;
}

body.agency-v3 :is(p, li, label, input, select, textarea, button) {
  letter-spacing: -.012em;
}

body.agency-v3 .agency-icon.ph {
  width: auto;
  height: auto;
  display: inline-grid;
  flex: none;
  place-items: center;
  font-family: "Phosphor" !important;
  font-size: 1.28em;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-rendering: geometricPrecision;
}

body.agency-v3 :is(.agency-button, .agency-text-link, .wahaaj-showcase-copy a) .agency-icon.ph {
  font-size: 1.12em;
}

body.agency-v3 .agency-kicker {
  font-weight: 800;
  letter-spacing: .015em;
}

body.agency-v3 .agency-kicker i {
  width: 42px;
  height: 2px;
  box-shadow: 0 0 13px rgba(248, 200, 7, .45);
}

/* Header and navigation: a quiet, floating glass rail. */
body.agency-v3 .agency-header {
  border-bottom: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(18, 8, 16, .94), rgba(18, 8, 16, .68) 62%, rgba(18, 8, 16, 0));
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}

body.agency-v3 .agency-header .agency-nav {
  position: relative;
  min-height: 84px;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .035) 42%, rgba(248, 200, 7, .055));
  box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 16px 48px rgba(0, 0, 0, .16);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
}

body.agency-v3 .agency-header.is-scrolled,
body.agency-v3 .agency-header.is-menu-open {
  border-bottom-color: rgba(248, 200, 7, .18);
  background: rgba(18, 8, 16, .9);
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
  backdrop-filter: blur(18px) saturate(1.06);
  box-shadow: 0 14px 42px rgba(6, 1, 4, .24);
}

body.agency-v3 .agency-header.is-scrolled .agency-nav,
body.agency-v3 .agency-header.is-menu-open .agency-nav {
  margin-top: 0;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

body.agency-v3 .agency-wordmark {
  gap: 12px;
}

body.agency-v3 .agency-brand-logo {
  border: 1px solid rgba(255, 233, 142, .28);
  background: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .16), rgba(207, 14, 93, .08));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .18);
}

body.agency-v3 .agency-wordmark-copy strong {
  font-weight: 800;
  letter-spacing: -.03em;
}

body.agency-v3 .agency-wordmark-copy > span {
  color: var(--v38-gold-soft);
  font-weight: 700;
  letter-spacing: .035em;
}

body.agency-v3 .agency-desktop-nav a {
  border-radius: 12px;
  font-weight: 700;
  transition: color .24s ease, background .24s ease, transform .24s ease;
}

body.agency-v3 .agency-desktop-nav a:hover,
body.agency-v3 .agency-desktop-nav a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, .085);
  transform: translateY(-1px);
}

body.agency-v3 .agency-desktop-nav a::after {
  right: 18px;
  left: 18px;
  bottom: 5px;
  height: 2px;
  box-shadow: 0 0 10px rgba(248, 200, 7, .48);
}

body.agency-v3 :is(.agency-icon-button, .agency-menu-button, .wahaaj-showcase-arrow) {
  border-color: rgba(255, 233, 142, .25);
  background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(207, 14, 93, .12));
  box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 10px 24px rgba(0, 0, 0, .15);
}

body.agency-v3 :is(.agency-icon-button, .agency-menu-button, .wahaaj-showcase-arrow) .agency-icon {
  font-size: 1.32rem;
}

body.agency-v3 .agency-mobile-menu {
  margin: 8px 16px 0;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: rgba(20, 7, 16, .94);
  box-shadow: var(--v38-shadow-deep);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  backdrop-filter: blur(20px) saturate(1.1);
}

/* Controls use the original burgundy-and-gold palette with more material depth. */
body.agency-v3 .agency-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--v38-radius-control);
  border-width: 1px;
  font-weight: 800;
  letter-spacing: -.015em;
  box-shadow: inset 0 1px rgba(255, 255, 255, .22), 0 14px 34px rgba(53, 8, 34, .14);
  transition: transform .24s cubic-bezier(.2, .7, .2, 1), box-shadow .24s ease, border-color .24s ease, background .24s ease;
}

body.agency-v3 .agency-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, .3), transparent 25% 68%, rgba(255, 255, 255, .13));
  transition: opacity .24s ease;
}

body.agency-v3 .agency-button-gold {
  border-color: rgba(255, 239, 161, .7);
  background: linear-gradient(135deg, #ffe784 0%, var(--v38-gold) 52%, #fd8f12 100%);
  color: #2b111e;
  box-shadow: inset 0 1px rgba(255, 255, 255, .58), 0 18px 38px rgba(248, 200, 7, .22);
}

body.agency-v3 .agency-button-plum {
  border-color: rgba(255, 206, 226, .28);
  background: linear-gradient(135deg, #ec3d80 0%, var(--v38-burgundy) 56%, var(--v38-burgundy-deep) 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .23), 0 18px 38px rgba(157, 7, 63, .25);
}

body.agency-v3 .agency-button-outline,
body.agency-v3 .agency-button-quiet {
  border-color: rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .065);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

@media (hover: hover) and (pointer: fine) {
  body.agency-v3 .agency-button:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px rgba(255, 255, 255, .33), 0 22px 42px rgba(53, 8, 34, .22);
  }

  body.agency-v3 .agency-button:hover::before {
    opacity: 1;
  }

  body.agency-v3 .agency-button-gold:hover {
    box-shadow: inset 0 1px rgba(255, 255, 255, .64), 0 24px 48px rgba(248, 200, 7, .3);
  }

  body.agency-v3 :is(.agency-icon-button, .agency-menu-button, .wahaaj-showcase-arrow):hover {
    color: var(--v38-gold-soft);
    border-color: rgba(255, 233, 142, .52);
    background: linear-gradient(145deg, rgba(255, 255, 255, .18), rgba(207, 14, 93, .26));
    transform: translateY(-2px);
  }
}

/* Primary home experience. */
body[data-page="home"] .wahaaj-showcase {
  padding-top: 124px;
  background:
    radial-gradient(circle at 86% 14%, rgba(207, 14, 93, .34), transparent 30rem),
    radial-gradient(circle at 9% 88%, rgba(248, 200, 7, .16), transparent 28rem),
    linear-gradient(145deg, #090307 0%, #180611 48%, #31071c 100%);
}

body[data-page="home"] .wahaaj-showcase::before {
  opacity: .48;
  background-image:
    linear-gradient(118deg, transparent 0 27%, rgba(255, 255, 255, .055) 27.1% 27.22%, transparent 27.34% 100%),
    radial-gradient(rgba(255, 255, 255, .16) .54px, transparent .72px);
  background-size: auto, 12px 12px;
}

body[data-page="home"] .wahaaj-showcase-viewport::before {
  inset: 4% 15%;
  border-color: rgba(255, 233, 142, .14);
  box-shadow: 0 0 0 18px rgba(255, 255, 255, .012), 0 0 104px rgba(207, 14, 93, .12);
}

body[data-page="home"] .wahaaj-showcase-slide {
  border-color: rgba(255, 255, 255, .17);
  border-radius: clamp(30px, 3.2vw, 44px);
  background: #170910;
  box-shadow: 0 44px 126px rgba(0, 0, 0, .54), inset 0 1px rgba(255, 255, 255, .17);
}

body[data-page="home"] .wahaaj-showcase-slide.is-active {
  border-color: rgba(255, 233, 142, .34);
  box-shadow: 0 48px 136px rgba(0, 0, 0, .58), 0 0 0 1px rgba(248, 200, 7, .1), inset 0 1px rgba(255, 255, 255, .2);
}

body[data-page="home"] .wahaaj-showcase-slide > img {
  filter: saturate(1.1) contrast(1.055) brightness(.98);
}

body[data-page="home"] .wahaaj-showcase-shade {
  background:
    linear-gradient(90deg, rgba(8, 2, 7, .03) 3%, rgba(12, 3, 10, .14) 40%, rgba(12, 3, 10, .94) 100%),
    linear-gradient(to top, rgba(7, 2, 6, .76), transparent 54%);
}

body[data-page="home"] .wahaaj-showcase-copy > span {
  border-color: rgba(255, 233, 142, .42);
  color: #fff1a7;
  background: linear-gradient(135deg, rgba(33, 6, 25, .84), rgba(207, 14, 93, .24));
  box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 13px 32px rgba(0, 0, 0, .24);
}

body[data-page="home"] .wahaaj-showcase-copy h2 {
  font-weight: 800;
  text-shadow: 0 10px 36px rgba(0, 0, 0, .32);
}

body[data-page="home"] .wahaaj-showcase-copy a {
  border-color: rgba(255, 233, 142, .25);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(207, 14, 93, .3));
}

body[data-page="home"] .wahaaj-showcase-toolbar {
  padding: 6px clamp(4px, 2vw, 24px) 0;
}

body[data-page="home"] .wahaaj-showcase-pause {
  border-color: rgba(255, 233, 142, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .065);
}

body[data-page="home"] .wahaaj-showcase-dot[aria-current="true"]::before {
  height: 4px;
  box-shadow: 0 0 18px rgba(248, 200, 7, .6);
}

body[data-page="home"] .agency-hero {
  min-height: min(760px, 100svh);
  background:
    radial-gradient(circle at 84% 16%, rgba(248, 200, 7, .22), transparent 23rem),
    radial-gradient(circle at 15% 76%, rgba(207, 14, 93, .34), transparent 33rem),
    linear-gradient(139deg, #0c060b 0%, #260a1e 54%, #52092f 100%);
}

body[data-page="home"] .agency-hero::before {
  background:
    linear-gradient(112deg, transparent 0 43%, rgba(255, 255, 255, .045) 43.12% 43.28%, transparent 43.42% 100%),
    radial-gradient(ellipse at 55% 106%, rgba(248, 200, 7, .12), transparent 43%);
}

body[data-page="home"] .agency-hero-copy h1 {
  max-width: 12.2ch;
  font-weight: 800;
  text-shadow: 0 14px 46px rgba(0, 0, 0, .24);
}

body[data-page="home"] .agency-hero-copy h1 em {
  text-shadow: 0 11px 34px rgba(248, 200, 7, .17);
}

body[data-page="home"] .agency-hero-copy > p {
  color: rgba(255, 250, 244, .82);
}

body[data-page="home"] .agency-trust-list li {
  border-color: rgba(255, 233, 142, .18);
  background: linear-gradient(135deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .028));
  box-shadow: inset 0 1px rgba(255, 255, 255, .1);
}

body[data-page="home"] .wahaaj-hero-stage {
  border-color: rgba(255, 233, 142, .16);
  border-radius: 38px;
  background:
    radial-gradient(circle at 52% 42%, rgba(255, 255, 255, .09), transparent 25%),
    radial-gradient(circle at 78% 18%, rgba(248, 200, 7, .15), transparent 28%),
    radial-gradient(circle at 14% 82%, rgba(207, 14, 93, .18), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(207, 14, 93, .09));
  box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 28px 72px rgba(0, 0, 0, .2);
}

body[data-page="home"] .wahaaj-hero-stage::before {
  border-color: rgba(255, 233, 142, .3);
  box-shadow: 0 0 0 28px rgba(255, 255, 255, .012), 0 0 95px rgba(248, 200, 7, .09);
}

body[data-page="home"] .wahaaj-hero-stage::after {
  border-color: rgba(255, 255, 255, .2);
}

body[data-page="home"] .wahaaj-logo-plate {
  border-color: rgba(255, 233, 142, .36);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .23), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, .15), rgba(207, 14, 93, .13));
  box-shadow: 0 40px 104px rgba(0, 0, 0, .46), 0 0 0 11px rgba(255, 255, 255, .018), 0 0 88px rgba(207, 14, 93, .19), inset 0 1px rgba(255, 255, 255, .22);
  animation: v38-logo-breathe 7s ease-in-out infinite;
}

body[data-page="home"] .wahaaj-logo-plate img {
  filter: none;
}

body[data-page="home"] .wahaaj-orbit-card {
  border-color: rgba(255, 255, 255, .18);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(25, 7, 20, .9), rgba(80, 10, 47, .68));
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 20px 46px rgba(0, 0, 0, .28);
}

body[data-page="home"] .wahaaj-orbit-card .agency-icon {
  color: #ffe77c;
  border-color: rgba(255, 233, 142, .34);
  background: linear-gradient(145deg, rgba(248, 200, 7, .19), rgba(207, 14, 93, .14));
  box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 10px 22px rgba(0, 0, 0, .17);
}

body[data-page="home"] .wahaaj-stage-caption {
  border-color: rgba(255, 233, 142, .24);
  background: rgba(24, 6, 19, .56);
  box-shadow: inset 0 1px rgba(255, 255, 255, .22), 0 15px 34px rgba(0, 0, 0, .22);
}

@keyframes v38-logo-breathe {
  0%, 100% { transform: translateY(0); box-shadow: 0 40px 104px rgba(0, 0, 0, .46), 0 0 0 11px rgba(255, 255, 255, .018), 0 0 88px rgba(207, 14, 93, .19), inset 0 1px rgba(255, 255, 255, .22); }
  50% { transform: translateY(-7px); box-shadow: 0 48px 116px rgba(0, 0, 0, .5), 0 0 0 12px rgba(255, 255, 255, .022), 0 0 104px rgba(248, 200, 7, .16), inset 0 1px rgba(255, 255, 255, .24); }
}

/* Home sections and cards. */
body[data-page="home"] .agency-proof-strip {
  background:
    linear-gradient(90deg, rgba(248, 200, 7, .08), transparent 24% 76%, rgba(207, 14, 93, .075)),
    rgba(255, 253, 249, .98);
}

body[data-page="home"] .agency-proof-strip article {
  border-color: rgba(207, 14, 93, .1);
  background: linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(255, 248, 243, .58));
  box-shadow: inset 0 1px rgba(255, 255, 255, .9);
}

body[data-page="home"] :is(#services, #monthly, #process) {
  background:
    radial-gradient(circle at 91% 11%, rgba(248, 200, 7, .07), transparent 22rem),
    radial-gradient(circle at 7% 87%, rgba(207, 14, 93, .055), transparent 25rem),
    var(--v38-paper);
}

body[data-page="home"] .agency-section-head h2,
body.agency-v3 :is(.agency-monthly-grid > div > h2, .agency-trust-grid h2, .agency-final-cta h2) {
  font-weight: 800;
}

body[data-page="home"] .agency-service-card {
  border-color: rgba(207, 14, 93, .14);
  border-radius: var(--v38-radius-card);
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(255, 248, 244, .92));
  box-shadow: 0 22px 58px rgba(63, 7, 36, .1), inset 0 1px rgba(255, 255, 255, .96);
}

body[data-page="home"] .agency-service-card::before {
  opacity: 1;
  background:
    radial-gradient(circle at 98% 0%, rgba(248, 200, 7, .12), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, .24), transparent 42%);
}

body[data-page="home"] .agency-service-card img {
  height: clamp(168px, 14vw, 212px);
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(207, 14, 93, .1);
  border-radius: 21px;
  filter: saturate(1.075) contrast(1.035);
  box-shadow: inset 0 1px rgba(255, 255, 255, .88), 0 14px 34px rgba(70, 18, 45, .1);
}

body[data-page="home"] .agency-service-index {
  border: 1px solid rgba(255, 233, 142, .32);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(32, 8, 27, .95), rgba(125, 11, 67, .84));
  box-shadow: inset 0 1px rgba(255, 255, 255, .15), 0 12px 27px rgba(32, 7, 23, .2);
}

body[data-page="home"] .agency-service-icon {
  border-color: rgba(248, 200, 7, .22);
  background: linear-gradient(145deg, rgba(248, 200, 7, .16), rgba(207, 14, 93, .12));
  box-shadow: inset 0 1px rgba(255, 255, 255, .42), 0 11px 23px rgba(207, 14, 93, .1);
}

body[data-page="home"] .agency-service-card > a {
  color: var(--v38-burgundy);
  font-weight: 800;
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="home"] .agency-service-card:hover {
    border-color: rgba(207, 14, 93, .32);
    transform: translateY(-9px);
    box-shadow: 0 30px 74px rgba(63, 7, 36, .17), inset 0 1px rgba(255, 255, 255, 1);
  }

  body[data-page="home"] .agency-service-card:hover img {
    filter: saturate(1.13) contrast(1.055);
  }
}

body[data-page="home"] .agency-section-dark,
body[data-page="home"] .agency-occasions {
  background:
    radial-gradient(circle at 87% 12%, rgba(248, 200, 7, .15), transparent 24rem),
    radial-gradient(circle at 11% 87%, rgba(207, 14, 93, .27), transparent 28rem),
    linear-gradient(145deg, #12050e, #2b0a20 54%, #4b0b2f);
}

body[data-page="home"] .agency-account-chip,
body[data-page="home"] .agency-occasion-grid article {
  border-color: rgba(255, 233, 142, .16);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
  box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 16px 34px rgba(0, 0, 0, .12);
}

body[data-page="home"] .agency-monthly-card {
  border: 1px solid rgba(255, 233, 142, .22);
  border-radius: 34px;
  background:
    radial-gradient(circle at 88% 12%, rgba(248, 200, 7, .17), transparent 28%),
    linear-gradient(145deg, #250b29, #571348 62%, #77184a);
  box-shadow: var(--v38-shadow);
}

body[data-page="home"] .agency-check-list li,
body[data-page="home"] .agency-process-grid article {
  border-color: rgba(207, 14, 93, .12);
  border-radius: 17px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .7);
}

body[data-page="home"] .agency-process-grid article {
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 250, 247, .88));
}

body[data-page="home"] .agency-trust-section {
  background:
    radial-gradient(circle at 13% 17%, rgba(248, 200, 7, .17), transparent 22rem),
    radial-gradient(circle at 89% 85%, rgba(207, 14, 93, .35), transparent 30rem),
    linear-gradient(135deg, #561142, #9d073f 54%, #4c123d);
}

body[data-page="home"] .agency-policy-card {
  border-color: rgba(255, 233, 142, .25);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .065));
  box-shadow: inset 0 1px rgba(255, 255, 255, .2), 0 18px 42px rgba(45, 3, 28, .15);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

body[data-page="home"] .agency-final-cta {
  background:
    radial-gradient(circle at 50% 0%, rgba(248, 200, 7, .23), transparent 31rem),
    radial-gradient(circle at 8% 82%, rgba(207, 14, 93, .28), transparent 28rem),
    linear-gradient(145deg, #10050c, #2a091e 57%, #440b2d);
}

/* Public interior pages inherit the same material system. */
body.agency-v3 :is(.agency-inner-hero, .agency-detail-hero, .agency-quote-hero) {
  background:
    radial-gradient(circle at 81% 17%, rgba(248, 200, 7, .19), transparent 25rem),
    radial-gradient(circle at 12% 83%, rgba(207, 14, 93, .28), transparent 30rem),
    linear-gradient(145deg, #11070d, #2a0b20 55%, #520a31);
}

body.agency-v3 :is(.agency-inner-grid img, .agency-detail-hero-grid img) {
  border-color: rgba(255, 233, 142, .2);
  box-shadow: 0 30px 76px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .2);
  filter: saturate(1.07) contrast(1.035);
}

body.agency-v3 .agency-section-paper {
  background:
    radial-gradient(circle at 93% 9%, rgba(248, 200, 7, .055), transparent 24rem),
    radial-gradient(circle at 7% 93%, rgba(207, 14, 93, .045), transparent 28rem),
    var(--v38-paper);
}

body.agency-v3 :is(.agency-service-list-card, .agency-detail-cards article, .agency-portfolio-card, .agency-process-grid article) {
  border-color: rgba(207, 14, 93, .14);
  border-radius: var(--v38-radius-card);
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(255, 249, 246, .92));
  box-shadow: 0 20px 52px rgba(63, 7, 36, .09), inset 0 1px rgba(255, 255, 255, .94);
}

body.agency-v3 .agency-service-list-card > span,
body.agency-v3 .agency-detail-cards > article > span {
  color: var(--v38-burgundy);
  font-weight: 900;
}

body.agency-v3 .agency-service-list-card li {
  border-color: rgba(207, 14, 93, .12);
  background: rgba(248, 200, 7, .055);
}

body.agency-v3 .agency-portfolio-tools,
body.agency-v3 .agency-quote-form {
  border-color: rgba(207, 14, 93, .15);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(255, 249, 246, .9));
  box-shadow: var(--v38-shadow), inset 0 1px rgba(255, 255, 255, .96);
}

body.agency-v3 :is(.agency-portfolio-tools input, .agency-quote-form input, .agency-quote-form select, .agency-quote-form textarea) {
  border-color: rgba(207, 14, 93, .15);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px rgba(255, 255, 255, .78);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

body.agency-v3 :is(.agency-portfolio-tools input, .agency-quote-form input, .agency-quote-form select, .agency-quote-form textarea):focus {
  border-color: rgba(207, 14, 93, .58);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(207, 14, 93, .09), inset 0 1px rgba(255, 255, 255, .88);
}

body.agency-v3 .agency-quote-guide,
body.agency-v3 .agency-quote-side {
  border: 1px solid rgba(255, 233, 142, .2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 87% 14%, rgba(248, 200, 7, .16), transparent 31%),
    linear-gradient(145deg, rgba(38, 10, 32, .95), rgba(98, 16, 70, .92));
  box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 22px 52px rgba(31, 3, 21, .2);
}

body.agency-v3 .agency-form-progress span {
  border: 1px solid rgba(207, 14, 93, .1);
  border-radius: 13px;
}

body.agency-v3 .agency-filter-group button {
  border-color: rgba(207, 14, 93, .15);
  border-radius: 999px;
  font-weight: 800;
}

body.agency-v3 .agency-filter-group button.is-active {
  box-shadow: 0 10px 22px rgba(157, 7, 63, .2);
}

/* Welcome and footer are kept inside the existing visual identity. */
body.agency-welcome-page .wahaaj-welcome {
  background:
    radial-gradient(circle at 82% 18%, rgba(248, 200, 7, .21), transparent 24rem),
    radial-gradient(circle at 13% 83%, rgba(207, 14, 93, .34), transparent 30rem),
    linear-gradient(145deg, #0d050b, #270a1d 55%, #500a30);
}

body.agency-welcome-page .wahaaj-welcome-card {
  border-color: rgba(255, 233, 142, .2);
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04));
  box-shadow: inset 0 1px rgba(255, 255, 255, .17), var(--v38-shadow-deep);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
}

body.agency-welcome-page .wahaaj-welcome-visual {
  border-color: rgba(255, 233, 142, .28);
  box-shadow: 0 34px 88px rgba(0, 0, 0, .38), 0 0 76px rgba(207, 14, 93, .2), inset 0 1px rgba(255, 255, 255, .2);
}

body.agency-welcome-page .wahaaj-welcome-visual img {
  filter: none;
}

body.agency-v3 .agency-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 233, 142, .13);
  background:
    radial-gradient(circle at 85% 16%, rgba(248, 200, 7, .11), transparent 23rem),
    radial-gradient(circle at 9% 83%, rgba(207, 14, 93, .25), transparent 27rem),
    linear-gradient(145deg, #0c050a, #210818 52%, #390a27);
}

body.agency-v3 .agency-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background: linear-gradient(113deg, transparent 0 42%, rgba(255, 255, 255, .04) 42.1% 42.2%, transparent 42.3% 100%);
}

body.agency-v3 .agency-footer > .agency-container {
  position: relative;
  z-index: 1;
}

body.agency-v3 .agency-footer-logo {
  border: 1px solid rgba(255, 233, 142, .22);
  border-radius: 24px;
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 17px 42px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .11);
}

body.agency-v3 .agency-footer-grid a {
  color: rgba(255, 255, 255, .78);
  transition: color .2s ease, transform .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.agency-v3 .agency-footer-grid a:hover {
    color: var(--v38-gold-soft);
    transform: translateX(-3px);
  }
}

body.agency-v3 .agency-floating-wa {
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: inset 0 1px rgba(255, 255, 255, .26), 0 20px 48px rgba(0, 93, 56, .32);
}

/* Dark mode retains the same palette while protecting contrast. */
html[data-theme="dark"] body.agency-v3 {
  --v38-paper: #130a12;
  --v38-hairline: rgba(255, 255, 255, .12);
}

html[data-theme="dark"] body.agency-v3 .agency-section-paper,
html[data-theme="dark"] body.agency-v3 :is(.agency-service-list-card, .agency-detail-cards article, .agency-portfolio-card, .agency-process-grid article, .agency-portfolio-tools, .agency-quote-form) {
  border-color: rgba(255, 255, 255, .11);
  background: linear-gradient(145deg, rgba(38, 17, 31, .98), rgba(25, 10, 20, .96));
}

html[data-theme="dark"] body.agency-v3 :is(.agency-portfolio-tools input, .agency-quote-form input, .agency-quote-form select, .agency-quote-form textarea) {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(9, 4, 8, .52);
  color: var(--a-ink);
}

html[data-theme="dark"] body[data-page="home"] .agency-service-card,
html[data-theme="dark"] body[data-page="home"] .agency-process-grid article,
html[data-theme="dark"] body[data-page="home"] .agency-proof-strip article {
  border-color: rgba(255, 255, 255, .11);
  background: linear-gradient(145deg, rgba(41, 18, 34, .98), rgba(27, 10, 21, .96));
}

html[data-theme="dark"] body[data-page="home"] .agency-proof-strip {
  background: linear-gradient(90deg, rgba(248, 200, 7, .07), transparent 24% 76%, rgba(207, 14, 93, .08)), #130a12;
}

/* Compact viewports preserve the composition without crowding controls. */
@media (max-width: 760px) {
  body.agency-v3 .agency-header .agency-nav {
    min-height: 72px;
    margin-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  body[data-page="home"] .wahaaj-showcase {
    padding-top: 86px;
  }

  body[data-page="home"] .wahaaj-showcase-viewport::before {
    inset: 3% 4%;
  }

  body[data-page="home"] .wahaaj-showcase-slide {
    border-radius: 26px;
  }

  body[data-page="home"] .agency-hero {
    min-height: auto;
  }

  body[data-page="home"] .wahaaj-hero-stage {
    border-radius: 29px;
  }

  body[data-page="home"] .wahaaj-logo-plate {
    animation-duration: 8s;
  }

  body.agency-v3 :is(.agency-service-card, .agency-service-list-card, .agency-detail-cards article, .agency-portfolio-card, .agency-quote-form, .agency-portfolio-tools) {
    border-radius: 23px;
  }

  body.agency-v3 .agency-button {
    border-radius: 14px;
  }

  body.agency-welcome-page .wahaaj-welcome-card {
    border-radius: 28px;
  }

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

@media (prefers-reduced-motion: reduce) {
  body.agency-v3 *,
  body.agency-v3 *::before,
  body.agency-v3 *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  body[data-page="home"] .wahaaj-logo-plate {
    transform: none;
  }
}

@media (forced-colors: active) {
  body.agency-v3 :is(.agency-header .agency-nav, .agency-button, .agency-service-card, .agency-service-list-card, .agency-portfolio-card, .agency-quote-form, .agency-portfolio-tools) {
    border: 1px solid CanvasText;
    box-shadow: none;
  }

  body.agency-v3 :is(.agency-button::before, .agency-footer::before) {
    display: none;
  }
}

/*
 * Wahaaj Premium Experience V4.5
 * Latest visual authority. The layer keeps the approved logo and business
 * content intact while translating its fuchsia, solar yellow and orange into
 * a calmer glass-and-light system across the customer experience.
 */
body.agency-v3 {
  --v45-fuchsia: var(--w-magenta, #cf0e5d);
  --v45-fuchsia-bright: #ed2a78;
  --v45-fuchsia-deep: var(--w-magenta-deep, #8f063a);
  --v45-solar: var(--w-sun, #f8c807);
  --v45-amber: #ff8a00;
  --v45-midnight: #09030a;
  --v45-plum: #2c0a23;
  --v45-ivory: #fffaf5;
  --v45-glass-light: rgba(255, 255, 255, .74);
  --v45-glass-dark: rgba(20, 7, 17, .72);
  --v45-line-light: rgba(207, 14, 93, .13);
  --v45-line-dark: rgba(255, 235, 151, .17);
  --v45-shadow-soft: 0 22px 70px rgba(76, 9, 46, .13);
  --v45-shadow-deep: 0 34px 110px rgba(4, 0, 3, .42);
  --v45-radius-card: clamp(24px, 2.4vw, 34px);
  --v45-radius-control: 17px;
  color: var(--a-ink);
  background:
    radial-gradient(circle at 88% 3%, rgba(248, 200, 7, .075), transparent 30rem),
    radial-gradient(circle at 7% 38%, rgba(207, 14, 93, .07), transparent 36rem),
    var(--v38-paper);
}

body.agency-v3 main {
  animation: v45-page-enter .56s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes v45-page-enter {
  from { opacity: .01; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

body.agency-v3 .agency-header .agency-nav {
  border-color: rgba(255, 255, 255, .13);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .045) 42%, rgba(237, 42, 120, .075) 72%, rgba(248, 200, 7, .075));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .2),
    0 18px 55px rgba(0, 0, 0, .2),
    0 0 0 1px rgba(207, 14, 93, .025);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  backdrop-filter: blur(24px) saturate(1.18);
}

body.agency-v3 .agency-brand-logo {
  border-radius: 19px;
  box-shadow:
    0 14px 34px rgba(207, 14, 93, .25),
    0 0 0 1px rgba(255, 255, 255, .1),
    inset 0 1px rgba(255, 255, 255, .24);
}

body.agency-v3 .agency-button {
  min-height: 50px;
  border-radius: var(--v45-radius-control);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .32),
    0 16px 40px rgba(68, 8, 39, .16);
}

body.agency-v3 .agency-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -140%;
  bottom: -140%;
  left: -42%;
  width: 26%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .48), transparent);
  transform: rotate(16deg);
  transition: left .7s cubic-bezier(.22, .61, .36, 1), opacity .22s ease;
}

body.agency-v3 .agency-button-gold {
  border-color: rgba(255, 239, 159, .78);
  background: linear-gradient(135deg, #fff0a1 0%, var(--v45-solar) 48%, var(--v45-amber) 100%);
  color: #261019;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .72),
    0 18px 42px rgba(248, 200, 7, .24),
    0 5px 14px rgba(255, 138, 0, .12);
}

body.agency-v3 .agency-button-plum {
  border-color: rgba(255, 213, 229, .32);
  background: linear-gradient(135deg, var(--v45-fuchsia-bright), var(--v45-fuchsia) 54%, var(--v45-fuchsia-deep));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .28),
    0 18px 42px rgba(207, 14, 93, .26);
}

@media (hover: hover) and (pointer: fine) {
  body.agency-v3 .agency-button:hover::after {
    left: 118%;
    opacity: 1;
  }

  body.agency-v3 .agency-button:hover {
    transform: translateY(-3px) scale(1.01);
  }
}

body.agency-v3 :is(
  .agency-service-card,
  .agency-service-list-card,
  .agency-detail-cards article,
  .agency-portfolio-card,
  .agency-process-grid article,
  .agency-portfolio-tools,
  .agency-quote-form,
  .agency-legal
) {
  border-radius: var(--v45-radius-card);
  box-shadow: var(--v45-shadow-soft), inset 0 1px rgba(255, 255, 255, .88);
}

body.agency-v3 :is(.agency-quote-form, .agency-portfolio-tools) {
  border-color: var(--v45-line-light);
  background:
    radial-gradient(circle at 94% 2%, rgba(248, 200, 7, .075), transparent 26%),
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 248, 244, .72));
  -webkit-backdrop-filter: blur(24px) saturate(1.08);
  backdrop-filter: blur(24px) saturate(1.08);
}

body.agency-v3 :is(.agency-portfolio-tools input, .agency-quote-form input, .agency-quote-form select, .agency-quote-form textarea) {
  min-height: 52px;
  border-radius: 15px;
  border-color: rgba(207, 14, 93, .14);
  background: rgba(255, 255, 255, .79);
  box-shadow: inset 0 1px 2px rgba(75, 6, 42, .025);
}

body.agency-v3 :is(.agency-portfolio-tools input, .agency-quote-form input, .agency-quote-form select, .agency-quote-form textarea):focus {
  border-color: rgba(207, 14, 93, .52);
  box-shadow:
    0 0 0 4px rgba(207, 14, 93, .105),
    0 12px 32px rgba(207, 14, 93, .075);
}

/* Six-layer cinematic welcome: tokens, base, ambient, components, motion and typography. */
body.agency-welcome-page .wahaaj-welcome {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(22px, 4vw, 56px);
  background:
    linear-gradient(90deg, rgba(7, 2, 6, .94) 0%, rgba(15, 4, 12, .88) 44%, rgba(27, 5, 19, .72) 100%),
    url("../assets/hero-v21/hero-05-digital.webp") center / cover no-repeat,
    #090307;
}

body.agency-welcome-page .wahaaj-welcome::before,
body.agency-welcome-page .wahaaj-welcome::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(3px);
}

body.agency-welcome-page .wahaaj-welcome::before {
  width: min(56vw, 780px);
  aspect-ratio: 1;
  top: -28%;
  right: -9%;
  background: radial-gradient(circle, rgba(237, 42, 120, .42), rgba(207, 14, 93, .12) 42%, transparent 70%);
  animation: v45-ambient-drift 11s ease-in-out infinite alternate;
}

body.agency-welcome-page .wahaaj-welcome::after {
  width: min(45vw, 640px);
  aspect-ratio: 1;
  bottom: -31%;
  left: -10%;
  background: radial-gradient(circle, rgba(248, 200, 7, .25), rgba(255, 138, 0, .07) 44%, transparent 72%);
  animation: v45-ambient-drift 13s ease-in-out -3s infinite alternate-reverse;
}

body.agency-welcome-page .wahaaj-welcome-card {
  position: relative;
  isolation: isolate;
  width: min(1180px, 100%);
  min-height: min(760px, calc(100svh - clamp(44px, 8vw, 112px)));
  overflow: hidden;
  padding: clamp(30px, 5vw, 78px);
  border: 1px solid rgba(255, 238, 165, .22);
  border-radius: clamp(30px, 4vw, 50px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .145), rgba(255, 255, 255, .045) 46%, rgba(207, 14, 93, .08)),
    rgba(16, 5, 13, .54);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .22),
    inset 0 -1px rgba(207, 14, 93, .08),
    0 44px 140px rgba(0, 0, 0, .52),
    0 0 110px rgba(207, 14, 93, .12);
  -webkit-backdrop-filter: blur(28px) saturate(1.18);
  backdrop-filter: blur(28px) saturate(1.18);
}

body.agency-welcome-page .wahaaj-welcome-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .48;
  background:
    linear-gradient(118deg, transparent 0 33%, rgba(255, 255, 255, .08) 33.15% 33.35%, transparent 33.5% 100%),
    radial-gradient(rgba(255, 255, 255, .2) .55px, transparent .75px);
  background-size: auto, 15px 15px;
  mask-image: linear-gradient(135deg, #000, transparent 74%);
}

body.agency-welcome-page .wahaaj-welcome-copy {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

body.agency-welcome-page .wahaaj-welcome-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 232, 141, .24);
  border-radius: 999px;
  color: #fff0a6;
  background: linear-gradient(135deg, rgba(248, 200, 7, .1), rgba(207, 14, 93, .14));
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 12px 28px rgba(0, 0, 0, .14);
}

body.agency-welcome-page .wahaaj-welcome-copy > span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v45-solar);
  box-shadow: 0 0 18px rgba(248, 200, 7, .82);
}

body.agency-welcome-page .wahaaj-welcome-copy h1 {
  max-width: 9.5ch;
  margin-block: clamp(20px, 3vw, 34px) 18px;
  color: #fff;
  font-size: clamp(3.1rem, 7vw, 6.8rem);
  font-weight: 800;
  letter-spacing: -.062em;
  line-height: .98;
  text-wrap: balance;
  text-shadow: 0 22px 65px rgba(0, 0, 0, .42);
}

body.agency-welcome-page .wahaaj-welcome-copy h1 em {
  display: block;
  padding-bottom: .08em;
  color: transparent;
  background: linear-gradient(105deg, #fff3a9, var(--v45-solar) 42%, var(--v45-amber) 78%, #ff4a8e);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 15px 34px rgba(248, 200, 7, .14));
}

body.agency-welcome-page .wahaaj-welcome-copy > p {
  max-width: 58ch;
  color: rgba(255, 248, 242, .78);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.95;
}

body.agency-welcome-page .wahaaj-welcome-actions {
  gap: 12px;
  margin-top: clamp(24px, 4vw, 40px);
}

body.agency-welcome-page .wahaaj-welcome-points {
  gap: 9px;
  margin-top: 24px;
}

body.agency-welcome-page .wahaaj-welcome-points span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 999px;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body.agency-welcome-page .wahaaj-welcome-visual {
  position: relative;
  isolation: isolate;
  width: min(39vw, 430px);
  aspect-ratio: 1;
  overflow: visible;
  border: 1px solid rgba(255, 238, 168, .29);
  border-radius: 34%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .18), transparent 31%),
    linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(207, 14, 93, .1));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .24),
    0 46px 120px rgba(0, 0, 0, .52),
    0 0 90px rgba(207, 14, 93, .24),
    0 0 130px rgba(248, 200, 7, .08);
  transform: perspective(1100px) rotateY(-6deg) rotateX(2deg);
  animation: v45-logo-float 7.5s ease-in-out infinite;
}

body.agency-welcome-page .wahaaj-welcome-visual img {
  width: 84%;
  height: 84%;
  object-fit: contain;
  border-radius: 31%;
  filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .32));
}

body.agency-welcome-page .wahaaj-welcome-visual::before,
body.agency-welcome-page .wahaaj-welcome-visual::after {
  position: absolute;
  z-index: 3;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  color: rgba(255, 255, 255, .92);
  background: linear-gradient(135deg, rgba(29, 8, 23, .84), rgba(100, 10, 59, .62));
  box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 20px 48px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
  font-size: .8rem;
  font-weight: 800;
  white-space: nowrap;
  animation: v45-chip-float 6s ease-in-out infinite;
}

body.agency-welcome-page .wahaaj-welcome-visual::before {
  content: "هوية • محتوى • حملات";
  top: 9%;
  right: -18%;
}

body.agency-welcome-page .wahaaj-welcome-visual::after {
  content: "تجربة عربية • حجز ذكي";
  bottom: 12%;
  left: -24%;
  animation-delay: -2.7s;
}

@keyframes v45-ambient-drift {
  to { transform: translate3d(4%, 5%, 0) scale(1.08); }
}

@keyframes v45-logo-float {
  0%, 100% { transform: perspective(1100px) rotateY(-6deg) rotateX(2deg) translateY(0); }
  50% { transform: perspective(1100px) rotateY(-3deg) rotateX(1deg) translateY(-11px); }
}

@keyframes v45-chip-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

html[data-theme="dark"] body.agency-v3 {
  --v38-paper: #0d060c;
  background:
    radial-gradient(circle at 88% 3%, rgba(248, 200, 7, .07), transparent 30rem),
    radial-gradient(circle at 7% 38%, rgba(207, 14, 93, .12), transparent 36rem),
    #0d060c;
}

html[data-theme="dark"] body.agency-v3 :is(
  .agency-service-card,
  .agency-service-list-card,
  .agency-detail-cards article,
  .agency-portfolio-card,
  .agency-process-grid article,
  .agency-portfolio-tools,
  .agency-quote-form,
  .agency-legal
) {
  border-color: var(--v45-line-dark);
  background:
    radial-gradient(circle at 95% 2%, rgba(248, 200, 7, .055), transparent 27%),
    linear-gradient(145deg, rgba(38, 15, 31, .94), rgba(18, 7, 15, .95));
  box-shadow: var(--v45-shadow-deep), inset 0 1px rgba(255, 255, 255, .09);
}

html[data-theme="dark"] body.agency-v3 :is(.agency-portfolio-tools input, .agency-quote-form input, .agency-quote-form select, .agency-quote-form textarea) {
  border-color: rgba(255, 255, 255, .13);
  background: rgba(5, 2, 5, .5);
  color: #fffaf5;
}

@media (max-width: 920px) {
  body.agency-welcome-page .wahaaj-welcome-card {
    min-height: auto;
    gap: 38px;
  }

  body.agency-welcome-page .wahaaj-welcome-copy {
    max-width: none;
  }

  body.agency-welcome-page .wahaaj-welcome-copy h1 {
    max-width: 11ch;
  }

  body.agency-welcome-page .wahaaj-welcome-visual {
    width: min(68vw, 390px);
  }
}

@media (max-width: 620px) {
  body.agency-v3 .agency-header .agency-nav {
    border-radius: 0 0 20px 20px;
  }

  body.agency-welcome-page .wahaaj-welcome {
    align-items: start;
    padding: max(16px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  }

  body.agency-welcome-page .wahaaj-welcome-card {
    padding: 28px 20px 34px;
    border-radius: 28px;
  }

  body.agency-welcome-page .wahaaj-welcome-copy h1 {
    font-size: clamp(2.75rem, 15vw, 4.4rem);
  }

  body.agency-welcome-page .wahaaj-welcome-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body.agency-welcome-page .wahaaj-welcome-actions .agency-button {
    width: 100%;
  }

  body.agency-welcome-page .wahaaj-welcome-visual {
    width: min(76vw, 310px);
    margin-block: 12px 20px;
  }

  body.agency-welcome-page .wahaaj-welcome-visual::before {
    right: -7%;
  }

  body.agency-welcome-page .wahaaj-welcome-visual::after {
    left: -8%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.agency-v3 main,
  body.agency-welcome-page .wahaaj-welcome::before,
  body.agency-welcome-page .wahaaj-welcome::after,
  body.agency-welcome-page .wahaaj-welcome-visual,
  body.agency-welcome-page .wahaaj-welcome-visual::before,
  body.agency-welcome-page .wahaaj-welcome-visual::after {
    animation: none !important;
    transform: none !important;
  }
}