/* Hero (Silk, Navy) + liquid glass material + header glass. */

html {
  --silk-outer: #000611;
  --silk-base-1: #00173d;
  --silk-base-2: #000a1c;
  --silk-lit-a: #c4ecff;
  --silk-lit-b: #2a9dff;
  --silk-lit-c: #0a3d8f;
  --silk-crease: #00040d;
  --silk-rim: rgba(110, 215, 255, 0.42);
  --silk-cool-a: #0a2a66;
  --silk-cool-b: #1b6fd6;
  --silk-glow: rgba(10, 134, 250, 0.38);
}

/* LIQUID GLASS */
.lg {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.07) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 22px rgba(255, 255, 255, 0.04),
    0 10px 30px -10px rgba(0, 0, 0, 0.55);
}
/* a lit rim: bright top-left and bottom-right, clear in between */
.lg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08) 32%, rgba(255, 255, 255, 0.02) 60%, rgba(255, 255, 255, 0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.has-liquid .lg {
  -webkit-backdrop-filter: url(#lg-refract) blur(5px) saturate(180%) brightness(1.08);
  backdrop-filter: url(#lg-refract) blur(5px) saturate(180%) brightness(1.08);
}

/* ---------- header in glass ---------- */
.nav-pill { gap: 2px; border-radius: 16px; padding: 4px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.06));
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 30px -10px rgba(0, 0, 0, 0.55);
}
.nav-pill__marker { top: 4px; height: calc(100% - 8px); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); }
/* 38px tall */
.nav-pill__link { padding: 9px 20px; border-radius: 12px; font-size: 14.5px; line-height: 20px; }
.menu-btn-wrap { padding: 0; background: none; }
.menu-btn {
  height: 46px;
  padding: 0 20px;
  font-size: 14.5px;
  border-radius: 14px;
  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.1);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
}
.menu-btn:hover { background: rgba(255, 255, 255, 0.16); }
/* phones show an icon instead of the word: two lines that even out when pressed and turn into an X
   while the menu is open (aria-expanded, set by js/main.js) */
.menu-btn__icon { display: none; }

/* phones show one link, the other page (About on the homepage, Home elsewhere), with a swap icon */
.nav-pill__swap { display: none; }
@media (max-width: 767px) {
  .nav-pill__link, .nav-pill__marker { display: none; }
  .nav-pill__swap { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 14px; border-radius: 12px; color: #fff; font-size: 14px; font-weight: 500; line-height: 20px; -webkit-tap-highlight-color: transparent; }
  .nav-pill__swap svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.45s var(--ease-out); }
  .nav-pill__swap { overflow: hidden; isolation: isolate; transition: color 0.3s ease; }
  /* hover / tap: the pill fills with the brand blue (::before), a light sweeps across it (::after),
     the arrows spin a half turn */
  .nav-pill__swap::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: linear-gradient(180deg, #1668ff, #0a4dff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 22px -8px rgba(10, 77, 255, 0.9); opacity: 0; transform: scale(0.88); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .nav-pill__swap::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(105deg, transparent 22%, rgba(255, 255, 255, 0.4) 50%, transparent 78%); transform: translateX(-125%); }
  .nav-pill__swap svg { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .nav-pill__swap:active svg, .nav-pill__swap:focus-visible svg { transform: rotate(180deg); }
  .nav-pill__swap:active::after, .nav-pill__swap:focus-visible::after { transform: translateX(125%); transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); }
  .nav-pill__swap:active::before, .nav-pill__swap:focus-visible::before { opacity: 1; transform: none; }
  .nav-pill__swap:active, .nav-pill__swap:focus-visible { color: #fff; }
  @media (hover: hover) {
    .nav-pill__swap:hover { color: #fff; }
    .nav-pill__swap:hover::before { opacity: 1; transform: none; }
    .nav-pill__swap:hover svg { transform: rotate(180deg); }
    .nav-pill__swap:hover::after { transform: translateX(125%); transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-pill__swap::after { display: none; }
    .nav-pill__swap::before { transition: opacity 0.2s ease; transform: none; }
    .nav-pill__swap svg { transition: none; }
  }
  [data-theme="light"] .nav-pill__swap { color: var(--text-1); }
}

/* light / dark toggle: shows the sun in dark mode and the moon in light */
.theme-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  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.1);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease-out);
}
.theme-btn:hover { background: rgba(255, 255, 255, 0.16); }
.theme-btn:active { transform: scale(0.92); }
.theme-btn svg {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.55s var(--ease-out), opacity 0.35s var(--ease);
}
.theme-btn__moon { opacity: 0; transform: rotate(-90deg) scale(0.4); }
[data-theme="light"] .theme-btn__sun { opacity: 0; transform: rotate(90deg) scale(0.4); }
[data-theme="light"] .theme-btn__moon { opacity: 1; transform: none; fill: currentColor; stroke: none; }

/* HERO */
.hero__card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
/* the silk and its base colour fade out at the bottom, so the hero melts into the page backdrop
   (no edge where the next section starts) */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 70% 18%, var(--silk-base-1) 0%, var(--silk-base-2) 62%, var(--silk-outer) 100%);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 220px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 220px), transparent);
}
.hero__bg span { position: absolute; display: block; border-radius: 50%; will-change: transform; }
/* big lit fold, top right */
.hero__bg .s1 { width: 75%; height: 95%; right: -18%; top: -42%; background: linear-gradient(200deg, var(--silk-lit-a) 0%, var(--silk-lit-b) 30%, var(--silk-lit-c) 60%, transparent 85%); filter: blur(46px); transform: rotate(-18deg); opacity: 0.85; }
/* dark crease cutting across it */
.hero__bg .s2 { width: 70%; height: 55%; right: -4%; top: -6%; background: var(--silk-crease); filter: blur(60px); transform: rotate(-28deg); opacity: 0.85; }
/* rim light along the crease */
.hero__bg .s3 { width: 60%; height: 34%; right: 8%; top: 8%; border: 26px solid transparent; border-top-color: var(--silk-rim); filter: blur(22px); transform: rotate(-24deg); }
/* cool fold bottom left */
.hero__bg .s4 { width: 60%; height: 80%; left: -26%; top: 10%; background: linear-gradient(60deg, transparent 20%, var(--silk-cool-a) 55%, var(--silk-cool-b) 75%, transparent 100%); filter: blur(55px); transform: rotate(24deg); opacity: 0.8; }
.hero__bg .s5 { width: 120%; height: 60%; left: -10%; bottom: -38%; background: radial-gradient(closest-side, var(--silk-glow), transparent); filter: blur(30px); }
.hero__grain {
  position: absolute;
  inset: -50%;
  z-index: 1;
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  animation: grain 1.2s steps(4) infinite;
}
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -2%); } }

/* Drift: the silk shapes travel looping paths, each at its own pace so the folds never repeat
   in step, the glow breathes under them, and on desktop they lean toward the pointer (--mx/--my
   from hero.js). */
.hero__bg span { transition: translate 1.6s var(--ease-out); }
.hero__bg .s1 { animation: driftLit 12s ease-in-out infinite; translate: calc(var(--mx, 0) * 46px) calc(var(--my, 0) * 30px); }
.hero__bg .s2 { animation: driftCrease 14s ease-in-out infinite; translate: calc(var(--mx, 0) * -30px) calc(var(--my, 0) * -20px); }
.hero__bg .s3 { animation: driftRim 14s ease-in-out infinite; translate: calc(var(--mx, 0) * -30px) calc(var(--my, 0) * -20px); }
.hero__bg .s4 { animation: driftCool 16s ease-in-out infinite; translate: calc(var(--mx, 0) * 26px) calc(var(--my, 0) * 18px); }
.hero__bg .s5 { animation: driftGlow 7s ease-in-out infinite; }
@keyframes driftLit {
  0%, 100% { transform: rotate(-18deg); }
  33% { transform: rotate(-4deg) translate(-12%, 14%) scale(1.16); }
  66% { transform: rotate(-30deg) translate(8%, 6%) scale(1.06); }
}
@keyframes driftCrease {
  0%, 100% { transform: rotate(-28deg); }
  33% { transform: rotate(-44deg) translate(11%, 9%) scale(1.2); }
  66% { transform: rotate(-14deg) translate(-8%, 13%) scale(1.06); }
}
@keyframes driftRim {
  0%, 100% { transform: rotate(-24deg); }
  33% { transform: rotate(-40deg) translate(11%, 9%) scale(1.2); }
  66% { transform: rotate(-10deg) translate(-8%, 13%) scale(1.06); }
}
@keyframes driftCool {
  0%, 100% { transform: rotate(24deg); }
  40% { transform: rotate(40deg) translate(14%, -11%) scale(1.16); }
  70% { transform: rotate(10deg) translate(5%, 11%) scale(0.92); }
}
@keyframes driftGlow { 50% { opacity: 0.65; transform: scale(1.08); } }

/* PAGE BACKDROP */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.backdrop span { position: absolute; display: block; border-radius: 50%; will-change: transform; }
/* lit fold, upper right */
.backdrop .bd1 {
  width: 70vw;
  height: 85vh;
  right: -22vw;
  top: -18vh;
  background: linear-gradient(200deg, var(--silk-lit-b) 0%, var(--silk-lit-c) 45%, transparent 80%);
  filter: blur(70px);
  opacity: 0.34;
  transform: rotate(-18deg);
  translate: calc(var(--sa, 0) * -16vw) calc(var(--sb, 0) * 14vh);
  animation: bdLit 22s ease-in-out infinite;
}
/* cool fold, left */
.backdrop .bd2 {
  width: 60vw;
  height: 80vh;
  left: -26vw;
  top: 30vh;
  background: linear-gradient(60deg, transparent 15%, var(--silk-cool-a) 55%, var(--silk-cool-b) 80%, transparent 100%);
  filter: blur(70px);
  opacity: 0.42;
  transform: rotate(24deg);
  translate: calc(var(--sb, 0) * 14vw) calc(var(--sa, 0) * -16vh);
  animation: bdCool 26s ease-in-out infinite;
}
/* deep glow along the bottom */
.backdrop .bd3 {
  width: 100vw;
  height: 55vh;
  left: 0;
  bottom: -30vh;
  background: radial-gradient(closest-side, var(--silk-glow), transparent);
  filter: blur(30px);
  opacity: 0.7;
  translate: calc(var(--sa, 0) * 12vw) 0;
  animation: driftGlow 9s ease-in-out infinite;
}
.backdrop .hero__grain { opacity: 0.14; }
@keyframes bdLit {
  0%, 100% { transform: rotate(-18deg); }
  33% { transform: rotate(-6deg) translate(-8%, 10%) scale(1.12); }
  66% { transform: rotate(-28deg) translate(6%, 4%) scale(1.04); }
}
@keyframes bdCool {
  0%, 100% { transform: rotate(24deg); }
  40% { transform: rotate(36deg) translate(10%, -8%) scale(1.12); }
  70% { transform: rotate(14deg) translate(4%, 8%) scale(0.94); }
}
[data-theme="light"] .backdrop .bd1 { opacity: 0.5; }
[data-theme="light"] .backdrop .bd2 { opacity: 0.55; }
[data-theme="light"] .backdrop .hero__grain { opacity: 0.25; }

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* the copy sits a roomy step under the header; the work showcase follows it and peeks in at the
     bottom of the first screen, then the client logos */
  padding: 152px var(--gutter) 48px;
  text-align: center;
}

/* above the headline: client proof */
.hero__top { margin-bottom: 26px; }
/* E: three client faces and one of their quotes at a time. Kept quiet (small, light, soft) so it
   supports the headline instead of competing with it; the speaker's face lifts a touch. */
.htop--proof { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.htop__faces { display: flex; flex: none; padding-left: 8px; }
.htop__faces img { width: 32px; height: 32px; margin-left: -8px; border-radius: 50%; object-fit: cover; box-shadow: -3px 0 8px -2px rgba(0, 8, 24, 0.55); opacity: 0.55; filter: grayscale(0.7); transition: transform 0.5s var(--ease-out), opacity 0.4s var(--ease), filter 0.4s var(--ease); }
/* no rings: the one speaking is in full colour, a touch bigger and lifted; the others fade back */
.htop__faces img.is-on { position: relative; z-index: 1; transform: translateY(-2px) scale(1.1); opacity: 1; filter: none; }
.htop__says { display: grid; min-width: 0; }
.htop__q { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 3px; opacity: 0; transform: translateY(4px); transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-out); }
.htop__q.is-on { opacity: 1; transform: none; transition-delay: 0.15s; }
.htop__line { color: var(--text-2); font-size: 14px; font-weight: 500; line-height: 1.25; white-space: nowrap; }
.htop__by { display: flex; align-items: center; gap: 7px; color: var(--text-4); font-size: 12px; line-height: 1.2; white-space: nowrap; }
.htop__stars { color: var(--signal); font-size: 10px; letter-spacing: 1px; opacity: 0.85; }
[data-theme="light"] .htop__faces img { box-shadow: -3px 0 8px -2px rgba(10, 40, 90, 0.25); }


.hero__title {
  max-width: 820px;
  font-size: clamp(44px, min(7vw, 12.4vh), 98px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
  /* white fading to silver, like the section headlines */
  background: linear-gradient(180deg, #ffffff 35%, #b4c7e2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="light"] .hero__title { background-image: linear-gradient(180deg, #071a33 35%, #3d5577 100%); }
/* same upright two-tone accent the rest of the site uses */
.hero__accent {
  font-style: normal;
  background: linear-gradient(var(--ink-quiet), var(--ink-quiet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* a soft light sweeps across the headline every few seconds. It's a second copy of the words
   laid exactly over the first (same box, same wrap), so only that copy repaints, and only while
   the light moves; scrolling stays as cheap as before. */
.hero__title { position: relative; }
/* phones set the headline in four lines (the <br class="hero__br">s); on wider screens it wraps on
   its own and the line breaks are switched off */
.hero__br { display: none; }
.hero__title::after {
  content: attr(data-shine);
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(220, 244, 255, 0) 30%, rgba(220, 244, 255, 0.95) 46%, #7fd3ff 50%, rgba(220, 244, 255, 0.95) 54%, rgba(220, 244, 255, 0) 70%) no-repeat;
  background-size: 45% 100%;
  background-position: -60% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  animation: heroShine 7s var(--ease) 1.2s infinite;
}
[data-theme="light"] .hero__title::after { background-image: linear-gradient(100deg, rgba(90, 175, 255, 0) 30%, rgba(90, 175, 255, 0.85) 46%, #0a86fa 50%, rgba(90, 175, 255, 0.85) 54%, rgba(90, 175, 255, 0) 70%); }
@keyframes heroShine { 0% { background-position: -60% 0; } 32%, 100% { background-position: 160% 0; } }
@media (prefers-reduced-motion: reduce) { .hero__title::after { display: none; } }
.hero__lede {
  max-width: 600px;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 19px;
  line-height: 1.6;
  text-wrap: balance;
}

.hero__action { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 34px; }
/* the hero's button is the most important tap on the page, so it's the biggest button on the site */
.hero__action .sq-btn { gap: 16px; padding: 8px 8px 8px 8px; border-radius: 18px; font-size: 19px; }
.hero__action .sq-btn__face, .hero__action .sq-btn__icon { width: 54px; height: 54px; border-radius: 13px; }
.hero__action .sq-btn__icon svg { width: 22px; height: 22px; }
.hero__action .sq-btn__text { gap: 4px; }
.hero__action .sq-btn__text small { font-size: 13.5px; }
@keyframes live { to { transform: scale(2.6); opacity: 0; } }

/* ---------- trusted by (under the pitch) ---------- */
.trusted { padding: 40px 0 10px; }
.trusted__inner { max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.trusted__inner p { margin-bottom: 22px; color: rgba(255, 255, 255, 0.58); font-size: 16px; }
.trusted__logos { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.trusted__logos ul { display: flex; align-items: center; gap: 64px; width: max-content; animation: trustedLogos 40s linear infinite; }
.trusted__logos:hover ul { animation-play-state: paused; }
.trusted__logos li { flex: 0 0 auto; width: 150px; display: flex; justify-content: center; }
.trusted__logos img { max-width: 150px; max-height: 36px; width: auto; height: auto; opacity: 0.68; transition: opacity 0.3s; }
.trusted__logos li:hover img { opacity: 1; }
@keyframes trustedLogos { to { transform: translateX(calc(-1 * (150px + 64px) * var(--count))); } }
/* in the hero: a quiet strip along its bottom edge, well clear of the button */
.hero__trusted { position: relative; z-index: 1; padding: 34px 0 40px; }
.hero__trusted .trusted__inner p { margin-bottom: 16px; color: rgba(255, 255, 255, 0.5); font-size: 13.5px; }
[data-theme="light"] .hero__trusted .trusted__inner p { color: var(--text-4); }
.hero__trusted .trusted__logos img { max-width: 120px; max-height: 28px; opacity: 0.5; }
.hero__trusted .trusted__logos li:hover img { opacity: 0.85; }

/* RESPONSIVE */
/* short laptop screens (around 660px tall) */
@media (min-width: 768px) and (max-height: 780px) {
  .hero__inner { padding-top: 128px; padding-bottom: 40px; }
  .hero__top { margin-bottom: 18px; }
    .hero__lede { margin-top: 16px; }
  .hero__action { margin-top: 24px; gap: 12px; }
}
@media (max-width: 767px) {
  .hero__card { min-height: 0; }
  /* logo left, toggle + menu right, and the Home / About pill dead centre on the screen */
  .site-header__inner { position: relative; grid-template-columns: auto 1fr auto; column-gap: 8px; }
  .nav-pill { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
  .nav-pill__link { padding: 7px 10px; font-size: 13.5px; }
  /* the pill, toggle and Menu share one dark tint under the glass, so they read as one set
     whether they sit over the hero's bright glow or the dark */
  html:not([data-theme="light"]) .nav-pill::before, html:not([data-theme="light"]) .menu-btn, html:not([data-theme="light"]) .theme-btn { background-color: rgba(4, 14, 32, 0.55); }
  /* the logo sits as far from the left edge as the Menu icon does from the right (its button group
     has 12px of its own padding) */
  .site-header__logo { margin-left: 12px; }
  /* 44px, a touch taller than the logo, with corners closer to the logo's */
  .theme-btn { width: 44px; height: 44px; border-radius: 11px; }
  .nav-pill { border-radius: 12px; }
  .nav-pill__swap { padding: 8px 18px 8px 20px; border-radius: 9px; }
  .menu-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 11px; }
  .menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-btn__icon { position: relative; display: block; width: 18px; height: 12px; }
  .menu-btn__icon i { position: absolute; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1), top 0.3s ease; }
  .menu-btn__icon i:first-child { top: 1px; width: 18px; }
  .menu-btn__icon i:last-child { top: 9px; width: 11px; }
  .menu-btn:active .menu-btn__icon i:last-child { width: 18px; }
  .menu-btn[aria-expanded="true"] .menu-btn__icon i { top: 5px; width: 18px; }
  .menu-btn[aria-expanded="true"] .menu-btn__icon i:first-child { transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn__icon i:last-child { transform: rotate(-45deg); }
  .menu-btn-wrap { gap: 6px; }
  .theme-btn svg { width: 19px; height: 19px; }
  .hero__inner { padding: 112px 16px 36px; }
  .hero__top { margin-bottom: 20px; }
    /* phones: the same row, a size smaller */
  .htop--proof { gap: 10px; }
  .htop__faces img { width: 28px; height: 28px; margin-left: -7px; }
  .htop__line { font-size: 13px; }
  .htop__by { gap: 6px; font-size: 11.5px; }
  .htop__stars { font-size: 9.5px; }
  /* the homepage headline in four set lines (I design / websites that / turn visitors / into
     clients.), as big as the width allows. Only the headline that carries the line breaks: other
     pages reuse .hero__title and must keep wrapping on their own */
  .hero__title:has(.hero__br) { max-width: none; font-size: clamp(36px, calc((100vw - 36px) / 6), 76px); line-height: 0.94; white-space: nowrap; }
  .hero__title:has(.hero__br)::after { white-space: pre; }
  .hero__br { display: inline; }
  .hero__lede { font-size: 16.5px; }
  .hero__action { width: 100%; }
      /* the big buttons go full width on phones, the arrow at the far end */
  .hero__action .sq-btn, .cta__copy .sq-btn { width: 100%; max-width: 380px; }
  .hero__action .sq-btn { font-size: 18px; }
  .hero__action .sq-btn__face, .hero__action .sq-btn__icon { width: 50px; height: 50px; }
  .hero__action .sq-btn .sq-btn__icon, .cta__copy .sq-btn .sq-btn__icon { margin-left: auto; }
      .trusted__logos li { width: 110px; }
  .trusted__logos img { max-width: 110px; }
  .trusted__logos ul { gap: 36px; animation-name: trustedLogosSm; }
  @keyframes trustedLogosSm { to { transform: translateX(calc(-1 * (110px + 36px) * var(--count))); } }
}
/* very narrow phones: the pill gets a touch smaller still so it never meets the buttons */
@media (max-width: 374px) {
  .nav-pill__link { padding: 6px 9px; font-size: 13px; }
  .theme-btn { width: 42px; height: 42px; border-radius: 10px; }
  .menu-btn { width: 42px; height: 42px; border-radius: 10px; }
  .menu-btn-wrap { gap: 5px; }
  /* the centred pill gives a little width back so it keeps clear of the buttons */
  .nav-pill__swap { gap: 6px; padding: 7px 14px 7px 15px; font-size: 13.5px; }
  .site-header { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 340px) {
  .theme-btn, .menu-btn { width: 38px; height: 38px; border-radius: 10px; }
  .nav-pill__swap { padding: 5px 9px 5px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg span, .backdrop span, .hero__grain, .trusted__logos ul{ animation: none !important; }
}