/* Synora homepage — rebuilt from "Synora website redesign.fig" (1920 frame), on the Growza Pro template.
   Fixed px scale like the design above 980px. Responsive cascade 980 → 900 → 480 → 360 from breakpoint.md
   (desktop defaults, then cumulative max-width overrides); deviations are listed in this folder's breakpoint.md. */

@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../fonts/inter-variable-latin.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; }
@font-face { font-family: "Inter"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/inter-italic-500.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/playfair-display-italic-500.woff2") format("woff2"); }

:root {
  --black: #030906;
  --white: #ffffff;
  --brand: #fddb73;
  --brand-hover: #ffe8a3;
  --ink: #030906;            /* text on yellow */
  --muted: #777f88;
  --nav-text: #a6abb1;
  --stroke: #2c2436;
  --stroke-light: #404040;
  --card: #080809;
  --green-deep: #051f12;
  --glow: #126e40;
  --nav-bg: linear-gradient(270deg, #080809 0%, #051f12 72%);
  --nav-glass: linear-gradient(270deg, rgba(8, 8, 9, 0.285) 0%, rgba(5, 31, 18, 0.315) 72%);
  --nav-glass-scrolled: linear-gradient(270deg, rgba(8, 8, 9, 0.465) 0%, rgba(5, 31, 18, 0.495) 72%);
  --font: "Inter", Arial, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --ease: cubic-bezier(0.42, 0, 0.58, 1);           /* Webflow easeInOut */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);  /* Webflow outQuart */
  --cap: 1120px;          /* content column: breakpoint.md's wide container, which is the design's column */
  --gutters: 72px;        /* total horizontal gutter: 36px each side */
  --section-gap: 175px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Anchor links land below the fixed navbar: its top offset + height + 16px */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 124px; }
/* Figma's Inter uses the text optical size at every size; the variable font would switch to its
   narrower display cut above 14px, so headings would come out ~8% narrower than the design */
body { margin: 0; background: var(--black); color: var(--muted); font-family: var(--font); font-optical-sizing: none; font-size: 16px; line-height: 24px; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 10px; background: var(--brand); color: var(--ink); font-weight: 600; transition: top 0.2s; }
.skip-link:focus { top: 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Type */
.h1 { color: var(--brand); font-size: 76px; line-height: 84px; font-weight: 500; letter-spacing: -1.52px; }
.h3 { color: var(--brand); font-size: 50px; line-height: 54px; font-weight: 500; letter-spacing: -1px; }
.h6 { color: var(--brand); font-size: 24px; line-height: 26px; font-weight: 500; letter-spacing: 0; }
.text-xl { font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.2px; }
.text-xl-regular { font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: -0.2px; }
.text-l { font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: -0.01em; }
.italic-500 { font-family: var(--serif); font-style: italic; font-weight: 500; }
.light { font-weight: 300; }

.container { width: min(var(--cap), 100% - var(--gutters)); margin: 0 auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 2px; height: 48px; padding: 8px 16px; border-radius: 10px; font-size: 15px; line-height: 24px; font-weight: 500; letter-spacing: 0; white-space: nowrap; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); transition: background-color 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.btn--primary { background: linear-gradient(180deg, rgba(255, 232, 163, .8), rgba(253, 219, 115, .14) 52%, rgba(253, 219, 115, .32)), linear-gradient(135deg, rgba(253, 219, 115, .92), rgba(253, 219, 115, .68)); color: var(--ink); }
.btn--primary:hover { background-color: var(--brand-hover); box-shadow: inset 0 1px 0 rgba(255, 232, 163, .95), inset 0 0 0 1px rgba(255, 232, 163, .65), 0 8px 24px rgba(253, 219, 115, .16); }
.btn__icon { width: 20px; height: 20px; transition: transform 0.35s var(--ease); }
.btn--primary:hover .btn__icon { transform: rotate(45deg); }
.btn--outline { background: linear-gradient(180deg, rgba(234, 255, 242, .16), rgba(13, 68, 37, .18) 52%, rgba(47, 191, 108, .1)), rgba(14, 25, 19, .48); color: #eafff2; }
.btn--outline:hover { background-color: rgba(31, 143, 80, .3); }
/* Shared glass finish for the homepage CTAs and article buttons. */
.btn, .blog-card__tag {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(234, 255, 242, .55), inset 0 -1px 0 rgba(3, 9, 6, .2), inset 0 0 0 1px rgba(234, 255, 242, .24), 0 6px 18px rgba(3, 9, 6, .24);
}
.btn::before, .blog-card__tag::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(234, 255, 242, .28), rgba(234, 255, 242, .04) 48%, transparent 49%);
  pointer-events: none;
}
.btn::after, .blog-card__tag::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 20%, rgba(234, 255, 242, .32) 45%, transparent 68%);
  opacity: .35;
  transform: translateX(-55%);
  transition: transform .55s var(--ease), opacity .55s var(--ease);
  pointer-events: none;
}
.btn:is(:hover, :focus-visible)::after, .blog-card__link:is(:hover, :focus-visible) .blog-card__tag::after { transform: none; opacity: .8; }
.btn:focus-visible, .blog-card__link:focus-visible .blog-card__tag { outline: 2px solid var(--brand-hover); outline-offset: 3px; }

/* Captions: the border sits outside the 34px box, like the design */
.caption { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 8px 16px; border-radius: 8px; background: rgba(0, 0, 0, 0.15); box-shadow: 0 0 0 1px var(--stroke); color: var(--white); font-size: 20px; line-height: 18px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.caption--light { box-shadow: 0 0 0 1px var(--stroke-light); }
.caption--glow { background: linear-gradient(270deg, #080809 0%, #062314 100%); }
.stars { display: inline-flex; align-items: center; gap: 2px; }
.stars img { width: 13px; height: 13px; }

.section-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.section-head__title { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Navigation ---------- */
.navbar { position: fixed; top: 50px; left: 0; right: 0; z-index: 50; width: 100%; max-width: 536px; height: 58px; margin: 0 auto; }
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 8px 0 20px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 32px rgba(0, 0, 0, 0.25); transition: box-shadow 0.4s var(--ease); }
/* Frosted glass sits on a pseudo-element: a backdrop-filter on .nav itself would make it the containing
   block of the fixed mobile menu and trap the menu inside the bar */
.nav::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--nav-glass); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); transition: opacity 0.4s var(--ease); }
.nav::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--nav-glass-scrolled); opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); }
.nav > * { position: relative; z-index: 1; }
.navbar.is-scrolled .nav { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 36px rgba(0, 0, 0, 0.45); }
.navbar.is-scrolled .nav::after { opacity: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav::before { background: var(--nav-bg); }
}
.nav__brand { position: relative; z-index: 5; flex-shrink: 0; }
.nav__brand img { width: 23px; height: 34px; }
.nav__menu { display: flex; align-items: center; height: 100%; }
.nav__links { display: flex; align-items: center; height: 100%; }
.nav__link { display: flex; align-items: center; justify-content: center; height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; color: var(--nav-text); font-size: 14px; line-height: 24px; font-weight: 600; letter-spacing: 0; white-space: nowrap; transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease); }
.nav__link:hover { border-color: var(--stroke); background: rgba(255, 255, 255, 0.06); color: var(--white); }
.nav__mobile-only, .nav__mobile-top { display: none; }
.nav__cta { flex-shrink: 0; font-size: 13.3px; font-weight: 600; }
.nav__burger { display: none; }

/* Sticky social rail: glass buttons on the right edge (above 980px). It slides in after the page loads and
   fades out, one icon after another, once the footer's own social icons come into view. Below the navbar
   (z-index 50) so the open menu always covers it. */
.social-rail { position: fixed; top: 50%; right: 24px; z-index: 45; transform: translateY(-50%); }
.social-rail ul { display: flex; flex-direction: column; gap: 10px; }
.social-rail a { --d: calc(var(--i) * 40ms); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; background: rgba(5, 31, 18, 0.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); transition-property: opacity, transform, visibility, translate, border-color, background-color; transition-duration: 0.8s, 0.8s, 0s, 0.3s, 0.3s, 0.3s; transition-timing-function: var(--ease); transition-delay: var(--d), var(--d), 0s, 0s, 0s, 0s; }
.social-rail img { width: auto; max-width: 20px; height: auto; max-height: 20px; }
.social-rail a:hover { translate: -3px 0; border-color: var(--brand); background-color: rgba(253, 219, 115, 0.14); }
.js .social-rail a { opacity: 0; transform: translateX(24px); }
.js.is-loaded .social-rail a { --d: calc(0.5s + var(--i) * 60ms); opacity: 1; transform: none; }
.js.is-loaded .social-rail.is-ready a { --d: calc(var(--i) * 40ms); }
.js.is-loaded .social-rail.is-away a { opacity: 0; transform: translateX(16px); visibility: hidden; pointer-events: none; transition-delay: var(--d), var(--d), calc(0.8s + var(--d)), 0s, 0s, 0s; }

/* Custom cursor dot (follows the mouse with smoothing) */
.cursor { position: fixed; inset: 0; z-index: 999; pointer-events: none; }
.cursor__dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; translate: -7px -7px; border-radius: 50%; background: var(--brand); opacity: 0; transition: opacity 0.1s; will-change: transform; }
.cursor.is-active .cursor__dot { opacity: 1; }

/* ---------- Page + glows ---------- */
.page { position: relative; display: flex; flex-direction: column; gap: var(--section-gap); overflow: hidden; }
.page > section { position: relative; z-index: 2; }
.page__glow { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; }
.page__glow--hero { top: 383px; left: 50%; width: 980px; height: 980px; margin-left: -490px; background: radial-gradient(circle closest-side, var(--glow), var(--black)); }
.page__glow--left, .page__glow--right { width: 1423px; height: 1423px; background: radial-gradient(circle closest-side, rgba(18, 110, 64, 0.5), rgba(3, 9, 6, 0.5)); }
.page__glow--left { top: 1573px; left: -711px; }
.page__glow--right { top: 3141px; right: -691px; }

/* ---------- Hero ---------- */
.hero { padding-top: 279px; }
.hero__top { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.star-caption { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 12px 12px 12px 13px; border: 1px solid var(--stroke-light); border-radius: 12px; background: linear-gradient(270deg, #080809 0%, #09351f 100%); color: var(--white); font-size: 15px; line-height: 18px; font-weight: 500; letter-spacing: 0; }
.hero__title { display: flex; flex-direction: column; color: var(--brand); font-weight: 500; }
.hero__kicker { display: block; margin-bottom: -8px; font-size: 40px; line-height: 54px; letter-spacing: -1px; }
.hero__title .h1 { display: block; }
/* The buttons start 173px after the 650px text column (design); the gap shrinks first when space runs out */
.hero__row { display: flex; align-items: flex-end; gap: clamp(32px, 100% - 905px, 173px); width: 100%; }
.hero__text { flex: 0 1 650px; min-width: 0; color: var(--muted); }
.hero__text em { color: #e4e5e7; font-style: italic; }
.hero__buttons { display: flex; align-items: flex-end; gap: 16px; flex-shrink: 0; }

/* The tilted card wall: the design's flattened 3D transform, centred under the hero text */
.hero__wall { position: relative; height: 570px; }
.marquee-3d { position: absolute; top: 152px; left: 50%; width: 2126px; height: 446px; margin-left: -1063px; transform: matrix(0.994, -0.1094, 0.6392, 0.7691, 0, 0); }
.marquee-3d__track { display: flex; gap: 17.7px; height: 100%; }
.marquee-3d__group { display: flex; flex: none; gap: 17.7px; animation: marquee-x var(--marquee-duration, 48s) linear infinite; }
@keyframes marquee-x { to { transform: translateX(calc(-100% - var(--marquee-gap, 17.7px))); } }
.ad-card { width: 374px; height: 446px; flex: none; padding: 0 0 6px 6.6px; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.ad-card__inner { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 12px; }
.ad-card__inner > img { width: 100%; height: 390px; object-fit: cover; }
.ad-card__bar { display: flex; flex: 1; align-items: center; justify-content: space-between; padding: 0 23px; background: rgba(0, 0, 0, 0.36); }
.ad-card__bar span { display: flex; gap: 15.4px; }
.ad-card__bar img { width: 20px; height: 20px; }

/* ---------- Services ---------- */
/* In the design the last row of cards overhangs the section by 40px, so the gap under them is 135px */
.services { margin-bottom: -40px; }
.services .container { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.services__head { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 469px; max-width: 100%; }
.services__title { width: 466px; max-width: 100%; color: var(--brand); }
.services__title .italic-500 { display: block; font-size: 40px; line-height: 54px; letter-spacing: -1px; }
.services__wordmark { width: 466px; height: auto; margin-top: 8px; }
/* The design's tagline ends with an empty line, which keeps 28px under it */
.services__tagline { width: 100%; padding-bottom: 28px; text-align: center; }
.services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; width: 100%; }
.service-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; height: 535px; padding: 0 20px; border: 2px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #080809 -11%, var(--green-deep) 149%) padding-box, linear-gradient(135deg, rgba(64, 64, 64, 0.35) -6%, rgba(166, 166, 166, 0.5) 100%) border-box; }
.service-card__text { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 330px; text-align: center; }
/* Each description keeps the width of its Figma text box, so the lines break where they do in the design */
.service-card__text .text-l { max-width: var(--w, 330px); font-size: 15px; font-weight: 500; letter-spacing: -0.16px; }
.service-card__visual { display: flex; align-items: center; justify-content: center; width: 100%; height: 229px; }
.visual__svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.visual__svg text { font-family: var(--font); letter-spacing: 0; }

/* ---------- Clients ---------- */
.clients .container { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.clients__marquee { display: flex; flex-direction: column; gap: 20px; width: 1608px; max-width: 100vw; padding: 4px 0; overflow: hidden; }
.clients__row { display: flex; width: max-content; }
.clients__set { display: flex; flex: none; gap: 22px; padding-right: 22px; animation: marquee-x var(--marquee-duration, 40s) linear infinite; --marquee-gap: 0px; }
.clients__row--reverse .clients__set { animation-direction: reverse; }
.clients__marquee:hover .clients__set { animation-play-state: paused; }
.clients__set li { display: flex; align-items: center; justify-content: center; width: 120px; height: 64px; padding: 8px; }
.clients__set img { width: 104px; height: 48px; object-fit: contain; }

/* ---------- FAQ ---------- */
.faq__wrap { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.faq__head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.faq__title { font-size: 30px; line-height: 54px; font-weight: 500; letter-spacing: -1px; }
.faq__items { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 800px; }
.faq-item { border: 1px solid #666666; border-radius: 8px; background: linear-gradient(90deg, #121218 0%, #062314 126%); transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.faq-item:hover, .faq-item.is-open { border-color: #7d8a82; box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.025); }
.faq-item h3 { font: inherit; }
.faq-item__q { display: flex; align-items: center; gap: 24px; width: 100%; padding: 24px; color: var(--white); font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: -0.16px; text-align: left; transition: padding 0.35s var(--ease); }
.faq-item.is-open .faq-item__q { padding-bottom: 16px; }
.faq-item__icon { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; }
.faq-item__icon i { position: absolute; background: var(--brand); }
.faq-item__icon i:first-child { width: 2px; height: 20px; transition: transform 0.35s var(--ease); }
.faq-item__icon i:last-child { width: 20px; height: 2px; }
.faq-item.is-open .faq-item__icon i:first-child { transform: rotate(90deg); }
.faq-item__a { padding: 0 24px 24px 72px; opacity: 0; transition: opacity 0.35s var(--ease); }
.faq-item__a .text-l { color: #b6bcc3; }
.faq-item.is-open .faq-item__a { opacity: 1; }

/* ---------- Blogs ---------- */
.blogs .container { display: flex; flex-direction: column; gap: 40px; }
.blogs .h3 { color: var(--brand); }
.blogs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.blog-card__link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 400px; padding: 0 20px 40px; overflow: hidden; border: 1px solid var(--stroke); border-radius: 16px; color: var(--white); isolation: isolate; }
.blog-card__link::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 324px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 85%); }
.blog-card__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.6s var(--ease); }
.blog-card__image--right { object-position: 26% 50%; }
.blog-card__link:hover .blog-card__image { transform: scale(1.04); }
.blog-card__info { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 356px; text-align: center; }
.blog-card__title { font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: 0; }
.blog-card__tag { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 8px; background: linear-gradient(180deg, rgba(234, 255, 242, .2), rgba(13, 68, 37, .28) 52%, rgba(47, 191, 108, .14)), rgba(14, 25, 19, .62); color: #eafff2; font-size: 15px; line-height: 18px; font-weight: 500; letter-spacing: 0; transition: color 0.35s var(--ease), background-color 0.35s var(--ease); }
.blog-card__link:is(:hover, :focus-visible) .blog-card__tag { background: linear-gradient(180deg, rgba(255, 232, 163, .85), rgba(253, 219, 115, .64)), rgba(253, 219, 115, .65); color: var(--ink); }

/* ---------- Contact ---------- */
.contact__glow { position: absolute; top: 50%; right: -260px; z-index: -1; width: 900px; height: 900px; margin-top: -450px; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(18, 110, 64, 0.5), rgba(3, 9, 6, 0)); pointer-events: none; }
.contact__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.contact__info { display: flex; flex-direction: column; align-items: flex-start; padding-top: 8px; }
.contact__kicker { color: var(--muted); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.2px; }
.contact__title { margin: 4px 0 32px; }
.contact__list { display: flex; flex-direction: column; gap: 16px; }
.contact__list li { display: flex; align-items: center; gap: 16px; color: #e4e5e7; font-size: 18px; line-height: 26px; letter-spacing: 0; }
.contact__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--stroke-light); border-radius: 12px; background: linear-gradient(270deg, #080809 0%, #09351f 100%); }
.contact__icon img { width: 22px; height: 22px; }
.contact__list a { overflow-wrap: anywhere; transition: color 0.3s var(--ease); }
.contact__list a:hover { color: var(--brand); }
.contact__card { padding: 48px; border: 2px solid transparent; border-radius: 16px; background: linear-gradient(135deg, #080809 -11%, var(--green-deep) 149%) padding-box, linear-gradient(135deg, rgba(64, 64, 64, 0.35) -6%, rgba(166, 166, 166, 0.5) 100%) border-box; }
.contact-form { display: flex; flex-direction: column; gap: 28px; }
.contact-form[hidden] { display: none; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label { color: #e4e5e7; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0; }
.field input, .field textarea { width: 100%; padding: 6px 0 10px; border: 0; border-bottom: 1px solid rgba(251, 250, 249, 0.5); border-radius: 0; background: transparent; color: var(--white); font: inherit; font-size: 16px; line-height: 24px; letter-spacing: 0; outline: none; transition: border-color 0.25s var(--ease); }
.field input::placeholder, .field textarea::placeholder { color: #69717a; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--brand); }
.field [aria-invalid="true"], .phone:has([aria-invalid="true"]) { border-bottom-color: #ff7a7a; }
.field textarea { min-height: 76px; resize: vertical; }
.phone { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(251, 250, 249, 0.5); transition: border-color 0.25s var(--ease); }
.phone:focus-within { border-bottom-color: var(--brand); }
.field .phone input { flex: 1; min-width: 0; border-bottom: 0; }
.phone__country { position: relative; display: flex; flex: none; align-items: center; gap: 5px; height: 30px; margin-bottom: 4px; padding: 0 6px; border-radius: 6px; transition: background-color 0.25s var(--ease); }
.phone__country:hover { background: rgba(255, 255, 255, 0.06); }
.phone__country:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.phone__country select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; color-scheme: dark; cursor: pointer; font-size: 16px; }
.phone__flag { display: block; width: 21px; height: 14px; }
.phone__flag[hidden] { display: none; }
.phone__prefix { margin-bottom: 4px; color: var(--white); font-size: 16px; line-height: 24px; letter-spacing: 0; }
.contact-form__error { color: #ff8f8f; font-size: 15px; line-height: 22px; letter-spacing: 0; }
.contact-form__submit { align-self: flex-start; height: 46px; padding: 0 28px; border-radius: 999px; font-size: 16px; font-weight: 600; }
.contact-form__success { display: flex; flex-direction: column; gap: 8px; padding: 24px 0; outline: none; }
.contact-form__success[hidden] { display: none; }
.contact-form__success .text-l { color: #e4e5e7; }

/* ---------- Footer ---------- */
.footer { position: relative; z-index: 2; margin-top: var(--section-gap); padding-bottom: 50px; color: #fbfaf9; }
.footer__inner { display: flex; flex-direction: column; gap: 10px; width: min(1400px, 100% - var(--gutters)); margin: 0 auto; }
.footer__top { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 26px; }
.footer__brand img { width: 140px; height: auto; }
.footer__social { display: flex; align-items: center; gap: 16px; }
.social-link { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; opacity: 0.85; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.social-link img { width: auto; max-width: 24px; height: auto; max-height: 24px; }
.social-link:hover { opacity: 1; transform: translateY(-2px); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; padding-top: 33px; border-top: 1px solid #fbfaf9; font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0; }
.footer__bottom a { transition: color 0.3s var(--ease); }
.footer__bottom a:hover { color: var(--brand); }

/* ---------- Motion start states (only when JS runs; the page is complete without it) ---------- */
.js [data-hero-pop] { opacity: 0; transform: scale(0.7); }
.js.is-loaded [data-hero-pop] { opacity: 1; transform: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.js.is-loaded .hero__buttons [data-hero-pop] { transition-delay: 0.2s; }
.js [data-hero-marquee] { opacity: 0; translate: -50px 150px; }
.js.is-loaded [data-hero-marquee] { opacity: 1; translate: 0 0; transition: opacity 0.4s var(--ease), translate 0.4s var(--ease); }
.js .page__glow--hero { opacity: 0; }
.js.is-loaded .page__glow--hero { opacity: 1; transition: opacity 0.6s var(--ease) 0.2s; }
.js [data-slide-up] { opacity: 0; transform: translateY(100px); }
.js [data-slide-up].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart); }
.js [data-fade-in] { opacity: 0; }
.js [data-fade-in].is-in { opacity: 1; transition: opacity 1s var(--ease-out-quart); }
.js .navbar { opacity: 0; transform: translateY(-100px); }
.js.is-loaded .navbar { opacity: 1; transform: none; transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart); }

/* Blur-in text: letters (headings) or words (paragraphs); the wordmark image blurs in with its heading */
.split-word { display: inline-block; white-space: nowrap; }
.split-unit { display: inline-block; }
.js [data-blur]:not(.is-split) { visibility: hidden; }
.js [data-blur] .split-unit, .js [data-blur] img { opacity: 0; filter: blur(10px); }
.js [data-blur].is-in .split-unit { opacity: 1; filter: blur(0); transition: opacity var(--blur-dur, 0.2s) var(--ease), filter var(--blur-dur, 0.2s) var(--ease); transition-delay: calc(var(--i) * 10ms); }
.js [data-blur].is-in img { opacity: 1; filter: blur(0); transition: opacity 0.4s var(--ease) 0.06s, filter 0.4s var(--ease) 0.06s; }

/* Service graphics build in layer by layer; all timings are SVG-local and in ms.
   The existing reveal owns .is-in. Only children carry idle motion, so every
   .vl settles to opacity: 1 / transform: none, including after replay. */
[data-visual] .vl {
  --sv-duration: 480ms;
  --sv-delay: 0ms;
  --sv-enter: sv-slide-in;
  --sv-replay: sv-slide-replay;
  --sv-start: translateY(3px) scale(.96);
  transform-box: fill-box;
  transform-origin: center;
}
[data-visual] .vl--from-left { --sv-start: translateX(-8px) scale(.97); }
[data-visual] .vl--from-right { --sv-start: translateX(8px) scale(.97); }
[data-visual] .vl--pop, [data-visual] .vl--badge, [data-visual] .vl--dot {
  --sv-enter: sv-pop-in;
  --sv-replay: sv-pop-replay;
  --sv-start: scale(.86);
  --sv-crest: scale(1.035);
}
[data-visual] .vl--badge { --sv-start: scale(.92); --sv-crest: scale(1.025); }
[data-visual] .vl--dot { --sv-start: scale(.72); --sv-crest: scale(1.06); }
[data-visual] .vl--grow-down { --sv-start: scaleY(0); transform-origin: 50% 0; }
[data-visual="podcast"] [data-layer^="wave-"] { --sv-start: scaleY(.45); }
[data-visual="video"] [data-layer="playhead"] {
  --sv-enter: sv-slide-in;
  --sv-replay: sv-slide-replay;
  --sv-start: translateY(-3px) scaleY(.96);
  transform-origin: 50% 0;
}
[data-visual] .visual__svg:focus-visible { outline: 2px solid #fddb73; outline-offset: 3px; }
.js [data-visual] .vl { opacity: 0; transform: var(--sv-start); }
.js [data-visual].is-in .vl {
  opacity: 1;
  transform: none;
  animation: var(--sv-enter) var(--sv-duration) var(--sv-easing, cubic-bezier(.25,1,.5,1)) var(--sv-delay) backwards;
}
.js [data-visual].sv-ready .vl { animation: none; }

@keyframes sv-slide-in {
  from { opacity: 0; transform: var(--sv-start); }
  to { opacity: 1; transform: none; }
}
@keyframes sv-pop-in {
  0% { opacity: 0; transform: var(--sv-start); }
  70% { opacity: 1; transform: var(--sv-crest); }
  100% { opacity: 1; transform: none; }
}

/* Quiet accents: existing transforms stay on their original SVG groups.
   New highlights are transparent at rest, including without JavaScript. */
[data-visual] .sv-idle { transform-box: fill-box; transform-origin: center; }
[data-visual] .sv-glow { opacity: 0; }
[data-visual] .sv-muted { opacity: .5; }
[data-visual] .sv-glow { --sv-loop: sv-live-glow; --sv-period: 5600ms; }
/* Dots follow all three original connector curves into the ranking pill. */
[data-visual] .sv-flow { --sv-period: 3600ms; --sv-timing: linear; }
[data-visual] .sv-flow--left { --sv-loop: sv-flow-left; }
[data-visual] .sv-flow--middle { --sv-loop: sv-flow-middle; }
[data-visual] .sv-flow--right { --sv-loop: sv-flow-right; }
.js [data-visual="seo"] .sv-flow { opacity: 0; }
[data-visual="social"] [data-layer="area"] { --sv-start: scaleY(.04); --sv-duration: 640ms; transform-origin: 0 100%; }
[data-visual] .sv-curve { --sv-loop: sv-curve-breathe; --sv-period: 6000ms; transform-box: view-box; transform-origin: 0 229px; }
[data-visual="social"] [data-layer="dot"] {
  --sv-enter: sv-follower-rise;
  --sv-replay: sv-follower-replay;
  --sv-easing: linear;
  --sv-start: translate(-202.049px, 118.611px);
}
[data-visual] .sv-count, [data-visual] .sv-timecode { font-variant-numeric: tabular-nums; }
[data-visual] .sv-halo { --sv-loop: sv-halo-pulse; --sv-period: 4800ms; }
[data-visual] .sv-arrow { --sv-loop: sv-arrow-lift; --sv-period: 5200ms; }
[data-visual] .sv-wave { --sv-loop: sv-wave-breathe; }
[data-visual] .sv-rec { --sv-loop: sv-rec-light; --sv-period: 3600ms; }
[data-visual] .sv-playhead { --sv-loop: sv-playhead-drift; --sv-period: 8000ms; }
[data-visual] .sv-sparkle { --sv-loop: sv-sparkle-turn; --sv-period: 6400ms; }
.js [data-visual].is-in.sv-ready .sv-idle {
  animation: var(--sv-loop) var(--sv-period, 4800ms) var(--sv-timing, ease-in-out) var(--sv-phase, 0ms) infinite;
  animation-play-state: paused;
}
.js [data-visual].is-in.sv-ready.sv-onscreen .sv-idle { animation-play-state: running; }

@keyframes sv-live-glow {
  0%, 100% { opacity: 0; }
  50% { opacity: .13; }
}
@keyframes sv-curve-breathe {
  0%, 100% { scale: none; }
  50% { scale: 1 .985; }
}
@keyframes sv-flow-left {
  0%, 100% { opacity: 0; translate: none; }
  4.00% { opacity: 0; translate: -5.538px -15.936px; }
  7.58% { opacity: 1; translate: -4.945px -10.395px; }
  11.17% { opacity: 1; translate: -3.234px -5.362px; }
  14.75% { opacity: 1; translate: -0.507px -0.790px; }
  18.33% { opacity: 1; translate: 3.135px 3.370px; }
  21.92% { opacity: 1; translate: 7.590px 7.166px; }
  25.50% { opacity: 1; translate: 12.757px 10.644px; }
  29.08% { opacity: 1; translate: 18.533px 13.854px; }
  32.67% { opacity: 1; translate: 24.817px 16.842px; }
  36.25% { opacity: 1; translate: 31.508px 19.657px; }
  39.83% { opacity: 1; translate: 38.504px 22.346px; }
  43.42% { opacity: 1; translate: 45.703px 24.958px; }
  47.00% { opacity: 1; translate: 53.004px 27.540px; }
  50.58% { opacity: 1; translate: 60.304px 30.139px; }
  54.17% { opacity: 1; translate: 67.503px 32.804px; }
  57.75% { opacity: 1; translate: 74.499px 35.583px; }
  61.33% { opacity: 1; translate: 81.190px 38.524px; }
  64.92% { opacity: 1; translate: 87.475px 41.674px; }
  68.50% { opacity: 1; translate: 93.251px 45.081px; }
  72.08% { opacity: 1; translate: 98.417px 48.792px; }
  75.67% { opacity: 1; translate: 102.872px 52.856px; }
  79.25% { opacity: 1; translate: 106.514px 57.321px; }
  82.83% { opacity: 1; translate: 109.241px 62.235px; }
  86.42% { opacity: 1; translate: 110.952px 67.644px; }
  90.00% { opacity: 1; translate: 111.545px 73.598px; }
  96% { opacity: 0; translate: 111.545px 73.598px; }
}
@keyframes sv-flow-middle {
  0%, 100% { opacity: 0; translate: none; }
  4.00% { opacity: 0; translate: -0.455px -40.936px; }
  11.17% { opacity: 1; translate: -0.455px -33.475px; }
  18.33% { opacity: 1; translate: -0.455px -26.014px; }
  25.50% { opacity: 1; translate: -0.455px -18.552px; }
  32.67% { opacity: 1; translate: -0.455px -11.091px; }
  39.83% { opacity: 1; translate: -0.455px -3.630px; }
  47.00% { opacity: 1; translate: -0.455px 3.831px; }
  54.17% { opacity: 1; translate: -0.455px 11.292px; }
  61.33% { opacity: 1; translate: -0.455px 18.753px; }
  68.50% { opacity: 1; translate: -0.455px 26.214px; }
  75.67% { opacity: 1; translate: -0.455px 33.676px; }
  82.83% { opacity: 1; translate: -0.455px 41.137px; }
  90.00% { opacity: 1; translate: -0.455px 48.598px; }
  96% { opacity: 0; translate: -0.455px 48.598px; }
}
@keyframes sv-flow-right {
  0%, 100% { opacity: 0; translate: none; }
  4.00% { opacity: 0; translate: 44.627px -38.936px; }
  7.58% { opacity: 1; translate: 44.035px -33.395px; }
  11.17% { opacity: 1; translate: 42.324px -28.362px; }
  14.75% { opacity: 1; translate: 39.597px -23.790px; }
  18.33% { opacity: 1; translate: 35.955px -19.630px; }
  21.92% { opacity: 1; translate: 31.500px -15.834px; }
  25.50% { opacity: 1; translate: 26.333px -12.356px; }
  29.08% { opacity: 1; translate: 20.557px -9.146px; }
  32.67% { opacity: 1; translate: 14.273px -6.158px; }
  36.25% { opacity: 1; translate: 7.582px -3.343px; }
  39.83% { opacity: 1; translate: 0.586px -0.654px; }
  43.42% { opacity: 1; translate: -6.613px 1.958px; }
  47.00% { opacity: 1; translate: -13.914px 4.540px; }
  50.58% { opacity: 1; translate: -21.214px 7.139px; }
  54.17% { opacity: 1; translate: -28.413px 9.804px; }
  57.75% { opacity: 1; translate: -35.409px 12.583px; }
  61.33% { opacity: 1; translate: -42.100px 15.524px; }
  64.92% { opacity: 1; translate: -48.385px 18.674px; }
  68.50% { opacity: 1; translate: -54.161px 22.081px; }
  72.08% { opacity: 1; translate: -59.327px 25.792px; }
  75.67% { opacity: 1; translate: -63.782px 29.856px; }
  79.25% { opacity: 1; translate: -67.424px 34.321px; }
  82.83% { opacity: 1; translate: -70.151px 39.235px; }
  86.42% { opacity: 1; translate: -71.862px 44.644px; }
  90.00% { opacity: 1; translate: -72.455px 50.598px; }
  96% { opacity: 0; translate: -72.455px 50.598px; }
}
@keyframes sv-follower-rise {
  0.000% { opacity: 0; transform: translate(-202.050px, 118.536px); }
  4.167% { opacity: 1; transform: translate(-185.068px, 113.020px); }
  8.333% { opacity: 1; transform: translate(-172.327px, 107.854px); }
  12.500% { opacity: 1; transform: translate(-162.963px, 102.969px); }
  16.667% { opacity: 1; transform: translate(-156.113px, 98.298px); }
  20.833% { opacity: 1; transform: translate(-150.914px, 93.770px); }
  25.000% { opacity: 1; transform: translate(-146.502px, 89.318px); }
  29.167% { opacity: 1; transform: translate(-142.015px, 84.872px); }
  33.333% { opacity: 1; transform: translate(-136.588px, 80.364px); }
  37.500% { opacity: 1; transform: translate(-129.359px, 75.724px); }
  41.667% { opacity: 1; transform: translate(-119.464px, 70.884px); }
  45.833% { opacity: 1; transform: translate(-106.040px, 65.775px); }
  50.000% { opacity: 1; transform: translate(-88.224px, 60.328px); }
  54.167% { opacity: 1; transform: translate(-75.859px, 56.736px); }
  58.333% { opacity: 1; transform: translate(-65.538px, 53.364px); }
  62.500% { opacity: 1; transform: translate(-56.922px, 50.066px); }
  66.667% { opacity: 1; transform: translate(-49.672px, 46.698px); }
  70.833% { opacity: 1; transform: translate(-43.451px, 43.115px); }
  75.000% { opacity: 1; transform: translate(-37.918px, 39.171px); }
  79.167% { opacity: 1; transform: translate(-32.736px, 34.723px); }
  83.333% { opacity: 1; transform: translate(-27.565px, 29.624px); }
  87.500% { opacity: 1; transform: translate(-22.067px, 23.730px); }
  91.667% { opacity: 1; transform: translate(-15.904px, 16.896px); }
  95.833% { opacity: 1; transform: translate(-8.735px, 8.977px); }
  100% { opacity: 1; transform: none; }
}
@keyframes sv-follower-replay {
  0.000% { opacity: 0; transform: translate(-202.050px, 118.536px); }
  4.167% { opacity: 1; transform: translate(-185.068px, 113.020px); }
  8.333% { opacity: 1; transform: translate(-172.327px, 107.854px); }
  12.500% { opacity: 1; transform: translate(-162.963px, 102.969px); }
  16.667% { opacity: 1; transform: translate(-156.113px, 98.298px); }
  20.833% { opacity: 1; transform: translate(-150.914px, 93.770px); }
  25.000% { opacity: 1; transform: translate(-146.502px, 89.318px); }
  29.167% { opacity: 1; transform: translate(-142.015px, 84.872px); }
  33.333% { opacity: 1; transform: translate(-136.588px, 80.364px); }
  37.500% { opacity: 1; transform: translate(-129.359px, 75.724px); }
  41.667% { opacity: 1; transform: translate(-119.464px, 70.884px); }
  45.833% { opacity: 1; transform: translate(-106.040px, 65.775px); }
  50.000% { opacity: 1; transform: translate(-88.224px, 60.328px); }
  54.167% { opacity: 1; transform: translate(-75.859px, 56.736px); }
  58.333% { opacity: 1; transform: translate(-65.538px, 53.364px); }
  62.500% { opacity: 1; transform: translate(-56.922px, 50.066px); }
  66.667% { opacity: 1; transform: translate(-49.672px, 46.698px); }
  70.833% { opacity: 1; transform: translate(-43.451px, 43.115px); }
  75.000% { opacity: 1; transform: translate(-37.918px, 39.171px); }
  79.167% { opacity: 1; transform: translate(-32.736px, 34.723px); }
  83.333% { opacity: 1; transform: translate(-27.565px, 29.624px); }
  87.500% { opacity: 1; transform: translate(-22.067px, 23.730px); }
  91.667% { opacity: 1; transform: translate(-15.904px, 16.896px); }
  95.833% { opacity: 1; transform: translate(-8.735px, 8.977px); }
  100% { opacity: 1; transform: none; }
}
@keyframes sv-halo-pulse {
  0%, 100% { opacity: 1; scale: none; }
  50% { opacity: .6; scale: 1.06; }
}
@keyframes sv-arrow-lift {
  0%, 100% { translate: none; }
  50% { translate: 1.5px -2px; }
}
@keyframes sv-wave-breathe {
  0%, 100% { scale: none; }
  35% { scale: 1 .96; }
  70% { scale: 1 1.04; }
}
@keyframes sv-rec-light {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
@keyframes sv-playhead-drift {
  0%, 100% { translate: none; }
  45% { translate: -118px 0; }
  85% { translate: 8px 0; }
}
@keyframes sv-sparkle-turn {
  0%, 100% { rotate: none; }
  50% { rotate: 6deg; }
}

/* CSS-only replay: a pointer already over an entering card shares its first build.
   After the entrance, leaving cancels to the final state; re-entry restarts.
   A held pointer/focus finishes once, with no hidden layers left behind. */
@media (hover: hover) and (pointer: fine) {
  .js .service-card:is(:hover, :focus-within) [data-visual].is-in .vl {
    animation: var(--sv-replay) var(--sv-duration) var(--sv-easing, cubic-bezier(.25,1,.5,1)) var(--sv-delay) backwards;
  }
  /* Idle motion keeps running during hover/focus; offscreen cards still pause. */
}
@keyframes sv-slide-replay {
  from { opacity: 0; transform: var(--sv-start); }
  to { opacity: 1; transform: none; }
}
@keyframes sv-pop-replay {
  0% { opacity: 0; transform: var(--sv-start); }
  70% { opacity: 1; transform: var(--sv-crest); }
  100% { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive cascade (breakpoint.md): 980 → 900 → 480 → 360, all cumulative.
   ========================================================================== */

/* ---------- ≤ 980px: compact desktop. Two columns stay; narrower gutters and type ---------- */
@media (max-width: 980px) {
  :root { --cap: 900px; --gutters: 48px; --section-gap: 140px; }
  html { scroll-padding-top: 106px; }
  .navbar { top: 32px; }
  .hero { padding-top: 200px; }
  .hero__kicker, .services__title .italic-500 { font-size: 36px; line-height: 48px; }
  .h1 { font-size: 66px; line-height: 74px; letter-spacing: -1.32px; }
  .h3 { font-size: 46px; line-height: 50px; }
  .page__glow--hero { top: 300px; width: 810px; height: 810px; margin-left: -405px; }
  .hero__wall { height: 500px; }
  .marquee-3d { top: 100px; }
  .services { margin-bottom: 0; }
  .services__grid { gap: 24px; }
  .service-card { height: auto; padding: 56px 20px; }
  .service-card__visual { height: auto; }
  .clients__marquee { width: 100vw; }
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 1.4fr); gap: 28px; }
  .contact__card { padding: 40px 32px; }
  .footer__inner { width: min(var(--cap), 100% - var(--gutters)); }
  /* The content column fills the screen from here down, so the rail would sit on top of cards and fields */
  .social-rail { display: none; }
}

/* ---------- ≤ 900px: primary stacking breakpoint. Content column capped at 600px, burger menu ---------- */
@media (max-width: 900px) {
  :root { --cap: 600px; --gutters: 32px; --section-gap: 96px; }
  html { scroll-padding-top: 84px; }
  .cursor { display: none; }

  /* Navbar: the bar takes the content column's width; height 58 → 52, logo scaled to match */
  .navbar { top: 16px; max-width: min(600px, 100% - 32px); height: 52px; }
  .nav { padding: 0 4px 0 16px; }
  .nav__brand img { width: 20px; height: 30px; }
  .nav__cta { display: none; }
  .nav__burger { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; }
  .nav__burger-inner { position: relative; display: block; width: 17px; height: 14px; }
  .nav__burger i { position: absolute; left: 0; width: 17px; height: 1px; border-radius: 50px; background: var(--white); transition: transform 0.35s var(--ease), opacity 0.2s; }
  .nav__burger i:nth-child(1) { top: 0; }
  .nav__burger i:nth-child(2) { top: 6.5px; }
  .nav__burger i:nth-child(3) { bottom: 0; }
  .nav__burger:hover i { transform: scaleX(1.09); }
  .navbar.is-open .nav__burger i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .navbar.is-open .nav__burger i:nth-child(2) { opacity: 0; }
  .navbar.is-open .nav__burger i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  /* Full-screen menu; its padding lines the stand-in bar up exactly under the real one */
  .nav__menu { position: fixed; inset: 0 0 auto; z-index: 3; flex-direction: column; align-items: stretch; width: 100%; height: 100vh; height: 100dvh; padding: 16px max(16px, (100% - 600px) / 2); background: var(--black); visibility: hidden; opacity: 0; transition: opacity 0.2s, visibility 0s 0.2s; }
  .navbar.is-open .nav__menu { visibility: visible; opacity: 1; transition: opacity 0.2s ease-in, visibility 0s; }
  .nav__mobile-top { display: block; height: 52px; flex: none; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: var(--nav-bg); }
  .nav__links { flex-direction: column; align-items: flex-start; height: auto; padding-top: 30px; }
  .nav__mobile-only { display: block; }
  .nav__link { justify-content: flex-start; height: 48px; padding: 0 14px; font-size: 20px; line-height: 1.4; font-weight: 500; transform: translateX(-100%); transition: transform 0.2s ease, background-color 0.35s, border-color 0.35s, color 0.35s; }
  .nav__mobile-only .nav__link { color: var(--brand); }
  .navbar.is-open .nav__link { transform: none; transition: transform 0.35s ease-in, background-color 0.35s, border-color 0.35s, color 0.35s; }

  /* Hero stacks and stays left-aligned (centering is a separate, phone-only rule) */
  .hero { padding-top: 124px; }
  .hero__kicker { margin-bottom: 0; font-size: 32px; line-height: 44px; }
  .h1 { font-size: clamp(44px, 9vw, 58px); line-height: 1.08; letter-spacing: -0.02em; }
  .hero__row { flex-direction: column; align-items: flex-start; gap: 25px; }
  .hero__text { flex: none; font-size: 18px; line-height: 27px; }
  .page__glow--hero { top: 300px; width: 600px; height: 700px; margin-left: -300px; }
  .hero__wall { height: 450px; }
  .marquee-3d { top: 64px; scale: 0.75; transform-origin: 50% 0; }
  .page__glow--left, .page__glow--right { width: 800px; height: 800px; }
  .page__glow--left { top: 1500px; left: -400px; }
  .page__glow--right { top: 4200px; right: -400px; }

  .h3 { font-size: 42px; line-height: 46px; }
  .services__head { width: 100%; }
  .services__title { width: 400px; }
  .services__title .italic-500 { font-size: 34px; line-height: 46px; }
  .services__tagline { padding-bottom: 0; font-size: 18px; line-height: 26px; }
  .services__grid { grid-template-columns: 1fr; }
  .faq__title { font-size: 26px; line-height: 34px; }
  .faq-item__q { gap: 16px; padding: 20px; font-size: 18px; }
  .faq-item__a { padding: 0 20px 20px 60px; }
  .blogs__grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; gap: 25px; }
  .contact__title { margin-bottom: 24px; }
  .contact__card { padding: 36px 28px; }
  .contact__glow { top: auto; bottom: -200px; right: -300px; width: 600px; height: 600px; margin-top: 0; }

  /* Footer stacks and centres */
  .footer { padding-bottom: 24px; }
  .footer__inner { gap: 16px; }
  .footer__top { flex-direction: column; justify-content: center; gap: 16px; height: auto; }
  .footer__social { flex-wrap: wrap; justify-content: center; }
  .footer__bottom { padding-top: 20px; }
}

/* Touch: 44px targets and 16px controls on small screens or any coarse pointer (an OR query) */
@media (max-width: 900px), (pointer: coarse) {
  .field input { padding: 10px 0; }
  .phone__country { height: 44px; margin-bottom: 0; }
  .phone__prefix { margin-bottom: 0; }
  .footer__social { gap: 0; }
  .social-link { width: 44px; height: 44px; }
  .footer__bottom a, .footer__bottom p { padding: 10px 0; }
  .contact__list a { padding: 11px 0; }
}

/* ---------- ≤ 480px: phone presentation. 14px gutters; only the hero copy and CTAs are centred ---------- */
@media (max-width: 480px) {
  :root { --cap: 100%; --gutters: 28px; --section-gap: 72px; }
  html { scroll-padding-top: 78px; }
  .navbar { top: 14px; max-width: calc(100% - 28px); height: 50px; }
  .nav { padding: 0 3px 0 14px; }
  .nav__brand img { width: 18px; height: 27px; }
  .nav__menu { padding: 14px; }
  .nav__mobile-top { height: 50px; }

  .hero { padding-top: 104px; }
  .hero__top, .hero__row { align-items: center; text-align: center; }
  .hero__title { align-items: center; }
  .hero__kicker { font-size: 28px; line-height: 38px; }
  .h1 { font-size: clamp(36px, 10vw, 44px); }
  .hero__text { font-size: 16px; line-height: 24px; }
  .br-wide { display: none; }
  .hero__buttons { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__buttons .btn { width: 100%; }
  .page__glow--hero { top: 380px; width: 511px; height: 650px; margin-left: -255.5px; }
  .hero__wall { height: 300px; }
  .marquee-3d { top: 30px; scale: 0.55; }
  .star-caption { font-size: 14px; }

  .h3 { font-size: 34px; line-height: 38px; }
  .h6 { font-size: 22px; line-height: 28px; }
  .caption { font-size: 18px; }
  .services__title { width: 100%; }
  .services__title .italic-500 { font-size: 28px; line-height: 38px; }
  .services__tagline { font-size: 16px; line-height: 24px; }
  .service-card { padding: 40px 16px; }
  .faq-item__q { gap: 14px; padding: 18px; font-size: 17px; }
  .faq-item__a { padding: 0 18px 18px 56px; }
  .blog-card__link { height: 340px; padding-bottom: 28px; }
  .contact__kicker { font-size: 18px; line-height: 26px; }
  .contact__list li { gap: 12px; font-size: 16px; line-height: 24px; }
  .contact__icon { width: 44px; height: 44px; }
  .contact__card { padding: 28px 18px 24px; border-radius: 13px; }
  .contact-form { gap: 24px; }
  .contact-form__row { grid-template-columns: 1fr; }
  .contact-form__submit { align-self: stretch; }
  .contact__glow { width: 500px; height: 500px; right: -260px; }
}

/* ---------- ≤ 360px: smallest widths ---------- */
@media (max-width: 360px) {
  .h1 { font-size: 34px; }
  .hero__kicker { font-size: 26px; line-height: 34px; }
  .h3 { font-size: 30px; line-height: 34px; }
  .services__title .italic-500 { font-size: 26px; line-height: 34px; }
  .hero__wall { height: 265px; }
  .marquee-3d { scale: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-visual] .vl { opacity: 1; transform: none; animation: none !important; transition: none !important; }
  .js [data-visual] .sv-idle { animation: none !important; translate: none; scale: none; rotate: none; }
  .js [data-visual="seo"] .sv-flow { opacity: 1; }

  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js [data-blur] .split-unit, .js [data-blur] img, .js [data-slide-up], .js [data-fade-in], .js [data-hero-pop], .js [data-hero-marquee], .js .navbar, .js .page__glow--hero, .js .vl, .js .social-rail a { opacity: 1; filter: none; transform: none; translate: none; }
  .js [data-blur]:not(.is-split) { visibility: visible; }
}