/* ONE FRAME — homepage styles
   Rebuilt from the original Wix site. Reference layout widths: desktop > 1000px, tablet 751–1000px, mobile ≤ 750px.
   Values are written in vw so the layout scales the same way the original does. */

@font-face {
  font-family: "Bahnschrift";
  src: url("../assets/fonts/bahnschrift.woff2") format("woff2"), url("../assets/fonts/bahnschrift.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Questrial";
  src: url("../assets/fonts/questrial-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --vw: 1vw; /* 1% of the page width without the scrollbar; kept up to date by main.js */
  --yellow: #ffda00;
  --bg: #f4f4f4;
  --black: #000;
  --dark: #232322;
  --tile: #050807;
  --grey: #d8d8d8;
  --blue: #1a6aff;
  --font: "Bahnschrift", "Segoe UI", Arial, sans-serif;
  --ease-fade: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --ease-move: cubic-bezier(0.645, 0.045, 0.355, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: #000;
  font-family: var(--font);
  font-size: 16px;
  overflow-x: hidden;
}
img, svg, canvas, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; }

/* Body copy uses the original's tight tracking. */
p { font-size: 16px; line-height: 1.6; letter-spacing: -0.03em; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 54;
  height: calc(calc(4.73 * var(--vw)) + 20px);
  background: var(--yellow);
}
.site-nav {
  position: absolute; left: calc(4.5 * var(--vw)); top: 50%; transform: translateY(-50%);
  display: flex; gap: 30.5px;
  font-size: 14px; letter-spacing: 0.05em; line-height: 17px;
}
.site-nav a[aria-current="page"] { color: #fff; }
.site-logo { position: absolute; left: 50%; top: 10px; width: calc(10.6 * var(--vw)); transform: translateX(-50%); }
.site-logo img { width: 100%; height: auto; aspect-ratio: 428 / 191; object-fit: cover; }
.social-links {
  position: absolute; right: calc(4.5 * var(--vw)); top: 50%; transform: translateY(-50%);
  display: flex; gap: 11px; font-size: 14px; line-height: 22.4px;
}
.menu-toggle { display: none; }
.social-links a, .footer-social a { cursor: default; }
.social-links a[href], .footer-social a[href] { cursor: pointer; }

/* Menu overlay (tablet and phone): a yellow panel with the logo, a close button and the links. */
.menu-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.6); }
.menu-overlay[hidden] { display: none; }
.menu-overlay__panel {
  position: absolute; top: 0; left: 0; width: 100%; height: 760px; max-height: 100%;
  background: var(--yellow); color: #000;
}
.menu-overlay__logo {
  display: block; position: absolute; left: calc(50% + 9.5px); top: 10px; width: 125px; height: auto;
  aspect-ratio: 428 / 191; object-fit: cover; transform: translateX(-50%);
}
.menu-overlay__close { position: absolute; right: 16px; top: 25px; width: 20px; height: 20px; background: none; border: 0; padding: 0; cursor: pointer; }
.menu-overlay__close img { width: 20px; height: 20px; }
.menu-overlay nav {
  position: absolute; left: 0; right: 0; top: 132px; display: flex; flex-direction: column; align-items: center; gap: 28px;
  font-size: min(34.4px, calc(5.333 * var(--vw))); line-height: 1.2;
}
.menu-overlay nav a { display: block; }
.menu-overlay nav a[aria-current="page"] { color: #fff; }

/* ---------- Reusable pieces ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 250px; height: 45px; border: 1px solid; border-radius: 25px 25px 25px 0;
  font-size: 14px; line-height: 17px; cursor: pointer;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.btn--on-yellow { background: var(--yellow); border-color: #000; color: #000; }
.btn--on-yellow:hover { background: #000; border-color: #000; color: var(--yellow); }
.btn--on-black { background: #000; border-color: #fff; color: #fff; }
.btn--on-black:hover { background: #fff; border-color: #fff; color: #000; }
.btn--on-black2 { background: #000; border-color: var(--yellow); color: var(--yellow); }
.btn--on-black2:hover { background: var(--yellow); border-color: var(--yellow); color: #000; }
.btn--on-white { background: #000; border-color: #000; color: var(--yellow); width: 160px; }
.btn--on-white:hover { background: var(--yellow); border-color: #000; color: #000; }
.btn--cta { width: 220px; }

.section-title { font-size: clamp(28px, calc(4.1667 * var(--vw)), 36px); line-height: 1; font-weight: 400; letter-spacing: -0.03em; }
.section-title--light { color: #fff; }

.hero { position: relative; display: flow-root; padding: 0 calc(4 * var(--vw)) 30px; }
.hero { position: relative; padding: 0 calc(4 * var(--vw)) 30px; }
.hero__title {
  font-size: clamp(46px, calc(6.25 * var(--vw)), 100px); line-height: 1.2; font-weight: 400; letter-spacing: -0.03em;
  max-width: calc(66 * var(--vw)); margin-top: calc(calc(19 * var(--vw)) - 51px - 0.1em);
}
.hero__accent { color: var(--yellow); }
.hero__burst {
  position: absolute; left: calc(83 * var(--vw)); top: calc(80px + calc(4 * var(--vw)) + calc(0.3 * var(--vw))); width: calc(9.26 * var(--vw)); aspect-ratio: 1;
}
.hero__burst canvas { width: 100%; height: 100%; }
.hero__burst video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- Services row 1 ---------- */
.services-a {
  display: grid; grid-template-columns: 46fr 1.2fr 16.6fr 1.2fr 35fr; padding-bottom: calc(1.3 * var(--vw));
}
.services-a .card h2 { font-size: clamp(28px, calc(4.1667 * var(--vw)), 36px); font-weight: 400; line-height: 1.19; }
.card--yellow {
  grid-column: 1; background: var(--yellow); border-radius: 0 40px 0 0;
  padding: 0 0 0 calc(3.65 * var(--vw)); display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.services-a .card--yellow h2 { line-height: 1; }
.card--yellow p { max-width: 74.6%; margin: 16px 0 18px; }
.card--grey {
  grid-column: 3; align-self: end; height: 64.5%; background: var(--grey); border-radius: 40px;
  display: grid; place-items: center;
}
.arrow-down { width: calc(3.93 * var(--vw)); height: auto; }
.card--black {
  grid-column: 5; background: #000; color: #fff; border-radius: 40px 0 0 0;
  padding: calc(3.4 * var(--vw)) calc(1.6 * var(--vw)) calc(1.75 * var(--vw)) calc(3.5 * var(--vw));
}
.card--black h2 { letter-spacing: -0.03em; line-height: 1.19; }
.card--black p { margin: calc(1.2 * var(--vw)) 0 calc(1.75 * var(--vw)); }

/* ---------- Services row 2 ---------- */
.services-b {
  display: grid; grid-template-columns: 28.8fr 1.2fr 48.3fr 1.2fr 19.5fr 1fr; align-items: start;
  padding-bottom: calc(5 * var(--vw));
}
.photo { grid-column: 1; height: 225px; background: var(--dark); border-radius: 0 40px 40px 0; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.card--black2 {
  grid-column: 3; height: 352px; background: #000; color: var(--yellow); border-radius: 40px;
  padding: 0 0 0 calc(3.9 * var(--vw)); display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.card--black2 h2 { font-size: clamp(28px, calc(4.1667 * var(--vw)), 36px); font-weight: 400; line-height: 1.2; }
.card--black2 p { margin: 15px 0 22px; max-width: 95.9%; letter-spacing: -0.03em; }
.card--logo { grid-column: 5; height: 225px; background: var(--yellow); border-radius: 40px; display: grid; place-items: center; }
.logo-mark { height: calc(9.5 * var(--vw)); width: auto; }

/* ---------- Why One Frame ---------- */
.why { background: var(--bg); }
.why__inner { background: #fff; border-radius: 40px 40px 0 0; padding: calc(62px + calc(5 * var(--vw))) calc(4 * var(--vw)) calc(62px + calc(2 * var(--vw))); }
.why__label { font-size: clamp(28px, calc(4.1667 * var(--vw)), 36px); font-weight: 400; line-height: 1; letter-spacing: -0.03em; }
.hl { background: var(--yellow); padding: 0 0.14em; }
.why__body { margin: 104px 0 0 calc(12.9 * var(--vw)); max-width: calc(67.8 * var(--vw)); }
.why__headline { font-size: clamp(40px, calc(4.9 * var(--vw)), 80px); line-height: 1.19; letter-spacing: -0.03em; }
.why__text { margin-top: 40px; }
.why .btn { margin-top: 20px; }

/* ---------- Our Values ---------- */
.values { position: relative; background: #fff; padding: calc(4.15 * var(--vw)) calc(4 * var(--vw)) calc(4 * var(--vw)); }
.values__grid {
  margin: calc(6 * var(--vw)) 0 0 calc(9.2 * var(--vw)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.value {
  height: 362px; background: var(--bg); border-radius: 40px; padding: 9.9% 7.5% 0 7.5%;
}
.value.is-yellow { background: var(--yellow); border-radius: calc(3.167 * var(--vw)); }
.value img { height: calc(4.2 * var(--vw)); width: auto; }
.value h3 { font-size: clamp(28px, calc(4.1667 * var(--vw)), 36px); font-weight: 400; line-height: 1; margin-top: 21px; }
.value p { margin-top: 21px; letter-spacing: normal; }
.value--creativity { grid-column: 1; grid-row: 1; }
.value--integrity { grid-column: 2; grid-row: 1; }
.value--collaboration { grid-column: 3; grid-row: 1; }
.value--results { grid-column: 2; grid-row: 2; }
.value--adaptability { grid-column: 3; grid-row: 2; }

/* ---------- Marketing Plan (sections stack as you scroll) ---------- */
.plan {
  position: sticky; top: 0; height: 100vh; background: var(--yellow);
  display: grid; grid-template-columns: 1fr 1fr; padding: calc(4 * var(--vw)) calc(4 * var(--vw)) 0;
}
.plan__panel { position: relative; overflow: hidden; }
.plan > .plan__panel:first-child { border-radius: 40px 0 0 0; }
.plan > .plan__panel:last-child { border-radius: 0 40px 0 0; }
.plan__panel--black { background: #000; color: #fff; display: grid; place-items: center; }
.plan__panel--photo { background: var(--dark); }
.plan__panel--photo img { width: 100%; height: 100%; object-fit: cover; }
.plan__panel--grey { background: var(--bg); }
.plan__panel--white { background: #fff; }
.plan__panel--yellow { background: var(--yellow); }
.plan__burst { position: absolute; left: 50%; top: 50%; width: calc(15.9 * var(--vw)); height: calc(15.9 * var(--vw)); margin: calc(-7.95 * var(--vw)) 0 0 calc(-7.95 * var(--vw)); animation: motion-spin 7s linear infinite; }
.plan__burst img { width: 100%; height: 100%; }
.plan__intro-title { position: relative; font-size: clamp(28px, calc(4.1667 * var(--vw)), 36px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; text-align: center; max-width: calc(10.6 * var(--vw)); }
.step { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 22.5%; text-align: center; }
.step img { width: calc(4 * var(--vw)); height: calc(4 * var(--vw)); }
.step h3 { font-size: clamp(28px, calc(4.1667 * var(--vw)), 36px); font-weight: 400; line-height: 1.1; margin-top: 26px; }
.step p { margin-top: 27px; }

.plan--cta { display: block; height: auto; padding: calc(4 * var(--vw)) calc(4 * var(--vw)) 0; }
.cta {
  background: #000; color: #fff; border-radius: 40px 40px 0 0; text-align: center;
  padding: calc(30px + calc(7.9 * var(--vw))) 0 calc(31px + calc(8.5 * var(--vw))); display: flex; flex-direction: column; align-items: center;
}
.cta__spark { height: calc(4.14 * var(--vw)); width: auto; }
.cta h2 { font-size: clamp(28px, calc(4.1667 * var(--vw)), 36px); font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; margin-top: 43px; max-width: 56.5%; }
.cta p { margin-top: 44px; }
.cta .btn { margin-top: 39px; }

/* ---------- Testimonials ---------- */
.testimonials {
  position: relative; z-index: 2; background: var(--dark); color: #fff; border-radius: 40px 40px 0 0;
  padding: 60px calc(4 * var(--vw)) calc(60px + calc(4.8 * var(--vw)));
}
.testimonials__head { max-width: 520px; }
.testimonials__sub { font-size: 20px; line-height: 1.4; margin-top: calc(2.3 * var(--vw)); max-width: 470px; }
.testimonials__grid {
  margin: calc(5.8 * var(--vw)) auto 0; width: calc(78.9 * var(--vw)); display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 11px;
}
.quote {
  flex: 0 0 calc(25.8 * var(--vw)); background: #000; border-radius: 40px; padding: 47px calc(2.6 * var(--vw));
  display: flex; flex-direction: column; justify-content: center;
}
.quote p { font-size: 18px; line-height: 1.4; letter-spacing: -0.03em; }
.quote figcaption { margin-top: 27px; text-align: right; font-size: 16px; line-height: 1.6; letter-spacing: -0.03em; display: flex; flex-direction: column; }
.quote--ahmed figcaption { margin-top: 31px; }
.quote--ahmed { order: 3; } .quote--mustafa { order: 2; } .quote--sara { order: 1; }

/* ---------- Our Clients ---------- */
.clients { position: relative; z-index: 2; background: var(--yellow); border-radius: 0 0 40px 40px; padding: calc(6.25 * var(--vw)) calc(4 * var(--vw)) calc(10.7 * var(--vw)); }
.clients__grid { margin-top: calc(3.75 * var(--vw)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; width: calc(91.8 * var(--vw)); }
.client { aspect-ratio: 2 / 1; background: var(--tile); border-radius: calc(3.125 * var(--vw)); display: grid; place-items: center; }
.client__logo { position: relative; display: block; width: 38.5%; aspect-ratio: 337 / 290; overflow: hidden; }
.client__logo img {
  position: absolute; max-width: none; width: calc(2000 / var(--cw) * 100%); height: auto;
  left: calc(var(--cx) / var(--cw) * -100%); top: calc(var(--cy) / var(--ch) * -100% * 1);
}
.client__logo--1 { --cx: 838; --cy: 544; --cw: 337; --ch: 290; }
.client__logo--2 { --cx: 850; --cy: 570; --cw: 311; --ch: 268; }
.client__logo--3 { --cx: 876; --cy: 598; --cw: 248; --ch: 213; }
.client__logo--7 { --cx: 860; --cy: 587; --cw: 280; --ch: 240; }
/* wrappers have the same shape as the crop, so the image just needs scaling by crop width */
.client__logo--2, .client__logo--3, .client__logo--7 { aspect-ratio: var(--cw) / var(--ch); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; z-index: 1; background: #fff; padding: 132px calc(4 * var(--vw)) 67px;
  display: grid; grid-template-columns: calc(4 * var(--vw)) calc(10.2 * var(--vw)) calc(18.3 * var(--vw)) calc(10.7 * var(--vw)) 1fr; grid-template-columns: calc(30 * var(--vw)) calc(10.2 * var(--vw)) 1fr; column-gap: 0;
}
.site-footer__logo { display: block; grid-column: 1; grid-row: 1; width: calc(30 * var(--vw)); align-self: start; }
.site-footer__logo img { width: 100%; height: auto; aspect-ratio: 428 / 191; object-fit: cover; }

.newsletter { position: absolute; left: calc(42.3 * var(--vw)); top: 130px; width: calc(51.9 * var(--vw)); padding: 24px 24px 0; }
.newsletter__title { font-family: "Questrial", var(--font); font-size: 16px; line-height: 24px; letter-spacing: 0; }
.newsletter__label { display: block; margin-top: 14px; font-size: 14px; line-height: 19.6px; }
.newsletter__input {
  display: block; width: 100%; height: 37px; margin-top: 8px; border: 0; border-bottom: 1px solid #000; border-radius: 0;
  background: transparent; font: inherit; font-size: 14px; padding: 8px 2px 8px 0; outline: 0;
}
.newsletter__input:focus-visible { border-bottom-width: 2px; }
.newsletter__button {
  display: block; margin: 13px 0 0 auto; width: 274px; height: 43px; border-radius: 100px; border: 1px solid #000;
  background: #000; color: var(--yellow); font-size: 16px; cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.newsletter__button:hover { background: var(--yellow); color: #000; }
.newsletter__status { margin-top: 10px; font-size: 14px; line-height: 1.4; }
.newsletter__status:empty { display: none; }

.footer-nav, .footer-contact, .footer-social, .footer-privacy, .footer-copy { position: absolute; }
.footer-nav { left: calc(4 * var(--vw)); top: 396px; display: flex; flex-direction: column; font-size: 14px; line-height: 17px; }
.footer-nav a { padding: 2px 8px 2px 8px; margin-bottom: 4.5px; }
.footer-nav a[aria-current="page"] { color: var(--blue); }
.footer-contact { left: calc(14.2 * var(--vw)); top: 396px; display: flex; flex-direction: column; font-size: 14px; line-height: 22.4px; }
.footer-social { left: calc(32.5 * var(--vw)); top: 396px; font-size: 14px; line-height: 22.4px; }
.footer-privacy { left: calc(43.2 * var(--vw)); top: 400px; font-size: 14px; line-height: 22.4px; }
.footer-copy { right: calc(4 * var(--vw)); top: 496px; font-size: 14px; line-height: 1; letter-spacing: 0; }
.site-footer { min-height: 577px; }

/* ================= Tablet ================= */
@media (max-width: 1000px) {
  .site-header { height: 70px; }
  .site-nav { display: none; }
  .menu-toggle {
    display: grid; place-items: center; position: absolute; left: 36px; top: 15px; width: 42px; height: 40px;
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .menu-toggle svg { width: 40px; height: 26px; }
  .social-links { right: calc(4.5 * var(--vw)); }

  .hero { padding: 0 calc(4 * var(--vw)) 30px; }
  .hero__title { font-size: clamp(46px, calc(7.03 * var(--vw)), 100px); max-width: calc(64 * var(--vw)); margin-top: calc(calc(22.6 * var(--vw)) - 0.1em); }
  .hero__burst { top: calc(80px + calc(4 * var(--vw)) + calc(0.3 * var(--vw))); }

  .services-a .card h2 { font-size: 28px; }
  .card--yellow { padding-left: calc(3.7 * var(--vw)); }
  .services-a .card--yellow h2 { line-height: normal; }
  .card--yellow p { max-width: 83%; margin: 10px 0 10px; }
  .card--black { padding: 50px calc(6.8 * var(--vw)) 25px calc(3.5 * var(--vw)); }
  .card--black p { margin: 10px 0 10px; }
  .card--black h2 { max-width: 199px; }
  .btn { width: 220px; }
  .card--black .btn { width: 197px; }
  .arrow-down { width: calc(4.85 * var(--vw)); }

  .services-b { padding-bottom: calc(5.1 * var(--vw)); }
  .photo { height: 196px; border-radius: 0 30px 30px 0; }
  .card--black2 { height: auto; border-radius: 30px; padding: 25px 31px; }
  .card--black2 h2 { font-size: 36px; }
  .card--black2 p { margin: 10px 0 9px; max-width: 100%; }
  .card--logo { height: 196px; border-radius: 30px; }
  .logo-mark { height: 80px; }

  .why__inner { padding: calc(62px + calc(5 * var(--vw))) calc(4 * var(--vw)) 40px; }
  .why__body { margin: 84px 0 0 0; max-width: calc(73.5 * var(--vw)); }
  .why__headline { font-size: calc(6.25 * var(--vw)); }

  .values { padding: calc(4.3 * var(--vw)) calc(4 * var(--vw)) calc(4.1 * var(--vw)); }
  .values__grid { margin: calc(6.2 * var(--vw)) 0 0 calc(9 * var(--vw)); width: calc(82.8 * var(--vw)); grid-template-columns: repeat(2, 330px); gap: 7.5px; }
  .value { height: 360px; padding: 10% 7.6% 0; }
  .value.is-yellow { border-radius: 25.5px; }
  .value img { height: 53px; }
  .value h3 { font-size: 36px; margin-top: 18px; }
  .value--integrity { grid-column: 1; grid-row: 1; }
  .value--collaboration { grid-column: 2; grid-row: 1; }
  .value--adaptability { grid-column: 1; grid-row: 2; }
  .value--creativity { grid-column: 2; grid-row: 2; }
  .value--results { grid-column: 2; grid-row: 3; }

  .plan__burst { width: calc(15.9 * var(--vw)); height: calc(15.9 * var(--vw)); }
  .step { padding: 0 17%; }
  .step img { width: calc(6.6 * var(--vw)); height: calc(6.6 * var(--vw)); }

  .plan--cta { padding: calc(4 * var(--vw)) calc(4 * var(--vw)) 0; height: 100vh; display: grid; }
  .cta { padding: 251px 0 130px; height: 100%; }
  .cta__spark { height: 101px; }
  .cta h2 { max-width: 65%; }

  .testimonials { padding: 65px calc(4 * var(--vw)) 65px; }
  .testimonials__head { max-width: 240px; }
  .testimonials__grid { width: calc(79 * var(--vw)); display: grid; grid-template-columns: 1fr 1fr; gap: 7px; flex-direction: unset; }
  .quote { flex: unset; height: 346px; padding: 0 calc(4 * var(--vw)); }
  .quote--mustafa { order: unset; grid-column: 1; grid-row: 1; }
  .quote--sara { order: unset; grid-column: 2; grid-row: 1; }
  .quote--ahmed { order: unset; grid-column: 2; grid-row: 2; }

  .clients { padding: calc(6.3 * var(--vw)) calc(4 * var(--vw)) calc(13.3 * var(--vw)); }
  .clients__grid { margin-top: 63px; gap: 8px; width: calc(92 * var(--vw)); }
  .client { aspect-ratio: 179 / 127; }

  .site-footer { min-height: 563px; padding-top: 74px; }
  .newsletter { left: calc(45.3 * var(--vw)); top: 70px; width: calc(50 * var(--vw)); padding: 13px 0 0 0; }
  .newsletter__button { width: 123px; }
  .footer-nav { left: 32px; top: 332px; }
  .footer-contact { left: calc(21 * var(--vw)); top: 332px; }
  .footer-social { left: calc(51.8 * var(--vw)); top: 332px; }
  .footer-privacy { left: calc(69.2 * var(--vw)); top: 336px; }
  .footer-copy { left: calc(4 * var(--vw)); right: auto; top: 490px; }
}

/* ================= Mobile ================= */
@media (max-width: 750px) {
  .site-header { height: 81px; }
  .menu-toggle { left: auto; right: 21px; top: 18px; }
  .social-links { display: none; }
  .site-logo { top: 6px; width: calc(37.4 * var(--vw)); }

  .hero { padding: 0 calc(4.1 * var(--vw)) 30px; }
  .hero__title { font-size: 46px; max-width: none; margin-top: calc(105px - 0.1em); }
  .hero__burst { left: calc(79 * var(--vw)); top: 80px; width: calc(17.2 * var(--vw)); }

  .services-a { grid-template-columns: 1fr; row-gap: 8px; padding-bottom: 8px; }
  .services-a .card { grid-column: 1; }
  .card--yellow { padding: 32px calc(11.5 * var(--vw)) 32px calc(7.95 * var(--vw)); }
  .services-a .card--yellow h2 { line-height: normal; }
  .card--yellow p { max-width: none; margin: 12px 0 12px; }
  .card--black { padding: 32px calc(21 * var(--vw)) 31px calc(7.95 * var(--vw)); border-radius: 40px 0 0 0; }
  .card--black h2 { max-width: none; }
  .card--black p { margin: 12px 0 12px; max-width: calc(68.97 * var(--vw)); }
  .card--grey { order: 3; height: 150px; align-self: auto; border-radius: 40px; }
  .arrow-down { width: 42px; }
  .btn, .card--black .btn { width: 210px; }

  .services-b { grid-template-columns: 1fr; padding: 0 calc(2.05 * var(--vw)) 7px; row-gap: 8px; }
  .services-b > * { grid-column: 1; }
  .photo { height: 191px; border-radius: 0 30px 30px 0; }
  .card--black2 { min-height: 489px; padding: 0 calc(9.5 * var(--vw)); align-items: center; text-align: center; }
  .card--black2 h2 { font-size: 28px; }
  .card--black2 p { margin: 25px 0 25px; }
  .card--logo { height: 130px; }
  .logo-mark { height: 110px; }

  .why__inner { padding: 59px calc(4.1 * var(--vw)) 24px; }
  .why__body { margin: 27px 0 0 0; max-width: none; }
  .why__headline { font-size: 40px; line-height: 1.2; }
  .why__text { margin-top: 17px; }
  .why .btn { margin-top: 19px; width: 160px; }

  .values { padding: 41px calc(7.95 * var(--vw)) 37px; }
  .values__grid { margin: 25px 0 0; width: auto; grid-template-columns: 1fr; gap: 10px; }
  .value { height: 360px; border-radius: 41.8px; padding: 10% 6.2% 0; }
  .value.is-yellow { border-radius: 41.8px; }
  .value h3 { font-size: 28px; }
  .value p { margin-top: 18px; }
  .value > * { grid-column: auto; }
  .value--collaboration, .value--integrity, .value--creativity, .value--adaptability, .value--results { grid-column: 1; grid-row: auto; }

  .plan { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; padding: calc(4.1 * var(--vw)) calc(4.1 * var(--vw)) 0; }
  .plan > .plan__panel:first-child { border-radius: 40px 40px 0 0; }
  .plan > .plan__panel:last-child { border-radius: 0; }
  .plan__burst { width: calc(36.7 * var(--vw)); height: calc(36.7 * var(--vw)); margin: calc(-18.35 * var(--vw)) 0 0 calc(-18.35 * var(--vw)); animation: none; }
  .plan__intro-title { max-width: calc(31 * var(--vw)); }
  .step { padding: 0 12.5%; }
  .step img { width: calc(12 * var(--vw)); height: calc(12 * var(--vw)); }

  .plan--cta { padding: calc(4.1 * var(--vw)) calc(4.1 * var(--vw)) 0; }
  .cta { padding: 257px 0 35px; }
  .cta__spark { height: 44px; }
  .cta h2 { max-width: 64%; margin-top: 59px; }
  .cta p { margin-top: 44px; max-width: 65%; }
  .btn--cta { width: 200px; }

  .testimonials { padding: 61px calc(4.1 * var(--vw)) 35px; }
  .testimonials__head .section-title { max-width: 130px; line-height: 1.143; }
  .testimonials__sub { font-size: 18px; line-height: 1.4; margin-top: 16px; max-width: 215px; }
  .testimonials__grid { margin-top: 37px; width: auto; grid-template-columns: 1fr; gap: 10px; }
  .quote { height: 309px; padding: 0 36px; }
  .quote--sara { grid-column: 1; grid-row: 1; }
  .quote--mustafa { grid-column: 1; grid-row: 2; }
  .quote--ahmed { grid-column: 1; grid-row: 3; }

  .clients { padding: 38px calc(4.1 * var(--vw)) 83px; }
  .clients__grid { margin-top: 28px; grid-template-columns: 1fr 1fr; gap: 10px; width: auto; }
  .client { aspect-ratio: 174 / 104; border-radius: 40px; }

  .site-footer { min-height: 0; padding: 37px 4.1% 31px; display: block; }
  .site-footer__logo { width: calc(30 * var(--vw)); }
  .newsletter { position: static; width: auto; margin-top: 24px; padding: 0 24px; }
  .newsletter__button { width: 100%; }
  .footer-nav, .footer-contact, .footer-social, .footer-privacy, .footer-copy { position: static; }
  .footer-nav { margin-top: 56px; font-size: 15px; }
  .footer-nav a { padding-left: 8px; margin-bottom: 2px; }
  .footer-contact { margin-top: 39px; font-size: 14px; line-height: 23.8px; }
  .footer-social { margin-top: 47px; }
  .footer-social li { margin-bottom: 2px; }
  .footer-privacy { display: block; margin-top: 37px; }
  .footer-copy { margin-top: 50px; }
}

/* ================= Entrance animations =================
   Same keyframes, timings and easings as the original Wix motion layer.
   They only start when script adds .is-in (when the element scrolls into view),
   and they only hide anything while JavaScript is confirmed to be running. */
@keyframes motion-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes motion-glideIn {
  0% { opacity: 0; animation-timing-function: step-end; }
  0.0001% { opacity: 1; transform: translate(var(--mx, 0), var(--my, 0)); }
  100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes motion-slideIn {
  0.0001% { opacity: 1; transform: translate(var(--mx, 100%), 0); clip-path: var(--clip, polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)); }
  100% { transform: translate(0, 0); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}
@keyframes motion-spinIn {
  0.0001% { scale: var(--motion-scale, 0); rotate: var(--motion-rotate, -90deg); }
  100% { scale: 1; rotate: 0deg; }
}
@keyframes motion-spin { from { rotate: -360deg; } to { rotate: 0deg; } }
@keyframes motion-breathe { 0% { transform: translateY(0); } 25% { transform: translateY(10px); } 75% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
@keyframes motion-bounceIn {
  0% { transform: translateY(0); }
  0.0001% { animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translateY(-50px); }
  30% { animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); transform: translateY(0); }
  42% { animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translateY(-17.5px); }
  54% { animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); transform: translateY(0); }
  62% { animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translateY(-10.5px); }
  74% { animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); transform: translateY(0); }
  82% { animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translateY(-4.5px); }
  90% { animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); transform: translateY(0); }
  95% { animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); transform: translateY(-1px); }
  100% { animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .js .anim { animation-play-state: paused; animation-fill-mode: backwards; animation-delay: 1ms; animation-iteration-count: 1; }
  .js .anim.is-in { animation-play-state: running; }

  .js .anim--fade { animation-name: motion-fadeIn; animation-duration: 1200ms; animation-timing-function: var(--ease-fade); }
  .js .anim--glide-left { animation-name: motion-glideIn; animation-duration: 1200ms; animation-timing-function: var(--ease-move); --mx: calc(-100% - var(--motion-left, 0px)); }
  .js .anim--glide-up { animation-name: motion-glideIn; animation-duration: 1200ms; animation-timing-function: var(--ease-move); --my: calc(100vh - var(--motion-top, 0px)); }
  .js .anim--glide-up-linear { animation-name: motion-glideIn; animation-duration: 1200ms; animation-timing-function: linear; --my: 100%; }
  .js .anim--glide-up-half { animation-name: motion-glideIn; animation-duration: 1200ms; animation-timing-function: var(--ease-move); --my: 50%; }
  .js .anim--slide-right {
    animation-name: motion-slideIn, motion-fadeIn; animation-duration: 1200ms, 1200ms;
    animation-timing-function: var(--ease-move), var(--ease-move); --mx: 100%;
  }
  .js .anim--spin {
    animation-name: motion-fadeIn, motion-spinIn; animation-duration: 0ms, 1500ms;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19), linear;
  }
  /* the down arrow: bounces in, then keeps bobbing gently */
  .js .anim--bounce {
    animation-name: motion-breathe, motion-fadeIn, motion-bounceIn;
    animation-duration: 2400ms, 648ms, 1200ms;
    animation-timing-function: linear, cubic-bezier(0.25, 0.46, 0.45, 0.94), linear;
    animation-iteration-count: infinite, 1, 1;
  }
  /* the Marketing Plan burst only turns while it is on screen */
  .plan__burst { animation-play-state: paused; }
  .plan__burst.is-in { animation-play-state: running; }
  .plan__burst:not(.is-in) { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .plan__burst { animation: none; }
  .arrow-down { animation: none; }
}
/* On phones the original turns these particular effects off. */
@media (max-width: 750px) {
  .js .anim--bounce, .js .anim--spin { animation: none; }
  .js .testimonials .anim--glide-up-linear, .js .testimonials .anim--fade, .js .clients .anim--fade, .js .why.anim { animation: none; }
}

/* The header is yellow at the very top of a page and turns white as soon as the page is scrolled (as on the original). */
.site-header { transition: background-color 0.3s; }
.site-header.is-scrolled { background: #fff; }

/* Spam trap: a field real visitors never see. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Once the header turns white, the current page's link turns black so it stays readable (it vanished on the original). */
.site-nav a { transition: color 0.3s; }
.site-header.is-scrolled .site-nav a[aria-current="page"] { color: #000; }