/* =====================================================================
   Irish Attestation and Translation Services LLC — main stylesheet
   Breakpoints (same as the original design):
     desktop  >= 1200px
     tablet   810px – 1199.98px
     phone    <= 809.98px
   File layout:
     1. Fonts & design tokens      5. Header / navigation / mega menu
     2. Base & reset               6. Footer
     3. Typography scale           7. Page sections (home)
     4. Layout & shared components 8. Motion preferences
   ===================================================================== */

/* ---------- 1. Fonts & design tokens ---------- */
@font-face { font-family: "Stack Sans Headline"; src: url("../assets/fonts/stack-sans-headline-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Stack Sans Headline"; src: url("../assets/fonts/stack-sans-headline-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Condensed"; src: url("../assets/fonts/libre-caslon-condensed-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Condensed"; src: url("../assets/fonts/libre-caslon-condensed-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
/* metric-matched fallback so text doesn't jump when the web font arrives */
@font-face { font-family: "Stack Sans Fallback"; src: local("Arial"); ascent-override: 95.02%; descent-override: 28.51%; line-gap-override: 0%; size-adjust: 105.24%; }

:root {
  --bg: #f8f9fb;          /* white with a hint of navy */
  --surface: #eef1f6;     /* soft navy-tinted panel */
  --white: #fff;
  --dark: #11213e;         /* Dark Navy (brand) */
  --navy-light: #1d2c48;   /* Light Navy (brand) */
  --muted: #5b6477;
  --accent: #d5b996;       /* Golden (brand): buttons, icons, accents on navy */
  --accent-ink: #8c6d42;   /* deeper gold for gold text/lines on light backgrounds (readable) */
  --accent-soft: rgba(213, 185, 150, .22);
  --line: rgba(17, 33, 62, .1);
  --placeholder: rgba(17, 33, 62, .5);
  --white-70: rgba(255, 255, 255, .7);
  --white-10: rgba(255, 255, 255, .1);
  --ink: var(--dark);      /* body text (light in dark mode) */
  --card: var(--white);    /* card backgrounds (navy in dark mode) */
  --navy-ink: var(--navy-light); /* light-navy text */
  color-scheme: light;

  --sans: "Stack Sans Headline", "Stack Sans Fallback", sans-serif;
  --serif: "Libre Caslon Condensed", serif;
  --ease: cubic-bezier(.44, 0, .56, 1);

  --container: 1260px;
  --gutter: 30px;
  --section-y: 200px;
}
/* dark mode: set on <html data-theme="dark"> by the toggle (first visit follows the device setting) */
:root[data-theme="dark"] {
  --bg: #0a1424;
  --surface: #11213e;      /* Dark Navy */
  --card: #1d2c48;         /* Light Navy */
  --ink: #eef1f6;
  --muted: #a3adc2;
  --navy-light: #2e4370;   /* icon tiles/badges, lifted so they show on navy cards */
  --navy-ink: #b4c3e0;
  --accent-ink: #d5b996;   /* pure gold reads well on navy */
  --accent-soft: rgba(213, 185, 150, .16);
  --line: rgba(255, 255, 255, .1);
  --placeholder: rgba(238, 241, 246, .45);
  color-scheme: dark;
}
/* navy panels get a thin gold edge so they stand out from the navy page */
[data-theme="dark"] :is(.cta__card, .info-card, .rating-card, .ticket__side, .split__media--globe, .plan--featured .plan__bottom, .wa-float) { box-shadow: inset 0 0 0 1px rgba(213, 185, 150, .28); }
/* navy icon images turn light */
[data-theme="dark"] :is(img[src*="icon-arrow-right"], img[src*="chevron-right-green"]) { filter: brightness(0) invert(.93); }
[data-theme="dark"] .footer__contact-row img { filter: brightness(1.5); } /* deeper-gold footer icons, lifted on navy */
@media (max-width: 1199.98px) { :root { --section-y: 100px; } }
@media (max-width: 809.98px) { :root { --gutter: 20px; --section-y: 80px; } }

/* ---------- 2. Base & reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "blwf", "cv03", "cv04", "cv09", "cv11";
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; }
h1, h2, h3, h4, p { text-wrap: balance; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: italic; }
section[id], .exp-card[id] { scroll-margin-top: 110px; }
.page { overflow-x: clip; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. Typography scale (desktop / tablet / phone) ---------- */
.t-display { font: 500 90px/1.2 var(--serif); letter-spacing: -.05em; }
.t-h2      { font: 500 70px/1.3 var(--serif); font-feature-settings: "blwf", "cv03", "cv04", "cv09", "cv11", "liga" 0; }
.t-52      { font: 500 52px/1.2 var(--serif); }
.t-52b     { font: 500 52px/1.2 var(--serif); }
.t-32      { font: 500 32px/1.3 var(--serif); }
.t-28      { font: 500 28px/1.3 var(--serif); }
.t-22s     { font: 500 22px/1.3 var(--serif); }
.t-18s     { font: 500 18px/1.2 var(--serif); }
.p-xl { font-size: 22px; line-height: 1.4; }
.p-lg { font-size: 20px; line-height: 1.4; }
.p-md { font-size: 18px; line-height: 1.4; }
.p-sm { font-size: 14px; line-height: 1.3; }
.p-xs { font-size: 12px; line-height: 1; }
.muted { color: var(--muted); }
@media (max-width: 1199.98px) {
  .t-display { font-size: 66px; }
  .t-h2  { font-size: 44px; }
  .t-52  { font-size: 38px; }
  .t-52b { font-size: 34px; }
  .t-32  { font-size: 28px; }
  .t-28  { font-size: 26px; }
  .p-xl  { font-size: 18px; }
  .p-lg  { font-size: 17px; }
  .p-md  { font-size: 16px; }
}
@media (max-width: 809.98px) {
  .t-display { font-size: 50px; }
  .t-h2  { font-size: 40px; }
  .t-52  { font-size: 28px; }
  .t-52b { font-size: 26px; }
  .t-32  { font-size: 26px; }
  .t-28  { font-size: 24px; }
  .t-22s { font-size: 20px; }
  .p-xl  { font-size: 20px; }
  .p-lg  { font-size: 16px; }
}

/* ---------- 4. Layout & shared components ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section--surface { background: var(--surface); }

/* small label pill above headings */
.tag {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 10px;
  background: var(--surface); font-size: 14px; line-height: 1.3; white-space: nowrap;
}
.tag--light { background: var(--bg); }

/* pill buttons (hover colours/timing measured from the original) */
.btn {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 8px 20px; border-radius: 100px; overflow: hidden; white-space: nowrap;
  font-size: 16px; line-height: 1.4; cursor: pointer;
  transition: background-color .25s ease-in-out, color .25s ease-in-out, translate .25s ease-out, box-shadow .25s ease-out;
}
.btn--accent { background: var(--accent); color: var(--dark); } /* navy text: white on gold is hard to read */
.btn--accent:hover { background: var(--white); color: var(--dark); }
.btn--dark { background: var(--ink); color: var(--card); }
.btn--dark:hover { background: var(--accent); color: var(--dark); }
.btn--soft { background: var(--surface); color: var(--ink); }
.btn--soft:hover { background: var(--ink); color: var(--surface); }
.btn--sm { padding: 10px 16px; font-size: 14px; line-height: 1.3; }
.btn--block { width: 100%; }
.btn--lg { font-size: 18px; }
@media (max-width: 1199.98px) { .btn--lg { font-size: 16px; } }

/* section heading: title left, short description right (stacks on phones) */
.sec-head { display: flex; justify-content: flex-end; align-items: flex-end; gap: 100px; width: 100%; }
.sec-head__title { flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.sec-head__aside { flex: .7 0 0; display: flex; justify-content: flex-end; align-items: flex-end; gap: 20px; }
.sec-head__aside p { flex: 1; }
/* centred heading: label + title */
.center-head { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 760px; margin: 0 auto; text-align: center; }
@media (max-width: 1199.98px) { .sec-head { gap: 40px; } }
@media (max-width: 809.98px) {
  .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sec-head__title { flex: none; width: 100%; gap: 10px; }
  .sec-head__aside { flex: none; width: 70%; justify-content: flex-start; }
  .center-head { gap: 10px; }
}

/* perforated "ticket" edge: a row/column of background-coloured circles */
.perf-row { position: absolute; height: 12px; background: radial-gradient(circle at 9px 6px, var(--bg) 6px, transparent 6.5px) 0 0 / 18px 12px repeat; }
.perf-col { position: absolute; background: radial-gradient(circle at 6px 9px, var(--bg) 6px, transparent 6.5px) 50% 50% / 12px 18px repeat; }

/* ---------- 5. Header / navigation / mega menu ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 9; } /* sticky on every screen size */
.nav { display: flex; justify-content: center; padding: 30px var(--gutter); max-width: var(--container); margin: 0 auto; }
.nav__bar {
  position: relative; flex: 1; display: flex; align-items: center; gap: 30px; padding: 10px;
  background: var(--surface); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line);
}
.nav__left { flex: 1 0 0; display: flex; align-items: center; gap: 10px; }
.nav__right { flex: 1 0 0; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; height: 46px; }
.brand__logo { height: 100%; width: auto; border-radius: 50%; }
.brand__name { font: 500 15px/1.15 var(--serif); color: var(--ink); max-width: 220px; text-wrap: balance; }
.nav__burger {
  width: 36px; height: 36px; flex: none; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  background: var(--accent); border-radius: 10px;
}
.nav__burger span { width: 16px; height: 2px; border-radius: 2px; background: var(--dark); }
/* light/dark switch: moon in light mode, sun in dark mode */
.theme-toggle {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer;
  transition: background-color .2s, color .2s;
}
.theme-toggle:hover { background: var(--accent); color: var(--dark); }
.theme-toggle .i-sun, [data-theme="dark"] .theme-toggle .i-moon { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }

.nav__links { display: flex; align-items: center; gap: 28px; flex: none; }
@media (min-width: 1200px) and (max-width: 1299.98px) { .nav__links { gap: 20px; } .nav__bar { gap: 20px; } } /* keeps the company name on 2 lines */
.nav__links, .brand__name { font-feature-settings: normal; }
.has-mega { display: flex; align-items: center; }
.nav__links > a, .mega-link, .mega-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 0;
  font-size: 16px; line-height: normal; color: var(--ink); cursor: pointer;
}
.nav__links > a:hover, .mega-link:hover, .mega-toggle:hover, .has-mega.is-open .mega-toggle, .nav__links > a[aria-current="page"], .mega-link[aria-current], .mega-link[aria-current] + .mega-toggle { color: var(--accent-ink); }
.mega-toggle { padding-left: 6px; } /* chevron only: "Services" itself links to services.html */
.mega-toggle svg { transition: transform .2s; }
.has-mega.is-open .mega-toggle svg { transform: rotate(180deg); }

/* services mega menu: one card per category */
.mega {
  display: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 20;
  padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 24px 48px rgba(17, 33, 62, .14);
  counter-reset: mega-cat;
}
.has-mega.is-open .mega { display: grid; }
.mega__col { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 16px 14px; }
.mega__col--wide { grid-column: span 2; }
.mega__col--wide ul { columns: 2; column-gap: 20px; column-rule: 1px solid var(--line); }
.mega__title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0 8px 14px;
  border-bottom: 1px solid var(--line); font: 500 22px/1.1 var(--serif); color: var(--ink); text-wrap: wrap;
}
.mega__title::before {
  counter-increment: mega-cat; content: counter(mega-cat, decimal-leading-zero);
  font: 12px/1 var(--sans); color: var(--accent-ink); background: var(--accent-soft); border-radius: 100px; padding: 5px 8px;
}
.mega li { break-inside: avoid; }
.mega li a {
  position: relative; display: block; padding: 7px 8px; border-radius: 8px; font-size: 14px;
  color: var(--muted); transition: color .15s, background-color .15s;
}
.mega li a::after {
  content: "→"; position: absolute; right: 8px; top: 50%; translate: -4px -50%;
  color: var(--accent-ink); opacity: 0; transition: opacity .15s, translate .15s;
}
.mega li a:hover { color: var(--accent-ink); background: var(--surface); }
.mega li a:hover::after { opacity: 1; translate: 0 -50%; }
/* small dropdown (About Us > Our Team): sits under its own link instead of spanning the bar */
.has-mega--small { position: relative; }
.mega--small { left: -12px; right: auto; width: 240px; grid-template-columns: 1fr; }
.mega--small .mega__col { padding: 10px 8px; }
.mega li a[aria-current] { color: var(--accent-ink); }

@media (min-width: 1200px) {
  /* stays open .3s after the cursor leaves, so a diagonal move to any column doesn't close it */
  .mega { display: grid; visibility: hidden; transition: visibility 0s .3s; }
  .has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.is-open .mega { visibility: visible; transition-delay: 0s; }
  /* invisible bridge over the gap between the Services link and the panel */
  .mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 25px; }
}
@media (max-width: 1199.98px) { /* burger menu until the full link row fits beside the 2-line company name */
  .nav__left { flex: 1 1 auto; min-width: 0; }
  .nav__right { flex: none; }
  .nav__burger { display: flex; }
  .nav__links {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 20;
    flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px;
    max-height: calc(100vh - 120px); overflow-y: auto;
    background: var(--bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 40px rgba(17, 33, 62, .12);
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__links > a, .has-mega { width: 100%; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .has-mega { flex-wrap: wrap; padding: 0; }
  .mega-link { flex: 1; padding: 14px 0; }
  .mega-toggle { padding: 14px 4px 14px 20px; }
  .mega { width: 100%; }
  .has-mega--small { position: static; }
  .mega--small { grid-template-columns: 1fr; width: 100%; }
  .mega { position: static; box-shadow: none; border: 0; border-radius: 14px; padding: 10px; margin: 10px 0 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mega__col--wide { grid-column: auto; }
  .mega__col--wide ul { columns: 1; }
  .mega__col { padding: 16px 12px 10px; }
  .mega__title { font-size: 19px; padding-bottom: 12px; }
}
@media (max-width: 809.98px) {
  .nav { padding: 20px var(--gutter); }
  .nav__bar { padding: 10px; }
}
@media (max-width: 520px) {
  .mega, .mega--small { grid-template-columns: 1fr; }
  .brand { height: 38px; }
  .brand__name { font-size: 13px; max-width: 170px; }
  .nav__cta { display: none; } /* "Free consultation" pill; Contact is in the menu */
  .nav__bar { gap: 10px; } .nav__right { gap: 6px; } /* room for the theme switch so the name stays on 2 lines */
  .theme-toggle, .nav__burger { width: 32px; height: 32px; }
}
@media (max-width: 359.98px) { .brand { gap: 6px; } .brand__name { font-size: 12px; } } /* smallest phones */

/* progressive blur behind the fixed header, so content scrolling under it stays readable */
  .top-blur { display: block; position: fixed; top: 0; left: 0; right: 0; height: 130px; z-index: 8; pointer-events: none; }
  .top-blur i { position: absolute; inset: 0; }
  .top-blur i:nth-child(1) { z-index: 1; backdrop-filter: blur(.078125px); -webkit-backdrop-filter: blur(.078125px); -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); mask-image: linear-gradient(to top, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); }
  .top-blur i:nth-child(2) { z-index: 2; backdrop-filter: blur(.15625px); -webkit-backdrop-filter: blur(.15625px); -webkit-mask-image: linear-gradient(to top, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); mask-image: linear-gradient(to top, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); }
  .top-blur i:nth-child(3) { z-index: 3; backdrop-filter: blur(.3125px); -webkit-backdrop-filter: blur(.3125px); -webkit-mask-image: linear-gradient(to top, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); mask-image: linear-gradient(to top, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); }
  .top-blur i:nth-child(4) { z-index: 4; backdrop-filter: blur(.625px); -webkit-backdrop-filter: blur(.625px); -webkit-mask-image: linear-gradient(to top, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); mask-image: linear-gradient(to top, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); }
  .top-blur i:nth-child(5) { z-index: 5; backdrop-filter: blur(1.25px); -webkit-backdrop-filter: blur(1.25px); -webkit-mask-image: linear-gradient(to top, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); mask-image: linear-gradient(to top, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); }
  .top-blur i:nth-child(6) { z-index: 6; backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); -webkit-mask-image: linear-gradient(to top, transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); mask-image: linear-gradient(to top, transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); }
  .top-blur i:nth-child(7) { z-index: 7; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(to top, transparent 75%, #000 87.5%, #000 100%); mask-image: linear-gradient(to top, transparent 75%, #000 87.5%, #000 100%); }
  .top-blur i:nth-child(8) { z-index: 8; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(to top, transparent 87.5%, #000 100%); mask-image: linear-gradient(to top, transparent 87.5%, #000 100%); }
@media (max-width: 1199.98px) { .top-blur { height: 120px; } }
@media (max-width: 809.98px) { .top-blur { height: 90px; } }

/* ---------- 6. Footer ---------- */
.footer { padding: 0 0 104px; } /* room under the footer bar for the floating WhatsApp button (24px offset + 56px + 24px gap) */
.footer__inner { display: flex; flex-direction: column; gap: 50px; }
.footer__top { display: flex; justify-content: center; align-items: flex-start; gap: 60px 30px; }
.footer__about { flex: 1.2 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.footer__col--company { flex: 1.1 0 0; }
.footer__col--types { flex: 1 0 0; }
.footer .brand { height: 56px; }
.footer .brand__name { font-size: 24px; max-width: 320px; }
.footer__contact { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.footer__contact-row { display: flex; align-items: flex-start; gap: 12px; }
.footer__contact-row img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.footer__contact-row p { flex: 1; color: var(--ink); text-wrap: wrap; }
.footer__contact-row a { color: var(--muted); }
.footer__links { display: flex; align-items: flex-start; gap: 40px; width: 100%; }
.footer__links ul { flex: 1 0 0; display: flex; flex-direction: column; gap: 14px; }
.footer__links a { color: var(--muted); }
.footer__types { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.footer__types > a { display: block; padding: 0 0 10px; color: var(--muted); box-shadow: inset 0 -1px 0 var(--line); transition: color .12s ease-in-out; }
.footer__types > a:hover { color: var(--accent-ink); }
.link-arrow { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 20px 0 0; color: var(--ink); white-space: nowrap; transition: color .12s ease-in-out; }
.link-arrow img { position: absolute; right: 0; top: calc(50% + 2px); width: 14px; height: 14px; translate: 0 -50%; transition: transform .12s ease-out; }
.link-arrow:hover { color: var(--accent-ink); }
.link-arrow:hover img { transform: translateX(4px); }
.footer__bar { display: flex; align-items: center; gap: 80px; padding: 20px; background: var(--surface); border-radius: 20px; overflow: hidden; }
.footer__bar p { flex: 1.5 0 0; color: var(--muted); }
.footer__legal { max-width: 900px; font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: wrap; }

/* floating WhatsApp chat button (every page): dark pill like the site buttons, green icon with pulsing rings.
   Slides in after load, icon nudges every 6s, turns orange on hover; label hides on phones. */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 30;
  display: flex; align-items: center; gap: 12px; padding: 6px 22px 6px 6px;
  background: var(--dark); color: var(--white); border-radius: 100px; box-shadow: 0 14px 34px rgba(17, 33, 62, .3);
  font-size: 15px; line-height: 1.2; white-space: nowrap;
  transition: background-color .25s ease-in-out, transform .25s ease;
  animation: wa-in .7s cubic-bezier(.22, 1, .36, 1) .8s both;
}
.wa-float:hover { background: var(--accent); color: var(--dark); transform: translateY(-3px); }
.wa-float:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.wa-float__icon {
  position: relative; isolation: isolate; width: 44px; height: 44px; flex: none;
  display: flex; justify-content: center; align-items: center; border-radius: 50%; background: #25d366;
}
.wa-float__icon svg { width: 24px; height: 24px; animation: wa-nudge 6s ease-in-out 2s infinite; }
.wa-float__icon::before, .wa-float__icon::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #25d366;
  animation: pulse 2s ease-in-out infinite;  /* same rings as the home-page circle */
}
.wa-float__icon::after { animation-delay: 1s; }
.wa-float__label small { display: block; font-size: 12px; color: var(--white-70); }
@keyframes wa-in { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes wa-nudge { 0%, 84%, 100% { transform: rotate(0); } 87% { transform: rotate(-14deg); } 90% { transform: rotate(12deg); } 93% { transform: rotate(-8deg); } 96% { transform: rotate(4deg); } }
@media (max-width: 809.98px) {
  .wa-float { right: 16px; bottom: 16px; padding: 5px; }
  .wa-float__label { display: none; }
}
.footer__social { flex: 1 0 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.footer__social a {
  width: 32px; height: 32px; display: flex; justify-content: center; align-items: center;
  background: var(--white); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--white-10);
  transition: background-color .17s ease-in-out;
}
.footer__social a:hover { background: var(--accent); }
.footer__social img { width: 16px; height: 16px; object-fit: contain; }
@media (max-width: 809.98px) {
  .footer__top { flex-direction: column; gap: 50px 30px; }
  .footer__about, .footer__col { flex: none; width: 100%; gap: 20px; }
  .footer .brand { height: 34px; }
  .footer__links { gap: 30px; }
  .footer__links ul { gap: 10px; }
  .footer { padding-bottom: 86px; } /* phone button: 16px offset + 54px + 16px gap */
  .footer__bar { flex-direction: column; justify-content: center; gap: 30px; padding: 30px; }
  .footer__bar p { flex: none; order: 1; width: 100%; text-align: center; }
  .footer__social { flex: none; order: 0; justify-content: center; width: 100%; }
}

/* ---------- 7. Page sections ---------- */

/* ===== Inner-page heading (top of about / services / contact pages; clears the header like the hero) ===== */
.page-head { padding: 206px 0 var(--section-y); }
@media (max-width: 1199.98px) { .page-head { padding-top: 117px; } }
@media (max-width: 809.98px) { .page-head { padding-top: 116px; } }
:where(.page-head > .container) { display: flex; flex-direction: column; gap: 50px; }
.section--flush { padding-top: 0; } /* section following one of the same colour */
[hidden] + .section--flush { padding-top: var(--section-y); } /* keep spacing when the section before it is hidden */
@media (max-width: 1199.98px) { :where(.page-head > .container) { gap: 40px; } }
@media (max-width: 809.98px) { :where(.page-head > .container) { gap: 30px; } }

/* breadcrumb above an inner-page heading */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; line-height: 1.3; color: var(--muted); }
.crumbs li { display: flex; gap: 8px; }
.crumbs li + li::before { content: "/"; opacity: .5; }
.crumbs a { transition: color .12s ease-in-out; }
.crumbs a:hover { color: var(--accent-ink); }

/* ===== Split: photo on one side, text (or a card) on the other ===== */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px; align-items: center; }
.split__media { position: relative; align-self: stretch; min-height: 380px; border-radius: 30px; overflow: hidden; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.split__text .plan__features { padding-top: 10px; }
.split__text .plan__features li { white-space: normal; }
.split > .route__card, .split > .plan { align-self: stretch; }
.split > .plan .plan__top { flex: 1; }
@media (max-width: 1199.98px) { .split { gap: 40px; } }
@media (max-width: 809.98px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .split__media { min-height: 260px; }
  .split--flip .split__media { order: -1; } /* photo first on phones */
}

/* ===== Feature cards: icon + title + text (values, eligibility) ===== */
.features { display: flex; flex-direction: column; align-items: center; gap: 50px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; width: 100%; }
.feature { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding: 30px; background: var(--card); border-radius: 30px; }
.feature__icon { width: 50px; height: 50px; flex: none; display: flex; justify-content: center; align-items: center; background: var(--accent); border-radius: 10px; }
.feature:nth-child(even) .feature__icon { background: var(--navy-light); }
.feature__icon img { height: 26px; width: auto; }
.feature__text { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 1200px) { .feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1199.98px) {
  .features { gap: 40px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .features { gap: 30px; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .feature { gap: 30px; padding: 20px; }
}

/* ===== Office map (contact page): Google Maps embed with an address card on top ===== */
.map-card { position: relative; width: 100%; height: 520px; background: var(--surface); border-radius: 30px; overflow: hidden; }
.map-card iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: inherit; }
.map-card__info {
  position: absolute; left: 30px; bottom: 30px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  max-width: 360px; padding: 30px; background: var(--card); border-radius: 20px; box-shadow: 0 20px 40px rgba(17, 33, 62, .14);
}
.map-card__info .btn { margin-top: 10px; }
@media (max-width: 809.98px) {
  .map-card { height: auto; background: var(--card); }
  .map-card iframe { height: 320px; border-radius: 30px 30px 0 0; }
  .map-card__info { position: static; max-width: none; padding: 20px; box-shadow: none; }
}

.plan__features a { color: inherit; transition: color .15s; }
.plan__features a:hover { color: var(--accent-ink); }
.svc-card[id] { scroll-margin-top: 110px; } /* services.html#category links from the detail pages */

/* ===== Hero ===== */
.hero { padding: 206px 0 200px; }
.hero__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 70px; }
.hero__left { grid-column: span 4; display: flex; flex-direction: column; justify-content: space-between; }
.hero__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hero__heading .tag { padding: 6px 12px; white-space: normal; } /* long company name wraps on phones */
.hero__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: 20px; }
.hero__clients { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; padding-top: 50px; }
.hero__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__tags .tag { transition: background-color .2s, color .2s; }
.hero__tags .tag:hover { background: var(--ink); color: var(--bg); }

.hero__card { grid-column: span 3; display: flex; flex-direction: column; overflow: hidden; }
/* hero with background video (home page) */
.hero--video { position: relative; isolation: isolate; }
.hero--video .hero__left { color: var(--white); text-shadow: 0 1px 14px rgba(0, 0, 0, .3); } /* the white card on the right keeps its dark text */
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--dark) url("../assets/images/hero-video-poster.webp") center / cover no-repeat; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
/* navy overlay over the whole video, deeper on the left (text) side and the top (header) */
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(17, 33, 62, .5) 0%, rgba(17, 33, 62, .3) 45%, rgba(17, 33, 62, 0) 100%),
              linear-gradient(to bottom, rgba(17, 33, 62, .35) 0%, rgba(17, 33, 62, 0) 22%), rgba(17, 33, 62, .45);
}
.hero--video .hero__left .muted { color: rgba(255, 255, 255, .85); }
.hero--video .hero__left .tag, .hero--video .btn--soft {
  background: rgba(255, 255, 255, .14); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero--video .hero__tags .tag:hover, .hero--video .btn--soft:hover { background: var(--white); color: var(--dark); }
@media (max-width: 1199.98px) { .hero__bg::after { background: rgba(17, 33, 62, .62); } } /* text spans the full width */

/* header over the hero video: transparent glass with white text; normal style again once you scroll past */
.nav__bar { transition: background-color .3s, box-shadow .3s; }
.brand__name, .nav__links > a, .mega-link, .mega-toggle { transition: color .3s; }
.top-blur { transition: opacity .3s; }
.on-hero .top-blur { opacity: 0; }
.on-hero .nav__bar {
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.on-hero .brand__name { color: var(--white); }
.on-hero .theme-toggle:not(:hover) { background: rgba(255, 255, 255, .12); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
@media (min-width: 1200px) {
  .on-hero .nav__links > a, .on-hero .mega-link, .on-hero .mega-toggle { color: var(--white); }
  .on-hero .nav__links > a:hover, .on-hero .mega-link:hover, .on-hero .mega-toggle:hover, .on-hero .has-mega.is-open .mega-toggle,
  .on-hero .nav__links > a[aria-current="page"], .on-hero .mega-link[aria-current] { color: var(--accent); }
}
.hero__card-top { position: relative; display: flex; }
.hero__panel { position: relative; flex: 1; display: flex; border-radius: 24px 24px 0 0; overflow: hidden; }
.hero__panel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero__panel-content {
  position: relative; z-index: 1; flex: 1; display: flex; align-items: flex-end; gap: 50px; padding: 40px;
  background: linear-gradient(to top right, rgba(17, 33, 62, .82) 0%, rgba(17, 33, 62, .55) 45%, rgba(17, 33, 62, .1) 85%); /* shade behind the text (bottom-left) only, so the bright photo shows */
}
.hero__stat { flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: var(--white); text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.hero__stat p { color: var(--white-70); }
.hero__badge-wrap { flex: 1 0 0; display: flex; justify-content: flex-end; align-items: flex-end; }
.pill-badge { display: flex; justify-content: center; align-items: flex-end; gap: 4px; padding: 6px 10px; border-radius: 10px; background: var(--surface); font-size: 14px; line-height: 1.3; white-space: nowrap; }
.pill-badge img { width: 12px; height: 18px; object-fit: contain; }
.notch { position: absolute; bottom: -17px; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); z-index: 1; }
.notch--left { left: -17px; }
.notch--right { right: -17px; }
.hero__card-top .perf-row { left: 0; right: 0; bottom: -6px; z-index: 1; }

.hero__card-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 30px 40px 0; background: var(--card); border-radius: 0 0 30px 30px; overflow: hidden; }
.ticker { position: relative; width: 100%; height: 350px; overflow: hidden; }
.ticker__list { display: flex; flex-direction: column; gap: 10px; animation: ticker 18s linear infinite; }
.ticker:hover .ticker__list { animation-play-state: paused; }
@keyframes ticker { to { transform: translateY(calc(-50% - 5px)); } }
.case { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 10px; box-shadow: inset 0 -1px 0 var(--line); }
.case__avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex: none; }
.case__avatar--icon { padding: 13px; object-fit: contain; }
/* hero ticker: one brand colour per item, white icon (5n keeps both copies of the loop in sync) */
.case:nth-child(5n+1) .case__avatar--icon, .case:nth-child(5n+4) .case__avatar--icon { background: var(--accent); }
.case:nth-child(5n+2) .case__avatar--icon, .case:nth-child(5n+5) .case__avatar--icon { background: var(--navy-light); }
.case:nth-child(5n+3) .case__avatar--icon { background: var(--dark); }
.case__body { flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.case__text { display: flex; flex-direction: column; gap: 4px; width: 211px; max-width: 100%; }
.case__text p { text-wrap: wrap; }
.case__badge { display: flex; align-items: center; gap: 2px; padding: 6px 10px; border-radius: 100px; background: var(--navy-light); color: var(--white); font-size: 12px; line-height: 1; white-space: nowrap; }
.case__badge img { width: 12px; height: 12px; border-radius: 50%; }
.ticker__fade { position: absolute; left: 0; right: 0; pointer-events: none; }
.ticker__fade--top { top: 0; bottom: -100px; background: linear-gradient(var(--card) 2%, color-mix(in srgb, var(--card) 70%, transparent) 7%, transparent 11%); }
.ticker__fade--bottom { top: -100px; bottom: -10px; background: linear-gradient(transparent 81%, color-mix(in srgb, var(--card) 70%, transparent) 89%, color-mix(in srgb, var(--card) 75%, transparent) 90.732%, var(--card) 94%); }

@media (max-width: 1199.98px) {
  .hero { padding: 117px 0 100px; }
  .hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .hero__left, .hero__card { grid-column: auto; }
  .hero__buttons { align-items: flex-start; }
  .hero__panel-content { gap: 20px; padding: 20px; }
}
@media (max-width: 809.98px) {
  .hero { padding: 116px 0 80px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 50px 30px; }
  .hero__buttons { gap: 10px; }
  .hero__clients { gap: 16px; padding-top: 30px; }
  .hero__panel-content { gap: 10px; }
  .hero__card-bottom { padding: 20px 20px 0; }
}

/* ===== Guidance ("the problem we solve") ===== */
.guidance { padding: 0 0 var(--section-y); }
.guidance__content { display: flex; flex-direction: column; align-items: center; gap: 100px; }
.guidance__top { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 760px; }
.guidance__heading { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.guidance__blur, .guidance__trigger, .guidance__space { display: none; }
.guidance__center { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; width: 100%; }
.guidance__pulse { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 200px; }
.g-circle { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--dark); border-radius: 100px; }
.g-circle__value {
  display: flex; justify-content: center; align-items: center; width: 152px; height: 152px; padding-bottom: 50px;
  background: var(--dark); border-radius: 100px; color: var(--white);
}
.g-circle__num { text-align: right; white-space: pre; }
.g-circle__label { position: absolute; left: 34px; right: 34px; bottom: 20px; z-index: 1; color: var(--white-70); text-align: center; font-size: 14px; line-height: 1.3; text-wrap: wrap; }
.g-rings { position: absolute; z-index: 0; width: 190px; height: 190px; top: calc(50% - 95px); left: calc(50% - 95px); }
.g-rings span { position: absolute; inset: 0; border-radius: 10000px; background: var(--dark); }
/* pulsing rings: grow 30px and fade .5 -> 0 over 1.6s, two rings .8s apart (measured from the original) */
.g-rings span:nth-child(-n+2) { animation: pulse 1.6s ease-in-out infinite; }
.g-rings span:nth-child(2) { animation-delay: .8s; }
@keyframes pulse { from { transform: scale(1); opacity: .5; } to { transform: scale(1.316); opacity: 0; } }

.guidance__cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(50px, 1fr)); gap: 20px; width: 100%; max-width: 740px; }
.g-card {
  display: flex; justify-content: center; align-items: center; gap: 30px; width: 100%; min-height: 92px; padding: 20px;
  background: var(--surface); border-radius: 24px; overflow: hidden;
}
.g-card__main { flex: 1 0 0; display: flex; align-items: center; gap: 16px; }
.g-card__icon { width: 50px; height: 50px; flex: none; display: flex; justify-content: center; align-items: center; background: var(--accent); border-radius: 10px; }
.g-card:nth-child(even) .g-card__icon { background: var(--navy-light); }
.g-card__icon img { height: 26px; width: auto; }
.g-card__main p { flex: 1 0 0; }

.guidance__bottom {
  position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 30px;
  width: 100%; max-width: 620px; padding: 30px; background: var(--card); border-radius: 30px; overflow: hidden;
}
.guidance__bottom h3 { flex: 1 0 0; }

@media (min-width: 1200px) {
  /* desktop: heading pins, circle + cards pin over it and the six cards grow in one by one while scrolling */
  .guidance .container { max-width: 1320px; }
  .guidance__top { position: sticky; top: 0; min-height: 100vh; gap: 20px; }
  .guidance__blur {
    display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .4s ease;
  }
  .guidance__trigger { display: block; width: 100%; height: 150px; flex: none; }
  .guidance__space { display: block; width: 100%; height: 900px; flex: none; }
  .guidance__center { position: sticky; top: 50px; min-height: 100vh; }
  .guidance__pulse { width: calc(100% + 100px); height: auto; padding: 280px 50px; flex: none; }
  .g-circle__value { height: 202px; }
  .guidance__cards { position: absolute; inset: 0; display: block; max-width: none; }
  .g-card { position: absolute; z-index: 1; width: 400px; height: 132px; }
  .g-card:nth-child(1) { top: 220px; left: 104px; }
  .g-card:nth-child(2) { top: 214px; right: 114px; }
  .g-card:nth-child(3) { top: 407px; left: -10px; }
  .g-card:nth-child(4) { top: 414px; right: 10px; }
  .g-card:nth-child(5) { top: 590px; left: 120px; }
  .g-card:nth-child(6) { top: 590px; right: 80px; }
  .guidance__bottom { max-width: 680px; }
}
@media (max-width: 1199.98px) {
  .guidance__content { gap: 40px; }
  .guidance__center { gap: 40px; }
}
@media (max-width: 809.98px) {
  .guidance__content { gap: 30px; }
  .guidance__center { gap: 30px; }
  .guidance__cards { display: flex; flex-direction: column; gap: 16px; max-width: 400px; }
  .g-card { flex: none; width: 360px; max-width: calc(100vw - 20px); } /* as designed: 10px wider than the column */
  .guidance__bottom { flex-direction: column; gap: 10px; padding: 20px; }
}

/* ===== Services (visa category cards) ===== */
.services__inner { display: flex; flex-direction: column; align-items: center; gap: 50px; }
.services__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; width: 100%; }
.svc-card { display: flex; flex-direction: column; background: var(--card); border-radius: 30px; overflow: hidden; cursor: pointer; }
.svc-card__media { border-radius: 30px; overflow: hidden; aspect-ratio: 1.76305; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform .25s ease-in-out; }
.svc-card:hover .svc-card__media img { transform: scale(1.08); }
.svc-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.svc-card__btn { align-self: flex-start; margin-top: 10px; }
.svc-card:hover .svc-card__btn { background: var(--accent); color: var(--dark); }
.services { padding-top: var(--section-y); } /* follows the "Who we are" band */
.exp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; width: 100%; }
.exp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 30px; background: var(--card); border-radius: 30px; box-shadow: inset 0 0 0 1px var(--line); transition: transform .2s ease-out, box-shadow .2s ease-out; }
.exp-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.exp-card__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-ink); }
.exp-card__icon svg { width: 28px; height: 28px; }
.exp-card p { flex: 1; }
.exp-card:hover .link-arrow { color: var(--accent-ink); }
.exp-card:hover .link-arrow img { transform: translateX(4px); }
@media (max-width: 1199.98px) { .exp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 809.98px) { .exp-grid { grid-template-columns: minmax(0, 1fr); } .exp-card { padding: 24px; } }
@media (prefers-reduced-motion: reduce) { .exp-card, .exp-card:hover { transform: none; transition: none; } }
.split__media--globe { display: grid; place-items: center; padding: 30px; background: var(--dark); }
[data-theme="dark"] .split__media--globe { background: radial-gradient(circle at 50% 50%, #263a63 0%, #172a4d 45%, #0a1424 100%); } /* stands apart from the navy section */
.split__media--globe img, .split__media--globe canvas { position: static; width: 100%; max-width: 480px; height: auto; aspect-ratio: 1; }
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; padding-top: 10px; list-style: none; }
.why-item { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--card); border-radius: 20px; }
.why-item .exp-card__icon { flex: none; width: 48px; height: 48px; margin: 0; border-radius: 14px; }
.why-item .exp-card__icon svg { width: 24px; height: 24px; }
@media (max-width: 520px) { .why-grid { grid-template-columns: minmax(0, 1fr); } }
.exp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.exp-card--static:hover { transform: none; box-shadow: inset 0 0 0 1px var(--line); }
.exp-card:target, .exp-card:target:hover { box-shadow: inset 0 0 0 2px var(--accent-ink); } /* card opened from the About menu */
.values-list { display: flex; flex-direction: column; gap: 10px; }
.values-list li { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.values-list__icon { flex: none; color: var(--accent-ink); }
@media (max-width: 1199.98px) { .exp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 809.98px) { .exp-grid--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1199.98px) { .services__inner { gap: 40px; } }
@media (max-width: 809.98px) {
  .services__inner { gap: 30px; }
  .services__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ===== About (ticket) ===== */
.about__inner { display: flex; flex-direction: column; align-items: center; gap: 50px; }
.ticket { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.ticket__main { grid-column: span 2; position: relative; display: flex; flex-direction: column; justify-content: space-between; background: var(--card); border-radius: 30px 0 0 30px; overflow: hidden; }
.ticket__head { display: flex; justify-content: space-between; align-items: center; padding: 30px 40px; background: var(--surface); border-radius: 30px 0 0; }
.ticket__head > * { flex: 1 0 0; }
.ticket__head p { text-align: right; }
.ticket__route { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 60px 40px; }
.ticket__from, .ticket__to { flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ticket__from .t-52b, .ticket__to .t-52b { text-transform: uppercase; }
.ticket__to { justify-content: flex-end; }
.ticket__to p { width: 100%; text-align: right; }
.ticket__via { flex: 1.5 0 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; }
.ticket__via p { width: 100%; text-align: center; }
.ticket__plane { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; padding-bottom: 10px; }
.ticket__line { position: absolute; left: 0; right: 0; top: 28.53px; height: 1px; z-index: 1; background: linear-gradient(90deg, rgba(17, 33, 62, 0) 0%, rgba(17, 33, 62, .1) 15%, rgba(17, 33, 62, .1) 85%, rgba(17, 33, 62, 0) 100%); }
.ticket__plane-icon { position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50px; background: var(--navy-light); }
.ticket__plane-icon img { width: 24px; height: 20px; }
.ticket__stats { display: flex; align-items: center; box-shadow: inset 0 1px 0 var(--line); }
.ticket__stat { flex: 1 0 0; display: flex; flex-direction: column; gap: 10px; padding: 30px; box-shadow: inset -1px 0 0 var(--line); }
.ticket__main > .perf-col { top: -2px; bottom: -2px; left: calc(100% - 6px); width: 12px; z-index: 0; }

.ticket__side { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; background: var(--dark); border-radius: 0 30px 30px 0; color: var(--white); }
.ticket__side-top { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.ticket__side-title { width: 100%; padding: 30px 40px; background: var(--white-10); }
.ticket__list { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; padding: 40px 36px 0; }
.ticket__list li { display: flex; align-items: flex-start; gap: 6px; color: var(--white-70); }
.ticket__list li img { width: 24px; height: 24px; padding: 4px; object-fit: contain; flex: none; }
.ticket__list li span { flex: 1; text-wrap: wrap; }
.ticket__cta { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 30px 36px 40px; }
.ticket__cta p { width: 100%; opacity: .5; }
.ticket__side > .perf-col { top: -4px; bottom: -4px; left: -6px; width: 12px; z-index: 2; }

.about__points { display: flex; align-items: flex-start; gap: 60px; width: 100%; }
.about__point { flex: 1 0 0; display: flex; flex-direction: column; gap: 10px; }
.about__point:first-child { box-shadow: inset -1px 0 0 var(--line); }

@media (max-width: 1199.98px) {
  .about__inner { gap: 0; }
  .about .sec-head { max-width: 750px; }
  .ticket { grid-template-columns: minmax(0, 1fr); max-width: 750px; margin-top: 42px; }
  .ticket__main { grid-column: auto; border-radius: 30px 30px 0 0; }
  .ticket__head, .ticket__route { padding: 30px; }
  .ticket__stat { padding: 30px; }
  .ticket__main > .perf-col { top: auto; bottom: -4px; left: -6px; right: -6px; width: auto; height: 11px; }
  .ticket__side { gap: 40px; justify-content: flex-start; border-radius: 0 0 30px 30px; }
  .ticket__side-top { gap: 0; }
  .ticket__side-title { padding: 30px; }
  .ticket__list { padding: 30px 30px 0; }
  .ticket__cta { align-items: flex-start; padding: 0 30px 30px; }
  .ticket__side > .perf-col { top: -6px; bottom: auto; left: -6px; right: -6px; width: auto; height: 12px; }
  .about__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; max-width: 750px; margin-top: 53px; }
  .about__point:last-child { grid-column: span 2; }
}
@media (max-width: 809.98px) {
  .about__inner { gap: 30px; }
  .about .sec-head { max-width: none; }
  .ticket { max-width: none; margin-top: 0; }
  .ticket__head { padding: 20px; }
  .ticket__route { flex-direction: column; padding: 30px 10px; }
  .ticket__from, .ticket__to, .ticket__via { flex: none; width: 100%; }
  .ticket__from { align-items: center; }
  .ticket__from p { width: 100%; }
  .ticket__via { align-items: center; gap: 2px; }
  .ticket__plane { padding-bottom: 0; }
  .ticket__line { left: 65px; right: 65px; top: 14.5px; }
  .ticket__plane-icon { width: 30px; height: 30px; }
  .ticket__plane-icon img { width: 15px; height: 12px; }
  .ticket__stats { flex-direction: column; justify-content: center; gap: 20px; padding: 30px 0; max-width: 550px; align-self: center; width: 100%; }
  .ticket__stat { width: 100%; }
  .ticket__main > .perf-col { top: -2px; bottom: -2px; left: calc(100% - 6px); right: auto; width: 12px; height: auto; }
  .ticket__side { gap: 20px; }
  .ticket__side-title { padding: 20px; }
  .ticket__list { gap: 10px; padding: 20px 20px 0; }
  .ticket__cta { align-items: center; padding: 0 20px 20px; }
  .ticket__side > .perf-col { top: -4px; bottom: -4px; left: -6px; right: auto; width: 12px; height: auto; }
  .about__points { grid-template-columns: minmax(0, 1fr); gap: 20px 30px; margin-top: 0; }
  .about__point:last-child { grid-column: auto; }
}

/* ===== Steps ("How it works") ===== */
.steps__inner { display: flex; flex-direction: column; align-items: center; gap: 50px; }
.steps__body { display: flex; flex-direction: column; gap: 30px; width: 100%; }
.steps__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.step { position: relative; display: flex; }
.step__card { flex: 1; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 40px; background: var(--card); border-radius: 30px; overflow: hidden; }
.step__top { display: flex; flex-direction: column; gap: 30px; width: 100%; padding-bottom: 40px; }
.step__num { color: var(--accent-ink); }
.step--green .step__num { color: var(--navy-ink); }
.step__title { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.step__time { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--surface); font-size: 14px; line-height: 1.3; white-space: pre; }
.step__arrow {
  position: absolute; z-index: 2; top: 50%; left: -33px; translate: 0 -50%;
  display: flex; justify-content: center; align-items: center; width: 56px; height: 56px; border-radius: 100px; background: var(--surface);
}
.step__arrow span { display: flex; justify-content: center; align-items: center; width: 42px; height: 42px; border-radius: 100px; background: var(--dark); }
.step__arrow img { width: 10px; height: 16px; }
.note-box { display: flex; justify-content: center; width: 100%; }
.note-box p { flex: 1 0 0; max-width: 540px; padding: 16px; background: var(--bg); border-radius: 20px; text-align: center; color: var(--muted); }
.note-box a { color: var(--ink); text-decoration: underline; }
@media (max-width: 1199.98px) {
  .steps__inner { gap: 40px; }
  .steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .steps__inner { gap: 30px; }
  .steps__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Client reviews slider: 3 cards per view (2 tablet, 1 phone); the row glides one card and loops ===== */
.rslider { --autoplay: 6s; --per: 3; --gap: 30px; display: flex; flex-direction: column; gap: 40px; width: 100%; }
.rslider__track { display: flex; flex-wrap: wrap; gap: var(--gap); touch-action: pan-y; }
.rslider.is-ready .rslider__track { flex-wrap: nowrap; overflow: hidden; padding: 12px 0 34px; margin: -12px 0 -34px; } /* room for the hover lift and shadow */
.review { position: relative; flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); display: flex; flex-direction: column; gap: 20px; padding: 40px 34px 30px; background: var(--card); border-radius: 30px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; translate: var(--shift, 0) 0; }
.rslider.is-sliding .review { transition: translate .8s var(--out, ease); }
.review::before { content: "\201C"; position: absolute; top: -6px; right: 26px; font: 500 150px/1 var(--serif); color: var(--accent-soft); pointer-events: none; transition: translate .5s var(--out, ease), color .3s; }
.review__stars { position: relative; color: var(--accent-ink); font-size: 20px; letter-spacing: 3px; line-height: 1; }
.review__text { position: relative; flex: 1; display: flex; flex-direction: column; gap: 12px; color: var(--ink); font-size: 16px; line-height: 1.6; }
.review__text p { text-wrap: wrap; }
.review__author { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.review__avatar { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--dark); color: var(--accent); font: 500 22px/1 var(--serif); transition: scale .4s var(--out, ease); }
.rslider__nav { display: flex; justify-content: center; align-items: center; gap: 20px; }
.rslider__btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s ease, scale .2s ease; }
.rslider__btn:hover { background: var(--accent); }
.rslider__btn:active { scale: .92; }
.rslider__btn[data-dir="-1"] img { transform: scaleX(-1); }
[data-theme="dark"] .rslider__btn:hover img { filter: none; }
.rslider__dots { display: flex; align-items: center; }
.rslider__dot { padding: 10px 4px; }
.rslider__dot span { position: relative; display: block; width: 10px; height: 10px; border-radius: 99px; background: var(--accent-soft); overflow: hidden; transition: width .45s var(--out, ease); }
.rslider__dot span::after { content: ""; position: absolute; inset: 0; background: var(--accent-ink); transform-origin: left; scale: 0 1; }
.rslider__dot.is-active span { width: 40px; }
.rslider__dot.is-active span::after { scale: 1 1; }
@media (prefers-reduced-motion: no-preference) {
  .review { transition: transform .45s var(--out, ease), box-shadow .45s var(--out, ease); }
  .review:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--line), 0 24px 44px -20px var(--lift-shadow, rgba(17, 33, 62, .28)); }
  .rslider.is-sliding .review { transition: translate .8s var(--out, ease), transform .45s var(--out, ease), box-shadow .45s var(--out, ease); }
  .review:hover::before { translate: 0 6px; color: var(--accent); }
  .review:hover .review__avatar { scale: 1.08; }
  /* autoplay timer: the active dot fills up, and its animationend moves the row on (main.js) */
  .rslider__dot.is-active span::after { animation: rs-progress var(--autoplay) linear both; }
  .rslider:is(:hover, .is-paused, :has(:focus-visible)) .rslider__dot.is-active span::after { animation-play-state: paused; }
}
@keyframes rs-progress { from { scale: 0 1; } to { scale: 1 1; } }
@media (max-width: 1199.98px) { .rslider { --per: 2; --gap: 20px; } }
@media (max-width: 809.98px) {
  .rslider { --per: 1; gap: 28px; }
  .review { padding: 36px 24px 26px; }
  .rslider__btn { width: 44px; height: 44px; }
  .rslider__nav { gap: 12px; }
}

/* ===== Visa routes (filter tabs + cards) ===== */
.routes__inner { display: flex; flex-direction: column; align-items: center; gap: 50px; }
.routes__body { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; }
.tabs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.tab { padding: 4px 10px; border-radius: 10px; color: var(--muted); font-size: 16px; line-height: 1.4; white-space: pre; }
.tab.is-active { background: var(--surface); color: var(--ink); }
.routes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; width: 100%; }
.route { display: flex; transition: translate .2s ease-out; }
.route:hover { translate: 0 -6px; }
.route[hidden] { display: none; }
.route__card { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px; background: var(--card); border-radius: 30px; overflow: hidden; cursor: pointer; }
.route__top { display: flex; align-items: flex-start; gap: 20px; width: 100%; }
.route__flag { width: 50px; height: 50px; flex: none; display: flex; align-items: center; }
.route__flag img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.route__top .tag { margin-left: auto; }
.route__center { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.route__center p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.route__line { width: 100%; height: 1px; background: var(--line); }
.route__stats { display: flex; align-items: flex-start; gap: 50px; width: 100%; }
.route__stats > div { flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.route__stats p { text-wrap: wrap; }
@media (max-width: 1199.98px) {
  .routes__inner { gap: 30px; }
  .routes .center-head { gap: 10px; }
  .routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .tabs { gap: 4px 2px; }
  .routes__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ===== Contact (info card + form) ===== */
.contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.info-card { display: flex; flex-direction: column; background: var(--dark); border-radius: 30px; overflow: clip; color: var(--white); }
.info-card__hero { position: relative; display: flex; padding: 140px 30px; }
.info-card__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 30px; z-index: 1; }
.info-card__hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(17, 33, 62, .3); border-radius: 30px; } /* light tint: bright photo, white heading still readable */
.info-card__hero :is(h2, h3) { position: relative; z-index: 2; flex: 1; text-align: center; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.info-card__body { display: flex; flex-direction: column; gap: 30px; padding: 40px 40px 10px; }
.info-card__title { padding-bottom: 10px; }
.info-item { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 30px; box-shadow: inset 0 -1px 0 var(--white-10); }
.info-item:last-child { box-shadow: none; }
.info-item__icon { width: 50px; height: 50px; flex: none; display: flex; justify-content: center; align-items: center; background: var(--accent); border-radius: 10px; }
.info-item__icon img { width: 26px; height: auto; }
.info-item__text { flex: 1 0 0; display: flex; flex-direction: column; gap: 4px; }
.info-item__text p + p { color: var(--white-70); }

.form-card { display: flex; flex-direction: column; gap: 40px; padding: 40px; background: var(--surface); border-radius: 30px; overflow: hidden; }
.form-card :is(h2, h3) { text-align: center; }
.form { display: flex; flex-direction: column; gap: 20px; }
.form__row { display: flex; gap: 20px; }
.field { flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.field__label { color: var(--muted); text-wrap: wrap; }
.field__control {
  position: relative; display: flex; align-items: center; width: 100%; height: 50px;
  background: var(--card); border-radius: 10px; overflow: hidden;
}
/* 1px border drawn inside the box; turns orange on focus (timing measured from the original) */
.field__control::after {
  content: ""; position: absolute; inset: 0; border: 1px solid var(--card); border-radius: 10px; pointer-events: none;
  transition: border-color .4s var(--ease);
}
.field__control:focus-within::after { border-color: var(--accent-ink); }
.field__control input, .field__control select, .field__control textarea {
  width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink);
  font-size: 16px; line-height: 1.4;
}
.field__control input { padding: 10px 20px; }
.field__control ::placeholder { color: var(--placeholder); opacity: 1; }
.field__control--area { height: 150px; }
.field__control textarea { padding: 20px; resize: vertical; }
/* document upload: several files, 1 MB combined */
.field__control--file { height: auto; min-height: 50px; flex-wrap: wrap; gap: 8px 14px; padding: 12px 20px; cursor: pointer; }
.file-btn { padding: 6px 14px; border-radius: 50px; background: var(--dark); color: var(--white); font-size: 14px; transition: background-color .16s; }
.field__control--file:hover .file-btn { background: var(--accent); color: var(--dark); }
.file-hint { color: var(--placeholder); font-size: 14px; }
.file-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.file-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--card); font-size: 14px; }
.file-list__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list__size { color: var(--muted); }
.file-list__remove { width: 24px; height: 24px; border-radius: 50%; color: var(--muted); font-size: 18px; line-height: 1; }
.file-list__remove:hover { background: var(--surface); color: var(--accent-ink); }
.file-list__total { justify-content: flex-end; background: none !important; padding: 0 4px !important; color: var(--muted); }
.file-error { color: #c0392b; font-size: 14px; }
/* submit: faded until every required field has a value; sends to api/contact.php */
.form__submit {
  display: flex; justify-content: center; align-items: center; width: 100%; height: 54px; padding: 14px 30px;
  border-radius: 50px; background: var(--accent); color: var(--dark); opacity: .5; cursor: default; white-space: pre;
  transition: opacity .2s ease-in-out, background-color .16s ease-in-out;
}
.form__submit.is-active { opacity: 1; cursor: pointer; }
.form__submit.is-active:hover { background: var(--navy-light); color: var(--white); }
.form__submit:disabled { opacity: .6; cursor: wait; }
.form__status { padding: 14px 18px; border-radius: 10px; background: var(--card); color: var(--ink); text-align: center; text-wrap: wrap; }
.form__status.is-error { color: #c0392b; }

@media (max-width: 1199.98px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .form-card { order: -1; gap: 30px; padding: 30px; }
  .info-card__hero { padding: 150px 30px; }
  .info-card__body { padding: 30px 30px 0; }
}
@media (max-width: 809.98px) {
  .form-card { order: 0; padding: 20px; }
  .info-card__hero { padding: 80px 30px; }
  .info-card__body { gap: 20px; padding: 20px 20px 10px; }
  .field { gap: 8px; }
  .form__row { flex-direction: column; }
  .form__row .field { flex: none; width: 100%; }
}

/* ===== Pricing ===== */
.pricing { overflow: hidden; }
.pricing__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pricing__main { display: flex; flex-direction: column; align-items: center; gap: 50px; width: 100%; }
.pricing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: start; width: 100%; }
.plan { display: flex; flex-direction: column; justify-content: space-between; }
.plan__top { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px 20px 0; background: var(--bg); border-radius: 30px 30px 0 0; overflow: hidden; }
.plan__head { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.plan__title { display: flex; flex-direction: column; gap: 6px; }
.plan__price { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.plan__price span { white-space: pre; }
.plan__price small { padding-bottom: 6px; font-size: 16px; line-height: 1.4; white-space: pre; }
.plan__rule { width: 100%; height: 1px; background: var(--line); }
.plan__features { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; }
.plan__features li { display: flex; align-items: flex-start; gap: 6px; white-space: pre; }
.plan__features img { width: 22px; height: 22px; padding: 5px 7px; flex: none; }
.plan__bottom { display: flex; padding: 20px; background: var(--bg); border-radius: 0 0 30px 30px; }
.plan--featured .plan__top { padding: 20px; background: var(--card); }
.plan--featured .plan__bottom { background: var(--dark); }
.pricing__note { max-width: 500px; padding: 16px 30px 0; text-align: center; }
@media (max-width: 1199.98px) {
  .pricing__main { gap: 40px; }
  .pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan--featured { grid-column: 1 / -1; order: 1; }
}
@media (max-width: 809.98px) {
  .pricing__main { gap: 30px; }
  .pricing__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .plan--featured { grid-column: auto; order: 0; }
}

/* ===== FAQ (accordion) ===== */
.faq .container { max-width: 760px; }
.faq__inner { display: flex; flex-direction: column; align-items: center; gap: 50px; }
.faq__body { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; }
.faq__list { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.faq-item { background: var(--surface); border-radius: 20px; overflow: hidden; transition: background-color .3s var(--ease); }
.faq-item.is-open { background: var(--card); }
.faq-item__q { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; padding: 20px 30px; text-align: left; color: var(--ink); }
.faq-item__q span:first-child { flex: 1 0 0; text-wrap: balance; }
.faq-item__icon {
  position: relative; flex: none; width: 30px; height: 30px; border-radius: 100px; background: var(--card);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; inset: 0; margin: auto; border-radius: 3px; background: var(--ink); transition: background-color .3s var(--ease); }
.faq-item__icon::before { width: 12px; height: 2px; }
.faq-item__icon::after { width: 2px; height: 12px; }
.faq-item.is-open .faq-item__icon { background: var(--ink); transform: rotate(45deg); }
.faq-item.is-open .faq-item__icon::before, .faq-item.is-open .faq-item__icon::after { background: var(--card); }
.faq-item__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s var(--ease); }
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a > div { min-height: 0; overflow: hidden; }
.faq-item:not(.is-open) .faq-item__a > div { visibility: hidden; transition: visibility 0s .25s; } /* closed answers: hidden from screen readers too */
.faq-item__a p { max-width: 620px; padding: 0 30px 20px; }
.faq .note-box p { flex: 1 0 0; max-width: none; padding: 16px 16px 0; }
@media (max-width: 1199.98px) { .faq__inner { gap: 30px; } .faq__body { gap: 20px; } }
@media (max-width: 809.98px) { .faq__body { gap: 10px; } .faq .note-box p { padding: 20px 0 0; } }

/* ===== Closing call-to-action card ===== */
.cta { padding: 0 0 100px; }
.cta__card { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px; padding: 40px; background: var(--dark); border-radius: 20px; overflow: clip; color: var(--white); }
.cta__text { grid-column: span 3; display: flex; flex-direction: column; justify-content: center; gap: 50px; }
.cta__main { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.cta__title { display: flex; flex-direction: column; gap: 20px; }
.cta__title p { color: var(--white-70); }
.cta__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.cta__trust li { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.3; white-space: pre; }
.cta__trust img { width: 18px; height: 18px; padding: 1px; object-fit: contain; }
.cta__globe { grid-column: span 2; display: flex; justify-content: center; align-items: center; }
.cta__globe img, .cta__globe canvas { display: block; width: 400px; max-width: 100%; height: auto; aspect-ratio: 1; }
@media (max-width: 809.98px) {
  .cta { padding-bottom: 80px; }
  .cta__card { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 20px; }
  .cta__text, .cta__globe { grid-column: auto; }
  .cta__trust { gap: 20px; }
  .cta__globe img, .cta__globe canvas { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; }
}

/* ---------- 8. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__list, .g-rings span, .wa-float, .wa-float__icon svg, .wa-float__icon::before, .wa-float__icon::after { animation: none !important; }
}

/* ---------- 9. Animations (scroll reveal classes are added by main.js; all motion is off for reduced-motion users) ---------- */
:root { --out: cubic-bezier(.22, 1, .36, 1); --lift-shadow: rgba(17, 33, 62, .28); }
[data-theme="dark"] { --lift-shadow: rgba(0, 0, 0, .55); }
@media (prefers-reduced-motion: no-preference) {
  /* scroll reveal: fade up / zoom in / photo unmasks with a slow zoom-out */
  .rv { opacity: 0; }
  .rv.is-in { animation: rv-up .9s var(--out) var(--d, 0s) both; }
  .rv--zoom.is-in { animation-name: rv-zoom; }
  .rv--clip.is-in { animation-name: rv-clip; animation-duration: 1.1s; }
  .rv--clip.is-in img { animation: rv-img 1.1s var(--out) var(--d, 0s) both; }
  @keyframes rv-up { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: none; } }
  @keyframes rv-zoom { from { opacity: 0; scale: .94; translate: 0 30px; } to { opacity: 1; scale: none; translate: none; } }
  @keyframes rv-clip { from { opacity: 0; clip-path: inset(10% 6% round 30px); } to { opacity: 1; clip-path: inset(0 round 30px); } }
  @keyframes rv-img { from { scale: 1.18; } to { scale: none; } }
  @keyframes rv-blur { from { opacity: 0; filter: blur(14px); translate: 0 24px; } to { opacity: 1; filter: none; translate: none; } }

  /* hero: staggered entrance on page load */
  .hero__heading > *, .hero__clients > p, .hero__tags .tag, .hero__card { animation: rv-up 1s var(--out) both; }
  .hero__heading > :nth-child(2) { animation-name: rv-blur; animation-duration: 1.2s; animation-delay: .1s; }
  .hero__heading > :nth-child(3) { animation-delay: .3s; }
  .hero__heading > :nth-child(4) { animation-delay: .42s; }
  .hero__clients > p { animation-delay: .55s; }
  .hero__tags .tag:nth-child(1) { animation-delay: .6s; }
  .hero__tags .tag:nth-child(2) { animation-delay: .66s; }
  .hero__tags .tag:nth-child(3) { animation-delay: .72s; }
  .hero__tags .tag:nth-child(4) { animation-delay: .78s; }
  .hero__tags .tag:nth-child(5) { animation-delay: .84s; }
  .hero__tags .tag:nth-child(6) { animation-delay: .9s; }
  .hero__card { animation-name: rv-zoom; animation-duration: 1.2s; animation-delay: .35s; }

  /* cards lift on hover, icons tilt */
  .svc-card, .why-item, .feature, .step__card, .plan { transition: translate .4s var(--out), box-shadow .4s var(--out); }
  .svc-card:hover, .why-item:hover, .feature:hover, .step__card:hover, .plan:hover { translate: 0 -6px; box-shadow: 0 24px 44px -20px var(--lift-shadow); }
  .exp-card__icon, .feature__icon { transition: transform .45s var(--out); }
  .exp-card:hover .exp-card__icon, .why-item:hover .exp-card__icon, .feature:hover .feature__icon { transform: rotate(-8deg) scale(1.1); }

  /* buttons rise slightly; gold buttons get a light sweep */
  .btn:hover { translate: 0 -2px; box-shadow: 0 10px 22px -10px var(--lift-shadow); }
  .btn--accent { position: relative; }
  .btn--accent::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    translate: -110% 0; transition: translate 0s;
  }
  .btn--accent:hover::after { translate: 110% 0; transition: translate .7s ease; }

  /* menu links: gold underline grows from the left (desktop) */
  @media (min-width: 1200px) {
    .nav__links > a, .mega-link {
      background: linear-gradient(currentColor, currentColor) 0 calc(100% - 4px) / 0 1.5px no-repeat;
      transition: color .3s, background-size .35s var(--out);
    }
    .nav__links > a:hover, .mega-link:hover, .nav__links > a[aria-current="page"], .mega-link[aria-current] { background-size: 100% 1.5px; }
  }

  /* ambient motion: process arrows nudge forward, a soft gold glow drifts across the closing banner */
  .step__arrow img { animation: nudge 2.2s ease-in-out infinite; }
  @keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } }
  .cta__card { position: relative; isolation: isolate; }
  .cta__card::before {
    content: ""; position: absolute; z-index: -1; left: -15%; top: -40%; width: 60%; aspect-ratio: 1; pointer-events: none;
    background: radial-gradient(circle, rgba(213, 185, 150, .2), transparent 65%);
    animation: drift 16s ease-in-out infinite alternate;
  }
  @keyframes drift { to { translate: 90% 45%; } }
}

/* thin gold reading-progress bar along the top (browsers with scroll-driven animations) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body::before {
      content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: 3px; pointer-events: none;
      background: var(--accent); transform-origin: 0 50%;
      animation: read-progress linear both; animation-timeline: scroll(root);
    }
    @keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}