.contact-page {
  --red: #e3061b;
  font-family: "Home Cairo", Tahoma, sans-serif;
  overflow: clip;
}
.contact-page h1,
.contact-page h2,
.contact-page h3 { font-weight: 900; }
.contact-page h2 { font-size: clamp(27px, 3.5vw, 43px); line-height: 1.5; margin: 0 0 20px; }
.contact-page p { line-height: 1.95; }
.about-wrap { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.contact-page a:focus-visible { outline: 3px solid #e3061b; outline-offset: 5px; }
@media (max-width: 800px) { .about-wrap { width: calc(100% - 40px); } }
@media (max-width: 680px) { .contact-page h2 { font-size: 28px; } }
@media (max-width: 600px) {
  .about-wrap { width: calc(100% - 32px); }
  .contact-page h2 { font-size: clamp(25px, 6vw, 30px); line-height: 1.55; }
}
.contact-page {
  --contact-ink: #15191e;
  --contact-muted: #626974;
  --contact-red: #e3061b;
  --contact-line: #e7e9ec;
  color: var(--contact-ink);
  background: #fff;
}
.contact-page .contact-hero {
  position: relative;
  isolation: isolate;
  overflow: visible;
  min-height: 330px;
  margin-bottom: 58px;
  color: #fff;
  background: #111 url("../img/contact-hero-office.webp") center 47% / cover no-repeat;
}
.contact-page .contact-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgb(10 14 18 / 5%) 0%, rgb(10 14 18 / 24%) 42%, rgb(10 14 18 / 92%) 59%, #10151b 100%);
}
.contact-hero__inner { position: relative; z-index: 1; min-height: 330px; }
.contact-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 30px;
  color: #b8bec5;
  font-size: 12px;
}
.contact-breadcrumb a { color: inherit; text-decoration: none; }
.contact-breadcrumb a:hover { color: #fff; }
.contact-hero__copy {
  width: 48%;
  margin-inline-start: 0;
  margin-inline-end: auto;
  padding-block: 31px 59px;
  text-align: right;
}
.contact-page .contact-kicker {
  margin: 0 0 12px;
  color: var(--contact-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
}
.contact-hero .contact-kicker { color: #ff5363; }
.contact-hero .contact-kicker::before,
.contact-hero .contact-kicker::after { display: inline-block; width: 25px; height: 1px; margin-inline: 10px; background: var(--contact-red); content: ""; vertical-align: middle; }
.contact-hero h1 {
  margin: 0 0 7px;
  font-size: clamp(30px, 4vw, 43px);
  font-weight: 900;
  line-height: 1.42;
  letter-spacing: -.035em;
}
.contact-hero h1 span { color: #ff3348; }
.contact-hero__copy > p:not(.contact-kicker) {
  margin: 0;
  color: #c8cdd2;
  font-size: 13px;
  line-height: 1.8;
}
.contact-promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 17px; direction: rtl; }
.contact-promises > div { display: grid; justify-items: center; gap: 6px; }
.contact-promises > div > span { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--contact-red); border-radius: 50%; color: #f21b31; }
.contact-promises svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-promises small { color: #e4e6e8; font-size: 11px; }
.contact-quick-links {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: -79px;
  left: 0;
  display: grid;
  min-height: 98px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #eceef0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgb(17 24 32 / 10%);
}
.contact-quick-links a { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 12px; color: var(--contact-ink); text-align: center; text-decoration: none; transition: background .2s ease, box-shadow .2s ease; }
.contact-quick-links a + a::before { position: absolute; top: 19px; bottom: 19px; right: 0; width: 1px; background: #e8eaed; content: ""; }
.contact-quick-links a:hover { background: linear-gradient(180deg,#fff,#fff8f8); box-shadow: inset 0 3px var(--contact-red); }
.contact-quick-links__icon { display: grid; width: 38px; height: 38px; margin-bottom: 2px; place-items: center; border: 1px solid #ffe0e3; border-radius: 11px; background: #fff4f5; color: var(--contact-red); transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease; }
.contact-quick-links__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-quick-links a:first-child .contact-quick-links__icon svg { stroke-width: 2; }
.contact-quick-links a:nth-child(2) .contact-quick-links__icon svg path:last-child { stroke-dasharray: 0; }
.contact-quick-links a:hover .contact-quick-links__icon { transform: translateY(-2px); border-color: var(--contact-red); background: var(--contact-red); color: #fff; }
.contact-quick-links a strong { font-size: 13px; font-weight: 900; }
.contact-quick-links a small { color: #8a9097; font-size: 10px; }
.contact-text-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 25px;
  color: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.contact-text-link svg { width: 19px; height: 19px; transition: transform .2s ease; }
.contact-text-link:hover svg { transform: translateX(-4px); }
.contact-main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .75fr);
  align-items: start;
  gap: clamp(34px, 6vw, 82px);
  padding-block: 78px 92px;
}
.contact-form-panel {
  padding: clamp(25px, 4vw, 48px);
  border: 1px solid #eceef0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 65px rgb(17 24 32 / 7%);
  scroll-margin-top: 35px;
}
.contact-form-panel h2,
.contact-details h2 {
  margin: 0 0 8px;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.5;
}
.contact-intro {
  margin: 0 0 27px;
  color: var(--contact-muted);
  font-size: 14px;
  line-height: 1.9;
}
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px 16px;
  margin-top: 26px;
}
.contact-field { min-width: 0; }
.contact-field--full { grid-column: 1 / -1; }
.contact-field label {
  display: block;
  margin-bottom: 8px;
  color: #282e35;
  font-size: 13px;
  font-weight: 800;
}
.contact-field label span { color: var(--contact-red); }
.contact-field input,
.contact-field textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #dfe2e5;
  border-radius: 7px;
  outline: 0;
  background: #fbfbfc;
  color: var(--contact-ink);
  font: inherit;
  font-size: 14px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.contact-field textarea { min-height: 145px; resize: vertical; line-height: 1.8; }
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: #a0a5ab; }
.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--contact-red);
  background: #fff;
  box-shadow: 0 0 0 3px rgb(227 6 27 / 10%);
}
.contact-field [aria-invalid="true"] { border-color: #c52636; }
.contact-error { display: block; margin-top: 6px; color: #bd2433; font-size: 12px; }
.contact-form__bottom {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 3px;
}
.contact-form__bottom p { margin: 0; color: #737a82; font-size: 12px; }
.contact-button {
  display: inline-flex;
  min-height: 49px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 11px 21px;
  border: 0;
  border-radius: 7px;
  background: var(--contact-red);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.contact-button:hover { transform: translateY(-2px); background: #bf0719; }
.contact-button svg { width: 18px; height: 18px; }
.contact-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block: 18px;
  padding: 13px 15px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.7;
}
.contact-notice svg { flex: 0 0 20px; width: 20px; height: 20px; }
.contact-notice--success { border: 1px solid #bce6d0; background: #effaf4; color: #176b42; }
.contact-notice--error { border: 1px solid #f1c6ca; background: #fff4f4; color: #9d1d2a; }
.contact-details { padding-top: 22px; }
.contact-details h2 { margin-bottom: 9px; }
.contact-details h2 span { display: block; }
.contact-method {
  display: flex;
  min-height: 78px;
  align-items: center;
  gap: 15px;
  margin-top: 12px;
  padding: 14px 15px;
  border: 1px solid var(--contact-line);
  border-radius: 9px;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
a.contact-method:hover { transform: translateY(-2px); border-color: #f2a6ae; box-shadow: 0 10px 25px rgb(17 24 32 / 6%); }
.contact-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 8px;
  background: #fff0f1;
  color: var(--contact-red);
}
.contact-icon svg { width: 21px; height: 21px; }
.contact-method > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.contact-method small { color: #7b828a; font-size: 11px; }
.contact-method strong { overflow-wrap: anywhere; font-size: 14px; font-weight: 800; }
.contact-method__arrow { width: 17px; height: 17px; margin-inline-start: auto; color: #9aa0a6; }
.contact-social { margin-top: 25px; padding-top: 22px; border-top: 1px solid var(--contact-line); }
.contact-social h3 { margin: 0 0 5px; font-size: 16px; font-weight: 900; }
.contact-social p { margin: 0; color: var(--contact-muted); font-size: 13px; }
.contact-social__links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.contact-social__links a {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid var(--contact-line);
  border-radius: 50%;
  color: #333a42;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.contact-social__links a:hover { border-color: var(--contact-red); background: var(--contact-red); color: #fff; }
.contact-social__links svg { width: 17px; height: 17px; }
.contact-location { padding-block: 70px; background: #f5f6f7; }
.contact-location__inner { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(30px, 6vw, 80px); }
.contact-location__copy > .contact-icon { margin-bottom: 17px; }
.contact-location__copy h2 { margin: 0 0 10px; font-size: clamp(28px, 3.5vw, 42px); font-weight: 900; }
.contact-location__copy address,
.contact-location__copy > p:not(.contact-kicker) { margin: 0; color: var(--contact-muted); font-size: 14px; font-style: normal; line-height: 2; }
.contact-location__copy .contact-button,
.contact-location__copy .contact-text-link { margin-top: 22px; }
.contact-location__map {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid #e5e7e9;
  border-radius: 12px;
  background:
    linear-gradient(32deg, transparent 47%, #dce2df 48%, #dce2df 50%, transparent 51%),
    linear-gradient(145deg, transparent 43%, #e3e7e2 44%, #e3e7e2 46%, transparent 47%),
    #e9eee9;
}
.contact-location__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.contact-location__invitation {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  background: radial-gradient(circle at 50% 45%, #fff 0 2px, transparent 3px), repeating-linear-gradient(35deg, transparent 0 48px, rgb(137 152 141 / 14%) 49px 50px), repeating-linear-gradient(125deg, transparent 0 64px, rgb(137 152 141 / 13%) 65px 66px), #e9eee9;
  color: #333b36;
  text-align: center;
}
.contact-location__pin { display: grid; width: 54px; height: 54px; place-items: center; border: 7px solid rgb(227 6 27 / 12%); border-radius: 50%; background: var(--contact-red); color: #fff; box-shadow: 0 8px 20px rgb(227 6 27 / 22%); }
.contact-location__pin svg { width: 21px; height: 21px; }
.contact-location__invitation strong { font-size: 18px; }
.contact-location__invitation > span:last-child { color: #717a73; font-size: 12px; }
.contact-ending { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1200px, calc(100% - 64px)); margin: 0 auto 44px; overflow: hidden; padding: 23px 30px; border: 1px solid #eceef0; border-radius: 12px; background: radial-gradient(ellipse at 0 100%, rgb(227 6 27 / 7%), transparent 48%), linear-gradient(110deg, #fff, #f8f9fa); }
.contact-ending::after { position: absolute; top: -55px; left: -30px; width: 190px; height: 190px; border: 1px solid rgb(227 6 27 / 9%); border-radius: 50%; box-shadow: 0 0 0 18px rgb(227 6 27 / 3%), 0 0 0 38px rgb(227 6 27 / 2%); content: ""; pointer-events: none; }
.contact-ending__copy { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
.contact-ending__mark { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 10px; background: #fff0f1; color: var(--contact-red); }
.contact-ending__mark svg { width: 22px; height: 22px; }
.contact-ending__copy p { margin: 0 0 3px; color: var(--contact-red); font-size: 11px; font-weight: 800; }
.contact-ending__copy h2 { margin: 0; color: var(--contact-ink); font-size: clamp(17px, 2vw, 22px); font-weight: 900; }
.contact-ending__copy h2 strong { color: var(--contact-red); }
.contact-ending__actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 17px; }
.contact-ending__primary { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 10px; padding: 9px 17px; border-radius: 7px; background: var(--contact-red); color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; transition: background .18s ease, transform .18s ease; }
.contact-ending__primary:hover { transform: translateY(-2px); background: #bf0719; }
.contact-ending__primary svg { width: 16px; height: 16px; }
.contact-ending__secondary { color: #4d555d; font-size: 12px; font-weight: 800; text-decoration: none; }
.contact-ending__secondary:hover { color: var(--contact-red); }
.contact-branches { padding-block: 38px 54px; background: #fff; }
.contact-section-heading { margin-bottom: 20px; text-align: center; }
.contact-section-heading .contact-kicker { margin-bottom: 2px; }
.contact-section-heading h2 { display: inline-flex; align-items: center; gap: 14px; margin: 0; font-size: 24px; font-weight: 900; }
.contact-section-heading h2::before,
.contact-section-heading h2::after { width: 48px; height: 1px; background: #f3a8af; content: ""; }
.contact-section-heading > p:last-child { margin: 2px 0 0; color: #858b92; font-size: 12px; }
.contact-branches__grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr); align-items: start; gap: 12px; }
.contact-branches__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; }
.contact-branch-card { align-self: start; overflow: hidden; border: 1px solid #e7e9ec; border-radius: 10px; background: #fff; box-shadow: 0 5px 18px rgb(17 24 32 / 7%); transition: transform .2s ease, box-shadow .2s ease; }
.contact-branch-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgb(17 24 32 / 11%); }
.contact-branch-card > img { display: block; width: 100%; height: 112px; object-fit: cover; }
.contact-branch-card__body { display: flex; min-height: 126px; align-items: stretch; flex-direction: column; padding: 11px 10px 10px; text-align: right; }
.contact-branch-card__eyebrow { align-self: flex-start; padding: 3px 7px; border-radius: 20px; background: #fff2f3; color: #bd1425; font-size: 8px; font-weight: 800; }
.contact-branch-card h3 { margin: 5px 0 0; font-size: 13px; font-weight: 900; line-height: 1.5; }
.contact-branch-card p { display: flex; align-items: center; gap: 4px; margin: 3px 0 10px; color: #7c848b; font-size: 10px; }
.contact-branch-card p svg { width: 13px; height: 13px; flex: 0 0 13px; color: var(--contact-red); }
.contact-branch-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: auto; }
.contact-branch-card__actions a { display: flex; min-height: 32px; align-items: center; justify-content: center; gap: 4px; padding: 4px; border: 1px solid #e8eaed; border-radius: 6px; background: #fafbfc; color: #343a40; font-size: 9px; font-weight: 800; text-align: center; text-decoration: none; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.contact-branch-card__actions a:first-child { border-color: #f4c5ca; background: #fff7f8; color: #c90017; }
.contact-branch-card__actions a:hover { border-color: var(--contact-red); background: var(--contact-red); color: #fff; }
.contact-branch-card__actions a svg { width: 13px; height: 13px; flex: 0 0 13px; }
.contact-branches__left { display: grid; align-content: start; gap: 12px; }
.contact-branch-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; border: 1px solid #e7e9ec; border-radius: 9px; background: #fafbfc; }
.contact-branch-contact > a,
.contact-branch-contact > div { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 5px; color: var(--contact-ink); text-decoration: none; }
.contact-branch-contact > a:hover strong { color: var(--contact-red); }
.contact-branch-contact__icon { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 8px; background: #fff0f1; color: var(--contact-red); }
.contact-branch-contact__icon svg { width: 16px; height: 16px; }
.contact-branch-contact > a > span:last-child,
.contact-branch-contact > div > span:last-child { display: grid; min-width: 0; gap: 2px; }
.contact-branch-contact small { color: #878e95; font-size: 9px; }
.contact-branch-contact strong { overflow: hidden; color: #343a40; font-size: 10px; font-weight: 800; text-overflow: ellipsis; }
.contact-branches__map { position: relative; min-height: 322px; overflow: hidden; border: 1px solid #e1e5e8; border-radius: 15px; background: #edf0ef; isolation: isolate; }
.contact-branches__map-art { position: absolute; z-index: -1; inset: 0 36% 0 0; overflow: hidden; background-color: #f4f4f2; background-image: linear-gradient(31deg, transparent 47%, #d5dce0 48%, #fff 49%, #fff 50%, transparent 51%), linear-gradient(145deg, transparent 43%, #d7dfe1 44%, #fff 45%, #fff 46%, transparent 47%), repeating-linear-gradient(73deg, transparent 0 37px, rgb(198 207 208 / 25%) 38px 40px), repeating-linear-gradient(5deg, transparent 0 48px, rgb(201 208 207 / 26%) 49px 51px); }
.contact-map-river { position: absolute; top: -15%; bottom: -15%; left: 34%; width: 36px; transform: rotate(14deg); background: #a6d8e4; clip-path: polygon(33% 0, 78% 0, 61% 17%, 100% 32%, 52% 49%, 80% 67%, 23% 82%, 48% 100%, 0 100%, 24% 80%, 3% 65%, 42% 49%, 14% 32%, 47% 16%); opacity: .8; }
.contact-map-road { position: absolute; width: 125%; height: 5px; border-block: 1px solid #fff; background: #d9dddc; }
.contact-map-road--one { top: 38%; left: -13%; transform: rotate(-21deg); }
.contact-map-road--two { top: 63%; left: -8%; transform: rotate(12deg); }
.contact-map-road--three { top: 48%; left: -16%; transform: rotate(71deg); }
.contact-map-label { position: absolute; color: #565b5d; font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px #fff; }
.contact-map-label--cairo { top: 13%; left: 45%; }
.contact-map-label--new-cairo { top: 32%; left: 69%; }
.contact-map-label--nasr { top: 57%; left: 62%; }
.contact-map-label--giza { top: 68%; left: 15%; }
.contact-map-zoom { position: absolute; top: 12%; left: 4%; display: grid; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 4px 16px #0002; }
.contact-map-zoom b { display: grid; width: 36px; height: 38px; place-items: center; color: #353c41; font: 700 23px/1 Arial,sans-serif; }
.contact-map-zoom b + b { border-top: 1px solid #e7e7e7; }
.contact-map-crosshair { position: absolute; top: 45%; left: 5%; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 3px 12px #0002; color: #363e43; font-size: 23px; }
.contact-map-storefront { position: absolute; z-index: 0; inset: 0 0 0 51%; overflow: hidden; clip-path: polygon(15% 0,100% 0,100% 100%,0 100%,24% 77%,31% 59%,29% 40%,22% 19%); }
.contact-map-storefront::before { position: absolute; z-index: 1; inset: 0 auto 0 0; width: 13px; background: var(--contact-red); clip-path: polygon(0 0,55% 0,100% 29%,100% 42%,80% 58%,0 100%); content: ""; }
.contact-map-storefront img { width: 100%; height: 100%; object-fit: cover; object-position: 71% center; }
.contact-map-pin { position: absolute; z-index: 2; top: 18%; left: 31%; display: grid; justify-items: center; }
.contact-map-pin > span { display: grid; width: 45px; height: 45px; place-items: center; border: 5px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--contact-red); color: #fff; box-shadow: 0 7px 18px rgb(227 6 27 / 28%); }
.contact-map-pin svg { width: 21px; height: 21px; transform: rotate(45deg); }
.contact-map-pin strong { margin-top: 7px; color: #171c20; font-size: 16px; font-weight: 900; }
.contact-map-pin small { color: #60676d; font-size: 10px; }
.contact-map-branch { position: absolute; z-index: 3; bottom: 15px; left: 15px; display: flex; width: min(76%, 355px); min-height: 102px; align-items: center; gap: 13px; padding: 10px; border: 1px solid #eee; border-radius: 13px; background: rgb(255 255 255 / 95%); box-shadow: 0 8px 22px #17202a20; color: var(--contact-ink); text-decoration: none; }
.contact-map-branch > img { width: 38%; height: 78px; flex: 0 0 38%; border-radius: 8px; object-fit: cover; object-position: 75% center; }
.contact-map-branch > span { display: grid; gap: 4px; min-width: 0; }
.contact-map-branch strong { font-size: 13px; font-weight: 900; }
.contact-map-branch small { display: flex; align-items: center; gap: 3px; color: #7b8389; font-size: 10px; }
.contact-map-branch small svg { width: 13px; height: 13px; color: var(--contact-red); }
.contact-map-branch b { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--contact-red); font-size: 11px; }
.contact-map-branch b svg { width: 14px; height: 14px; }
.contact-map-google { position: absolute; z-index: 2; bottom: 6px; left: 8px; color: #4285f4; font-size: 10px; font-weight: 900; text-decoration: none; }
.contact-branches__map iframe { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; border: 0; }
.contact-branches__map-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; background: repeating-linear-gradient(28deg, transparent 0 33px, rgb(129 157 170 / 16%) 34px 36px), repeating-linear-gradient(115deg, transparent 0 55px, rgb(129 157 170 / 13%) 56px 58px), #e8eff1; color: #26333a; text-decoration: none; }
.contact-branches__map-fallback .contact-location__pin { width: 42px; height: 42px; flex-basis: 42px; }
.contact-branches__map-fallback strong { color: var(--contact-red); font-size: 13px; }
.contact-branches__map-fallback small { color: #65737a; font-size: 11px; }
.contact-map-wordmark { position: absolute; bottom: 9px; left: 11px; color: #4285f4; font-size: 11px; font-weight: 900; }
.contact-help-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.contact-faq { padding: 4px 0; }
.contact-faq .contact-kicker { margin-bottom: 2px; font-size: 11px; }
.contact-faq h2 { margin: 0 0 12px; font-size: 19px; font-weight: 900; }
.contact-faq__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.contact-faq details { align-self: start; border: 1px solid #e7e9ec; border-radius: 7px; background: #fff; }
.contact-faq summary { display: flex; min-height: 39px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; cursor: pointer; list-style: none; font-size: 11px; font-weight: 800; }
.contact-faq summary::-webkit-details-marker { display: none; }
.contact-faq summary > span { position: relative; width: 14px; height: 14px; flex: 0 0 14px; }
.contact-faq summary > span::before,
.contact-faq summary > span::after { position: absolute; top: 6px; right: 2px; width: 10px; height: 1.5px; background: #333a42; content: ""; }
.contact-faq summary > span::after { transform: rotate(90deg); transition: transform .18s ease; }
.contact-faq details[open] summary > span::after { transform: rotate(0); }
.contact-faq details > p { margin: 0; padding: 0 12px 11px; color: var(--contact-muted); font-size: 11px; line-height: 1.8; }
.contact-quote-card { position: relative; display: flex; min-height: 145px; align-items: center; gap: 22px; overflow: hidden; padding: 18px 22px; border-radius: 10px; background: linear-gradient(90deg, #10151b 0%, #11171e 52%, rgb(17 23 30 / 65%) 100%), url("../img/home-contact-studio.webp") center / cover; color: #fff; }
.contact-quote-card > img { position: relative; z-index: 1; width: 105px; height: auto; object-fit: contain; }
.contact-quote-card > div { position: relative; z-index: 1; }
.contact-quote-card .contact-kicker { margin-bottom: 2px; color: #ff6674; font-size: 10px; }
.contact-quote-card h2 { margin: 0 0 3px; font-size: 18px; font-weight: 900; }
.contact-quote-card > div > p:not(.contact-kicker) { max-width: 340px; margin: 0 0 10px; color: #d2d5d8; font-size: 10px; line-height: 1.7; }
.contact-quote-card .contact-button { min-height: 33px; padding: 7px 14px; border-radius: 6px; font-size: 10px; }
.contact-quote-card .contact-button svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .contact-main { grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr); gap: 28px; }
  .contact-wrap { width: min(100% - 40px, 1200px); }
  .contact-location__inner { gap: 30px; }
  .contact-branches__grid { grid-template-columns: minmax(0, 1fr); }
  .contact-branch-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-branches__map { min-height: 310px; }
}
@media (max-width: 700px) {
  .contact-page .about-wrap { width: calc(100% - 36px); }
  .contact-breadcrumb { padding-top: 22px; }
  .contact-page .contact-hero { min-height: 0; margin-bottom: 112px; background-position: 34% center; }
  .contact-page .contact-hero::before { background: linear-gradient(90deg, rgb(10 14 18 / 34%), rgb(10 14 18 / 91%)); }
  .contact-hero__inner { min-height: 0; }
  .contact-hero__copy { width: 100%; padding-block: 35px 35px; text-align: right; }
  .contact-hero h1 { font-size: clamp(30px, 8vw, 40px); }
  .contact-hero__copy > p:not(.contact-kicker) { font-size: 13px; }
  .contact-hero__copy > p br { display: none; }
  .contact-promises { max-width: 440px; margin-inline: auto; margin-top: 20px; }
  .contact-quick-links { bottom: -132px; min-height: 210px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-quick-links a:nth-child(3)::before { display: none; }
  .contact-quick-links a:nth-child(n+3) { border-top: 1px solid #e8eaed; }
  .contact-main { grid-template-columns: minmax(0, 1fr); gap: 35px; padding-block: 42px 55px; }
  .contact-form-panel { padding: 24px 19px; }
  .contact-details { padding-top: 0; }
  .contact-details h2 br { display: none; }
  .contact-location { padding-block: 48px; }
  .contact-location__inner { grid-template-columns: minmax(0, 1fr); }
  .contact-location__map { min-height: 270px; }
  .contact-help-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-quote-card { min-height: 160px; }
  .contact-ending { align-items: flex-start; flex-direction: column; gap: 18px; padding: 20px; }
  .contact-ending__actions { width: 100%; justify-content: space-between; }
}
@media (max-width: 480px) {
  .contact-page .about-wrap { width: calc(100% - 28px); }
  .contact-page .contact-hero { margin-bottom: 110px; }
  .contact-hero__copy { padding-block: 29px 30px; }
  .contact-promises { gap: 4px; }
  .contact-promises > div > span { width: 39px; height: 39px; }
  .contact-promises small { font-size: 9px; }
  .contact-quick-links { bottom: -128px; }
  .contact-quick-links a { padding: 9px 5px; }
  .contact-quick-links a strong { font-size: 12px; }
  .contact-quick-links a small { font-size: 9px; }
  .contact-form { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .contact-field--full, .contact-form__bottom { grid-column: auto; }
  .contact-form__bottom { align-items: stretch; flex-direction: column; }
  .contact-form__bottom .contact-button { width: 100%; }
  .contact-location__map { min-height: 235px; }
  .contact-branches__cards { grid-template-columns: minmax(0, 1fr); }
  .contact-branch-contact { grid-template-columns: minmax(0, 1fr); }
  .contact-branch-card { display: grid; grid-template-columns: 38% 1fr; }
  .contact-branch-card > img { height: 100%; min-height: 132px; }
  .contact-branch-card__body { align-self: center; padding: 10px; }
  .contact-faq__items { grid-template-columns: minmax(0, 1fr); }
  .contact-quote-card { gap: 12px; padding: 15px; }
  .contact-quote-card > img { width: 75px; }
  .contact-branches__map { min-height: 370px; }
  .contact-map-storefront { right: 0; left: 47%; }
  .contact-map-branch { width: 88%; left: 10px; bottom: 11px; }
  .contact-map-pin { top: 16%; left: 37%; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-page *, .contact-page *::before, .contact-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Contact page responsive layout */
@media (max-width: 900px) {
  .contact-main { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .contact-details { padding-top: 0; }
  .contact-branches__grid { grid-template-columns: minmax(0, 1fr); }
  .contact-branches__map { min-height: clamp(300px, 48vw, 390px); }
}
@media (max-width: 700px) {
  .contact-page .about-wrap,
  .contact-ending { width: calc(100% - 36px); }
  .contact-page .contact-hero { margin-bottom: 120px; background-position: 35% center; }
  .contact-page .contact-hero::before { background: linear-gradient(90deg, rgb(10 14 18 / 45%), rgb(10 14 18 / 88%)); }
  .contact-hero__inner { min-height: 0; }
  .contact-hero__copy { width: min(100%, 520px); padding-block: 30px 28px; }
  .contact-hero h1 { font-size: clamp(29px, 7.5vw, 38px); }
  .contact-promises { max-width: 440px; gap: 5px; margin: 18px 0 0; }
  .contact-promises > div > span { width: 39px; height: 39px; }
  .contact-promises small { font-size: 9px; }
  .contact-quick-links { bottom: -108px; min-height: 204px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-quick-links a { padding: 9px 6px; }
  .contact-quick-links a:nth-child(3)::before { display: none; }
  .contact-quick-links a:nth-child(n+3) { border-top: 1px solid #e8eaed; }
  .contact-quick-links a strong { font-size: 12px; }
  .contact-quick-links a small { font-size: 9px; }
  .contact-main { padding-block: 38px 48px; }
  .contact-form-panel { padding: 23px 18px; }
  .contact-form { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .contact-field--full,
  .contact-form__bottom { grid-column: 1; }
  .contact-form__bottom { align-items: stretch; flex-direction: column; }
  .contact-form__bottom .contact-button { width: 100%; }
  .contact-branches { padding-block: 30px 40px; }
  .contact-branches__grid { gap: 13px; }
  .contact-branches__map { order: -1; min-height: 290px; }
  .contact-branches__cards { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .contact-branch-card { display: grid; grid-template-columns: minmax(105px, 34%) minmax(0, 1fr); min-height: 122px; }
  .contact-branch-card > img { width: 100%; height: 100%; min-height: 122px; }
  .contact-branch-card__body { min-height: 122px; align-items: stretch; justify-content: center; gap: 2px; padding: 9px 10px; }
  .contact-branch-card__eyebrow { font-size: 8px; }
  .contact-branch-card h3 { font-size: 12px; }
  .contact-branch-card p { margin: 1px 0 5px; font-size: 9px; }
  .contact-branch-card__actions { width: 100%; }
  .contact-branch-card__actions a { min-height: 30px; font-size: 9px; }
  .contact-branch-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 7px; }
  .contact-branch-contact > a,
  .contact-branch-contact > div { gap: 6px; padding: 4px 2px; }
  .contact-branch-contact__icon { width: 28px; height: 28px; flex-basis: 28px; }
  .contact-branch-contact strong { font-size: 9px; }
  .contact-help-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .contact-faq__items { grid-template-columns: minmax(0, 1fr); }
  .contact-quote-card { min-height: 145px; }
  .contact-ending { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 30px; padding: 18px; }
  .contact-ending__copy { gap: 11px; }
  .contact-ending__copy h2 { font-size: 17px; }
  .contact-ending__actions { width: 100%; justify-content: space-between; gap: 10px; }
}
@media (max-width: 390px) {
  .contact-page .about-wrap,
  .contact-ending { width: calc(100% - 28px); }
  .contact-page .contact-hero { margin-bottom: 116px; }
  .contact-breadcrumb { gap: 8px; font-size: 10px; }
  .contact-hero__copy { padding-block: 25px 24px; }
  .contact-hero h1 { font-size: 28px; }
  .contact-hero__copy > p:not(.contact-kicker) { font-size: 12px; }
  .contact-promises { gap: 2px; }
  .contact-promises > div > span { width: 34px; height: 34px; }
  .contact-promises svg { width: 18px; height: 18px; }
  .contact-promises small { font-size: 8px; }
  .contact-quick-links { bottom: -105px; min-height: 198px; }
  .contact-quick-links__icon { width: 33px; height: 33px; }
  .contact-quick-links__icon svg { width: 19px; height: 19px; }
  .contact-quick-links a strong { font-size: 11px; }
  .contact-quick-links a small { font-size: 8px; }
  .contact-form-panel { padding: 20px 14px; }
  .contact-map-storefront { right: 0; left: 43%; }
  .contact-map-pin { top: 13%; left: 33%; }
  .contact-map-pin strong { font-size: 14px; }
  .contact-map-pin small { max-width: 125px; text-align: center; }
  .contact-map-branch { width: calc(100% - 20px); left: 10px; bottom: 10px; gap: 8px; padding: 8px; }
  .contact-map-branch > img { height: 66px; }
  .contact-map-branch strong { font-size: 11px; }
  .contact-map-branch small { font-size: 9px; }
  .contact-map-branch b { font-size: 10px; }
  .contact-branch-contact { grid-template-columns: minmax(0, 1fr); }
  .contact-quote-card { gap: 9px; padding: 14px 11px; }
  .contact-quote-card > img { width: 62px; }
  .contact-quote-card h2 { font-size: 16px; }
  .contact-quote-card > div > p:not(.contact-kicker) { font-size: 9px; }
  .contact-ending__copy h2 { font-size: 15px; }
  .contact-ending__primary { padding-inline: 12px; font-size: 11px; }
  .contact-ending__secondary { font-size: 11px; }
}
@media (max-width: 340px) {
  .contact-page .about-wrap,
  .contact-ending { width: calc(100% - 22px); }
  .contact-quick-links a small { display: none; }
  .contact-map-branch { width: calc(100% - 14px); left: 7px; }
  .contact-map-branch > img { width: 32%; flex-basis: 32%; }
}