/* CLIXHOUSE website: style/parts.css
   The blocks (black slabs, cream cards, black pills), the header and footer,
   and each page's layout. Phone first; the computer layout starts at 1000 px.

   The crew stand on block tops (data-perch). Every perch meant to be stood on
   has clear space above it, --room tall (--room-big for Big), either as a gap
   or beside the block before it; they never cover words. The crew engine sets
   `transform` on perches (sag, tilt), so hover effects here use `scale`, never
   `transform`, and nothing transitions `transform`. */

/* ------------------------------------------------------------------ blocks */

.slab {
  width: fit-content;
  max-width: 100%;
  background: var(--noche);
  color: var(--papel);
  border-radius: var(--r-slab);
}
.slab:is(h1, h2) { padding: 0.3em 0.46em 0.22em; }
h1.slab { font-size: var(--fs-h1); }
h2.slab { font-size: var(--fs-h2); }
/* display type at card and step sizes */
:is(.group-title, .run-you, .bigger-card h2, .mini-steps li, .step .slab, .promise-slab, .menu-panel a) {
  letter-spacing: var(--ls-display-small);
}

.card {
  background: var(--papel);
  color: var(--noche);
  border-radius: var(--r-card);
  padding: clamp(1.375rem, 1rem + 1.6vw, 2.5rem);
}

.kicker {
  margin-bottom: 0.75rem;
  font-size: var(--fs-small);
  font-weight: 750;
  letter-spacing: 0.01em;
}
.lead {
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.4;
}

/* pills: black, cream words; the paper one is for the language switch */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 2.75rem;
  padding: 0.5em 1.15em;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--noche);
  color: var(--papel);
  font: 650 1rem/1.2 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: scale 0.18s ease;
}
.pill:hover { scale: 1.04; }
.pill-paper { background: var(--papel); color: var(--noche); }
.pill-go {
  min-height: 3.25rem;
  padding-inline: 1.35em 1.1em;
  font-size: var(--fs-body);
}
.pill .icon { width: 1.25em; height: 1.25em; flex: none; }

/* the WhatsApp button: where every page ends, and where the crew gather */
.wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  max-width: 26rem;
  min-height: 4.75rem;
  padding: 0.75em 1.4em;
  border-radius: var(--r-pill);
  background: var(--noche);
  color: var(--papel);
  font: 700 clamp(1.125rem, 1rem + 0.6vw, 1.5rem)/1.15 var(--font-text);
  text-decoration: none;
  transition: scale 0.18s ease;
}
.wa:hover { scale: 1.03; }
.wa .icon-wa { width: 2.2em; height: 2.2em; flex: none; }

/* ------------------------------------------------------------------ header */

/* a yellow band above the crew's layer (z-index 5): whoever drops in from the top
   passes behind it, so the menu is never covered, even mid-fall */
.site-header {
  --pad-x: max(var(--gutter), (100% - var(--wrap)) / 2);
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--head-h);
  padding-inline: var(--pad-x);
  background: var(--luz);
}
.brand {
  margin-right: auto;
  padding-block: 0.6875rem;   /* 22 px logo + 2 x 11 = a 44 px touch target; the 72 px header centres it */
}
.brand img { width: auto; height: 1.375rem; }
/* on the home page the hero is the name, drawn big; the small one steps aside */
[data-page="home"] .brand { visibility: hidden; }

.nav-wide { display: none; }
.nav-wide ul {
  display: flex;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-wide a {
  display: block;
  padding: 0.55em 0.85em;
  border-radius: var(--r-pill);
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
}
.nav-wide a:hover { background: var(--papel); }

.lang, .menu > summary { min-height: 2.75rem; padding-inline: 1.05em; font-size: 1rem; font-weight: 700; }

.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-close { display: none; }
.menu[open] .menu-open { display: none; }
.menu[open] .menu-close { display: inline; }
.menu-panel {
  position: absolute;
  top: calc(100% - 0.25rem);
  left: var(--pad-x);
  right: var(--pad-x);
  padding: 0.625rem;
  border-radius: var(--r-card);
  background: var(--papel);
}
.menu-panel ul {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-panel a {
  display: block;
  padding: 0.5em 0.6em 0.4em;
  border-radius: var(--r-slab);
  font: 900 1.625rem/1 var(--font-display);
  text-transform: uppercase;
  text-decoration: none;
}
.menu-panel a:hover { background: var(--luz); }
/* Open, the menu is a layer of its own: the page under it goes dark and stops scrolling. (The cream
   panel sat on the pages' cream cards and read as one shape, and the page scrolled on under it:
   the review of 2026-09-27.) The dark is drawn inside the header's layer, under its pills and the
   panel and over everything else, the crew included; a tap on it closes the menu (story/menu.js). */
@media (max-width: 999px) {
  .menu[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(17, 17, 17, 0.76);   /* --noche; lighter, the yellow under it went a muddy olive */
    touch-action: none;
  }
  .menu-panel { overscroll-behavior: contain; }
  html:has(.menu[open]) { overflow: hidden; }
}

/* the page you're on: a black pill in the menu, hovered too (after a click the pointer is
   still on it as the page opens, and the cream hover fill would blank its cream words) */
:is([data-page="home"] [data-nav="home"], [data-page="build"] [data-nav="build"],
    [data-page="how"] [data-nav="how"], [data-page="work"] [data-nav="work"],
    [data-page="offers"] [data-nav="offers"], [data-page="studio"] [data-nav="studio"],
    [data-page="contact"] [data-nav="contact"]),
:is([data-page="home"] [data-nav="home"], [data-page="build"] [data-nav="build"],
    [data-page="how"] [data-nav="how"], [data-page="work"] [data-nav="work"],
    [data-page="offers"] [data-nav="offers"], [data-page="studio"] [data-nav="studio"],
    [data-page="contact"] [data-nav="contact"]):hover {
  background: var(--noche);
  color: var(--papel);
}

@media (min-width: 1000px) {
  .brand img { height: 1.75rem; }
  .nav-wide { display: block; margin-right: 0.5rem; }
  .menu { display: none; }
  .lang { min-height: 2.75rem; font-size: 1rem; }
}

/* ------------------------------------------------------------------ rhythm */

/* every section opens with the crew's room above its first block */
.section, .page-top { padding-top: var(--room); }
main > :last-child { padding-bottom: var(--room-big); }   /* room on the floor, Big's size */

.page-top .lead { margin-top: var(--stack); }


/* ------------------------------------------------------------------ home */

.hero {
  position: relative;
  min-height: 26rem;
  height: calc(100vh - var(--head-h));
  height: calc(100svh - var(--head-h));
}
/* "Software studio" under the name the crew engine draws (crew/hero.js layout()), smaller than the
   brand lockup's so it reads as a signature: 0.44 of the name's width, centred under it; and under
   that the brand's line, NADA MENOS (crew/line.js). The geometry mirrors the engine's: --u is one
   scene unit in px (its hs), wide and narrow; the scene, from the top of the crew on the name to the
   line's baseline (line.js LOW), is centred in the hero, which puts the name's baseline --baseline
   down. The hero is tall enough from the start for all of it, so nothing moves when they appear. */
.hero { container-type: inline-size; min-height: max(26rem, calc(clamp(300px, 90vw, 1200px) * 900 / 1480)); }
:is(.hero-tag, .hero-line) {
  --u: calc(clamp(300px, 90cqw, 1200px) / 1480);         /* stage.js: clamp(VW*0.9, 300, 1200)/1480 */
  --name-cx: calc(50% + 33 * var(--u));                     /* HX = VW/2 - 440 hs; the name is 946 wide */
  --baseline: calc(50% + 48 * var(--u));                    /* HY = top + H/2 + (470 - LOW)/2 hs */
  position: absolute;
  left: var(--name-cx);
  translate: -50% 0;
}
.hero-tag {
  top: calc(var(--baseline) + 50 * var(--u));
  width: calc(416 * var(--u));
  height: auto;
  overflow: visible;
  pointer-events: none;
}
/* the line: its capitals top 80 under the signature's foot (line.js GAP) and are 105 tall (CAP), so its
   font size is 150; with line-height 0.7 its box is exactly the capitals (CLIXHOUSE Display: cap height
   700 of 1000), and its letters squash on their baseline, the box's bottom. One letter to a box
   (line.js split), each falling on its own. */
.hero-line {
  top: calc(var(--baseline) + 269 * var(--u));
  font-family: var(--font-display);
  font-size: calc(150 * var(--u));
  font-weight: 900;
  line-height: 0.7;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  white-space: nowrap;
  text-wrap: nowrap;
}
.hero-line .word { display: inline-block; white-space: nowrap; }
.hero-line .letter { display: inline-block; transform-origin: 50% 100%; }
@container (max-width: 720px) {                             /* hero.js NARROW: the name alone, centred */
  :is(.hero-tag, .hero-line) {
    --u: min(88cqw / 946, 0.55px);
    --name-cx: 50%;
    --baseline: calc(50% + 64.5 * var(--u));                /* HY = top + H/2 + (503 - LOW)/2 hs */
  }
}
/* no scripts: the drawn lockup (.hero-still, below: min(80vw, 55rem) wide, 729 x 360, centred) shows
   in the signature's place, and the line goes under it */
@media (scripting: none) {
  .hero-tag { display: none; }
  .hero-line { top: calc(50% + min(80vw, 55rem) * 180 / 729 + 1.5rem); --name-cx: 50%; }
}
/* !important: the fallback below is an animation, and an animation beats a plain rule; without it a
   first visit whose crew came after the fallback showed the whole signature, then wiped it to write */
.hero-tag.sign-wait { visibility: hidden !important; }
/* the name above them is drawn by the crew engine: the signature and the line wait for its layer, so
   the page never shows them without the name (coming back to home, crew/welcome.js: all at once). If
   the engine never comes, they show anyway after 5 s (story/sign.js WAIT_FOR_CREW, the same wait: a
   phone on 4G draws the crew near 2 s, so a shorter wait here would show them alone). */
@media (scripting: enabled) {
  [data-crew-root]:not(:has(> svg)) :is(.hero-tag, .hero-line) { visibility: hidden; animation: hero-tag-late 0s 5s forwards; }
}
@keyframes hero-tag-late { to { visibility: visible; } }

/* the signing (story/sign.js adds .signing once a visit): the name falls in and the crew arrive
   (Big lands last, about 3.9 s in, and the name jumps); the words write on left to right from
   2.2 s, once the name has landed, in 1.25 s; the swash last. Michael: "not too delayed". The pens are masks: drawn in full unless .signing plays them. */
.sign-pen { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.signing .sign-pen { animation: sign-write 1.25s cubic-bezier(0.42, 0.1, 0.5, 0.95) 2.2s both; }
.signing .sign-pen-swash { animation: sign-write 0.45s cubic-bezier(0.3, 0.6, 0.4, 1) 3.45s both; }
@keyframes sign-write { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .signing .sign-pen { animation: none; } }
.hero-still {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(80vw, 55rem);
  translate: -50% -50%;
}

/* home: one big statement a screen, at most one short line under it, and the crew's room.
   The crew draw the eye; the words answer with weight: the display face carries the key
   lines, reading lines are big and heavy, nothing is small or thin. */
.slab.statement { font-size: var(--fs-statement); }
.read {
  max-width: 20em;
  margin-top: var(--stack);
  font-size: var(--fs-read);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.pill-go { min-height: 3.5rem; font-size: 1.125rem; font-weight: 700; }
.wa { font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.625rem); }

/* how we work: the five steps are the statement, going down like stairs */
.how-grid { display: grid; justify-items: start; }
.mini-steps {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  width: 100%;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.mini-steps li {
  counter-increment: step;
  padding: 0.55em 0.8em 0.45em;
  font: 900 clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem)/1 var(--font-display);
  text-transform: uppercase;
}
.mini-steps li::before { content: counter(step); margin-right: 0.5em; color: var(--luz); }
.mini-steps li:nth-child(2) { margin-left: 5%; }
.mini-steps li:nth-child(3) { margin-left: 10%; }
.mini-steps li:nth-child(4) { margin-left: 15%; }
.mini-steps li:nth-child(5) { margin-left: 20%; }
.how-grid .pill-go { margin-top: 2rem; }

.offer-card h2 { font-size: var(--fs-statement); max-width: 12em; }
.offer-card .pill-go { margin-top: calc(var(--stack) * 1.4); }

/* the work: four phones on a shelf */
.work-grid { display: grid; justify-items: start; }
.shelf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 0.75rem;
  width: 100%;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}
.shelf li:nth-child(2) { margin-bottom: 1.5rem; }
.shelf li:nth-child(3) { margin-bottom: 0.5rem; }
.shelf li:nth-child(4) { margin-bottom: 2.25rem; }
.work-link { margin-top: 2rem; }

@media (min-width: 1000px) {
  .mini-steps li:nth-child(2) { margin-left: 7%; }
  .mini-steps li:nth-child(3) { margin-left: 14%; }
  .mini-steps li:nth-child(4) { margin-left: 21%; }
  .mini-steps li:nth-child(5) { margin-left: 28%; }
  .how-grid .pill-go { margin: 2.25rem 0 0 28%; }   /* under step 5, not alone at the far right */

  /* the offer in two columns: the promise big on the left, the line and the button on the right,
     sitting on its last line (at 84% wide with everything stacked, the right half was empty) */
  .offer-card {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: 1fr auto;
    column-gap: clamp(2.5rem, 1rem + 3vw, 4.5rem);
    align-items: end;
    padding: 3.5rem 3.75rem;
  }
  .offer-card h2 { grid-row: 1 / span 2; }
  .offer-card .read { grid-column: 2; grid-row: 1; margin-top: 0; }
  .offer-card .pill-go { grid-column: 2; grid-row: 2; justify-self: start; }

  .work-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 4rem;
    align-items: end;
  }
  .work-words { grid-column: 1; grid-row: 1; }
  .shelf { grid-column: 2; grid-row: 1 / span 2; gap: 1.25rem; margin: 0; }
  .work-link { grid-column: 1; grid-row: 2; align-self: end; }
}

/* the words land as you scroll to them, the way the letters of the name do: a short drop, a
   small squash, settle (story/story.js adds .story-on and .landed; without it, all is there).
   Only the separate translate/rotate/scale properties move, never `transform`, which the crew
   use on the blocks they stand on; and before landing only opacity waits, never position. */
@keyframes story-land {
  0%   { opacity: 0; translate: 0 calc(var(--drop) * -1); rotate: var(--tilt); scale: 1 1;
         animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45); }
  46%  { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1 1;
         animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  62%  { scale: 1.05 0.9; }
  82%  { scale: 0.99 1.015; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1 1; }
}
@keyframes story-land-heavy {
  0%   { opacity: 0; translate: 0 calc(var(--drop) * -1); scale: 0.98 1.04;
         animation-timing-function: cubic-bezier(0.6, 0, 0.95, 0.4); }
  52%  { opacity: 1; translate: 0 0; scale: 1 1;
         animation-timing-function: cubic-bezier(0.15, 0.75, 0.3, 1); }
  66%  { scale: 1.08 0.8; }
  84%  { scale: 0.985 1.025; }
  100% { opacity: 1; translate: 0 0; scale: 1 1; }
}
/* A block the crew stand on (or one holding it) drops only a few pixels: its words sit about
   15 px under its top edge, and a crew member may be arriving on that edge as it lands
   (tools/website/crew/keepclear.py counts a word rising into a sole as a crossing). The squash only
   ever presses down. Lines nobody stands on drop from higher up. */
.story-on [data-land]:not(.landed) { opacity: 0; }
.story-on [data-land].landed:not(.settled) {
  --drop: 0.45rem;
  --tilt: -0.6deg;
  transform-origin: 50% 100%;
  animation: story-land 620ms both;
}
.story-on [data-land].landed:nth-child(even):not(.settled) { --tilt: 0.6deg; }
.story-on .read[data-land].landed:not(.settled) { --drop: 1.75rem; --tilt: 0deg; }
.story-on [data-land="heavy"].landed:not(.settled) { --drop: 1.25rem; animation: story-land-heavy 900ms both; }
@media (prefers-reduced-motion: reduce) {
  .story-on [data-land] { opacity: 1 !important; animation: none !important; }
}

/* ------------------------------------------------------------------ the end of every page */

.end-grid { display: grid; justify-items: start; gap: var(--room); }
.end .lead { margin-top: var(--stack); max-width: var(--measure); }
.end-bare .wrap { display: flex; justify-content: center; }

@media (min-width: 1000px) {
  .end-grid { grid-template-columns: 1fr auto; align-items: end; gap: 3rem; }
  .wa { width: auto; min-height: 6rem; padding-inline: 1.9em 2.3em; white-space: nowrap; }
}

/* ------------------------------------------------------------------ what we build: the run */

/* An owner rattling off what they want: quick cream lines, never bubbles. The
   first three get their name, a small black tag right under the line; then the
   names stop and the lines keep coming, untagged (the empty black tags read as
   broken buttons: the review of 2026-09-27; the peak says it in words). The
   peak lands on a black slab under them. The run staggers inside the page: a
   line steps in and narrows, it never runs past the gutter (its corners were
   cut by the screen's edge on a phone). */

.run { margin: 0; padding: 0; list-style: none; }
.say-line {
  width: fit-content;
  max-width: 100%;
  padding: 0.6em 0.95em 0.55em;
  border-radius: var(--r-slab);
  font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 520;
  line-height: 1.28;
  text-wrap: balance;
}
.say-name {
  width: fit-content;
  margin: 0.4rem 0 0 1rem;
  padding: 0.28em 0.8em;
  border-radius: var(--r-pill);
  background: var(--noche);
  color: var(--papel);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.25;
}
.peak {
  width: 100%;
  padding: clamp(1.4rem, 1rem + 3vw, 3.5rem) clamp(1.25rem, 0.9rem + 3vw, 3.75rem) clamp(1.25rem, 0.9rem + 2.8vw, 3.25rem);
  font: 900 clamp(1.875rem, 1.1rem + 3.4vw, 4.5rem)/1.02 var(--font-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.run-you { padding: 0.45em 0.6em 0.35em; font: 900 var(--fs-h2)/1 var(--font-display); text-transform: uppercase; }

/* home: the run on a phone. The heading's line stays narrow so the first
   owner line (on the right) has room above it for its host. */
.run-head .lead { max-width: 11em; margin-top: var(--stack); }
.run-named {
  display: grid;
  gap: 0.9rem;
  margin: var(--room) 0 0;   /* the first line's host stands in this gap */
}
.run-named .say { display: flex; flex-direction: column; align-items: flex-start; width: 74%; }
.say-name { white-space: nowrap; }
/* the lines on the right: against the gutter, their tag under their right end */
.run-named .say:nth-child(odd) { align-items: flex-end; margin-left: auto; }
.run-named .say:nth-child(odd) .say-name { margin: 0.4rem 1rem 0 0; }
.run-named .say:nth-child(2) { margin-top: 0.75rem; }   /* Big: a little more room beside the line before */
.run-open {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.run-open .say-line { font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem); }
.run-open .say:nth-child(2) { margin-left: 10%; }
.run-open .say:nth-child(3) { margin-left: 3%; }
.run-open .say:nth-child(4) { margin-left: 16%; }
.run-open .say:nth-child(5) { margin-left: 7%; }
.run-section .peak { margin-top: var(--room); }
.run-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem 1.25rem;
  margin-top: 5.5rem;
}

/* the page: five groups, each a heading slab, its lines stepping in, and its
   name after them (the last two have none yet) */
.groups { display: grid; gap: var(--room); }
.group-title { font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.75rem); }
.group .run {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  margin: 1rem 0 0;
}
.group .say:nth-child(2) { margin-left: 8%; }
.group .say:nth-child(3) { margin-left: 16%; }
.group .say-name { margin-top: 0.8rem; }
.group:nth-child(3) { margin-top: calc(var(--room-big) - var(--room)); }   /* Big's group */

@media (min-width: 1000px) {
  /* home: the heading on the left; the three named lines step down to the right
     and run into the edge; the rest tumble down under them; the peak takes the
     width they cover, with "¿Y usted?" beside its end */
  .run-wrap {
    display: grid;
    grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
    column-gap: 2rem;
    align-items: start;
  }
  .run-head { grid-column: 1; grid-row: 1; }
  .run-head .lead { max-width: 14em; }
  .run-named {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 1.5rem 0 0;   /* inside the page: on a wide screen the spill to the edge went 360 px astray (Michael, 2026-09-27) */
  }
  .run-named .say { width: fit-content; max-width: 23rem; align-items: flex-start; }
  .run-named .say:nth-child(1) { align-self: flex-start; align-items: flex-start; margin-left: 0; }
  .run-named .say:nth-child(1) .say-name { margin: 0.4rem 0 0 1rem; }
  .run-named .say:nth-child(2) { align-self: center; margin-top: 0; }
  .run-named .say:nth-child(3) { align-self: flex-end; }
  .run-open {
    grid-column: 1 / -1;
    grid-row: 3;
    gap: 0.6rem;
    margin-top: 2.5rem;
  }
  .run-open .say:nth-child(2) { margin-left: 12%; }
  .run-open .say:nth-child(3) { margin-left: 24%; }
  .run-open .say:nth-child(4) { margin-left: 36%; }
  .run-open .say:nth-child(5) { margin-left: 48%; }
  .run-section .peak { grid-column: 1 / -1; grid-row: 4; width: calc(100% - 23rem); margin-top: 2.5rem; }
  .run-end {
    grid-column: 1 / -1;
    grid-row: 4;
    align-self: end;
    flex-direction: column;
    align-items: flex-end;
    width: 21rem;
    margin: 0 0 0 auto;
  }
  .run-you { font-size: 3rem; white-space: nowrap; }

  /* the page: two columns, the right one set lower, every heading with its
     host's room above it; the lines step in */
  .groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 2.5rem 4rem;
  }
  .group:nth-child(3) { margin-top: 0; }
  .group:nth-child(even) { margin-top: calc(var(--room-big) - 2rem); }
  .group .say:nth-child(2) { margin-left: 2.5rem; }
  .group .say:nth-child(3) { margin-left: 5rem; }
  .peak-section .peak { font-size: clamp(2rem, 1rem + 4vw, 5.5rem); }
}

/* the run on home: the owner lines are statements, the three names are stamped in the display
   face */
.say-line {
  padding: 0.55em 0.7em 0.45em;
  font: 900 var(--fs-say)/1.04 var(--font-display);
  letter-spacing: var(--ls-display-small);
  text-transform: uppercase;
}
.run-open .say-line { font-size: var(--fs-say-open); }
.say-name {
  padding: 0.5em 0.8em 0.4em;
  font: 900 var(--fs-tag)/1.05 var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
[data-page="home"] .run-head .read { max-width: 20em; }   /* two lines: whoever drops in past it is over it only briefly */
@media (min-width: 1000px) {
  [data-page="home"] .run-named .say { max-width: 28rem; }
  [data-page="home"] .run-head .read { max-width: 13em; }
  [data-page="home"] .run-section .peak { width: calc(100% - 26rem); }
  [data-page="home"] .run-end { width: 24rem; }
  [data-page="home"] .run-you { font-size: 4rem; }
  [data-page="home"] .run-head .slab.statement { font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
  .pill-go { min-height: 3.75rem; font-size: 1.25rem; }
}
@media (max-width: 999px) {
  /* on a phone the pill is as wide as its words, on one line, and sits at the right: the lane on
     its left is wider than Big, so nobody on the way down to the floor has to pass over it
     (tools/website/crew/keepclear.py, en/work/ as iPhone 13) */
  .wa {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    gap: 0.6em;
    padding-inline: 1.45em 1.75em;   /* room at the ends (Michael, 2026-09-27: "too close to the edges", twice) */
    font-size: 1.0625rem;
    white-space: nowrap;
  }
  .wa .icon-wa { width: 1.75em; height: 1.75em; }
}

/* ------------------------------------------------------------------ how we work */

.steps {
  margin-block: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.step { counter-increment: step; }
.step .slab {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  padding: 0.6em 0.8em 0.5em;
  font-size: var(--fs-h3);
}
.step .slab::before { content: counter(step); color: var(--luz); font-size: 1.35em; line-height: 0.8; }
.step p { margin-top: 1rem; max-width: var(--measure); }

/* on a phone every step reads the full width (at three-quarters, left and right in turn, the words
   used barely 60% of the screen: the review of 2026-09-27), so each step's host stands in a gap of
   their own size above its slab instead of beside the step before */
@media (max-width: 999px) {
  .steps { display: grid; gap: var(--room); }
  .step:nth-child(5) { margin-top: calc(var(--room-big) - var(--room)); }   /* Big's step */
}

@media (min-width: 1000px) {
  .steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    gap: 1.25rem;
  }
  .step .slab {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35em;
    width: 100%;
    min-height: 7.5rem;
    padding: 0.7em 0.75em 0.75em;
    font-size: clamp(1.375rem, 0.6rem + 1.3vw, 1.875rem);
  }
  .step .slab::before { font-size: 1.6em; }
  .step p { margin-top: 1.25rem; padding-inline: 0.25rem; }
  .step:nth-child(2) { margin-top: 6rem; }
  .step:nth-child(3) { margin-top: 12rem; }
  .step:nth-child(4) { margin-top: 18rem; }
  .step:nth-child(5) { margin-top: 24rem; }
}

/* How we work, the close: not a slab but a moment. Step one again, as a small black block like the
   steps above (a spot for the Talker, who listens), the words big on the yellow, the button. */
.how-end-in { display: grid; justify-items: center; text-align: center; }
.how-end-step {
  display: grid;
  place-items: center;
  width: clamp(4.5rem, 3.6rem + 3vw, 6.5rem);
  height: clamp(3.5rem, 3rem + 2vw, 4.75rem);
  border-radius: var(--r-slab);
  background: var(--noche);
  color: var(--luz);
  font: 900 clamp(2rem, 1.5rem + 2vw, 3.25rem)/1 var(--font-display);
}
.how-end-step::before { content: "1"; }
.how-end-title { max-width: 11em; margin-top: 1.4rem; font-size: var(--fs-statement); }
.how-end .wa { margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0; }

/* ------------------------------------------------------------------ the work: the proof */

/* Each piece is a moment: the phone, the name big, what it is, what we built, what it does for
   the owner (the punch line, on a black slab), and the live link. One list, left and right in turn,
   every name at one size and every phone drawing at one size: the tier pill says how deep the work
   went (the flagships, the website, the calling cards were three sizes of each: the review of
   2026-09-27). */
.proofs { display: grid; gap: var(--room); }
.proof { display: grid; gap: 1.75rem; }
.proof-pic { width: min(64%, 17rem); }
.proof-pic img { width: 100%; }
.proof:nth-child(even) .proof-pic { margin-left: auto; }
.proof-tier {
  width: fit-content;
  margin-bottom: 0.9rem;
  padding: 0.5em 0.8em 0.4em;
  border-radius: var(--r-pill);
  background: var(--noche);
  color: var(--papel);
  font: 900 var(--fs-tag)/1.05 var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.proof-name { font-size: var(--fs-h2); }
/* the name holds the word CLIXHOUSE: it is never set in the display face (BRIEF §5) */
.plain-name {
  font-family: var(--font-text);
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-transform: none;
}
.proof-trade {
  width: fit-content;
  margin-top: 1rem;
  padding: 0.35em 0.9em;
  border-radius: 1.1em;
  background: var(--papel);
  font-size: var(--fs-small);
  font-weight: 750;
  line-height: 1.3;
}
.proof-text { max-width: var(--measure); margin-top: 1.1rem; }
.proof-gain {
  width: auto;
  max-width: 30rem;
  margin-top: 1.5rem;
  padding: 0.8em 1em 0.85em;
  font-size: var(--fs-lead);
  font-weight: 750;
  line-height: 1.28;
}
.proof-link { margin-top: 1.5rem; }

@media (min-width: 1000px) {
  .proofs { gap: 9rem; }
  .proof {
    grid-template-columns: 22rem minmax(0, 1fr);
    align-items: start;
    gap: 4.5rem;
  }
  .proof:nth-child(even) { grid-template-columns: minmax(0, 1fr) 22rem; }
  .proof:nth-child(even) .proof-pic { order: 2; margin-left: 0; }
  .proof-pic { width: 100%; }
  .proof-words { max-width: 40rem; padding-top: 1rem; }
  .proof:nth-child(even) .proof-words { justify-self: end; }
}

/* ------------------------------------------------------------------ offers */

.offers-grid { display: grid; gap: var(--room-big); }
.package h2 { margin: 0.25rem 0 1.5rem; font-size: var(--fs-h2); }
.package-items {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.package-items li {
  display: flex;
  align-items: baseline;
  gap: 0.65em;
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.25;
}
.package-items li::before {
  content: "";
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--noche);
}
.promise-slab {
  width: auto;
  margin-top: 1.75rem;
  padding: 0.8em 0.9em 0.7em;
  font: 900 var(--fs-h3)/1.05 var(--font-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.fine { margin-top: 1rem; font-size: var(--fs-small); max-width: var(--measure); }
.bigger-card h2 { margin-bottom: 0.8rem; font-size: var(--fs-h3); }

.money-slab {
  display: grid;
  gap: 1rem;
  width: 100%;
  padding: clamp(1.75rem, 1rem + 3vw, 4rem);
}
.money-slab h2 { font-size: var(--fs-h2); }
.money-slab p { max-width: var(--measure); }

@media (min-width: 1000px) {
  .offers-grid {
    grid-template-columns: 7fr 5fr;
    align-items: start;
    gap: 2rem;
  }
  .package { padding: 3rem; }
  .bigger-card { margin-top: var(--room-big); padding: 2.5rem; }
  .money-slab { grid-template-columns: 1fr 1.25fr; column-gap: 4rem; align-items: start; }
  .money-slab h2 { grid-row: span 2; }
}

/* ------------------------------------------------------------------ the studio */

.who-name {
  max-width: 16em;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.who-card { display: grid; gap: 0.9rem; margin-top: var(--room); }

.story-grid { display: grid; gap: var(--room); }
.story-card { display: grid; gap: 1rem; }
/* the name is drawn, never typed in the display face: these lines stay in Inter */
.story-end { font-size: var(--fs-h3); font-weight: 850; letter-spacing: -0.01em; }

.essence-slab {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  padding: clamp(2rem, 1rem + 5vw, 6rem) clamp(1.5rem, 1rem + 4vw, 6rem);
  font-size: clamp(1.375rem, 1rem + 1.5vw, 2.25rem);
  font-weight: 600;
  line-height: 1.3;
}
.essence-all { margin-top: 1.25rem; }
.essence-tag {
  margin-top: 1.5rem;
  color: var(--luz);
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.5rem);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

@media (min-width: 1000px) {
  .who-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
    gap: 4rem;
  }
  .who-card { padding: 2.5rem; }
  .story-grid {
    grid-template-columns: 1fr 1.25fr;
    align-items: start;
    gap: 4rem;
  }
  .story-card { margin-top: var(--room); padding: 3rem; }
}

/* ------------------------------------------------------------------ contact */

.contact-top .wa { margin-top: var(--room); }
.contact-grid { display: grid; gap: var(--room); }
.qr-card { display: none; }
.number-card { display: grid; align-content: start; gap: 0.35rem; max-width: 34rem; }
.number {
  margin-block: 0.15rem 0.6rem;
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  user-select: all;
}
/* the number is also the tap: 44 px tall to a thumb, drawn exactly as before (padding given back) */
.number a { display: inline-block; padding-block: 0.4em; margin-block: -0.4em; }
.number-card .from { margin-top: 0.6rem; }

@media (min-width: 1000px) {
  .contact-top .wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 3rem;
  }
  .contact-top .slab, .contact-top .lead { grid-column: 1; }
  .contact-top .wa { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-top: 0; }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--gap); }
  .qr-card {
    display: flex;
    align-items: center;
    gap: 1.75rem;
  }
  .qr { width: 10rem; height: 10rem; flex: none; border-radius: 0.75rem; }
  .number-card { max-width: none; }
}

/* ------------------------------------------------------------------ privacy */

.updated { margin-top: 1rem; font-size: var(--fs-small); font-weight: 750; }
.prose.wrap { width: min(44rem, 100% - 2 * var(--gutter)); }
.prose { display: grid; gap: clamp(2.75rem, 2rem + 2.5vw, 4rem); }
.slab.prose-title { margin-bottom: 1.1rem; padding: 0.45em 0.65em 0.38em; font-size: var(--fs-h3); }
.prose p + p { margin-top: 0.9rem; }
.dots { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }
.dots li { display: flex; align-items: baseline; gap: 0.7em; }
.dots li::before {
  content: "";
  flex: none;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--noche);
  translate: 0 -0.1em;
}
.prose-reach { display: grid; justify-items: start; gap: 1.25rem; margin-top: 1.75rem; }
.mail a { font-weight: 750; }

/* ------------------------------------------------------------------ page not found */

/* The heading, the line and the button, and Big's bed with his room above it: on a phone the bed
   comes under the button; on a computer it stands beside them, in the first screen, its foot
   level with the button's (it was a section of its own, below the fold: the review of 2026-09-27). */
.lost .pill-go { margin-top: calc(var(--stack) * 1.25); }
.bed {
  width: min(100%, 34rem);
  height: clamp(2.5rem, 2rem + 2vw, 4rem);
  margin: var(--room-big) auto 0;
}
@media (min-width: 1000px) {
  .lost-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    column-gap: clamp(3rem, 1rem + 4vw, 6rem);
    align-items: end;
  }
  .bed { width: 100%; margin: 0; }
}

/* ------------------------------------------------------------------ footer: the floor */

/* The crew's floor (its flat top edge is where they gather), and it speaks softly (Michael,
   2026-09-26, after five tries): the black floor, the name with Software studio centred and
   given room, and everything under it hushed to small spaced capitals in cream at reduced
   strength. The phone shows only language and privacy (the Menu up top has every page, and
   seven links wrapped into three uneven rows read as broken); the computer adds the pages as one
   faint row under a hairline. Every link stays 44 px tall to tap. */
.site-footer {
  padding-block: clamp(4rem, 3rem + 5vw, 7rem) clamp(2.5rem, 2rem + 2vw, 3.75rem);
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--noche);
  color: var(--papel);
  font-weight: 400;
  text-align: center;
}
.footer-in { display: grid; justify-items: center; }
.footer-logo { width: min(13.5rem, 60%); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.9em;
  color: var(--papel);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.72;
}
.footer-links a:hover { opacity: 1; }
.footer-pages { display: none; }
.footer-more { margin-top: clamp(3rem, 2.5rem + 2vw, 4rem); }
.footer-small { margin: 0.75rem 0 0; font-size: 0.75rem; letter-spacing: 0.04em; opacity: 0.55; }   /* 0.55: still 4.5:1 on the black */
.footer-small span { margin-inline: 0.5em; }

@media (min-width: 1000px) {
  .footer-logo { width: 16rem; }
  .footer-pages {
    display: flex;
    max-width: 52rem;
    margin-top: 4rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(246, 243, 236, 0.14);
  }
  .footer-more { margin-top: 0; }
  .footer-more a { font-size: 0.6875rem; opacity: 0.55; }
}