/* lokadconsult.com — base: fonts, tokens, shell (nav, menu, blur strip, footer), shared type and components.
   Values measured on the live Framer site (crawl/measure/*.txt, crawl/animations.md). Breakpoints = Framer's:
   desktop >= 1200, tablet 810–1199, phone < 810. */

@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Google Sans"; src: url("/assets/fonts/google-sans-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fira Sans Extra Condensed"; src: url("/assets/fonts/fira-sans-extra-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --navy: #123048;        /* rgb(18,48,72) */
  --ink: #0e2639;         /* headings on light */
  --ink-2: #07141f;       /* h3/h5/h6 */
  --text: #4b4744;        /* body */
  --page: #e8ecf0;
  --light: #eef2f6;
  --card: #f3f4f6;
  --cyan: #79cfdd;
  --pill: #e5e7eb;
  --pill-hover: #a3b5c4;
  --black: #040c14;
  --f-display: "Poppins", sans-serif;
  --f-body: "Google Sans", sans-serif;
  --f-ui: "Inter", sans-serif;
  /* Framer component transitions as CSS easings (sampled from the springs): 500/60 over .6 s, and the
     duration-based spring .4 s / bounce .2 over .45 s. Checked against the live hover curves (tools/r2-hoverprobe.mjs). */
  --spring: linear(0,0.069,0.197,0.328,0.444,0.543,0.625,0.692,0.748,0.794,0.831,0.861,0.887,0.907,0.924,0.938,0.949,0.958,0.966,0.972,0.977,0.981,0.985,0.987,0.99,0.992,0.993,0.994,0.995,0.996,1);
  --spring-b4: linear(0,0.045,0.149,0.28,0.417,0.545,0.659,0.754,0.831,0.89,0.934,0.966,0.987,1.001,1.009,1.014,1.015,1.014,1.013,1.011,1.009,1.007,1.005,1.004,1.003,1.002,1.001,1.001,1,1,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 16px/24px var(--f-body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
mark { background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
.ico { width: 100%; height: 100%; fill: currentColor; }
.brk { word-break: break-all; }

/* ---------- layout ---------- */
.wrap { max-width: 1280px; margin: 0 auto; }
.sec { padding: 96px 48px; }
@media (max-width: 809.98px) { .sec { padding: 64px 16px; } }

/* ---------- type ---------- */
.label, .body { font: 400 16px/24px var(--f-body); color: var(--text); }
.lead { font: 400 20px/30px var(--f-body); letter-spacing: -.2px; color: var(--text); }
.h-hero { font: 900 100px/100px var(--f-display); letter-spacing: -1px; text-transform: uppercase; color: #fff; }
.h2 { font: 900 56px/61.6px var(--f-display); letter-spacing: -.3px; text-transform: uppercase; color: var(--ink); overflow-wrap: break-word; word-break: break-word; }
.h2-navy { color: var(--navy); }
.h2-light { color: #fff; }
.h3 { font: 500 24px/33.6px var(--f-display); letter-spacing: -.2px; color: var(--ink-2); }
.h4 { font: 600 32px/41.6px var(--f-display); letter-spacing: -.8px; color: #fff; }
@media (min-width: 810px) and (max-width: 1199.98px) { .h-hero { font-size: 7vw; line-height: 1; } }
/* below the iPhone 13 width the 48 px titles would not fit: scale with the screen */
@media (max-width: 389.98px) { .h-hero { font-size: 11.6vw !important; line-height: 1 !important; } .h2 { font-size: 8.7vw; line-height: 1.1; } }
@media (max-width: 809.98px) {
  .h-hero { font-size: 48px; line-height: 48px; letter-spacing: -.6px; }
  .h2 { font-size: 34px; line-height: 37.4px; letter-spacing: -.2px; }
  .h3 { font-size: 20px; line-height: 28px; }
  .h4 { font-size: 24px; line-height: 31.2px; }
}

/* divider line (G4: draws from 0 to 100 % width when in view) */
.line { height: 1px; background: rgba(18, 48, 72, .2); transform-origin: 0 50%; }
.line-light { background: rgba(255, 255, 255, .2); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; height: 44px; padding: 12px 14px; border-radius: 50px; font: 600 14px/16.8px var(--f-ui); letter-spacing: -.14px; white-space: nowrap; transition: background-color .6s var(--spring), color .6s var(--spring); }
.btn-label { padding: 0 8px; }
.btn-ico { position: relative; width: 20px; height: 20px; overflow: hidden; flex: none; }
.btn-ico .ico { position: absolute; top: 0; left: 0; width: 20px; height: 20px; transition: transform .6s var(--spring), color .6s var(--spring); }
/* Framer: arrow 1 goes from the centre to right:-19px, arrow 2 from left:-19px to 0 (19 px each) */
.btn-ico .ico + .ico { transform: translateX(-19px); }
.btn:hover .btn-ico .ico { transform: translateX(19px); }
.btn:hover .btn-ico .ico + .ico { transform: translateX(0); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--black); }
.btn-secondary { background: var(--pill); color: var(--black); }
.btn-secondary:hover { background: var(--pill-hover); color: var(--navy); }
.btn-secondary:hover .ico { color: #2d4f65; }
/* live starts the link colour ~90 ms after the pointer arrives (Framer variant render), measured */
.tlink { font: 500 16px/19.2px var(--f-ui); letter-spacing: -.16px; color: var(--navy); transition: color .6s var(--spring) .09s; }
.tlink:hover { color: var(--cyan); }

/* round arrow button (service cards) */
.rbtn { position: relative; flex: none; width: 48px; height: 48px; border-radius: 100px; overflow: hidden; }
/* round arrow button: the arrow slides out 33 px to the right while a second one slides in from 32 px left (no fade) */
.rbtn .ico { position: absolute; top: 13px; left: 13px; width: 22px; height: 22px; transition: transform .45s var(--spring-b4); }
.rbtn .ico + .ico { transform: translateX(-32px); }

/* ---------- nav (G1 hides on scroll down) ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 8; padding: 4px; }
.nav.is-hidden { transform: translateY(-79px); }
.nav-bar { background: var(--cyan); border-radius: 4px; padding: 12px 44px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; }
.nav-row { max-width: 1280px; margin: 0 auto; height: 47px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo img { width: 188px; height: 47px; object-fit: cover; }
.nav-links { display: flex; align-items: center; }
/* live desktop nav link hover: the text turns yellow (#eec21b), spring 500/60; no background change (measured) */
.nav-link { padding: 8px 16px; border-radius: 8px; color: var(--navy); transition: color .6s var(--spring); }
.nav-link:hover { color: #eec21b; }
.nav-cta { margin-left: 16px; }
.burger { display: none; position: relative; width: 32px; height: 32px; }
.burger span { position: absolute; left: 4px; width: 24px; height: 2px; border-radius: 1px; background: #fff; transition: transform .2s cubic-bezier(.44, 0, .56, 1), top .2s cubic-bezier(.44, 0, .56, 1); }
.burger span:first-child { top: 10px; }
.burger span:last-child { top: 20px; }
.burger[aria-expanded="true"] span { top: 15px; }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.menu { padding: 24px 4px 4px; }
.menu a { display: block; padding: 8px 0; font: 500 20px/28px var(--f-display); color: #fff; }
@media (max-width: 1199.98px) {
  .nav-links { display: none; }
  .burger { display: block; }
}
@media (max-width: 809.98px) {
  .nav-bar { padding: 12px; }
}

/* bottom progressive blur (G2): 8 layers, blur doubles per layer, each masked to one band */
.blur-strip { position: fixed; left: 0; right: 0; bottom: 0; height: 150px; z-index: 7; pointer-events: none; }
.blur-strip i { position: absolute; inset: 0; }
.blur-strip i:nth-child(1) { backdrop-filter: blur(.15625px); -webkit-backdrop-filter: blur(.15625px); -webkit-mask-image: linear-gradient(transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); mask-image: linear-gradient(transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); }
.blur-strip i:nth-child(2) { backdrop-filter: blur(.3125px); -webkit-backdrop-filter: blur(.3125px); -webkit-mask-image: linear-gradient(transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); mask-image: linear-gradient(transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); }
.blur-strip i:nth-child(3) { backdrop-filter: blur(.625px); -webkit-backdrop-filter: blur(.625px); -webkit-mask-image: linear-gradient(transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); mask-image: linear-gradient(transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); }
.blur-strip i:nth-child(4) { backdrop-filter: blur(1.25px); -webkit-backdrop-filter: blur(1.25px); -webkit-mask-image: linear-gradient(transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); mask-image: linear-gradient(transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); }
.blur-strip i:nth-child(5) { backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); -webkit-mask-image: linear-gradient(transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); mask-image: linear-gradient(transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); }
.blur-strip i:nth-child(6) { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); mask-image: linear-gradient(transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); }
.blur-strip i:nth-child(7) { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(transparent 75%, #000 87.5%, #000 100%); mask-image: linear-gradient(transparent 75%, #000 87.5%, #000 100%); }
.blur-strip i:nth-child(8) { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); -webkit-mask-image: linear-gradient(transparent 87.5%, #000 100%); mask-image: linear-gradient(transparent 87.5%, #000 100%); }

/* ---------- footer ---------- */
.footer { background: var(--navy); color: #fff; padding: 79px 32px; overflow: hidden; }
.footer-in { max-width: 1280px; margin: 0 auto; }
.footer-cta { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 31px; }
.footer-title { font: 900 56px/61.6px var(--f-display); letter-spacing: -.3px; text-transform: uppercase; color: #fff; width: 632px; max-width: 60%; word-break: break-word; overflow-wrap: break-word; }
.footer-logo { height: 388.5px; /* Framer: 518 px wide at aspect 1.33333 */ display: flex; align-items: center; justify-content: center; }
.footer-logo-in { height: 100%; display: flex; align-items: center; justify-content: center; }
.footer-logo img { width: 518px; height: auto; }
.footer-copy { padding: 18px 0; color: #fff; }
@media (max-width: 809.98px) {
  .footer { padding: 60px 16px 25px; }
  .footer-cta { flex-direction: column; align-items: center; gap: 24px; padding: 0 0 64px; }
  .footer-title .brk { word-break: normal; }
  .footer-title { width: 100%; max-width: none; padding-bottom: 30px; font-weight: 700; font-size: 32px; line-height: 38.4px; letter-spacing: -.1px; }
  .footer-logo { height: 167.25px; }
  .footer-logo img { width: 223px; }
  .footer-copy { padding: 46px 0 81px; text-align: center; }
}

/* ---------- CTA banner ---------- */
.cta { padding: 48px; }
/* desktop: Framer sizes the band by aspect ratio 2.16381 (665.5 px at 1440) and the card fills it */
@media (min-width: 1200px) { .cta { aspect-ratio: 2.16381; display: flex; } .cta-card { flex: 1; height: auto; } }
.cta-white { background: #fff; }
.cta-grey { background: var(--page); }
.cta-card { position: relative; max-width: 1280px; height: 569px; margin: 0 auto; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-card::after { content: ""; position: absolute; inset: 0; background: #000; opacity: .7; }
.cta-light::after { opacity: .2; }
.cta-in { position: relative; z-index: 3; width: 516px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cta-title { font: 900 56px/61.6px var(--f-display); letter-spacing: -.3px; text-transform: uppercase; color: #fff; text-align: center; width: 100%; word-break: break-word; overflow-wrap: break-word; }
@media (max-width: 809.98px) {
  .cta-card { max-width: 294px; height: 524px; }
  .cta-dark::after { opacity: .67; }
  .cta-in { width: 100%; padding: 0 32px; }
  /* phone: Framer splits this heading into single letters, so lines break anywhere; each line has a dark highlight */
  .cta-title { font: 600 24px/31.2px var(--f-display); letter-spacing: -.8px; text-transform: none; word-break: break-all; }
  .cta-title mark { background: rgba(0, 0, 0, .2); }
}

/* ---------- forms ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; font-family: var(--f-ui); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-wide { grid-column: 1 / -1; }
.field label { font: 600 14px/normal var(--f-ui); color: var(--navy); }
/* inputs do not inherit the form font on the live site: they show the browser's default sans-serif */
.field input, .field textarea { width: 100%; padding: 12px 16px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; font: 400 16px/normal sans-serif; color: #183048; }
.field input::placeholder, .field textarea::placeholder { color: #757575; }
.field textarea { min-height: 120px; resize: vertical; display: block; }
.form-submit { grid-column: 1 / -1; margin-top: 8px; padding: 12px; border-radius: 50px; background: var(--navy); color: #fff; font: 600 16px/normal sans-serif; transition: transform .15s ease; }
.form-submit:hover { transform: scale(1.02); }
.form-submit:active { transform: scale(.98); }
.form-submit:disabled { opacity: .7; cursor: default; }
@media (max-width: 809.98px) { .form { grid-template-columns: 1fr; } .form .field:first-child { margin-bottom: -8px; } }

/* ---------- motion base (motion.js adds html.js) ---------- */
.js [data-appear]:not(.in) { opacity: .001; }
.js [data-lines]:not(.split) { opacity: 0; }
.js [data-lines].split:not(.in) .ln:not(.has-mark), .js [data-lines].split:not(.in) .lt { opacity: .001; }
.js [data-draw]:not(.in) { transform: scaleX(0); }
[data-draw].in { transform: scaleX(1); transition: transform 2s cubic-bezier(.25, 1, .5, 1) .2s; }
.ln { display: inline-block; width: 100%; }
.lt { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .js [data-appear], .js [data-lines], .js [data-draw], .ln, .lt { opacity: 1 !important; transform: none !important; }
  * { transition-duration: .01ms !important; }
}

/* home */

/* hero: navy block with the title bottom-left and the button bottom-right, then the wide photo (parallax + zoom) */
.hero { background: #fff; }
.hero-top { background: var(--navy); height: 628px; padding: 0 48px 48px; display: flex; align-items: flex-end; }
.hero-row { max-width: 1280px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.hero .h-hero { max-width: 900px; }
.hero-btn { margin-bottom: 14px; flex: none; }
/* Framer sizes the photo band by aspect ratio (2.0202, photo 135 % wide at 2.22222; phone 1.69565 / 110 % at 1.61826) */
.hero-media { aspect-ratio: 2.0202; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hero-par { flex: none; width: 135%; aspect-ratio: 2.22222; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 809.98px) {
  .hero-top { height: 382px; padding: 140px 16px 30px; display: block; }
  .hero-row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero-btn { margin: 0; }
  .hero-media { aspect-ratio: 1.69565; }
  .hero-par { width: 110%; aspect-ratio: 1.61826; }
}

/* intro */
.intro { background: #fff; }
.intro-grid { display: flex; gap: 10px; }
.intro-grid > .label, .intro-main { flex: 1 1 0; min-width: 0; }
.intro-main { display: flex; flex-direction: column; gap: 40px; }
.intro-text { display: flex; flex-direction: column; gap: 24px; }
.reach { display: flex; align-items: center; gap: 16px; padding: 8px; background: var(--card); border-radius: 4px; }
.reach-img { flex: none; width: 114px; height: 142px; object-fit: cover; border-radius: 4px; }
.reach-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.reach-p { max-width: 80%; }
@media (max-width: 809.98px) {
  .intro-grid { flex-direction: column; }
  .reach { flex-direction: column; padding: 24px 16px; gap: 16px; text-align: center; }
  .reach-img { width: 79px; height: 79px; border-radius: 99px; }
  .reach-text { align-items: center; }
}

/* stats (odometer counters; the live site shows them in the browser's default sans-serif) */
.stats { background: var(--navy); padding: 47px; display: flex; justify-content: center; align-items: center; gap: 48px; color: #fff; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.odo { display: flex; align-items: center; height: 64px; font: 700 56px/56px sans-serif; letter-spacing: -1.12px; }
.odo-digits { display: none; }
.js .odo-fallback { display: none; }
.js .odo-digits { display: flex; }
/* each column: the ten digits stacked in one grid cell (column as wide as the widest digit), moved by motion.js */
.odo-col { display: grid; height: 64px; overflow: hidden; }
.odo-col span { grid-area: 1 / 1; height: 64px; line-height: 64px; text-align: center; }
.odo-col span + span { transform: translateY(64px); }
.stat-label { font: 400 16px/22.4px sans-serif; text-align: center; }
@media (max-width: 809.98px) { .stats { flex-direction: column; } }

/* services carousel */
/* Framer: a fixed 782 px band, content centred (it overflows the 96 px padding evenly, so it sits 58 px from the top) */
.services-home { background: var(--light); height: 782px; padding: 96px 48px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.services-home .wrap { width: 100%; flex: none; }
.services-home .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 64px; }
.title-block { width: 100%; }
.title-block .line { margin-top: 39px; }
.carousel { position: relative; width: 100%; padding: 10px; overflow: hidden; }
.carousel-track { display: flex; align-items: center; gap: 30px; height: 372px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 10%, #000 90%, rgba(0,0,0,.25)); mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 10%, #000 90%, rgba(0,0,0,.25)); }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel.at-start .carousel-track { -webkit-mask-image: linear-gradient(90deg, #000 90%, rgba(0,0,0,.25)); mask-image: linear-gradient(90deg, #000 90%, rgba(0,0,0,.25)); }
.carousel.at-end .carousel-track { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 10%); mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 10%); }
.carousel.at-start.at-end .carousel-track { -webkit-mask-image: none; mask-image: none; }
.car-btn { position: absolute; top: 50%; margin-top: -20px; z-index: 4; width: 40px; height: 40px; border-radius: 40px; background: var(--navy); overflow: hidden; transition: opacity .6s var(--spring); }
.car-btn img { width: 40px; height: 40px; }
.car-prev { left: 20px; }
.car-next { right: 20px; }
.car-btn:disabled { opacity: 0; pointer-events: none; }
.scard { flex: none; width: 238px; height: 291px; }
.scard-in { position: relative; display: block; height: 100%; border-radius: 8px; overflow: hidden; }
.scard-img { position: absolute; top: 0; left: -19px; z-index: 1; width: 262px; max-width: none; height: 100%; object-fit: cover; transition: left .4s cubic-bezier(.52, .03, .5, 1); }
.scard-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(rgba(31, 39, 27, 0) 42%, #0e2639 100%); }
.scard-body { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 20px 20px 24px; }
.tag { display: inline-flex; padding: 4px 12px; border-radius: 8px; background: rgba(243, 244, 246, .8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font: 400 20px/30px var(--f-body); letter-spacing: -.2px; color: var(--navy); }
.scard-foot { display: flex; align-items: flex-end; gap: 24px; }
.scard-title { width: 126px; font: 500 20px/28px var(--f-display); letter-spacing: -.1px; color: #fff; word-break: break-word; overflow-wrap: break-word; transition: color .4s cubic-bezier(.52, .03, .5, 1); }
.scard .rbtn { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); transition: background-color .3s cubic-bezier(.36, 0, .5, 1); }
.scard .rbtn .ico + .ico { color: #000; }
.scard-in:hover .scard-img, .scard-in:focus-visible .scard-img { left: 0; }
.scard-in:hover .scard-title { color: #fafaf4; }
.scard-in:hover .rbtn { background: var(--page); box-shadow: none; }
.scard-in:hover .rbtn .ico { transform: translateX(33px); }
.scard-in:hover .rbtn .ico + .ico { transform: none; }
@media (max-width: 809.98px) {
  .services-home { padding: 64px 16px; }
  .carousel-track { height: 420px; }
  .title-block .line { margin-top: 16px; }
  .scard-title { font-size: 18px; line-height: 25.2px; }
}

/* how it works: sticky photo column on desktop/tablet, stacked steps on phone */
.how { background: var(--navy); display: flex; flex-direction: column; gap: 10px; }
.how .wrap { width: 100%; }
.how .line { margin-top: 40px; }
.how-grid { max-width: 1120px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.how-texts { padding-bottom: 100px; }
.how-step { height: 80vh; display: flex; align-items: center; }
.how-step-img { display: none; }
.how-step-text { display: flex; flex-direction: column; gap: 16px; }
.how-tag { color: #fff; }
.how-step:nth-child(2) .how-step-text { gap: 10px; }
.how-imgs { position: sticky; top: 0; height: 80vh; padding: 64px 0 64px 96px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
.how-frame { position: relative; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; }
.how-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.how-img:nth-child(1) { z-index: 3; }
.how-img:nth-child(2) { z-index: 2; }
.how-img.off { opacity: 0; }
@media (max-width: 809.98px) {
  .how .line { margin-top: 16px; }
  .how-grid { display: block; padding: 0 8px; margin-top: 14px; }
  .how-imgs { display: none; }
  .how-texts { padding: 0; display: flex; flex-direction: column; gap: 96px; }
  .how-step { height: auto; flex-direction: column; align-items: flex-start; gap: 40px; }
  .how-step-img { display: block; width: 100%; height: 256px; object-fit: cover; border-radius: 8px; }
}

/* about */
.about-home { background: var(--light); }
.about-grid { display: flex; align-items: center; gap: 64px; }
.about-text, .about-media { flex: 1 1 0; min-width: 0; }
.about-text { display: flex; flex-direction: column; align-items: flex-start; }
.about-text .h2 { margin-top: 16px; max-width: 450px; }
.about-p { margin-top: 16px; max-width: 450px; }
.about-text .btn { margin-top: 32px; }
.about-img { width: 100%; height: auto; aspect-ratio: .792683; object-fit: cover; border-radius: 8px; }
@media (max-width: 809.98px) {
  .about-grid { flex-direction: column-reverse; align-items: stretch; gap: 48px; }
}

/* faq */
.faq { background: #fff; }
.faq .h2 { margin-top: 16px; }
.faq .line { margin-top: 40px; }
.faq-grid { display: flex; gap: 64px; margin-top: 10px; }
.faq-side { flex: 1 1 0; min-width: 0; padding-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.faq-list { flex: 0 0 63.36%; }
.faq-item { border-bottom: 1px solid #d4d4d4; }
.faq-q button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 32px 0 31px; text-align: left; font: 500 20px/28px var(--f-display); letter-spacing: -.1px; color: var(--ink-2); }
.faq-q .ico { flex: none; width: 24px; height: 24px; color: #0a0a0a; transition: transform .5s linear(0,0.062,0.192,0.339,0.476,0.595,0.692,0.769,0.829,0.874,0.908,0.934,0.952,0.966,0.975,0.982,0.988,0.991,0.994,0.996,0.997,0.998,0.998,0.999,0.999,1); } /* spring 400/40 */
.faq-q [aria-expanded="true"] .ico { transform: rotate(135deg); }
/* open row as live: 20 px under the question, answer text at most 524 px wide, 32 px row padding below */
.faq-a { overflow: hidden; margin-top: -11px; }
.faq-a p { max-width: 524px; padding: 0 0 31px; font: 400 16px/24px var(--f-ui); color: #737373; }
@media (max-width: 809.98px) {
  .faq .line { margin-top: 16px; }
  .faq-grid { flex-direction: column; gap: 40px; margin-top: 0; }
  .faq-side { padding-top: 16px; }
  .faq-q button { font-size: 18px; line-height: 25.2px; }
}

/* maqam holding */
.maqam { background: var(--navy); padding: 96px 48px; }
.maqam-card { background: var(--light); padding: 96px 48px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.logo-img { width: 120px; height: 60px; border-radius: 8px; }
.fit-contain { object-fit: contain; }
.fit-cover { object-fit: cover; }
.maqam-p { max-width: 800px; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 48px; }
@media (max-width: 809.98px) {
  .maqam-card { padding: 96px 10px; }
  .maqam-title { white-space: nowrap; }
  .maqam-p { max-width: 198px; }
  .logos { flex-direction: column; align-items: center; }
}

/* about */
.ab-hero { padding: 80px 8px 0; }
.ab-hero-card { position: relative; height: 500px; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 20px; }
.ab-hero-media { position: absolute; inset: 0; }
.ab-hero-img { width: 100%; height: 100%; object-fit: cover; }
.ab-hero-card::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(rgba(24, 30, 21, 0) 43%, rgba(24, 30, 21, .5) 100%); }
/* "EXPERTISE": Framer fit-text (an SVG scaled to its box). Same size as live at each breakpoint. */
.ab-fit { position: relative; z-index: 3; width: 100%; max-width: 1280px; font: 700 221.3px/177px "Fira Sans Extra Condensed", sans-serif; letter-spacing: -.08px; color: #fff; white-space: nowrap; }
.sec.ab-intro { background: transparent; }
.ab-ticker { background: var(--navy); padding: 0 0 96px; overflow: hidden; }
.ticker { display: flex; gap: 60px; align-items: flex-start; height: 570px; }
.ticker-track { display: flex; gap: 60px; align-items: flex-start; flex: none; }
.tk { flex: none; }
.tk-img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.tk-a { width: 300px; height: 346px; }
.tk-a .tk-img { border-radius: 7.25px; }
.tk-b { width: 462px; height: 533px; }
.tk-c { width: 462px; height: 335px; }
.tk-d { width: 461px; height: 464px; }
.tk-phone { display: none; }
.ab-values { background: #fff; }
.ab-values-h { margin-top: 16px; max-width: 920px; }
.ab-values .line:first-of-type { margin-top: 40px; }
.value { display: flex; align-items: flex-start; gap: 12px; padding: 24px 0 32px; }
.value > * { flex: 1 1 0; }
.value-h { font-size: 24px; line-height: 33.6px; }
.ab-bottom img { width: 100%; height: 656px; object-fit: cover; }
@media (max-width: 809.98px) {
  .ab-hero { padding: 60px 16px 0; }
  .ab-fit { font-size: 80.37px; line-height: 64.3px; letter-spacing: -.07px; }
  .ab-ticker { padding: 30px 0 96px; }
  .ticker, .ticker-track { align-items: center; }
  .ticker { height: 350px; align-items: flex-start; }
  .ticker-track { height: 320px; }
  .tk-a { width: 180px; height: 206px; }
  .tk-b { width: 277px; height: 319px; }
  .tk-c { width: 277px; height: 200px; }
  .tk-d { width: 276px; height: 277px; }
  .tk-b .tk-img, .tk-c .tk-img { border-radius: 7.27px; }
  .tk-phone { display: block; }
  .value { flex-direction: column; padding: 24px 0 32px; }
  .value-h { font-size: 20px; line-height: 28px; }
}

/* services list */
.sv-hero { background: #fff; padding: 80px 8px 0; }
.sv-hero-card { background: #fff; border-radius: 8px; padding: 16px 16px 16px 40px; }
.sv-hero-in { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.sv-hero-text { flex: 0 0 620px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.sv-hero-copy { display: flex; flex-direction: column; gap: 16px; }
.sv-h1 { color: var(--ink); }
.sv-hero-copy .lead { max-width: 434px; }
.sv-hero-img { flex: 1 1 0; min-width: 0; height: 480px; object-fit: cover; border-radius: 8px; }
.sv-intro { background: var(--navy); }
.sv-label, .sv-intro-p { color: #fff; }
.sv-list { background: #fff; padding-bottom: 97px; }
.sv-list .h2 { margin-bottom: 52px; }
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
/* Framer gives each card wrapper position: sticky; top: 80px, but as a grid item its sticky range is its own 350 px grid
   cell, so on the live site the cards never stick or stack; they scroll normally. Same here. */
.svc-slot { position: relative; height: 350px; z-index: 1; }
.svc-card { height: 100%; display: flex; align-items: center; background: var(--page); border-radius: 8px; transition: background-color .45s var(--spring-b4); }
.svc-in { width: 100%; display: flex; align-items: flex-start; gap: 24px; padding: 8px; }
.svc-img-wrap { position: relative; flex: none; width: 200px; height: 200px; overflow: hidden; }
.svc-img { position: absolute; top: -5px; left: -5px; width: 210px; height: 210px; max-width: none; object-fit: cover; border-radius: 6px; transition: left .45s var(--spring-b4); }
.svc-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding-top: 24px; }
.svc-text { display: flex; flex-direction: column; gap: 16px; }
.svc-desc { display: block; max-width: 308px; opacity: .7; }
.svc-btn { display: flex; justify-content: flex-end; padding: 8px; }
/* live: 2 px ring rgba(20,26,17,.2); on hover the button fills with #e8ecf0 and the arrow slides (spring .4 s / .2) */
.svc-card .rbtn { color: #0d0d0d; box-shadow: inset 0 0 0 2px rgba(20, 26, 17, .2); transition: background-color .45s var(--spring-b4); }
.svc-card:hover { background: #e5e7eb; }
/* Framer hover: the 210 px image frame is pinned to top -5 / right -10, i.e. it moves 5 px right, same size */
.svc-card:hover .svc-img { left: 0; }
.svc-card:hover .rbtn { background: var(--page); }
.svc-card:hover .rbtn .ico { transform: translateX(33px); }
.svc-card:hover .rbtn .ico + .ico { transform: none; }
.sv-quote { padding: 39px 48px 56px; }
.sv-quote-card { max-width: 1280px; margin: 0 auto; display: flex; background: var(--navy); border-radius: 12px; overflow: hidden; }
.sv-quote-img { flex: 0 0 62.5%; width: 62.5%; height: 528px; object-fit: cover; border-radius: 8px 0 0 8px; }
.sv-quote-body { flex: 1; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; }
.sv-quote-text { margin: 0; font: 500 24px/33.6px var(--f-display); letter-spacing: -.2px; color: #fff; }
.sv-quote-by { display: flex; flex-direction: column; }
.sv-quote-name { color: #fff; }
.sv-quote-role { color: #c9d4dc; }
@media (max-width: 1199.98px) {
  .sv-hero-text { flex-basis: 50%; }
  .sd-title { max-width: 600px; }
  .sd-sum { flex-basis: 40%; }
}
/* Framer: 2 columns >= 1200 px, 1 column below */
@media (max-width: 1199.98px) { .svc-grid { grid-template-columns: 1fr; } }
@media (max-width: 809.98px) {
  .sv-hero { padding: 64px 16px 0; }
  .sv-hero-card { padding: 32px 16px 16px; }
  .sv-hero-in { flex-direction: column; align-items: stretch; gap: 40px; }
  .sv-hero-text { flex: none; }
  .sv-hero-img { flex: none; width: 100%; height: 340px; }
  .sv-list { padding: 60px 16px; }
  .sv-list .h2 { margin-bottom: 20px; }
  .svc-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); gap: 8px 30px; }
  .svc-slot { height: auto; min-height: 460px; }
  .svc-desc { max-width: none; }
  .svc-card { height: auto; }
  .svc-in { flex-direction: column; padding: 12px; gap: 16px; }
  .svc-content { width: 100%; padding-top: 0; gap: 16px; }
  .svc-img, .svc-card:hover .svc-img { top: 0; left: 0; width: 100%; height: 100%; }
  /* Framer: a 624 px band (80 px padding, overflow clip) holding a 692 px block (card + 64 px) centred in it, so the
     card's top and the band's bottom 34 px are cut off, exactly as on the live phone layout */
  .sv-quote { height: 624px; padding: 80px 16px; overflow: hidden; overflow: clip; display: flex; align-items: center; }
  .sv-quote-card { flex: 1 1 0; min-width: 0; margin-bottom: 64px; }
  .sv-quote-card { flex-direction: column; }
  .sv-quote-img { width: 100%; flex: none; height: 302px; }
  .sv-quote-body { padding: 24px; gap: 56px; }
  .sv-quote-text { font-size: 20px; line-height: 28px; }
}

/* service detail */
.sd-head { background: var(--page); padding: 196px 48px 0; }
/* Framer: title column flex 1 (title max 900 px), 24 px gap, summary 30 % (max 640) -> title box 872 px at 1440,
   which is what decides where the long words break ("COMMUNI-CATION") */
.sd-row { display: flex; justify-content: center; align-items: flex-end; gap: 24px; }
.sd-title { flex: 1 1 0; min-width: 0; max-width: 900px; color: var(--ink); }
.sd-sum { flex: 0 0 30%; max-width: 640px; }
.sd-media { margin-top: 56px; }
.sd-img { width: 100%; height: 580px; object-fit: cover; border-radius: 8px; }
.sd-content { background: #fff; padding: 96px 48px; }
.sd-col { max-width: 672px; margin: 0 auto; }
.line-detail { background: rgba(20, 26, 17, .1); }
.sd-card { margin-top: 39px; padding: 8px; border-radius: 4px; background: rgba(255, 255, 255, .5); display: flex; flex-direction: column; gap: 10px; }
.sd-card-t { color: var(--ink-2); }
.sd-card-p { color: #0a1c2b; }
.sd-back { display: flex; width: max-content; align-items: center; gap: 8px; margin-top: 81px; }
.sd-back-ico { width: 18px; height: 18px; flex: none; }
@media (max-width: 809.98px) {
  .sd-head { padding: 100px 16px 0; }
  .sd-row { flex-direction: column; align-items: stretch; gap: 24px; }
  .sd-sum { flex: none; }
  .sd-title { max-width: none; }
  /* a 12-letter word ("consultation") is wider than the phone at 48 px; live lets it overflow and cuts it off.
     Here it shrinks just enough to fit instead. */
  .sd-fit { font-size: 45px; line-height: 48px; }
  .sd-media { margin-top: 32px; }
  .sd-img { height: 300px; }
  .sd-content { padding: 64px 16px 60px; }
  .sd-card { margin-top: 35px; padding: 24px; text-align: center; align-items: center; }
  .sd-back { margin-top: 81px; }
}

/* contact + get started */
.ct { padding: 140px 48px 96px; }
.ct-grid { display: flex; justify-content: space-between; gap: 48px; }
.ct-main { flex: 0 1 616px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.ct-list { display: flex; flex-direction: column; gap: 16px; }
.ct-list li { display: flex; align-items: flex-start; gap: 16px; }
.ct-ico { width: 24px; height: 24px; flex: none; padding: 2px; color: var(--navy); }
.ct-mail { line-height: 24px; }
.ct-addr { display: flex; flex-direction: column; gap: 12px; }
.ct-media { flex: 0 1 616px; min-width: 0; }
.ct-img { width: 100%; height: 707px; object-fit: cover; border-radius: 8px; }
.gs { padding: 150px 48px 124px; }
.gs-in { max-width: 620px; margin: 0 auto; text-align: center; }
.gs-p { margin-top: 24px; }
.gs .form { margin-top: 48px; text-align: left; }
@media (max-width: 1199.98px) {
  .ct-main, .ct-media { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 809.98px) {
  .ct { padding: 0 16px 64px; }
  .ct-grid { flex-direction: column-reverse; gap: 24px; }
  .ct-main, .ct-media { flex: none; }
  .ct-img { height: 310px; }
  .gs { padding: 120px 16px 124px; }
}

/* privacy policy */
.pp { padding: 150px 48px 120px; }
.pp-in { max-width: 1114px; margin: 0 auto; }
.pp-h1 { color: var(--ink); text-align: center; }
.pp-date { margin-top: 24px; text-align: center; }
.pp-body { max-width: 800px; margin: 100px auto 0; }
.pp-body p, .pp-body li { font: 400 16px/24px var(--f-body); color: var(--text); }
.pp-body p + p, .pp-body p + ul, .pp-body ul + p { margin-top: 12px; }
.pp-body .h3 { margin: 60px 0 24px; }
.pp-body ul { list-style: disc; padding-left: 20px; }
.pp-mail { color: inherit; }
.pp-mail strong { font-weight: 700; }
@media (max-width: 809.98px) {
  .pp { padding: 100px 10px 60px; }
  .pp-body { margin-top: 40px; }
  .pp-body .h3 { margin: 40px 0 24px; }
}

/* 404 */
.nf { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px; overflow: hidden; }
.nf-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nf-art { width: 400px; height: 300px; flex: none; }
.nf-img { width: 100%; height: 100%; object-fit: contain; }
.nf-code { margin-top: 24px; }
.nf-h1 { margin: 10px 0 24px; color: var(--ink); }
@media (max-width: 809.98px) {
  .nf { padding: 48px 20px; }
}