/* ==========================================================================
   components.css — the reusable component library
   Depends on: tokens.css, base.css
   Sections:
     1. Surfaces (paper, dotted, torn edges)
     2. Scrapbook decoration (tape, stars, arrows, annotations, stickers)
     3. Media frames (polaroid, cutout portrait)
     4. Buttons, links, icon buttons, chips, language switch
     5. Header, navigation, drawer, footer
     6. Section heading
     7. Video card, lang badge, video grid, video modal
     8. Category card, service card, timeline
     9. Contact methods, form
   ========================================================================== */

:root {
  --tear: 14px;
  --tear-tile: 260px;
  --torn-edge-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0H240V8L229 14.7L216 5.7L212 11.5L211 13.4L167 8.8L162 9.5L161 5.2L150 11.1L145 12.3L142 5.9L138 7.9L130 9.6L112 6.1L109 7.6L108 10.8L102 4.7L94 2.8L83 2.8L62 9.1L58 6.8L55 10.3L39 9.6L32 4.3L25 12.6L24 6.0L23 3.5L19 3.9L18 5.8L16 13.2L15 2.6L13 14.7L10 7.2L0 8Z'/%3E%3C/svg%3E");
  --torn-edge-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16H240V8L239 5.0L236 5.0L225 4.3L210 4.0L205 14.5L203 13.5L196 6.7L194 7.4L179 5.6L178 13.2L172 12.7L171 13.5L153 9.1L149 7.8L147 3.0L143 13.3L128 7.1L126 5.2L122 3.7L117 12.0L108 2.8L90 3.5L88 4.2L81 8.0L70 2.3L43 10.7L39 7.0L24 5.7L20 12.7L18 14.9L17 10.4L11 11.1L0 8Z'/%3E%3C/svg%3E");
  --torn-edge-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 240' preserveAspectRatio='none'%3E%3Cpath d='M0 0V240H8L3.9 220L8.9 213L14.4 205L2.3 200L4.1 190L12.8 177L5.4 175L6.5 174L3.3 168L3.1 159L8.3 157L8.1 151L14.9 145L13.0 144L3.6 137L6.7 132L6.5 124L5.3 117L3.9 108L10.0 103L13.4 102L2.3 101L6.7 95L3.3 82L4.0 73L2.0 68L2.7 47L6.4 38L4.1 33L4.7 27L2.9 14L2.8 2L8 0Z'/%3E%3C/svg%3E");
  --torn-edge-sides: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='240'%3E%3Cpath d='M16 0L10.5 0L10.0 11L4.0 24L2.2 25L8.9 37L2.8 48L4.5 49L5.1 78L2.4 102L8.0 115L7.7 116L13.0 120L8.7 122L10.3 131L8.5 132L10.6 138L7.9 144L5.6 151L15.0 153L14.9 158L12.9 162L11.2 163L6.1 178L5.0 200L5.8 204L2.9 206L12.0 208L7.2 219L13.0 220L7.0 222L14.5 228L13.0 233L2.0 239L4.7 240L16 240Z'/%3E%3Csvg x='100%25' overflow='visible'%3E%3Cpath d='M-16 0L-10.9 0L-4.4 3L-8.6 4L-14.8 14L-12.0 16L-7.4 19L-7.0 23L-7.1 26L-14.9 31L-2.0 35L-13.2 46L-14.7 51L-9.7 64L-15.0 70L-2.3 80L-4.4 86L-14.9 87L-9.8 97L-9.5 102L-2.5 105L-3.9 108L-7.7 120L-2.1 121L-9.9 125L-12.8 145L-7.0 162L-3.0 173L-4.7 181L-10.3 182L-2.2 195L-6.8 200L-10.1 205L-3.7 234L-9.6 240L-16 240Z'/%3E%3C/svg%3E%3Crect x='15' width='50%25' height='240'/%3E%3Crect x='50%25' width='50%25' height='240' transform='translate(-15 0)'/%3E%3C/svg%3E");
  --torn-edge-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 240' preserveAspectRatio='none'%3E%3Cpath d='M16 0V240H8L10.3 238L7.6 224L13.6 222L4.6 217L11.2 208L7.1 207L3.6 202L12.9 200L10.4 198L6.5 195L13.8 190L2.0 179L9.9 165L14.8 163L8.3 157L6.4 139L8.1 137L3.3 136L3.0 133L14.7 129L6.5 103L11.4 94L12.5 92L6.5 85L9.9 77L4.5 67L8.1 62L12.3 58L14.9 50L11.5 43L8.4 24L4.6 7L8 0Z'/%3E%3C/svg%3E");
}

/* 1. SURFACES ============================================================= */

.surface-dotted {
  background-color: var(--surface-dark);
  background-image: radial-gradient(var(--dot-on-dark) 1.2px, transparent 1.7px);
  background-size: var(--dot-size) var(--dot-size);
}
.surface-dotted--deep { background-color: var(--surface-darker); }

.paper {
  position: relative;
  background-color: var(--surface-paper);
  background-image: var(--paper-grain);
  color: var(--text-primary);
}
.paper--alt   { background-color: var(--surface-paper-alt); }
.paper--blush { background-color: var(--surface-blush); }
.paper--kraft { background-color: var(--kraft-300); }
.paper--dotted {
  background-image: var(--paper-grain), radial-gradient(var(--dot-on-paper) 1.2px, transparent 1.7px);
  background-size: auto, var(--dot-size) var(--dot-size);
}

/* Torn edges — applied with CSS masks; combine with any surface. */
.torn-b {
  -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;
}
.torn-t {
  -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;
}
.torn-y {
  -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;
}
.torn-r {
  -webkit-mask: linear-gradient(#000 0 0) left / calc(100% - var(--tear) + 1px) 100% no-repeat,
    var(--torn-edge-right) right / var(--tear) var(--tear-tile) repeat-y;
  mask: linear-gradient(#000 0 0) left / calc(100% - var(--tear) + 1px) 100% no-repeat,
    var(--torn-edge-right) right / var(--tear) var(--tear-tile) repeat-y;
}
.torn-l {
  -webkit-mask: linear-gradient(#000 0 0) right / calc(100% - var(--tear) + 1px) 100% no-repeat,
    var(--torn-edge-left) left / var(--tear) var(--tear-tile) repeat-y;
  mask: linear-gradient(#000 0 0) right / calc(100% - var(--tear) + 1px) 100% no-repeat,
    var(--torn-edge-left) left / var(--tear) var(--tear-tile) repeat-y;
}
.torn-all {
  /* Fallback (no mask-composite): top + bottom edges only */
  -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;
  /* All four edges: (left + right sides) ∩ (top + bottom shape) */
  mask: var(--torn-edge-sides) 0 0 / 100% 240px repeat-y,
    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-composite: intersect, add, add, add;
}
/* Wrap a torn surface in .paper-shadow to give it depth (masks clip box-shadow). */
.paper-shadow { filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--burgundy-950) 28%, transparent)); }

/* Paper placed inside a dark (.on-dark) section switches back to paper colours */
.on-dark .paper { --focus-ring: var(--rose-600); color: var(--text-primary); }
.on-dark .paper .eyebrow { color: var(--text-secondary); }
.on-dark .paper .text-link { color: var(--interactive); }
.on-dark .paper .annotation { --annotation-color: var(--ink-900); }
.on-dark .paper .section-heading__title,
.on-dark .paper .video-card__title { color: var(--text-display); }
.on-dark .paper .video-card__meta { color: var(--text-secondary); }

/* Editorial content panel: torn paper sheet that holds readable text */
.panel {
  position: relative;
  padding: clamp(var(--space-6), 5vw, var(--space-9)) clamp(var(--space-5), 5vw, var(--space-9));
}

/* 2. SCRAPBOOK DECORATION ================================================= */

.tape {
  position: absolute;
  z-index: var(--z-sticker);
  width: var(--tape-w, 120px);
  height: var(--tape-h, 32px);
  background: var(--tape);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--burgundy-950) 12%, transparent);
  transform: rotate(var(--tape-rotate, -4deg));
  clip-path: polygon(2% 0, 98% 4%, 96% 22%, 100% 38%, 97% 60%, 100% 80%, 97% 100%, 3% 96%, 0 78%, 3% 58%, 0 40%, 4% 20%);
  pointer-events: none;
}
.tape--pink { background: color-mix(in srgb, var(--pink-400) 82%, transparent); }
.tape--top    { top: calc(var(--tape-h, 32px) / -2); left: 50%; translate: -50% 0; }
.tape--tl     { top: -10px; left: -24px; --tape-rotate: -32deg; }
.tape--tr     { top: -10px; right: -24px; --tape-rotate: 32deg; }
.tape--br     { bottom: -8px; right: -20px; --tape-rotate: -28deg; }

.deco {
  position: absolute;
  z-index: var(--z-deco);
  pointer-events: none;
  width: var(--deco-size, 40px);
  height: var(--deco-size, 40px);
  color: var(--deco-color, var(--accent-soft));
  transform: rotate(var(--deco-rotate, 0deg));
}
.deco--rose  { --deco-color: var(--rose-600); }
.deco--wine  { --deco-color: var(--burgundy-800); }
.deco--cream { --deco-color: var(--cream-50); }
.deco--blush { --deco-color: var(--blush-200); }
.deco--ink   { --deco-color: var(--ink-900); }
.deco svg { width: 100%; height: 100%; }

.annotation {
  font-family: var(--font-script);
  font-size: var(--annotation-size, 2.4rem);
  line-height: 1.05;
  color: var(--annotation-color, var(--ink-900));
  transform: rotate(var(--annotation-rotate, -6deg));
  display: inline-block;
}
.on-dark .annotation { --annotation-color: var(--cream-50); }

/* Sticker / rounded vintage label */
.sticker {
  --sticker-bg: var(--blush-200);
  --sticker-fg: var(--burgundy-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.55em 1.1em;
  background: var(--sticker-bg);
  color: var(--sticker-fg);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sticker);
  transform: rotate(var(--tilt, -4deg));
  transition: transform var(--dur-base) var(--ease-paper);
}
/* Ticket shape: notched corners */
.sticker--ticket {
  border-radius: 6px;
  -webkit-mask: radial-gradient(circle 7px at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle 7px at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle 7px at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle 7px at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat;
  mask: radial-gradient(circle 7px at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle 7px at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle 7px at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle 7px at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat;
}
.sticker--rose  { --sticker-bg: var(--rose-600); --sticker-fg: var(--cream-50); }
.sticker--cream { --sticker-bg: var(--cream-100); --sticker-fg: var(--burgundy-800); box-shadow: inset 0 0 0 2px var(--burgundy-800), var(--shadow-sticker); }
.sticker--dark  { --sticker-bg: var(--burgundy-950); --sticker-fg: var(--cream-50); }
.sticker--oval  { border-radius: 50%; padding: 1.1em 1.6em; }
.sticker--round {
  border-radius: 50%;
  width: var(--sticker-d, 128px);
  height: var(--sticker-d, 128px);
  padding: var(--space-3);
  font-size: 0.8rem;
}
.sticker--round.sticker--serif { font-family: var(--font-display); text-transform: none; font-size: 1.15rem; letter-spacing: 0; line-height: 1; }
a.sticker:hover { transform: rotate(0deg) scale(1.04); }

/* 3. MEDIA FRAMES ========================================================= */

.polaroid {
  position: relative;
  background: var(--cream-50);
  padding: var(--space-3) var(--space-3) var(--space-6);
  box-shadow: var(--shadow-paper);
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--dur-base) var(--ease-paper), box-shadow var(--dur-base) var(--ease-out);
}
.polaroid img { width: 100%; aspect-ratio: var(--ratio, 1); object-fit: cover; }
.polaroid figcaption {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.polaroid--interactive:hover { transform: rotate(0deg) translateY(-6px); box-shadow: var(--shadow-lift); }

.cutout {
  position: relative;
  border: clamp(6px, 0.9vw, 10px) solid var(--cream-50);
  border-radius: var(--radius-lg) var(--radius-lg) 46% 40% / var(--radius-lg) var(--radius-lg) 12% 10%;
  overflow: hidden;
  box-shadow: var(--shadow-paper);
  background: var(--blush-200);
}
.cutout img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }

/* 4. CONTROLS ============================================================= */

.btn {
  --btn-bg: var(--interactive);
  --btn-fg: var(--text-on-accent);
  --btn-bg-hover: var(--interactive-hover);
  --btn-border: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: 0.95em 1.7em;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid var(--btn-border);
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--burgundy-950) 35%, transparent);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; transition: transform var(--dur-base) var(--ease-paper); }
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-2px); box-shadow: 0 5px 0 color-mix(in srgb, var(--burgundy-950) 35%, transparent); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 color-mix(in srgb, var(--burgundy-950) 35%, transparent); background: var(--btn-bg-active, var(--interactive-active)); }

.btn--accent { --btn-bg: var(--accent); --btn-bg-hover: var(--accent-hover); --btn-bg-active: var(--burgundy-800); }
.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--interactive);
  --btn-bg-hover: var(--blush-100);
  --btn-bg-active: var(--blush-200);
  --btn-border: var(--border-strong);
  box-shadow: none;
}
.btn--secondary:hover, .btn--secondary:active { box-shadow: none; }
.btn--on-dark {
  --btn-bg: var(--cream-50);
  --btn-fg: var(--burgundy-800);
  --btn-bg-hover: var(--blush-100);
  --btn-bg-active: var(--blush-200);
}
.btn--ghost-on-dark {
  --btn-bg: transparent;
  --btn-fg: var(--cream-50);
  --btn-bg-hover: color-mix(in srgb, var(--cream-50) 12%, transparent);
  --btn-bg-active: color-mix(in srgb, var(--cream-50) 20%, transparent);
  --btn-border: var(--cream-50);
  box-shadow: none;
}
.btn--sm { padding: 0.7em 1.2em; font-size: 13px; }
.btn--lg { padding: 1.1em 2.1em; font-size: 16px; }
.btn--tilt { transform: rotate(-3deg); }
.btn--tilt:hover { transform: rotate(0deg) translateY(-2px); }

.btn:disabled,
.btn[aria-disabled="true"] {
  --btn-bg: var(--disabled-fill);
  --btn-bg-hover: var(--disabled-fill);
  --btn-fg: var(--disabled-text);
  --btn-border: transparent;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--interactive);
  text-decoration: underline;
  text-decoration-color: var(--pink-400);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
  min-height: var(--tap-min);
}
.text-link svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-base) var(--ease-paper); }
.text-link:hover { text-decoration-color: currentColor; }
.text-link:hover svg { transform: translateX(4px); }
.on-dark .text-link { color: var(--cream-50); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  color: var(--icon-btn-fg, var(--burgundy-800));
  background: var(--icon-btn-bg, var(--cream-50));
  box-shadow: var(--shadow-sticker);
  transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: var(--blush-100); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.icon-btn--dark { --icon-btn-bg: var(--burgundy-800); --icon-btn-fg: var(--cream-50); }
.icon-btn--dark:hover { background: var(--burgundy-700); }

/* Filter chip — aria-pressed reflects selection */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0.6em 1.15em;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--burgundy-800);
  background: var(--cream-50);
  border: 2px solid var(--burgundy-800);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-base) var(--ease-paper);
}
.chip:hover { background: var(--blush-100); }
.chip[aria-pressed="true"],
.chip[aria-current="true"] { background: var(--burgundy-800); color: var(--cream-50); transform: rotate(-2deg); }
.chip__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.4em;
  font-size: 0.78em;
  letter-spacing: 0;
  border-radius: var(--radius-pill);
  background: var(--blush-200);
  color: var(--burgundy-800);
}
.chip:disabled { border-color: var(--disabled-fill); color: var(--disabled-text); background: var(--disabled-fill); cursor: not-allowed; }

/* Language switch ES / EN */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lang-switch__sep { opacity: 0.6; padding-inline: 2px; }
.lang-switch button {
  position: relative;
  min-width: var(--tap-min);
  min-height: 36px;
  padding: 0.35em 0.8em;
  border-radius: var(--radius-pill);
  border: 1.5px solid currentColor;
  color: inherit;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
/* The pill stays 36px tall; the hit area reaches the 44px minimum. */
.lang-switch button::before { content: ""; position: absolute; inset: -4px 0; }
.lang-switch button[aria-pressed="true"] { background: var(--cream-50); color: var(--burgundy-800); border-color: var(--cream-50); }
.lang-switch button:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--cream-50) 14%, transparent); }
.lang-switch--on-paper button[aria-pressed="true"] { background: var(--burgundy-800); color: var(--cream-50); border-color: var(--burgundy-800); }
.lang-switch--on-paper button:not([aria-pressed="true"]):hover { background: var(--blush-100); }

/* 5. HEADER, NAV, DRAWER, FOOTER ========================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--surface-darker);
  color: var(--text-on-dark);
  border-bottom: 1px solid var(--border-on-dark);
  --focus-ring: var(--focus-ring-on-dark);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-height);
}
.brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__list { display: flex; align-items: center; gap: var(--space-1); }
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-on-dark-muted);
  transition: color var(--dur-fast);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 8px;
  height: 2px;
  background: var(--pink-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.site-nav__link:hover { color: var(--cream-50); }
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__link[aria-current="page"] { color: var(--cream-50); font-weight: 700; }

.site-header__tools { display: flex; align-items: center; gap: var(--space-3); }
.menu-toggle {
  display: none;
  width: var(--tap-min);
  height: var(--tap-min);
  place-items: center;
  border-radius: 50%;
  color: var(--cream-50);
}
.menu-toggle svg { width: 26px; height: 26px; }
.menu-toggle:hover { background: color-mix(in srgb, var(--cream-50) 12%, transparent); }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
.site-nav__backdrop { display: none; }

@media (max-width: 1023px) {
  .menu-toggle { display: inline-grid; }
  .site-nav {
    position: fixed;
    inset: var(--header-height) 0 auto auto;
    width: min(360px, 100%);
    height: calc(100dvh - var(--header-height));
    z-index: var(--z-drawer);
    padding: var(--space-6) var(--space-5);
    background-color: var(--surface-dark);
    background-image: radial-gradient(var(--dot-on-dark) 1.2px, transparent 1.7px);
    background-size: var(--dot-size) var(--dot-size);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
    overflow-y: auto;
  }
  .site-nav.is-open { transform: none; visibility: visible; transition: transform var(--dur-base) var(--ease-out); }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .site-nav__link {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
    padding: var(--space-2) 0;
  }
  .site-nav__link::after { left: 0; right: auto; width: 2.5rem; bottom: 4px; }
  .site-nav__backdrop {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    z-index: calc(var(--z-drawer) - 1);
    background: var(--overlay-scrim);
  }
  .site-nav.is-open + .site-nav__backdrop { display: block; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 420px) {
  .site-header__inner { gap: var(--space-3); }
  .site-header__tools { gap: var(--space-2); }
  .brand { font-size: 1.05rem; }
  .lang-switch button { min-width: 40px; padding-inline: 0.55em; }
}
/* Smallest phones: the name breaks onto two lines so brand, ES/EN and menu fit in 320px. */
@media (max-width: 374px) {
  .site-header .brand { white-space: normal; max-width: 6em; line-height: 1.05; }
}

.site-footer {
  position: relative;
  background: var(--surface-deepest);
  border-top: 1px solid var(--border-on-dark);
  color: var(--text-on-dark-muted);
  --focus-ring: var(--focus-ring-on-dark);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Mobile: everything stacked and centred. */
.site-footer__top {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  padding-block: var(--space-7) var(--space-5);
  text-align: center;
}
.site-footer__brand .brand { color: var(--text-on-dark); }
.site-footer__tagline { margin-top: var(--space-1); }
.site-footer__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-4); }
.site-footer a { text-decoration: none; display: inline-flex; min-height: var(--tap-min); align-items: center; }
.site-footer a:hover { color: var(--cream-50); text-decoration: underline; }
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-on-dark);
}
.site-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  color: var(--text-on-dark);
  text-transform: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-on-dark);
  text-underline-offset: 0.3em;
}
.site-footer__credit:hover { text-decoration-color: currentColor; }
.site-footer__logo { height: var(--space-5); width: auto; }

/* Credit card: native popover opened from the footer credit (Esc / outside click close it).
   Mobile: bottom sheet. Desktop: card above the credit, placed by js/modules/credit.js. */
.credit-card {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  width: 100%;
  max-width: none;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface-paper);
  color: var(--text-primary);
  box-shadow: var(--shadow-modal);
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  --focus-ring: var(--rose-600);
}
.credit-card:popover-open { display: grid; gap: var(--space-3); animation: modal-in var(--dur-base) var(--ease-out); }
.credit-card::backdrop { background: var(--overlay-scrim); }
.credit-card__close { position: absolute; top: var(--space-3); right: var(--space-3); box-shadow: none; }
.credit-card__close svg { width: 18px; height: 18px; }
.credit-card__title { font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.15; color: var(--text-display); padding-right: var(--space-7); }
.credit-card__text { font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.credit-card__cta { margin-top: var(--space-2); width: 100%; }
@media (min-width: 768px) {
  .credit-card {
    inset: auto var(--credit-right, var(--space-5)) var(--credit-bottom, var(--space-5)) auto;
    width: 380px;
    padding: var(--space-5);
    border-radius: var(--radius-md);
  }
  .credit-card::backdrop { background: transparent; }
}
/* Desktop: brand left, nav right; location left, credit right. */
@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: 1fr auto;
    justify-items: start;
    align-items: center;
    padding-block: var(--space-8) var(--space-6);
    text-align: start;
  }
  .site-footer__nav ul { justify-content: flex-end; }
  .site-footer__bottom { flex-direction: row; justify-content: space-between; }
}

/* 6. SECTION HEADING ====================================================== */

.section-heading { position: relative; display: grid; gap: var(--space-3); }
.eyebrow {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.on-dark .eyebrow { color: var(--text-on-dark-muted); }
.section-heading__title { font-size: var(--fs-h2); line-height: 1.05; text-transform: uppercase; }
.on-dark .section-heading__title { color: var(--cream-50); }
.section-heading__lead { font-size: var(--fs-body-lg); max-width: 38ch; }
.section-heading .annotation { justify-self: start; margin-top: calc(var(--space-2) * -1); }

/* 7. VIDEO CARD ============================================================ */

/* Explicit columns (2 → 3 → 4) so the four featured videos never leave a lone card on a row. */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7) var(--space-6);
}
@media (min-width: 900px) { .video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 559px) {
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
}

.video-card {
  position: relative;
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  --tilt: 0deg;
}
.video-card:nth-child(4n + 1) { --tilt: -1.6deg; }
.video-card:nth-child(4n + 2) { --tilt: 1.2deg; }
.video-card:nth-child(4n + 3) { --tilt: -0.8deg; }
.video-card:nth-child(4n + 4) { --tilt: 1.8deg; }

.video-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  background: var(--cream-50);
  border: clamp(5px, 0.7vw, 8px) solid var(--cream-50);
  box-shadow: var(--shadow-paper);
  transform: rotate(var(--tilt));
  transition: transform var(--dur-base) var(--ease-paper), box-shadow var(--dur-base) var(--ease-out);
  text-align: left;
  cursor: pointer;
}
.video-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--blush-200);
}
.video-card__media:hover,
.video-card__media:focus-visible { transform: rotate(0deg) translateY(-8px); box-shadow: var(--shadow-lift); }
.video-card__media:focus-visible { outline-offset: 6px; }

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--play-size, 34%);
  aspect-ratio: 1;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--overlay-play);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--burgundy-800);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--burgundy-950) 25%, transparent);
  transition: transform var(--dur-base) var(--ease-paper), background-color var(--dur-fast);
}
.video-card__play svg { width: 38%; height: 38%; margin-left: 6%; }
.video-card__media:hover .video-card__play { transform: scale(1.08); background: var(--cream-50); }

.video-card .tape { --tape-w: 84px; --tape-h: 26px; top: -14px; left: 50%; translate: -50% 0; }
.video-card:nth-child(odd) .tape { background: color-mix(in srgb, var(--pink-400) 85%, transparent); }

.video-card__badges {
  position: absolute;
  inset: auto var(--space-2) var(--space-2) var(--space-2);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-2);
  pointer-events: none;
}
.video-card__body { display: grid; gap: var(--space-1); padding-inline: var(--space-1); }
.video-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.15;
  color: var(--text-display);
}
.video-card__index { font-variant-numeric: lining-nums; }
.video-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* Separator hangs after each item (not before the next) so a wrapped line never starts with "·". */
.video-card__meta span:not(:last-child)::after { content: "·"; margin-left: var(--space-2); }
.on-dark .video-card__title { color: var(--cream-50); }
.on-dark .video-card__meta { color: var(--text-on-dark-muted); }

/* Phone-frame variant (Beauty references): larger play disc, as on the Beauty board */
.video-card--phone { --play-size: 54%; }
.video-card--phone .video-card__media {
  border: 7px solid var(--burgundy-900);
  border-radius: 26px;
  overflow: hidden;
}

.lang-badge {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rose-600);
  color: var(--cream-50);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: var(--shadow-sticker);
}
.lang-badge--en { background: var(--burgundy-800); }

.format-tag {
  display: inline-block;
  padding: 0.4em 0.75em;
  background: var(--blush-200);
  color: var(--burgundy-800);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transform: rotate(-2deg);
}
.placeholder-tag {
  display: inline-block;
  white-space: nowrap;
  padding: 0.35em 0.6em;
  background: var(--cream-50);
  color: var(--ink-600);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1.5px dashed var(--ink-600);
  border-radius: var(--radius-sm);
}
/* Two columns on phones: the "pending" tag may wrap so it never pushes the ES/EN badge out of the card. */
@media (max-width: 559px) {
  .placeholder-tag { font-size: 9px; letter-spacing: 0.06em; white-space: normal; line-height: 1.2; }
  .video-card__badges .lang-badge { width: 34px; height: 34px; font-size: 12px; flex: none; }
}

/* Empty / loading / error states for video lists */
.video-state {
  grid-column: 1 / -1;
  padding: var(--space-7) var(--space-5);
  text-align: center;
  border: 2px dashed var(--border-control);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.skeleton-card { aspect-ratio: 9 / 16; background: linear-gradient(100deg, var(--cream-100) 40%, var(--cream-50) 50%, var(--cream-100) 60%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }

/* Video modal (native <dialog>) */
.video-modal {
  width: min(960px, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100dvh - 2 * var(--space-4));
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-deepest);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-modal);
  overflow: auto;
  --focus-ring: var(--focus-ring-on-dark);
}
.video-modal::backdrop { background: var(--overlay-scrim); }
.video-modal[open] { animation: modal-in var(--dur-base) var(--ease-out); }
.video-modal[open]::backdrop { animation: fade-in var(--dur-base) var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
@keyframes fade-in { from { opacity: 0; } }

.video-modal__layout {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
}
@media (min-width: 768px) {
  .video-modal__layout { grid-template-columns: minmax(0, 360px) 1fr; padding: var(--space-6); gap: var(--space-6); align-items: start; }
}
.video-modal__close { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; }
.video-modal__stage {
  position: relative;
  aspect-ratio: 9 / 16;
  /* Shrink the width (not just the height) on short screens so the frame stays 9:16. */
  width: min(100%, (100dvh - 180px) * 9 / 16);
  margin-inline: auto;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.video-modal__stage video,
.video-modal__stage iframe,
.video-modal__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-modal__state {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: center;
  background: color-mix(in srgb, var(--burgundy-950) 72%, transparent);
  font-size: 15px;
}
.video-modal__state svg { width: 40px; height: 40px; }
.spinner { width: 40px; height: 40px; border: 3px solid var(--cream-50); border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
.video-modal__controls { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); justify-content: center; }
.video-modal__info { display: grid; gap: var(--space-4); align-content: start; padding-top: var(--space-2); }
.video-modal__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.1; color: var(--cream-50); padding-right: var(--space-8); }
.video-modal__note {
  padding: var(--space-3) var(--space-4);
  border: 1.5px dashed var(--border-on-dark);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-on-dark-muted);
}

/* 8. CATEGORY CARD, SERVICE CARD, TIMELINE ================================ */

.category-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: var(--text-primary);
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--dur-base) var(--ease-paper);
}
.category-card:hover { transform: rotate(0deg) translateY(-6px); }
.category-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 8px solid var(--cream-50); border-bottom: 0; background: var(--blush-200); }
.category-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.category-card:hover .category-card__media img { transform: scale(1.04); }
.category-card__media .video-card__play { width: var(--play-size, 26%); }
@media (max-width: 599px) { .category-card__media { aspect-ratio: 4 / 3; } }
.category-card__body { display: grid; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-6); }
.category-card__title { font-size: var(--fs-h3); line-height: 1.05; }
.category-card__count { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }

.service-card {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5) var(--space-7);
  transform: rotate(var(--tilt, 0deg));
}
.service-card__num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--rose-600);
  font-weight: 600;
}
.service-card__num::after { content: " —"; }
.service-card__title { font-size: var(--fs-h4); line-height: 1.1; text-transform: uppercase; }
.service-card__text { font-size: 15px; line-height: 1.5; color: var(--text-primary); max-width: 32ch; }
.service-card__icon { width: 44px; height: 44px; color: var(--rose-600); margin-bottom: var(--space-2); }

/* Collaboration timeline: zig-zag path on desktop, vertical rail on mobile */
.timeline { position: relative; display: grid; gap: var(--space-6); counter-reset: step; }
.timeline__rail {
  position: absolute;
  left: 27px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: repeating-linear-gradient(to bottom, var(--pink-400) 0 8px, transparent 8px 14px);
  pointer-events: none;
}
.timeline__progress {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--progress, 0) * 100%);
  background: var(--rose-600);
  transition: height 120ms linear;
}
.timeline__step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-4);
  align-items: start;
}
.timeline__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cream-50);
  color: var(--burgundy-800);
  box-shadow: inset 0 0 0 2px var(--burgundy-800);
  transition: background-color var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-paper);
}
.timeline__icon svg { width: 28px; height: 28px; }
.timeline__step.is-active .timeline__icon { background: var(--burgundy-800); color: var(--cream-50); transform: rotate(-8deg) scale(1.06); }
.timeline__title { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--burgundy-800); }
.timeline__num { color: var(--rose-600); }
.timeline__text { font-size: 1.05rem; max-width: 30ch; }

@media (min-width: 900px) {
  .timeline { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-9); }
  .timeline__rail { left: 50%; translate: -50% 0; }
  .timeline__step:nth-child(odd of .timeline__step) { grid-column: 1; }
  .timeline__step:nth-child(even of .timeline__step) { grid-column: 2; margin-top: var(--space-9); }
}

/* 9. CONTACT METHODS, FORM ================================================ */

.contact-methods { display: grid; gap: var(--space-4) var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.contact-method {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-3);
  align-items: center;
  min-height: var(--tap-min);
  text-decoration: none;
  color: var(--text-primary);
}
.contact-method__icon { width: 40px; height: 40px; color: var(--burgundy-800); }
.contact-method__label { display: block; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 15px; color: var(--burgundy-800); }
.contact-method__value { display: block; font-size: 14px; color: var(--text-secondary); word-break: break-word; }
a.contact-method:hover .contact-method__value { color: var(--burgundy-800); text-decoration: underline; }
.contact-method[aria-disabled="true"] { cursor: default; }

.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--space-2); }
.field__label { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--burgundy-800); }
.field__optional { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
.input {
  width: 100%;
  min-height: 48px;
  padding: 0.75em 1em;
  font-size: 16px;
  color: var(--text-primary);
  background: var(--cream-50);
  border: 1.5px solid var(--border-control);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder { color: var(--ink-600); opacity: 0.75; }
.input:hover { border-color: var(--burgundy-800); }
.input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--burgundy-800); }
textarea.input { min-height: 150px; resize: vertical; line-height: 1.5; }
.input[aria-invalid="true"] { border-color: var(--red-700); border-width: 2px; }
.input:disabled { background: var(--disabled-fill); color: var(--disabled-text); cursor: not-allowed; }
.field__error { display: flex; gap: var(--space-2); align-items: center; font-size: 14px; font-weight: 600; color: var(--red-700); }
.field__error svg { width: 16px; height: 16px; flex: none; }
.field__error:empty { display: none; }
.form-status {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 15px;
  border: 2px solid currentColor;
}
.form-status--success { color: var(--green-700); background: var(--cream-50); }
.form-status--error { color: var(--red-700); background: var(--cream-50); }