@font-face{font-family:"Vazirmatn";src:url("../fonts/vazirmatn-arabic-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../fonts/vazirmatn-arabic-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../fonts/vazirmatn-arabic-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("../fonts/vazirmatn-arabic-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
:root {
  --page-bg: #edf2f0;
  --surface: #ffffff;
  --field-bg: #f4f7f6;
  --ink: #0b1210;
  --green: #103f3a;
  --muted: #72847f;
  --border: #d8e1de;
  --brand: #18aaa5;
  --brand-hover: #11948f;
  --danger: #c94444;
  --success: #177163;
  --radius-lg: 30px;
  --radius-md: 15px;
  --shadow: 0 30px 80px rgba(28, 60, 53, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.75) 0 6%, transparent 20%),
    radial-gradient(circle at 90% 16%, rgba(195, 221, 214, 0.34) 0 8%, transparent 24%),
    linear-gradient(145deg, #f4f6f5 0%, var(--page-bg) 55%, #e6efec 100%);
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.contact-page {
  width: min(100%, 1480px);
  min-height: 100svh;
  margin-inline: auto;
  padding: clamp(54px, 6vw, 94px) clamp(18px, 4vw, 52px) 80px;
}

.hero-copy {
  max-width: 930px;
  margin: 0 auto clamp(34px, 4vw, 54px);
  text-align: center;
}

.eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-hover);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.eyebrow::before,
.eyebrow::after {
  width: 28px;
  height: 1px;
  content: "";
  background: currentColor;
  opacity: 0.45;
}

.hero-copy h1 {
  max-width: 860px;
  margin: 13px auto 0;
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: -1px;
}

.hero-copy p {
  max-width: 690px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 2;
}

.contact-card {
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.95fr);
  width: min(100%, 1260px);
  min-height: 610px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(180, 199, 193, 0.72);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.form-panel {
  direction: rtl;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 4vw, 56px);
  background: rgba(255, 255, 255, 0.97);
}

.form-heading {
  margin-bottom: 26px;
  text-align: right;
}

.form-heading h2 {
  margin: 7px 0 0;
  color: var(--green);
  font-size: clamp(25px, 2.2vw, 34px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.7px;
}

.form-heading p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}

.contact-form {
  display: grid;
  gap: 14px;
}

.name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field {
  min-width: 0;
}

.field label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  outline: none;
  color: var(--green);
  background: var(--field-bg);
  caret-color: var(--brand-hover);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, transform 180ms ease;
}

.field input {
  height: 57px;
  padding: 0 18px;
}

.field textarea {
  min-height: 118px;
  padding: 16px 18px;
  resize: vertical;
  line-height: 1.8;
}

.field input[dir="ltr"] {
  text-align: left;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #84948f;
  opacity: 1;
}

.field input:hover,
.field textarea:hover {
  border-color: #b6c8c2;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(24, 170, 165, 0.12);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(201, 68, 68, 0.1);
}

.field-error {
  display: block;
  min-height: 18px;
  margin: 5px 4px 0;
  color: var(--danger);
  font-size: 11px;
  line-height: 1.55;
}

.field-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.character-counter {
  flex: 0 0 auto;
  margin-top: 5px;
  color: #91a09c;
  font-size: 11px;
  direction: rtl;
}

.submit-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  min-height: 57px;
  margin-top: 2px;
  padding: 12px 20px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  color: #fff;
  background: linear-gradient(135deg, #20b7b1, #119a95);
  box-shadow: 0 12px 26px rgba(17, 154, 149, 0.2);
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.submit-button::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.24) 48%, transparent 72%);
  transform: translateX(-120%);
  transition: transform 500ms ease;
}

.submit-button:hover {
  filter: saturate(1.08);
  box-shadow: 0 16px 32px rgba(17, 154, 149, 0.28);
  transform: translateY(-2px);
}

.submit-button:hover::before {
  transform: translateX(120%);
}

.submit-button:active {
  transform: translateY(0);
}

.submit-button:focus-visible {
  outline: 3px solid rgba(24, 170, 165, 0.3);
  outline-offset: 3px;
}

.submit-button:disabled {
  cursor: wait;
  opacity: 0.78;
  transform: none;
}

.submit-button .arrow {
  font-family: Arial, sans-serif;
  font-size: 19px;
  line-height: 1;
  transition: transform 180ms ease;
}

.submit-button:hover .arrow {
  transform: translateX(-3px);
}

.button-loader {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.submit-button.is-loading .button-loader {
  display: block;
}

.submit-button.is-loading .arrow {
  display: none;
}

.form-status {
  min-height: 0;
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
}

.form-status:not(:empty) {
  min-height: 24px;
  padding-top: 2px;
}

.form-status.is-error { color: var(--danger); }
.form-status.is-success { color: var(--success); }

.image-panel {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 30%, rgba(55, 216, 204, 0.55), transparent 30%),
    linear-gradient(160deg, #123f3c 0%, #0c2927 100%);
}

.image-panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1), opacity 220ms ease;
}

.contact-card:hover .image-panel img {
  transform: scale(1.025);
}

.image-panel.is-fallback img {
  opacity: 0;
}

.image-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(4, 25, 23, 0.74) 0%, transparent 44%),
    linear-gradient(to left, rgba(8, 48, 44, 0.18), transparent 50%);
}

.visual-copy {
  position: absolute;
  z-index: 2;
  right: 38px;
  bottom: 38px;
  left: 38px;
  direction: rtl;
  color: #fff;
}

.visual-copy span {
  display: block;
  margin-bottom: 8px;
  color: #78ded8;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.visual-copy strong {
  display: block;
  max-width: 400px;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.7;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .contact-card {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
  }

  .form-panel {
    padding-inline: 30px;
  }
}

@media (max-width: 760px) {
  .contact-page {
    padding: 44px 16px 58px;
  }

  .hero-copy {
    margin-bottom: 30px;
  }

  .hero-copy h1 {
    font-size: clamp(26px, 7vw, 34px);
    letter-spacing: -0.55px;
  }

  .hero-copy p {
    margin-top: 13px;
    font-size: 14px;
  }

  .contact-card {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 24px;
  }

  .form-panel {
    grid-row: 2;
    padding: 34px 22px 30px;
  }

  .image-panel {
    grid-row: 1;
    min-height: 0;
    aspect-ratio: 1.65 / 1;
  }

  .image-panel img {
    object-position: center 38%;
  }

  .visual-copy {
    right: 24px;
    bottom: 22px;
    left: 24px;
  }

  .visual-copy strong {
    max-width: 360px;
    font-size: 20px;
  }
}

@media (max-width: 520px) {
  .contact-page {
    padding-inline: 11px;
  }

  .eyebrow::before,
  .eyebrow::after {
    width: 18px;
  }

  .hero-copy h1 {
    font-size: 25px;
    line-height: 1.55;
  }

  .contact-card {
    border-radius: 20px;
  }

  .image-panel {
    aspect-ratio: 1.25 / 1;
  }

  .name-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .form-panel {
    padding-inline: 16px;
  }

  .form-heading {
    text-align: center;
  }

  .form-heading h2 {
    font-size: 23px;
  }

  .visual-copy strong {
    font-size: 18px;
  }
}

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

/* ===== Digital Cast shared navigation ===== */
body{padding-top:104px;overflow-x:hidden}.ambient{position:fixed;border-radius:999px;filter:blur(90px);pointer-events:none;z-index:-1;opacity:.45}.ambient--one{width:380px;height:380px;top:-140px;right:-140px;background:rgba(24,170,165,.20)}.ambient--two{width:420px;height:420px;bottom:-220px;left:-180px;background:rgba(134,187,176,.20)}
.topbar{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:1000;width:min(calc(100% - 34px),1320px);height:70px;padding:0 18px;display:flex;align-items:center;gap:24px;border:1px solid rgba(20,70,66,.10);border-radius:22px;background:rgba(255,255,255,.88);box-shadow:0 18px 50px rgba(26,58,52,.10);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.brand{display:flex;align-items:center;margin-left:auto}.brand img{width:142px;height:auto;display:block}.nav-links{display:flex;align-items:center;gap:5px}.nav-links>a,.nav-dropdown-trigger{position:relative;border:0;background:transparent;color:#27433f;text-decoration:none;font:inherit;font-size:13px;font-weight:700;padding:12px 13px;border-radius:12px;cursor:pointer;transition:.22s}.nav-links>a:hover,.nav-dropdown-trigger:hover,.nav-links>a.is-active{background:#edf7f5;color:#0f7974}.nav-links>a.is-active::after{content:"";position:absolute;right:13px;left:13px;bottom:5px;height:2px;border-radius:99px;background:#18aaa5}.nav-dropdown{position:relative}.nav-dropdown-trigger{display:flex;align-items:center;gap:6px}.nav-dropdown-trigger svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .25s}.nav-dropdown:hover .nav-dropdown-trigger svg,.nav-dropdown.is-open .nav-dropdown-trigger svg{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:calc(100% + 13px);right:50%;width:320px;padding:9px;border:1px solid rgba(23,72,67,.10);border-radius:18px;background:rgba(255,255,255,.98);box-shadow:0 24px 64px rgba(22,60,55,.14);opacity:0;visibility:hidden;pointer-events:none;transform:translate(50%,9px);transition:.25s}.nav-dropdown-menu::before{content:"";position:absolute;top:-15px;right:0;width:100%;height:15px}.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu,.nav-dropdown.is-open .nav-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(50%,0)}.nav-dropdown-menu a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:11px;color:#244440;text-decoration:none;font-size:12px;font-weight:650;transition:.2s}.nav-dropdown-menu a:hover{background:#edf7f5;transform:translateX(-2px)}.nav-dropdown-menu a>span{width:27px;color:#77a39e;font-size:9px;direction:ltr}.nav-dropdown-menu .nav-dropdown-all{margin-top:5px;border-top:1px solid #edf2f0;justify-content:space-between}.nav-dropdown-menu .nav-dropdown-all>span{width:auto;color:inherit;font-size:12px;direction:rtl}
.nav-cta{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:13px;background:#103f3a;color:#fff;text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap}.nav-cta i{font-style:normal;color:#65dad4}.menu-toggle{display:none;margin-right:auto;width:44px;height:44px;border:0;border-radius:13px;background:#eef6f4;cursor:pointer}.menu-toggle span{display:block;width:19px;height:2px;margin:5px auto;background:#173f3b;border-radius:9px;transition:.25s}
.hero-copy h1 em{color:#149f99;font-style:normal}.hero-meta{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:15px}.hero-meta a{color:#49645f;text-decoration:none;font-size:12px;font-weight:700}.hero-meta span{width:4px;height:4px;border-radius:50%;background:#18aaa5}.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.privacy-note{display:block;text-align:center;color:#8a9995;font-size:10px;line-height:1.8}.success-ticket{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid rgba(23,113,99,.14);border-radius:12px;background:#edf8f5;color:#17675d;font-size:11px}.success-ticket strong{font-size:11px;letter-spacing:.3px;user-select:all}.form-status{min-height:0;margin:0;text-align:center;font-size:11px;line-height:1.8}.form-status.is-error{color:#b63232}.form-status.is-success{color:#177163}.button-loader{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:dcspin .7s linear infinite}.submit-button.is-loading .button-loader{display:block}.submit-button.is-loading .arrow{display:none}@keyframes dcspin{to{transform:rotate(360deg)}}
.contact-options{width:min(100%,1260px);margin:18px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.contact-options>a{position:relative;min-height:145px;padding:24px;border:1px solid rgba(180,199,193,.62);border-radius:22px;background:rgba(255,255,255,.72);color:#173f3b;text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 14px 35px rgba(28,60,53,.055);transition:.25s;overflow:hidden}.contact-options>a::before{content:"";position:absolute;width:110px;height:110px;border-radius:50%;background:rgba(24,170,165,.09);top:-55px;left:-45px;transition:.35s}.contact-options>a:hover{transform:translateY(-4px);background:#fff;box-shadow:0 20px 45px rgba(28,60,53,.10)}.contact-options>a:hover::before{transform:scale(1.35)}.contact-options small{color:#1aa59f;font-size:9px;letter-spacing:1.5px}.contact-options strong{margin-top:8px;font-size:17px}.contact-options span{margin-top:13px;color:#788b86;font-size:10px}.mini-footer{width:min(calc(100% - 36px),1260px);margin:0 auto;padding:35px 0 45px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;color:#70827d;font-size:10px}.mini-footer>a{color:#173f3b;text-decoration:none;font-size:12px;font-weight:900;letter-spacing:1.5px}.mini-footer p{text-align:center}.mini-footer>span{text-align:left;direction:ltr}
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}[data-reveal].is-visible{opacity:1;transform:none}
@media(max-width:900px){body{padding-top:86px}.topbar{top:10px;height:64px;width:calc(100% - 20px);padding:0 12px;border-radius:18px}.brand img{width:125px}.menu-toggle{display:block}.nav-cta{display:none}.nav-links{position:absolute;top:calc(100% + 9px);right:0;left:0;padding:10px;display:block;border:1px solid rgba(20,70,66,.10);border-radius:18px;background:rgba(255,255,255,.98);box-shadow:0 25px 50px rgba(25,55,50,.13);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s}.topbar.is-open .nav-links{opacity:1;visibility:visible;transform:none}.nav-links>a,.nav-dropdown-trigger{display:flex;width:100%;justify-content:space-between;padding:12px}.nav-dropdown-menu{position:static;width:100%;padding:0 8px;border:0;box-shadow:none;background:transparent;opacity:1;visibility:visible;pointer-events:auto;transform:none;max-height:0;overflow:hidden;transition:max-height .35s}.nav-dropdown.is-open .nav-dropdown-menu{max-height:330px}.nav-dropdown-menu a{background:#f3f8f7;margin:4px 0}.contact-options{grid-template-columns:1fr}.mini-footer{grid-template-columns:1fr;text-align:center}.mini-footer p,.mini-footer>span{text-align:center}.hero-meta{flex-wrap:wrap}}
@media(max-width:560px){.hero-copy h1 br{display:none}.hero-meta span{display:none}.hero-meta{flex-direction:column;gap:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}[data-reveal]{opacity:1;transform:none}}