/* pms.asico.ae - ASICO Property Management System site.
   Values are taken from the previous Elementor build and named once as tokens. */

/* --- Fonts ---------------------------------------------------------------- */

@font-face { font-family: "Manrope"; font-weight: 200 800; font-style: normal; font-display: swap; src: url("../fonts/manrope.woff2") format("woff2"); }
@font-face { font-family: "Inter";   font-weight: 100 900; font-style: normal; font-display: swap; src: url("../fonts/inter.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../fonts/inter-tight.woff2") format("woff2"); }

/* --- Tokens ---------------------------------------------------------------- */

:root {
  --navy:   #18253a;
  --gold:   #f2b966;
  --white:  #fff;
  --page:   #fdfdfd;
  --ink-soft: #6a7995;              /* body copy on light backgrounds */
  --ink-legal: #3d3d3d;
  --field-line: #dadbdd;
  --error: #d63638;
  --glass: rgba(255, 255, 255, 0.07);
  --shadow-card: 0 20px 60px rgba(1, 30, 81, 0.08);
  --shadow-image: 0 0 60px rgba(1, 30, 81, 0.08);

  --head: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --legal: "Inter Tight", var(--body);

  --gutter: 20px;
  --wrap: 1200px;
  --header-h: 70px;
  --pad-section: 120px;

  --h1: 58px; --h1-lh: 69.6px; --h1-ls: -1.566px;
  --h2: 48px; --h2-lh: 57.6px; --h2-ls: -1.296px;
  --lead: 18px; --lead-lh: 31.5px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 1024px) {
  :root { --h1: 44px; --h1-lh: 52.8px; --h1-ls: -1.188px; --h2: 34px; --h2-lh: 40.8px; --h2-ls: -0.918px; --pad-section: 100px; }
}
@media (max-width: 767px) {
  :root { --h1: 25px; --h1-lh: 30px; --h1-ls: -0.675px; --h2: 26px; --h2-lh: 31.2px; --h2-ls: -0.702px; --lead-lh: 28px; --pad-section: 60px; }
}

/* --- Base ------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--head);
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--white);
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -0.125em; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: 10px 16px; background: var(--white); color: var(--navy); }
.skip:focus { left: 10px; top: 10px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* --- Shared components ---------------------------------------------------------- */

.eyebrow {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 14.5px;
  border-radius: 8px;
  background: var(--gold);
  color: var(--white);
  font: 600 15px/21.6px var(--head);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.h2 {
  margin-bottom: 15px;
  font: 700 var(--h2)/var(--h2-lh) var(--head);
  letter-spacing: var(--h2-ls);
  text-transform: uppercase;
  color: var(--navy);
}
.h2 em { font-style: normal; color: var(--gold); }
.lead { font: 400 var(--lead)/var(--lead-lh) var(--head); letter-spacing: 0.5px; color: var(--ink-soft); }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 18px 25px;
  border: 0; border-radius: 5px;
  background: var(--gold); color: var(--white);
  font: 400 15px/16px var(--body);
  letter-spacing: 0.5px;
  text-transform: capitalize;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn .icon { font-size: 15px; }
.btn:hover { background: #e6a84d; transform: translateY(-2px); }
.btn--caps { text-transform: uppercase; }

/* --- Header -------------------------------------------------------------------------- */

.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 90px;
  transition: height 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.header.is-solid, .header.menu-open {
  height: var(--header-h);
  background: var(--navy);
  box-shadow: 0 20px 60px -20px rgba(1, 30, 81, 0.08);
}
.header__in { display: flex; align-items: center; justify-content: space-between; height: 100%; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.header__logo img { width: 150px; }
.nav { position: absolute; left: calc(50% - 12px); transform: translateX(-50%); display: flex; gap: 20px; }
.nav a {
  padding: 3px;
  font: 500 18px/16px var(--head);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gold);
  transition: color 0.3s var(--ease);
}
.nav a:hover { color: var(--white); }
.header__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 18px 28px;
  border: 1px solid var(--white); border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  color: var(--white);
  font: 400 15px/16px var(--head);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.header__cta:hover { background: var(--gold); border-color: var(--gold); }
.burger { display: none; width: 44px; height: 44px; margin-right: -12px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--gold); }
.burger span { display: block; width: 20px; height: 2px; margin: 5px auto; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.3s; }
.header.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header.menu-open .burger span:nth-child(2) { opacity: 0; }
.header.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.drawer {
  position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 999;
  padding: 20px; background: var(--white);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer a { display: block; padding: 12px 0; font: 500 18px/18px var(--head); letter-spacing: 0.5px; text-transform: uppercase; color: var(--gold); }

/* --- Hero ------------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh;
  padding: 180px 0;
  text-align: center; color: var(--white);
  overflow: hidden; background: #0b1220;
}
@supports (height: 100svh) { .hero { min-height: 100svh; } }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.hero__in { position: relative; z-index: 1; width: min(720px, 100% - 2 * var(--gutter)); display: flex; flex-direction: column; align-items: center; }
.hero h1 { margin-bottom: 12px; font: 300 var(--h1)/var(--h1-lh) var(--head); letter-spacing: var(--h1-ls); text-transform: capitalize; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero p { max-width: 520px; margin-bottom: 20px; font: 400 20px/25px var(--body); text-transform: capitalize; }
.hero .btn { margin-bottom: 20px; }
.ticks { display: flex; justify-content: center; }
.ticks li { display: flex; align-items: center; margin-inline: 15px; font: 400 18px/28.8px var(--body); text-transform: capitalize; }
.ticks .icon { margin-right: 5px; font-size: 15px; color: var(--gold); }
@media (max-width: 1024px) {
  .hero { padding: 120px 0 40px; }
  .hero__in { width: min(720px, 80%); }
  .hero p { font-size: 17px; }
}
@media (max-width: 767px) {
  .hero { min-height: 630px; padding: 100px 0 126px; }
  .hero { background: var(--page); }                 /* the last 40px is page colour, as on the original */
  .hero__video, .hero::after { bottom: 40px; height: auto; }
  .hero__in { width: 100%; }
  .hero .btn { white-space: nowrap; }
  .hero p { font-size: 15px; max-width: 320px; margin-bottom: 10px; }
  .ticks li { margin-inline: 10px; font-size: 15px; line-height: 22px; }
}

/* --- Why choose ------------------------------------------------------------------------------ */

.why { padding: var(--pad-section) 0; background: var(--page); }
.why__head { max-width: 1220px; margin: 0 auto 30px; padding-inline: var(--gutter); text-align: center; scroll-margin-top: 90px; }
.why__head .lead { max-width: 400px; margin-inline: auto; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.card {
  padding: 50px;
  border-radius: 8px;
  background: var(--navy); color: var(--white);
  box-shadow: var(--shadow-card);
}
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  height: 84px; margin-bottom: 25px; padding-inline: 20px;
  border-radius: 8px; background: var(--gold); color: var(--navy); font-size: 45px;
}
.card__icon .icon { width: 45px; height: 45px; }
.card h3 { margin-bottom: 12px; font: 600 20px/28.8px var(--body); letter-spacing: 0.5px; text-transform: uppercase; }
.card p { font: 400 15px/26.25px var(--head); letter-spacing: 1px; text-transform: capitalize; }
@media (max-width: 1024px) {
  .why__head .h2 br { display: none; }
  .why__head { max-width: 530px; margin-bottom: 40px; }
  .cards { gap: 20px; }
  .card { padding: 30px; }
  .card h3 { font-size: 16px; line-height: 23.04px; }
}
@media (max-width: 767px) {
  .lead { font-size: 16px; }
  .why { padding-top: 50px; }
  .why__head { margin-bottom: 20px; }
  .why__head .lead { max-width: 320px; }
  .cards { grid-template-columns: 1fr; }
  .card h3 { font-size: 18px; line-height: 25.92px; }
}

/* --- Feature strip + rows ---------------------------------------------------------------------- */

.zone { position: relative; }
.strip {
  position: sticky; top: var(--header-h); z-index: 50;
  background: var(--white);
  box-shadow: 0 20px 60px -20px rgba(1, 30, 81, 0.08);
}
.strip ul { display: flex; width: min(var(--wrap), 100%); margin-inline: auto; }
.strip li { flex: 1; }
.strip a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 92px; padding: 21px 10px;
  font: 400 15px/25px var(--body);
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--gold);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.strip a:hover { color: var(--navy); }
@media (max-width: 767px) { .strip { display: none; } }

.features { padding: 150px 0 128px; }
.row {
  display: grid; grid-template-columns: 570fr 630fr; align-items: start;
  height: 338px;              /* fixed pitch: a row never grows to fit its text */
  margin-bottom: 140px;
  scroll-margin-top: 180px;
}
.row:last-child { margin-bottom: 0; }
.row__text { align-self: center; max-width: 468px; }
.row__text .lead { max-width: 400px; }
.row__media img { width: 600px; border-radius: 8px; box-shadow: var(--shadow-image); }
.row--media-left { grid-template-columns: 732fr 468fr; }
.row--media-left .row__media { order: -1; }
.row--media-left .row__media img { margin-left: 20px; }
.row:not(.row--media-left) .row__media { justify-self: end; margin-right: 30px; }
.row--media-left .row__text { justify-self: end; width: 100%; max-width: 468px; }
@media (max-width: 1024px) {
  .features { padding: 100px 0; }
  .row { grid-template-columns: 419fr 361fr; column-gap: 0; align-items: center; height: auto; margin-bottom: 100px; }
  .row--media-left { grid-template-columns: 411fr 369fr; }
  .row:not(.row--media-left) .row__media, .row__media { align-self: center; justify-self: stretch; margin-right: 30px; }
  .row--media-left .row__media { margin: 0 60px 0 20px; }
  .row__media img { width: 100%; }
  .row--media-left .row__media img { margin-left: 0; }
  .row__text, .row--media-left .row__text { max-width: none; justify-self: stretch; padding-right: 0; }
}
@media (max-width: 767px) {
  .features { padding: 70px 0 40px; }
  .row, .row--media-left { grid-template-columns: 1fr; row-gap: 60px; height: auto; margin-bottom: 90px; }
  .row:not(.row--media-left) .row__media, .row__media, .row--media-left .row__media { order: -1 !important; margin: 0; justify-self: stretch; padding-inline: 30px; }
  .row__text .lead { max-width: 320px; }
  .row__media img, .row--media-left .row__media img { width: 100%; margin: 0; }
  .row__text { padding: 0; }
}

/* --- Case studies -------------------------------------------------------------------------------- */

.cases { padding: var(--pad-section) 0; background: var(--navy); color: var(--white); }
.cases .wrap { display: grid; grid-template-columns: 600px 590px; align-items: start; }
.cases .h2 { color: var(--white); max-width: 463px; }
.cases__text { position: relative; }
.cases__text img { position: absolute; left: 437px; top: 147px; width: 116px; }
.cases .btn { margin-top: 20px; }
.proofs li {
  display: flex; align-items: center;
  margin-bottom: 20px; padding: 20px;
  border-radius: 8px; background: var(--glass);
}
.proofs li:last-child { margin-bottom: 0; }
.proofs .tick { display: grid; place-items: center; flex: none; width: 54px; height: 54px; margin-right: 25px; background: var(--gold); color: var(--navy); border-radius: 8px; }
.proofs .tick .icon { font-size: 20px; }
.proofs span:last-child { font: 600 20px/28px var(--head); letter-spacing: -0.54px; text-transform: capitalize; }
@media (max-width: 1024px) {
  .cases .wrap { grid-template-columns: 300px 1fr; column-gap: 30px; }
  .cases .h2 { max-width: 285px; }
  .cases__text img { display: none; }
  .proofs { margin-right: 10px; }
  .proofs span:last-child { font-size: 16px; line-height: 25.6px; letter-spacing: -0.027em; }
}
@media (max-width: 767px) {
  .cases .wrap { grid-template-columns: 1fr; row-gap: 40px; }
  .cases .h2 { max-width: none; }
  .proofs { margin-right: 0; }
}

/* --- FAQ --------------------------------------------------------------------------------------------- */

.faq { padding: var(--pad-section) 0; scroll-margin-top: 70px; }
.faq .wrap { display: grid; grid-template-columns: 1fr 590px; column-gap: 30px; align-items: start; }
.faq__head { margin-top: 395px; }
.faq__head .lead { max-width: 400px; }
.qa { margin-bottom: 20px; }
.qa:last-child { margin-bottom: 0; }
.qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 20px 45px 20px 30px;
  border: 0; border-radius: 8px;
  background: var(--white); box-shadow: var(--shadow-card);
  font: 600 16px/28px var(--body); text-align: left; text-transform: uppercase;
  color: #353535; cursor: pointer; position: relative;
  transition: color 0.3s var(--ease);
}
.qa__q > span { padding-right: 10px; }
.qa__q .icon { position: absolute; right: 25px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--gold); transition: transform 0.3s var(--ease), color 0.3s; }
.qa.is-open .qa__q { color: var(--navy); }
.qa.is-open .qa__q .icon { transform: rotate(180deg); color: var(--navy); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { padding: 30px; font: 400 16px/28px var(--head); letter-spacing: 1px; color: var(--ink-soft); }
.qa__a a { color: var(--navy); text-decoration: underline; }
@media (max-width: 1024px) {
  .faq .wrap { grid-template-columns: 336px 414px; column-gap: 30px; }
  .faq__head { margin-top: 440px; }
}
@media (max-width: 767px) {
  .faq { padding: 50px 0; }
  .faq .wrap { grid-template-columns: 1fr; row-gap: 40px; }
  .faq__head { margin-top: 0; }
  .faq__head .lead { max-width: 320px; }
  .qa__q { padding: 20px 35px 20px 20px; font-size: 14px; line-height: 24.5px; }
  .qa__q .icon { right: 15px; }
  .qa__a p { padding: 20px; font-size: 14px; line-height: 24.5px; }
}

/* --- Sub-page hero, legal -------------------------------------------------------------------------------- */

/* Sub-pages have no full-screen hero, so the fixed header gets its own space. */
body.sub main { padding-top: var(--header-h); }
.banner {
  display: grid; place-items: center; min-height: 398px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/legal-banner.jpg") center / cover no-repeat;
}
.banner h1 { font: 300 48px/57.6px var(--legal); letter-spacing: 1px; color: var(--gold); text-align: center; }
.legal { padding: 90px 0 71px; }
.legal .wrap { display: grid; grid-template-columns: 315px 1fr; column-gap: 0; align-items: start; }
.toc { position: sticky; top: 110px; }
.toc li { margin-bottom: 15px; }
.toc a { display: block; white-space: nowrap; font: 400 16px/26px var(--head); text-transform: uppercase; color: var(--gold); transition: color 0.3s var(--ease); }
.toc a:hover { color: var(--navy); }
.doc { max-width: 885px; font-family: var(--legal); }

/* The terms page is set in a narrower measure with Manrope body text. */
.legal--terms .wrap { grid-template-columns: 353px 1fr; }
.legal--terms .doc { max-width: 756px; font-family: var(--head); }
.legal--terms .doc h3 { font-family: var(--body); font-weight: 600; }
.legal--terms .doc__intro, .legal--terms .doc__intro p { font-family: var(--legal); }
.doc h3 { margin-bottom: 32px; font: 400 32px/40px var(--legal); letter-spacing: -0.864px; text-transform: uppercase; color: var(--gold); }
.doc h3.doc__lead { font-weight: 600; text-transform: none; color: #353535; margin-bottom: 19.6px; }
.doc section { padding-bottom: 160px; scroll-margin-top: 110px; }
.doc__intro { margin-bottom: 90px; }
.doc section:last-child { padding-bottom: 0; }
.doc p, .doc li { font: 400 18px/31.5px var(--legal); letter-spacing: 1px; color: var(--ink-legal); }
.doc p { margin-bottom: 10px; }
.doc ul { margin: 0 0 10px; padding-left: 26px; list-style: disc; }
.doc li p { margin: 0; }
.doc a { color: var(--navy); text-decoration: underline; }
@media (max-width: 1024px) {
  .toc { display: none; }                         /* the original drops the contents list here */
  .banner { min-height: 381px; }
  .banner h1 { font-size: 34px; line-height: 40.8px; }
  .legal { padding: 40px 0 100px; }
  .legal .wrap, .legal--terms .wrap { grid-template-columns: 1fr; width: calc(100% - 20px); }
  .legal--terms .doc { max-width: none; }
  .doc h3 { font-size: 21px; line-height: 26.25px; letter-spacing: -0.567px; }
  .doc section { padding-bottom: 120px; }
}
@media (max-width: 767px) {
  .banner { min-height: 131px; }
  .banner h1 { font-size: 26px; line-height: 31.2px; }
  .legal { padding-bottom: 51px; }
  .legal .wrap, .legal--terms .wrap { width: calc(100% - 40px); }
  .doc h3 { font-size: 20px; line-height: 25px; letter-spacing: -0.54px; }
}

/* --- Contact page ---------------------------------------------------------------------------------------------- */

.contact { position: relative; padding: 110px 0 120px; }
.contact .wrap { display: grid; grid-template-columns: 495px 1fr; }
.contact .lead { max-width: 400px; margin-bottom: 20px; }
.contact__map { position: absolute; top: 89px; right: 0; width: calc(50% - 5px); height: 870px; border: 0; }
.form .field { margin-bottom: 20px; }
.form label { display: block; margin-bottom: 5px; font: 500 14px/19px var(--body); color: #4a5568; }
.form .req { margin-left: 4px; color: var(--error); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea {
  display: block; width: 100%;
  padding: 11px 15px;
  border: 1px solid var(--field-line); border-radius: 7px;
  background: var(--white);
  font: 16px/16px var(--body); color: #606266;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form input[type="text"], .form input[type="email"], .form input[type="tel"] { height: 50px; }
.form textarea { height: 90px; line-height: 20px; resize: vertical; }
.form ::placeholder { color: #8d8d92; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(242, 185, 102, 0.35); }
.form .field.is-invalid input, .form .field.is-invalid textarea { border-color: var(--error); }
.form .err { display: none; margin-top: 5px; font: 13px/18px var(--body); color: var(--error); }
.form .field.is-invalid .err { display: block; }
.form .iti { display: block; width: 100%; }
.consent { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 25px; }
.consent input { margin: 8px 0 0; width: 13px; height: 13px; flex: none; }
.consent label { margin: 0; font: 400 16px/28px var(--head); color: var(--ink-soft); }
.consent a { color: var(--navy); font-weight: 500; }
.consent.is-invalid label { color: var(--error); }
.submit {
  width: 100%; height: 50px; padding: 8px 20px;
  border: 1px solid var(--gold); border-radius: 5px;
  background: var(--gold); color: var(--white);
  font: 500 16px/24px var(--body); cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}
.submit:hover { background: var(--navy); border-color: var(--navy); }
.submit[disabled] { opacity: 0.7; cursor: progress; }
.form-status { margin-top: 14px; font: 15px/22px var(--body); color: var(--error); }
.form-status:empty { display: none; }
.form-done { padding: 30px; border-radius: 8px; background: var(--navy); color: var(--white); }
.form-done h3 { margin-bottom: 8px; font: 700 24px/34px var(--body); text-transform: uppercase; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.help { padding: 100px 0 120px; }
.help__head { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; align-items: center; margin-bottom: 40px; }
.help__head .h2 { max-width: 492px; }
.help__head > .lead { max-width: 468px; justify-self: end; text-align: justify; font-size: 18px; }
.help__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.help__card {
  padding: 50px; border-radius: 8px; background: var(--white); box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease);
}
.help__card:hover { transform: translateY(-4px); }
.help__card h4 { margin-bottom: 12px; font: 700 24px/34.56px var(--body); letter-spacing: -0.648px; text-transform: uppercase; color: var(--navy); }
.help__card p { font: 400 16px/28px var(--head); letter-spacing: 1px; color: var(--ink-soft); }
@media (max-width: 1024px) {
  .contact { padding: 100px 0 0; }
  .contact .wrap { grid-template-columns: 1fr; }
  .contact__map { position: static; display: block; width: 100%; height: 870px; margin-top: 100px; }
  .help { padding: 90px 0; }
  .help__head { grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start; margin-bottom: 40px; }
  .help__head .h2 { max-width: 380px; }
  .help__head > .lead { justify-self: start; text-align: left; max-width: 380px; font-size: 16px; line-height: 28px; }
  .help__card { padding: 30px; }
  .help__card h4 { font-size: 18px; line-height: 25.92px; letter-spacing: -0.486px; }
}
@media (max-width: 767px) {
  .contact { padding-top: 50px; }
  .contact__map { margin-top: 50px; }
  .help { padding: 50px 0; }
  .help__head { grid-template-columns: 1fr; row-gap: 20px; }
  .help__cards { grid-template-columns: 1fr; }
}

/* --- Footer ------------------------------------------------------------------------------------------------------ */

.footer { padding: 40px 0 0; background: var(--navy); color: var(--white); }
.footer__grid { display: grid; grid-template-columns: repeat(3, 1fr); width: min(1220px, 100%); margin-inline: auto; }
.footer__grid > div { padding: 0 20px; }
.footer__logo { width: 200px; margin-bottom: 20px; }
.footer__about { font: 400 16px/22px var(--head); letter-spacing: 1px; }
.footer__links { display: flex; flex-wrap: wrap; column-gap: 16px; margin-top: 20px; }
.footer__links a { display: inline-flex; align-items: center; font: 400 16px/26px var(--body); text-transform: uppercase; }
.footer__links .icon { margin-right: 5px; font-size: 14px; color: var(--gold); }
.footer h5 { margin-bottom: 20px; font: 500 20px/28.8px var(--body); letter-spacing: -0.54px; text-transform: uppercase; }
.fitem { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 20px; font: 400 16px/28px var(--head); }
.fitem .icon { flex: none; margin-top: 5px; font-size: 18px; color: var(--gold); }
.fitem a:hover { color: var(--gold); }
.footer__bar { display: flex; justify-content: space-between; gap: 20px; margin-top: 49px; padding: 0 0 30px; font: 400 14px/25px var(--body); }
.footer__bar a { color: var(--white); }
@media (max-width: 1024px) {
  .footer { padding-top: 30px; }
  .footer__grid { width: calc(100% - 20px); }        /* still three columns, as on the original */
}
@media (max-width: 767px) {
  .footer__grid { grid-template-columns: 1fr; row-gap: 40px; width: 100%; }
  .footer__grid > div { padding: 0 30px; }
  .fitem { font-size: 14px; line-height: 24.5px; }
  .footer__links a { font-size: 14px; line-height: 22px; }
  .footer h5 { font-size: 16px; line-height: 23.04px; }
  .footer__bar { flex-direction: column; margin-top: 40px; padding-bottom: 40px; font-size: 14px; }
  .footer__bar p:last-child { align-self: center; }
}

/* --- Back to top with scroll-progress ring ------------------------------------------------------------------------------ */

.to-top {
  position: fixed; right: 25px; bottom: 25px; z-index: 900;
  width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%;
  background: var(--white); color: var(--gold); cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  opacity: 0; visibility: hidden; transform: translateX(80px);
  transition: opacity 0.3s, transform 0.4s var(--ease), visibility 0.3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg.ring { position: absolute; inset: 0; width: 50px; height: 50px; transform: rotate(-90deg); }
.to-top circle { fill: none; stroke-width: 2; }
.to-top .track { stroke: rgba(159, 159, 159, 0.3); }
.to-top .bar { stroke: var(--gold); stroke-dasharray: 150.8; stroke-dashoffset: 150.8; }
.to-top .arrow { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* --- Scroll reveal ---------------------------------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 1024px) {
  .header .nav, .header .header__cta { display: none; }
  .burger { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .header, .qa__a, .help__card { transition: none; }
}