/* ==========================================================================
   pages.css — page-level compositions built from the component library.
   Every value comes from tokens; layout numbers that are composition-specific
   (collage offsets, rotations) live here and nowhere else.
   ========================================================================== */

main { display: block; outline: none; }

/* ---------- Shared: CTA band ---------- */
.cta-band__panel {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  max-width: 980px;
  margin-inline: auto;
  padding: clamp(var(--space-7), 6vw, var(--space-9)) clamp(var(--space-5), 6vw, var(--space-9));
}
.cta-band__title { font-size: var(--fs-h1); line-height: 1; text-transform: uppercase; max-width: 18ch; }
.cta-band__text { font-size: var(--fs-body-lg); max-width: 46ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-3); }
.cta-band__actions .annotation { --annotation-size: 2.6rem; color: var(--rose-600); }

/* =========================================================== HOME ===== */
/*
 * Home hero — build of the home board below its paper header strip (the shared site header
 * replaces the board's own nav, so every page has the same navigation).
 * Desktop (≥1200px): a 1998×973 stage (board y 143 → 1116); positions are board coordinates in %
 * (x / 1998, (y − 143) / 973), sizes in container units (1cqw = 19.98 board px). The right-hand collage is its own
 * container (board box 930,150 → 1998,1116 = 1068×966): everything inside it is placed in %
 * of the collage and sized in the collage's cqw (1cqw = 10.68 board px), so on phones the
 * collage keeps its composition at full width while the copy stacks above it.
 */
.home-hero { position: relative; overflow: hidden; container-type: inline-size; background: var(--cream-50); color: var(--ink-950); }
.home-hero__stage { position: relative; }
.hh-cream  { fill: var(--cream-50); }
.hh-deckle { fill: var(--paper-deckle); stroke: var(--paper-deckle); stroke-width: 10; stroke-linejoin: round; }

.home-hero__name { display: block; font-family: var(--font-display); font-weight: 700; color: var(--burgundy-800); letter-spacing: -0.006em; line-height: 1; white-space: nowrap; }
.home-hero__role {
  display: flex; align-items: center;
  background: var(--burgundy-750); color: var(--cream-100);
  font-family: var(--font-display); font-weight: 700; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
}
.home-hero__location { font-family: var(--font-hand); color: var(--ink-950); line-height: 1; white-space: nowrap; transform: skewX(-10deg); transform-origin: left bottom; }
.home-hero__tagline { font-family: var(--font-sans); font-weight: 400; color: var(--ink-950); line-height: 1.1; white-space: nowrap; }
.home-hero__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35em;
  background: var(--burgundy-750); color: var(--cream-100); border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}
.home-hero__cta:hover { background: var(--burgundy-700); transform: translate(-2px, -2px); }
.home-hero__cta:active { transform: translate(2px, 2px); box-shadow: none; }

/* Collage (its own container) */
.home-hero__collage { position: relative; container-type: inline-size; aspect-ratio: 1068 / 966; }
.home-hero__collage > * { position: absolute; }
.home-hero__collage-papers { inset: 0; width: 100%; height: 100%; display: block; }
.hc-pink  { fill: var(--blush-200); }
.hc-lined path:first-child { fill: var(--cream-200); }
.hc-lined path + path { fill: none; stroke: var(--stone-300); stroke-width: 1.6; }
.hc-white { fill: var(--paper-deckle); }
.hc-star  { fill: var(--blush-200); stroke: var(--burgundy-750); stroke-width: 3.2; stroke-linejoin: round; }
.hc-ink   { fill: none; stroke: var(--ink-950); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }

.home-hero__script { left: 2.6%; top: 6.4%; font-family: var(--font-brush); font-size: 6.6cqw; line-height: 1; color: var(--ink-950); white-space: nowrap; transform: rotate(-14deg); transform-origin: left bottom; }
.home-hero__tape-top { --tape-w: 16.7cqw; --tape-h: 4.7cqw; left: 56%; top: 8.7%; translate: -50% -50%; --tape-rotate: 3deg; }
.home-hero__polaroid { margin: 0; background: var(--paper-deckle); box-shadow: 0 0.4cqw 1.2cqw color-mix(in srgb, var(--burgundy-950) 28%, transparent); }
.home-hero__polaroid img { display: block; width: 100%; object-fit: cover; }
.home-hero__polaroid--ring { left: 73.2%; top: 3.6%; width: 19.5%; padding: 1.7cqw 1.6cqw 4.6cqw; transform: rotate(4deg); }
.home-hero__polaroid--ring img { aspect-ratio: 175 / 200; }
.home-hero__polaroid--fabric { left: 15.4%; top: 36.7%; width: 19.2%; padding: 1.6cqw 1.6cqw 4.2cqw; transform: rotate(-7deg); z-index: 1; }
.home-hero__polaroid--fabric img { aspect-ratio: 173 / 180; }
.home-hero__portrait { left: 33.7%; top: 12.9%; width: 40.26%; height: auto; z-index: 2; }
.home-hero__oval {
  left: 10.8%; top: 67.3%; width: 41.2%; height: 19%; z-index: 3;
  display: grid; place-items: center; text-align: center;
  background: var(--rose-600); color: var(--cream-100); border-radius: 50%;
  box-shadow: inset 0 0 0 0.45cqw var(--rose-500), 0 0.3cqw 0.8cqw color-mix(in srgb, var(--burgundy-950) 30%, transparent);
  font-family: var(--font-sans); font-weight: 700; font-size: 2.45cqw; line-height: 1.22; letter-spacing: 0.02em; text-transform: uppercase;
  transform: rotate(-5deg);
}
.home-hero__seal {
  left: 68.5%; top: 68%; width: 20.2%; aspect-ratio: 1; z-index: 3;
  display: grid; place-items: center; text-align: center;
  background: var(--cream-200); color: var(--burgundy-800); border-radius: 50%;
  border: 0.32cqw solid var(--burgundy-800); box-shadow: inset 0 0 0 0.9cqw var(--cream-200), inset 0 0 0 1.15cqw color-mix(in srgb, var(--burgundy-800) 25%, transparent);
  font-family: var(--font-display); font-weight: 800; font-size: 3.9cqw; line-height: 0.92; padding: 0 1.5cqw;
  transform: rotate(8deg);
}
.home-hero__browser {
  left: 0.7%; top: 78.2%; width: 15.7%; height: 12.4%; z-index: 3;
  background: var(--paper-deckle); border: 0.3cqw solid var(--ink-950); border-radius: 0.5cqw;
  display: grid; grid-template-rows: 26% 1fr;
}
.home-hero__browser-bar { display: flex; gap: 0.6cqw; align-items: center; padding-left: 1cqw; background: var(--blush-200); border-bottom: 0.3cqw solid var(--ink-950); }
.home-hero__browser-bar i { width: 1.1cqw; height: 1.1cqw; border: 0.25cqw solid var(--ink-950); border-radius: 50%; }
.home-hero__browser-label { display: grid; place-items: center; font-family: var(--font-sans); font-weight: 500; font-size: 3.6cqw; color: var(--ink-950); }
.home-hero__cursor { position: absolute; right: -1.5cqw; bottom: -2.8cqw; width: 3.6cqw; fill: var(--paper-deckle); stroke: var(--ink-950); stroke-width: 1.6; stroke-linejoin: round; }

/* ---- Desktop: the board ---- */
@media (min-width: 1200px) {
  .home-hero__stage { aspect-ratio: 1998 / 973; max-width: var(--board-max); margin-inline: auto; container-type: inline-size; /* cqw = 1% of the stage, also past 1998px */ }
  .home-hero__stage > * { position: absolute; }
  .home-hero__papers { inset: 0; width: 100%; height: 100%; display: block; }

  .home-hero__copy { inset: 0; pointer-events: none; }
  .home-hero__copy > *, .home-hero__title > * { position: absolute; pointer-events: auto; }
  .home-hero__copy > .home-hero__title { position: static; margin: 0; }
  .home-hero__name { left: 8.75%; top: 12.72%; font-size: 6.83cqw; }
  .home-hero__role { left: 8.6%; top: 29.46%; width: 40.3%; height: 15.25%; padding-left: 1.65cqw; font-size: 5.05cqw; }
  .home-hero__location { left: 9.25%; top: 47.24%; font-size: 2.68cqw; transform: skewX(-10deg) scaleY(1.38); }
  .home-hero__tagline { left: 8.9%; top: 60.54%; font-size: 2.6cqw; letter-spacing: 0.045em; }
  .home-hero__cta { left: 8.9%; top: 70.06%; width: 24.9%; height: 9.29%; font-size: 1.7cqw; letter-spacing: 0.045em; box-shadow: 0.5cqw 0.55cqw 0 var(--stone-400); }
  .home-hero__tape-bl { --tape-w: 9.5cqw; --tape-h: 2.6cqw; left: 7.26%; top: 89.56%; translate: -50% -50%; --tape-rotate: 25deg; }

  .home-hero__collage { left: 46.55%; top: 0.72%; width: 53.45%; }
}

/* ---- Below 1200px: copy stacks above the collage ---- */
@media (max-width: 1199px) {
  .home-hero__papers, .home-hero__tape-bl { display: none; }
  .home-hero__copy { display: grid; justify-items: start; gap: var(--space-4); padding: var(--space-8) var(--gutter) var(--space-6); max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto; }
  .home-hero__title { display: grid; justify-items: start; gap: var(--space-4); margin: 0; }
  .home-hero__name { font-size: clamp(2.6rem, 10vw, 5.2rem); white-space: normal; }
  .home-hero__role { padding: 0.12em 0.35em; font-size: clamp(2.1rem, 8.4vw, 4.2rem); }
  .home-hero__location { font-size: clamp(1.5rem, 5.4vw, 2.3rem); white-space: normal; transform: none; } /* a skew shifts every wrapped line */
  .home-hero__tagline { font-size: clamp(1.15rem, 4.4vw, 1.6rem); white-space: normal; }
  .home-hero__cta { min-height: 56px; padding: 0 1.6em; font-size: 15px; box-shadow: 6px 7px 0 var(--stone-400); margin-top: var(--space-3); }
  .home-hero__collage { width: min(100%, 760px); margin-inline: auto; }
}

/* Intro strip */
.intro-strip__grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .intro-strip__grid { grid-template-columns: 1.5fr 1fr; } }
.intro-strip__paper { display: grid; gap: var(--space-4); justify-items: start; padding: clamp(var(--space-6), 5vw, var(--space-8)); }
.intro-strip__text { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.25; color: var(--ink-900); }
.intro-strip__stickers { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center; }
.intro-strip__stickers .sticker { font-size: 1.05rem; padding: 0.8em 1.3em; }

/* Category cards */
.home-cats .section-heading { margin-bottom: var(--space-7); }
.home-cats__grid { display: grid; gap: var(--space-7) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.category-card .tape { z-index: var(--z-sticker); }

/* Featured */
.featured { --tear: 18px; }
@media (min-width: 560px) and (max-width: 899px) { .featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.featured__heading { margin-bottom: var(--space-7); }
.featured__more { margin-top: var(--space-7); text-align: center; }

/* Services preview */
.services-preview__grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .services-preview__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.services-preview__intro { display: grid; gap: var(--space-4); justify-items: start; }
.services-preview__title { color: var(--cream-50); text-transform: uppercase; }
.services-preview__intro .annotation { --annotation-size: var(--fs-script-lg); margin-top: calc(var(--space-3) * -1); margin-left: var(--space-2); color: var(--blush-100); }
.services-preview__intro .body-lg { color: var(--text-on-dark); max-width: 36ch; }
.service-index { display: grid; gap: 0; padding: clamp(var(--space-6), 4vw, var(--space-7)) clamp(var(--space-5), 4vw, var(--space-7)); }
/* Two columns only where each column fits the longest title ("Voiceover & B-Roll") on one line. */
@media (min-width: 640px) and (max-width: 899px), (min-width: 1200px) { .service-index { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); } }
.service-index__item {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.45vw, 1.3rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--burgundy-800);
  text-transform: uppercase;
  hyphens: manual;
}
.service-index__num { font-size: 0.9rem; color: var(--rose-600); font-weight: 600; min-width: 2ch; }

/* =========================================================== ABOUT ==== */
.pillars { padding-top: var(--space-6); }
.pillars .section-heading { margin-bottom: var(--space-7); }
.pillars__grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pillar { display: grid; gap: var(--space-3); padding: var(--space-7) var(--space-6); transform: rotate(var(--tilt, 0deg)); height: 100%; }
.pillar__icon { width: 48px; height: 48px; color: var(--rose-600); }
.pillar__title { color: var(--burgundy-800); }
.pillars__cta { margin-top: var(--space-7); text-align: center; }

/* ======================================================= PORTFOLIO ==== */
.hero-portfolio { position: relative; padding-block: clamp(var(--space-7), 7vw, var(--space-9)) clamp(var(--space-8), 8vw, var(--space-10)); overflow: hidden; }
.hero-portfolio__grid { display: grid; gap: var(--space-6); align-items: end; }
@media (min-width: 900px) { .hero-portfolio__grid { grid-template-columns: 1fr 1fr; } }
.hero-portfolio__title { color: var(--cream-50); text-transform: uppercase; }
.hero-portfolio .annotation { --annotation-size: var(--fs-script-lg); color: var(--blush-100); margin-left: 30%; margin-top: calc(var(--space-4) * -1); }
.hero-portfolio__copy { display: grid; gap: var(--space-4); color: var(--text-on-dark); max-width: 52ch; }
.hero-portfolio__note { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--text-on-dark-muted); }
.hero-portfolio__note svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
/* The loop arrow points from the title to the gallery; once the columns stack it would sit on the note text. */
@media (max-width: 899px) { .hero-portfolio__arrow { display: none; } }

.portfolio-body { margin-top: calc(var(--space-6) * -1); --tear: 18px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
@media (max-width: 599px) {
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding: var(--space-2) var(--space-4) var(--space-3); margin-inline: calc(var(--gutter) * -1); scroll-snap-type: x proximity; scrollbar-width: none; }
  .filter-bar .chip { flex: none; scroll-snap-align: start; }
}
.category-intros { margin-bottom: var(--space-8); }
.category-intro {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 200px;
  padding: var(--space-7) clamp(var(--space-5), 5vw, var(--space-8));
  animation: intro-in var(--dur-slow) var(--ease-paper);
}
@keyframes intro-in { from { opacity: 0; transform: translateY(10px) rotate(-0.6deg); } }
.category-intro__copy { display: grid; gap: var(--space-3); max-width: 58ch; position: relative; z-index: var(--z-content); }
.category-intro__title { font-size: var(--fs-display-lg); line-height: 0.95; text-transform: uppercase; }
.category-intro .annotation { --annotation-size: var(--fs-script-lg); color: var(--rose-600); margin: calc(var(--space-3) * -1) 0 var(--space-2) var(--space-6); justify-self: start; }
.category-intro__icon { --deco-size: clamp(64px, 10vw, 120px); right: clamp(var(--space-4), 6vw, var(--space-9)); top: 50%; translate: 0 -50%; --deco-rotate: -14deg; opacity: 0.9; }
.category-intro--fitness .annotation { color: var(--burgundy-800); }
@media (max-width: 599px) {
  .category-intro__icon { opacity: 0.25; }
  .category-intro > .deco:not(.category-intro__icon) { display: none; } /* the sparkle would land on the title */
}

/* ======================================================== SERVICES ==== */
.hero-services { overflow: hidden; }
.hero-services__grid { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 960px) { .hero-services__grid { grid-template-columns: 1.25fr 0.75fr; } }
.hero-services__paper { display: grid; gap: var(--space-4); justify-items: start; padding: clamp(var(--space-7), 6vw, var(--space-9)) clamp(var(--space-4), 5vw, var(--space-9)); --tear: 18px; overflow: hidden; }
.hero-services__kraft { position: absolute; inset: 0 auto auto 0; width: 38%; height: 54px; pointer-events: none; }
.hero-services__title { font-size: clamp(2.5rem, 1.25rem + 7.6vw, 8rem); line-height: 0.9; letter-spacing: -0.01em; position: relative; }
.hero-services__paper .annotation { --annotation-size: var(--fs-script-lg); margin-top: calc(var(--space-4) * -1); color: var(--burgundy-800); }
.hero-services__paper .body-lg { max-width: 34ch; }
.hero-services__visual { position: relative; width: min(100%, 340px); margin-inline: auto; }
@media (min-width: 960px) { .hero-services__visual { width: min(100%, 400px); } }
.hero-services__frame { position: relative; padding: var(--space-4) var(--space-4) var(--space-7); background-color: var(--blush-200); transform: rotate(2deg); box-shadow: var(--shadow-paper); }
.hero-services__frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.hero-services__burst { --deco-size: 90px; top: 8%; left: -40px; --deco-rotate: 10deg; z-index: 4; }
.hero-services__cam { --deco-size: 60px; bottom: 6%; right: -24px; --deco-rotate: -12deg; }

.services-grid { display: grid; gap: var(--space-7) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.services-grid .service-card { height: 100%; }

/* ========================================================= CONTACT ==== */
/*
 * Contact hero — faithful build of the "Contáctame" board.
 * Desktop (≥1200px): a 1998×950 stage. Every position is the board's coordinate in % of the stage
 * (x / 1998, y / 950) and every size is in container units (1cqw = 19.98 board px), so the
 * composition scales as one piece. Papers, star and kraft are one decorative SVG
 * (.contact-hero__papers); text, portrait, tape and the contact card are real HTML on top.
 * Below 1200px the same elements stack in normal flow.
 */
.contact-hero { position: relative; overflow: hidden; container-type: inline-size; color: var(--ink-950); }
.contact-hero__stage { position: relative; }

/* Paper shapes (SVG) */
.ch-cream  { fill: var(--cream-50); }
.ch-deckle { fill: var(--paper-deckle); stroke: var(--paper-deckle); stroke-width: 9; stroke-linejoin: round; }
.ch-star   { fill: var(--rose-300); }
.ch-kraft  { fill: var(--kraft-200); }
.ch-card   { fill: var(--cream-50); }
.ch-pink   { fill: var(--blush-200); }
.ch-band   { fill: var(--blush-100); }

.contact-hero__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.contact-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink-950);
  text-wrap: initial;
}
.contact-hero__text { font-family: var(--font-sans); line-height: 1.24; text-wrap: wrap; }
.contact-hero__script {
  position: absolute;
  font-family: var(--font-brush);
  line-height: 1;
  white-space: nowrap;
  transform: rotate(-19deg);
  transform-origin: left bottom;
  pointer-events: none;
}
.contact-hero__heart { position: absolute; fill: none; stroke: var(--ink-950); stroke-width: 1.6; stroke-linejoin: round; transform: rotate(14deg); pointer-events: none; }

.contact-hero__visual { position: relative; }
.contact-hero__portrait { display: block; width: 100%; height: auto; }
.contact-hero__tape { --tape-rotate: 37deg; }

.contact-hero__card { position: relative; }
.contact-hero__card-title {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-950);
}
.contact-hero__card .contact-methods { display: grid; grid-template-columns: 1fr 1fr; }
.contact-hero__card .contact-method { display: grid; align-items: start; color: var(--ink-950); min-height: 0; }
.contact-hero__card .contact-method__icon { color: var(--ink-950); }
.contact-hero__card .contact-method__label { font-weight: 700; letter-spacing: 0; color: var(--ink-950); }
.contact-hero__card .contact-method__label::after { content: ":"; }
.contact-hero__card .contact-method__value { color: var(--ink-900); }
.contact-hero__action { position: relative; display: flex; align-items: center; }
.contact-hero__arrow { fill: none; stroke: var(--ink-950); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-hero__cta {
  letter-spacing: 0.01em;
  box-shadow: 0 0.35cqw 0.5cqw color-mix(in srgb, var(--burgundy-950) 35%, transparent);
}
.contact-hero__mail { fill: none; stroke: var(--ink-950); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Desktop: the board, 1:1 (≥1200px, where its small labels stay ≥ 11px) ---- */
@media (min-width: 1200px) {
  .contact-hero__stage { aspect-ratio: 1998 / 950; max-width: var(--board-max); margin-inline: auto; container-type: inline-size; /* cqw = 1% of the stage, also past 1998px */ }
  .contact-hero__papers { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  .contact-hero__copy { position: absolute; left: 5.7%; top: 11.9%; width: 56%; z-index: 2; }
  .contact-hero__eyebrow { font-size: 1.56cqw; line-height: 1; }
  .contact-hero__title { font-size: 5.55cqw; line-height: 0.98; letter-spacing: -0.012em; margin-top: 1.1cqw; transform: scaleY(1.13); transform-origin: left top; margin-bottom: 2.55cqw; /* the board's face is taller than Playfair */ }
  .contact-hero__text { font-size: 1.52cqw; max-width: 27.4cqw; margin-top: 0.6cqw; }
  .contact-hero__script { left: 23.8%; top: 63.2%; font-size: 3.3cqw; color: var(--ink-950); z-index: 2; }
  .contact-hero__heart { left: 34.1%; top: 58.6%; width: 1.5cqw; height: 1.5cqw; z-index: 2; }

  .contact-hero__visual { position: absolute; left: 68.1%; top: 19.6%; width: 27.4%; z-index: 2; }
  .contact-hero__tape { --tape-w: 14.5cqw; --tape-h: 3.6cqw; left: 14.4%; top: 86.5%; translate: -50% -50%; --tape-rotate: 37deg; }
  .contact-hero__tape--b { --tape-w: 13.5cqw; --tape-h: 3.1cqw; left: 73.9%; top: 95.8%; --tape-rotate: -20deg; }

  .contact-hero__card { position: absolute; left: 38%; top: 46.3%; width: 31.8%; height: 47.9%; z-index: 3; }
  .contact-hero__card-tape { --tape-w: 9.6cqw; --tape-h: 3.2cqw; left: 55%; top: -1.8cqw; translate: -50% 0; --tape-rotate: 2deg; }
  .contact-hero__card-title { position: absolute; left: 4.7cqw; top: 0.95cqw; font-size: 2.52cqw; }
  .contact-hero__card .contact-methods {
    position: absolute; left: 2.45cqw; top: 5.0cqw; right: 0.6cqw;
    grid-template-columns: 13.5cqw 1fr; row-gap: 1.95cqw; column-gap: 0;
  }
  .contact-hero__card .contact-method { grid-template-columns: 2.7cqw 1fr; gap: 0.7cqw; }
  .contact-hero__card .contact-method__icon { width: 2.7cqw; height: 2.7cqw; }
  .contact-hero__card .contact-method__label { font-size: 1.42cqw; line-height: 1.05; }
  .contact-hero__card .contact-method__value { font-size: max(0.98cqw, 11px); line-height: 1.25; margin-top: 0.2cqw; }

  .contact-hero__action { position: absolute; left: 3.4cqw; top: 15.75cqw; }
  .contact-hero__arrow { width: 3.4cqw; height: 3.8cqw; margin-top: -1.6cqw; }
  .contact-hero__cta { margin-left: 0.8cqw; min-height: 0; height: 3.35cqw; padding: 0 1.75cqw; font-size: 1.48cqw; }
  .contact-hero__mail { width: 3.9cqw; height: 2.4cqw; margin-left: 0.4cqw; }
}

/* ---- Below 1200px: same pieces, stacked ---- */
@media (max-width: 1199px) {
  .contact-hero__papers { display: none; }
  .contact-hero__stage { display: grid; gap: var(--space-6); padding-bottom: var(--space-8); }
  .contact-hero__copy {
    padding: var(--space-8) max(var(--gutter), calc((100% - 700px) / 2)) var(--space-10);
    background: var(--cream-50) var(--paper-grain);
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 18px + 1px) no-repeat, var(--torn-edge-bottom) bottom / var(--tear-tile) 18px repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 18px + 1px) no-repeat, var(--torn-edge-bottom) bottom / var(--tear-tile) 18px repeat-x;
  }
  .contact-hero__eyebrow { font-size: 15px; }
  .contact-hero__title { font-size: clamp(2.6rem, 9vw, 4.4rem); margin-top: var(--space-4); }
  .contact-hero__text { font-size: 18px; margin-top: var(--space-5); max-width: 32ch; }
  .contact-hero__script { position: absolute; right: 12%; top: calc(var(--space-8) * -1); font-size: 2.6rem; color: var(--ink-950); transform: rotate(-14deg); }
  .contact-hero__heart { display: none; }
  .contact-hero__copy { position: relative; }
  .contact-hero__script { position: relative; z-index: 2; display: block; justify-self: end; margin: calc(var(--space-10) * -1 + 56px) max(calc(var(--gutter) + 8px), calc((100% - 700px) / 2)) 0 auto; transform: rotate(-14deg); }

  .contact-hero__visual { width: min(78%, 360px); margin-inline: auto; isolation: isolate; }
  .contact-hero__visual::before { /* star */
    content: ""; position: absolute; z-index: -2; inset: -18% -26% -14%;
    background: var(--rose-300);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    transform: rotate(8deg);
  }
  .contact-hero__visual::after { /* kraft */
    content: ""; position: absolute; z-index: -1; inset: 2% -6% 0 -4%; background: var(--kraft-200) var(--paper-grain);
  }
  .contact-hero__tape { --tape-w: 34%; --tape-h: 30px; left: 18%; top: 88%; translate: -50% -50%; }
  .contact-hero__tape--b { --tape-w: 32%; --tape-h: 26px; left: 76%; top: 96%; --tape-rotate: -20deg; }

  .contact-hero__card {
    width: min(100% - 2 * var(--gutter), 520px);
    margin-inline: auto;
    padding: var(--space-6) var(--space-5) var(--space-6);
    background: var(--blush-200) var(--paper-grain);
    box-shadow: var(--shadow-paper);
    transform: rotate(-1deg);
  }
  .contact-hero__card-tape { --tape-w: 110px; left: 50%; top: -16px; translate: -50% 0; --tape-rotate: 2deg; }
  .contact-hero__card-title { font-size: 1.8rem; }
  .contact-hero__card .contact-methods { margin-top: var(--space-5); padding: var(--space-4) var(--space-3); background: var(--blush-100); gap: var(--space-4) var(--space-3); }
  .contact-hero__card .contact-method { grid-template-columns: 30px 1fr; gap: var(--space-2); }
  .contact-hero__card .contact-method__icon { width: 30px; height: 30px; }
  .contact-hero__card .contact-method__label { font-size: 15px; }
  .contact-hero__card .contact-method__value { font-size: 13px; }
  .contact-hero__action { justify-content: center; margin-top: var(--space-5); gap: var(--space-2); }
  .contact-hero__arrow { width: 40px; height: 44px; margin-top: -24px; }
  .contact-hero__mail { width: 46px; height: 30px; }
}
@media (max-width: 420px) { .contact-hero__card .contact-methods { grid-template-columns: 1fr; } }

.contact-form-section { --tear: 18px; margin-top: calc(var(--space-4) * -1); }
.form-panel { display: grid; gap: var(--space-5); padding: clamp(var(--space-6), 5vw, var(--space-8)); }
.form-panel__note {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  font-size: 15px;
  color: var(--ink-600);
  border: 1.5px dashed var(--ink-600);
  border-radius: var(--radius-sm);
}
.form-panel__note svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--rose-600); }
.form__footer { display: flex; justify-content: flex-start; }

/* ===================================================== PORTFOLIO · FITNESS BOARD ===== */
/*
 * Faithful build of the Fitness & Wellness board, shown when the Fitness filter is active.
 * Desktop (≥1200px): 1998×1038 stage (the board below its header), positions in % of the
 * stage, sizes in container units (1cqw = 19.98 board px). The cards area is its own container
 * (board box 790,110 → 1998,1116 = 1208×1006; 1cqw = 12.08 board px) so the two polaroids keep
 * their composition on phones. Card content comes from data/videos.json (BoardCard).
 */
.fitness-board { position: relative; overflow: hidden; container-type: inline-size; margin-top: var(--space-6); color: var(--ink-900); }
.fitness-board[hidden] { display: none; }
.fitness-board__stage { position: relative; }
.fb-cream  { fill: var(--cream-50); }
.fb-deckle { fill: var(--paper-deckle); stroke: var(--paper-deckle); stroke-width: 9; stroke-linejoin: round; }
.fb-pink   { fill: var(--blush-200); }
.fb-pink-2 { fill: var(--blush-200); }
.fb-kraft  { fill: var(--kraft-300); }
.fb-kraft-2 { fill: var(--kraft-200); }
.fb-burst  { fill: var(--pink-400); }
.fb-ink    { fill: none; stroke: var(--burgundy-800); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.fitness-board__title { text-wrap: wrap; font-family: var(--font-display); font-weight: 500; color: var(--burgundy-900); text-transform: uppercase; line-height: 0.9; letter-spacing: -0.01em; }
.fitness-board__tagline { font-family: var(--font-sans); color: var(--ink-900); line-height: 1.2; text-wrap: wrap; }
.fitness-board__script { font-family: var(--font-script); color: var(--ink-950); line-height: 1; white-space: nowrap; transform: rotate(-11deg); transform-origin: left bottom; pointer-events: none; }
.fitness-board__langs { display: flex; align-items: center; gap: 0.5em; font-family: var(--font-sans); color: var(--ink-900); }
.fitness-board__pill { display: inline-grid; place-items: center; padding: 0.15em 0.6em; border-radius: var(--radius-pill); font-weight: 500; }
.fitness-board__pill--es { background: var(--burgundy-800); color: var(--cream-50); }
.fitness-board__pill--en { background: var(--blush-200); color: var(--burgundy-800); }

/* Cards area */
.fitness-board__cards { position: relative; container-type: inline-size; aspect-ratio: 1208 / 1006; }
.fitness-board__cards > * { position: absolute; }
.fitness-board__cards-papers { inset: 0; width: 100%; height: 100%; display: block; }
.board-slot { background: var(--cream-50); box-shadow: 0 0.6cqw 1.6cqw color-mix(in srgb, var(--burgundy-950) 35%, transparent); z-index: 1; }
.board-slot[hidden] { display: none; }
.board-slot--1 { left: 12.83%; top: 6.76%; width: 37.5%; height: 82.7%; padding: 1.16cqw 1.4cqw 0; transform: rotate(-0.8deg); --photo-ratio: 420 / 670; }
.board-slot--2 { left: 53.15%; top: 14.71%; width: 39.98%; height: 77.73%; padding: 1.82cqw 1.82cqw 0; transform: rotate(2.6deg); --photo-ratio: 420 / 632; }
.board-slot__tape { z-index: 2; translate: -50% -50%; }
.board-slot__tape--1 { left: 31.46%; top: 7.16%; --tape-w: 15.7cqw; --tape-h: 5.1cqw; --tape-rotate: -4deg; }
.board-slot__tape--2 { left: 75.1%; top: 14.7%; --tape-w: 17cqw; --tape-h: 5.6cqw; --tape-rotate: 3deg; }

.board-card { display: block; }
.board-card__media { position: relative; display: block; width: 100%; aspect-ratio: var(--photo-ratio, 9 / 16); padding: 0; overflow: hidden; cursor: pointer; background: var(--blush-200); }
.board-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.board-card__media:hover img { transform: scale(1.03); }
.board-card__media:focus-visible { outline-offset: 4px; }
.board-card__play {
  position: absolute; left: 49.5%; top: 51.6%; width: 19.5%; aspect-ratio: 1; translate: -50% -50%;
  display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--cream-50) 82%, transparent); color: var(--ink-950);
  transition: transform var(--dur-base) var(--ease-paper), background-color var(--dur-fast);
}
.board-card__play svg { width: 40%; height: 40%; margin-left: 8%; }
.board-card__media:hover .board-card__play { transform: scale(1.08); background: var(--cream-50); }
.board-card__tag { position: absolute; left: 1.7cqw; bottom: 1.7cqw; font-family: var(--font-sans); font-weight: 600; font-size: 1.72cqw; color: var(--cream-50); text-shadow: 0 1px 4px color-mix(in srgb, var(--burgundy-950) 45%, transparent); letter-spacing: 0.01em; }
.board-card__tag span { font-weight: 400; }
.board-card__title { margin-top: 1.25cqw; width: 118%; font-family: var(--font-display); font-weight: 500; font-size: 3.5cqw; line-height: 1.08; color: var(--ink-950); letter-spacing: -0.015em; transform: scaleX(0.85); transform-origin: left top; text-wrap: wrap; /* the board's serif is condensed */ }
.board-card__format { margin-top: 0.7cqw; font-family: var(--font-sans); font-size: 1.95cqw; color: var(--ink-900); text-transform: uppercase; letter-spacing: 0.02em; }

.fitness-board__sticker { z-index: 3; pointer-events: none; height: auto; overflow: visible; }
.fitness-board__sticker--dumbbell { left: 40.1%; top: 67.6%; width: 12.4%; }
.fitness-board__sticker--shaker { left: 85.7%; top: 68.6%; width: 7.5%; transform: rotate(14deg); }
.fbs-outline { fill: var(--cream-50); stroke: var(--cream-50); stroke-width: 14; stroke-linejoin: round; }
.fbs-fill { fill: var(--pink-400); stroke: var(--burgundy-800); stroke-width: 3; stroke-linejoin: round; }
.fitness-board__sticker--shaker .fbs-fill { fill: var(--blush-200); }
.fbs-liquid { fill: var(--pink-400); }

@media (min-width: 1200px) {
  .fitness-board__stage { aspect-ratio: 1998 / 1038; max-width: var(--board-max); margin-inline: auto; container-type: inline-size; /* cqw = 1% of the stage, also past 1998px */ }
  .fitness-board__stage > * { position: absolute; }
  .fitness-board__papers { inset: 0; width: 100%; height: 100%; display: block; }
  .fitness-board__copy { inset: 0; pointer-events: none; }
  .fitness-board__copy > * { position: absolute; pointer-events: auto; }
  .fitness-board__title { left: 5.26%; top: 14.9%; width: 45%; font-size: 7.15cqw; transform: scaleY(1.06); transform-origin: left top; }
  .fitness-board__tagline { left: 5.26%; top: 42.8%; width: 31.8%; font-size: 2.02cqw; }
  .fitness-board__script { left: 22.5%; top: 52.2%; font-size: 2.7cqw; }
  .fitness-board__langs { left: 5.26%; top: 55.9%; font-size: 1.2cqw; gap: 0.6cqw; }
  .fitness-board__cards { left: 39.54%; top: 3.08%; width: 60.46%; }
}
@media (max-width: 1199px) {
  .fitness-board__papers { display: none; }
  .fitness-board__copy { display: grid; justify-items: start; gap: var(--space-4); padding: var(--space-8) var(--gutter) var(--space-9); background: var(--cream-50) var(--paper-grain);
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 17px) no-repeat, var(--torn-edge-bottom) bottom / var(--tear-tile) 18px repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 17px) no-repeat, var(--torn-edge-bottom) bottom / var(--tear-tile) 18px repeat-x; }
  .fitness-board__title { font-size: clamp(3rem, 12vw, 6rem); }
  .fitness-board__tagline { font-size: clamp(1.1rem, 4.4vw, 1.5rem); max-width: 30ch; }
  .fitness-board__script { font-size: clamp(1.8rem, 7vw, 2.6rem); margin: calc(var(--space-4) * -1) 0 0 40%; }
  .fitness-board__langs { font-size: 15px; }
  .fitness-board__cards { width: min(100%, 900px); margin-inline: auto; }
}

/* ===================================================== SERVICES · PROCESS BOARD ===== */
/*
 * Faithful build of the "Proceso de colaboración" board. Desktop (≥1200px): 1998×1041 stage
 * (the board below its header); positions in %, sizes in cqw (1cqw = 19.98 board px).
 * Each step is placed at its title's position; its icon is offset from there in cqw.
 * Below 1200px the steps become a vertical list on the cream paper.
 */
.process-board { position: relative; overflow: hidden; container-type: inline-size; color: var(--ink-950); }
.process-board__stage { position: relative; }
.pb-cream  { fill: var(--cream-50); }
.pb-deckle { fill: var(--paper-deckle); stroke: var(--paper-deckle); stroke-width: 9; stroke-linejoin: round; }
.pb-pink-crumple { fill: var(--blush-200); }
.pb-pink-square  { fill: var(--blush-200); }
.pb-pink  { fill: none; stroke: var(--pink-400); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.pb-wine  { fill: none; stroke: var(--burgundy-700); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.pb-thin  { stroke-width: 2.2; }
.pb-heart { fill: var(--pink-400); stroke: var(--burgundy-700); stroke-width: 2.2; stroke-linejoin: round; }
.pb-spark { fill: var(--burgundy-750); }
.pb-star  { fill: var(--cream-100); }

.process-board__title { font-family: var(--font-display); font-weight: 800; color: var(--burgundy-900); text-transform: uppercase; line-height: 1; letter-spacing: -0.012em; text-wrap: initial; }
.process-board__script { font-family: var(--font-script); color: var(--ink-950); line-height: 1; white-space: nowrap; -webkit-text-stroke: 0.035em currentColor; /* the board's script is heavier than Sacramento */ }
.pb-step { color: var(--ink-950); }
.pb-step__icon { color: var(--ink-900); }
.pb-step__badge { display: grid; place-items: center; border-radius: 50%; background: var(--blush-200); color: var(--ink-950); font-family: var(--font-sans); font-weight: 700; }
.pb-step__title { font-family: var(--font-sans); font-weight: 700; color: var(--ink-950); text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.12; text-wrap: initial; }
.pb-step__text { font-family: var(--font-sans); line-height: 1.17; text-wrap: initial; }
.process-board__tape--pink { background: color-mix(in srgb, var(--cream-50) 92%, transparent); }

@media (min-width: 1200px) {
  /* Aligned with the page container (not full-bleed) so the board lines up with the service cards above it. */
  .process-board__stage { aspect-ratio: 1998 / 1041; width: min(100% - 2 * var(--gutter), var(--container-max)); margin-inline: auto; container-type: inline-size; }
  .process-board__stage > * { position: absolute; }
  .process-board__papers { inset: 0; width: 100%; height: 100%; display: block; }
  .process-board__tape { translate: -50% -50%; z-index: 2; }
  .process-board__tape--tr { left: 89.84%; top: 16.5%; --tape-w: 16.5cqw; --tape-h: 3.8cqw; --tape-rotate: 22deg; }
  .process-board__tape--r { left: 95.15%; top: 46.8%; --tape-w: 9.8cqw; --tape-h: 3.3cqw; --tape-rotate: 92deg; }
  .process-board__tape--bl { left: 38.4%; top: 83.8%; --tape-w: 15cqw; --tape-h: 3.5cqw; --tape-rotate: 38deg; }
  .process-board__tape--pink { left: 35.8%; top: 61.2%; --tape-w: 14.5cqw; --tape-h: 4.2cqw; --tape-rotate: -3deg; }

  .process-board__title { left: 5.26%; top: 4.2%; width: 46%; font-size: 5.25cqw; transform: scaleY(1.22); transform-origin: left top; line-height: 1.07; }
  .process-board__script { left: 5.26%; top: 31.6%; font-size: 2.75cqw; }

  .process-board__steps { inset: 0; pointer-events: none; }
  .pb-step { position: absolute; pointer-events: auto; }
  .pb-step__icon { position: absolute; }
  .pb-step__badge { position: absolute; left: 10.26cqw; top: -3.05cqw; width: 2.65cqw; height: 2.65cqw; font-size: 1.25cqw; }
  .pb-step__title { font-size: 1.62cqw; }
  .pb-step__text { font-size: 1.48cqw; margin-top: 0.45cqw; }
  .pb-step--1 { left: 53.05%; top: 19.6%; }
  .pb-step--1 .pb-step__icon { left: 4.75cqw; top: -3.7cqw; width: 4.65cqw; height: 4.65cqw; }
  .pb-step--1 .pb-step__text { max-width: 13.2cqw; }
  .pb-step--2 { left: 73.57%; top: 27.28%; }
  .pb-step--2 .pb-step__icon { left: -4.75cqw; top: 0.3cqw; width: 3.85cqw; height: 3.85cqw; }
  .pb-step--2 .pb-step__text { max-width: 16.4cqw; }
  .pb-step--3 { left: 49.45%; top: 42.36%; }
  .pb-step--3 .pb-step__icon { left: -5cqw; top: 0.2cqw; width: 4cqw; height: 4cqw; }
  .pb-step--3 .pb-step__text { max-width: 14.2cqw; }
  .pb-step--4 { left: 74.32%; top: 51.97%; }
  .pb-step--4 .pb-step__icon { left: -5.1cqw; top: 0.8cqw; width: 4.2cqw; height: 4.2cqw; }
  .pb-step--4 .pb-step__text { max-width: 13.6cqw; }
  .pb-step--5 { left: 50.95%; top: 66.19%; }
  .pb-step--5 .pb-step__icon { left: -5.65cqw; top: 1.05cqw; width: 4.5cqw; height: 4.5cqw; }
  .pb-step--5 .pb-step__title { max-width: 11.8cqw; }
  .pb-step--5 .pb-step__text { max-width: 14.2cqw; }
  .pb-step--6 { left: 75.83%; top: 75.02%; }
  .pb-step--6 .pb-step__icon { left: -4.6cqw; top: 0.6cqw; width: 3.85cqw; height: 3.85cqw; }
  .pb-step--6 .pb-step__text { max-width: 13.6cqw; }
}
@media (max-width: 1199px) {
  .process-board__papers, .process-board__tape { display: none; }
  .process-board__stage { display: grid; gap: var(--space-5); padding: var(--space-7) var(--gutter) var(--space-8); }
  .process-board__title, .process-board__script { position: relative; z-index: 1; }
  .process-board__title { background: var(--cream-50) var(--paper-grain); padding: var(--space-6) var(--space-5) calc(var(--space-8) + 2.2rem); margin: 0 calc(var(--gutter) * -1); font-size: clamp(1.9rem, 8.6vw, 4.5rem); transform: none; }
  .process-board__script { margin-top: calc(var(--space-8) * -1 - 2.2rem); padding-left: var(--space-5); font-size: clamp(1.8rem, 6vw, 2.4rem); white-space: normal; }
  .process-board .process-board__steps { display: grid; gap: var(--space-6); padding: var(--space-7) var(--space-5); background: var(--cream-50) var(--paper-grain); box-shadow: var(--shadow-paper); }
  .pb-step { display: grid; grid-template-columns: 52px 1fr; column-gap: var(--space-4); align-items: start; position: relative; }
  .pb-step__icon { grid-row: span 2; width: 48px; height: 48px; }
  .pb-step__badge { display: none; }
  .pb-step__title { font-size: 1.15rem; }
  .pb-step__text { font-size: 1rem; margin-top: 4px; }
}

/* ===================================================== ABOUT · SOBRE MÍ BOARD ===== */
/*
 * Faithful build of the "Sobre mí" board. Desktop (≥1200px): 1998×1008 stage (the board below its header);
 * positions in %, sizes in cqw (1cqw = 19.98 board px). The portrait collage (.about-board__visual) is its own
 * 829×770 sub-stage, so on phones it keeps its composition below the text.
 */
.about-board { position: relative; overflow: hidden; container-type: inline-size; color: var(--ink-950); }
.about-board__stage { position: relative; }
.ab-cream  { fill: var(--cream-50); }
.ab-deckle { fill: var(--paper-deckle); stroke: var(--paper-deckle); stroke-width: 9; stroke-linejoin: round; }
.ab-spark  { fill: var(--rose-500); }
.ab-spark-cream { fill: var(--paper-deckle); }
.ab-line   { fill: none; stroke: var(--ink-950); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.ab-blob   { fill: var(--blush-200); }
.ab-star-rose   { fill: var(--rose-500); }
.ab-star-shadow { fill: var(--rose-300); }
.ab-star-wine   { fill: var(--rose-700); }
.ab-ink   { fill: none; stroke: var(--ink-900); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ab-ink .ab-paper { fill: var(--cream-50); }
.ab-ink .ab-pin   { fill: var(--kraft-200); }

.about-board__title { font-family: var(--font-display); font-weight: 700; color: var(--ink-950); text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; text-wrap: initial; }
.about-board__script { font-family: var(--font-script); color: var(--ink-950); line-height: 1.02; text-align: center; text-wrap: initial; }
.about-board__text p { font-family: var(--font-sans); text-wrap: initial; }
.about-board__visual { position: relative; container-type: inline-size; aspect-ratio: 829 / 770; }
.about-board__visual > * { position: absolute; }
.about-board__visual-back, .about-board__visual-front { inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.about-board__portrait { left: 12.91%; top: 0; width: 77.2%; height: auto; filter: drop-shadow(0 0.6cqw 0.9cqw color-mix(in srgb, var(--burgundy-950) 28%, transparent)); }

.ab-sticker { display: grid; place-items: center; text-align: center; font-family: var(--font-sans); font-weight: 700; text-transform: uppercase;
  line-height: 1.02; letter-spacing: 0.01em; text-decoration: none; text-wrap: initial; transition: transform var(--dur-base) var(--ease-paper);
  box-shadow: 0 0.25em 0.5em color-mix(in srgb, var(--burgundy-950) 22%, transparent); }
.ab-sticker--beauty, .ab-sticker--tech { border-radius: 0.35em;
  --n: 0.5em; -webkit-mask: radial-gradient(circle var(--n) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat, radial-gradient(circle var(--n) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat;
  mask: radial-gradient(circle var(--n) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat, radial-gradient(circle var(--n) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat, radial-gradient(circle var(--n) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat; }
.ab-sticker--beauty  { background: var(--rose-300); color: var(--ink-950); rotate: -9deg; }
.ab-sticker--tech    { background: var(--rose-500); color: var(--cream-50); rotate: -5deg; }
.ab-sticker--fitness { background: var(--cream-50); color: var(--ink-950); border-radius: 50%; rotate: 7deg;
  box-shadow: inset 0 0 0 0.24em var(--cream-50), inset 0 0 0 0.31em var(--ink-950), 0 0.25em 0.5em color-mix(in srgb, var(--burgundy-950) 22%, transparent); }
.ab-sticker--langs   { background: var(--ink-950); color: var(--cream-50); border-radius: 50%; rotate: 10deg; letter-spacing: 0.02em; }
a.ab-sticker:hover { transform: scale(1.05); }
a.ab-sticker:focus-visible { outline: 3px solid var(--rose-600); outline-offset: 4px; }

@media (min-width: 1200px) {
  .about-board__stage { aspect-ratio: 1998 / 1008; max-width: var(--board-max); margin-inline: auto; container-type: inline-size; /* cqw = 1% of the stage, also past 1998px */ }
  .about-board__stage > * { position: absolute; }
  .about-board__papers { inset: 0; width: 100%; height: 100%; display: block; }
  .about-board__tape { left: 70.97%; top: 9.72%; translate: -50% -50%; --tape-w: 10.8cqw; --tape-h: 3.6cqw; --tape-rotate: 3deg; z-index: 2; }
  .about-board__heading { left: 11.26%; top: 13.5%; display: flex; align-items: flex-start; gap: 0.6cqw; }
  .about-board__title { font-size: 9.06cqw; transform: scaleX(0.92); transform-origin: left top; margin-right: -3.2cqw; /* give back the width scaleX removes */ }
  .about-board__script { flex: none; margin-top: 2.6cqw; width: 12.2cqw; font-size: 3.25cqw; rotate: -6deg; transform: scaleY(1.12); -webkit-text-stroke: 0.02em currentColor; }
  .about-board__copy { left: 11.26%; top: 35.6%; width: 44cqw; display: grid; gap: 2.6cqw; justify-items: start; }
  .about-board__text { width: 40.8cqw; font-size: 1.88cqw; line-height: 1.2; }
  .about-board__text p + p { margin-top: 2.3cqw; }
  .about-board__stickers { display: flex; align-items: center; gap: 1.4cqw; }
  .about-board__stickers li:nth-child(2) { margin-top: 1.6cqw; }
  .ab-sticker { font-size: 1.78cqw; }
  .ab-sticker--beauty  { width: 6.6em; height: 3.2em; }
  .ab-sticker--tech    { width: 5.8em; height: 2.9em; }
  .ab-sticker--fitness { width: 7.5em; height: 3.55em; font-size: 1.7cqw; }
  .ab-sticker--langs   { width: 7.6cqw; height: 7.6cqw; padding-inline: 1.3cqw; font-size: 1.22cqw; }
  .about-board__visual { left: 54.2%; top: 14.19%; width: 41.49%; }
}
@media (max-width: 1199px) {
  .about-board__papers, .about-board__tape { display: none; }
  .about-board__copy, .about-board__heading { display: contents; }
  .about-board__stage { display: grid; gap: var(--space-5); padding: var(--space-7) var(--gutter) var(--space-6); }
  .about-board__stage > :not(.about-board__visual) { position: relative; z-index: 1; }
  .about-board__title, .about-board__script, .about-board__text, .about-board__stickers { background: var(--cream-50) var(--paper-grain); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--space-6); }
  .about-board__title { padding-top: var(--space-7); font-size: clamp(3rem, 15vw, 6.5rem); white-space: normal; }
  .about-board__script { justify-self: stretch; text-align: right; font-size: clamp(2rem, 8vw, 3rem); margin-top: calc(var(--space-5) * -1); padding-block: 0 var(--space-3); }
  .about-board__script { rotate: none; }
  .about-board__text { font-size: 1.1rem; line-height: 1.45; margin-top: calc(var(--space-5) * -1); }
  .about-board__text p + p { margin-top: var(--space-4); }
  .about-board .about-board__stickers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-4); margin-top: calc(var(--space-5) * -1); padding: var(--space-6) var(--space-6) var(--space-7); }
  .ab-sticker { font-size: 1rem; }
  .ab-sticker--beauty  { width: 6.6em; height: 3.2em; }
  .ab-sticker--tech    { width: 5.8em; height: 2.9em; }
  .ab-sticker--fitness { width: 7.5em; height: 3.55em; }
  .ab-sticker--langs   { width: 5.6rem; height: 5.6rem; font-size: 0.72rem; }
  .about-board__visual { width: min(100%, 560px); justify-self: center; margin-top: var(--space-4); }
}

/* ===================================================== BOARDS · STACKED (below 1200px) ===== */
/* When a board falls back to normal flow, its cream sheet keeps the torn paper edges of the desktop board. */
@media (max-width: 1199px) {
  .about-board__title,
  .about-board .about-board__stickers,
  .process-board__title,
  .process-board .process-board__steps { --tear: 18px; }
  .about-board__title {
    -webkit-mask: linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--tear) + 1px) no-repeat, var(--torn-edge-top) top / var(--tear-tile) var(--tear) repeat-x;
    mask: linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--tear) + 1px) no-repeat, var(--torn-edge-top) top / var(--tear-tile) var(--tear) repeat-x;
  }
  .about-board .about-board__stickers {
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--tear) + 1px) no-repeat, var(--torn-edge-bottom) bottom / var(--tear-tile) var(--tear) repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--tear) + 1px) no-repeat, var(--torn-edge-bottom) bottom / var(--tear-tile) var(--tear) repeat-x;
  }
  .process-board__title,
  .process-board .process-board__steps {
    -webkit-mask: linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--tear) + 2px) no-repeat, var(--torn-edge-top) top / var(--tear-tile) var(--tear) repeat-x, var(--torn-edge-bottom) bottom / var(--tear-tile) var(--tear) repeat-x;
    mask: linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--tear) + 2px) no-repeat, var(--torn-edge-top) top / var(--tear-tile) var(--tear) repeat-x, var(--torn-edge-bottom) bottom / var(--tear-tile) var(--tear) repeat-x;
  }
  .process-board .process-board__steps { box-shadow: none; }
}