/* ═════════════════════════════════════════════════════════════════
   Homepage — the redesigned sections.
   Loaded after main.css, on index.html only. Everything here is
   prefixed hx- so it cannot disturb the inner pages.

   One palette: black, white and greys. The purple of the logo is
   kept for buttons (main.css) and the keyboard focus ring, nothing
   else, so the one purple thing on screen is the thing to press.
   One radius family (16 / 24 / 28), one shadow, one easing.
   ═════════════════════════════════════════════════════════════════ */
:root {
  --hx-deep: #18181B;
  --hx-focus: #6D3FC0;
  --hx-ink: #18181B;
  --hx-light: #A1A1AA;
  --hx-tint: #F4F4F5;
  --hx-tint-2: #EBEBED;
  --hx-line: #E4E4E7;
  --hx-ease: cubic-bezier(.22, .8, .2, 1);
  --hx-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 12px 32px -12px rgba(24, 24, 27, .18);
}

.hx-section { padding: 110px 0; }
.hx-section.tight { padding: 72px 0; }
.hx-section.white { background: #fff; }
.hx-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.hx-head.left { margin-left: 0; text-align: left; }
.hx-eyebrow { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 500; letter-spacing: .02em; color: #71717A; }
.hx-head h2 { font-size: clamp(30px, 4vw, 52px); font-weight: 600; line-height: 1.05; letter-spacing: -1.4px; color: var(--color-text-primary); }
.hx-head h2 em { font-style: normal; color: #A1A1AA; }
.hx-head p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--color-text-secondary); }

/* ─── Hero ──────────────────────────────────────────────────────── */
.hx-hero { position: relative; padding: 168px 0 72px; text-align: center; overflow: hidden; background: var(--color-bg); }
.hx-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -260px;
  width: 1100px;
  height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(24, 24, 27, .05), rgba(24, 24, 27, 0));
  pointer-events: none;
}
.hx-hero > .container { position: relative; }
.hx-chip { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 5px 16px 5px 5px; border: 1px solid #EFEFF1; border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgba(24, 24, 27, .05); font-size: 14px; font-weight: 400; color: #52525B; }
/* Three faces, overlapping, each ringed in white so they read as separate people. */
.hx-chip-faces { display: inline-flex; }
.hx-chip-faces svg, .hx-chip-faces img { width: 30px; height: 30px; margin-left: -9px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; background: #EFEFF1; }
.hx-chip-faces > :first-child { margin-left: 0; }
.hx-hero h1 { max-width: 980px; margin: 0 auto 22px; font-size: clamp(38px, 6vw, 84px); font-weight: 600; line-height: 1.02; letter-spacing: -2.4px; color: var(--color-text-primary); }
.hx-hero h1 .serif-italic { color: var(--hx-deep); letter-spacing: -1px; }
.hx-hero-sub { max-width: 560px; margin: 0 auto 34px; font-size: 18px; line-height: 1.6; color: var(--color-text-secondary); }
.hx-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hx-hero-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 13px; color: #52525B; }
.hx-hero-note i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); }

/* ─── Showreel: edge to edge, square corners, nothing drawn around it ───
   The box is exactly the video's own shape (16:9) at whatever width the window is,
   and the video fills it without being enlarged, so nothing is cut off on any side. */
.hx-reel { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0D0D1A; }
.hx-reel iframe, .hx-reel video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.hx-reel video { object-fit: contain; background: #0D0D1A; }
/* For its first seconds YouTube draws its title and buttons over the video. A still frame
   sits on top until they have gone, then fades away (home.js adds .is-playing). */
.hx-reel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #0D0D1A url("https://i.ytimg.com/vi/GyDOyAjoJNw/maxresdefault.jpg") center / cover no-repeat; transition: opacity .9s ease; pointer-events: none; }
.hx-reel.is-playing::after { opacity: 0; }
/* Sound: a glass button in the top right corner, over the picture. */
.hx-reel-sound { position: absolute; right: 20px; top: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 9999px; background: rgba(13, 13, 26, .34); color: #fff; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s, border-color .2s; }
.hx-reel-sound[hidden] { display: none; }
.hx-reel-sound:hover { border-color: rgba(255, 255, 255, .5); background: rgba(13, 13, 26, .55); }
.hx-reel-sound:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hx-reel-sound .on, .hx-reel-sound[aria-pressed="true"] .off { display: none; }
.hx-reel-sound[aria-pressed="true"] .on { display: block; }

/* ─── Logo carousel ───────────────────────────────────────────────
   Inside the page's column, fading out at both ends. Every logo sits in a box of one height
   and is drawn in grey, so marks of different shapes and colours read as one quiet row;
   the one under the pointer takes its own colours back. */
.hx-logos { padding: 44px 0 52px; background: #fff; border-bottom: 1px solid var(--hx-line); }
.hx-logos-tag { margin-bottom: 28px; text-align: center; font-size: 13px; color: #71717A; }
.hx-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.hx-marquee-track { display: flex; width: max-content; animation: hxMarquee var(--hx-marquee-time, 40s) linear infinite; will-change: transform; }
.hx-marquee:hover .hx-marquee-track, .hx-marquee:focus-within .hx-marquee-track { animation-play-state: paused; }
.hx-marquee-set { display: flex; flex: none; align-items: center; gap: 64px; margin: 0; padding: 0 64px 0 0; list-style: none; }
.hx-marquee-set li { display: flex; flex: none; align-items: center; justify-content: center; height: 40px; }
.hx-marquee-set img { display: block; width: auto; height: auto; max-width: 150px; max-height: 34px; object-fit: contain; filter: grayscale(1); opacity: .62; transition: filter .3s, opacity .3s; }
.hx-marquee-set li:hover img { filter: none; opacity: 1; }
/* Before the script has run, or without it: the one set, wrapped and centred. */
.hx-marquee:not(.is-running) { -webkit-mask-image: none; mask-image: none; }
.hx-marquee:not(.is-running) .hx-marquee-set { flex-wrap: wrap; justify-content: center; gap: 28px 56px; padding: 0; max-height: 40px; overflow: hidden; }
@keyframes hxMarquee { to { transform: translateX(-50%); } }

/* ─── Studio card ───────────────────────────────────────────────── */
.hx-studio { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: 72px; align-items: center; }
.hx-studio-brand .hx-eyebrow { margin-bottom: 12px; font-size: 14px; }
.hx-studio-brand .hx-eyebrow i { font-family: 'Instrument Serif', Georgia, serif; font-size: 19px; font-style: italic; letter-spacing: 0; color: var(--hx-focus); }
.hx-studio-brand h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.08; letter-spacing: -1.1px; color: var(--color-text-primary); text-wrap: balance; }
.hx-studio-brand h2 span { display: block; white-space: nowrap; }
.hx-studio-body > p { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; letter-spacing: -.2px; color: var(--color-text-primary); }
.hx-stats { display: flex; margin-top: 44px; }
.hx-stat { padding: 2px 36px; border-left: 1px solid var(--hx-line); }
.hx-stat:first-child { padding-left: 0; border-left: 0; }
.hx-stat b { display: block; font-size: 30px; font-weight: 500; letter-spacing: -.8px; line-height: 1; color: var(--color-text-primary); }
.hx-stat span { display: block; margin-top: 10px; font-size: 14px; color: #71717A; }
/* Round flags, each overlapping the one before it, ringed in the page colour so they read as separate. */
.hx-regions { display: flex; flex-wrap: wrap; align-items: center; margin-top: 36px; padding-left: 10px; }
.hx-regions img, .hx-regions-more { flex: none; width: 48px; height: 48px; margin-left: -10px; border: 3px solid var(--color-bg); border-radius: 50%; object-fit: cover; background: #EFEFF1; transition: transform .3s var(--hx-ease); }
.hx-regions img:hover { position: relative; z-index: 1; transform: translateY(-4px) scale(1.08); }
.hx-regions-more { display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #3F3F46; box-shadow: inset 0 0 0 1.5px #3F3F46; }

/* ─── Work wall ─────────────────────────────────────────────────── */
.hx-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; }
.hx-tabs button { height: 40px; padding: 0 18px; border: 1px solid var(--hx-line); border-radius: 9999px; background: #fff; font: inherit; font-size: 14px; font-weight: 500; color: var(--color-text-secondary); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.hx-tabs button:hover { border-color: var(--hx-light); color: var(--hx-ink); }
.hx-tabs button[aria-pressed="true"] { border-color: var(--hx-deep); background: var(--hx-deep); color: #fff; }
.hx-tabs button:focus-visible { outline: 2px solid var(--hx-focus); outline-offset: 2px; }
/* The portfolio runs wider than the rest of the page: it is the work, and the work gets the room. */
.hx-wide { max-width: 1840px; margin: 0 auto; padding: 0 40px; }
.hx-head h2 em.hx-accent { display: block; color: #A1A1AA; }
.hx-tabs button[hidden] { display: none; }
.hx-portfolio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 18px; margin: 0; padding: 0; list-style: none; }
.hx-piece-frame { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #EFEFF1; }
.hx-piece-frame img, .hx-piece-frame video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--hx-ease); }
a.hx-piece-frame:hover img, a.hx-piece-frame:hover video { transform: scale(1.03); }
a.hx-piece-frame:focus-visible { outline: 2px solid var(--hx-focus); outline-offset: 3px; }
.hx-piece-name { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 15px; color: var(--color-text-primary); }
.hx-piece-name::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--hx-deep); }
.hx-piece-none { grid-column: 1 / -1; padding: 48px 0; text-align: center; color: #52525B; }
.hx-piece-none a { color: var(--hx-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ─── Services: folders ─────────────────────────────────────────── */
.hx-folders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hx-folder { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; border-radius: 28px; isolation: isolate; transition: transform .45s var(--hx-ease); }
/* The folder's back: a body, and the tab that rises from its top-left corner. */
.hx-folder::before { content: ""; position: absolute; inset: 40px 0 0; z-index: -2; border-radius: 0 28px 28px 28px; background: linear-gradient(180deg, #F4F4F5, #E4E4E7); }
.hx-folder::after { content: ""; position: absolute; left: 0; top: 0; z-index: -2; width: 42%; height: 64px; border-radius: 24px 24px 0 0; background: #F4F4F5; }
.hx-peek { position: absolute; left: 0; right: 0; top: 22px; z-index: -1; height: 190px; pointer-events: none; }
/* What pokes out of each folder: two pieces of our own work, as sheets of paper would. */
.hx-peek img { position: absolute; display: block; height: 170px; border: 3px solid #fff; border-radius: 14px; object-fit: cover; object-position: top center; background: #EFEFF1; box-shadow: 0 14px 30px -10px rgba(24, 24, 27, .4); transition: transform .5s var(--hx-ease); }
.hx-peek img:nth-child(1) { left: 8%; top: 6px; width: 54%; transform: rotate(-5deg); }
.hx-peek img:nth-child(2) { right: 7%; top: 28px; width: 52%; transform: rotate(3deg); }
.hx-folder:hover { transform: translateY(-4px); }
.hx-folder:hover .hx-peek img:nth-child(1) { transform: rotate(-7deg) translateY(-12px); }
.hx-folder:hover .hx-peek img:nth-child(2) { transform: rotate(5deg) translateY(-16px); }
.hx-folder-front {
  position: relative;
  margin-top: 150px;
  padding: 22px 26px 28px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(244, 244, 245, .72) 0%, rgba(113, 113, 122, .88) 38%, #27272A 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
}
.hx-folder-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 40px; border-radius: 12px; background: linear-gradient(180deg, #52525B, #18181B); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 14px -4px rgba(24, 24, 27, .6); color: #fff; }
.hx-folder h3 { font-size: 22px; font-weight: 600; letter-spacing: -.4px; line-height: 1.2; color: #fff; }
.hx-folder p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .86); }

/* ─── Comparison ────────────────────────────────────────────────── */
.hx-compare { width: 100%; border: 1px solid var(--hx-line); border-radius: 20px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; box-shadow: var(--hx-shadow); }
.hx-compare th, .hx-compare td { padding: 20px 22px; text-align: left; font-size: 15px; line-height: 1.45; vertical-align: middle; border-bottom: 1px solid var(--hx-line); }
.hx-compare tbody tr:last-child > * { border-bottom: 0; }
.hx-compare thead th { background: #F5F5F5; font-weight: 500; color: var(--color-text-primary); }
.hx-compare thead th:not(:first-child) { text-align: center; }
.hx-compare th[scope="row"] { width: 22%; font-weight: 500; color: var(--color-text-primary); }
.hx-compare td { color: var(--color-text-secondary); border-left: 1px solid var(--hx-line); }
/* Our column is the one the eye should land on. */
.hx-compare .us { color: var(--color-text-primary); }
.hx-compare thead .us { background: var(--hx-tint-2); }
.hx-compare thead .us img { display: inline-block; height: 20px; width: auto; vertical-align: -4px; }
.hx-mark { display: inline-flex; align-items: flex-start; gap: 12px; }
.hx-mark::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: center / 12px no-repeat; }
.hx-mark.yes::before { background-color: #D6F5E3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.3l2.3 2.3 4.7-5' stroke='%23127A43' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hx-mark.no::before { background-color: #FDE2E2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3.5 3.5l5 5m0-5l-5 5' stroke='%23B42318' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hx-mark.part::before { background-color: #FEF0C7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 6h6' stroke='%23935F06' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hx-after { margin-top: 44px; text-align: center; }
.hx-after p { margin-top: 16px; font-size: 14px; color: #71717A; }

/* ─── Feedback ────────────────────────────────────────────────────
   One review at a time, each about one project. The heading sits left with the arrows
   across from it; under the card, a tab per project says what else there is to read. */
.hx-reviews { max-width: 1040px; margin: 0 auto; }
.hx-reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: 36px; }
.hx-reviews-head > div:first-child { flex: none; }
.hx-reviews-head h2 { font-size: clamp(30px, 4vw, 52px); font-weight: 600; line-height: 1.05; letter-spacing: -1.4px; color: var(--color-text-primary); }
.hx-reviews-head h2 em { display: block; font-style: normal; color: #A1A1AA; }
.hx-reviews-nav { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; }
.hx-reviews-nav[hidden], .hx-review-tabs[hidden] { display: none; }
.hx-reviews-nav button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--hx-line); border-radius: 50%; background: #fff; color: var(--color-text-primary); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.hx-reviews-nav button:hover { border-color: #18181B; background: #18181B; color: #fff; }
.hx-reviews-nav button:focus-visible, .hx-review-tabs button:focus-visible, .hx-review-source a:focus-visible { outline: 2px solid var(--hx-focus); outline-offset: 2px; }

.hx-review { padding: 40px 44px; border: 1px solid var(--hx-line); border-radius: 28px; background: #fff; box-shadow: var(--hx-shadow); }
.hx-review.is-in { animation: hxReview .45s var(--hx-ease); }
@keyframes hxReview { from { opacity: 0; transform: translateY(10px); } }
.hx-review-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: 22px; border-bottom: 1px solid var(--hx-line); }
.hx-review-top h3 { font-size: 15px; font-weight: 600; letter-spacing: -.1px; color: var(--color-text-primary); }
.hx-review-logo { display: block; width: auto; max-width: 160px; height: auto; max-height: 30px; object-fit: contain; }
.hx-review-services { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: #52525B; }
.hx-review-services li { display: flex; align-items: center; gap: 8px; }
.hx-review-services li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #A1A1AA; }
.hx-review blockquote { margin: 28px 0 0; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.42; letter-spacing: -.4px; color: var(--color-text-primary); quotes: "“" "”"; }
.hx-review blockquote::before { content: open-quote; }
.hx-review blockquote::after { content: close-quote; }
.hx-review-by { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
.hx-avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #71717A, #27272A); font-size: 15px; font-weight: 600; color: #fff; }
.hx-review-by .hx-avatar { overflow: hidden; }
.hx-review-by .hx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hx-review-by b { display: block; font-size: 15px; font-weight: 600; }
.hx-review-by > div:not(.hx-review-source) > span { display: block; font-size: 14px; color: #71717A; }
.hx-review-by .hx-reviews-nav { display: inline-flex; }
.hx-review-source { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 14px; color: #52525B; }
.hx-review-source a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hx-review-stars { position: relative; display: inline-block; font-size: 16px; letter-spacing: 2px; line-height: 1; color: #E4E4E7; }
.hx-review-stars::before { content: "★★★★★"; }
.hx-review-stars i { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #F5A524; }
.hx-review-stars i::before { content: "★★★★★"; }

.hx-review-tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; }
.hx-review-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 220px; padding: 0 18px; border: 1px solid var(--hx-line); border-radius: 9999px; background: #fff; font: inherit; font-size: 14px; font-weight: 500; color: var(--color-text-secondary); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.hx-review-tabs button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-review-tabs button img { display: block; width: auto; max-width: 96px; height: auto; max-height: 20px; object-fit: contain; filter: grayscale(1); opacity: .7; }
.hx-review-tabs button:hover { border-color: #A1A1AA; color: var(--color-text-primary); }
.hx-review-tabs button[aria-selected="true"] { border-color: #18181B; background: #18181B; color: #fff; }
.hx-review-tabs button[aria-selected="true"] img { filter: grayscale(1) invert(1); opacity: 1; }

/* ─── Steps ─────────────────────────────────────────────────────── */
.hx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: hxstep; }
.hx-step { position: relative; padding: 28px 24px 30px; border: 1px solid var(--hx-line); border-radius: 20px; background: #fff; counter-increment: hxstep; transition: border-color .25s, box-shadow .25s; }
.hx-step:hover { border-color: #D4D4D8; box-shadow: var(--hx-shadow); }
.hx-step::after { content: "0" counter(hxstep); position: absolute; right: 22px; top: 24px; font-size: 13px; font-weight: 500; color: #A1A1AA; font-variant-numeric: tabular-nums; }
.hx-step-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 28px; border-radius: 12px; background: var(--hx-tint); color: var(--hx-deep); }
.hx-step h3 { font-size: 18px; font-weight: 600; letter-spacing: -.3px; }
.hx-step p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); }

/* ─── Pricing ───────────────────────────────────────────────────── */
.hx-covers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -24px 0 44px; }
.hx-covers span { padding: 6px 14px; border: 1px solid var(--hx-line); border-radius: 9999px; background: #fff; font-size: 13px; color: var(--color-text-secondary); }
.hx-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.hx-plan { display: flex; flex-direction: column; border-radius: 22px; background: #EFEFF1; }
.hx-plan-tag { padding: 12px 16px 10px; text-align: center; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #52525B; }
.hx-plan.popular { background: var(--hx-ink); }
.hx-plan.popular .hx-plan-tag { color: #fff; }
.hx-plan-body { display: flex; flex: 1; flex-direction: column; padding: 30px 28px 28px; border: 1px solid var(--hx-line); border-radius: 22px; background: #fff; }
.hx-plan.popular .hx-plan-body { border-color: var(--hx-ink); box-shadow: 0 24px 50px -20px rgba(24, 24, 27, .45); }
.hx-plan h3 { font-size: 24px; font-weight: 500; letter-spacing: -.5px; }
.hx-plan-for { margin-top: 8px; min-height: 44px; font-size: 14px; line-height: 1.5; color: #71717A; }
.hx-price { margin-top: 18px; font-size: 34px; font-weight: 500; letter-spacing: -1px; line-height: 1.1; }
.hx-price small { font-size: 15px; font-weight: 400; letter-spacing: 0; color: #71717A; }
.hx-plan-note { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: #F5F5F5; font-size: 14px; line-height: 1.45; color: var(--color-text-secondary); }
/* An extra that changes the price: a switch, and the price above it follows. */
.hx-addon { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: #F5F5F5; }
.hx-addon b { display: block; font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.hx-addon span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--color-text-secondary); }
.hx-switch { position: relative; flex: none; width: 48px; height: 28px; padding: 0; border: 0; border-radius: 9999px; background: #D4D4D8; cursor: pointer; transition: background .25s var(--hx-ease); }
.hx-switch::before { content: ""; position: absolute; inset: -8px; }
.hx-switch i { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(24, 24, 27, .3); transition: transform .25s var(--hx-ease); }
.hx-switch[aria-checked="true"] { background: #6D3FC0; }
.hx-switch[aria-checked="true"] i { transform: translateX(20px); }
.hx-switch:focus-visible { outline: 2px solid var(--hx-focus); outline-offset: 3px; }
.hx-price.is-changed [data-price] { display: inline-block; animation: hxPrice .4s var(--hx-ease); }
@keyframes hxPrice { from { opacity: 0; transform: translateY(6px); } }
.hx-plan-note b { display: block; font-weight: 600; color: var(--color-text-primary); }
.hx-plan h4 { margin: 26px 0 14px; padding-top: 22px; border-top: 1px solid var(--hx-line); font-size: 14px; font-weight: 600; }
.hx-plan ul { display: flex; flex: 1; flex-direction: column; gap: 12px; margin: 0 0 30px; padding: 0; list-style: none; }
.hx-plan li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.45; color: var(--color-text-secondary); }
.hx-plan li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7.4l3 3 6-6.4' stroke='%2318181B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.hx-plan .btn { width: 100%; }
.hx-unsure { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 20px; padding: 30px 32px; border: 1px solid var(--hx-line); border-radius: 22px; background: #F5F5F5; }
.hx-unsure h3 { font-size: 24px; font-weight: 500; letter-spacing: -.5px; }
.hx-unsure p { margin-top: 8px; max-width: 620px; font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); }
.hx-unsure-actions { display: flex; flex: none; align-items: center; gap: 12px; }
.hx-whatsapp { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(180deg, #4ADE80 0%, #22C55E 55%, #16A34A 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 22px -8px rgba(34, 197, 94, .65); color: #fff; transition: transform .3s var(--hx-ease), box-shadow .3s var(--hx-ease); }
.hx-whatsapp:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 14px 28px -8px rgba(34, 197, 94, .7), 0 0 0 5px rgba(74, 222, 128, .22); }
.hx-whatsapp:focus-visible { outline: 2px solid #127A43; outline-offset: 3px; }

/* ─── Team ──────────────────────────────────────────────────────
   A portrait each, the name under it. With no photograph the tile carries
   the initials, large and quiet, so a missing picture does not look broken. */
.hx-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 20px; }
.hx-person { position: relative; min-width: 0; }
.hx-person-photo { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; margin-bottom: 16px; overflow: hidden; border-radius: 20px; background: linear-gradient(160deg, #F4F4F5, #E4E4E7); }
.hx-person-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .5s var(--hx-ease), transform .7s var(--hx-ease); }
.hx-person:hover .hx-person-photo img { filter: none; transform: scale(1.03); }
.hx-person-photo span { font-size: clamp(40px, 5vw, 64px); font-weight: 600; letter-spacing: -2px; color: #A1A1AA; }
.hx-person b { display: block; padding-right: 40px; font-size: 17px; font-weight: 600; letter-spacing: -.2px; color: var(--color-text-primary); }
.hx-person > span { display: block; margin-top: 3px; font-size: 14px; color: #71717A; }
.hx-person-link { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--hx-line); border-radius: 50%; color: #3F3F46; transition: background .2s, color .2s, border-color .2s; }
.hx-person-link:hover { border-color: #18181B; background: #18181B; color: #fff; }
.hx-person-link:focus-visible { outline: 2px solid var(--hx-focus); outline-offset: 2px; }

/* ─── FAQ ───────────────────────────────────────────────────────
   One heading, on the left, with the call under it; the questions are white
   cards on the grey page, so the open one reads as a sheet lifted forward. */
.hx-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 72px; align-items: start; }
.hx-faq-aside { position: sticky; top: 112px; }
.hx-faq-aside h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; line-height: 1.08; letter-spacing: -1.2px; color: var(--color-text-primary); }
.hx-faq-aside h2 em { display: block; font-style: normal; color: #A1A1AA; }
.hx-faq-aside .btn { margin-top: 30px; }
.hx-faq-list { display: flex; flex-direction: column; gap: 12px; }
.hx-faq-list .faq-item { border-radius: 16px; background: #fff; }
.hx-faq-list .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 68px; padding: 20px 24px; border: 0; border-radius: 16px; background: none; font: inherit; font-size: 17px; font-weight: 500; letter-spacing: -.2px; text-align: left; color: var(--color-text-primary); cursor: pointer; }
.hx-faq-list .faq-question:focus-visible { outline: 2px solid var(--hx-focus); outline-offset: 2px; }
.hx-faq-list .faq-arrow { flex: none; width: 24px; text-align: center; font-size: 26px; font-weight: 300; line-height: 1; color: var(--color-text-primary); }
.hx-faq-list .faq-answer { display: none; max-width: 620px; padding: 0 64px 24px 24px; font-size: 15px; line-height: 1.65; color: var(--color-text-secondary); }
.hx-faq-list .faq-answer.open { display: block; }

/* ─── Closing call ────────────────────────────────────────────────
   The one block of colour on the page: the logo's purple, inside the page column, with
   the tools we work in floating at its sides. */
.hx-cta-wrap { padding: 0 0 96px; background: #fff; }
.hx-cta { position: relative; overflow: hidden; border-radius: 32px; text-align: center; background: radial-gradient(120% 140% at 50% 0%, #8458D6 0%, #6D3FC0 45%, #4B2A94 100%); color: #fff; }
.hx-cta-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 96px 24px 88px; }
.hx-cta-faces { display: inline-flex; margin-bottom: 22px; }
.hx-cta-faces .hx-avatar { width: 40px; height: 40px; margin-left: -10px; overflow: hidden; border: 3px solid #6D3FC0; background: linear-gradient(135deg, #C4B1E8, #8561D1); font-size: 13px; color: #fff; }
.hx-cta-faces .hx-avatar:first-child { margin-left: 0; }
.hx-cta-faces .hx-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hx-cta h2 { font-size: clamp(30px, 4.4vw, 56px); font-weight: 600; line-height: 1.06; letter-spacing: -1.5px; color: #fff; }
.hx-cta h2 em { display: block; font-style: normal; color: rgba(255, 255, 255, .62); }
.hx-cta p { max-width: 540px; margin: 20px auto 32px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.hx-cta-mail { margin: 22px auto 0 !important; font-size: 14px !important; color: rgba(255, 255, 255, .8) !important; }
.hx-cta-mail a { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.hx-cta .btn:focus-visible, .hx-cta-mail a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Each tool in its own colours, on a white disc so it reads on the purple. */
.hx-float { position: absolute; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: inset 0 -3px 6px rgba(24, 24, 27, .08), 0 14px 28px -8px rgba(24, 12, 60, .55); animation: hxFloat 7s ease-in-out infinite; }
.hx-float img { display: block; width: 26px; height: 26px; object-fit: contain; }
.hx-float:nth-of-type(1) { left: 11%; top: 16%; }
.hx-float:nth-of-type(2) { left: 5%; top: 44%; animation-delay: -2s; }
.hx-float:nth-of-type(3) { left: 12%; top: 72%; animation-delay: -4s; }
.hx-float:nth-of-type(4) { right: 11%; top: 16%; animation-delay: -1s; }
.hx-float:nth-of-type(5) { right: 5%; top: 44%; animation-delay: -3s; }
.hx-float:nth-of-type(6) { right: 12%; top: 72%; animation-delay: -5s; }
@keyframes hxFloat { 50% { transform: translateY(-12px); } }
.hx-clocks { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; margin-top: 20px; border: 1px solid var(--hx-line); border-radius: 18px; }
.hx-clocks > div { padding: 16px; font-size: 13px; letter-spacing: .02em; color: #3F3F46; border-left: 1px solid var(--hx-line); }
.hx-clocks > div:first-child { border-left: 0; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.hx-clocks time { margin-left: 8px; padding-left: 8px; border-left: 1px solid #D4D4D8; font-variant-numeric: tabular-nums; }

/* The form section reads as the answer to the call above it. */
.hx-form-section { padding: 96px 0 110px; background: #fff; }
.hx-form-section .ready-form { max-width: 920px; margin: 0 auto; }

/* ─── Tablet ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hx-section { padding: 84px 0; }
  .hx-hero { padding: 140px 0 60px; }
  .hx-studio { grid-template-columns: 1fr; gap: 36px; }
  .hx-folders, .hx-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-plan.popular { order: -1; grid-column: 1 / -1; }
  .hx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-faq { grid-template-columns: 1fr; gap: 32px; }
  .hx-faq-aside { position: static; }
  .hx-faq-aside .btn { margin-top: 24px; }
  .hx-wide { padding: 0 24px; }
  .hx-portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .hx-unsure { flex-direction: column; align-items: flex-start; }
  .hx-float { width: 48px; height: 48px; }
  .hx-float img { width: 22px; height: 22px; }
  .hx-float:nth-of-type(1), .hx-float:nth-of-type(3) { left: 4%; }
  .hx-float:nth-of-type(2) { left: 1%; }
  .hx-float:nth-of-type(4), .hx-float:nth-of-type(6) { right: 4%; }
  .hx-float:nth-of-type(5) { right: 1%; }
}

/* ─── Phone ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hx-section { padding: 64px 0; }
  .hx-head { margin-bottom: 36px; }
  .hx-head h2 { letter-spacing: -1px; }
  .hx-hero { padding: 124px 0 48px; }
  .hx-hero h1 { letter-spacing: -1.4px; }
  .hx-hero-sub { font-size: 16px; }
  .hx-hero-actions .btn { width: 100%; }
  .hx-reel-sound { right: 12px; top: 12px; width: 44px; padding: 0; justify-content: center; }
  .hx-reel-sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hx-marquee-set { gap: 44px; padding-right: 44px; }
  .hx-marquee-set img { max-width: 120px; max-height: 28px; }
  .hx-stats { margin-top: 32px; }
  .hx-stat { padding: 2px 22px; }
  .hx-stat b { font-size: 26px; }
  .hx-regions { flex-wrap: nowrap; margin-top: 28px; padding-left: 8px; }
  .hx-regions img, .hx-regions-more { width: 36px; height: 36px; margin-left: -8px; border-width: 2px; }
  .hx-tabs { justify-content: flex-start; flex-wrap: nowrap; margin: 0 -16px 28px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
  .hx-tabs::-webkit-scrollbar { display: none; }
  .hx-tabs button { flex: none; height: 44px; }
  .hx-wide { padding: 0 16px; }
  .hx-portfolio { grid-template-columns: 1fr; gap: 28px; }
  .hx-folders, .hx-plans, .hx-steps { grid-template-columns: 1fr; }
  .hx-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-team { gap: 28px 12px; }
  .hx-person-photo { margin-bottom: 12px; border-radius: 16px; }
  .hx-person b { font-size: 15px; }
  .hx-person > span { font-size: 13px; }
  .hx-folder { min-height: 340px; }
  .hx-reviews-head { margin-bottom: 24px; }
  .hx-reviews-head h2 { letter-spacing: -1px; }
  .hx-reviews-head { flex-direction: column; align-items: stretch; }
  .hx-reviews-nav { margin-left: auto; }
  .hx-review { padding: 26px 22px; border-radius: 22px; }
  .hx-review-top { padding-bottom: 18px; }
  .hx-review blockquote { margin-top: 22px; }
  .hx-review-source { width: 100%; margin-left: 0; }
  .hx-review-source .hx-reviews-nav { margin-left: auto; }
  .hx-review-tabs { flex-wrap: nowrap; justify-content: flex-start; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
  .hx-review-tabs::-webkit-scrollbar { display: none; }
  .hx-review-tabs button { flex: none; max-width: 200px; }
  .hx-covers { margin-top: -8px; }
  .hx-unsure { padding: 24px 22px; }
  .hx-unsure-actions { width: 100%; }
  .hx-unsure-actions .btn { flex: 1; }
  .hx-faq-aside .btn { width: 100%; }
  .hx-faq-list .faq-question { padding: 18px 20px; font-size: 16px; }
  .hx-faq-list .faq-answer { padding: 0 20px 22px; }
  .hx-cta-wrap { padding-bottom: 64px; }
  .hx-cta { border-radius: 24px; }
  /* On a phone the tools line up along the top, out of the way of the words. */
  .hx-cta-inner { padding: 112px 20px 56px; }
  .hx-float { top: 28px !important; width: 40px; height: 40px; animation: none; }
  .hx-float img { width: 20px; height: 20px; }
  .hx-float:nth-of-type(1) { left: calc(50% - 147px); }
  .hx-float:nth-of-type(2) { left: calc(50% - 98px); }
  .hx-float:nth-of-type(3) { left: calc(50% - 49px); }
  .hx-float:nth-of-type(4) { right: auto; left: calc(50% + 9px); }
  .hx-float:nth-of-type(5) { right: auto; left: calc(50% + 58px); }
  .hx-float:nth-of-type(6) { right: auto; left: calc(50% + 107px); }
  .hx-clocks { grid-template-columns: 1fr 1fr; }
  .hx-clocks > div:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--hx-line); }
  .hx-clocks > div:nth-child(2) { border-left: 0; }
  .hx-clocks > div:nth-child(4) { display: none; }
  .hx-form-section { padding: 64px 0 72px; }
}

/* ─── Comparison on a narrow screen ─────────────────────────────
   It stays one table. Each question takes a full row of its own, and the
   three answers sit side by side under it, mark above words, so you still
   compare across, which is the whole point of the thing. */
@media (max-width: 760px) {
  .hx-compare, .hx-compare thead, .hx-compare tbody { display: block; }
  .hx-compare tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-compare th, .hx-compare td { display: block; }
  .hx-compare thead th:first-child, .hx-compare th[scope="row"] { grid-column: 1 / -1; width: auto; padding: 16px; }
  .hx-compare thead th:not(:first-child) { display: flex; align-items: center; justify-content: center; padding: 12px 6px; font-size: 13px; line-height: 1.25; }
  .hx-compare thead .us img { height: 16px; max-width: 100%; }
  .hx-compare td { padding: 18px 8px 20px; text-align: center; font-size: 13px; line-height: 1.45; }
  .hx-compare td.us { border-left: 0; }
  .hx-compare tbody tr:last-child > th { border-bottom: 1px solid var(--hx-line); }
  .hx-mark { flex-direction: column; align-items: center; gap: 10px; }
  .hx-mark::before { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-review.is-in { animation: none; }
  .hx-switch, .hx-switch i { transition: none; }
  .hx-price.is-changed [data-price] { animation: none; }
  .hx-marquee-track { animation: none; }
  .hx-float { animation: none; }
  .hx-folder, .hx-peek img, .hx-person-photo img, .hx-regions img, .hx-piece-frame img, .hx-piece-frame video { transition: none; }
  .hx-folder:hover, .hx-person:hover .hx-person-photo img, .hx-regions img:hover, a.hx-piece-frame:hover img, a.hx-piece-frame:hover video { transform: none; }
}