/* Homepage components: hero chart, quote reveal, expertise tiles and their visuals, dot portrait,
   contact band with globe. Shared by index.html and elements.html. */


/* Page frame, cells, hairline grids, logo wall and band come from style.css.
   Only what is specific to the homepage lives here. */

/* ── SHARED ── */
.label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h-muted);
  margin-bottom: var(--space-16);
}

.display {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--h-text);
}

.cell .display { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -0.04em; max-width: none; }

.section-head { padding-top: var(--space-56); padding-bottom: var(--space-48); }

.exp-highlight {
  background: var(--highlight);
  border-radius: var(--radius-3);
  padding: 0 2px;
}

/* ── HERO ── */
.hero { padding-top: var(--nav-height); }

.hero-head { padding-top: var(--space-120); padding-bottom: var(--space-96); }

.hero h1 {
  font-size: clamp(1.9rem, 3.6vw, 3.4rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--h-text);
}

/* under the headline: what allbound means and two next steps */
.hero .hero-sub {
  max-width: 50em;
  margin-top: var(--space-24);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-32); }
.hero-actions .nav-cta { padding: var(--space-10) var(--space-20); margin-top: 0; }
.hero-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-10) var(--space-20);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-8);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--h-text);
  text-decoration: none;
  transition: background 0.15s;
}
.hero-btn:hover { background: var(--bg3); }


.hero-lower { grid-template-columns: 420px 1fr; }
.hero-case { padding-top: var(--space-48); padding-bottom: var(--space-48); }

.hero-case-tag {
  display: inline-block;
  border: 1px solid var(--h-border);
  border-radius: var(--radius-4);
  padding: var(--space-4) var(--space-10);
  font-size: 0.72rem;
  color: var(--h-muted);
  margin-bottom: var(--space-20);
}

.hero-case .hero-case-stat {
  font-size: clamp(1.4rem, 1.9vw, 1.65rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  max-width: none;
  line-height: 1.2;
  color: var(--h-text);
  margin-bottom: var(--space-28);
}

.hero-case-company {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin-bottom: var(--space-16);
}

.hero-case-logo {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}

.hero-case-company strong { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--h-text); }

.hero-case-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-size: 0.82rem;
  color: var(--h-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.hero-case-link:hover { color: var(--h-text); }

.hero-chart-area {
  padding: var(--space-48) var(--space-48) var(--space-40);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-chart-svg { width: 100%; height: 280px; display: block; }

/* A dot that runs along the growth line. It lives in HTML, positioned by the script from
   the line's own geometry, so it stays round even though the chart stretches. */
.hero-chart-box { position: relative; }

/* the end point shows once the running dot arrives (the script sets .is-running and .is-on) */
/* the line ends at (800, 2) in a viewBox of 0 -50 800 250: right edge, 52/250 down */
.hero-chart-end {
  position: absolute;
  left: 100%; top: 20.8%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: var(--radius-full);
  background: var(--h-text);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08), 0 0 14px rgba(255,255,255,0.45);
  pointer-events: none;
  transition: opacity 0.3s;
}
.hero-chart-box.is-running .hero-chart-end { opacity: 0; }
.hero-chart-box.is-running .hero-chart-end.is-on { opacity: 1; }

.hero-col { opacity: 0; transition: opacity 0.9s ease-out; }
.hero-col.is-lit { opacity: 1; transition-duration: 0.25s; }

.hero-chart-runner {
  position: absolute;
  left: 0; top: 0;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: var(--radius-full);
  background: var(--h-text);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08), 0 0 14px rgba(255,255,255,0.45);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

/* ── LOGOS ── */
.overlay-logo .logo-item { font-size: 1rem; }
.logo-item { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; text-align: center; }

/* ── QUOTE REVEAL ── */
/* A tall section whose inner block sticks to the viewport; scroll progress through the
   section sharpens the quote word by word. The rails run on as dashes, as in a rail gap. */
.quote-reveal {
  position: relative;
  height: 200vh;
  max-width: var(--max);
  margin: 0 auto;
  background-image: linear-gradient(var(--h-border) 50%, transparent 50%), linear-gradient(var(--h-border) 50%, transparent 50%);
  background-size: 1px 12px, 1px 12px;
  background-position: left top, right top;
  background-repeat: repeat-y;
}

.quote-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--nav-height) var(--space-40) 0;
}

.quote-text p {
  max-width: 16em;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.04em;
  text-align: center;
  text-wrap: balance;
  color: var(--h-text);
}

/* set by the script: each word's progress goes from dim and blurred to sharp */
.quote-text .qw {
  opacity: calc(0.14 + 0.86 * var(--on, 1));
  filter: blur(calc((1 - var(--on, 1)) * 8px));
}

.quote-stars { position: absolute; inset: 0; pointer-events: none; }
.quote-stars span {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: var(--radius-full);
  background: var(--h-text);
  animation: quote-twinkle 6s ease-in-out infinite;
}
@keyframes quote-twinkle {
  0%, 100% { opacity: var(--o); }
  50%      { opacity: calc(var(--o) * 0.25); }
}

@media (prefers-reduced-motion: reduce) {
  .quote-reveal { height: auto; }
  .quote-sticky { position: static; height: auto; padding: var(--space-120) var(--space-40); }
  .quote-stars span { animation: none; }
}

/* ── EXPERTISE ── */
/* Visibility chart in the GEO tile: same height as the task stack so the two titles line up.
   Grid, dot, tooltip and axis are HTML so they keep their size; only the curve stretches. */
.viz {
  position: relative;
  height: 196px;
  margin-bottom: var(--space-28);
  display: grid;
  grid-template-columns: 1fr 44px;
  padding: var(--space-28) 0 var(--space-20);
}

.viz-plot { position: relative; }

.viz-h, .viz-v { position: absolute; pointer-events: none; }
.viz-h { left: 0; right: 0; border-top: 1px dashed var(--h-border); }
/* the grid fades towards the title below it */
.viz-h:nth-of-type(2) { opacity: 0.85; }
.viz-h:nth-of-type(3) { opacity: 0.65; }
.viz-h:nth-of-type(4) { opacity: 0.45; }
.viz-h:nth-of-type(5) { opacity: 0.25; }
/* vertical guides run on past the plot down to the title and fade out on the way */
.viz-v {
  top: -12px;
  bottom: calc(-1 * (var(--space-20) + var(--space-28) - var(--space-4)));
  border-left: 1px dashed rgba(255,255,255,0.1);
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
}

.viz-curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.viz-dot {
  position: absolute;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: var(--radius-full);
  background: var(--h-text);
  box-shadow: 0 0 0 3px var(--bg), 0 0 12px rgba(255,255,255,0.35);
}

.viz-tip {
  position: absolute;
  transform: translate(-82%, calc(-100% - 14px));
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-5) var(--space-10);
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-6);
  font-size: 0.75rem;
  white-space: nowrap;
  color: var(--h-muted);
}
.viz-tip strong { color: var(--h-text); font-weight: 600; font-variant-numeric: tabular-nums; }

.viz-axis { position: relative; }
.viz-axis span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: var(--h-muted);
  font-variant-numeric: tabular-nums;
}

/* Draw-in: the script adds .will-draw, then .is-drawn once the tile is on screen */
.viz.will-draw .viz-curve { clip-path: inset(0 100% 0 0); }
.viz.will-draw .viz-dot,
.viz.will-draw .viz-tip { opacity: 0; }
.viz.is-drawn .viz-curve { clip-path: inset(0 0 0 0); transition: clip-path 1.4s cubic-bezier(0.4, 0, 0.2, 1); }
.viz.is-drawn .viz-dot,
.viz.is-drawn .viz-tip { opacity: 1; transition: opacity 0.4s 1.3s; }

/* Rotating task stack in the SEO tile: one card in focus between dashed guides,
   the next one waiting blurred below it. All tasks are in the HTML; JS only moves them. */
.task-rotator {
  --card-inset: var(--space-32);
  --card-top: var(--space-40);
  --card-h: 60px;
  position: relative;
  height: 196px;
  margin-bottom: var(--space-28);
  overflow: hidden;
}

.task-rotator::before,
.task-rotator::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
/* vertical guides along the card's sides */
.task-rotator::before {
  top: 0; bottom: 0;
  left: var(--card-inset); right: var(--card-inset);
  border-left: 1px dashed var(--h-border);
  border-right: 1px dashed var(--h-border);
}
/* horizontal guides along the focused card's top and bottom */
.task-rotator::after {
  left: 0; right: 0;
  top: var(--card-top);
  height: var(--card-h);
  border-top: 1px dashed var(--h-border);
  border-bottom: 1px dashed var(--h-border);
}

.task-list { list-style: none; }

.task {
  position: absolute;
  left: var(--card-inset);
  right: var(--card-inset);
  top: var(--card-top);
  height: var(--card-h);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: 0 var(--space-16);
  background: var(--bg);
  border: 1px solid var(--h-border);
  border-radius: var(--radius-8);
  opacity: 0;
  filter: blur(6px);
  transform: translateY(170px) scale(0.96);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.7s, filter 0.7s, border-color 0.7s, box-shadow 0.7s;
}

.task.is-active {
  opacity: 1;
  filter: none;
  transform: none;
  border-color: rgba(255,255,255,0.7);
  box-shadow: 0 0 24px rgba(255,255,255,0.06);
  z-index: 2;
}

.task.is-next {
  opacity: 0.45;
  filter: blur(3px);
  transform: translateY(84px) scale(0.97);
}

.task.is-prev {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(-84px) scale(0.97);
}

.task-badge {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--bg3);
  border: 1px solid var(--h-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--h-text);
}

.task-name { font-size: 0.92rem; font-weight: 600; color: var(--h-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.task-step { margin-left: auto; font-size: 0.82rem; color: var(--h-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .task { transition: none; }
}

/* ── POSITIONING ── */
/* the positioning copy sits centred on the same starfield as the quote */
.pos-left {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.pos-copy { position: relative; z-index: 1; max-width: 30em; }
.pos-copy .display { text-wrap: balance; }

/* In a tight display heading a full-height highlight runs into the next line's;
   trim it top and bottom so wrapped lines keep a gap, and repeat the padding per line. */
.display .exp-highlight,
.hero-case-stat .exp-highlight {
  background: linear-gradient(to bottom, transparent 0.14em, var(--highlight) 0.14em, var(--highlight) calc(100% - 0.1em), transparent calc(100% - 0.1em));
  padding: 0 0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.pos-copy p { margin: 0 auto; }
.pos-left .display { margin-bottom: var(--space-20); }

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

/* Platform bars in the Search Everywhere tile: one bar per platform, ChatGPT highlighted
   at rest. Hovering the chart makes the bars bounce and highlights the bar under the
   pointer. Heights are illustrative. */
.bars-wrap {
  position: relative;
  height: 236px;
  margin-bottom: var(--space-28);
  padding-top: var(--space-12);
}

/* two faint dashed guides and a baseline, fading out at the sides */
.bars-wrap::before,
.bars-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  border-top: 1px dashed var(--h-border);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
  pointer-events: none;
}
.bars-wrap::before { top: 34%; }
.bars-wrap::after { top: 64%; }

.bars {
  list-style: none;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-16);
  border-bottom: 1px solid var(--h-border);
}

.bar {
  position: relative;
  z-index: 1;
  width: 56px;
  height: var(--h);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--space-14);
  /* opaque, so the dashed guides run behind the bars without showing through */
  background: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.012)), var(--bg);
  border: 1px solid rgba(255,255,255,0.09);
  border-bottom: none;
  border-radius: var(--radius-8) var(--radius-8) 0 0;
  color: var(--h-muted);
  transition: border-color 0.3s, box-shadow 0.3s, color 0.3s;
}

.bar svg { width: 20px; height: 20px; display: block; opacity: 0.6; transition: opacity 0.3s; }

.bar.is-active,
.bar:hover {
  border-color: rgba(255,255,255,0.75);
  box-shadow: 0 0 24px rgba(255,255,255,0.06);
  color: var(--h-text);
}
.bar.is-active svg,
.bar:hover svg { opacity: 1; }

/* while another bar is hovered, the resting highlight steps back */
.bars:has(.bar:hover) .bar.is-active:not(:hover) {
  border-color: rgba(255,255,255,0.09);
  box-shadow: none;
  color: var(--h-muted);
}
.bars:has(.bar:hover) .bar.is-active:not(:hover) svg { opacity: 0.6; }

/* the dance: when the pointer enters the tile, the middle three bars rise and dip a
   little, slowly and once, one after the other (the script adds .is-dancing) */
@keyframes bar-dance {
  0%, 100% { height: var(--h); }
  35%      { height: min(100%, calc(var(--h) * 1.06)); }
  70%      { height: calc(var(--h) * 0.96); }
}

.bars-wrap.is-dancing .bar:nth-child(2) { animation: bar-dance 3.2s ease-in-out; }
.bars-wrap.is-dancing .bar:nth-child(3) { animation: bar-dance 3.2s ease-in-out 0.3s; }
.bars-wrap.is-dancing .bar:nth-child(4) { animation: bar-dance 3.2s ease-in-out 0.6s; }

.pos-right h3 { margin-bottom: var(--space-8); }

/* ── CONTENT ENGINEERING ── */
/* The workflow as a stack with the SEO tile's task rotator geometry and states: the current
   step sharp between dashed guides, the next one waiting blurred below, the previous one
   fading out above. */
.ce-copy h3 { margin-bottom: var(--space-8); }
.ce-copy p { max-width: 40em; }

.ce-visual {
  --card-inset: var(--space-32);
  --card-top: var(--space-40);
  --card-h: 60px;
  position: relative;
  height: 196px;
  margin-bottom: var(--space-28);
  overflow: hidden;
}
.ce-visual::before,
.ce-visual::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
/* vertical guides along the card's sides */
.ce-visual::before {
  top: 0; bottom: 0;
  left: var(--card-inset); right: var(--card-inset);
  border-left: 1px dashed var(--h-border);
  border-right: 1px dashed var(--h-border);
}
/* horizontal guides along the current card's top and bottom */
.ce-visual::after {
  left: 0; right: 0;
  top: var(--card-top);
  height: var(--card-h);
  border-top: 1px dashed var(--h-border);
  border-bottom: 1px dashed var(--h-border);
}

.ce-steps { list-style: none; }

.ce-step {
  position: absolute;
  left: var(--card-inset);
  right: var(--card-inset);
  top: var(--card-top);
  height: var(--card-h);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: 0 var(--space-16);
  background: var(--bg);
  border: 1px solid var(--h-border);
  border-radius: var(--radius-8);
  opacity: 0;
  filter: blur(6px);
  transform: translateY(170px) scale(0.96);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.7s, filter 0.7s, border-color 0.7s, box-shadow 0.7s;
}
.ce-step.is-active {
  z-index: 2;
  opacity: 1;
  filter: none;
  transform: none;
  border-color: rgba(255,255,255,0.7);
  box-shadow: 0 0 24px rgba(255,255,255,0.06);
}
.ce-step.is-next {
  opacity: 0.45;
  filter: blur(3px);
  transform: translateY(84px) scale(0.97);
}
.ce-step.is-prev {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(-84px) scale(0.97);
}

.ce-pill {
  flex-shrink: 0;
  min-width: 52px;
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--h-border);
  border-radius: var(--radius-4);
  background: var(--bg2);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  color: var(--h-muted);
}
.ce-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--h-border);
  border-radius: var(--radius-full);
  background: var(--bg3);
  color: var(--h-text);
}
.ce-icon svg { width: 15px; height: 15px; }
.ce-text { min-width: 0; }
.ce-text strong { display: block; font-size: 0.92rem; font-weight: 600; color: var(--h-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-text span { display: block; font-size: 0.8rem; color: var(--h-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-step.is-active .ce-pill { color: var(--h-text); border-color: rgba(255,255,255,0.4); }

@media (prefers-reduced-motion: reduce) {
  .ce-step { transition: none; }
}

/* ── REPORTING & ANALYTICS: REPORT TABLE ── */
/* An abstract report: a raised table on a faint grid, its labels drawn as placeholder bars.
   One cell is selected like the active cards (white border) with its bar in white;
   the table fades out toward the bottom. */
.rt-visual {
  position: relative;
  height: 196px;
  margin-bottom: var(--space-28);
  overflow: hidden;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.rt-table {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  width: min(380px, calc(100% - 32px));
  background: linear-gradient(to bottom, var(--bg3), var(--bg2));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-8);
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
}
.rt-row { display: grid; grid-template-columns: 1.7fr 0.9fr 1fr; height: 42px; }
.rt-row + .rt-row { border-top: 1px solid var(--h-border); }
.rt-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--space-14);
}
.rt-cell + .rt-cell { border-left: 1px solid var(--h-border); }
.rt-cell i { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.22); }
.rt-head { height: 34px; }
.rt-head .rt-cell i { height: 5px; background: rgba(255,255,255,0.14); }
.rt-num { justify-content: flex-end; font-size: 0.9rem; color: var(--h-muted); font-variant-numeric: tabular-nums; }

/* the selected cell: lifted above the grid with a white border, like the active cards */
.rt-cell.is-on::before {
  content: '';
  position: absolute;
  inset: 2px -6px 2px -6px;
  border: 1.5px solid rgba(255,255,255,0.85);
  border-radius: var(--radius-6);
  background: var(--bg);
  box-shadow: 0 0 24px rgba(255,255,255,0.06);
}
.rt-cell.is-on i { position: relative; }
.rt-bar-on { background: var(--h-text) !important; box-shadow: 0 0 10px rgba(255,255,255,0.35); }

/* ── ABOUT ── */
.about-grid { grid-template-columns: 1fr 1fr; }

.photo-box {
  width: 100%;
  aspect-ratio: 4/5;
  background: var(--bg2);
  border-radius: var(--radius-6);
  overflow: hidden;
}
.photo-box img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The portrait drawn in dots: a positive halftone of the drawing inside the figure's
   silhouette, with the dots drifting slowly. It fades out at the bottom edge. */
.dot-portrait {
  aspect-ratio: 100 / 109;
  background: none;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
.dot-portrait canvas { width: 100%; height: 100%; display: block; }

.about-text .display { margin-bottom: var(--space-24); }
.about-text p { margin-bottom: var(--space-18); }
.about-text p + p { margin-top: 0; }

.about-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-32); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  border: 1px solid var(--h-border);
  border-radius: var(--radius-4);
  padding: var(--space-5) var(--space-12);
  font-size: 0.78rem;
  color: var(--h-muted);
}

/* ── SERVICES ── */
.svc-icon { width: 120px; height: 96px; margin-bottom: var(--space-32); }
.svc-icon svg { width: 100%; height: 100%; stroke: rgba(255,255,255,0.18); fill: none; }
.svc-card { transition: background 0.15s; }
.svc-card:hover { background: var(--bg2); }

/* ── TESTIMONIALS ── */
.testi-card { display: flex; flex-direction: column; }

.testi-brand {
  padding-left: var(--space-14);
  border-left: 2px solid var(--h-text);
  margin-bottom: var(--space-8);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--h-text);
}

.cell .testi-sub { font-size: 0.78rem; color: var(--h-muted); padding-left: var(--space-14); margin-bottom: var(--space-32); }

.cell .testi-quote { font-size: 0.95rem; color: var(--h-text); line-height: 1.8; flex: 1; margin-bottom: var(--space-32); max-width: none; }

.testi-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-24);
  border-top: 1px solid var(--h-border);
}
.testi-author strong { font-size: 0.88rem; font-weight: 600; display: block; color: var(--h-text); }
.testi-author span { font-size: 0.75rem; color: var(--h-muted); display: block; margin-top: 2px; }

.testi-av {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--h-border);
  overflow: hidden;
  flex-shrink: 0;
}
.testi-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── BELIEFS ── */
.belief-num {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--h-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-16);
}

/* ── CONTACT BAND ── */
/* A dotted globe rising from the foot of the contact band: square pixels on a slowly turning
   sphere, denser where its "land" is, with a few violet light trails crossing it. */
.band--globe {
  position: relative;
  overflow: hidden;
  padding-bottom: 200px;
}
.band--globe > :not(.band-globe) { position: relative; z-index: 1; }
/* a soft dark halo keeps the text readable where the globe runs behind it */
.band--globe p, .band--globe h2, .band--globe .label, .band--globe .band-kicker { text-shadow: 0 0 6px var(--bg), 0 0 16px var(--bg); }
.band-globe {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 460px;
  display: block;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 78%, transparent 100%);
}

/* the contact band's headline: a small typed kicker with a blinking caret, then the quote
   at display size with its second half in the violet text colour */
.band-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 1.2em;
  margin-bottom: var(--space-20);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--h-muted);
}
.band-kicker::after {
  content: '';
  width: 1px; height: 1.05em;
  margin-left: 3px;
  background: var(--accent-text);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.band .band-title {
  max-width: 15em;
  margin: 0 auto var(--space-32);
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.band-title-accent { color: var(--accent-text); }
.band-title-mark {
  text-decoration: underline dashed rgba(155,133,255,0.6);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}

@media (prefers-reduced-motion: reduce) {
  .band-kicker::after { animation: none; }
}


/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .quote-reveal { margin: 0 var(--space-24); }
  .quote-sticky { padding: var(--nav-height) var(--space-24) 0; }
  .hero-head { padding-top: var(--space-96); padding-bottom: var(--space-80); }
  .hero-lower, .about-grid { grid-template-columns: 1fr; }
  .hero-chart-area { padding: var(--space-24); }
  .photo-box { max-width: 420px; }
}

@media (max-width: 480px) {
  .ce-pill { display: none; }
  .ce-visual { --card-inset: var(--space-8); }
  .band--globe { padding-bottom: 130px; }
  .band-globe { height: 320px; }
  .quote-reveal { margin: 0 var(--space-16); height: 170vh; }
  .quote-sticky { padding: var(--nav-height) var(--space-16) 0; }
  .hero-head { padding-top: var(--space-64); padding-bottom: var(--space-56); }
  .hero-chart-area { padding: var(--space-16); }
  .hero-chart-svg { height: 160px; }
  .hero-case { padding-top: var(--space-28); padding-bottom: var(--space-28); }
  .section-head { padding-top: var(--space-32); padding-bottom: var(--space-28); }
  .bars { gap: var(--space-10); }
  .bar { width: 44px; }
  .svc-icon { width: 80px; height: 64px; margin-bottom: var(--space-20); }
  .task-rotator { --card-inset: var(--space-8); }
}


/* ── SIGNAL ENROLLMENT · ANY SENDER · SCHEDULED SENDING ── */
/* Three visuals after a reference set: cards on a dot grid in a taller 280px slot, with coloured
   icons, sender pills and avatars. Dark cards so they sit on the site's page. */
.x-visual {
  position: relative;
  height: 280px;
  margin-bottom: var(--space-28);
  overflow: hidden;
  background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1.3px);
  background-size: 12px 12px;
  background-position: center;
}

/* signal based enrollment */
.sf2 { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sf2 > * { flex-shrink: 0; }
.sf2-card {
  width: min(250px, 100%);
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  padding: var(--space-8) var(--space-10);
}
.sf2-row { display: flex; align-items: center; gap: var(--space-8); font-size: 0.88rem; }
.sf2-row strong { font-weight: 500; color: var(--h-text); }
.sf2-icon {
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-6);
}
.sf2-icon svg { width: 15px; height: 15px; }
.sf2-icon--pink { background: rgba(244,114,182,0.14); color: #f472b6; border: 1px solid rgba(244,114,182,0.3); }
.sf2-icon--blue { background: rgba(96,165,250,0.14); color: #60a5fa; border: 1px solid rgba(96,165,250,0.3); }
.sf2-tag {
  margin-left: auto;
  font-size: 0.72rem;
  padding: 1px var(--space-6);
  border: 1px solid var(--h-border);
  border-radius: var(--radius-4);
  background: var(--bg3);
  color: var(--h-muted);
}
.sf2-sub { margin: var(--space-8) -10px 0; padding: var(--space-8) var(--space-10) 2px; border-top: 1px solid var(--h-border); font-size: 0.78rem; color: var(--h-muted); }
.sf2-line { width: 1px; height: 30px; background: rgba(255,255,255,0.16); }
.sf2-inner { margin-top: var(--space-8); border: 1px solid var(--h-border); border-radius: var(--radius-6); background: var(--bg); }
.sf2-status { display: flex; align-items: center; gap: var(--space-6); font-size: 0.72rem; color: var(--h-muted); padding: var(--space-6) var(--space-10); border-bottom: 1px solid var(--h-border); }
.sf2-status svg, .pq2-text span svg { width: 12px; height: 12px; color: #34d399; flex-shrink: 0; }
.sf2-msg { font-size: 0.82rem; color: var(--h-text); padding: var(--space-8) var(--space-10); }

/* one sequence, any sender */
/* the rings: long dashes, the outer turning slowly clockwise and the inner the other way; the disc
   inside the outer ring covers the dot grid */
.ob2-rings { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%); overflow: visible; }
.ob2-disc { fill: var(--bg); }
.ob2-ring { fill: none; stroke-dasharray: 7 7; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }
.ob2-ring--outer { stroke: rgba(255,255,255,0.22); animation: ob2-turn 60s linear infinite; }
.ob2-ring--inner { stroke: rgba(255,255,255,0.13); animation: ob2-turn 60s linear infinite reverse; }
@keyframes ob2-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ob2-ring { animation: none; } }
.ob2-page {
  position: absolute; left: 50%; top: 50%;
  width: 82px; height: 64px;
  transform: translate(-50%, -50%);
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-6);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.ob2-page-bar { position: absolute; left: 0; right: 0; top: 12px; border-top: 1px solid var(--h-border); }
.ob2-page-bar::before { content: ''; position: absolute; left: 6px; top: -8px; width: 22px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.14); }
.ob2-page-icon {
  width: 22px; height: 22px; border-radius: var(--radius-full);
  background: var(--bg3); color: var(--h-muted);
  display: flex; align-items: center; justify-content: center;
}
.ob2-page-icon svg { width: 12px; height: 12px; }
/* each sender: a cursor on the outer ring, its name pill and role beside it */
.ob2-agent {
  position: absolute; left: 50%; top: 50%;
  display: grid; justify-items: center; row-gap: 3px;
}
.ob2-cursor svg { width: 15px; height: 15px; display: block; }
.ob2-name { font-size: 0.82rem; font-weight: 500; color: #fff; padding: 2px var(--space-10); border-radius: var(--radius-6); }
.ob2-role { font-size: 0.72rem; }
.ob2-agent--john  { transform: translate(30px, -112px); }
.ob2-agent--john .ob2-cursor  { justify-self: start; margin-left: -6px; transform: rotate(0deg); }
.ob2-agent--roza  { transform: translate(-150px, 18px); }
.ob2-agent--roza .ob2-cursor  { justify-self: end; margin-right: -12px; order: -1; transform: rotate(80deg); }
.ob2-agent--ethan { transform: translate(84px, 40px); }
.ob2-agent--ethan .ob2-cursor { justify-self: start; margin-left: -4px; transform: rotate(150deg); }
.ob2-agent--john  .ob2-cursor svg { fill: #34d399; }
.ob2-agent--john  .ob2-name { background: #10b981; }
.ob2-agent--john  .ob2-role { color: #34d399; }
.ob2-agent--roza  .ob2-cursor svg { fill: #a78bfa; }
.ob2-agent--roza  .ob2-name { background: #8b5cf6; }
.ob2-agent--roza  .ob2-role { color: #a78bfa; }
.ob2-agent--ethan .ob2-cursor svg { fill: #fb923c; }
.ob2-agent--ethan .ob2-name { background: #f97316; }
.ob2-agent--ethan .ob2-role { color: #fb923c; }

/* automate scheduled sending */
.pq2 {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
}
.pq2-list {
  position: absolute; left: 50%; bottom: 10px;
  width: min(340px, calc(100% - 16px));
  transform: translateX(-50%);
  display: grid; gap: var(--space-8);
}
.pq2-item {
  display: flex; align-items: center; gap: var(--space-10);
  padding: var(--space-10) var(--space-12);
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.pq2-item.is-faded > * { opacity: 0.45; }
.pq2-avatar {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 600; color: #fff;
}
.pq2-avatar--ch { background: #64748b; }
.pq2-avatar--bs { background: #a16207; }
.pq2-avatar--eh { background: #b91c1c; }
.pq2-avatar--cf { background: #78716c; }
.pq2-text { min-width: 0; flex: 1; }
.pq2-text strong { display: block; font-size: 0.85rem; font-weight: 500; color: var(--h-text); white-space: nowrap; }
.pq2-text span { display: flex; align-items: center; gap: var(--space-4); font-size: 0.72rem; color: var(--h-muted); margin-top: 2px; white-space: nowrap; }
.pq2-when { font-size: 0.7rem; color: var(--h-muted); white-space: nowrap; align-self: flex-start; padding-top: 2px; }

/* pie: a thick ring, part filled and one segment lit, the rest drawn as dashed outlines,
   on a square grid instead of dots */
.x-visual.x-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 55%, transparent 100%);
}
.pie-svg { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; transform: translate(-50%, -50%); overflow: visible; }
.pie-dash { fill: none; stroke: rgba(255,255,255,0.45); stroke-width: 1.5; stroke-dasharray: 8 6; }
.pie-band { fill: #2a2a2a; stroke: rgba(255,255,255,0.4); stroke-width: 1.2; }
.pie-lit { fill: var(--accent); stroke: var(--accent); stroke-width: 1.2; }
.pie-dot { fill: var(--accent); stroke: #fff; stroke-width: 2.5; }

/* line, single metric and funnel: on the same square grid, violet as the one highlight */
.x-svg { position: absolute; left: 50%; top: 50%; width: min(420px, 100%); transform: translate(-50%, -50%); overflow: visible; }

.ln-a, .ln-b { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ln-a { stroke: #6d4bff; }
.ln-b { stroke: #5a5a5a; }
.ln-mark { stroke: rgba(255,255,255,0.75); stroke-width: 1.5; }
.ln-dot { stroke: #fff; stroke-width: 2.5; }
.ln-dot--a { fill: #6d4bff; }
.ln-dot--b { fill: #5a5a5a; }

.sm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-12); }
.sm-key { display: flex; align-items: center; gap: var(--space-6); }
.sm-key i, .sm-bar { display: block; height: 7px; border-radius: 4px; background: #5a5a5a; }
.sm-sq { width: 12px; height: 12px; border-radius: 3px; background: #6d4bff; }
.sm-value { font-size: 3.4rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--h-text); font-variant-numeric: tabular-nums; }
.sm-bar { width: 72px; height: 9px; }

.fn-axis { stroke: rgba(255,255,255,0.1); stroke-width: 1; }
.fn-axis { stroke: rgba(255,255,255,0.1); stroke-width: 1; }
.fn-stand { fill: #a3a3a3; }
.fn-stage { fill: #6e6e6e; }
.fn-end { fill: #6d4bff; }

/* trigger node: a selected workflow card with a "Trigger" flag, a port and an arrow down to an
   empty next step drawn in placeholder bars; on the dot grid */
.tr { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tr > * { flex-shrink: 0; }
.tr-node { display: flex; flex-direction: column; align-items: flex-start; }
.tr-flag {
  display: inline-flex; align-items: center; gap: var(--space-5);
  padding: 3px var(--space-8);
  margin-left: 0;
  font-size: 0.78rem; font-weight: 500;
  color: var(--accent-text);
  /* the violet wash mixed onto the page colour, opaque so the dot grid doesn't show through */
  background: #1a123a;
  border-radius: var(--radius-6) var(--radius-6) 0 0;
}
.tr-flag svg { width: 12px; height: 12px; }
.tr-card {
  position: relative;
  width: min(300px, calc(100vw - 64px));
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
}
.tr-node .tr-card { border-color: #6d4bff; border-top-left-radius: 0; box-shadow: 0 0 22px rgba(80,46,228,0.25); }
.tr-row { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-10) var(--space-12); font-size: 0.9rem; }
.tr-row strong { font-weight: 500; color: var(--h-text); }
.tr-app { width: 20px; height: 20px; border-radius: 5px; background: var(--h-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tr-app svg { width: 14px; height: 14px; }
.tr-tag { margin-left: auto; font-size: 0.75rem; padding: 2px var(--space-8); border-radius: var(--radius-6); background: var(--bg3); color: var(--h-muted); }
.tr-sub { margin: 0 var(--space-12); padding: var(--space-10) 0 var(--space-12); border-top: 1px solid var(--h-border); font-size: 0.78rem; color: var(--h-muted); }
.tr-port {
  position: absolute; left: 50%; bottom: -6px;
  width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: var(--radius-full);
  background: var(--bg); border: 1.5px solid #6d4bff;
}
.tr-link { position: relative; width: 1px; height: 58px; background: rgba(255,255,255,0.18); }
.tr-link::after {
  content: ''; position: absolute; left: -4px; bottom: 0;
  width: 7px; height: 7px;
  border-right: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.3);
  transform: rotate(45deg);
}
.tr-card--ghost { margin-top: 2px; }
.tr-card--ghost i { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); }
.tr-card--ghost .tr-pill { margin-left: auto; width: 60px; height: 18px; border-radius: var(--radius-6); }
.tr-step { width: 20px; height: 20px; border-radius: 5px; background: rgba(80,46,228,0.22); color: var(--accent-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tr-step svg { width: 13px; height: 13px; }

/* ── HERO CONCEPT: ASK ANYWHERE ── */
/* A 12 by 7 grid places the platform icons, the panel over columns 2-11 of rows 2-4 and the prompt
   bar in row 6; an identical grid underneath draws the hairlines (each cell its left and top
   edge). Same box, same tracks, so every edge lands on the same pixel. */
.hc {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(7, 1fr);
  aspect-ratio: 12 / 7;
  min-height: 460px;
  container-type: inline-size;   /* the type below scales with the hero, not the window */
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
.hc-lines { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(7, 1fr); }
.hc-lines i { border-left: 1px solid rgba(255,255,255,0.09); border-top: 1px solid rgba(255,255,255,0.09); }
/* the outer edge is the rail and the line above, so the first column and row draw no line of their own */
.hc-lines i:nth-child(12n+1) { border-left: 0; }
.hc-lines i:nth-child(-n+12) { border-top: 0; }

.hc-icon { display: flex; align-items: center; justify-content: center; color: #8a8a8a; z-index: 1; }
.hc-icon svg { width: 36%; max-width: 44px; height: auto; aspect-ratio: 1; }
.hc-icon--on { color: var(--accent-text); }

/* the panel draws only its left and top edge, like the cells; its right and bottom edge are the
   next cells' lines */
.hc-panel {
  grid-column: 2 / 12; grid-row: 2 / 5;
  z-index: 1;
  background: var(--bg);
  border-left: 1px solid rgba(255,255,255,0.09);
  border-top: 1px solid rgba(255,255,255,0.09);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 var(--space-24);
}
.hc-pill { font-size: 0.82rem; padding: 4px var(--space-12); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; color: var(--h-text); margin-bottom: clamp(16px, 2.2cqw, 30px); }
.hc .hc-title { max-width: none; margin: 0 0 clamp(10px, 1.2cqw, 16px); font-size: clamp(1.8rem, 4cqw, 4rem); white-space: nowrap; font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; color: var(--h-text); }
.hc .hc-sub { margin: 0 0 clamp(16px, 2.2cqw, 30px); font-size: clamp(0.95rem, 1.4cqw, 1.2rem); line-height: 1.45; color: var(--text); max-width: 46em; }
.hc-actions { display: flex; gap: var(--space-10); }
.hc-btn {
  font-size: 0.9rem; font-weight: 500;
  padding: var(--space-8) var(--space-12);
  border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-8);
  color: var(--h-text); text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.hc-btn:hover { background: var(--bg3); }
.hc-btn--fill { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hc-btn--fill:hover { background: #6440f0; }

/* the prompt bar: row 6, columns 3-10, 16px of room on every side */
.hc-prompt {
  grid-column: 3 / 11; grid-row: 6;
  margin: 16px;
  z-index: 1;
  display: flex; align-items: center;
  padding: 0 var(--space-24) 0 var(--space-28);
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  font-size: 1.2rem; color: var(--h-text);
}
.hc-caret { width: 1.5px; height: 1.25em; margin-left: 2px; background: var(--h-text); animation: caret-blink 1s steps(1) infinite; }
.hc-send {
  margin-left: auto; width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--radius-6); background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
}
.hc-send svg { width: 14px; height: 14px; }

/* narrow screens: six columns of 80px rows, two icons, the panel and prompt full width */
@media (max-width: 760px) {
  .hc { grid-template-columns: repeat(6, 1fr); grid-template-rows: 80px repeat(4, 80px) 80px 80px; aspect-ratio: auto; }
  .hc-lines { grid-template-columns: repeat(6, 1fr); grid-template-rows: 80px repeat(4, 80px) 80px 80px; }
  .hc-lines i:nth-child(n+43) { display: none; }
  .hc > .hc-icon:nth-of-type(n+3) { display: none; }
  .hc-panel { grid-column: 1 / -1; grid-row: 2 / 6; border-left: 0; padding: 0 var(--space-16); }
  .hc-prompt { grid-column: 1 / -1; grid-row: 6 / 8; align-self: center; height: 64px; margin: 0 var(--space-16); font-size: 0.92rem; padding: 0 var(--space-12) 0 var(--space-16); }
  .hc-pill { margin-bottom: var(--space-16); }
  .hc .hc-sub { margin-bottom: var(--space-20); font-size: 1rem; }
  .hc .hc-title { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .hc-caret { animation: none; } }

/* ── DASHED GUIDES (toolstack, steps) ── */
/* drawn as gradients, 6px on and 6px off in the frame colour, like the dashed rail gaps between sections */
:root { --guide: var(--h-border); }

/* ── TOOLSTACK ── */
/* An intro (bold lead sentence running into muted text, one outlined button), then five tool cells,
   a band of fine vertical hatching and a link, framed by hairlines with small square markers on
   the grid points and a dashed rule that runs past the frame. */
.ts { position: relative; padding: var(--space-64) var(--space-40) var(--space-48); overflow: hidden; }
/* the frame's left and right edge continue as dashed lines above and below it */
.ts > * { position: relative; }
.ts-intro { max-width: calc(560px + var(--space-28)); padding-left: var(--space-28); margin-bottom: var(--space-64); }
.ts .ts-lead { max-width: none; font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; margin: 0 0 var(--space-28); }
.ts-lead strong { font-weight: 600; color: var(--h-text); }
.ts-lead span {
  background: linear-gradient(90deg, #9a9a9a, #8fa0c8 60%, #9a9a9a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ts-btn {
  display: inline-block;
  font-size: 0.85rem; font-weight: 600;
  padding: var(--space-8) var(--space-12);
  border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-8);
  color: var(--h-text); text-decoration: none;
  transition: background 0.15s;
}
.ts-btn:hover { background: var(--bg3); }

.ts-grid { position: relative; border-left: 1px solid var(--h-border); border-right: 1px solid var(--h-border); }
.ts-grid::before, .ts-grid::after {
  content: ''; position: absolute; top: 0; width: 200px; height: 365px;
  --h: repeating-linear-gradient(90deg, var(--guide) 0 6px, transparent 6px 12px);
  background: var(--h) 0 0 / 100% 1px no-repeat, var(--h) 0 208px / 100% 1px no-repeat,
              var(--h) 0 312px / 100% 1px no-repeat, var(--h) 0 364px / 100% 1px no-repeat;
  pointer-events: none;
}
.ts-grid::before { right: 100%; }
.ts-grid::after { left: 100%; }
.ts-vguide { position: absolute; left: 0; right: 0; height: 600px; background: linear-gradient(to bottom, var(--guide) 50%, transparent 0) left top / 1px 12px repeat-y,
    linear-gradient(to bottom, var(--guide) 50%, transparent 0) right top / 1px 12px repeat-y; pointer-events: none; }
.ts-vguide--up { bottom: 100%; }
.ts-vguide--down { top: 100%; }
.ts-row { display: grid; grid-template-columns: repeat(5, 1fr); height: 208px; border-top: 1px solid var(--h-border); }
.ts-tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-24);
  border-left: 1px solid var(--h-border);
}
.ts-tool:first-child { border-left: 0; }
.ts-logo { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--h-text); }
.ts-logo svg { width: 46px; height: 46px; }
.ts-logo img { width: 46px; height: 46px; border-radius: 12px; filter: grayscale(1) invert(1) contrast(1.1); }
.ts-letter {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--h-text); color: var(--bg);
  font-size: 1.15rem; font-weight: 700; letter-spacing: -0.04em;
}
.ts-name { font-size: 0.92rem; color: var(--h-muted); text-align: center; }
.ts-hatch {
  height: 104px;
  border-top: 1px solid var(--h-border);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 6px);
}
.ts-foot {
  height: 52px;
  border-top: 1px solid var(--h-border); border-bottom: 1px solid var(--h-border);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 var(--space-24);
}
.ts-foot a { display: inline-flex; align-items: center; gap: var(--space-8); font-size: 0.88rem; color: var(--h-muted); text-decoration: none; transition: color 0.15s; }
.ts-foot a:hover { color: var(--h-text); }
.ts-foot svg { width: 14px; height: 14px; }
.ts-mark {
  position: absolute; width: 5px; height: 5px; margin: -2px 0 0 -2px;
  background: #6a6a6a; border-radius: 1px; z-index: 1;
}

@media (max-width: 760px) {
  .ts { padding: var(--space-40) var(--space-16) var(--space-32); }
  .ts-row { grid-template-columns: repeat(3, 1fr); height: auto; }
  .ts-tool { padding: var(--space-24) 0; border-bottom: 1px solid var(--h-border); }
  .ts-tool:nth-child(3n+1) { border-left: 0; }
  .ts-mark, .ts-grid::before { display: none; }
  .ts-vguide, .ts-grid::after { display: none; }
  .ts-intro { padding-left: 0; }
  .ts-foot { justify-content: center; }
}

/* ── STEPS ── */
/* An intro with a two-tab switch, then a framed list of numbered steps on a band with hatched
   sides. Numbers are joined by a line, steps divided by dashes, and the panel's sides run on as
   dashed lines above and below. */
.st { --inset: 96px; position: relative; padding-top: var(--space-96); overflow: hidden; }
.st > * { position: relative; }
/* below the band, the panel's sides continue as guides down to the bottom of the section; never
   alongside the panel, and nothing above the band */
.st-band::before, .st-band::after {
  content: ''; position: absolute; left: var(--inset); right: var(--inset); height: 1200px;
  background: linear-gradient(to bottom, var(--guide) 50%, transparent 0) left top / 1px 12px repeat-y,
    linear-gradient(to bottom, var(--guide) 50%, transparent 0) right top / 1px 12px repeat-y; pointer-events: none;
}
.st-band::before { display: none; }
.st-band::after { top: 100%; }
.st-intro { padding: 0 var(--inset) var(--space-40) calc(var(--inset) + var(--space-28)); }
.st .st-lead { max-width: 560px; margin: 0 0 var(--space-48); font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; }
.st-lead strong { font-weight: 600; color: var(--h-text); }
.st-lead span { color: #8c8c96; }

.st-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg3); border: 1px solid var(--h-border); }
.st-tab {
  display: inline-flex; align-items: center; gap: var(--space-6);
  padding: var(--space-5) var(--space-12);
  border: 1px solid transparent; border-radius: 8px;
  background: none; color: var(--h-muted);
  font: inherit; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em;
  cursor: pointer; transition: color 0.15s, background 0.15s;
}
.st-tab svg { width: 14px; height: 14px; }
.st-tab:hover { color: var(--h-text); }
.st-tab[aria-selected="true"] { background: var(--bg); border-color: rgba(255,255,255,0.12); color: var(--h-text); box-shadow: 0 1px 2px rgba(0,0,0,0.4); }

/* the band: solid lines along its top and bottom across the full width, hatching either side of the
   panel, painted inside the borders so it does not show through them */
.st-band {
  padding: 0 var(--inset);
  border-top: 1px solid var(--h-border);
  border-bottom: 1px solid var(--h-border);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 8px) padding-box;
}
.st-panel { background: var(--bg); border-left: 1px solid var(--h-border); border-right: 1px solid var(--h-border); }
.st-list { list-style: none; padding: var(--space-24) var(--space-48) var(--space-24) var(--space-40); margin: 0; }
.st-list[hidden] { display: none; }
.st-step {
  position: relative;
  display: grid; grid-template-columns: 60px minmax(0, 1fr) 80px minmax(0, 1.1fr);
  min-height: 108px; padding-top: var(--space-16);
}
/* dashed divider between steps, starting at the title column; finer (4px on, 4px off) than the other guides */
.st-step + .st-step::before { content: ''; position: absolute; top: 0; left: 60px; right: calc(-1 * var(--space-48)); height: 1px; background: repeating-linear-gradient(90deg, var(--guide) 0 4px, transparent 4px 8px); }
.st-num { font-size: 0.75rem; font-weight: 600; color: var(--h-text); font-variant-numeric: tabular-nums; padding-top: 4px; padding-left: 8px; }
/* the line joining the numbers runs from under each number to the next step */
.st-step:not(:last-child) .st-num::after { content: ''; position: absolute; left: 14px; top: 46px; bottom: 6px; width: 1.5px; background: rgba(255,255,255,0.55); }
.st .st-step h3 { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--h-text); }
.st-sep { font-size: 0.85rem; color: var(--subtle); padding-top: 3px; }
.st .st-step p { margin: 0; padding: 2px 0 var(--space-24); font-size: 0.85rem; line-height: 1.55; color: var(--h-muted); max-width: 28em; }
.st-step p a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.st-step p a:hover { color: var(--h-text); }
.st-foot { border-top: 1px solid var(--h-border); padding: var(--space-16) var(--space-48) var(--space-16) var(--space-48); }
.st-foot a { display: inline-flex; align-items: center; gap: var(--space-8); font-size: 0.92rem; color: var(--h-muted); text-decoration: none; transition: color 0.15s; }
.st-foot a:hover { color: var(--h-text); }
.st-foot svg { width: 14px; height: 14px; }
.st::after { content: ''; display: block; height: var(--space-96); }

@media (max-width: 760px) {
  .st { --inset: 16px; padding-top: var(--space-48); }
  .st-intro { padding-left: var(--inset); }
  .st-band::before, .st-band::after { display: none; }
  .st-list { padding: var(--space-16) var(--space-16); }
  .st-step { grid-template-columns: 40px minmax(0, 1fr); min-height: 0; }
  .st-step + .st-step::before { left: 40px; right: calc(-1 * var(--space-16)); }
  .st-sep { display: none; }
  .st .st-step p { grid-column: 2; padding-top: var(--space-6); }
  .st-step:not(:last-child) .st-num::after { left: 12px; top: 40px; }
  .st-foot { padding: var(--space-16); }
  .st::after { height: var(--space-48); }
}

/* ── BRAND MARK (concept) ── */
/* The icon (violet rounded square, a dot sending out three arcs) and the wordmark (Hello bold,
   Signal light), shown large, at small sizes, as a favicon and on light and dark grounds. */
.bm-hero {
  display: flex; align-items: center; justify-content: center;
  min-height: 260px;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1.3px);
  background-size: 14px 14px;
  border-bottom: 1px solid var(--h-border);
}
.bm-lockup { display: inline-flex; align-items: center; gap: 0.3em; font-size: 3.2rem; color: var(--h-text); }
.bm-lockup svg { flex-shrink: 0; filter: drop-shadow(0 6px 18px rgba(80,46,228,0.35)); }
.bm-word { font-weight: 400; letter-spacing: -0.035em; line-height: 1; }
.bm-word b { font-weight: 700; }
.bm-lockup--dark { color: #0a0a0a; font-size: 1.6rem; }
.bm-lockup--dark svg { filter: none; }
.bm-lockup--nav { font-size: 1.2rem; }
.bm-lockup--nav svg { filter: none; }

.bm-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.bm-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-20);
  min-height: 180px; padding: var(--space-24) var(--space-16);
  border-left: 1px solid var(--h-border);
}
.bm-cell:first-child { border-left: 0; }
.bm-cell--light { background: #f5f5f5; }
.bm-cell--light .bm-cap { color: #6b6b6b; }
.bm-cap { font-size: 0.78rem; color: var(--h-muted); text-align: center; }
.bm-sizes { display: flex; align-items: flex-end; gap: var(--space-16); }
.bm-tab {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-8) var(--space-14);
  background: var(--bg3); border: 1px solid var(--h-border); border-radius: 10px 10px 0 0;
  font-size: 0.78rem; color: var(--h-text); white-space: nowrap;
}
.bm-tab-dot { display: none; }

@media (max-width: 760px) {
  .bm-lockup { font-size: 2rem; }
  .bm-lockup svg { width: 46px; height: 46px; }
  .bm-grid { grid-template-columns: 1fr 1fr; }
  .bm-cell:nth-child(3) { border-left: 0; }
  .bm-cell:nth-child(n+3) { border-top: 1px solid var(--h-border); }
}


/* ── COMPANIES AND MEDIA ── */
/* From the About page: the companies I've built (logo, role, link | text, tags) and the media coverage table. */
.venture-grid { grid-template-columns: 280px 1fr; }

.venture-left { display: flex; flex-direction: column; gap: var(--space-12); }

.venture-logo {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-6);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.venture-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.venture-company {
  font-size: 1rem;
  font-weight: 700;
  color: var(--h-text);
  letter-spacing: -0.02em;
}

/* Tag component: violet fill, on-accent text, radius-4 */
.venture-role {
  display: inline-block;
  width: fit-content;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-4);
}

.venture-url {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  width: fit-content;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--h-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.venture-url:hover { color: var(--h-text); }

.venture-right { display: flex; flex-direction: column; justify-content: center; }
.cell.venture-right p { max-width: 560px; margin-bottom: var(--space-20); }


.media-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--h-border);
  font-size: 0.85rem;
}

.media-table thead tr { background: var(--bg2); border-bottom: 1px solid var(--h-border); }

.media-table th {
  padding: var(--space-14) var(--space-20);
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h-muted);
}

.media-table tbody tr { border-bottom: 1px solid var(--h-border); transition: background 0.15s; }
.media-table tbody tr:last-child { border-bottom: none; }
.media-table tbody tr:hover { background: var(--bg2); }

.media-table td {
  padding: var(--space-16) var(--space-20);
  color: var(--text);
  line-height: 1.5;
  vertical-align: middle;
}

.media-table th:first-child, .media-table td:first-child { padding-left: var(--space-40); }
.media-table th:last-child, .media-table td:last-child { padding-right: var(--space-40); }

.media-table .media-channel { font-weight: 600; color: var(--h-text); white-space: nowrap; }

.media-type {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-4);
  border: 1px solid var(--h-border);
  color: var(--h-text);
  white-space: nowrap;
}

.media-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--h-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.media-link:hover { color: var(--h-text); }
.venture-right .exp-highlight { background: var(--highlight); border-radius: var(--radius-3); padding: 0 2px; }
.venture-right .exp-tags { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.venture-right .exp-tag {
  font-size: 0.78rem;
  padding: var(--space-5) var(--space-12);
  border-radius: var(--radius-4);
  border: 1px solid var(--h-border);
  color: var(--h-text);
  white-space: nowrap;
  transition: background 0.15s;
}
.venture-right .exp-tag:hover { background: var(--bg3); }

@media (max-width: 960px) {
  .venture-grid { grid-template-columns: 1fr; }
  .media-table th:first-child, .media-table td:first-child { padding-left: var(--space-24); }
  .media-table th:last-child, .media-table td:last-child { padding-right: var(--space-24); }
}
@media (max-width: 720px) {
  /* The table stacks into one block per row */
  .media-table thead { display: none; }
  .media-table, .media-table tbody, .media-table tr, .media-table td { display: block; }
  .media-table tbody tr { padding: var(--space-16) var(--space-24); }
  .media-table td,
  .media-table td:first-child,
  .media-table td:last-child { padding: 0; }
  .media-table td + td { margin-top: var(--space-8); }
}
@media (max-width: 480px) {
  .media-table tbody tr { padding: var(--space-16); }
  .venture-right .exp-tag { white-space: normal; }
}

/* ── STORY ── */
/* From the About page: the story text with quick facts and languages beside it. */
.story-grid { grid-template-columns: 1fr 320px; grid-template-rows: auto 1fr; }
.story-text { grid-row: span 2; }
.story-text .display { margin-bottom: var(--space-28); }
.cell.story-text p { font-size: 0.97rem; line-height: 1.85; max-width: 40em; }
.cell.story-text p + p { margin-top: var(--space-18); }

.fact-list { list-style: none; }

.fact-item {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-10) 0;
  border-top: 1px solid var(--h-border);
  font-size: 0.85rem;
  color: var(--h-text);
}
.fact-item span { color: var(--h-muted); font-size: 0.78rem; }

.fact-icon {
  width: 28px;
  height: 28px;
  border: 1px solid var(--h-border);
  border-radius: var(--radius-4);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
@media (max-width: 960px) {
  .story-grid { grid-template-columns: 1fr 1fr; }
  .story-text { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 480px) {
  .story-grid { grid-template-columns: 1fr; }
}

/* ── CONTENT FLOW (hero concept) ── */
/* Workflow cards on a dot grid, linked by one path; a green trace follows the path and each card turns
   green with a Completed badge as the trace reaches it (home.js draws the path and runs the trace). */
.cf { position: relative; height: 720px; overflow: hidden; background: var(--bg); }
.cf::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1.2px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.cf-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cf-lines path { fill: none; stroke-width: 1; }
.cf-base { stroke: rgba(255,255,255,0.16); }
.cf-trace { stroke: #34d399; transition: opacity 0.6s; }
.cf-dot { fill: #6ee7b7; filter: drop-shadow(0 0 4px #34d399); transition: opacity 0.6s; }
.cf.is-resetting .cf-trace, .cf.is-resetting .cf-dot { opacity: 0; }

.cf-card {
  position: absolute; z-index: 1; width: 280px; padding: 12px 14px 14px;
  background: #141414; border: 1px solid var(--h-border); border-radius: 10px;
  transition: border-color 0.4s;
}
/* connection points where the path enters and leaves the card */
.cf-card::before, .cf-card::after {
  content: ''; position: absolute; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: #141414; border: 1px solid rgba(255,255,255,0.22); transition: border-color 0.4s;
}
.cf-card::before { top: -4px; }
.cf-card::after { bottom: -4px; }
.cf-head { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; font-weight: 500; color: var(--h-text); }
.cf-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.cf-icon svg { width: 13px; height: 13px; }
.cf .cf-sub { margin: 8px 0 0; max-width: none; font-size: 0.78rem; line-height: 1.4; color: var(--h-muted); }
.cf-badge {
  position: absolute; right: 0; top: -30px; padding: 3px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 500;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.3s;
}
.cf-badge--run { color: var(--h-text); background: #1a1a1a; border: 1px solid rgba(255,255,255,0.16); }
.cf-badge--done { color: #6ee7b7; background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.3); }
.cf-spin { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.25); border-top-color: var(--h-text); animation: cf-spin 0.8s linear infinite; }
@keyframes cf-spin { to { transform: rotate(360deg); } }
/* a step runs while the trace waits at it, then completes */
.cf-card.is-running { border-color: rgba(255,255,255,0.28); }
.cf-card.is-running::before { border-color: #34d399; }
.cf-card.is-running .cf-badge--run,
.cf-card.is-done .cf-badge--done { opacity: 1; transform: none; }
.cf-card.is-done { border-color: rgba(52,211,153,0.7); }
.cf-card.is-done::before, .cf-card.is-done::after { border-color: #34d399; }

.cf-copy { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: min(520px, 90%); text-align: center; display: flex; flex-direction: column; align-items: center; }
.cf .cf-title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.04; color: var(--h-text); margin: 0 0 var(--space-16); max-width: none; }
.cf .cf-text { font-size: 1.02rem; line-height: 1.55; color: var(--text); margin: 0 0 var(--space-24); max-width: 30em; }

@media (max-width: 960px) {
  .cf { height: 560px; }
  .cf-card, .cf-lines { display: none; }
}

/* ── SERP (tile visual) ── */
/* a Google search with your result first, outlined and ranked; centred in its box, and the result below it fades out */
.serp {
  position: relative;
  height: 240px;
  margin-bottom: var(--space-28);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-16);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 86%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 86%);
}
.serp-bar {
  display: flex; align-items: center; gap: var(--space-10);
  height: 40px; padding: 0 var(--space-8) 0 var(--space-14);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  background: var(--bg2);
  font-size: 0.8rem;
  color: var(--h-text);
}
.serp-bar svg { width: 15px; height: 15px; flex: none; }
.serp-q { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-mag { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--h-muted); }
.serp-mag svg { width: 13px; height: 13px; }
.serp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-14); }
.serp-item { display: flex; flex-direction: column; gap: 6px; padding: 0 var(--space-4); }
.serp-site { display: flex; align-items: center; gap: var(--space-8); font-size: 0.7rem; color: var(--h-muted); }
.serp-fav { width: 14px; height: 14px; flex: none; border-radius: 50%; background: rgba(255,255,255,0.12); }
.serp-item i:not(.serp-fav) { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); }
.serp-item i.serp-tl { height: 8px; background: rgba(255,255,255,0.14); }
/* your result: outlined and brighter than the rest, with the rank in the accent colour */
.serp-item.is-you { position: relative; padding: var(--space-10) var(--space-14); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-8); background: var(--bg); }
.serp-item.is-you .serp-fav { background: rgba(255,255,255,0.3); }
.serp-item.is-you i.serp-tl { background: rgba(255,255,255,0.32); }
.serp-rank { position: absolute; right: var(--space-12); top: var(--space-10); padding: 1px var(--space-8); border-radius: var(--radius-20); background: rgba(108, 76, 255, 0.28); font-size: 0.68rem; font-weight: 600; color: var(--h-text); }

/* ── AI CHAT (tile visual) ── */
/* a question to an AI assistant and its answer, with your brand as the first, cited recommendation */
.cv {
  position: relative;
  height: 196px;
  margin-bottom: var(--space-28);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-8);
  overflow: hidden;
}
.cv { isolation: isolate; }
/* a grid behind the conversation, fading out towards the edges */
.cv::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 55%, transparent 100%);
}
.cv-q, .cv-a { margin: 0 var(--space-16); }
.cv [data-at] { opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s; }
.cv [data-at].is-on { opacity: 1; transform: none; }
.cv-q {
  align-self: flex-end;
  max-width: 78%;
  padding: var(--space-8) var(--space-14);
  background: var(--bg3);
  border-radius: 16px 16px 4px 16px;
  font-size: 0.82rem;
  color: var(--h-text);
}
.cv-a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--space-10); align-items: start; }
.cv-ai {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--h-border);
  border-radius: 50%;
  color: var(--h-text);
}
.cv-ai svg { width: 14px; height: 14px; }
.cv-body { position: relative; min-height: 120px; }
.cv-dots { position: absolute; left: 0; top: 10px; display: flex; gap: 4px; }
.cv-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--h-muted); animation: cv-dot 1s infinite ease-in-out; }
.cv-dots i:nth-child(2) { animation-delay: 0.15s; }
.cv-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cv-dot { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
.cv-line { display: block; height: 6px; margin: 10px 0 var(--space-12); border-radius: 3px; background: rgba(255,255,255,0.1); }
.cv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.cv-item { display: flex; align-items: center; gap: var(--space-10); height: 28px; font-size: 0.8rem; }
.cv-num { width: 14px; flex: none; font-size: 0.72rem; color: var(--h-muted); }
.cv-item i { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); }
.cv-item.is-you strong { font-weight: 600; color: var(--h-text); background: rgba(108, 76, 255, 0.28); padding: 2px 6px; border-radius: 4px; }
.cv-cite {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--space-6);
  padding: 3px var(--space-8);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-20);
  font-size: 0.7rem;
  color: var(--h-muted);
}
.cv-cite::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #6ee7b7; }
/* on phones the question wraps, so the tile grows instead of cutting off the answer */
@media (max-width: 600px) {
  .cv { height: auto; min-height: 196px; padding-bottom: var(--space-12); }
}
@media (prefers-reduced-motion: reduce) {
  .cv [data-at] { transition: none; }
  .cv-dots i { animation: none; }
}

/* ── LETTERS (tile visual) ── */
/* letters drawn as isometric blocks on a grid: block by block the outlines draw in, then the hatching on
   the tops and sides and the corner points appear (sketch.js adds .is-on). Greyscale; the tile's hover adds the accent. */
.lt-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lt-guide { fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 1; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.lt-ink { fill: none; stroke: rgba(255,255,255,0.42); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lt-hatch { fill: none; stroke: rgba(255,255,255,0.2); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.lt-node { fill: #38383c; opacity: 0; }
/* every face is filled with the background, so blocks in front hide the ones behind them */
.lt-face { fill: var(--bg); }
.lt-ink, .lt-hatch, .lt-node { transition: stroke 0.3s, fill 0.3s; }

.lt.is-on .lt-ink { animation: lt-draw 0.8s ease-out var(--d) forwards; }
.lt.is-on .lt-hatch { animation: lt-fade 0.5s ease-out calc(var(--d) + 0.5s) forwards; }
.lt.is-on .lt-node { animation: lt-fade 0.4s ease-out calc(var(--d) + 0.7s) forwards; }
@keyframes lt-draw { to { stroke-dashoffset: 0; } }
@keyframes lt-fade { to { opacity: 1; } }

a:hover .lt-ink, a:focus-visible .lt-ink { stroke: rgba(185,168,255,0.85); }
a:hover .lt-hatch, a:focus-visible .lt-hatch { stroke: rgba(155,133,255,0.55); }
a:hover .lt-node, a:focus-visible .lt-node { fill: rgba(155,133,255,0.6); }

@media (prefers-reduced-motion: reduce) {
  .lt-ink { stroke-dashoffset: 0; }
  .lt-hatch, .lt-node { opacity: 1; }
  .lt.is-on .lt-ink, .lt.is-on .lt-hatch, .lt.is-on .lt-node { animation: none; }
}

/* ── HORIZON (hero concept) ── */
/* a planet's edge rising from the bottom: a rim that runs through the colours of the places people search, a soft
   glow, and faint vertical light rays that fade out above it, with now and then light falling down one of them.
   The title sits in the dark sky above the arc; below it a row of features and a row with a call to action. */
.hz {
  --hz-rim: linear-gradient(90deg, #f97316 12%, #eab308 32%, #f5f5f4 50%, #2dd4bf 68%, #3b82f6 88%);
  position: relative; isolation: isolate; overflow: hidden;
  container-type: inline-size;   /* the copy is sized by the width of the element, wherever it sits */
  height: clamp(420px, 48vw, 620px);
  display: flex; justify-content: center;
  background: var(--bg);
}
.hz-planet { position: absolute; left: 50%; top: 68%; width: max(125%, 900px); aspect-ratio: 1; transform: translateX(-50%); }
.hz-planet > * { position: absolute; inset: 0; border-radius: 50%; }
/* the rays: thin vertical lines in two rhythms, only in a band just outside the rim */
.hz-rays {
  inset: -280px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, rgba(249,115,22,0.10) 10%, rgba(255,255,255,0.03) 50%, rgba(59,130,246,0.10) 90%);
  -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 280px), #000 calc(100% - 278px), transparent 100%);
  mask-image: radial-gradient(closest-side, transparent calc(100% - 280px), #000 calc(100% - 278px), transparent 100%);
}
.hz-glow { inset: -4px; background: var(--hz-rim); filter: blur(18px); opacity: 0.4; animation: hz-breathe 6s ease-in-out infinite; }
.hz-rim { inset: -1.5px; background: var(--hz-rim); }
.hz-body { background: radial-gradient(ellipse 60% 18% at 50% 0%, rgba(255,255,255,0.035), transparent 70%), var(--bg); }
@keyframes hz-breathe { 50% { opacity: 0.55; } }
/* light falling down a few of the rays, into the rim (the inside of the rays layer is masked away) */
.hz-rays i {
  position: absolute; top: 0; width: 1px; height: 120px;
  background: linear-gradient(transparent, rgba(255,255,255,0.6));
  opacity: 0;
  animation: hz-fall var(--t) linear var(--dl) infinite;
}
@keyframes hz-fall { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 100% { top: 42%; opacity: 1; } }

.hz-copy { position: relative; z-index: 1; align-self: flex-start; margin-top: clamp(100px, 19cqw, 240px); padding: 0 var(--space-16); text-align: center; }
.hz-kicker { display: block; margin-bottom: var(--space-14); font-size: 1rem; color: var(--h-muted); }
.hz .hz-title { margin: 0;   /* .hz in front: page styles for headings in a cell must not win */
  font-size: clamp(2rem, 5.8cqw, 5.4rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1.02; color: var(--h-text); }

/* the features: five columns between hairlines, an icon on top and the text at the bottom */
.hz-feats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--h-border); }
.hz-feat { padding: var(--space-28) var(--space-24) var(--space-32); border-left: 1px solid var(--h-border); }
.hz-feat:first-child { border-left: none; }
.hz-feat svg { display: block; width: 20px; height: 20px; margin-bottom: var(--space-56); color: var(--h-muted); }
.hz-feat h3 { margin: 0 0 var(--space-6); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; color: var(--h-text); }
.hz-feat p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--h-muted); }
/* the call to action: a button in its own row under the features */
.hz-cta { display: flex; justify-content: flex-end; padding: var(--space-24); border-top: 1px solid var(--h-border); }
.hz-cta .hc-btn { display: inline-flex; align-items: center; gap: var(--space-8); }
.hz-cta .hc-btn svg { transition: transform 0.25s; }
.hz-cta .hc-btn:hover svg { transform: translateX(3px); }

@media (max-width: 960px) {
  .hz-feats { grid-template-columns: 1fr 1fr; }
  .hz-feat { border-left: none; border-top: 1px solid var(--h-border); }
  .hz-feat:nth-child(even) { border-left: 1px solid var(--h-border); }
  .hz-feat:nth-child(-n+2) { border-top: none; }
  .hz-feat:last-child { grid-column: 1 / -1; }
  .hz-feat svg { margin-bottom: var(--space-24); }
}
@media (max-width: 560px) {
  .hz-feats { grid-template-columns: 1fr; }
  .hz-feat:nth-child(even) { border-left: none; }
  .hz-feat:nth-child(2) { border-top: 1px solid var(--h-border); }
}

@media (prefers-reduced-motion: reduce) { .hz-glow { animation: none; } .hz-rays i { display: none; } }

/* ── SIGNAL RADAR (hero concept) ── */
/* Concentric rings with a violet sweep turning once every 10s; signal cards sit around the copy, and each card's
   coloured dot lights up as the sweep's leading edge passes it (home.js sets each dot's delay from its angle). */
.sr { --sweep: 10s; position: relative; height: 720px; overflow: hidden; background: var(--bg); }
.sr-rings, .sr-sweep { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.sr-rings { width: 1340px; height: 1340px; -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 68%); mask-image: radial-gradient(circle, #000 40%, transparent 68%); }
.sr-rings i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,0.07); border-radius: 50%; }
.sr-sweep {
  width: 1340px; height: 1340px; border-radius: 50%;
  /* the bright side is the leading edge, at 90deg: pointing right before any rotation */
  background: conic-gradient(from 0deg, transparent 0deg, transparent 40deg, rgba(124,92,255,0.16) 90deg, transparent 90.5deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 58%); mask-image: radial-gradient(circle, #000 8%, transparent 58%);
  animation: sr-turn var(--sweep) linear infinite;
}
.sr-beam { position: absolute; left: 50%; top: 50%; width: 50%; height: 1px; background: linear-gradient(to right, rgba(155,133,255,0.9), rgba(155,133,255,0)); transform-origin: 0 50%; }
@keyframes sr-turn { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

.sr-card {
  position: absolute; z-index: 1; width: 210px; min-height: 124px; padding: 14px 16px;
  background: rgba(20,20,20,0.92); border: 1px solid var(--h-border); border-radius: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.sr-card--dim .sr-value { color: var(--h-muted); }
.sr-label { font-size: 0.75rem; color: var(--h-muted); }
.sr-value { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--h-text); }
.sr-dot {
  position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--c); opacity: 0.45; box-shadow: 0 0 0 3px rgba(10,10,10,0.9);
  animation: sr-blip var(--sweep) ease-out infinite; animation-delay: var(--hit, 0s);
}
@keyframes sr-blip {
  0% { opacity: 1; transform: scale(1.7); box-shadow: 0 0 0 3px rgba(10,10,10,0.9), 0 0 12px 4px var(--c); }
  12%, 100% { opacity: 0.45; transform: none; box-shadow: 0 0 0 3px rgba(10,10,10,0.9); }
}
.sr-card[style*="left:"] .sr-dot { right: -18px; }
.sr-card[style*="right:"] .sr-dot { left: -18px; }
.sr-spark { width: 100%; height: 40px; margin-top: auto; overflow: visible; }
.sr-spark polyline { fill: none; stroke: #4f8cff; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sr-spark--soft polyline { stroke: #8fb2ff; opacity: 0.7; }
.sr-bars { display: flex; align-items: flex-end; gap: 6px; height: 46px; margin-top: auto; }
.sr-bars span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; }
.sr-bars i { display: block; border-radius: 2px; background: #6d4bff; }
.sr-bars i:nth-child(1) { background: rgba(109,75,255,0.3); }
.sr-bars i:nth-child(2) { background: rgba(109,75,255,0.6); }
.sr-progress { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.sr-progress i { display: block; height: 5px; border-radius: 3px; background: rgba(255,79,139,0.35); }
.sr-progress i:nth-child(3) { background: #ff4f8b; }

.sr-copy { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); z-index: 2; width: min(560px, 90%); text-align: center; display: flex; flex-direction: column; align-items: center; }
/* a dark pool behind the copy, deepest around the buttons, so rings and sweep fade out there */
.sr-copy::before { content: ''; position: absolute; inset: -90px -150px -110px; z-index: -1; background: radial-gradient(closest-side at 50% 58%, var(--bg) 62%, rgba(10,10,10,0.7) 80%, transparent); }
.sr-pill { font-size: 0.78rem; padding: 5px 12px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; color: var(--h-text); margin-bottom: var(--space-20); background: var(--bg); }
.sr .sr-title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.04; color: var(--h-text); margin: 0 0 var(--space-16); max-width: none; }
.sr .sr-sub { font-size: 1.02rem; line-height: 1.55; color: var(--text); margin: 0 0 var(--space-24); max-width: 30em; }
.sr-actions { display: flex; gap: var(--space-10); }

@media (max-width: 960px) {
  .sr { height: 560px; }
  .sr-card { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-sweep, .sr-dot { animation: none; }
  .sr-dot { opacity: 1; }
}