/* ==========================================================================
   ZArabia — main stylesheet
   --------------------------------------------------------------------------
   Contents
     1. Fonts
     2. Design tokens (colours, sizes) — change brand values here
     3. Base
     4. Typography helpers
     5. Buttons and small UI pieces
     6. Header, navigation, mobile menu
     7. Home: hero
     8. Home: intro strips
     9. Home: values + accordion
    10. Home: AI assistant band
    11. Home: product rows
    12. Home: testimonials + service cards
    13. Home: latest solutions
    14. Clients
    15. Call to action
    16. Footer
    17. Scroll animations
    18. Inner pages: page header
    19. About
    20. Services
    21. Solutions list
    22. Contact (details, FAQ, form)
    23. Case-study pages
    24. Text pages (privacy, terms) and 404
   Layout uses logical properties (inline-start / inline-end) so the same
   stylesheet works for the Arabic right-to-left version.
   Breakpoints: 1650px (laptop), 1024px (tablet), 767px (phone).
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/cairo-arabic-wght-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/cairo-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/cairo-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Design tokens -------------------------------------------------------- */
:root {
  /* Brand */
  --blue: #176eb4;
  --blue-light: #3da4dc;
  --blue-dark: #00303f;

  /* Section backgrounds, dark to light */
  --navy: #0b2837;
  --navy-deep: #071b25;
  --teal-900: #00303f;
  --teal-800: #12303e;
  --teal-700: #1e465b;
  --teal-600: #1c4f65;
  --teal-500: #12607c;
  --sky: #3495e4;
  --cyan: #4dd0f6;
  --mint: #e9fef5;
  --mint-bar: #e9fff5;

  /* Text */
  --heading: #243b75;
  --text: #111111;
  --nav-active: #006286;
  --muted-line: #dfe5e8;
  --white: #ffffff;

  /* Type scale (desktop) */
  --fs-body: 20px;   --lh-body: 24px;
  --fs-small: 17px;  --lh-small: 25px;
  --fs-h3: 28px;     --lh-h3: 36px;   --ls-h3: 1.4px;
  --fs-h2: 36px;     --lh-h2: 53px;   --ls-h2: 1.8px;
  --fs-h1: 48px;     --lh-h1: 54px;   --ls-h1: 2px;
  --fs-xl: 80px;     --lh-xl: 84px;   --ls-xl: 4px;

  /* Shape */
  --radius-section: 50px;
  --radius-card: 40px;
  --gutter: 21px;
  --container: 1460px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 1024px) {
  :root {
    --fs-body: 16px;  --lh-body: 25px;
    --fs-h3: 26px;    --lh-h3: 38px;
    --fs-h2: 32px;    --lh-h2: 42px;
    --fs-h1: 38px;    --lh-h1: 53px;
    --fs-xl: 50px;    --lh-xl: 69px;
  }
}
@media (max-width: 767px) {
  :root {
    --fs-h3: 24px;    --lh-h3: 34px;
    --fs-h2: 30px;    --lh-h2: 40px;
    --fs-h1: 36px;    --lh-h1: 48px;
    --fs-xl: 36px;    --lh-xl: 53px;
  }
}

/* 3. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

main { overflow-x: clip; }

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
p, h1, h2, h3, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 3px; border-radius: 6px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute; inset-block-start: -100px; inset-inline-start: 16px; z-index: 1000;
  background: var(--navy); color: var(--white); padding: 10px 18px; border-radius: 0 0 12px 12px;
}
.skip-link:focus { inset-block-start: 0; color: var(--white); }

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

/* 4. Typography helpers --------------------------------------------------- */
.t-xl, .t-h1, .t-h2, .t-h3 { font-weight: 600; color: var(--heading); }
.t-xl { font-size: var(--fs-xl); line-height: var(--lh-xl); letter-spacing: var(--ls-xl); }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.on-dark, .on-dark .t-xl, .on-dark .t-h1, .on-dark .t-h2, .on-dark .t-h3 { color: var(--white); }

/* Arabic text must not be letter-spaced (it breaks the joined letters). */
[dir="rtl"] .t-xl, [dir="rtl"] .t-h1, [dir="rtl"] .t-h2, [dir="rtl"] .t-h3 { letter-spacing: 0; }

/* 5. Buttons and small UI pieces ------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 14px 25px;
  font-size: 20px; line-height: 22px; font-weight: 400;
  color: var(--white); background: var(--blue);
  border-radius: 50px;
  transition: background-color .3s var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--blue-dark); color: var(--white); }

/* Button with the round arrow badge at the end */
.btn--arrow {
  min-height: 50px; padding: 5px; padding-inline-start: 30px;
  font-size: 20px; gap: 30px;
}
.btn--arrow::after {
  content: ""; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--white) url("../img/icons/arrow-right-blue.svg") center / 26px 26px no-repeat;
}
[dir="rtl"] .btn--arrow::after,
[dir="rtl"] .circle-arrow::before { transform: scaleX(-1); }

@media (max-width: 1650px) {
  .btn:not(.btn--arrow) { min-height: 46px; padding-block: 12px; font-size: 16px; }
}

/* Outlined round arrow link (product rows) */
.circle-arrow {
  flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--cyan);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.circle-arrow::before {
  content: ""; width: 26px; height: 26px;
  background: url("../img/icons/arrow-right-cyan.svg") center / contain no-repeat;
}
.circle-arrow:hover { background: rgba(77, 208, 246, .18); transform: translateX(4px); }
[dir="rtl"] .circle-arrow:hover { transform: translateX(-4px); }

/* Rounded "stacked" sections: each one tucks under the one above it */
.band {
  position: relative;
  border-end-start-radius: var(--radius-section);
  border-end-end-radius: var(--radius-section);
}

/* 6. Header --------------------------------------------------------------- */
.site-header {
  position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 400;
}
.site-header__strip { height: 20px; background: var(--navy); }
.site-header__bar {
  display: flex; align-items: center; gap: 20px;
  margin-block-start: -1px; padding-inline-end: 30px;
}
.site-header__brand {
  flex: none; display: grid; place-items: center;
  width: 408px; height: 108px;
  background: url("../img/shapes/tab-navy-top.svg") center / 100% 100% no-repeat;
}
.site-header__brand img { width: 140px; height: 77px; }
.site-header__brand .logo--color { display: none; }

.site-nav { margin-inline-start: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; align-items: baseline; }
.site-nav a {
  display: block; padding: 2px 16px;
  font-size: 24px; line-height: 24px; font-weight: 700;
  color: var(--heading); border-radius: 14px;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--nav-active); background: var(--white); }
/* With the language link there are six menu links: give them a little less room on small laptop screens. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .site-nav a { padding-inline: 8px; font-size: 21px; }
}

/* Sticky state (added by main.js after scrolling) */
.site-header.is-stuck {
  position: fixed; background: var(--mint-bar);
  box-shadow: 0 6px 24px rgba(11, 40, 55, .08);
  animation: header-drop .45s var(--ease);
}
.site-header.is-stuck .site-header__strip { display: none; }
.site-header.is-stuck .site-header__bar { margin: 0; padding: 10px 30px; }
.site-header.is-stuck .site-header__brand { width: auto; height: auto; background: none; padding-inline: 5px; }
.site-header.is-stuck .logo--white { display: none; }
.site-header.is-stuck .logo--color { display: block; }
@keyframes header-drop { from { transform: translateY(-100%); } to { transform: none; } }

/* Hamburger */
.nav-toggle { display: none; position: relative; width: 44px; height: 44px; margin-inline-start: auto; }
.nav-toggle span {
  position: absolute; inset-inline: 13px; height: 2px; background: var(--heading);
}
.nav-toggle span:nth-child(1) { inset-block-start: 16px; }
.nav-toggle span:nth-child(2) { inset-block-start: 21px; }
.nav-toggle span:nth-child(3) { inset-block-start: 26px; }

/* Mobile menu (off-canvas) */
.mobile-menu { position: fixed; inset: 0; z-index: 999; visibility: hidden; }
.mobile-menu__backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .7);
  opacity: 0; transition: opacity .35s var(--ease);
}
.mobile-menu__panel {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: calc(100% - 45px); max-width: 500px;
  display: flex; flex-direction: column; gap: 30px;
  padding: 30px 25px; background: var(--white); overflow-y: auto;
  transform: translateX(-100%); transition: transform .35s var(--ease);
}
[dir="rtl"] .mobile-menu__panel { transform: translateX(100%); }
.mobile-menu.is-open { visibility: visible; }
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }
.mobile-menu.is-open .mobile-menu__panel { transform: none; }
.mobile-menu__logo { width: 120px; }
.mobile-menu__nav a {
  display: block; padding: 14px 4px;
  font-size: 22px; line-height: 28px; font-weight: 700; color: var(--heading);
  border-block-end: 1px solid var(--muted-line);
}
.mobile-menu__nav a[aria-current="page"] { color: var(--nav-active); }
.mobile-menu__close {
  position: absolute; inset-block-start: 10px; inset-inline-end: 10px;
  width: 25px; height: 25px;
}
.mobile-menu__close::before, .mobile-menu__close::after {
  content: ""; position: absolute; inset-block-start: 12px; inset-inline: 2px; height: 1.5px; background: var(--white);
}
.mobile-menu__close::before { transform: rotate(45deg); }
.mobile-menu__close::after { transform: rotate(-45deg); }
body.menu-open { overflow: hidden; }

@media (max-width: 1024px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .site-header__bar { padding-inline-end: 20px; }
  .site-header__brand { width: 316px; height: 84px; }
  .site-header__brand img { width: 110px; height: auto; }
  .site-header.is-stuck .site-header__bar { padding: 8px 20px; }
}
@media (max-width: 767px) {
  .site-header__brand { width: auto; height: 108px; background: none; padding-inline: 25px 0; }
  .site-header__brand img { width: 100px; }
  .site-header__brand .logo--white { display: none; }
  .site-header__brand .logo--color { display: block; }
  .site-header.is-stuck .site-header__brand { height: auto; padding-inline: 5px; }
}

/* 7. Hero ----------------------------------------------------------------- */
.hero { background: var(--navy); }
.hero__inner {
  display: flex;
  padding: 125px 50px; padding-inline-start: 110px;
  background: var(--mint) url("../img/bg/mint-gradient.jpg") center / cover no-repeat;
  border-end-start-radius: var(--radius-section);
  border-end-end-radius: var(--radius-section);
}
.hero__copy { position: relative; width: 40%; padding: 40px 0 20px; }
.hero__badge {
  position: absolute; z-index: 5; inset-block-start: 664px; inset-inline-start: 475px;
  width: 369px; max-width: none; border-radius: var(--radius-section);
}
.hero__kicker { margin-block-end: 60px; }
.hero__title {
  max-width: 638px; margin-inline-end: -30px;
  font-size: 80px; line-height: 1.05; letter-spacing: 4px;
  font-weight: 600; color: var(--heading);
}
.hero__media {
  position: relative; width: 60%; min-height: 600px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-card); overflow: hidden;
  background: url("../img/bg/hero-poster.webp") center / cover no-repeat;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__panel {
  position: relative; width: 60%; min-height: 600px; padding: 80px 21px 135px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  text-align: center;
  background: url("../img/shapes/hero-panel.svg") center / contain no-repeat;
}
.hero__panel-logo { width: 200px; }
.hero__panel-title { display: none; }
.hero__panel-text { max-width: 320px; margin-block-end: 15px; }

@media (max-width: 1650px) {
  .hero__inner { padding: 100px 20px; }
  .hero__copy { padding: 40px 10px 10px; }
  .hero__badge { display: none; }
  .hero__title { font-size: 55px; line-height: 1.1; }
  .hero__media { min-height: 550px; }
  .hero__panel { width: 80%; min-height: 550px; padding-block: 65px; }
}
@media (max-width: 1024px) {
  .hero__inner { flex-direction: column; padding: 125px 30px 50px; }
  .hero__copy { width: 100%; margin-block-end: 50px; }
  .hero__media { width: 100%; }
}
@media (max-width: 767px) {
  .hero__inner { padding: 120px 20px 20px; }
  .hero__copy { padding: 0; margin-block-end: 20px; text-align: center; }
  .hero__kicker { margin-block-end: 30px; }
  .hero__title { margin-inline-end: 0; font-size: 45px; }
  .hero__media { min-height: 350px; }
  .hero__panel { width: 100%; min-height: 350px; padding: 40px 20px; background: none; }
  .hero__panel-title { display: block; color: var(--white); }
  .hero__panel-text { color: var(--white); }
}

/* 8. Intro strips --------------------------------------------------------- */
.strip { position: relative; }
.strip__item { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 25px; }
.strip__item img { flex: none; width: 70px; height: 70px; }
.strip__item p { max-width: 300px; }

.strip--navy { z-index: 3; padding: 40px 0; padding-inline-start: 130px; background: var(--navy); }

/* No z-index here on purpose: the photo inside must be able to sit above the navy strip. */
.strip--teal { margin-block-start: -60px; padding-block-start: 100px; background: var(--teal-700); }
.strip__row { display: flex; max-width: 1580px; margin-inline: auto; }
.strip__group { display: flex; width: 50%; }
.strip__tab {
  flex: none; width: 413px; min-height: 84px; margin-block-end: -1px;
  display: flex; align-items: flex-end; justify-content: center;
  background: url("../img/shapes/tab-white-bottom.svg") center bottom / contain no-repeat;
}
.strip--teal .strip__item { width: 400px; padding-block-end: 40px; padding-inline-start: 10px; align-self: flex-start; flex-wrap: nowrap; }
.strip--teal .strip__item img { width: 68px; height: 68px; }
.strip__visual { position: relative; width: 50%; }
.strip__photo {
  position: absolute; z-index: 20; inset-block-start: -145px; inset-inline-start: 55px;
  width: 660px; max-width: none; border-radius: var(--radius-card);
}

@media (max-width: 1650px) {
  .strip__row { max-width: none; padding-inline: var(--gutter); }
  .strip__group { width: 70%; }
  .strip__photo { inset-block-start: -90px; inset-inline-start: 54px; width: calc(100% - 47px); }
}
@media (max-width: 1024px) {
  .strip--navy { padding-inline-start: 70px; }
  .strip__group { width: 100%; }
  .strip__visual { display: none; }
}
@media (max-width: 767px) {
  .strip--navy { padding-inline: 30px; }
  .strip__group { flex-direction: column-reverse; }
  .strip__tab { width: 100%; min-height: 0; margin: 0; padding-block-end: 30px; background: none; }
  .strip--teal .strip__item { width: 100%; flex-wrap: wrap; }
}

/* 9. Values + accordion --------------------------------------------------- */
.values {
  position: relative;
  background: var(--white) url("../img/bg/glow.webp") center bottom / cover no-repeat;
}
.values__inner { display: flex; max-width: var(--container); margin-inline: auto; padding-block-start: 135px; }
.values__col { width: 50%; padding-inline: var(--gutter); }
.values__col--text { padding-block: 10px; }
.values__lead { max-width: 600px; margin-block-end: 75px; }
.values__title { max-width: 600px; margin-block-end: 85px; }
.values__banner { width: 100%; border-radius: var(--radius-section); margin-block-end: 180px; }
.values__col--list { position: relative; z-index: 8; padding-block-start: 170px; }
.values__col--list .t-h1 { margin-block-end: 60px; }
.values__accordion-wrap { position: relative; }
.values__tab {
  position: absolute; z-index: 1; inset-block-start: 410px; inset-inline-start: -90px;
  width: 850px; max-width: none; pointer-events: none;
}

.accordion { position: relative; z-index: 5; max-width: 670px; }
.accordion__item + .accordion__item { margin-block-start: 15px; }
.accordion__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 20px 13px; padding-inline-start: 38px;
  font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: .7px; text-align: start;
  color: var(--text); background: var(--white);
  border-radius: 60px; box-shadow: 14px 20px 69px 0 rgba(28, 33, 54, .1);
}
.accordion__icon {
  position: relative; flex: none; width: 40px; height: 40px;
  border: 3px solid var(--blue); border-radius: 50%;
}
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  width: 20px; height: 3px; background: var(--blue);
  transform: translate(-50%, -50%); transition: transform .3s var(--ease);
}
.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding: 43px 43px 33px; }
.accordion__item.is-open .accordion__trigger { padding-block: 17px; }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }

@media (max-width: 1024px) {
  .values { z-index: 10; border-end-start-radius: var(--radius-section); border-end-end-radius: var(--radius-section); }
  .values__inner { flex-direction: column; padding-block: 70px 30px; }
  .values__col { width: 100%; }
  .values__lead { margin-block-end: 40px; }
  .values__title { margin-block-end: 50px; }
  .values__banner { margin-block-end: 130px; }
  .values__col--list { padding-block-start: 0; }
  .values__col--list .t-h1 { margin-block-end: 40px; }
  .values__tab { display: none; }
}
@media (max-width: 767px) {
  .values__inner { padding-block-start: 60px; }
  .accordion__trigger { padding: 15px 12px; padding-inline-start: 30px; font-size: 20px; line-height: 1.2; }
  .accordion__icon { width: 30px; height: 30px; border-width: 2px; }
  .accordion__icon::before, .accordion__icon::after { width: 14px; height: 2px; }
  .accordion__panel p { padding: 30px 30px 25px; }
}

/* 10. AI assistant band --------------------------------------------------- */
.ai-band {
  z-index: 7; margin-block-start: -80px; overflow: hidden;
  background: var(--teal-600);
}
.ai-band__bg {
  position: absolute; inset: -60px 0; z-index: 0;
  background: url("../img/bg/ai-solutions.webp") 0 0 / cover no-repeat;
  will-change: transform;
}
.ai-band__inner { position: relative; z-index: 1; display: flex; max-width: var(--container); margin-inline: auto; padding-block-end: 85px; }
.ai-band__copy { width: 47.6%; padding-block-start: 130px; padding-inline-start: var(--gutter); }
.ai-band__lead { max-width: 600px; margin-block-end: 80px; }
.ai-band__visual { flex: 1; display: grid; place-items: center; padding-block-start: 75px; }
.ai-band__visual img { width: 373px; }

@media (max-width: 1024px) {
  .ai-band { margin-block-start: -60px; }
  .ai-band__inner { padding-block-end: 50px; }
  .ai-band__copy { width: 100%; padding-block-start: 160px; padding-inline: 20px; }
  .ai-band__lead { margin-block-end: 50px; }
  .ai-band__visual { display: none; }
}

/* 11. Product rows -------------------------------------------------------- */
.products > li { position: relative; margin-block-start: -60px; }
.products > li:nth-child(1) { z-index: 5; background: var(--navy); }
.products > li:nth-child(2) { z-index: 4; background: var(--teal-900); }
.products > li:nth-child(3) { z-index: 3; background: var(--teal-700); }
.products > li:nth-child(4) { z-index: 2; background: var(--teal-500); }
.products > li:nth-child(5) { z-index: 1; background: var(--sky); }
.product {
  display: grid; grid-template-columns: 245px 1fr 1fr; align-items: center;
  max-width: var(--container); margin-inline: auto; padding-block: 95px 25px;
}
.product__logo { width: 245px; }
.product__title { padding: 10px var(--gutter); }
.product__body { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 10px var(--gutter); }
.product__body p { max-width: 474px; }

@media (max-width: 1024px) {
  .product { grid-template-columns: 200px 2fr 3fr; }
  .product__logo { width: 200px; }
  .product__body { gap: 20px; }
}
@media (max-width: 767px) {
  .product { display: block; padding-block: 95px 30px; }
  .product__logo { width: 245px; }
  .product__body p { max-width: 80%; }
  .product__body { gap: 10px; }
}

/* 12. Testimonials + service cards ---------------------------------------- */
.proof { background: var(--white) url("../img/bg/glow.webp") center top / cover no-repeat; padding-inline: var(--gutter); }
.proof__inner { max-width: 1420px; margin-inline: auto; padding-block: 52px 12px; }
.proof__top { display: flex; padding-block-end: 25px; }
.proof__heading { width: 33.333%; padding-block-start: 50px; padding-inline-end: 20px; }
.proof__heading .t-h1 { max-width: 350px; line-height: 1.2; }
.proof__slider { width: 66.666%; padding: 10px var(--gutter); }

.testimonials { position: relative; }
.testimonials__track { display: grid; }
.testimonial {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), visibility .6s;
}
.testimonial.is-active { opacity: 1; visibility: visible; }
.testimonial blockquote {
  padding: 65px 150px 10px; background: var(--white);
  border-radius: var(--radius-card);
}
.testimonial figcaption { padding-inline-start: 150px; font-size: 17.5px; line-height: 21px; }
.testimonial figcaption strong { display: block; padding-block: 5px; font-weight: 400; color: var(--teal-600); }
.testimonial figcaption span { color: var(--navy-deep); }
.testimonials__nav {
  position: absolute; inset-block-start: 60px; z-index: 2;
  width: 50px; height: 50px; border-radius: 10px; background: var(--muted-line);
  transition: background-color .25s var(--ease);
}
.testimonials__nav:hover { background: #cdd7dc; }
.testimonials__nav::before {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  width: 9px; height: 9px; border: solid var(--heading); border-width: 0 0 2px 2px;
  transform: translate(-30%, -50%) rotate(45deg);
}
.testimonials__nav--prev { inset-inline-start: 45px; }
.testimonials__nav--next { inset-inline-end: 25px; }
.testimonials__nav--next::before { transform: translate(-70%, -50%) rotate(-135deg); }
[dir="rtl"] .testimonials__nav--prev::before { transform: translate(-70%, -50%) rotate(-135deg); }
[dir="rtl"] .testimonials__nav--next::before { transform: translate(-30%, -50%) rotate(45deg); }

.cards { display: flex; gap: 40px; padding-block-start: 25px; margin-block-end: 110px; }
.card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius-section); background-position: center; background-size: cover; background-repeat: no-repeat;
}
.cards__col { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 45px; }
.card--training {
  flex: 1; min-height: 500px; padding: 65px 20px 55px 30px; justify-content: space-between; gap: 40px;
  background-color: #0f475d; background-image: url("../img/home/card-arabic-training.jpg");
}
.card--training .t-h1 { max-width: 320px; }
.check-list li { position: relative; padding-inline-start: 23px; }
.check-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .3em;
  width: 14px; height: 14px;
  background: url("../img/icons/check.svg") center / contain no-repeat;
}
.card--migration {
  padding: 35px 20px 30px 50px;
  background-color: #f6f7f9; background-image: url("../img/home/card-data-migration.jpg");
}
.card--support {
  flex: 1; padding: 70px 20px 65px 30px; justify-content: space-between; gap: 40px; align-items: flex-start;
  background-color: var(--navy-deep); background-image: url("../img/home/card-support.jpg");
}
.card--support p { max-width: 250px; }
.card--consultation {
  flex: 1; min-height: 500px; padding: 55px 20px 55px 30px; gap: 15px;
  background-color: #dcfaf9; background-image: url("../img/home/card-consultation.jpg");
}
.card--consultation .t-h1, .card--consultation p { max-width: 320px; }
[dir="rtl"] .card { padding-inline: 30px 20px; }

@media (max-width: 1024px) {
  .proof { padding: 48px 20px 42px; }
  .proof__top { flex-direction: column; }
  .proof__heading { width: 100%; padding: 0; text-align: center; }
  .proof__heading .t-h1 { max-width: 482px; margin-inline: auto; }
  .proof__slider { width: 100%; }
  .testimonial blockquote { padding: 45px 90px 10px; }
  .testimonial figcaption { padding-inline-start: 90px; }
  .testimonials__nav { inset-block-start: 35px; }
  .testimonials__nav--prev { inset-inline-start: 15px; }
  .testimonials__nav--next { inset-inline-end: 15px; }
  .cards { flex-direction: column; gap: 20px; margin-block-end: 60px; }
  .cards__col { gap: 20px; }
  .card--training, .card--consultation { min-height: 360px; }
  .card--support { min-height: 300px; }
}
@media (max-width: 767px) {
  .proof { padding: 0; }
  .proof__inner { padding-block: 50px 0; }
  .proof__slider { padding: 0; }
  .testimonial blockquote { padding: 50px 40px 10px; }
  .testimonial figcaption { padding-inline-start: 40px; padding-block-end: 20px; }
  .testimonials__nav { width: 30px; height: 30px; inset-block-start: 75px; border-radius: 8px; }
  .testimonials__nav--prev { inset-inline-start: 0; }
  .testimonials__nav--next { inset-inline-end: 0; }
  .card--training, .card--consultation { min-height: 420px; }
}

/* 13. Latest solutions ---------------------------------------------------- */
.latest {
  position: relative; padding-inline: 20px;
  background: var(--teal-800) url("../img/bg/waves-dark.webp") center / cover no-repeat;
  border-radius: var(--radius-section);
}
.latest__inner { max-width: 1420px; margin-inline: auto; padding-block-start: 150px; }
.latest__row { display: flex; align-items: flex-start; }
.latest__intro { position: sticky; inset-block-start: 130px; width: 33.333%; padding-inline-end: 20px; }
.latest__intro .t-xl { font-size: 80px; line-height: 1.05; margin-block-end: 75px; }
.latest__intro p { max-width: 380px; }
.latest__list { width: 66.666%; display: grid; gap: 50px; padding-block-end: 50px; }
.solution-card {
  display: flex; min-height: 246px; color: var(--white);
  background: var(--teal-700); border-radius: var(--radius-card);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.solution-card:hover { color: var(--white); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .25); }
.solution-card__text { width: 50%; display: flex; flex-direction: column; justify-content: center; padding: 20px; padding-inline-start: 30px; }
.solution-card__cats { display: flex; flex-wrap: wrap; align-items: center; margin-block: 5px; font-size: 17.5px; line-height: 21px; color: var(--blue); }
.solution-card__cats span + span::before {
  content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 1px; margin-inline: 10px; background: var(--muted-line);
}
.solution-card__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--white); }
.solution-card__media { width: 50%; padding-inline-start: 52px; }
.solution-card__media img { width: 100%; height: 100%; min-height: 246px; object-fit: cover; border-radius: var(--radius-card); }
.latest__more {
  width: 420px; min-height: 83px; margin-block-start: 20px; margin-inline-start: -60px; padding-block-end: 10px;
  display: flex; align-items: flex-end; justify-content: center;
  background: url("../img/shapes/tab-white-bottom.svg") center bottom / contain no-repeat;
}

@media (max-width: 1650px) {
  .latest__intro .t-xl { font-size: 60px; line-height: 1.1; }
}
@media (max-width: 1024px) {
  .latest { padding-block-start: 80px; }
  .latest__inner { padding-block-start: 0; }
  .latest__row { flex-wrap: wrap; }
  .latest__intro, .latest__list { width: 50%; }
  .latest__list { gap: 20px; }
  .solution-card { flex-direction: column; }
  .solution-card__text, .solution-card__media { width: 100%; }
  .solution-card__text { padding: 25px 30px 20px; }
  .solution-card__media { padding: 0; }
  .solution-card__media img { height: auto; min-height: 0; }
}
@media (max-width: 767px) {
  .latest__intro, .latest__list { width: 100%; }
  .latest__intro { position: static; padding: 0; margin-block-end: 40px; }
  .latest__intro .t-xl { margin-block-end: 50px; }
  .latest__more { width: 100%; margin: 0; padding-block: 20px 30px; background: none; }
}

/* 14. Clients ------------------------------------------------------------- */
.clients { padding-block: 110px 95px; }
.clients__grid { display: grid; grid-template-columns: repeat(6, 1fr); max-width: 1440px; margin-inline: auto; }
.clients__grid li { display: grid; place-items: center; }
.clients__grid img { width: 100%; max-width: 243px; }

@media (max-width: 1024px) {
  .clients { padding-block: 50px; }
}
@media (max-width: 767px) {
  .clients__grid { grid-template-columns: repeat(2, 1fr); }
  .clients__grid img { max-width: 195px; }
}

/* 15. Call to action ------------------------------------------------------ */
.cta {
  padding: 110px 20px 100px; text-align: center;
  background: #052536 url("../img/bg/waves-cta.webp") center / cover no-repeat;
  border-radius: var(--radius-section);
}
.cta .t-h1 { padding-block: 10px 40px; }

@media (max-width: 767px) {
  .cta { padding-block: 120px 110px; }
}

/* 16. Footer -------------------------------------------------------------- */
.site-footer { position: relative; background: var(--white); }
.site-footer__box {
  position: relative; z-index: 5;
  padding-block-start: 50px;
  background: var(--mint) url("../img/bg/mint-footer.jpg") center / cover no-repeat;
  border-radius: var(--radius-section);
}
.site-footer__top {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 20px 0;
  max-width: var(--container); margin-inline: auto; padding: 10px var(--gutter);
}
.site-footer__logo img { width: 158px; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; }
.site-footer__links a { display: block; padding: 10px 14px; font-weight: 700; color: var(--blue-dark); }
.site-footer__links a:hover { color: var(--blue); }
.site-footer {
  --social-tab: 309px; /* width of the dark tab holding the social icons */
}
/* Same width and edge as the social tab below it, so the text is always centred over the tab. */
.site-footer__contact {
  justify-self: end; width: var(--social-tab); margin-inline-end: calc(var(--gutter) * -1);
  text-align: center; font-size: 24px; line-height: 24px; font-weight: 700;
}
.site-footer__contact a { color: var(--blue); }
.site-footer__contact a:hover { color: var(--blue-dark); }
.site-footer__contact span { display: block; }
.site-footer__bottom {
  display: flex; align-items: stretch; justify-content: space-between;
  max-width: var(--container); margin-inline: auto; margin-block-start: 20px;
}
.site-footer__legal { max-width: 600px; padding: 10px var(--gutter); align-self: center; font-size: 15px; line-height: 21px; }
.site-footer__social {
  flex: none; width: var(--social-tab); min-height: 83px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: url("../img/shapes/tab-navy-bottom.svg") center / cover no-repeat;
}
.site-footer__social a {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--white); color: #1c3648;
  transition: transform .25s var(--ease), color .25s var(--ease);
}
.site-footer__social a:hover { transform: translateY(-3px); color: var(--blue); }
.site-footer__social svg { width: 18px; height: 18px; fill: currentColor; }
.site-footer__base { min-height: 80px; margin-block-start: -60px; background: var(--navy); }

@media (max-width: 1024px) {
  .site-footer__contact { font-size: 20px; }
}
@media (max-width: 767px) {
  .site-footer__top { grid-template-columns: 1fr; justify-items: center; gap: 20px; }
  .site-footer__contact { justify-self: center; width: auto; margin: 0; font-size: 24px; }
  .site-footer__bottom { flex-direction: column; align-items: center; gap: 15px; }
  .site-footer__legal { text-align: center; }
}

/* Back to top */
.to-top {
  position: fixed; z-index: 300; inset-block-end: 24px; inset-inline-end: 24px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); box-shadow: 0 8px 24px rgba(11, 40, 55, .3);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.to-top::before {
  content: ""; position: absolute; inset-block-start: 20px; inset-inline-start: 17px;
  width: 10px; height: 10px; border: solid var(--white); border-width: 2px 0 0 2px; transform: rotate(45deg);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* 17. Scroll animations --------------------------------------------------- */
/* Elements are only hidden when JavaScript is running (html.js), so the page
   still shows everything if scripts fail to load. */
.js [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--ease) var(--delay, 0s), transform .9s var(--ease) var(--delay, 0s);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-typewriter] .char { opacity: 0; transition: opacity .05s linear; }
.js [data-typewriter] .char.is-in { opacity: 1; }
[data-typewriter] .word { display: inline-block; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-typewriter] .char { opacity: 1; transform: none; transition: none; }
  .site-header.is-stuck { animation: none; }
}

/* 18. Inner pages: page header -------------------------------------------- */
.page-hero {
  position: relative; padding-block-start: 20px; margin-block-end: 90px;
  background: var(--navy);
  border-end-start-radius: var(--radius-section); border-end-end-radius: var(--radius-section);
}
.page-hero__inner {
  display: flex; padding: 120px 20px 50px;
  background: var(--mint) url("../img/bg/mint-page.jpg") 0 0 / cover no-repeat;
  border-end-start-radius: var(--radius-section); border-end-end-radius: var(--radius-section);
}
.page-hero__copy { width: 40%; padding: 60px 20px 0; }
.page-hero__title { margin-block-end: 35px; }
.page-hero__subtitle { max-width: 420px; }
.page-hero__media {
  width: 60%; min-height: 300px; display: grid; place-items: center;
  border-radius: var(--radius-section); background: var(--teal-800) center / cover no-repeat;
}
.page-hero__panel {
  display: grid; place-items: center;
  height: 302px; aspect-ratio: 460 / 333; margin-block: -1px; padding-inline: 50px; text-align: center;
  font-size: 24px; line-height: 37px;
  background: url("../img/shapes/page-panel.svg") center / contain no-repeat;
}
.page-hero__bar { display: flex; justify-content: center; min-height: 83px; margin-block-start: 20px; padding-inline: var(--gutter); }
.page-hero__tab-col { width: 33%; max-width: 488px; margin-inline-start: -60px; display: flex; }
.page-hero__tab {
  width: 413px; max-width: 100%; min-height: 84px; margin-block-end: -1px;
  display: flex; align-items: flex-end; justify-content: center;
  background: url("../img/shapes/tab-white-bottom.svg") center bottom / contain no-repeat;
}
.page-hero__badge-col { position: relative; width: 33%; max-width: 488px; }
.page-hero__badge {
  position: absolute; z-index: 20; inset-block-start: -80px; inset-inline-start: 20px;
  width: 369px; max-width: none; border-radius: var(--radius-section);
}

@media (max-width: 1024px) {
  .page-hero__inner { flex-direction: column; }
  .page-hero__copy { width: 100%; padding: 30px 0 20px; margin-block-end: 20px; }
  .page-hero__media { width: 100%; }
  .page-hero__tab-col { width: 100%; max-width: none; margin: 0; }
  .page-hero__badge-col { display: none; }
}
@media (max-width: 767px) {
  .page-hero { margin-block-end: 60px; }
  .page-hero__inner { padding: 70px 20px 20px; }
  .page-hero__copy { padding: 40px 0 20px; margin: 0; }
  .page-hero__title { margin-block-end: 15px; }
  .page-hero__panel { height: auto; aspect-ratio: auto; margin: 0; padding: 20px; font-size: 16px; line-height: 25px; color: var(--white); background: none; }
  .page-hero__tab-col { justify-content: center; }
  .page-hero__tab { min-height: 0; margin: 0; padding-block-end: 30px; background: none; }
}

/* Shared section shell for inner pages (soft glow behind the content) */
.section-glow { background: url("../img/bg/glow.webp") center / contain no-repeat; }
.wrap { max-width: var(--container); margin-inline: auto; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.lead-title { line-height: 1.2; }

@media (max-width: 1024px) {
  .grid-2 { grid-template-columns: 1fr; gap: 20px; }
}

/* 19. About ---------------------------------------------------------------- */
.about-intro { padding-block: 40px 115px; background: var(--white) url("../img/bg/glow.webp") center bottom / contain no-repeat; }
.about-intro__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-intro__col { padding: 10px var(--gutter); }
.about-intro__col > p { max-width: 600px; margin-block-end: 30px; }
.about-intro h2 { max-width: 678px; margin-block-end: 85px; }
.about-intro__col--text h2 { max-width: 600px; }
.about-intro__figure { padding-block: 47px 55px; text-align: center; }
.about-intro__figure img { display: inline-block; width: 620px; border-radius: var(--radius-section); }
.icon-list { margin-block-end: 49px; }
.icon-list li { position: relative; padding-block-end: 10px; padding-inline-start: 23px; }
.icon-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 5px; width: 14px; height: 14px;
  background: url("../img/icons/check-dark.svg") center / contain no-repeat;
}
.icon-list--target li::before { background-image: url("../img/icons/bullseye.svg"); }
.icon-list--divided li + li { padding-block-start: 10px; border-block-start: 1px solid var(--muted-line); }
.icon-list--divided li + li::before { inset-block-start: 15px; }

.mission { z-index: 7; padding: 85px 20px; background: var(--navy) url("../img/bg/mission.webp") center / cover no-repeat; }
.mission .t-xl { max-width: 1120px; margin-inline: auto; }

.offers > li { position: relative; margin-block-start: -60px; padding-inline: 20px; }
.offers > li:nth-child(1) { z-index: 5; background: var(--navy); }
.offers > li:nth-child(2) { z-index: 4; background: #276075; }
.offer { display: grid; grid-template-columns: 39% 1fr auto; align-items: center; gap: 20px; padding-block: 105px 35px; }
.offer p { max-width: 430px; }

.about-cards { padding: 100px 20px 0; }
.about-cards .card { min-height: 350px; padding: 65px 20px 55px 30px; gap: 20px; }
.about-cards .card--busywork { background-color: #0f475d; background-image: url("../img/pages/card-busywork.jpg"); }
.about-cards .card--busywork p { max-width: 630px; margin-block-end: 30px; }
.about-cards .card--busywork .t-h1 { max-width: 542px; }
.about-cards .card--mapping { padding-block-start: 55px; background-color: #dcfaf9; background-image: url("../img/pages/card-consultation-wide.jpg"); }
.about-cards .card--mapping p { max-width: 363px; margin-block-end: 30px; }
.about-cards .card--mapping .t-h1 { max-width: 514px; }

.clients--two-rows { padding-block: 75px 67px; }
.clients--two-rows .clients__grid { row-gap: 20px; }

@media (max-width: 1024px) {
  .about-intro { padding-block: 20px 60px; }
  .about-intro__grid { grid-template-columns: 1fr; }
  .about-intro h2 { margin-block-end: 40px; }
  .offer { grid-template-columns: 1fr 1fr; }
  .offer .t-h1 { grid-column: 1 / -1; }
  .clients--two-rows .clients__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
  .about-intro__figure img { width: 100%; }
  .mission { padding-block: 70px; }
  .offer { grid-template-columns: 1fr; padding-block: 95px 30px; }
  .about-cards { padding: 60px 0 0; }
  .clients--two-rows .clients__grid { grid-template-columns: repeat(3, 1fr); }
}

/* 20. Services ------------------------------------------------------------- */
.services { padding: 55px 20px 145px; }
.services__intro h2 { margin-block-end: 20px; }
.services__intro p { max-width: 600px; }
.services__intro p + p { margin-block-start: 24px; }
.service-card {
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding: 30px 50px 40px 40px; min-height: 290px;
  background: var(--white); border-radius: 30px; box-shadow: 0 0 40px rgba(0, 0, 0, .1);
}
.service-card img { width: 100%; height: 157px; object-fit: cover; border-radius: 34px; }
.service-card li::before { content: "- "; }
.services__closing { align-self: center; padding: 10px 30px; }

@media (max-width: 1024px) {
  .services { padding-block: 30px 80px; }
}
@media (max-width: 767px) {
  .service-card { padding: 25px 25px 30px; }
  .services__closing { padding: 30px 5px; }
}

/* 21. Solutions list ------------------------------------------------------- */
.solutions { padding-inline: var(--gutter); margin-block-end: 70px; }
.solutions__inner { max-width: 1118px; margin-inline: auto; padding-block-start: 10px; }
.solutions__intro { padding-block-end: 80px; }
.solutions__intro p + p { margin-block-start: 24px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 45px; }
.filters button {
  min-height: 30px; padding: 0 25px; border-radius: 15px;
  font-size: 17px; line-height: 30px; font-weight: 300; letter-spacing: .7px;
  color: #000; background: #f7f7f9;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.filters button:hover { background: #e7ebef; }
.filters button[aria-pressed="true"] { color: var(--white); background: var(--blue); }
.solutions__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; }
.solution-tile { position: relative; display: flex; flex-direction: column; }
.solution-tile[hidden] { display: none; }
.solution-tile__media { position: relative; z-index: 1; display: block; border-radius: 30px; overflow: hidden; }
.solution-tile__media img { width: 100%; aspect-ratio: 538 / 320; object-fit: cover; transition: transform .6s var(--ease); }
.solution-tile:hover .solution-tile__media img { transform: scale(1.05); }
.solution-tile__date {
  position: absolute; z-index: 2; inset-block-start: 0; inset-inline-start: 50%; transform: translateX(-36%);
  width: 198px; height: 66px; padding-block-start: 15px; text-align: center;
  font-size: 16px; line-height: 21px; color: var(--navy-deep);
  background: url("../img/shapes/tab-white-top.svg") center / cover no-repeat;
}
.solution-tile__body {
  flex: 1; margin-block-start: -40px; padding: 70px 100px 45px 50px;
  background: #f7f7f9; border-end-start-radius: 30px; border-end-end-radius: 30px;
}
.solution-tile__cats { display: flex; flex-wrap: wrap; align-items: center; margin-block: 5px; font-size: 16px; line-height: 18px; color: var(--blue); }
.solution-tile__cats span + span::before {
  content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 1px; margin-inline: 10px; background: #c3ccd2;
}
.solution-tile__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
.solution-tile__title a { color: var(--heading); }
.solution-tile__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.solutions__empty { padding-block: 40px; }

@media (max-width: 1024px) {
  .solutions__grid { gap: 20px; }
  .solution-tile__body { padding: 65px 30px 35px; }
}
@media (max-width: 767px) {
  .solutions__grid { grid-template-columns: 1fr; }
}

/* 22. Contact -------------------------------------------------------------- */
.contact-info { background: var(--white) url("../img/bg/glow.webp") center bottom / contain no-repeat; }
.contact-info__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding-block-start: 20px; }
.contact-details { padding-inline-start: 20px; }
.contact-details h2 { margin-block-end: 38px; }
.contact-details__address { max-width: 599px; margin-block-end: 52px; font-weight: 600; }
.contact-details__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-item { padding-block: 10px; margin-block-end: 20px; }
.contact-item h3 { margin-block-end: 18px; }
.contact-item p, .contact-item a { font-size: 24px; line-height: 37px; }
.with-icon { display: flex; align-items: center; gap: 12px; }
.with-icon svg { flex: none; width: 1em; height: 1em; fill: currentColor; }

.faq { position: relative; z-index: 10; padding: 20px 20px 40px; }
.faq h2 { margin-block-end: 60px; }
.accordion--faq { max-width: 651px; }
.accordion--faq .accordion__trigger { padding-block: 20px; font-size: 24px; line-height: 1.2; color: var(--heading); }
.accordion--faq .accordion__item.is-open .accordion__trigger { padding-block: 20px; }
.accordion--faq .accordion__icon { width: 34px; height: 34px; }
.accordion--faq .accordion__icon::before, .accordion--faq .accordion__icon::after { width: 16px; }

.contact-form-band {
  position: relative; z-index: 7; margin-block-start: -80px;
  background: #011a26 url("../img/bg/waves-form.webp") center / cover no-repeat;
  border-radius: var(--radius-section);
}
.contact-form-band__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block-end: 56px; }
.contact-form-band__copy { padding-block-start: 210px; padding-inline-start: var(--gutter); }
.contact-form-band__copy .t-xl { margin-block-end: 100px; }
.contact-form-band__copy p { max-width: 500px; }
.contact-form-band__form { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding-block-start: 255px; }
.contact-form-band__tab { position: absolute; inset-block-start: 0; inset-inline-start: -55px; width: 850px; max-width: none; pointer-events: none; }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 43px; padding-inline: var(--gutter); }
.form__field--wide, .form__actions, .form__status { grid-column: 1 / -1; }
.form input, .form textarea {
  width: 100%; min-height: 44px; padding: 9px 20px;
  font: inherit; font-size: 17px; line-height: 24px; color: var(--heading);
  background: #f4f6f7; border: 1px solid var(--muted-line); border-radius: 30px;
}
.form textarea { min-height: 116px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: #7a8b99; }
.form input:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 2px; border-radius: 30px; }
.form [aria-invalid="true"] { border-color: #e2584d; box-shadow: 0 0 0 2px rgba(226, 88, 77, .35); }
.form__hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { display: flex; justify-content: center; padding-block-start: 10px; }
.form__submit {
  min-width: 240px; min-height: 50px; padding: 10px 40px; border-radius: 50px;
  font-size: 20px; font-weight: 700; text-transform: uppercase; color: var(--white); background: var(--blue);
  transition: background-color .3s var(--ease);
}
.form__submit:hover { background: var(--blue-light); }
.form__submit[disabled] { opacity: .6; cursor: progress; }
.form__status { min-height: 24px; text-align: center; color: var(--white); }
.form__status.is-error { color: #ffb4ab; }
.form__status.is-success { color: #9af0c8; }

@media (max-width: 1024px) {
  .contact-info__grid { grid-template-columns: 1fr; }
  .contact-details { padding-inline: 20px; }
  .faq { padding-block-end: 120px; }
  .faq h2 { margin-block-end: 40px; }
  .accordion--faq { max-width: none; }
  .contact-form-band__grid { grid-template-columns: 1fr; padding-block-end: 60px; }
  .contact-form-band__copy { padding: 110px 20px 0; }
  .contact-form-band__copy .t-xl { margin-block-end: 30px; }
  .contact-form-band__form { padding-block-start: 50px; }
  .contact-form-band__tab { display: none; }
}
@media (max-width: 767px) {
  .contact-details__row { grid-template-columns: 1fr; }
  .contact-item p, .contact-item a { font-size: 20px; line-height: 30px; }
  .accordion--faq .accordion__trigger { font-size: 19px; }
  .form { grid-template-columns: 1fr; gap: 18px; padding-inline: 20px; }
}

/* 23. Case-study pages ------------------------------------------------------ */
.page-hero--case { margin-block-end: 0; }
.page-hero--case .page-hero__inner { justify-content: center; padding: 125px 0 60px; }
.page-hero--case .page-hero__row { display: flex; width: 100%; max-width: var(--container); }
.page-hero--case .page-hero__copy { width: 49.3%; }
.page-hero--case .page-hero__title { margin-block: -10px 50px; line-height: 1.2; }
.page-hero--case .page-hero__subtitle { max-width: 550px; }
.page-hero--case .page-hero__media { flex: 1; width: auto; min-height: 358px; margin-inline-end: 20px; background-color: transparent; background-position: 0 0; }
.page-hero--case .page-hero__bar { justify-content: flex-start; align-items: center; min-height: 84px; padding: 0; }
.page-hero__cta { width: 25%; display: flex; justify-content: center; }
.powered { width: 25%; display: flex; align-items: center; gap: 0 20px; flex-wrap: wrap; padding: 10px var(--gutter); color: var(--white); }
.powered span { width: 80px; }
.powered img { width: 80px; }

.case { padding-block: 110px 90px; background: url("../img/bg/glow.webp") center top / cover no-repeat; }
.case__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 50px; padding-inline: 20px; }
.case__col { display: flex; flex-direction: column; gap: 20px; padding: 10px var(--gutter); }
.case__col img, .case__col video { width: 100%; height: auto; margin-block-end: 20px; }
.case__col h2 { max-width: 550px; padding-block-end: 10px; }
.case__col * + h2 { margin-block-start: 20px; }
.case__col ul, .case__col ol { padding-inline-start: 22px; list-style: revert; }
.table-wrap { overflow-x: auto; }
.case table { width: 100%; table-layout: fixed; border-collapse: collapse; border: 1px solid #cececf; background: var(--white); text-align: start; }
.case th, .case td { padding: 8px 10px; border: 1px solid #cececf; vertical-align: middle; text-align: start; }
.case thead th, .case tr:first-child th { font-weight: 700; }
.post-nav { display: flex; justify-content: space-between; gap: 30px; padding: 70px 20px 0; }
.post-nav a { display: flex; flex-direction: column; gap: 5px; max-width: 400px; color: var(--text); }
.post-nav a:hover { color: var(--blue); }
.post-nav small { font-size: 15px; line-height: 21px; }
.post-nav__next { margin-inline-start: auto; text-align: end; align-items: flex-end; }

@media (max-width: 1650px) {
  .page-hero--case .page-hero__copy { padding-inline: 20px; }
}
@media (max-width: 1024px) {
  .page-hero--case .page-hero__inner { padding: 120px 20px 50px; }
  .page-hero--case .page-hero__row { flex-direction: column-reverse; }
  .page-hero--case .page-hero__copy { width: 100%; padding: 40px 0 0; margin: 0; }
  .page-hero--case .page-hero__media { flex: none; width: 100%; min-height: 0; aspect-ratio: 1408 / 768; margin: 0; background-size: contain; background-position: center; }
  .page-hero--case .page-hero__bar { padding-block-end: 30px; }
  .page-hero__cta, .powered { width: 50%; }
  .case { padding-block: 70px; }
  .case__grid { grid-template-columns: 1fr; gap: 20px; padding-inline: 0; }
}
@media (max-width: 767px) {
  .page-hero--case .page-hero__inner { padding: 100px 20px 40px; }
  .page-hero--case .page-hero__title { margin-block-end: 25px; }
  .case { padding-block: 60px; }
  .post-nav { flex-direction: column; padding-inline: 20px; }
  .post-nav__next { margin: 0; text-align: start; align-items: flex-start; }
}

/* 24. Text pages and 404 ---------------------------------------------------- */
.prose { max-width: 1170px; margin-inline: auto; padding: 10px var(--gutter) 110px; }
.prose h2, .prose h3 { margin-block: 22px 28px; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 600; color: var(--heading); }
.prose > :first-child { margin-block-start: 0; }
.prose p { margin-block-end: 22px; }
.prose ul, .prose ol { margin-block-end: 22px; padding-inline-start: 40px; list-style: revert; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.not-found { max-width: 1170px; margin-inline: auto; padding: 0 var(--gutter) 110px; }
.not-found p { margin-block-end: 30px; }
.not-found__links { display: flex; flex-wrap: wrap; gap: 15px; }