/* Inter Tight, served from this site (assets/fonts, Latin and Latin Extended only; SIL Open Font
   License). One variable file per range covers every weight from 300 to 700. */
@font-face { font-family: 'Inter Tight'; font-style: italic; font-weight: 500 700; font-display: swap; src: url(../assets/fonts/inter-tight-latin-ext-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: italic; font-weight: 500 700; font-display: swap; src: url(../assets/fonts/inter-tight-latin-italic.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 Tight'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../assets/fonts/inter-tight-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../assets/fonts/inter-tight-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; }

:root {
  /* canvas and surfaces */
  --bg: #001224;
  /* headline accent: the quiet second tone in a two-tone headline */
  --ink-quiet: #8ea6c6;
  --surface-bezel: #01172d;
  --surface-raised: #012136;
  --surface-overlay: #002740;
  --surface-sunken: #00162b;
  --card: #0d1c2f;
  --card-2: #0e1d30;
  --line: rgba(255, 255, 255, 0.08);
  --line-card: #354151;
  --glass: rgba(1, 33, 54, 0.43);

  /* text (live) */
  --text-1: #ffffff;
  --text-2: rgba(255, 255, 255, 0.86);
  --text-3: #b9c6d2;
  --text-4: rgba(255, 255, 255, 0.68);

  /* accent (live) */
  --accent: #18cdfd;
  --accent-ink: #001b2e;
  --grad-text: linear-gradient(135deg, #1bc9fe 0%, #1bc9fe 30%, #0a86fa 100%);
  --signal: #f5b301;

  /* layout (live) */
  --container: 1200px;
  --container-header: 1300px;
  --gutter: 25px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* transparent so the page backdrop (hero.css) shows; html paints the colour */
  background: transparent;
  color: var(--text-1);
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

svg path, svg rect, svg circle { vector-effect: non-scaling-stroke; }

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

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 8px;
  background: #0a5fd0; color: #fff; font-weight: 600;
}
.skip:focus { top: 16px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- shared type ---------- */
/* upright two-tone: the accent words just shift to a quieter steel blue */
.grad {
  font-style: normal;
  background: linear-gradient(var(--ink-quiet), var(--ink-quiet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* section headlines */
.h2 {
  font-size: 48px;
  font-weight: 500;
  line-height: 50px;
  letter-spacing: -0.045em;
  background: linear-gradient(180deg, #ffffff 30%, #a9bfdc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="light"] .h2 { background-image: linear-gradient(180deg, #071a33 30%, #3d5577 100%); }
.h2--lg { font-size: 53px; line-height: 60px; }

.lede {
  color: var(--text-2);
  font-size: 20px;
  line-height: 33px;
}

/* section label */
/* Rounded-square button: the label and an icon tile. Blue on the page, --light (white) on blue. */
.sq-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1668ff 0%, #0a4dff 100%);
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 20, 90, 0.35), 0 16px 36px -14px rgba(10, 77, 255, 0.95);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease);
}
.sq-btn__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.sq-btn__icon svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--ease-out); }
.sq-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 20, 90, 0.35), 0 22px 44px -14px rgba(10, 77, 255, 1); }
.sq-btn:hover .sq-btn__icon svg { transform: translateX(2px); }
.sq-btn[href^="#"]:hover .sq-btn__icon svg { transform: translate(2px, -2px); }
.sq-btn:active { transform: scale(0.97); transition-duration: 0.12s; }
.sq-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sq-btn--light { background: #fff; color: #06235c; box-shadow: 0 14px 30px -14px rgba(0, 20, 90, 0.7); }
.sq-btn--light .sq-btn__icon { background: linear-gradient(180deg, #1668ff, #0a4dff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.sq-btn--light:hover { box-shadow: 0 20px 40px -16px rgba(0, 20, 90, 0.85); }
.sq-btn--light:focus-visible { outline-color: #fff; }
/* --lg for the big moments (hero, The difference, the closing CTA); --face puts John's photo first */
.sq-btn--lg { gap: 14px; padding: 7px 7px 7px 22px; border-radius: 16px; font-size: 18px; letter-spacing: -0.02em; }
.sq-btn--lg .sq-btn__icon { width: 46px; height: 46px; border-radius: 12px; }
.sq-btn--lg .sq-btn__icon svg { width: 20px; height: 20px; }
.sq-btn--face { padding-left: 7px; }
.sq-btn__face { flex: none; width: 46px; height: 46px; border-radius: 12px; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
.sq-btn--light .sq-btn__face { box-shadow: 0 0 0 2px rgba(10, 77, 255, 0.2); }
/* a second, quieter line under the label */
.sq-btn__text { display: flex; flex-direction: column; gap: 3px; padding-right: 6px; line-height: 1.1; text-align: left; }
.sq-btn__text small { font-size: 13px; font-weight: 500; letter-spacing: 0; opacity: 0.8; }
@media (max-width: 767px) {
  .sq-btn--lg { gap: 12px; font-size: 17px; }
  .sq-btn--lg .sq-btn__icon, .sq-btn__face { width: 44px; height: 44px; }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;
  padding: 10px 18px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1;
}

.section-head--center { max-width: 680px; margin: 0 auto; text-align: center; }
.section-head--center .lede { max-width: 470px; margin: 18px auto 0; }

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.2px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.73);
  font-size: 16px;
  line-height: 27px;
  transition: color 0.25s var(--ease);
}
.link-arrow svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s var(--ease-out);
}
.link-arrow:hover { color: #fff; }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow--strong { color: #fff; font-size: 17px; font-weight: 600; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- scroll reveal ---------- */
/* Only hides things once JS has confirmed it can show them again. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* HEADER */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  padding: 20px var(--gutter) 10px;
  transition: transform 0.45s var(--ease), background-color 0.35s var(--ease), padding 0.35s var(--ease);
}
/* the header has no bar; the pieces float and hide while scrolling down */
.site-header.is-scrolled {
  padding-top: 12px;
  padding-bottom: 8px;
}
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: var(--container-header);
  margin: 0 auto;
}
.site-header__logo { justify-self: start; margin-left: 10px; }
.site-header__mark { display: block; width: 30px; height: auto; }
/* the logo's middle stroke turns dark over light backgrounds */
.site-header { --logo-ink: #fff; }
.site-header__mark path { transition: fill 0.3s var(--ease); }
[data-theme="light"] .site-header,
[data-under="light"] .site-header { --logo-ink: #071a33; }
/* over a light section in dark mode, the glass pieces get a darker backing so their white text
   reads */
[data-theme="dark"][data-under="light"] .nav-pill::before,
[data-theme="dark"][data-under="light"] .menu-btn,
[data-theme="dark"][data-under="light"] .theme-btn { background: rgba(4, 14, 32, 0.86); }

.nav-pill {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 15px;
  background: var(--glass);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* one marker slides between the links */
.nav-pill__marker {
  position: absolute;
  top: 7px;
  left: 0;
  height: calc(100% - 14px);
  width: 0;
  border-radius: 10px;
  /* soft glass rather than a solid fill, so the label stays readable */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 16px -8px rgba(0, 0, 0, 0.6);
  transition: transform 0.4s var(--ease-out), width 0.4s var(--ease-out);
}
.nav-pill__link {
  position: relative;
  padding: 12px 27px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.2px;
  transition: color 0.3s var(--ease);
}
.nav-pill__link.is-active,
.nav-pill__link:hover { color: #fff; }
/* while the marker sits under another link, the current one goes back to normal */
.nav-pill:hover .nav-pill__link.is-active:not(:hover) { color: var(--text-2); }
/* no-JS fallback */
html:not(.js) .nav-pill__link.is-active { background: rgba(255, 255, 255, 0.14); }

.menu-btn-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  margin: 16px 0;
  padding: 7px;
  border-radius: 10px;
  background: var(--surface-sunken);
}
.menu-btn {
  padding: 10px;
  border-radius: 5px;
  background: var(--surface-overlay);
  font-size: 15px;
  font-weight: 600;
  line-height: 15px;
  transition: background-color 0.3s var(--ease);
}
.menu-btn:hover { background: #003a5c; }

.site-header.is-scrolled .menu-btn-wrap { margin: 6px 0; }

/* ---------- menu box under the Menu button ---------- */
/* ---------- the menu: a box hanging under the Menu button ----------
   Each link with a quiet icon, then a "Start your project" button with the email and LinkedIn. */
.site-menu { position: fixed; inset: 0; z-index: 60; }
.site-menu[hidden] { display: none; }
.site-menu__box {
  position: absolute;
  top: var(--menu-top, 84px);
  right: var(--menu-right, 24px);
  width: 300px;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 10px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 80% 45% at 100% 0%, rgba(42, 157, 255, 0.2), transparent 70%),
    linear-gradient(160deg, rgba(14, 34, 66, 0.94), rgba(3, 14, 32, 0.96));
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  transform-origin: calc(100% - 30px) 0;
  opacity: 0;
  scale: 0.94;
  translate: 0 -8px;
  transition: opacity 0.25s var(--ease), scale 0.4s var(--ease-out), translate 0.4s var(--ease-out);
}
.site-menu.is-open .site-menu__box { opacity: 1; scale: 1; translate: none; }
.site-menu__list { padding: 2px 0 6px; }
.site-menu__list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.site-menu__t { flex: 1; }
/* an arrow slides in on hover */
.site-menu__list a::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  translate: -6px 0;
  transition: opacity 0.25s var(--ease), translate 0.3s var(--ease-out);
}
.site-menu__list a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.site-menu__list a:hover::after { opacity: 1; translate: none; color: var(--accent); }
/* the section you're on: a soft highlight */
.site-menu__list a.is-current { background: rgba(47, 134, 255, 0.16); color: #fff; }
/* links drop in one after another */
.site-menu.is-open .site-menu__list li { animation: menuIn 0.45s var(--ease-out) both; animation-delay: calc(0.04s + var(--i, 0) * 0.03s); }
.site-menu__list li:nth-child(2) { --i: 1; }
.site-menu__list li:nth-child(3) { --i: 2; }
.site-menu__list li:nth-child(4) { --i: 3; }
.site-menu__list li:nth-child(5) { --i: 4; }
.site-menu__list li:nth-child(6) { --i: 5; }
.site-menu__list li:nth-child(7) { --i: 6; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } }

/* the foot: the button, then the email and LinkedIn */
.site-menu__foot { display: grid; gap: 10px; margin-top: 4px; padding: 6px 4px 4px; }
.site-menu__cta { justify-content: space-between; width: 100%; min-width: 0; }
.site-menu__contact { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; }
.site-menu__mail { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-3); font-size: 13.5px; transition: color 0.2s; }
.site-menu__mail svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-menu__mail:hover { color: #fff; }
.site-menu__social { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #0077b5; transition: transform 0.25s var(--ease-out), filter 0.25s; }
.site-menu__social:hover { transform: translateY(-2px); filter: brightness(1.12); }
.site-menu__social svg { width: 15px; height: 15px; fill: #fff; }

/* each link's icon: quiet grey, white with the link on hover or when it's the section you're on */
.site-menu__ic { display: block; flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--text-4); transition: color 0.25s var(--ease); }
.site-menu__list a:hover .site-menu__ic, .site-menu__list a.is-current .site-menu__ic { color: #fff; }

/* SERVICES */
.services { padding: 100px 0 25px; }
.services .section-head { margin-bottom: 56px; }

/* live widths: row one 710 + 470, row two 492 + 686, 20px gaps */
.bento {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.svc {
  position: relative;
  min-height: 322px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  background: linear-gradient(160deg, #0c1d31 0%, #071526 100%);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease-out);
}
.svc--web { flex: 0 0 calc(60% - 10px); background: linear-gradient(120deg, #0a4dff 0%, #0b63f0 45%, #0d8dfa 78%, #18cdfd 100%); border-color: rgba(255, 255, 255, 0.2); }
.svc--email { flex: 1 1 0; }
.svc--brand { flex: 0 0 calc(41.8% - 10px); }
.svc--shop { flex: 1 1 0; }
.svc:hover { border-color: rgba(24, 205, 253, 0.45); }
.svc--web:hover { border-color: rgba(255, 255, 255, 0.55); }

.svc__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  max-width: 54%;
  padding: 40px 50px;
}
.svc--email .svc__body,
.svc--brand .svc__body { max-width: 58%; padding: 40px 25px; }
/* the icon on its own, no box */
.svc__icon { display: block; margin-bottom: 20px; }
.svc__icon svg { display: block; width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.svc h3 { margin-bottom: 12px; font-size: 30px; font-weight: 500; line-height: 35px; letter-spacing: -0.7px; }
.svc p { margin-bottom: 18px; color: var(--text-2); font-size: 16px; line-height: 26.4px; }
.svc--web p { font-size: 17px; }
.svc .link-arrow { align-self: flex-start; }
.svc--web .link-arrow { color: rgba(255, 255, 255, 0.9); }

.svc__art {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.8s var(--ease-out);
}
.svc--web .svc__art { right: 0; top: 0; height: 100%; width: auto; }
.svc--email .svc__art { right: 0; top: 0; height: 100%; width: auto; }
.svc--brand .svc__art { right: 0; top: 0; width: 36%; height: auto; }
.svc--shop .svc__art { right: -2%; bottom: -8%; top: auto; width: auto; height: 112%; }
/* the artwork drifts a little on hover */
.svc:hover .svc__art { transform: translateY(-8px) scale(1.02); }

/* the service dots only show on phones */
.bento__dots.dots { display: none; }
.svc--brand:hover .svc__art { transform: translateY(-14px); }

/* SELECTED WORKS */
.works { padding: 115px 0 75px; }
.works .section-head { margin-bottom: 56px; }

.slider { position: relative; }
/* the row starts on the content's left edge (--pad is measured in JS) and runs off the right
   side of the screen */
.slider__viewport {
  --card: 600px;
  --pad: max(var(--gutter), calc((100vw - var(--container)) / 2));
  display: flex;
  gap: 36px;
  padding: 6px var(--pad) 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--pad);
  /* stops a Mac trackpad swipe at either end from going "back" a page */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.slider__viewport::-webkit-scrollbar { display: none; }
.slider__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.slider__viewport.is-dragging * { pointer-events: none; user-select: none; }

/* ---------- desktop: the card row pins and slides with the scroll ---------- */
@media (min-width: 1025px) {
  .works { padding-bottom: 0; }
  .works__stage.is-pinned { height: var(--pin-h, auto); }
  .works__stage.is-pinned .works__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }
  .works__stage.is-pinned .slider__viewport {
    width: max-content;
    overflow: visible;
    scroll-snap-type: none;
    cursor: default;
    transform: translate3d(calc(-1 * var(--tx, 0px)), 0, 0);
    will-change: transform;
  }
  .works__stage.is-pinned .wprog { margin-top: 26px; }
}
/* short laptop screens (around 664px tall) */
@media (min-width: 1025px) and (max-height: 820px) {
  .works__stage.is-pinned .work__shot { height: clamp(240px, calc(100svh - 400px), 350px); margin-bottom: 20px; }
  .works__stage.is-pinned .work__name { margin-bottom: 16px; }
  .works__stage.is-pinned .work__quote { padding: 18px 20px 16px; }
  .works__stage.is-pinned .work__quote blockquote { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 16px; }
  /* the quote mark is the first "line", so 3 here means 2 lines of text */
  .works__stage.is-pinned .work__quote blockquote::before { height: 18px; font-size: 38px; }
  .works__stage.is-pinned .wprog { margin-top: 14px; }
}

/* ---------- work card: screenshot, name, quote card ---------- */
.work {
  position: relative;
  flex: 0 0 var(--card);
  scroll-snap-align: start;
  /* one card per swipe, even on a hard trackpad flick */
  scroll-snap-stop: always;
}
.work__shot {
  position: relative;
  height: 350px;
  margin-bottom: 26px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface-sunken);
  box-shadow: 0 30px 60px -38px rgba(10, 77, 255, 0.55);
}
/* glass rim on the screenshot */
.work__shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.1); pointer-events: none; }
.work__shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.9s var(--ease-out); }
.work:hover .work__shot img { transform: scale(1.03); }
/* the screenshot and name open the case study; a glass chip says so on hover */
a.work__shot { display: block; }
.work__view {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 16px;
  border-radius: 999px;
  background: rgba(0, 12, 28, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.35s var(--ease), translate 0.45s var(--ease-out);
}
.work__view svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.work__shot:hover .work__view,
.work__shot:focus-visible .work__view { opacity: 1; translate: none; }
/* touch screens have no hover, so the chip is always there */
@media (hover: none) { .work__view { opacity: 1; translate: none; } }
.work__name a { transition: color 0.2s; }
.work__name a:hover { color: var(--accent); }
.work__body { display: flex; flex-direction: column; align-items: flex-start; }
.work__kind {
  order: -1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 7px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.work__name { margin-bottom: 20px; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.8px; }
.work__quote {
  position: relative;
  align-self: stretch;
  padding: 24px 24px 20px;
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 60%, rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.work__quote blockquote { margin-bottom: 22px; color: rgba(255, 255, 255, 0.88); font-size: 16.5px; line-height: 1.6; }
.work__quote blockquote::before { content: "\201C"; display: block; height: 22px; margin-bottom: 4px; color: var(--accent); font-size: 44px; font-weight: 700; line-height: 1; }
.work__quote figcaption { display: flex; align-items: center; gap: 12px; }
.work__quote figcaption img { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18); }
.work__quote figcaption span { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.work__quote b { font-size: 15.5px; font-weight: 600; }
.work__quote i { color: var(--text-3); font-size: 13.5px; font-style: normal; }
/* button: glass pill with the hero CTA's white arrow chip */
.work__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 5px 5px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease-out);
}
.work__btn i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; transition: transform 0.4s var(--ease-out); }
.work__btn svg { width: 15px; height: 15px; fill: none; stroke: #0a4dff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.work__btn:hover { background: linear-gradient(180deg, #1668ff, #0a4dff); box-shadow: 0 10px 24px -10px rgba(10, 77, 255, 0.8); }
.work__btn:hover i { transform: translateX(2px) rotate(-45deg); }
.work__btn:active { transform: scale(0.96); }

/* ---------- pagination: progress line with the arrows beside it ---------- */
.wprog { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.wprog__track { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.wprog__fill { position: absolute; inset: 0 auto 0 0; width: 16.6%; border-radius: 2px; background: linear-gradient(90deg, #18cdfd, #0a86fa); box-shadow: 0 0 12px rgba(24, 205, 253, 0.6); transition: width 0.15s linear; }
.wprog__arrows { display: flex; gap: 10px; }

.slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 30px;
}
/* arrows */
.slider__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 26px -14px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease-out), opacity 0.3s;
}
.slider__btn svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--ease-out), stroke 0.3s; }
.slider__btn:hover:not(:disabled) { background: #fff; box-shadow: 0 14px 30px -12px rgba(24, 205, 253, 0.55); transform: translateY(-2px); }
.slider__btn:hover:not(:disabled) svg { stroke: #0a4dff; }
[data-slider-next]:hover:not(:disabled) svg,
[data-reviews-next]:hover:not(:disabled) svg { transform: translateX(3px); }
[data-slider-prev]:hover:not(:disabled) svg,
[data-reviews-prev]:hover:not(:disabled) svg { transform: translateX(-3px); }
.slider__btn:active:not(:disabled) { transform: scale(0.93); }
.slider__btn:disabled { opacity: 0.3; cursor: default; }

/* BENEFITS */
.benefits {
  position: relative;
  margin-top: 50px;
  padding: 200px 0 70px;
  background: linear-gradient(#002069 25%, #00081f 70%);
  /* the top edge is one big curve, like the top of a circle rising into the page */
  border-radius: 50% 50% 0 0 / 220px 220px 0 0;
}
.benefits__inner { display: grid; grid-template-columns: 330px 1fr; gap: 56px; align-items: center; }
.benefits__intro .lede { margin-top: 30px; }
.benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }
.benefits__grid img { width: 125px; height: auto; margin-bottom: 26px; transition: transform 0.45s var(--ease-out); }
.benefits__grid li:hover img { transform: translateX(6px); }
.benefits__grid h3 { margin-bottom: 12px; font-size: 24px; font-weight: 500; line-height: 25px; letter-spacing: -0.7px; }
.benefits__grid p { color: var(--text-4); font-size: 16px; line-height: 26.4px; }
.benefits__prog { display: none; }

/* PROCESS */
.process { padding: 75px 0 80px; background: linear-gradient(#00081f 0%, rgba(0, 8, 31, 0) 31%); }

/* ABOUT */
.about { padding: 40px 0 100px; }

/* the divider above About: inside the page margins on every screen, its ends fading out */
.about::before {
  content: "";
  display: block;
  width: min(1180px, calc(100% - 2 * var(--gutter)));
  height: 1px;
  margin: 0 auto 120px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
.about__inner { display: grid; grid-template-columns: 1fr 550px; gap: 60px; align-items: center; }
.about .h2 { max-width: 560px; margin-bottom: 30px; }
.about .lede { max-width: 550px; }
.about .lede { margin-bottom: 0; }

/* ---------- About me / My mission tabs ---------- */
.about-tabs { position: relative; display: inline-flex; gap: 2px; margin-bottom: 25px; padding: 4px; border-radius: 999px; }
.about-tabs__marker { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 16px -8px rgba(0, 0, 0, 0.6); transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out); }
.about-tabs__tab { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 11px; border-radius: 999px; color: var(--text-3); font-size: 14.5px; font-weight: 500; line-height: 1.2; transition: color 0.3s var(--ease); }
.about-tabs__tab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: color 0.3s, filter 0.3s; }
.about-tabs__tab:hover { color: var(--text-1); }
.about-tabs__tab.is-on { color: var(--text-1); }
.about-tabs__tab.is-on svg { color: var(--accent); filter: drop-shadow(0 0 6px rgba(24, 205, 253, 0.7)); }
/* no JS: the marker can't be measured, so the tab itself lights up */
html:not(.js) .about-tabs__tab.is-on { background: rgba(255, 255, 255, 0.12); }

/* the two panels share one spot and crossfade */
.about-panels { display: grid; margin-bottom: 36px; }
.about-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s 0.3s; }
.about-panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s var(--ease) 0.15s, transform 0.5s var(--ease-out) 0.15s, visibility 0s 0.15s; }
/* icons + experience, three across under the description */

/* right column: the visuals for each tab share one spot and crossfade */
.about-visuals { display: grid; }
.about-visual { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.98); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s 0.35s; }
.about-visual.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.6s var(--ease) 0.1s, transform 0.7s var(--ease-out) 0.1s, visibility 0s 0.1s; }

.about-gif img { width: 100%; height: auto; border-radius: 8px; }
.about__actions { display: flex; align-items: center; gap: 26px; }

/* ---------- My mission: visitors become inquiries ---------- A dashed path runs through three
   stations (clear offer, trust, next step) and ends in a "New inquiry" card. Visitor dots
   travel the path (js/mission.js); a station lights up while a visitor is on it and the inquiry
   card bumps +1 when one arrives. Sized in cqw so it scales. */
.mission {
  --m-card: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 60%, rgba(255, 255, 255, 0.05)), #071427;
  --m-rim: rgba(255, 255, 255, 0.09);
  --m-ink: #fff;
  --m-ink-3: rgba(255, 255, 255, 0.55);
  --m-bar: rgba(120, 150, 200, 0.35);
  position: relative;
  container-type: inline-size;
  aspect-ratio: 550 / 500;
  border-radius: 28px;
  background:
    radial-gradient(circle at 1px 1px, rgba(127, 211, 255, 0.12) 1px, transparent 0) 0 0 / 22px 22px,
    radial-gradient(ellipse 70% 60% at 60% 45%, rgba(10, 77, 255, 0.18), transparent 70%);
}
.mission__map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mission__path { fill: none; stroke: url(#ms-line); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mission__dot { fill: #7fe3ff; filter: drop-shadow(0 0 5px #18cdfd); }

.mission__start { position: absolute; left: 0; top: 1%; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--m-card); box-shadow: inset 0 0 0 1px var(--m-rim); color: var(--m-ink-3); font-size: max(11px, 2.3cqw); font-weight: 500; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(24, 205, 253, 0.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(24, 205, 253, 0); } }
.mission__start i { width: 7px; height: 7px; border-radius: 50%; background: #18cdfd; box-shadow: 0 0 8px #18cdfd; animation: ping 2s var(--ease) infinite; }

.mstation {
  position: absolute;
  z-index: 2;
  padding: 2.2cqw;
  border-radius: 3.6cqw;
  background: var(--m-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px var(--m-rim), 0 3cqw 6cqw -3cqw rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.35s var(--ease), transform 0.5s var(--ease-out);
}
.mstation.is-hot { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(24, 205, 253, 0.6), 0 0 0 4px rgba(24, 205, 253, 0.12), 0 3cqw 7cqw -2cqw rgba(10, 77, 255, 0.6); transform: translateY(-3px); }
.mstation--offer { left: 16.5%; top: 9%; width: 38%; }
.mstation--trust { left: 56%; top: 38%; width: 36%; }
.mstation--action { left: 11%; top: 62.5%; width: 37%; }
.mstation__tag { position: absolute; left: 2.2cqw; top: 0; display: inline-flex; align-items: center; gap: 1.2cqw; padding: 0.8cqw 2cqw 0.8cqw 0.8cqw; border-radius: 999px; background: #0a1d3d; box-shadow: inset 0 0 0 1px rgba(120, 190, 255, 0.35); color: var(--m-ink); font-size: max(10.5px, 2.2cqw); font-weight: 600; white-space: nowrap; transform: translateY(-55%); }
.mstation__tag b { display: grid; place-items: center; width: max(16px, 3.4cqw); height: max(16px, 3.4cqw); border-radius: 50%; background: linear-gradient(180deg, #1668ff, #0a4dff); font-size: max(9.5px, 1.9cqw); }
.mstation__line { display: block; height: 0.9cqw; border-radius: 1cqw; background: var(--m-bar); }
.mstation__line--short { width: 62%; margin-top: 1cqw; }

/* 1. the offer: a mini hero */
.mstation__site { padding: 1.6cqw 1.8cqw 1.8cqw; border-radius: 2cqw; background: rgba(0, 10, 28, 0.55); box-shadow: inset 0 0 0 1px var(--m-rim); }
.mstation__dots { display: flex; gap: 0.7cqw; margin-bottom: 1.6cqw; }
.mstation__dots i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--m-bar); }
.mstation__dots i:first-child { background: #2f86ff; }
.mstation__h { margin-bottom: 1.4cqw; color: var(--m-ink); font-size: max(11px, 3.1cqw); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.mstation__h em { font-style: italic; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.mstation__site .mstation__line { width: 80%; margin-bottom: 1.6cqw; }
.mstation__btn { display: inline-flex; align-items: center; gap: 0.8cqw; padding: 1cqw 2cqw; border-radius: 999px; background: linear-gradient(180deg, #1668ff, #0a4dff); color: #fff; font-size: max(9px, 1.8cqw); font-weight: 600; white-space: nowrap; }

/* 2. trust: a five-star review */
.mstation__review { display: flex; align-items: center; gap: 2cqw; padding-top: 1.4cqw; }
.mstation__avatar { flex: 0 0 auto; display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 50%; background: linear-gradient(160deg, #3fb4ff, #0a6cff); box-shadow: 0 0 0 0.5cqw rgba(24, 160, 255, 0.2); }
.mstation__avatar svg { width: 55%; height: 55%; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; }
.mstation__review > div { flex: 1; }
.mstation__stars { display: block; margin-bottom: 1.2cqw; color: var(--signal); font-size: max(11px, 2.8cqw); letter-spacing: 0.3cqw; }

/* 3. next step: the button, with a cursor that taps it */
.mstation__cta { position: relative; display: flex; justify-content: center; padding: 2.6cqw 0 1.2cqw; }
.mstation__btn--big { padding: 1.8cqw 3.4cqw; font-size: max(11px, 2.6cqw); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1.6cqw 3.6cqw -1.6cqw rgba(10, 77, 255, 0.9); }
.mstation__btn--big svg { width: max(11px, 2.4cqw); height: max(11px, 2.4cqw); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mstation__cursor { position: absolute; left: 76%; top: 68%; }
.mstation__cursor svg { width: max(14px, 3.8cqw); height: max(14px, 3.8cqw); fill: #fff; stroke: #0a3a9e; stroke-width: 1; filter: drop-shadow(0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.45)); }
.mstation--action.is-hot .mstation__btn--big { transform: scale(0.95); transition: transform 0.15s; }
.mstation--action.is-hot .mstation__cursor { transform: translate(-0.6cqw, -0.6cqw) scale(0.9); transition: transform 0.15s; }

/* small maps (phones): the start label would crowd the first station */
@container (max-width: 420px) { .mission__start { display: none; } }

/* the payoff */
.mission__toast {
  position: absolute;
  left: 60%;
  top: 80%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 2cqw 2.8cqw 2cqw 2cqw;
  border-radius: 3.4cqw;
  background: var(--m-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(43, 212, 125, 0.4), 0 3cqw 7cqw -3cqw rgba(0, 0, 0, 0.7);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.mission__toast.is-bump { transform: scale(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(43, 212, 125, 0.8), 0 0 0 5px rgba(43, 212, 125, 0.15), 0 3cqw 7cqw -2cqw rgba(18, 165, 92, 0.6); }
.mission__icon { flex: 0 0 auto; display: grid; place-items: center; width: 7cqw; height: 7cqw; min-width: 28px; min-height: 28px; border-radius: 2cqw; background: linear-gradient(160deg, #2bd47d, #12a55c); box-shadow: 0 0 3cqw rgba(43, 212, 125, 0.45); }
.mission__icon svg { width: 55%; height: 55%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.mission__toast p { display: flex; flex-direction: column; line-height: 1.25; }
.mission__toast b { color: var(--m-ink); font-size: max(12px, 2.8cqw); }
.mission__toast p span { color: var(--m-ink-3); font-size: max(10.5px, 2.2cqw); white-space: nowrap; }
.mission__plus { position: absolute; right: 2.4cqw; top: -1cqw; color: #2bd47d; font-size: max(12px, 2.8cqw); font-weight: 700; opacity: 0; }
.mission__plus.is-up { animation: missionPlus 0.9s var(--ease-out); }
@keyframes missionPlus { 0% { opacity: 0; transform: translateY(1.5cqw); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-3.5cqw); } }

/* TOOLS */
.tools {
  padding: 110px 0 60px;
  /* just a glow: the page backdrop shows through, so there's no edge */
  background: radial-gradient(ellipse 55% 50% at 50% 42%, rgba(19, 88, 160, 0.38), transparent 70%);
}
.tools .section-head .lede { max-width: 480px; }
/* the edges fade out here, so the field can grow underneath without ever showing a hard edge */
.tools__art {
  --fade: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, #000 72%, transparent), radial-gradient(ellipse 62% 78% at 50% 40%, #000 58%, transparent 100%);
  max-width: 1250px;
  margin: 56px auto 0;
  padding-bottom: 4%;
  -webkit-mask-image: var(--fade);
  -webkit-mask-composite: source-in;
  mask-image: var(--fade);
  mask-composite: intersect;
}
/* the logo field: each tool sits where it was in the original artwork. It is a backdrop: no
   pointer events. js/tools.js pops the logos in from the centre and sets --p (0 -> 1 as it
   scrolls past) so it grows. */
.tools-field {
  position: relative;
  aspect-ratio: 1600 / 747;
  pointer-events: none;
  scale: calc(1 + 0.16 * var(--p, 0));
}
.tool {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7.4%;
  aspect-ratio: 1;
  translate: -50% -50%;
}
.tool img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.7);
  user-select: none;
}
/* entrance: each logo grows in after --delay */
.js .tools-field .tool { opacity: 0; scale: 0.3; }
.tools-field.is-in .tool { opacity: 1; scale: 1; transition: opacity 0.5s var(--ease) var(--delay, 0s), scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay, 0s); }

/* TESTIMONIALS */
.reviews { padding: 50px 0 100px; }
.reviews .section-head { margin-bottom: 56px; }
/* the cards live in css/reviews.css */

.dots { display: flex; gap: 10px; }
.dots button { width: 8px; height: 8px; border-radius: 99px; background: #17324f; transition: width 0.35s var(--ease-out), background-color 0.3s; }
.dots button.is-active { width: 26px; background: var(--accent); }

/* CTA */
.cta { padding: 100px 0; }
.cta__card {
  display: grid;
  grid-template-columns: minmax(0, 587fr) minmax(0, 613fr);
  min-height: 460px;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
}
.cta__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 50px;
  background: linear-gradient(180deg, #0a4dff 0%, #0b63f0 50%, #0d8dfa 82%, #18cdfd 100%);
}
.cta__copy h2 { margin-bottom: 28px; font-size: 64px; font-weight: 700; line-height: 68px; letter-spacing: -2.5px; }
.cta__copy p { margin-bottom: 24px; color: rgba(255, 255, 255, 0.92); font-size: 20px; line-height: 33px; }
/* the trust row: client faces, the rating, then the line */
.cta__trust { display: flex; align-items: center; gap: 12px; margin-top: 22px; color: #fff; }
/* no drop-shadow filter here: next to the playing video it repainted every frame */
/* the clients' faces, overlapping a little, each with a thin white ring so they read on the blue */
.cta__faces { display: flex; flex: none; padding-left: 10px; }
.cta__faces img { width: 40px; height: 40px; margin-left: -10px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 6px 14px -6px rgba(0, 20, 90, 0.6); }
.cta__proof { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 14.5px; line-height: 1.3; }
.cta__proof b { color: #fff; font-size: 15.5px; font-weight: 600; }
.cta__proof span { color: rgba(255, 255, 255, 0.92); }
.cta__media { position: relative; }
.cta__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* FOOTER */
.footer { position: relative; padding: 40px 0 0; overflow: hidden; }
.footer__row { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; }
.footer__nav a { color: rgba(255, 255, 255, 0.85); font-size: 19px; transition: color 0.2s; }
.footer__nav a:hover { color: var(--accent); }
.footer__copy { color: rgba(255, 255, 255, 0.55); font-size: 16px; }
.footer__legal { margin-left: 10px; color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.footer__legal:hover { color: var(--text-1); }
.footer__mark {
  margin: 30px 0 -0.24em;
  font-size: clamp(48px, 13.6vw, 196px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  text-align: center;
  white-space: nowrap;
  /* top-lit like the live wordmark, fading into the page */
  background: linear-gradient(180deg, rgba(24, 120, 220, 0.16) 0%, rgba(0, 18, 36, 0) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}

/* INQUIRY MODAL */

/* TABLET (live breakpoint 768 to 1024) */
@media (max-width: 1024px) {

  .h2, .h2--lg { font-size: 42px; line-height: 46px; }
  .svc--web, .svc--shop { flex: 0 0 100%; }
  .svc--email, .svc--brand { flex: 1 1 calc(50% - 10px); }
  .svc--shop { order: 1; }
  .svc--email .svc__body, .svc--brand .svc__body { max-width: 62%; }

  .benefits__inner { grid-template-columns: 1fr; }
  .benefits__intro { max-width: 520px; }
  .about__inner { grid-template-columns: 1fr; }
  .about-visuals { order: -1; max-width: 600px; }
  .cta__card { grid-template-columns: minmax(0, 1fr); }
  .cta__media { height: 320px; }
}

/* MOBILE (live breakpoint <= 767) */
@media (max-width: 767px) {
  :root { --gutter: 16px; }
  .site-header { padding: 10px var(--gutter) 5px; }
  .site-header__logo { margin-left: 0; }
  .nav-pill { padding: 5px 8px; gap: 4px; }
  .nav-pill__marker { top: 5px; height: calc(100% - 10px); }
  .nav-pill__link { padding: 9px 16px; font-size: 15px; }
  .menu-btn-wrap { margin: 0; padding: 5px; }

  .h2, .h2--lg { font-size: 36px; line-height: 39px; }
  .lede { font-size: 17px; line-height: 28px; }
  
  .services { padding-top: 70px; }
  .services .section-head { margin-bottom: 36px; }
  /* services become a swipe carousel, one card per slide */
  .bento {
    flex-wrap: nowrap;
    gap: 14px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 6px;
    overflow-x: auto;
    /* sideways only: a vertical swipe over the cards always scrolls the page */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .bento::-webkit-scrollbar { display: none; }
  .svc--web, .svc--email, .svc--brand, .svc--shop { flex: 0 0 100%; scroll-snap-align: start; }
  .svc--shop { order: 0; }
  .bento__dots.dots { display: flex; justify-content: center; margin-top: 20px; }
  /* cards off to the side would never "scroll into view", so skip the reveal */
  .js .bento .reveal { opacity: 1; transform: none; }
  /* phone cards: text on top, the mobile artwork underneath */
  .svc { display: flex; flex-direction: column; min-height: 500px; border-radius: 16px; }
  .svc__body, .svc--email .svc__body, .svc--brand .svc__body { justify-content: flex-start; height: auto; max-width: none; padding: 30px 24px 0; }
  .svc__icon { margin-bottom: 18px; }
  .svc h3 { margin-bottom: 10px; font-size: 25px; line-height: 30px; }
  .svc p { margin-bottom: 12px; font-size: 15px; line-height: 23px; }
  .svc__art,
  .svc--web .svc__art, .svc--email .svc__art, .svc--brand .svc__art, .svc--shop .svc__art {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 110%;
    max-width: none;
    height: auto;
    transform: translateX(-50%);
  }
  .svc--email .svc__art { left: 0; width: 125%; transform: none; }
  .svc--brand .svc__art { width: 150%; }
  .svc:hover .svc__art,
  .svc--brand:hover .svc__art { transform: translateX(-50%); }
  .svc--email:hover .svc__art { transform: none; }

  .works { padding: 70px 0 50px; }
  .works .section-head { margin-bottom: 36px; }
  .slider__viewport { --card: min(86vw, 420px); gap: 14px; padding-bottom: 10px; }
  .work__shot { height: 220px; margin-bottom: 18px; border-radius: 18px; }
  .work__name { margin-bottom: 16px; font-size: 24px; }
  .work__quote { padding: 18px 16px 16px; border-radius: 18px; }
  .work__quote blockquote { margin-bottom: 18px; font-size: 15px; line-height: 1.55; }
  /* photo, name and the button share one row */
  .work__quote figcaption { gap: 10px; }
  .work__quote figcaption img { width: 38px; height: 38px; }
  .work__quote b { font-size: 14.5px; }
  .work__quote i { font-size: 12.5px; }
  .work__btn { padding: 4px 4px 4px 13px; gap: 8px; font-size: 13px; }
  .work__btn i { width: 30px; height: 30px; }
  .wprog { gap: 14px; margin-top: 24px; }
  .slider__btn { width: 44px; height: 44px; }

  .benefits { padding: 110px 0 40px; border-radius: 50% 50% 0 0 / 80px 80px 0 0; }
  .benefits__inner { gap: 32px; }
  /* phones: a swipe row, 280px slides with the next one peeking */
  .benefits__grid {
    display: flex;
    gap: 20px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 4px;
    overflow-x: auto;
    /* sideways only: a vertical swipe over the cards always scrolls the page */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .benefits__grid::-webkit-scrollbar { display: none; }
  .benefits__grid li { flex: 0 0 280px; scroll-snap-align: start; }
  .benefits__grid img { width: 104px; margin-bottom: 18px; }
  .benefits__grid h3 { font-size: 21px; line-height: 24px; }
  .benefits__grid p { font-size: 15px; line-height: 23px; }
  .benefits__prog { display: flex; margin-top: 26px; }

  .process { padding: 60px 0 60px; }

  .about { padding-bottom: 60px; }
  .about::before { margin-bottom: 80px; }
  .about__inner { gap: 40px; }

  .about-tabs { margin-bottom: 20px; }
  .about-tabs__tab { padding: 7px 12px 7px 10px; font-size: 14px; }
  /* phones: the three points become a short list, icon on the left */
  /* button and link stay on one line on phones */
  .about-panels { margin-bottom: 28px; }
  .about__actions { flex-wrap: nowrap; gap: 18px; }
  .about__actions .sq-btn { flex: 0 0 auto; font-size: 14.5px; }
  .about__actions .link-arrow { font-size: 15px; white-space: nowrap; }

  .tools { padding: 80px 0 40px; }
  .tools__art { margin: 36px calc(-1 * var(--gutter)) 0; overflow: hidden; }
  /* phones: a swipe row with the next slide peeking */
  .tools-field { width: 190%; margin-left: -45%; animation: toolsPan 16s ease-in-out infinite alternate; }
  @keyframes toolsPan { from { transform: translateX(22%); } to { transform: translateX(-22%); } }

  .reviews { padding: 40px 0 70px; }
  .reviews .section-head { margin-bottom: 36px; }

  .cta { padding: 60px 0 50px; }
  .cta__copy { padding: 34px 24px; }
  .cta__copy h2 { font-size: 40px; line-height: 43px; letter-spacing: -1.5px; }
  .cta__copy p { font-size: 17px; line-height: 27px; }
  /* faces and text stay side by side; the line wraps inside its own column */
  .cta__trust { flex-wrap: nowrap; gap: 10px; }
  .cta__faces img { width: 34px; height: 34px; margin-left: -9px; }
  .cta__proof b { font-size: 14px; }
  .cta__proof { font-size: 13px; }
  /* phones: the CTA reads centred: heading, line, button and the trust row */
  .cta__copy { align-items: center; text-align: center; }
  /* phones: still one row, faces beside the two lines */
  .cta__trust { justify-content: center; }
  .cta__proof { text-align: left; }
  .cta__media { height: 240px; }

  .footer__nav { gap: 10px 18px; }
  .footer__nav a { font-size: 15.5px; }
  .footer__copy { font-size: 14px; }

  /* same small popup as desktop, under the Menu button on the right */
  .site-menu__box { width: min(300px, calc(100vw - var(--menu-right, 16px) - var(--gutter))); }
}
/* the narrowest phones: the CTA trust row shrinks a little more */
@media (max-width: 374px) {
  /* the About button and "See my work" don't fit side by side on the smallest phones */
  .about__actions { flex-wrap: wrap; gap: 14px 18px; }
  .cta__faces img { width: 30px; height: 30px; margin-left: -8px; }
}

/* ---------- reduced motion ---------- */
/* touch: every tap target at least about 44px tall. Small text links get invisible padding (the
   negative margin keeps the layout exactly as it was); the carousel dots get a larger hit area. */
@media (pointer: coarse), (max-width: 767px) {
  .link-arrow, .footer__nav a, .footer__legal, .wend__all { padding-block: 9px; margin-block: -9px; }
  .work__name a { display: inline-block; padding-block: 7px; margin-block: -7px; }
  .about-tabs .about-tabs__tab, .panel__head .about-tabs .about-tabs__tab { padding-top: 11px; padding-bottom: 11px; }
  .footer__nav { row-gap: 18px; }
  .work__btn { padding-top: 6px; padding-bottom: 6px; }
  .dots button { position: relative; }
  .dots button::after { content: ""; position: absolute; inset: -18px -6px; }
}
/* ---------- section rhythm (homepage): about 180px of clear space between sections on desktop and
   110px on phones, measured from content to content (the stats cards fade out at the bottom, so
   that gap is set a touch larger; the benefits band and the about divider carry their own) ---------- */
main .diff { padding-top: 144px; padding-bottom: 120px; }
main .stats { padding-top: 60px; padding-bottom: 40px; }
main .services { padding-top: 100px; }
main .process { padding-top: 110px; padding-bottom: 0; }
main .about::before { margin-bottom: 80px; }
main .tools { padding-top: 84px; padding-bottom: 20px; }
main .reviews { padding-top: 51px; padding-bottom: 80px; }
main .cta { padding-bottom: 140px; }
@media (max-width: 767px) {
  .benefits { padding-top: 90px; }
  main .diff { padding-top: 72px; padding-bottom: 70px; }
  main .stats { padding-top: 40px; padding-bottom: 30px; }
  main .services { padding-top: 80px; }
  main .works { padding-top: 80px; }
  main .process { padding-top: 70px; padding-bottom: 0; }
  main .about::before { margin-bottom: 70px; }
  main .tools { padding-top: 52px; padding-bottom: 10px; }
  main .reviews { padding-top: 49px; padding-bottom: 50px; }
  main .cta { padding-bottom: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .tools-field { animation: none !important; }
}