/* ══ WebEaze editorial pages: the design the home page set, shared ══════════════════════════════
   Used by index.html, the service pages and client-portal.html. Colours come from the page's own
   tokens (css/theme.css turns them dark on a dark device), with light fallbacks for pages that
   define fewer. Motion lives in js/hx.js and is opt-in: nothing starts hidden without it. */
/* ══ Home page: structure and motion ═════════════════════════════════════════════════════════════
   One wide column with an indented reading line, the way an editorial page is set: headlines run
   the full width, the sentences and lists sit in from the left. Colours are the page's own tokens,
   so css/theme.css turns all of this dark on a dark device with no second stylesheet.
   Motion is opt-in: nothing starts hidden unless the script has added .hx-motion, so a page with
   no JavaScript, or reduced motion switched on, shows everything at once. */
:root { --hx-gut: clamp(20px, 4vw, 48px); --hx-in: 0px; --hx-ease: cubic-bezier(.2, .8, .2, 1); }
/* The reading line sits in the same distance from both edges, so every indented section is centred. */
@media (min-width: 1000px) { :root { --hx-in: clamp(40px, 9vw, 120px); } }
.hx-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--hx-gut); }
.hx-indent { padding-left: calc(var(--hx-gut) + var(--hx-in)); padding-right: calc(var(--hx-gut) + var(--hx-in)); }

/* Type: one weight lighter than the rest of the site used to be, and tight. */
.hx-title, .hx-h, .hx-giant { font-weight: 600 !important; color: var(--black, #0a0a0a); margin: 0; }
.hx-title { font-size: clamp(2.5rem, 6.4vw, 5.8rem); line-height: 1.02; letter-spacing: -.052em !important; }
.hx-h { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: -.045em !important; }
.hx-giant { font-size: clamp(2.7rem, 8.4vw, 7.6rem); line-height: .96; letter-spacing: -.06em !important; }
.hx-sub { font-size: clamp(1.02rem, 1.3vw, 1.2rem); color: var(--muted, #6b7280); line-height: 1.6; margin: 14px 0 0; max-width: 46ch; }

/* ── Hero ── */
.hx-hero { padding: clamp(44px, 7vw, 96px) 0 0; background: var(--surface, #ffffff); }
.hx-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hx-line > span { display: inline-block; animation: hxUp 1s var(--hx-ease) both; }
.hx-line + .hx-line > span { animation-delay: .12s; }
@keyframes hxUp { from { transform: translateY(104%); } }
.hx-mark {
  font-style: normal;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 94% / 100% .045em;
  background-image: linear-gradient(rgba(120, 81, 169, .45), rgba(120, 81, 169, .45));
  animation: hxDraw 1.1s .65s var(--hx-ease) both;
}
@keyframes hxDraw { from { background-size: 0% .045em; } }

.hx-show {
  position: relative; margin-top: clamp(28px, 4vw, 52px); border-radius: clamp(14px, 1.8vw, 24px);
  overflow: hidden; background: #0d0f1a; isolation: isolate;
  box-shadow: 0 50px 100px -40px rgba(40, 20, 80, .45), 0 0 0 1px rgba(15, 18, 40, .06);
  animation: hxRise 1.1s .25s var(--hx-ease) both;
}
@keyframes hxRise { from { opacity: 0; transform: translateY(40px) scale(.985); } }
.hx-show-bar {
  position: relative; z-index: 3; height: 38px; display: flex; align-items: center; justify-content: center;
  background: rgba(250, 250, 252, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(15, 18, 40, .08);
}
.hx-url { font-size: 12.5px; color: #4b5563; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 3px 14px; min-width: 190px; text-align: center; }
/* The frame is exactly the screenshots' shape (1440x900, so 16:10), so nothing is cropped or zoomed. */
.hx-slides { position: relative; aspect-ratio: 16 / 10; }
.hx-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease; }
.hx-slide.is-on { opacity: 1; z-index: 1; }
.hx-slide picture { display: block; width: 100%; height: 100%; }
.hx-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.hx-show::after { content: ""; position: absolute; inset: auto 0 0; height: 22%; z-index: 2; pointer-events: none; background: linear-gradient(transparent, rgba(8, 10, 20, .55)); }
.hx-reel {
  position: absolute; z-index: 4; bottom: clamp(14px, 2vw, 26px); display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  color: #fff; background: rgba(12, 12, 20, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; font-size: 14.5px; font-weight: 600;
  transition: background .25s, transform .35s var(--hx-ease);
}
.hx-reel { left: clamp(14px, 2vw, 26px); padding: 8px 18px 8px 8px; }
.hx-reel:hover { background: rgba(12, 12, 20, .82); transform: translateY(-2px); color: #fff; text-decoration: none; }
.hx-play { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #0d0f1a; display: grid; place-items: center; }
/* Which site this is, and how long until the next: under the frame, where nothing can overlap it. */
.hx-show-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.hx-caption { display: inline-flex; align-items: baseline; gap: 10px; color: var(--text, #1a1a1a); text-decoration: none; font-size: 15px; }
.hx-caption:hover { color: var(--brand, #7851a9); text-decoration: none; }
.hx-caption b { font-weight: 600; }
.hx-caption span { color: var(--muted, #6b7280); font-size: 14px; }
.hx-progress { display: flex; gap: 6px; width: min(200px, 34%); }
.hx-progress i { flex: 1; height: 4px; border-radius: 3px; background: var(--line-3, #d1d5db); overflow: hidden; position: relative; }
.hx-progress i::after { content: ""; position: absolute; inset: 0; background: var(--brand-fill, #7851a9); transform: scaleX(0); transform-origin: left; }
.hx-progress i.done::after { transform: scaleX(1); }
.hx-progress i.is-on::after { animation: hxBar var(--hx-dur, 5s) linear forwards; }
.hx-show-meta.is-paused .hx-progress i.is-on::after { animation-play-state: paused; }
@keyframes hxBar { to { transform: scaleX(1); } }
/* Phones see each site as it looks on a phone, in a phone. */
@media (max-width: 700px) {
  .hx-show { width: min(300px, 76vw); margin-left: auto; margin-right: auto; border-radius: 40px; border: 9px solid #0d0f1a;
    box-shadow: 0 40px 70px -30px rgba(40, 20, 80, .5); }
  .hx-show-bar { display: none; }
  .hx-slides { aspect-ratio: 780 / 1688; }
  .hx-reel { left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13.5px; }
  .hx-reel:hover { transform: translateX(-50%) translateY(-2px); }
  .hx-show-meta { flex-direction: column; gap: 12px; }
  .hx-caption { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
  .hx-progress { width: 140px; }
}

/* ── Statement ── */
.hx-statement { padding: clamp(64px, 9vw, 130px) 0 clamp(40px, 5vw, 70px); }
.hx-big { font-size: clamp(1.45rem, 2.9vw, 2.55rem); line-height: 1.28; letter-spacing: -.028em; color: var(--text, #1a1a1a); max-width: 30ch; margin: 0; font-weight: 400; }
.hx-big a { color: inherit; text-decoration: underline; text-decoration-color: rgba(120, 81, 169, .5); text-decoration-thickness: .06em; text-underline-offset: .14em; transition: color .2s, text-decoration-color .2s; }
.hx-big a:hover { color: var(--brand, #7851a9); text-decoration-color: var(--brand, #7851a9); }
.hx-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hx-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; border: 1.5px solid transparent;
  background: var(--brand-fill, #7851a9); color: var(--on-accent, #ffffff); font-weight: 600; font-size: 15.5px; text-decoration: none; letter-spacing: -.01em;
  transition: transform .35s var(--hx-ease), box-shadow .3s, background .2s, border-color .2s, color .2s;
}
.hx-btn .svgi { width: .85em; height: .85em; transition: transform .35s var(--hx-ease); }
.hx-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(120, 81, 169, .85); color: var(--on-accent, #ffffff); text-decoration: none; }
.hx-btn:hover .svgi { transform: translateX(4px); }
.hx-ghost { background: transparent; color: var(--text, #1a1a1a); border-color: var(--border, #e5e7eb); }
.hx-ghost:hover { color: var(--text, #1a1a1a); border-color: var(--text, #1a1a1a); box-shadow: none; }
.hx-ask {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 6px 18px 6px 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--brand-line, #d9d5e6); background: var(--brand-tint, #f3eefb); color: var(--text, #1a1a1a); font: 500 14.5px/1.3 var(--font, 'Poppins', sans-serif); text-align: left;
  transition: transform .35s var(--hx-ease), box-shadow .3s;
}
.hx-ask img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.hx-ask b { font-weight: 600; color: var(--brand, #7851a9); margin-right: 4px; }
.hx-ask .svgi { width: .8em; height: .8em; color: var(--brand, #7851a9); transition: transform .35s var(--hx-ease); }
.hx-ask:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(120, 81, 169, .9); }
.hx-ask:hover .svgi { transform: translateX(4px); }

/* ── Rows (services, steps, posts) ── */
.hx-services { padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 110px); }
.hx-toggle { position: relative; display: inline-flex; margin-top: 30px; padding: 4px; border: 1px solid var(--border, #e5e7eb); border-radius: 999px; background: var(--surface, #ffffff); }
.hx-toggle button { position: relative; z-index: 1; border: none; background: none; cursor: pointer; padding: 9px 20px; border-radius: 999px;
  font: 700 12px/1 var(--font, 'Poppins', sans-serif); text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #6b7280); transition: color .3s; }
.hx-toggle button.is-on { color: var(--on-accent, #ffffff); }
.hx-toggle-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; border-radius: 999px; background: var(--ink-fill, #0a0a0a); transition: transform .45s var(--hx-ease), width .45s var(--hx-ease); }
.hx-rows { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--border, #e5e7eb); }
.hx-rows li { border-bottom: 1px solid var(--border, #e5e7eb); }
.hx-rows a, .hx-step {
  position: relative; display: flex; align-items: center; gap: 12px 28px; color: var(--text, #1a1a1a); text-decoration: none;
  /* The rows run edge to edge, but their text lines up with the centred column above them: the
     first term is the column's own margin on screens wider than it. */
  --hx-side: max(0px, (100% - 1240px) / 2);
  padding: 22px calc(var(--hx-side) + var(--hx-gut) + var(--hx-in)) 22px calc(var(--hx-side) + var(--hx-gut) + var(--hx-in)); max-width: none; overflow: hidden; isolation: isolate;
}
.hx-rows a::before { content: ""; position: absolute; inset: 0; background: var(--brand-tint, #f3eefb); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--hx-ease); z-index: -1; }
.hx-rows a:hover::before { transform: scaleX(1); }
.hx-rows a:hover { color: var(--text, #1a1a1a); text-decoration: none; }
.hx-row-t { flex: 0 0 38%; font-size: clamp(1.2rem, 1.9vw, 1.6rem); letter-spacing: -.025em; line-height: 1.25; transition: transform .45s var(--hx-ease); }
.hx-rows a:hover .hx-row-t { transform: translateX(8px); }
.hx-row-d { flex: 1; color: var(--muted, #6b7280); font-size: .98rem; line-height: 1.5; }
.hx-row-k { flex: 0 0 150px; color: var(--muted, #6b7280); font-size: .9rem; }
.hx-num { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--brand, #7851a9); color: var(--brand, #7851a9); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hx-arrow { flex-shrink: 0; margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border, #e5e7eb); display: grid; place-items: center; color: var(--text, #1a1a1a);
  transition: transform .45s var(--hx-ease), background .3s, border-color .3s, color .3s; }
.hx-rows a:hover .hx-arrow { transform: rotate(45deg); background: var(--brand-fill, #7851a9); border-color: var(--brand-fill, #7851a9); color: var(--on-accent, #ffffff); }
.hx-rows[hidden] { display: none; }
.hx-rows.hx-swap li { animation: hxFade .5s var(--hx-ease) both; }
.hx-rows.hx-swap li:nth-child(2) { animation-delay: .05s; } .hx-rows.hx-swap li:nth-child(3) { animation-delay: .1s; }
.hx-rows.hx-swap li:nth-child(4) { animation-delay: .15s; } .hx-rows.hx-swap li:nth-child(n+5) { animation-delay: .2s; }
@keyframes hxFade { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 760px) {
  .hx-rows a, .hx-step { flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; }
  .hx-row-t { flex: 1 1 calc(100% - 64px); }
  .hx-row-d { flex: 1 1 100%; order: 3; font-size: .92rem; }
  .hx-row-k { flex: 1 1 100%; }
  .hx-num { width: 34px; height: 34px; font-size: .92rem; }
  .hx-steps a, .hx-steps .hx-step { column-gap: 14px; }
  .hx-steps .hx-row-t { flex: 1 1 0; min-width: 0; }
  .hx-arrow { width: 34px; height: 34px; }
}

/* ── Featured work ── */
.hx-work { padding: clamp(60px, 8vw, 110px) 0 clamp(70px, 9vw, 130px); background: var(--off-white, #f7f6f1); }
.hx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px clamp(20px, 3vw, 40px); margin-top: clamp(34px, 5vw, 60px); max-width: 1080px; }
.hx-grid > :nth-child(even) { margin-top: clamp(40px, 7vw, 100px); }
.hx-case { display: block; color: var(--text, #1a1a1a); text-decoration: none; }
.hx-case:hover { color: var(--text, #1a1a1a); text-decoration: none; }
.hx-tile { position: relative; display: block; aspect-ratio: 1 / 1.02; border-radius: clamp(16px, 2vw, 26px); overflow: hidden; isolation: isolate; }
.hx-blob { position: absolute; inset: -20%; z-index: -1; transition: transform 1.2s var(--hx-ease); }
.hx-case:hover .hx-blob { transform: scale(1.06) rotate(6deg); }
.t-violet .hx-tile { background: linear-gradient(160deg, #efe6ff, #cbb6f4); }
.t-violet .hx-blob { background: radial-gradient(circle at 78% 22%, rgba(255, 255, 255, .7) 0 14%, transparent 14.5%), radial-gradient(circle at 12% 88%, rgba(120, 81, 169, .28) 0 22%, transparent 22.5%); }
.t-night .hx-tile { background: linear-gradient(160deg, #173b34, #0b1f1b); }
.t-night .hx-blob { background: radial-gradient(circle at 85% 15%, rgba(245, 197, 24, .28) 0 16%, transparent 16.5%), radial-gradient(circle at 8% 80%, rgba(255, 255, 255, .06) 0 28%, transparent 28.5%); }
.t-sky .hx-tile { background: linear-gradient(160deg, #e3f3ff, #b7dcf8); }
.t-sky .hx-blob { background: radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .8) 0 12%, transparent 12.5%), radial-gradient(circle at 92% 90%, rgba(40, 110, 200, .18) 0 26%, transparent 26.5%); }
.t-grass .hx-tile { background: linear-gradient(160deg, #e6f6d9, #b9df9f); }
.t-grass .hx-blob { background: radial-gradient(circle at 82% 80%, rgba(255, 255, 255, .6) 0 18%, transparent 18.5%), radial-gradient(circle at 10% 12%, rgba(60, 140, 50, .18) 0 20%, transparent 20.5%); }
.t-sand .hx-tile { background: linear-gradient(160deg, #f8ecdc, #ebcfa8); }
.t-sand .hx-blob { background: radial-gradient(circle at 15% 85%, rgba(255, 255, 255, .6) 0 16%, transparent 16.5%), radial-gradient(circle at 90% 12%, rgba(180, 110, 40, .18) 0 22%, transparent 22.5%); }
.hx-device {
  position: absolute; left: 9%; right: 9%; top: 17%; border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 60px -24px rgba(10, 10, 30, .5); transform: translateY(var(--py, 0px)); transition: transform .8s var(--hx-ease);
}
.hx-device::before { content: ""; display: block; height: 16px; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; }
/* height:auto matters: the img's own height attribute otherwise pins it at 1000px, and the frame
   shows a zoomed-in corner of the site instead of the whole homepage. */
.hx-device img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
.hx-phone {
  position: absolute; right: 6%; bottom: 7%; width: 22%; aspect-ratio: 780 / 1688; border-radius: 16px; overflow: hidden; background: #0d0f1a;
  border: 4px solid #0d0f1a; box-shadow: 0 24px 40px -18px rgba(10, 10, 30, .6); transform: translateY(calc(var(--py, 0px) * 1.8)); transition: transform .8s var(--hx-ease);
}
.hx-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: 11px; }
.hx-case:hover .hx-device { transform: translateY(calc(var(--py, 0px) - 6px)); }
.hx-case:hover .hx-phone { transform: translateY(calc(var(--py, 0px) * 1.8 - 18px)); }
.hx-case-name { display: block; margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--text, #1a1a1a); }
.hx-case-line { display: block; margin-top: 4px; font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.3; letter-spacing: -.022em; color: var(--text, #1a1a1a); max-width: 28ch; }
.hx-case-cta .hx-tile { background: linear-gradient(150deg, #7851a9, #9a6fd6 60%, #b894e8); display: flex; }
.hx-cta-in { margin: auto; padding: 0 12%; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; color: #fff; }
.hx-cta-big { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; }
.hx-cta-small { font-size: 1.02rem; opacity: .88; }
.hx-case-cta .hx-btn { background: #fff; color: #5a3d84; margin-top: 8px; }
.hx-case-cta:hover .hx-btn { transform: translateY(-2px); }
.hx-case-cta:hover .hx-btn .svgi { transform: translateX(4px); }
@media (max-width: 760px) {
  .hx-grid { grid-template-columns: minmax(0, 1fr); }
  .hx-grid > :nth-child(even) { margin-top: 0; }
  .hx-tile { aspect-ratio: 1 / .92; }
}

.hx-quote { margin: clamp(70px, 9vw, 120px) auto 0; }
.hx-quote blockquote { margin: 0; font-size: clamp(1.4rem, 2.8vw, 2.3rem); line-height: 1.32; letter-spacing: -.025em; color: var(--text, #1a1a1a); max-width: 26ch; }
.hx-quote blockquote::before { content: "\201C"; color: var(--brand, #7851a9); margin-right: .05em; }
.hx-quote blockquote::after { content: "\201D"; color: var(--brand, #7851a9); }
.hx-quote mark { color: inherit; background: linear-gradient(transparent 58%, rgba(245, 197, 24, .55) 58%); padding: 0 .05em; }
.hx-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.hx-quote figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.hx-quote figcaption b { display: block; font-size: 15px; }
.hx-quote figcaption span { font-size: 13.5px; color: var(--muted, #6b7280); }

/* ── Consistency ── */
.hx-proof { padding: clamp(80px, 10vw, 150px) 0; overflow: hidden; }
.hx-giant span { display: block; }
.hx-proof .hx-giant { padding: 0 var(--hx-in); font-size: clamp(2.7rem, 5.6vw, 5.4rem); }
.hx-proof .hx-sub { margin-top: clamp(28px, 4vw, 48px); }
.hx-proof .hx-facts { max-width: none; }
/* A figure and one plain line under it, on a hairline. No pills: a caption that wraps inside a pill
   leaves a lonely word in a lopsided bubble. text-wrap: balance evens out any line that does wrap. */
.hx-facts { list-style: none; padding: 0; margin: 38px 0 42px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; max-width: 800px; }
.hx-facts li { display: flex; flex-direction: column; gap: 8px; padding: 18px 0 22px; border-top: 1px solid var(--border, #e5e7eb); }
.hx-facts b { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: var(--black, #0a0a0a); }
.hx-facts span { font-size: .98rem; line-height: 1.45; color: var(--muted, #6b7280); text-wrap: balance; }
@media (max-width: 700px) { .hx-facts { grid-template-columns: 1fr 1fr; gap: 0 20px; } .hx-facts span { font-size: .92rem; } }

/* ── Blog ── */
.hx-blog { padding: clamp(70px, 9vw, 120px) 0; background: var(--off-white, #f7f6f1); }
.hx-blog .hx-btn { margin-top: 30px; }
.hx-posts .hx-row-t { flex: 1; }

/* ── FAQ ── */
.hx-faq { padding: clamp(70px, 9vw, 130px) 0; }
.hx-faq-grid { padding-left: calc(var(--hx-gut) + var(--hx-in)); padding-right: calc(var(--hx-gut) + var(--hx-in)); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.hx-faq-side { position: sticky; top: 100px; }
.hx-faq-side .hx-sub a { color: var(--brand, #7851a9); text-decoration: underline; text-underline-offset: 3px; }
.hx-faq-side .ask-inline { margin-top: 30px; }
.hx-faq-list { border-top: 1px solid var(--border, #e5e7eb); }
.hx-q { border-bottom: 1px solid var(--border, #e5e7eb); }
.hx-q summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; font-size: clamp(1.08rem, 1.6vw, 1.32rem); letter-spacing: -.02em; line-height: 1.35; color: var(--text, #1a1a1a); transition: color .2s; }
.hx-q summary::-webkit-details-marker { display: none; }
.hx-q summary::after, .hx-q summary::before { content: none !important; display: none !important; }   /* the old FAQ's own +/- */
.hx-q summary { font-weight: 500 !important; }
.hx-plus { margin-left: auto; color: var(--text, #1a1a1a); }
.hx-q summary:hover { color: var(--brand, #7851a9); }
.hx-plus { flex-shrink: 0; position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border, #e5e7eb); transition: background .3s, border-color .3s, transform .45s var(--hx-ease); }
.hx-plus::before, .hx-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; background: currentColor; border-radius: 2px; transition: transform .45s var(--hx-ease); }
.hx-plus::after { transform: rotate(90deg); }
.hx-q[open] .hx-plus { background: var(--brand-fill, #7851a9); border-color: var(--brand-fill, #7851a9); color: var(--on-accent, #ffffff); transform: rotate(180deg); }
.hx-q[open] .hx-plus::after { transform: rotate(0deg); }
/* Opens smoothly: the answer's height animates from 0 through a grid row, no measuring in JS. */
.hx-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--hx-ease); }
.hx-q[open] .hx-a { grid-template-rows: 1fr; }
.hx-a-in { overflow: hidden; color: var(--muted, #6b7280); font-size: 1rem; line-height: 1.7; max-width: 60ch; }
.hx-q[open] .hx-a-in { padding-bottom: 24px; }
.hx-a-in a { color: var(--brand, #7851a9); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .hx-faq-grid { grid-template-columns: minmax(0, 1fr); } .hx-faq-side { position: static; } }
/* Grid children may never be wider than their column: Safari sized the FAQ column to the chat box's
   text field and pushed the whole section past the right edge of the phone. */
.hx-faq-grid > *, .hx-split-grid > *, .hx-feat > * { min-width: 0; }

/* ── Final call to action ── */
.hx-final { padding: 0 0 clamp(60px, 8vw, 110px); }
.hx-final-card { position: relative; overflow: hidden; isolation: isolate; border-radius: clamp(20px, 3vw, 36px); background: #120d1f; color: #fff;
  padding: clamp(44px, 8vw, 110px) clamp(24px, 7vw, 100px); }
.hx-glow { position: absolute; z-index: -1; inset: -40% -20% auto auto; width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 111, 214, .75), rgba(120, 81, 169, .25) 45%, transparent 70%); filter: blur(10px); animation: hxGlow 14s ease-in-out infinite alternate; }
@keyframes hxGlow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-18%, 22%) scale(1.15); } }
.hx-final-h { font-size: clamp(2.3rem, 6vw, 5rem); font-weight: 600 !important; letter-spacing: -.055em !important; line-height: 1; margin: 0; color: #fff; max-width: 14ch; }
.hx-final-h em { font-style: normal; color: #cdb6f2; }
.hx-final-p { font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.6; color: rgba(255, 255, 255, .72); max-width: 46ch; margin: 22px 0 0; }
.hx-final-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 34px; }
.hx-btn-light { background: #fff; color: #3d2766; }
.hx-btn-light:hover { color: #3d2766; box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .6); }
.hx-final-who { display: inline-flex; align-items: center; gap: 12px; font-size: .95rem; color: rgba(255, 255, 255, .75); }
.hx-final-who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .25); }
.hx-final-who b { color: #fff; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .hx-glow { animation: none; } .hx-a, .hx-plus, .hx-plus::before, .hx-plus::after { transition: none; } }

/* ── Split hero: words on one side, the product on the other ── */
.hx-split { padding-bottom: clamp(40px, 6vw, 90px); }
.hx-split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.hx-split .hx-title { font-size: clamp(2.5rem, 5.4vw, 4.9rem); }
.hx-lead { font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--muted, #6b7280); max-width: 34ch; margin: 22px 0 0; }
.hx-split .hx-ctas { margin-top: 30px; }
@media (max-width: 860px) { .hx-split-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Phones: a real screenshot in a plain device frame ── */
.hx-ph { display: block; position: relative; width: 100%; max-width: 280px; aspect-ratio: 780 / 1688; border-radius: 34px; overflow: hidden;
  border: 7px solid #0d0f1a; background: #0d0f1a; box-shadow: 0 40px 70px -30px rgba(40, 20, 80, .45); }
.hx-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: 27px; }
.hx-phones { position: relative; display: flex; justify-content: center; align-items: center; min-height: 480px; }
.hx-phones .hx-ph { position: absolute; width: min(250px, 42%); }
.hx-ph-c { z-index: 2; animation: hxFloat 7s ease-in-out infinite; }
.hx-ph-l { transform: translateX(-62%) rotate(-7deg) scale(.88); opacity: .95; animation: hxInL 1.1s .2s var(--hx-ease) both; }
.hx-ph-r { transform: translateX(62%) rotate(7deg) scale(.88); opacity: .95; animation: hxInR 1.1s .3s var(--hx-ease) both; }
@keyframes hxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes hxInL { from { opacity: 0; transform: translateX(-20%) rotate(0) scale(.8); } }
@keyframes hxInR { from { opacity: 0; transform: translateX(20%) rotate(0) scale(.8); } }
@media (max-width: 860px) { .hx-phones { min-height: 0; aspect-ratio: 5 / 5.2; margin-top: 10px; } .hx-phones .hx-ph { width: min(210px, 46%); } }

/* ── Feature blocks: copy and a phone, alternating sides ── */
.hx-feats { padding: clamp(30px, 5vw, 70px) 0 clamp(70px, 9vw, 120px); }
.hx-feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center;
  padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--border, #e5e7eb); }
.hx-feat:nth-child(even) .hx-feat-copy { order: 2; }
.hx-feat .hx-ph { justify-self: center; max-width: 260px; }
.hx-feat-copy { max-width: 440px; justify-self: center; }
.hx-h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 600 !important; letter-spacing: -.045em !important; line-height: 1.08; margin: 0; color: var(--black, #0a0a0a); }
.hx-feat-copy p { font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.65; color: var(--muted, #6b7280); margin: 16px 0 0; }
.hx-textlink { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--brand, #7851a9); text-decoration: underline; text-underline-offset: 4px; }
.hx-feats > .hx-indent { margin-top: clamp(30px, 5vw, 60px); }
.hx-feats .hx-rows { margin-top: 26px; }
@media (max-width: 760px) {
  .hx-feat { grid-template-columns: minmax(0, 1fr); }
  .hx-feat:nth-child(even) .hx-feat-copy { order: 0; }
  .hx-feat .hx-ph { max-width: 230px; }
}
.hx-final-link { color: rgba(255, 255, 255, .8); text-decoration: underline; text-underline-offset: 4px; font-size: .98rem; }
.hx-final-link:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .hx-ph-c, .hx-ph-l, .hx-ph-r { animation: none; } }

/* ── A client-site tile used as a picture, not a link ── */
.hx-case-static { pointer-events: none; }
.hx-case-static .hx-tile { aspect-ratio: 1 / .9; }

/* ── Plans ── */
.hx-plans-sec { padding: clamp(60px, 8vw, 110px) 0; background: var(--off-white, #f7f6f1); }
.hx-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 34px 0 22px; max-width: none; }
.hx-plan { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 22px; background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); }
.hx-plan.is-featured { border-color: var(--brand, #7851a9); box-shadow: 0 30px 60px -34px rgba(120, 81, 169, .6); }
.hx-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hx-plan-name { font-size: 1.25rem; font-weight: 600 !important; letter-spacing: -.02em !important; margin: 0; color: var(--text, #1a1a1a); }
.hx-plan { position: relative; }
.hx-plan-flag { position: absolute; top: -12px; left: 26px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  color: var(--on-accent, #fff); background: var(--brand-fill, #7851a9); padding: 5px 11px; border-radius: 999px; }
.hx-plan-price { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.hx-plan-price b { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: var(--black, #0a0a0a); }
.hx-plan-price span { color: var(--muted, #6b7280); }
.hx-plan-d { margin: 0; color: var(--muted, #6b7280); line-height: 1.6; flex: 1; }
.hx-plan .hx-btn { align-self: flex-start; margin-top: 6px; }
@media (max-width: 700px) { .hx-plans { grid-template-columns: 1fr; } }

/* ── Entrances on the split hero ── */
.hx-split .hx-lead { animation: hxRise .9s .28s var(--hx-ease) both; }
.hx-split .hx-ctas { animation: hxRise .9s .4s var(--hx-ease) both; }
.hx-case-static .hx-tile { animation: hxTileIn 1.1s .15s var(--hx-ease) both; }
.hx-case-static .hx-device { animation: hxDeviceIn 1.2s .35s var(--hx-ease) both; }
.hx-case-static .hx-phone { animation: hxPhoneIn 1.1s .75s var(--hx-ease) both; }
.hx-case-static .hx-blob { animation: hxBlob 16s ease-in-out infinite alternate; }
@keyframes hxTileIn { from { opacity: 0; transform: scale(.96); } }
@keyframes hxDeviceIn { from { opacity: 0; transform: translateY(46px); } }
@keyframes hxPhoneIn { from { opacity: 0; transform: translate(30px, 40px) rotate(4deg); } }
@keyframes hxBlob { to { transform: scale(1.08) rotate(8deg); } }

/* ── Word-by-word statement (js/hx.js wraps the words; only when motion is on) ── */
html.hx-motion .hx-big[data-rv] { opacity: 1; transform: none; }
html.hx-motion .hx-big .hx-w { display: inline-block; opacity: .12; transform: translateY(.18em); transition: opacity .6s ease, transform .7s var(--hx-ease); }
html.hx-motion .hx-big.rv-in .hx-w { opacity: 1; transform: none; }

/* ── Plans lift in one after another ── */
html.hx-motion .hx-plan[data-rv] { transform: translateY(34px) scale(.98); }
html.hx-motion .hx-plan[data-rv].rv-in { transform: none; }
.hx-plan { transition: transform .45s var(--hx-ease), box-shadow .35s, border-color .3s; }
.hx-plan:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(40, 20, 80, .45); }
@media (prefers-reduced-motion: reduce) {
  .hx-split .hx-lead, .hx-split .hx-ctas, .hx-case-static .hx-tile, .hx-case-static .hx-device, .hx-case-static .hx-phone, .hx-case-static .hx-blob { animation: none; }
}

.hx-plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1060px; }
@media (max-width: 960px) { .hx-plans-3 { grid-template-columns: 1fr; max-width: 520px; } }
.hx-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; }
.hx-plan-list li { position: relative; padding-left: 24px; color: var(--muted, #6b7280); line-height: 1.5; font-size: .96rem; }
.hx-plan-list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 11px; height: 6px; border-left: 2px solid var(--brand, #7851a9); border-bottom: 2px solid var(--brand, #7851a9); transform: rotate(-45deg); }

/* ── Tags: one flowing line of large text with quiet slashes between, not a grid of boxes ── */
.hx-tags { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; align-items: baseline;
  font-size: clamp(1.25rem, 2.5vw, 2rem); line-height: 1.4; letter-spacing: -.03em; max-width: 920px; }
.hx-tags li { display: inline-flex; align-items: baseline; }
.hx-tags li:not(:last-child)::after { content: "/"; margin: 0 .38em; color: var(--brand-line, #d9d5e6); font-weight: 300; }
.hx-tags li > span, .hx-tags li > a { color: var(--text, #1a1a1a); text-decoration: none; }
.hx-tags-links li > a { background: linear-gradient(var(--brand, #7851a9), var(--brand, #7851a9)) no-repeat 0 100% / 0 .06em; transition: color .25s, background-size .45s var(--hx-ease); }
.hx-tags-links li > a:hover { color: var(--brand, #7851a9); background-size: 100% .06em; text-decoration: none; }
html.hx-motion .hx-tags li[data-rv] { transform: translateY(12px); }
html.hx-motion .hx-tags li[data-rv].rv-in { transform: none; }

/* ── Comparison table ── */
.hx-compare { width: 100%; max-width: none; margin-top: 30px; border-collapse: collapse; font-size: 1rem; }
.hx-compare th, .hx-compare td { padding: 16px 12px; border-bottom: 1px solid var(--border, #e5e7eb); text-align: center; }
.hx-compare th[scope="row"] { text-align: left; font-weight: 400; color: var(--text, #1a1a1a); padding-left: 0; }
.hx-compare thead th { font-size: .9rem; font-weight: 600; color: var(--text, #1a1a1a); border-bottom: 1.5px solid var(--text, #1a1a1a); }
/* A plain drawn check: no disc, no glyph (the character stays for screen readers only). */
.hx-yes { display: inline-block; position: relative; width: 18px; height: 18px; font-size: 0; color: transparent; vertical-align: middle; }
.hx-yes::after { content: ""; position: absolute; left: 3px; top: 3px; width: 12px; height: 6.5px;
  border-left: 2.2px solid var(--brand, #7851a9); border-bottom: 2.2px solid var(--brand, #7851a9); transform: rotate(-45deg); border-radius: 1px; }
.hx-no { color: var(--muted, #6b7280); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) { .hx-compare { font-size: .9rem; } .hx-compare th, .hx-compare td { padding: 14px 6px; } }

/* ── WebEaze vs. the rest: all columns on a computer, one alternative at a time on a phone ── */
.hx-vs { padding: clamp(70px, 9vw, 130px) 0; background: var(--off-white, #f7f6f1); }
.hx-vs .hx-compare { max-width: none; margin-top: 30px; background: transparent; }
.hx-vs .hx-compare td, .hx-vs .hx-compare thead th { color: var(--muted, #6b7280); }
.hx-vs .hx-compare .hx-we { background: var(--surface, #fff); color: var(--text, #1a1a1a); font-weight: 600; box-shadow: inset 1px 0 0 var(--border, #e5e7eb), inset -1px 0 0 var(--border, #e5e7eb); }
.hx-vs .hx-compare thead .hx-we { color: var(--brand, #7851a9); border-radius: 16px 16px 0 0; }
.hx-vs .hx-compare tbody tr:last-child .hx-we { border-radius: 0 0 16px 16px; }
.hx-vs .hx-compare tbody tr { transition: background .25s; }
.hx-vs .hx-compare tbody tr:hover { background: rgba(120, 81, 169, .05); }
.hx-vs-pick { display: none; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 24px; }
.hx-vs-pick span { font-size: .9rem; color: var(--muted, #6b7280); margin-right: 4px; }
.hx-vs-pick button { border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff); color: var(--text, #1a1a1a); border-radius: 999px; padding: 8px 14px;
  font: 500 .9rem/1 var(--font, 'Poppins', sans-serif); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.hx-vs-pick button.is-on { background: var(--ink-fill, #0a0a0a); border-color: var(--ink-fill, #0a0a0a); color: var(--on-accent, #fff); }
@media (max-width: 760px) {
  /* A segmented switch with a sliding highlight (js/hx.js moves .hx-vs-slide). */
  .hx-vs-pick { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; gap: 0; padding: 4px; margin-top: 26px;
    background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 999px; }
  .hx-vs-pick span:not(.hx-vs-slide) { display: none; }
  .hx-vs-pick button { position: relative; z-index: 1; border: none; background: none; padding: 10px 4px; font-size: .88rem; transition: color .3s; }
  .hx-vs-pick button.is-on { background: none; color: var(--on-accent, #fff); }
  .hx-vs-slide { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px;
    background: var(--ink-fill, #0a0a0a); transition: transform .45s var(--hx-ease); }

  /* Each row: the label on its own line, then WebEaze and the alternative side by side. */
  .hx-vs .hx-compare, .hx-vs .hx-compare tbody { display: block; }
  .hx-vs .hx-compare thead { display: block; position: sticky; top: var(--hx-nav, 64px); z-index: 2; transition: top .28s ease;
    /* The page's own colour, stretched to the screen edges, so rows slide cleanly under it. */
    background: var(--hx-page-bg, #fff); box-shadow: 0 0 0 100vmax var(--hx-page-bg, #fff); clip-path: inset(0 -100vmax -1px); }
  .hx-vs .hx-compare thead tr, .hx-vs .hx-compare tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  .hx-vs .hx-compare thead th:first-child { display: none; }
  .hx-vs .hx-compare thead tr { border-bottom: 1.5px solid var(--text, #1a1a1a); }
  .hx-vs .hx-compare thead th { padding: 12px 0; font-size: .92rem; text-align: left; border-bottom: none !important; }
  .hx-vs .hx-compare tbody tr { border-bottom: 1px solid var(--border, #e5e7eb); padding: 14px 0; column-gap: 12px; }
  .hx-vs .hx-compare tbody tr:hover { background: none; }
  .hx-vs .hx-compare th[scope="row"] { grid-column: 1 / -1; width: auto; padding: 0 0 6px; border: none; font-size: .95rem; font-weight: 500; letter-spacing: -.01em; color: var(--text, #1a1a1a); }
  .hx-vs .hx-compare td { border: none; padding: 0; font-size: .92rem; line-height: 1.45; display: flex; align-items: center; justify-content: flex-start; text-align: left; }
  .hx-vs .hx-compare .hx-we { box-shadow: none; background: none; border: none; color: var(--brand, #7851a9); }
  .hx-vs .hx-compare thead .hx-we { border: none; background: none; }
  .hx-vs .hx-compare [data-c] { display: none; }
  .hx-vs .hx-compare[data-show="1"] [data-c="1"], .hx-vs .hx-compare[data-show="2"] [data-c="2"], .hx-vs .hx-compare[data-show="3"] [data-c="3"] { display: flex; animation: hxFade .4s var(--hx-ease) both; }
  .hx-vs .hx-compare thead [data-c] { justify-content: flex-start; }
  .hx-vs .hx-compare[data-show="1"] thead [data-c="1"], .hx-vs .hx-compare[data-show="2"] thead [data-c="2"], .hx-vs .hx-compare[data-show="3"] thead [data-c="3"] { display: block; text-align: left; }
}


/* ── Consultation page: intro on the left, the booking card on the right ── */
.cx-grid { align-items: start; grid-template-areas: "intro card" "steps card"; row-gap: 0; }
.cx-left { grid-area: intro; } .bk { grid-area: card; } .cx-after { grid-area: steps; }
@media (max-width: 860px) { .cx-grid { grid-template-areas: "intro" "card" "steps"; row-gap: 30px; } }
.cx-left { padding-top: 8px; }
.cx-billy { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; animation: hxRise .8s var(--hx-ease) both; }
.cx-face { position: relative; display: block; width: 52px; height: 52px; border-radius: 50%; padding: 2px; background: conic-gradient(from 210deg, #7851a9, #9a6fd6, #f5c518, #7851a9); }
.cx-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; display: block; }
.cx-billy b { display: block; font-size: 1rem; color: var(--text, #1a1a1a); }
.cx-billy > span > span { display: block; font-size: .88rem; color: var(--muted, #6b7280); }
.cx-steps { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 18px; max-width: 460px; }
.cx-steps li { display: flex; gap: 14px; align-items: flex-start; animation: hxRise .8s var(--hx-ease) both; }
.cx-steps li:nth-child(1) { animation-delay: .45s; } .cx-steps li:nth-child(2) { animation-delay: .55s; } .cx-steps li:nth-child(3) { animation-delay: .65s; } .cx-steps li:nth-child(4) { animation-delay: .75s; }
.cx-steps .hx-num { width: 32px; height: 32px; font-size: .88rem; }
.cx-steps b { display: block; font-weight: 600; color: var(--text, #1a1a1a); }
.cx-steps div span { display: block; color: var(--muted, #6b7280); font-size: .95rem; line-height: 1.55; margin-top: 2px; }

.bk { position: sticky; top: 90px; background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 26px; padding: 22px;
  box-shadow: 0 50px 90px -50px rgba(40, 20, 80, .45); animation: hxRise 1s .2s var(--hx-ease) both; min-height: 460px; }
.bk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.bk-head b { display: block; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; color: var(--text, #1a1a1a); }
.bk-head span { display: block; font-size: .85rem; color: var(--muted, #6b7280); margin-top: 2px; }
.bk-steps { display: flex !important; gap: 5px; margin-top: 8px !important; }
.bk-steps i { width: 18px; height: 4px; border-radius: 4px; background: var(--border, #e5e7eb); transition: background .4s; }
.bk-steps i.on { background: var(--brand-fill, #7851a9); }
.bk-pane { display: none; }
.bk-pane.is-on { display: block; animation: hxFade .45s var(--hx-ease) both; }
.bk-label { font-size: .8rem; font-weight: 600; color: var(--muted, #6b7280); margin: 0 0 10px; }
.bk-days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 8px; margin: 0 -2px 16px; scroll-snap-type: x proximity; }
.bk-days::-webkit-scrollbar { display: none; }
.bk-day { flex: 0 0 68px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff); color: var(--text, #1a1a1a); font-family: inherit; animation: hxFade .5s var(--hx-ease) both;
  transition: border-color .2s, background .25s, color .25s, transform .35s var(--hx-ease); }
.bk-day span, .bk-day em { font-size: .74rem; font-style: normal; color: var(--muted, #6b7280); }
.bk-day b { font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.bk-day:hover { border-color: var(--brand, #7851a9); transform: translateY(-2px); }
.bk-day.is-on { background: var(--ink-fill, #0a0a0a); border-color: var(--ink-fill, #0a0a0a); color: #fff; }
.bk-day.is-on span, .bk-day.is-on em { color: rgba(255, 255, 255, .7); }
.bk-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px; }
.bk-time { padding: 12px 6px; border-radius: 12px; border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff); color: var(--text, #1a1a1a); cursor: pointer;
  font: 500 .95rem/1 var(--font, 'Poppins', sans-serif); animation: hxFade .45s var(--hx-ease) both; transition: border-color .2s, background .2s, color .2s, transform .3s var(--hx-ease); }
.bk-time:hover { border-color: var(--brand, #7851a9); color: var(--brand, #7851a9); transform: translateY(-1px); }
.bk-time.is-on { background: var(--brand-fill, #7851a9); border-color: var(--brand-fill, #7851a9); color: #fff; }
.bk-skel { height: 44px; border-radius: 12px; background: linear-gradient(90deg, #f1f2f6, #f8f8fb, #f1f2f6); background-size: 200% 100%; animation: bkShim 1.2s linear infinite; }
.bk-days .bk-skel { flex: 0 0 68px; height: 74px; border-radius: 16px; }
@keyframes bkShim { to { background-position: -200% 0; } }
.bk-back { border: none; background: none; padding: 0; margin-bottom: 14px; cursor: pointer; font: 600 .92rem/1.3 var(--font, 'Poppins', sans-serif); color: var(--brand, #7851a9); text-align: left; }
#bk-form label, #ct-form > label, #ct-form .bk-row label { display: block; font-size: .84rem; font-weight: 600; color: var(--text, #1a1a1a); margin-bottom: 12px; }
#bk-form label em, #ct-form label em { font-style: normal; font-weight: 400; color: var(--muted, #6b7280); }
#bk-form input, #ct-form input:not([type=radio]), #ct-form textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; background: var(--surface, #fff);
  font: 400 16px/1.3 var(--font, 'Poppins', sans-serif); color: var(--text, #1a1a1a); transition: border-color .2s, box-shadow .2s; }
#bk-form input:focus, #ct-form input:focus, #ct-form textarea:focus { outline: none; border-color: var(--brand, #7851a9); box-shadow: 0 0 0 4px rgba(120, 81, 169, .12); }
.bk-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.bk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bk-err { color: #b42318; font-size: .9rem; min-height: 1.2em; margin: 4px 0 10px; }
.bk-go { width: 100%; justify-content: center; }
.bk-go:disabled { opacity: .6; cursor: default; transform: none; }
.bk-done { text-align: center; padding: 40px 10px; }
.bk-done svg { width: 76px; height: 76px; margin: 0 auto 18px; display: block; }
.bk-done circle { fill: none; stroke: #22c55e; stroke-width: 3; stroke-dasharray: 160; stroke-dashoffset: 160; animation: bkDraw .7s ease forwards; }
.bk-done path { fill: none; stroke: #22c55e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: bkDraw .45s .55s ease forwards; }
@keyframes bkDraw { to { stroke-dashoffset: 0; } }
.bk-done h2 { font-size: 1.7rem; font-weight: 600 !important; letter-spacing: -.04em !important; margin: 0 0 8px; color: var(--text, #1a1a1a); }
.bk-done p { color: var(--text, #1a1a1a); margin: 0 0 6px; font-weight: 500; }
.bk-small { font-size: .9rem; color: var(--muted, #6b7280) !important; font-weight: 400 !important; }
@media (max-width: 860px) { .bk { position: static; } .bk-times { max-height: none; } }
@media (max-width: 420px) { .bk { padding: 18px; border-radius: 22px; } .bk-row { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (prefers-reduced-motion: reduce) { .bk, .bk-day, .bk-time, .bk-pane.is-on, .cx-steps li, .cx-billy, .bk-skel { animation: none; } .bk-done circle, .bk-done path { animation: none; stroke-dashoffset: 0; } }

/* ── Pricing page ── */
.pr-hero { padding-bottom: clamp(30px, 4vw, 50px); }
.pr-hero .hx-lead { max-width: 40ch; }
.pr-toggle { margin-top: 30px; animation: hxRise .9s .4s var(--hx-ease) both; }
.pr-toggle em { font-style: normal; font-weight: 700; color: #1a7f45; margin-left: 4px; }
.pr-toggle button.is-on em { color: #9ef0bd; }
.pr-plans { padding: 10px 0 clamp(50px, 7vw, 90px); background: var(--surface, #fff); }
.pr-cards { max-width: 980px; margin: 0 auto; gap: 22px; }
.pr-card { padding: 32px; gap: 14px; }
.pr-tag { margin: -4px 0 0; color: var(--muted, #6b7280); font-size: .98rem; }
.pr-card .hx-plan-price b { font-variant-numeric: tabular-nums; }
.pr-note { margin: -6px 0 4px; font-size: .9rem; color: var(--muted, #6b7280); min-height: 1.4em; }
.pr-swap { animation: hxFade .45s var(--hx-ease) both; }
.pr-plus { margin: 4px 0 -4px; font-weight: 600; color: var(--text, #1a1a1a); font-size: .95rem; }
.pr-card .hx-btn { align-self: stretch; justify-content: center; margin-top: 10px; }
.pr-buy { align-self: center; font-size: .9rem; font-weight: 600; color: var(--brand, #7851a9); text-decoration: none; }
.pr-buy:hover { text-decoration: underline; text-underline-offset: 3px; }
.pr-else { text-align: center; margin: 26px 0 0; color: var(--muted, #6b7280); }
.pr-else a { color: var(--brand, #7851a9); font-weight: 600; }
.pr-compare td { font-size: .95rem; color: var(--muted, #6b7280); }
.pr-compare td:last-child { color: var(--text, #1a1a1a); font-weight: 500; }
.pr-total th, .pr-total td { font-weight: 600 !important; color: var(--text, #1a1a1a) !important; border-bottom: none; }
/* Small print sits under the closing panel, centred on it. */
.pr-fine .hx-indent { padding-left: var(--hx-gut); padding-right: var(--hx-gut); }
.pr-fine { padding: 0 0 clamp(36px, 5vw, 56px); }
.pr-fine p { font-size: .8rem; color: var(--muted, #6b7280); max-width: 80ch; line-height: 1.6; margin: 0 auto; text-align: center; }
@media (max-width: 560px) { .pr-card { padding: 26px 22px; } .pr-compare td { font-size: .86rem; } }

/* ── The pricing table on phones: plain rows, the label above, both plans' values side by side ── */
@media (max-width: 760px) {
  .pr-compare, .pr-compare tbody { display: block; }
  .pr-compare thead { display: block; position: sticky; top: var(--hx-nav, 64px); z-index: 2; transition: top .28s ease;
    /* The page's own colour, stretched to the screen edges, so rows slide cleanly under it. */
    background: var(--hx-page-bg, #fff); box-shadow: 0 0 0 100vmax var(--hx-page-bg, #fff); clip-path: inset(0 -100vmax -1px); }
  .pr-compare thead tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1.5px solid var(--text, #1a1a1a); }
  .pr-compare thead th { border: none !important; padding: 12px 0; text-align: left; }
  .pr-compare thead th:first-child { display: none; }
  .pr-compare thead th:last-child { color: var(--brand, #7851a9); }
  .pr-compare tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border, #e5e7eb); }
  .pr-compare th[scope="row"] { grid-column: 1 / -1; padding: 0 0 6px; border: none; font-size: .95rem; font-weight: 500; color: var(--text, #1a1a1a); }
  .pr-compare td { border: none; padding: 0; text-align: left; font-size: .92rem; line-height: 1.45; }
  .pr-compare td:last-child { color: var(--brand, #7851a9); font-weight: 500; }
  .pr-compare .hx-yes::after { left: 1px; }
}

/* ── Photo pair: staggered, wiped in on reveal, drifting apart slightly as you scroll ── */
.hx-photos { padding: 0 0 clamp(40px, 6vw, 80px); overflow: hidden; }
.hx-photos-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(14px, 2.4vw, 28px); align-items: start; }
.hx-photo { margin: 0; border-radius: clamp(16px, 2vw, 26px); overflow: hidden; background: var(--brand-tint, #f3eefb); }
.hx-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0px)) scale(1.08); transition: transform .9s var(--hx-ease); }
.hx-photo-1 { aspect-ratio: 4 / 3; }
.hx-photo-2 { aspect-ratio: 4 / 5; margin-top: clamp(40px, 8vw, 110px); }
.hx-photo-2 img { object-position: 50% 75%; }
html.hx-motion .hx-photo[data-rv] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round 22px); transition: clip-path 1.2s var(--hx-ease); }
html.hx-motion .hx-photo[data-rv].rv-in { clip-path: inset(0 0 0 0 round 22px); }
html.hx-motion .hx-photo-2[data-rv] { transition-delay: .15s; }
@media (max-width: 640px) { .hx-photos-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); } .hx-photo-2 { margin-top: 36px; } }

/* ── Scroll reveal (only when .hx-motion is on) ── */
html.hx-motion [data-rv] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--hx-ease), transform 1s var(--hx-ease); }
html.hx-motion [data-rv].rv-in { opacity: 1; transform: none; }
html.hx-motion .hx-giant[data-rv] { opacity: 1; transform: none; }
html.hx-motion .hx-giant span { opacity: 0; transform: translateY(40%); transition: opacity 1s var(--hx-ease), transform 1.1s var(--hx-ease); }
html.hx-motion .hx-giant span + span { transition-delay: .12s; }
html.hx-motion .hx-giant.rv-in span { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hx-line > span, .hx-mark, .hx-show { animation: none; }
  .hx-progress { display: none; }
}


/* ══ Case studies (case-studies/*.html, built by scripts/build-case-studies.js) ══════════════════ */
.cs-where { margin: 18px 0 0; font-size: .98rem; font-weight: 500; color: var(--text, #1a1a1a); }
.cs-lede { margin-top: 12px; max-width: 40ch; }
.cs-lede strong { font-weight: 600; color: var(--text, #1a1a1a); }
.cs-hero .hx-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.cs-hero .hx-ghost .svgi { transition: transform .3s var(--hx-ease); }
.cs-hero .hx-ghost:hover .svgi { transform: translate(2px, -2px); }
.cs-facts { margin: clamp(40px, 6vw, 70px) 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.cs-statement .hx-big { margin: 0 auto; text-align: center; max-width: 32ch; }
.cs-statement { padding-top: clamp(56px, 8vw, 110px); }

/* A plain browser frame around a real screenshot, shown at its own shape: nothing cropped or zoomed. */
.cs-frame { position: relative; margin: 0; border-radius: clamp(12px, 1.6vw, 20px); overflow: hidden; background: #fff; isolation: isolate;
  box-shadow: 0 40px 80px -40px rgba(40, 20, 80, .4), 0 0 0 1px rgba(15, 18, 40, .07); }
.cs-frame img { display: block; width: 100%; height: auto; }
.cs-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #f5f5f7; border-bottom: 1px solid #e5e7eb; }
.cs-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d9d9de; }
.cs-bar span { margin: 0 auto; transform: translateX(-20px); font-size: 12px; color: #6b7280; background: #fff; border: 1px solid #e5e7eb; border-radius: 7px; padding: 2px 14px; }
@media (max-width: 560px) { .cs-bar { height: 26px; padding: 0 10px; gap: 5px; } .cs-bar i { width: 7px; height: 7px; } .cs-bar span { font-size: 10.5px; padding: 1px 10px; transform: translateX(-12px); } }

/* Before and after: the new site underneath, the old one clipped over it, a handle to drag. */
.cs-ba-sec { padding: clamp(30px, 5vw, 60px) 0 0; }
.cs-ba-sec .cs-frame { margin: 0 auto; }
.cs-ba-view { position: relative; aspect-ratio: 1440 / 940; overflow: hidden; background: #0d0f1a; --ba: 50%; }
.cs-ba-view img, .cs-ba-before { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-ba-view img { object-fit: cover; object-position: 50% 0; }
.cs-ba-before { clip-path: inset(0 calc(100% - var(--ba)) 0 0); background: #fff; }
.cs-ba-before img { filter: saturate(.85); }
.cs-ba-handle { position: absolute; top: 0; bottom: 0; left: var(--ba); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); pointer-events: none; z-index: 2; }
.cs-ba-handle span { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff;
  box-shadow: 0 10px 30px -8px rgba(10, 10, 30, .5); transition: transform .3s var(--hx-ease); }
.cs-ba-handle span::before, .cs-ba-handle span::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid #3b2a57; border-width: 0 0 2px 2px; }
.cs-ba-handle span::before { left: 12px; transform: rotate(45deg); }
.cs-ba-handle span::after { right: 12px; transform: rotate(-135deg); }
.cs-ba.is-drag .cs-ba-handle span, .cs-ba-view:hover .cs-ba-handle span { transform: scale(1.08); }
.cs-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.cs-ba-range:focus-visible ~ .cs-ba-handle span, .cs-ba-view:has(.cs-ba-range:focus-visible) .cs-ba-handle span { outline: 3px solid var(--brand, #7851a9); outline-offset: 3px; }
.cs-ba-tag { position: absolute; top: 14px; z-index: 2; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; pointer-events: none; transition: opacity .3s; }
.cs-ba-tag-b { left: 14px; color: #1a1a1a; background: rgba(255, 255, 255, .92); }
.cs-ba-tag-a { right: 14px; color: #fff; background: rgba(12, 12, 20, .7); }
.cs-ba-note { text-align: center; margin: 16px 0 0; font-size: .92rem; color: var(--muted, #6b7280); }

/* The story: two short passages on the reading line. */
.cs-story { padding: clamp(70px, 9vw, 130px) 0 clamp(20px, 3vw, 40px); }
/* Heading on the left, the passage on the right, so the pair fills the column instead of hugging one side. */
.cs-block { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 18px clamp(30px, 5vw, 70px); align-items: start; }
.cs-block + .cs-block { margin-top: clamp(50px, 7vw, 90px); padding-top: clamp(50px, 7vw, 90px); border-top: 1px solid var(--border, #e5e7eb); }
.cs-prose { margin-top: .5em; }
.cs-prose p { font-size: clamp(1.04rem, 1.35vw, 1.17rem); line-height: 1.75; color: var(--muted, #4b5563); margin: 0 0 1.1em; }
.cs-prose p:last-child { margin-bottom: 0; }

/* What we built: a title and a sentence beside each other, the screenshot full width under them. */
.cs-feats { padding: clamp(60px, 8vw, 110px) 0 clamp(60px, 8vw, 110px); }
.cs-feat { padding: clamp(44px, 6vw, 80px) 0; border-top: 1px solid var(--border, #e5e7eb); }
.cs-feats > .hx-wrap > .cs-feat:first-child { margin-top: clamp(30px, 4vw, 50px); }
.cs-feat-copy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 12px clamp(24px, 4vw, 60px); align-items: baseline; padding: 0 var(--hx-in); }
.cs-feat-copy p { margin: 0; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.65; color: var(--muted, #6b7280); max-width: 46ch; }
.cs-shot { margin: clamp(26px, 3.6vw, 44px) auto 0; max-width: min(var(--w, 1080px), calc(100% - 2 * var(--hx-in))); }
.cs-shot img { transform: scale(1.035); transform-origin: 50% 0; transition: transform 1.4s var(--hx-ease); }
/* The words and the phone sit as one centred pair, whichever side the phone is on. */
.cs-feat-phone { display: grid; grid-template-columns: minmax(0, 420px) 250px; justify-content: center; align-items: center; gap: clamp(30px, 6vw, 110px); }
.cs-feat-phone.is-flip { grid-template-columns: 250px minmax(0, 420px); }
.cs-feat-phone .cs-feat-copy { display: block; padding: 0; }
.cs-feat-phone .cs-feat-copy p { margin-top: 16px; }
.cs-feat-phone .hx-ph { justify-self: center; max-width: 250px; }
.cs-feat-phone.is-flip .hx-ph { order: 1; }
.cs-feat-phone.is-flip .cs-feat-copy { order: 2; }
.cs-statement .hx-big { text-wrap: balance; }
.cs-also-h { margin-top: clamp(40px, 6vw, 70px); }
.cs-feats .hx-rows { margin-top: 26px; }
.cs-visit { text-align: center; margin: clamp(40px, 6vw, 70px) 0 0; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--muted, #6b7280); }
.cs-visit a { color: var(--brand, #7851a9); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.cs-quote-sec { padding: 0 0 clamp(70px, 9vw, 120px); }
.cs-quote-sec .hx-quote { margin-top: 0; text-align: center; }
.cs-quote-sec .hx-quote blockquote { margin: 0 auto; }
.cs-quote-sec .hx-quote figcaption { justify-content: center; }
.cs-more .hx-grid > :nth-child(even) { margin-top: 0; }
.cs-more .hx-textlink { margin-top: clamp(30px, 4vw, 50px); }
@media (max-width: 999px) {
  .cs-feat-copy { padding: 0; }
  .cs-shot { max-width: min(var(--w, 1080px), 100%); }
}
@media (max-width: 760px) {
  .cs-block { grid-template-columns: minmax(0, 1fr); }
  .cs-feat-copy { grid-template-columns: minmax(0, 1fr); }
  .cs-feat-phone, .cs-feat-phone.is-flip { grid-template-columns: minmax(0, 1fr); }
  .cs-feat-phone.is-flip .hx-ph { order: 0; }
  .cs-feat-phone.is-flip .cs-feat-copy { order: 0; }
  .cs-feat-phone .hx-ph { max-width: 220px; }
  .cs-ba-handle span { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .cs-ba-tag { top: 10px; font-size: 11px; }
  .cs-ba-tag-b { left: 10px; } .cs-ba-tag-a { right: 10px; }
}

/* Motion: the frames wipe up into view and the screenshot settles as it arrives. */
html.hx-motion .cs-feat[data-rv] { opacity: 1; transform: none; }
html.hx-motion .cs-feat[data-rv] .cs-feat-copy { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--hx-ease), transform 1s var(--hx-ease); }
html.hx-motion .cs-feat[data-rv] .cs-shot, html.hx-motion .cs-feat[data-rv] .hx-ph { clip-path: inset(100% 0 0 0 round 20px); transition: clip-path 1.25s .12s var(--hx-ease); }
html.hx-motion .cs-feat.rv-in .cs-feat-copy { opacity: 1; transform: none; }
html.hx-motion .cs-feat.rv-in .cs-shot, html.hx-motion .cs-feat.rv-in .hx-ph { clip-path: inset(0 0 0 0 round 20px); }
html.hx-motion .cs-feat.rv-in .cs-shot img { transform: none; }
html.hx-motion .cs-ba[data-rv] { transform: translateY(40px) scale(.985); }
html.hx-motion .cs-ba[data-rv].rv-in { transform: none; }
@media (prefers-reduced-motion: reduce) { .cs-shot img { transform: none; } }

/* ══ Our work (samples.html): each study as a large tile beside its story, alternating sides ═════ */
.sm-hero { padding-bottom: clamp(30px, 5vw, 60px); }
.sm-work { padding: clamp(20px, 3vw, 40px) 0 clamp(70px, 9vw, 120px); }
.sm-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 70px); align-items: center; padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--border, #e5e7eb); }
.sm-row.is-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sm-row.is-flip .hx-case { order: 2; }
.sm-row .hx-tile { aspect-ratio: 16 / 12; }
.sm-copy .hx-h3 a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1.5px; transition: background-size .5s var(--hx-ease); }
.sm-row:hover .sm-copy .hx-h3 a { background-size: 100% 1.5px; }
.sm-where { margin: 10px 0 0; font-size: .95rem; font-weight: 500; color: var(--text, #1a1a1a); }
.sm-blurb { margin: 14px 0 0; font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.65; color: var(--muted, #6b7280); }
.sm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0 6px; }
.sm-facts b { font-size: clamp(1.4rem, 2vw, 1.75rem); white-space: nowrap; }
@media (max-width: 860px) {
  .sm-row, .sm-row.is-flip { grid-template-columns: minmax(0, 1fr); }
  .sm-row.is-flip .hx-case { order: 0; }
}
.cs-where, .sm-where { text-wrap: balance; }
@media (max-width: 560px) { .cs-hero .hx-ctas .hx-btn { flex: 1 1 100%; justify-content: center; } }

/* Centring, site-wide: statements fill the reading column, the testimonial sits in its middle,
   and the work tiles and their heading share the same column as every other section. */
.hx-indent > .hx-big { max-width: none; }
.hx-quote { text-align: center; }
.hx-quote blockquote { margin-left: auto; margin-right: auto; }
.hx-quote figcaption { justify-content: center; text-align: left; }
.hx-work > .hx-wrap:first-child, .hx-work .hx-grid { max-width: 1240px; padding-left: calc(var(--hx-gut) + var(--hx-in)); padding-right: calc(var(--hx-gut) + var(--hx-in)); }
.hx-h, .hx-title, .hx-h3 { text-wrap: balance; }

/* ══ Contact (contact-us.html, built by scripts/build-contact-page.js) ════════════════════════════
   Title and quick routes on the left, the form on the right; on a phone the form comes second. */
.ct { padding-bottom: clamp(80px, 10vw, 150px); }
.ct .hx-title { font-size: clamp(2.5rem, 4.6vw, 4.4rem); }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-areas: "intro card" "routes card"; gap: 0 clamp(36px, 4.5vw, 64px); align-items: start; }
.ct-intro { grid-area: intro; }
.ct-card { grid-area: card; position: static; animation: hxRise 1s .2s var(--hx-ease) both; }
.ct-routes { grid-area: routes; list-style: none; margin: clamp(34px, 5vw, 56px) 0 0; padding: 0; }
.ct-routes li { border-top: 1px solid var(--border, #e5e7eb); }
.ct-routes li:last-child { border-bottom: 1px solid var(--border, #e5e7eb); }
.ct-routes a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t arrow" "d arrow"; gap: 2px 16px; align-items: center; padding: 18px 0; color: inherit; text-decoration: none; }
.ct-routes .hx-row-t { grid-area: t; font-size: 1.12rem; }
.ct-routes .hx-row-d { grid-area: d; font-size: .95rem; }
.ct-routes .hx-arrow { grid-area: arrow; }
.ct-routes a:hover .hx-row-t { color: var(--brand, #7851a9); }
#ct-form textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.ct-topics { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.ct-topics legend { padding: 0; margin-bottom: 8px; font-size: .84rem; font-weight: 600; color: var(--text, #1a1a1a); }
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chip { position: relative; cursor: pointer; }
.ct-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ct-chip span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border, #e5e7eb); font-size: .88rem; color: var(--text, #1a1a1a); background: var(--surface, #fff);
  transition: background .25s, border-color .25s, color .25s, transform .25s var(--hx-ease); }
.ct-chip:hover span { border-color: var(--brand, #7851a9); }
.ct-chip input:checked + span { background: var(--ink-fill, #0a0a0a); border-color: var(--ink-fill, #0a0a0a); color: #fff; }
.ct-chip input:focus-visible + span { outline: 3px solid var(--brand, #7851a9); outline-offset: 2px; }
.ct-chip:active span { transform: scale(.96); }
.ct-who { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 0; font-size: .88rem; color: var(--muted, #6b7280); }
.ct-who img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.ct-who b { color: var(--text, #1a1a1a); font-weight: 600; }
.ct-again { margin-top: 18px; border: 0; background: none; padding: 0; cursor: pointer; font: 600 .95rem/1.3 var(--font, 'Poppins', sans-serif); color: var(--brand, #7851a9); text-decoration: underline; text-underline-offset: 4px; }
.bk-err a { color: inherit; text-decoration: underline; }
#ct-form .bk-err:empty { min-height: 0; margin: 0 0 6px; }
@media (max-width: 900px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "card" "routes"; }
  .ct-card { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) { .ct-card { animation: none; } .ct-chip span { transition: none; } }